/* ============================================================
   CONNECTED MEDIA GROUP — Global Stylesheet
   File: connected-global.css
   Save to: wp-content/themes/connected-theme/connected-global.css
   ============================================================ */

/* ── CERA PRO FONTS ── */
@font-face {
  font-family: 'Cera Pro';
  src: url('fonts/CeraPro-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cera Pro';
  src: url('fonts/CeraPro-Regular.eot');
  src: url('fonts/CeraPro-Regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/CeraPro-Regular.woff') format('woff'),
       url('fonts/CeraPro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium — add when file available
@font-face {
  font-family: 'Cera Pro';
  src: url('fonts/CeraPro-Medium.woff2') format('woff2'),
       url('fonts/CeraPro-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
} */

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

@font-face {
  font-family: 'Cera Pro';
  src: url('fonts/CeraPro-Black.woff2') format('woff2'),
       url('fonts/CeraPro-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── BRAND VARIABLES ── */
:root {
  --c-blue:        #0000FF;
  --c-blue-dark:   #0000cc;
  --c-blue-light:  #e5e5ff;
  --c-white:       #ffffff;
  --c-dark-blue:   #121661;
  --c-mid-blue:    #000096;
  --c-turquoise:   #11C482;
  --c-crimson:     #B30243;
  --c-teal:        #007396;
  --c-sky-blue:    #00B0F0;
  --c-dark-purple: #7030A0;
  --c-orchid:      #CD62B8;
  --c-mustard:     #E69C47;
  --c-black:       #0d0d0d;
  --c-off-white:   #f5f5f7;
  --c-muted:       #666666;
  --c-border:      #e0e0e0;
  --font-heading:  'Cera Pro', sans-serif;
  --font-body:     'Cera Pro', sans-serif;
  --space-xs:      0.5rem;
  --space-sm:      1rem;
  --space-md:      2rem;
  --space-lg:      4rem;
  --space-xl:      7rem;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-xl:     32px;
  --radius-pill:   50px;
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-black);
  background: var(--c-white);
  overflow-x: hidden;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--c-blue);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover { color: var(--c-blue-dark); }

ul, ol { list-style: none; }

/* ── HEADINGS ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-black);
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

h1 em, h2 em, h3 em {
  font-style: normal;
  color: var(--c-blue);
}

/* ── BODY TEXT ── */
p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-muted);
  margin-bottom: 1rem;
}
p:last-child { margin-bottom: 0; }

.text-large  { font-size: 1.15rem; line-height: 1.8; }
.text-small  { font-size: 0.875rem; }
.text-muted  { color: var(--c-muted); }
.text-white  { color: var(--c-white); }
.text-blue   { color: var(--c-blue); }
.text-center { text-align: center; }
.text-bold   { font-weight: 700; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 1rem;
}

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 13px 30px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1;
}
.btn:hover { transform: none; }
.btn:active { transform: none; }

.btn-primary {
  background: var(--c-blue);
  color: var(--c-white);
  border-color: var(--c-blue);
}
.btn-primary:hover {
  background: var(--c-sky-blue);
  border-color: var(--c-sky-blue);
  color: var(--c-white);
}

.btn-secondary {
  background: transparent;
  color: var(--c-blue);
  border-color: var(--c-blue);
}
.btn-secondary:hover {
  background: var(--c-sky-blue);
  border-color: var(--c-sky-blue);
  color: var(--c-white);
}

.btn-white {
  background: var(--c-white);
  color: var(--c-blue);
  border-color: var(--c-white);
}
.btn-white:hover {
  background: var(--c-sky-blue);
  border-color: var(--c-sky-blue);
  color: var(--c-white);
}

.btn-ghost {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255,255,255,0.6);
}
.btn-ghost:hover {
  background: var(--c-sky-blue);
  border-color: var(--c-sky-blue);
  color: var(--c-white);
}

/* ── LAYOUT ── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 5vw;
}

.section     { padding: var(--space-xl) 5vw; }
.section-sm  { padding: var(--space-lg) 5vw; }

.bg-white    { background: var(--c-white); }
.bg-offwhite { background: var(--c-off-white); }
.bg-blue     { background: var(--c-blue); }
.bg-black    { background: var(--c-black); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-gap     { gap: 1.5rem; }

.card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.card-blue-top { border-top: 3px solid var(--c-blue); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* ── WORDPRESS OVERRIDES ── */
.skip-link, a.skip-link { display: none !important; }
.site-header, header.wp-block-template-part { display: none !important; }
.wp-site-blocks { padding-top: 0 !important; }
body { margin: 0 !important; padding: 0 !important; }

/* ── PAGE WRAPPER ── */
.page-wrap {
  width: 100%;
  overflow-x: hidden;
  font-family: var(--font-body);
}

/* ── NAV ── */
.connected-nav {
  background: var(--c-blue);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  position: sticky;
  top: 0;
  z-index: 100;
}
.connected-nav-logo img {
  height: 24px;
  width: auto;
  display: block;
}
.connected-nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.connected-nav-links a:not(.connected-nav-cta):not(.mega-col__heading):not(.mega-col__links a) {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.connected-nav-links a:not(.connected-nav-cta):not(.mega-col__heading):not(.mega-col__links a):hover {
  color: var(--c-white);
  border-bottom-color: var(--c-sky-blue);
}

/* Ensure mega menu links are not overridden by nav white colour */
.mega-menu a {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Column headings stay bold blue */
.mega-col__heading {
  color: var(--c-blue) !important;
}

/* Child page links — black, blue + left accent on hover */
.mega-col__links a {
  color: var(--c-black) !important;
  font-size: 0.875rem;
  font-weight: 400;
  padding-left: 0;
  border-left: 2px solid transparent;
  transition: color 0.15s, padding-left 0.15s, border-color 0.15s !important;
}
.mega-col__links a:hover {
  color: var(--c-blue) !important;
  border-bottom: none !important;
  padding-left: 6px !important;
  border-left-color: var(--c-blue) !important;
}

/* Services nav item — square tab when mega menu is open */
.connected-nav-item--has-mega > a {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 6px 16px 9px !important;
  margin: 0 -16px;
  position: relative;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.connected-nav-item--has-mega:hover > a,
.connected-nav-item--has-mega.is-open > a {
  background: #f8f8ff;
  color: var(--c-blue) !important;
  border-bottom-color: transparent !important;
}

/* Mega menu — fade-in animation */
@keyframes mega-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.connected-nav-item--has-mega:hover .mega-menu,
.connected-nav-item--has-mega.is-open .mega-menu {
  animation: mega-fade-in 0.18s ease forwards;
}
.connected-nav-cta {
  background: var(--c-white);
  color: var(--c-blue) !important;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-weight: 400 !important;
  border: 2px solid var(--c-white);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.connected-nav-cta:hover {
  background: var(--c-sky-blue) !important;
  border-color: var(--c-sky-blue) !important;
  color: var(--c-white) !important;
}
.connected-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.connected-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-white);
  margin: 5px 0;
  transition: transform 0.3s, opacity 0.3s;
}

/* ── MEGA MENU ── */
.connected-nav {
  /* needed so mega menu can position absolutely relative to nav */
  position: sticky;
  top: 0;
  z-index: 100;
}

.connected-nav-item {
  list-style: none;
  position: relative;
}

/* Dropdown — auto-width to fit content, centred under Services link */
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90vw;
  background: #f8f8ff;
  z-index: 98;
  border-top: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
}

.connected-nav-item--has-mega:hover .mega-menu,
.connected-nav-item--has-mega.is-open .mega-menu {
  display: block;
}

.mega-menu__inner {
  padding: 2rem 2.5rem 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 210px));
  gap: 0 2rem;
}

/* Column */
.mega-col {
  padding-right: 2rem;
  border-right: 1px solid var(--c-border);
}

.mega-col:last-child {
  border-right: none;
  padding-right: 0;
}

/* Column heading — bold blue with underline rule */
.mega-col__heading {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--c-blue);
  padding-bottom: 0.75rem;
  padding-left: 0;
  margin-bottom: 1.1rem;
  border-bottom: 2px solid var(--c-blue);
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: padding-left 0.15s, border-color 0.15s, opacity 0.15s;
}

a.mega-col__heading:hover {
  padding-left: 6px;
  border-left-color: var(--c-blue);
  opacity: 0.75;
}

/* Links — always one per line */
.mega-col__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mega-col__links a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--c-black);
  text-decoration: none;
  line-height: 1.45;
  white-space: nowrap;
  padding-left: 0;
  transition: color 0.15s, padding-left 0.15s;
}

.mega-col__links a:hover {
  color: var(--c-blue);
  padding-left: 6px;
}

/* Split column — still one link per line, just inherits flex-column */
.mega-col--split .mega-col__links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}


/* ── HERO ── */
.hero-wrapper {
  background: var(--c-blue);
  padding-bottom: 40px;
}
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 60px - 120px);
  background: var(--c-white);
}
.hero-image {
  overflow: hidden;
  border-radius: 0 60px 60px 0;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-content {
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--c-white);
}
.hero-content h1 {
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-black);
  margin-bottom: 1.25rem;
}
.hero-content h1 em {
  font-style: normal;
  color: var(--c-blue);
}
.hero-content p {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}
.hero-content p:last-of-type { margin-bottom: 1.75rem; }

/* ── ABOUT US 2 HERO — scoped overrides, other pages using .hero unaffected ── */
/* Swap sides: image right, text left */
.hero--about2 .hero-image {
  order: 2;
  border-radius: 60px 0 0 60px;
  margin: 2.5rem 0;
}
.hero--about2 .hero-content {
  order: 1;
}

@media (max-width: 900px) {
  .hero--about2 .hero-image {
    order: 0;
    margin: 0;
  }
  .hero--about2 .hero-content {
    order: 0;
  }
}

/* Reduce the blue gap above the intro band text — both the hero's bottom
   bleed and the intro band's own top padding contribute, and since both
   are the same blue they read as one oversized gap. */
.hero-wrapper--about2 {
  padding-bottom: 40px;
}

.intro-band--about2 {
  padding-top: 1rem;
  min-height: 0;
}

/* Swap Story section sides: image left, text right (About Us 2 only) */
.about-story--about2 .about-story__content {
  order: 2;
}
.about-story--about2 .about-story__image {
  order: 1;
}

@media (max-width: 900px) {
  .about-story--about2 .about-story__content,
  .about-story--about2 .about-story__image {
    order: 0;
  }
}

/* ── INTRO BAND ── */
.intro-band {
  background: var(--c-blue);
  padding: 1rem 5vw 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.intro-band h2 {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 300;
  font-family: var(--font-heading);
  color: var(--c-white);
  margin-bottom: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.intro-band p {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: rgba(255,255,255,0.85);
  max-width: 1300px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Force ALL intro-band text white — catches WYSIWYG output wrapped in divs,
   bare text nodes, and inline colour saved in the ACF field. */
.intro-band,
.intro-band * {
  color: rgba(255,255,255,0.9) !important;
}
.intro-band h2,
.intro-band h2 * {
  color: var(--c-white) !important;
}
.intro-band a:hover,
.intro-band a:hover * {
  color: var(--c-white) !important;
  text-decoration: underline;
}

.intro-band--closing p {
  font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-family: var(--font-heading);
  font-weight: 300;
  color: rgba(255,255,255,0.92);
  max-width: 1100px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.intro-band--about p {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-family: var(--font-body);
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  max-width: 1000px;
  line-height: 1.6;
  letter-spacing: 0;
}

/* ── TESTIMONIAL BAND ── */
.testimonial-band {
  position: relative;
  padding: 2.5rem 5vw 6rem;
  text-align: center;
  overflow: hidden;
}

.testimonial-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/uploads/2026/04/section-bkg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
  z-index: 0;
}

.testimonial-band > * {
  position: relative;
  z-index: 1;
}
.testimonial-band-icon {
  width: 52px;
  height: 52px;
  background: var(--c-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  font-size: 1.4rem;
  color: var(--c-white);
  font-family: Georgia, serif;
  font-weight: 700;
  line-height: 1;
}
.testimonial-band blockquote {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 400;
  font-style: italic;
  color: var(--c-black);
  line-height: 1.55;
  max-width: 1000px;
  margin: 0 auto 2rem;
}
.testimonial-band-attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.testimonial-band-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  color: var(--c-blue);
  margin-bottom: 0.25rem;
}
.testimonial-band-company {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  color: var(--c-black);
}

/* ── CASE STUDY BAND ── */
.case-study-band {
  background: var(--c-blue);
  padding: 4rem 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.case-study-band h2 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 800;
  color: var(--c-white);
  max-width: 600px;
  line-height: 1.25;
  margin: 0;
}

/* ── CONTENT + IMAGE ── */
.content-image {
  padding: 4rem 8vw;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
  background: var(--c-white);
}
.content-image > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.content-image h2 {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 300;
  font-family: var(--font-heading);
  color: var(--c-black);
  margin-bottom: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.content-image h3 {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 300;
  font-family: var(--font-heading);
  color: var(--c-dark-blue);
  margin-bottom: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.content-image p {
  color: var(--c-muted);
  line-height: 1.9;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}
.content-image p:last-of-type { margin-bottom: 2rem; }
.content-image-placeholder {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent;
  min-height: 420px;
  display: flex;
  align-items: stretch;
}
.content-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-lg);
}

/* ── STATS ── */
.stats-section {
  padding: 7rem 5vw 6rem;
  background: #eef4fb;
  text-align: center;
}
.stats-section h3 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 300;
  font-family: var(--font-heading);
  color: var(--c-black);
  margin-bottom: 4rem;
  line-height: 1.2;
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.stat-card {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  text-align: center;
  border: none;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.stat-number {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 300;
  color: var(--c-black);
  display: block;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
.stat-card p {
  font-size: 0.95rem;
  color: var(--c-muted);
  line-height: 1.65;
  margin: 0;
  text-align: center;
}

/* ── SERVICES ── */
.services-section {
  padding: 7rem 5vw;
  background: var(--c-blue);
  text-align: center;
}
.services-section h2 {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 500;
  color: var(--c-white);
  margin-bottom: 4rem;
  text-align: center;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}
.service-card {
  background: transparent;
  border: none;
  padding: 0;
  text-align: center;
}
.service-icon {
  width: 80px;
  height: 80px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
.service-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}
.service-card h3 {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--c-white);
  margin-bottom: 1rem;
}
.service-tagline { display: none; }
.service-card ul {
  list-style: none;
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}
.service-card ul li {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  padding-left: 1.2rem;
  position: relative;
  line-height: 1.6;
  margin-bottom: 6px;
}
.service-card ul li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--c-white);
  font-size: 0.9rem;
  font-weight: 700;
}

/* ── CTA BAND ── */
.cta-band {
  padding: 6rem 5vw;
  background: var(--c-blue);
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 300;
  color: var(--c-white);
  margin-bottom: 2rem;
  line-height: 1.1;
}

/* ── CTA band — light variant (parent page) ── */
.cta-band--light {
  background: linear-gradient(135deg, #eef4fb 0%, #e8f4f8 50%, #f0f8f5 100%);
  overflow: hidden;
}

.cta-band.cta-band--light h2 {
  color: var(--c-black);
  line-height: 1.2;
}

.cta-band__heading-blue {
  display: block;
  color: var(--c-blue);
}

/* ── FAQ ── */
.faq-section {
  padding: 7rem 5vw 3rem;
  background-color: var(--c-white);
}
.faq-inner {
  max-width: 780px;
  margin: 0 auto;
}
.faq-section h3 {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 300;
  font-family: var(--font-heading);
  color: var(--c-black);
  text-align: center;
  margin-bottom: 3rem;
}
.faq-item {
  background: var(--c-white);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  border: 1px solid var(--c-border);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: 1.6rem 2rem;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  font-weight: 400;
  font-size: 1rem;
  color: var(--c-black);
  font-family: var(--font-body);
}
.faq-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-blue-light);
  color: var(--c-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s, background 0.2s;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--c-blue);
  color: var(--c-white);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-answer-inner {
  padding: 0 2rem 1.6rem;
  font-size: 0.95rem;
  color: var(--c-muted);
  line-height: 1.8;
}
.faq-item.open .faq-answer { max-height: 300px; }

/* ── TESTIMONIAL SECTION ── */
.testimonial-section {
  padding: 7rem 5vw;
  background: var(--c-white);
  text-align: center;
}
.testimonial-section blockquote {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-style: italic;
  line-height: 1.75;
  color: var(--c-black);
  max-width: 820px;
  margin: 0 auto 1.5rem;
}
.testimonial-section cite { font-style: normal; }
.testimonial-section cite strong {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-black);
  margin-bottom: 2px;
}
.testimonial-section cite span {
  font-size: 0.9rem;
  color: var(--c-muted);
}

/* ── SIMPLE CTA ── */
.cta-simple {
  padding: 3rem 5vw 5rem;
  background: var(--c-white);
  text-align: center;
}

.cta-simple--about2 {
  padding-top: 3rem;
}

.cta-simple h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300;
  font-family: var(--font-heading);
  color: var(--c-black);
  margin-bottom: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.cta-simple--light {
  background: var(--c-white);
}

.cta-simple__heading-blue {
  display: block;
  color: var(--c-blue);
}

/* ── FOOTER ── */
.connected-footer {
  background: var(--c-blue);
  padding: 2.5rem 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}
.connected-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.connected-footer-logo img {
  height: 28px;
  width: auto;
  display: block;
}
.connected-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.connected-footer-links__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.connected-footer-links a,
.connected-footer-links__list a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.2s;
}

.connected-footer-links a:hover,
.connected-footer-links__list a:hover { color: var(--c-white); }
.connected-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: rgba(255,255,255,0.8);
  font-size: 0.82rem;
  line-height: 1.6;
}
.connected-footer-contact a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: color 0.2s;
}
.connected-footer-contact a:hover { color: var(--c-white); }
.connected-footer-partners {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.connected-footer-partners img {
  height: 36px;
  width: auto;
  display: block;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.connected-footer-partners img:hover { opacity: 1; }

.connected-footer-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.connected-footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.8);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  text-decoration: none;
}

.connected-footer-social__link:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--c-white);
  color: var(--c-white);
}

/* ── DARK BG OVERRIDES ── */
.bg-blue h1, .bg-blue h2, .bg-blue h3,
.cta-band h2,
.case-study-band h2 {
  color: var(--c-white);
}

/* ── RESPONSIVE: TABLET 900px ── */
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .connected-nav { height: 56px; }
  .connected-nav-logo img { height: 20px; }
  .connected-nav-links { display: none; }
  .connected-nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--c-blue);
    padding: 1.5rem 5vw 2rem;
    gap: 1rem;
    z-index: 99;
    max-height: calc(100svh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .connected-nav-toggle { display: block; }

  /* Mega menu — flat accordion on mobile */
  .mega-menu {
    position: static;
    width: auto;
    max-width: none;
    transform: none;
    border-top: 1px solid rgba(255,255,255,0.2);
    box-shadow: none;
    background: transparent;
    padding: 0;
  }
  .mega-menu__inner {
    grid-template-columns: 1fr;
    padding: 1rem 0 0.5rem;
    gap: 1.5rem;
    max-width: none;
    margin: 0;
  }
  .mega-col {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 0 0 1.25rem;
    margin: 0;
  }
  .mega-col:last-child { border-bottom: none; }

  .connected-nav-links .mega-col__heading,
  .mega-menu .mega-col__heading {
    color: #ffffff !important;
    border-bottom-color: rgba(255,255,255,0.4) !important;
    border-left-color: transparent !important;
    font-size: 0.85rem;
  }
  .connected-nav-links .mega-col__links a,
  .mega-menu .mega-col__links a {
    color: rgba(255,255,255,0.85) !important;
    white-space: normal;
    padding-left: 0 !important;
    border-left-color: transparent !important;
  }
  .connected-nav-links .mega-col__links a:hover,
  .mega-menu .mega-col__links a:hover {
    color: #ffffff !important;
    padding-left: 6px !important;
    border-left-color: rgba(255,255,255,0.6) !important;
  }
  .mega-col--split .mega-col__links { flex-direction: column; }
  .connected-nav-item--has-mega.is-open .mega-menu { display: block; }

  /* FIX: the mega-fade-in animation holds transform: translateX(-50%)
     via `forwards`, which on mobile shoves the menu off-screen left.
     Cancel the animation and any transform so the menu sits flush. */
  .connected-nav-item--has-mega:hover .mega-menu,
  .connected-nav-item--has-mega.is-open .mega-menu {
    animation: none !important;
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  /* Drawer items span full width; static so the static menu isn't offset */
  .connected-nav-links.open > .connected-nav-item,
  .connected-nav-links.open > li {
    width: 100%;
    position: static;
  }
  .connected-nav-item--has-mega .mega-menu__inner {
    display: block;
    width: 100%;
    padding: 1rem 0 0.5rem;
    margin: 0;
  }
  .connected-nav-item--has-mega .mega-col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    border-right: none;
  }

  /* Chevron indicator on Services trigger */
  .connected-nav-item--has-mega > a::after {
    content: '›';
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.2s;
    transform: rotate(90deg);
  }
  .connected-nav-item--has-mega.is-open > a::after {
    transform: rotate(-90deg);
  }

  .hero {
    grid-template-columns: 1fr;
    max-height: none;
    min-height: auto;
  }
  .hero-image {
    height: 55vw;
    min-height: 260px;
    max-height: 380px;
    border-radius: 0 0 40px 40px;
  }
  .hero-content { padding: 3rem 5vw; }
  .hero-wrapper { padding-bottom: 80px; }

  .case-study-band { flex-direction: column; text-align: center; }

  .stats-grid { grid-template-columns: 1fr; gap: 16px; }
  .stat-card { padding: 1.5rem 2.5rem; text-align: left; }
  .stat-number { display: inline; margin-right: 0.5rem; }
  .stat-card p { display: inline; text-align: left; }

  .services-grid { grid-template-columns: 1fr; gap: 3rem; }

  .content-image {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 5vw;
  }
  .content-image > div:first-child,
  .content-image > a:first-child {
    order: 1;
    align-items: center;
    text-align: center;
  }
  .content-image > div:first-child {
    align-items: center;
    text-align: center;
  }
  .content-image-placeholder,
  .content-image-card {
    order: 2;
    min-height: 280px;
  }
}

/* ── RESPONSIVE: MOBILE 600px ── */
@media (max-width: 600px) {
  .connected-nav { height: 52px; }
  .connected-nav-logo img { height: 18px; }
  .connected-nav-links.open { top: 52px; }

  .hero-image {
    height: 65vw;
    min-height: 220px;
    border-radius: 0 0 40px 0;
  }
  .hero-content { padding: 2.5rem 5vw; }
  .hero-wrapper { padding-bottom: 60px; }

  h1 { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }
  h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
  h3 { font-size: clamp(1.1rem, 4vw, 1.4rem); }

  .section { padding: 3.5rem 5vw; }
  .stats-section,
  .services-section,
  .faq-section,
  .testimonial-section { padding: 3.5rem 5vw; }
  .cta-band { padding: 3.5rem 5vw; }

  .content-image > div:first-child { align-items: center; text-align: center; }
  .content-image-placeholder,
  .content-image-card { min-height: 280px; }
  .stats-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  p { line-height: 1.55; font-size: 0.95rem; }

  .intro-band { padding: 1.5rem 5vw 2.5rem; min-height: auto; }
  .hero-content { align-items: center; text-align: center; }

  .connected-footer { flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
  .connected-footer-brand { align-items: center; }
  .connected-footer-contact { align-items: center; }
  .connected-footer-partners { flex-wrap: wrap; justify-content: center; }
  .connected-footer-social { justify-content: center; }
}/* ============================================================
   PARENT PAGE TEMPLATE — CSS additions
   Append to: connected-global.css
   ============================================================ */


/* ── PARENT HERO ── */
/* Full-width bg image, dark overlay, centred content.
   Distinct from product-page .hero (split left/right layout). */
.parent-hero {
  position: relative;
  min-height: 85vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.parent-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* Overlay darkness: 0 = none, 1 = full black */
  z-index: 1;
}

.parent-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 4rem 5vw;
  max-width: 1100px;
  width: 100%;
}

.parent-hero__eyebrow {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.3;
  margin: 0;
}

.parent-hero__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 300;
  color: var(--c-white);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 900px;
  width: 100%;
}


/* ── PARENT INTRO BAND ── */
/* Blue bg, bordered image box left, text right.
   Replaces the centred .intro-band used on product pages. */
.parent-intro-band {
  background: var(--c-blue);
  padding: 4rem 5vw;
}

.parent-intro-band__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Single-column variant — no image selected */
.parent-intro-band__inner--no-image {
  grid-template-columns: 1fr;
  max-width: 860px;
}

.parent-intro-band__image {
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.parent-intro-band__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.parent-intro-band__content h2 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 300;
  color: var(--c-white);
  margin-bottom: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.parent-intro-band__content p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.parent-intro-band__content p:last-child {
  margin-bottom: 0;
}


/* ── CHILD PAGE CARDS ── */
/* Light blue bg section, 4-col portfolio-style grid.
   Image-dominant cards, meta below, arrow + View hover — matches portfolio page style. */
.child-pages-section {
  position: relative;
  padding: 7rem 5vw 6rem;
  background: var(--c-white);
  text-align: center;
  overflow: hidden;
}

.child-pages-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/uploads/2026/04/section-bkg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
}

.child-pages-section > * {
  position: relative;
  z-index: 1;
}

.child-pages-section h2 {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: 300;
  font-family: var(--font-heading);
  color: var(--c-black);
  margin-bottom: 4rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.child-pages-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.child-pages-grid .child-page-item {
  flex: 0 1 calc((100% - 3 * 1.5rem) / 4);
  min-width: 220px;
}

/* Each item: white framed card */
.child-page-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
  background: var(--c-white);
  border-radius: var(--radius-xl);
  padding: 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* The clickable card */
.child-page-item__card {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 3 / 4;
  background: var(--c-border);
}

.child-page-item__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Blue tint overlay on hover */
.child-page-item__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(112, 48, 160, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.child-page-item__card:hover::after {
  opacity: 1;
}

.child-page-item__card:hover img {
  transform: scale(1.04);
}

/* Circular arrow button — visible by default */
.child-page-item__arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: var(--c-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.child-page-item__card:hover .child-page-item__arrow {
  opacity: 0;
}

/* "View →" pill — hidden by default, appears on hover */
.child-page-item__view {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 400;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2;
  white-space: nowrap;
}

.child-page-item__card:hover .child-page-item__view {
  opacity: 1;
  transform: translateY(0);
}

/* Meta below the card */
.child-page-item__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.25rem 0.25rem;
}

.child-page-item__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-black);
  line-height: 1.2;
}

.child-page-item__desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-muted);
  line-height: 1.5;
}


/* ── PARENT PAGE SERVICE CARD OVERRIDES ── */
/* Overrides global .service-card styles for the parent page variant:
   larger icons, white titles, single paragraph body text, left-aligned */

.parent-page-services .service-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 2rem;
}

.parent-page-services .service-icon img {
  width: 90px;
  height: 90px;
}

.parent-page-services .service-card h3 {
  color: var(--c-white);
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
}

.parent-page-services .service-card p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.75;
  text-align: left;
  margin: 0;
}


/* ── CONTENT BAND ── */
/* Light blue bg + background image, centred blue heading, left-aligned body text */
.content-band {
  background-color: var(--c-blue-light);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 7rem 5vw;
}

.content-band__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.content-band__inner h3 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--c-black);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 2.5rem;
}

.content-band__inner p {
  font-size: 1rem;
  color: var(--c-dark-blue);
  line-height: 1.8;
  text-align: left;
  margin-bottom: 1.25rem;
}

.content-band__inner p:last-child {
  margin-bottom: 0;
}


/* ── RESPONSIVE: TABLET 900px ── */
@media (max-width: 900px) {
  /* Parent hero */
  .parent-hero {
    min-height: 65vh;
  }
  .parent-hero__heading {
    font-size: clamp(2rem, 7vw, 3.2rem);
  }

  /* Parent intro band */
  .parent-intro-band__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  .parent-intro-band__image {
    max-width: 280px;
    margin: 0 auto;
  }

  /* Child page cards — 2 col on tablet */
  .child-pages-grid .child-page-item {
    flex: 0 1 calc((100% - 1.5rem) / 2);
  }
}


/* ── RESPONSIVE: MOBILE 600px ── */
@media (max-width: 600px) {
  /* Parent hero */
  .parent-hero {
    min-height: 70vh;
  }
  .parent-hero__content {
    gap: 1.5rem;
    padding: 3rem 5vw;
  }
  .parent-hero__heading {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
  }

  /* Parent intro band */
  .parent-intro-band {
    padding: 3rem 5vw;
  }
  .parent-intro-band__inner {
    gap: 2rem;
  }
  .parent-intro-band__content h2 {
    font-size: 1.2rem;
  }

  /* Content band */
  .content-band {
    padding: 3.5rem 5vw;
  }

  /* Child page cards — 1 col on mobile */
  .child-pages-section {
    padding: 3.5rem 5vw;
  }
  .child-pages-section h2 {
    margin-bottom: 2.5rem;
  }
  .child-pages-grid {
    gap: 1.5rem;
  }
  .child-pages-grid .child-page-item {
    flex: 1 1 100%;
  }
  .child-page-item__card {
    aspect-ratio: 16 / 10;
  }
}
/* ============================================================
   CASE STUDY PORTFOLIO PAGE — CSS additions
   Append to: connected-global.css
   ============================================================ */


/* ── PRODUCT PAGE CASE STUDY — image card styles ── */
/* Keeps the existing split layout (.content-image) intact.
   Only the right-hand image is replaced with a portfolio-style card. */

/* Constrain the grid cell so the card doesn't stretch beyond its content */
.content-image .content-image-card {
  align-self: center;
}

.content-image-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 16 / 9;
  width: 100%;
  isolation: isolate;
}

.content-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Blue tint overlay on hover */
.content-image-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(112, 48, 160, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.content-image-card:hover::after {
  opacity: 1;
}

/* Circular arrow — visible by default */
.content-image-card__arrow {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  background: var(--c-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.content-image-card:hover .content-image-card__arrow {
  opacity: 0;
}

/* "View →" pill — appears on hover */
.content-image-card__view {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2;
  white-space: nowrap;
}

.content-image-card:hover .content-image-card__view {
  opacity: 1;
  transform: translateY(0);
}


/* ── PORTFOLIO SECTION ── */
.portfolio-section {
  background: var(--c-white);
  padding: 5rem 5vw 1.5rem;
}

.portfolio-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Cards section — section-bkg.jpg at 40% opacity via ::before */
.portfolio-grid-section {
  position: relative;
  padding: 5rem 5vw 7rem;
  background: var(--c-blue-light);
}

.portfolio-grid-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/wp-content/uploads/2026/04/section-bkg.jpg') center center / cover no-repeat;
  opacity: 0.4;
  z-index: 0;
}

.portfolio-grid-section > * {
  position: relative;
  z-index: 1;
}

.portfolio-grid-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* Page heading — "Our Work." with first word in blue */
.portfolio-heading {
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 300;
  color: var(--c-black);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 3.5rem;
}

.portfolio-heading em {
  font-style: normal;
  color: var(--c-blue);
}


/* ── PORTFOLIO GRID ── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2.5rem;
}


/* ── PORTFOLIO ITEM ── */
.portfolio-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Client name + service type above the card */
.portfolio-item__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.portfolio-item__meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.4rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-blue);
  line-height: 1.3;
}

.portfolio-item__pipe {
  color: var(--c-blue);
  font-weight: 400;
}

.portfolio-item__client {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--c-black);
  line-height: 1.2;
}

.portfolio-item__services {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--c-muted);
  line-height: 1.4;
  margin: 0;
}

/* The clickable card — image with hover tint and View button */
.portfolio-item__card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 16 / 10;
  background: var(--c-border);
}

.portfolio-item__card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Blue tint overlay — fades in on hover */
.portfolio-item__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(112, 48, 160, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.portfolio-item__card:hover::after {
  opacity: 1;
}

.portfolio-item__card:hover img {
  transform: scale(1.04);
}

/* Arrow button — visible by default, hidden on hover */
.portfolio-item__arrow {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  background: var(--c-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.portfolio-item__card:hover .portfolio-item__arrow {
  opacity: 0;
}

/* "View →" pill button — hidden by default, appears on hover */
.portfolio-item__view {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2;
  white-space: nowrap;
}

.portfolio-item__view svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.portfolio-item__card:hover .portfolio-item__view {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-item__card:hover .portfolio-item__view svg {
  transform: translateX(2px);
}


/* ── RESPONSIVE: TABLET 900px ── */
@media (max-width: 900px) {
  .portfolio-section {
    padding: 4rem 5vw 2.5rem;
  }

  .portfolio-grid-section {
    padding: 4rem 5vw 5rem;
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }

  .portfolio-item__client {
    font-size: 1rem;
  }

  .portfolio-item__meta-line {
    font-size: 0.9rem;
  }
}


/* ── RESPONSIVE: MOBILE 600px ── */
@media (max-width: 600px) {
  .portfolio-section {
    padding: 3rem 5vw 2rem;
  }

  .portfolio-grid-section {
    padding: 3rem 5vw 4rem;
  }

  .portfolio-heading {
    margin-bottom: 2rem;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .portfolio-item__card {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
  }

  .portfolio-item__card img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .portfolio-item__meta-line {
    font-size: 0.85rem;
  }
}
/* ============================================================
   HOME PAGE TEMPLATE — CSS additions
   Append to: connected-global.css
   ============================================================ */


/* ── EYEBROW OVERRIDE ── */
/* Ensures all .eyebrow properties hold when applied to <p> tags,
   overriding font-size, line-height, color and transform from global p styles.
   High-specificity selectors ensure blue colour wins over any section-scoped p rules. */
p.eyebrow,
.home-who__content p.eyebrow,
.home-case-study__content p.eyebrow,
.home-values__content p.eyebrow,
.home-services__left p.eyebrow,
.home-logos p.eyebrow,
.content-image p.eyebrow,
.content-band__inner p.eyebrow,
.parent-intro-band__content p.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 1rem;
}


/* ── HOME HERO ── */
/* Full-viewport video background, dark overlay, centred heading */
.home-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 15vh;
}

.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.home-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 5vw;
  max-width: 1200px;
}

.home-hero__content h1 {
  font-weight: 300;
  color: var(--c-white);
  margin: 0;
}

/* Rotating word */
.home-hero__rotating-wrap {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
}

.home-hero__rotating-word {
  opacity: 0;
  transition: opacity 0.5s ease;
  color: var(--c-blue-light, #7eb3ff);
}

.home-hero__rotating-word:not(:first-child) {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.home-hero__rotating-word.is-active {
  opacity: 1;
}


/* ── HOME AWARDS STRIP ── */
/* Blue bg, slim height, carousel of award badge images */
.home-awards-strip {
  background: var(--c-blue) !important;
  padding: 2.5rem 5vw 1.5rem;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.home-awards-strip__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

.home-awards-strip__item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none;
  flex: 1 1 0;
  min-width: 0;
}

.home-awards-strip img {
  height: 70px !important;
  width: auto !important;
  max-width: 110px !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 0.85;
}

.home-awards-strip__item:hover img {
  opacity: 1;
}

@media (max-width: 900px) {
  .home-awards-strip {
    padding: 2rem 4vw 1.25rem;
  }
  .home-awards-strip__inner {
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }
  .home-awards-strip__item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0.2rem;
  }
  .home-awards-strip img {
    height: auto !important;
    width: 100% !important;
    max-width: 60px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    display: block !important;
  }
}

@media (max-width: 393px) {
  .home-awards-strip {
    padding: 1.5rem 3vw 1rem;
  }
  .home-awards-strip__inner {
    justify-content: space-between !important;
    gap: 0.3rem !important;
  }
  .home-awards-strip__item {
    padding: 0 0.1rem;
  }
  .home-awards-strip img {
    height: auto !important;
    width: 100% !important;
    max-width: 42px !important;
    max-height: 38px !important;
  }
}


/* ── HOME INTRO BAND ── */
/* Blue bg + background texture, centred large body text only */
.home-intro-band {
  background-color: var(--c-blue);
  padding: 1.5rem 5vw 5rem;
  text-align: center;
}

.home-intro-band__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.home-intro-band__inner h2 {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  font-weight: 300;
  color: var(--c-white);
  line-height: 1.6;
  margin: 0;
}


/* ── CLIENT LOGOS ── */
/* White bg, eyebrow + heading centred, logo grid auto-rows */
.home-logos {
  padding: 6rem 5vw;
  background: var(--c-white);
  text-align: center;
}

.home-logos__inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* Eyebrow uses global .eyebrow class */

.home-logos h2 {
  font-weight: 300;
  margin-bottom: 3.5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.home-logos__track-wrap {
  overflow: hidden;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Fade edges */
.home-logos__track-wrap::before,
.home-logos__track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.home-logos__track-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--c-white), transparent);
}
.home-logos__track-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--c-white), transparent);
}

.home-logos__track {
  display: flex;
  align-items: center;
  gap: 5rem;
  width: max-content;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.home-logos__track--row1 {
  animation: logo-marquee 60s linear infinite;
}

.home-logos__track--row2 {
  animation: logo-marquee-reverse 75s linear infinite;
}

.home-logos__track--row3 {
  animation: logo-marquee 90s linear infinite;
}

.home-logos__track:hover {
  animation-play-state: paused;
}

.home-logos__track img {
  height: 99px;
  width: auto;
  max-width: 270px;
  object-fit: contain;
  flex-shrink: 0;
}

@keyframes logo-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes logo-marquee-reverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}


/* ── HOME SERVICES ── */
/* Light blue bg, split layout: heading + CTA left, icon + text rows right */
.home-services {
  padding: 3rem 5vw;
  background: var(--c-blue-light);
}

.home-services__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: center;
}

/* Eyebrow uses global .eyebrow class */

.home-services__left h2 {
  font-weight: 300;
  margin-bottom: 1rem;
}

.home-services__intro {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

/* Service rows — icon left, text right, divider between */
.home-services__right {
  display: flex;
  flex-direction: column;
}

.home-service-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--c-border);
}

.home-service-row:first-child {
  border-top: 1px solid var(--c-border);
}

.home-service-row__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-service-row__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-service-row p,
.home-service-row__link {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
  margin: 0;
  transition: color 0.2s;
}

.home-service-row__heading {
  display: inline;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--c-black);
  margin: 0;
  line-height: 1.75;
}

.home-service-row__heading + p {
  display: inline;
  margin: 0;
}

.home-service-row__link {
  text-decoration: none;
  color: var(--c-muted);
}

.home-service-row:hover .home-service-row__link {
  color: var(--c-blue);
}

/* ── SERVICE ROWS (v2) — redesigned: icon + heading across the top, ── */
/* sentence below, individual clickable terms below that.             */
.home-service-row2 {
  padding: 0.85rem 0;
  border-top: 1px solid var(--c-border);
}

.home-service-row2:first-child {
  border-top: 1px solid var(--c-border);
}

.home-service-row2__top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.4rem;
}

.home-service-row2__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-service-row2__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-service-row2__heading {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--c-black);
  margin: 0;
  line-height: 1.1;
}

.home-service-row2__sentence {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--c-muted);
  line-height: 1.5;
  margin: 0 0 0.4rem;
}

.home-service-row2__terms {
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin: 0;
}

.home-service-row2__terms a {
  color: var(--c-blue);
  text-decoration: none;
}

.home-service-row2__terms a:hover {
  color: var(--c-blue-dark);
}

.home-service-row2__terms span:not(.home-service-row2__sep) {
  color: var(--c-muted);
}

.home-service-row2__sep {
  color: #9a9ae0;
  margin: 0 8px;
}


/* ── HOME CASE STUDY ── */
/* White bg, video left, text + button right */
.home-case-study {
  padding: 6rem 8vw;
  background: var(--c-white);
}

.home-case-study__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.home-case-study__video {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-off-white);
}

.home-case-study__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-case-study__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Eyebrow uses global .eyebrow class */

.home-case-study__content h2 {
  font-weight: 300;
  margin-bottom: 1.25rem;
}

.home-case-study__content p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 2rem;
}


/* ── WHO WE ARE ── */
/* Light blue bg, text left, 2-image side-by-side grid right */
.home-who {
  padding: 4rem 5vw;
  background: var(--c-blue-light);
}

.home-who__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.home-who__content h2 {
  font-weight: 300;
  color: var(--c-black);
  margin-bottom: 1.5rem;
}

.home-who__content p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-black);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.home-who__content p:last-child { margin-bottom: 0; }

.home-who__content .btn {
  margin-top: 1.5rem;
}

.home-who__images {
  display: block;
}

.home-who__image {
  overflow: hidden;
  border-radius: var(--radius-xl);
  position: relative;
  aspect-ratio: 4 / 5;
}

.home-who__image--bottom {
  display: none;
}

.home-who__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center top;
  display: block;
}


/* ── OUR VALUES ── */
/* White bg, full-width bold statement heading, then image left / text right */
.home-values {
  padding: 6rem 5vw;
  background: var(--c-white);
}

.home-values__statement {
  max-width: 1100px;
  margin: 0 auto 4rem;
  text-align: left;
}

.home-values__statement h2 {
  font-weight: 300;
}

.home-values__body {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 5rem;
  align-items: center;
}

.home-values__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  position: relative;
}

.home-values__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
}

.home-values__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 0.5rem;
}

.home-values__lead {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin: 0;
}

.home-values__lead strong {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-blue);
}


/* ── RESPONSIVE: TABLET 900px ── */
@media (max-width: 900px) {
  .home-hero__content h1 {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
  }

  .home-services__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .home-services__left {
    text-align: center;
  }

  .home-services__left .eyebrow {
    display: block;
  }

  .home-services__left .btn {
    display: inline-block;
  }

  .home-case-study {
    padding: 4rem 5vw;
  }

  .home-case-study__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .home-who {
    padding: 4rem 5vw;
  }

  .home-who__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .home-values__body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}


/* ── RESPONSIVE: MOBILE 600px ── */
@media (max-width: 600px) {
  .home-hero {
    min-height: 100svh;
  }

  .home-intro-band {
    padding: 3.5rem 5vw;
  }

  .home-logos {
    padding: 3.5rem 5vw;
  }

  .home-logos__track {
    gap: 2.5rem;
  }

  .home-logos__track--row1 { animation-duration: 40s; }
  .home-logos__track--row2 { animation-duration: 50s; }
  .home-logos__track--row3 { animation-duration: 60s; }

  .home-logos__track img {
    height: 50px;
    width: auto;
    max-width: 140px;
  }

  .home-services {
    padding: 3.5rem 5vw;
  }

  .home-case-study {
    padding: 3.5rem 5vw;
  }

  .home-who {
    padding: 3.5rem 5vw;
  }

  .home-who__images {
    grid-template-columns: 1fr;
  }

  .home-who__image--top,
  .home-who__image--bottom {
    margin: 0;
    align-self: auto;
  }

  .home-who__image img {
    min-height: 220px;
  }

  .home-values {
    padding: 3.5rem 5vw;
  }

  .home-values__statement {
    margin-bottom: 2.5rem;
  }

  .home-values__image {
    aspect-ratio: 16 / 9;
  }
}

/* ============================================================
   CASE STUDY DETAIL PAGE — CSS
   Append to: connected-global.css
   ============================================================ */


/* ── CS HERO ── */
.cs-hero {
  background: var(--c-white);
  padding: 5rem 5vw 4rem;
}

.cs-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cs-hero__title {
  margin-bottom: 3rem;
}

.cs-hero__title h1 {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--c-black);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 820px;
  margin-top: 0.75rem;
}

/* Row of 3 images below the hero heading, above the image/content split */
.cs-top-image-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
  width: 100%;
}

.cs-top-image-row__item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.cs-top-image-row__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .cs-top-image-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
    width: 100%;
  }
}

/* Two-col: image left, aside right */
.cs-hero__body {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: stretch;
}

.cs-hero__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  min-height: 460px;
}

.cs-hero__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cs-hero__content {
  display: flex;
  flex-direction: column;
}

.cs-hero__brand-logo {
  margin-bottom: 2rem;
}

.cs-hero__brand-logo img {
  height: 144px;
  width: auto;
  object-fit: contain;
  display: block;
}

.cs-hero__intro {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.cs-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
}

.cs-stat:last-child {
  padding-bottom: 0;
}

.cs-stat__number {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--c-black);
  letter-spacing: -0.03em;
  line-height: 1;
  flex-shrink: 0;
  min-width: 80px;
}

.cs-stat__label {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.5;
}

/* Stats stack */
.cs-hero__stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0.5rem;
}


/* ── CS CONTENT BODY ── */
.cs-content {
  background: var(--c-white);
  padding: 4rem 5vw 5rem;
  border-top: 1px solid var(--c-border);
}

.cs-content__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.cs-content__inner h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--c-blue);
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.cs-content__inner h2:first-child {
  margin-top: 0;
}

.cs-content__inner h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-black);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.cs-content__inner h3:first-of-type {
  margin-top: 1rem;
}

/* Strategy & Execution — visual-only heading styles (not real h2/h3 tags
   yet, pending confirmation of final heading structure). Identical
   appearance to the real .cs-content__inner h2 / h3 above. */
.cs-content__pseudo-h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--c-blue);
  margin-top: 0;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.cs-content__pseudo-h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-black);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.cs-content__pseudo-h3:first-of-type {
  margin-top: 1rem;
}

/* Objectives (Section 2): text left, 2x2 grid of 4 small images right */
.cs-content__s2-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-top: 3rem;
}

.cs-content__inner > .cs-content__s2-split:first-child {
  margin-top: 0;
}

.cs-content__s2-split h2 {
  margin-top: 0;
}

.cs-content__s2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 75%;
  margin-left: auto;
}

.cs-content__s2-grid-item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.cs-content__s2-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Single-image variant (used when only 1 of the 4 image fields is filled) —
   matches the grid's width/position/footprint, just as one larger image. */
.cs-content__s2-single-image {
  width: 75%;
  margin-left: auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.cs-content__s2-single-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .cs-content__s2-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cs-content__s2-grid {
    width: 100%;
    margin-left: 0;
  }

  .cs-content__s2-single-image {
    width: 100%;
    margin-left: 0;
  }
}

/* Results: up to 4 optional grey stat boxes */
.cs-stat-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}

.cs-stat-box {
  background: var(--c-off-white);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
}

.cs-stat-box .cs-stat-box__label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--c-black);
  margin-bottom: 0.75rem;
}

.cs-stat-box .cs-stat-box__value {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  color: var(--c-black);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.cs-stat-box .cs-stat-box__sublabel {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--c-muted);
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .cs-stat-boxes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cs-stat-boxes {
    grid-template-columns: 1fr;
  }
}

/* Strategy & Execution (Section 3): text left, image right, side by side */
.cs-content__s3-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-top: 3rem;
}

.cs-content__s3-split h2 {
  margin-top: 0;
}

.cs-content__s3-image {
  order: -1;
}

.cs-content__s3-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}

@media (max-width: 900px) {
  .cs-content__s3-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Full-width text block: just a heading + body, no image */
.cs-text-block {
  margin-top: 3rem;
}

.cs-content__inner > .cs-text-block:first-child {
  margin-top: 0;
}

.cs-text-block h2 {
  margin-top: 0;
}

/* Floated image + wrapping text block. The image floats to one side;
   the heading and body text wrap around it, and once the text runs
   past the image's height it continues at full width below. */
.cs-float-block {
  margin-top: 3rem;
}

.cs-content__inner > .cs-float-block:first-child {
  margin-top: 0;
}

.cs-float-block h2 {
  margin-top: 0;
}

.cs-float-block__image {
  width: 42%;
  margin-bottom: 1rem;
}

.cs-float-block__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}

.cs-float-block--right .cs-float-block__image {
  float: right;
  margin-left: 2.5rem;
}

.cs-float-block--left .cs-float-block__image {
  float: left;
  margin-right: 2.5rem;
}

.cs-float-block__clear {
  clear: both;
}

@media (max-width: 900px) {
  .cs-float-block--right .cs-float-block__image,
  .cs-float-block--left .cs-float-block__image {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Three-image row, full width to match the text column above it.
   A single image fills the full row width on its own. */
.cs-gallery-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.cs-gallery-row--single {
  grid-template-columns: 1fr;
}

.cs-content__inner > .cs-gallery-row:first-child {
  margin-top: 0;
}

.cs-gallery-row__item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.cs-gallery-row--single .cs-gallery-row__item {
  aspect-ratio: 16 / 9;
}

.cs-gallery-row__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .cs-gallery-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.cs-content__inner p {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* Section image — left-aligned, wider than text */
.cs-content__section-image {
  margin: 2rem 0;
}

.cs-content__section-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* WYSiWYG list output from ACF wysiwyg fields */
.cs-content__inner ul,
.cs-content__inner ol {
  margin: 0 0 1.5rem 0;
  padding-left: 2.5rem;
}

.cs-content__inner ul {
  list-style: disc;
}

.cs-content__inner ol {
  list-style: decimal;
}

.cs-content__inner ul li,
.cs-content__inner ol li {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 0.3rem;
  padding-left: 0.4rem;
}

.cs-content__inner li p {
  margin-bottom: 0;
}

.cs-content__inner ul li::marker,
.cs-content__inner ol li::marker {
  color: var(--c-muted);
}

.cs-content__inner strong,
.cs-content__inner b {
  font-weight: 700;
  color: var(--c-black);
}

/* Shared list style */
.cs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.cs-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 0.6rem;
}

.cs-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--c-blue);
  font-size: 1.1rem;
  line-height: 1.75;
}


/* ── CS IMAGE BAND ── */
/* Blue bg, contained image centred with padding */
.cs-image-break {
  position: relative;
  background-color: var(--c-blue);
  padding: 5rem 5vw;
  overflow: hidden;
}

.cs-image-break::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--cs-image-break-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
  z-index: 0;
}

.cs-image-break__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cs-image-break__inner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}


/* ── CS RESULTS ── */
.cs-results {
  background: var(--c-white);
  padding: 5rem 5vw;
  border-top: 1px solid var(--c-border);
}

.cs-results__inner {
  max-width: 780px;
  margin: 0 auto;
}

.cs-results__heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--c-blue);
  margin-bottom: 1.75rem;
  letter-spacing: -0.02em;
}

.cs-list--results li {
  font-size: 1.05rem;
  color: var(--c-black);
}


/* ── CASE STUDY 2 — QUOTE SECTION (below Results) ── */
/* Same styling as the home page testimonial band, but on a white background. */
.cs-quote-section {
  position: relative;
  padding: 3rem 5vw;
  text-align: center;
  background: var(--c-white);
  overflow: hidden;
}

.cs-quote-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/uploads/2026/04/section-bkg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
  z-index: 0;
}

.cs-quote-section > * {
  position: relative;
  z-index: 1;
}

.cs-quote-section::before {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: var(--c-blue);
  margin: 0 auto 2rem;
  position: relative;
  z-index: 1;
}

.cs-quote-section-icon {
  width: 52px;
  height: 52px;
  background: var(--c-blue);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  font-size: 1.4rem;
  color: var(--c-white);
  font-family: Georgia, serif;
  font-weight: 700;
  line-height: 1;
}

.cs-quote-section__text {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 400;
  font-style: italic;
  color: var(--c-black);
  line-height: 1.55;
  max-width: 1000px;
  margin: 0 auto 2rem;
}

.cs-quote-section-attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.cs-quote-section-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  color: var(--c-blue);
  margin-bottom: 0.25rem;
}

.cs-quote-section-company {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  color: var(--c-black);
}

@media (max-width: 900px) {
  .cs-quote-section {
    padding: 2.5rem 5vw;
  }
}


/* ── CS RELATED POSTS ── */
.cs-related {
  background: rgba(229, 229, 255, 0.5);
  padding: 5rem 5vw 6rem;
  border-top: 1px solid var(--c-border);
}

.cs-related__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.cs-related__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.cs-related__header h2 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 300;
  color: var(--c-black);
  margin: 0;
}

.cs-related__see-all {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--c-blue);
  text-decoration: none;
  transition: color 0.2s;
}

.cs-related__see-all:hover {
  color: var(--c-sky-blue);
}

.cs-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.cs-related__card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
}

.cs-related__card-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--c-border);
  position: relative;
}

.cs-related__card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.cs-related__card:hover .cs-related__card-image img {
  transform: scale(1.04);
}

.cs-related__card-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-black);
  line-height: 1.4;
  margin: 0;
  transition: color 0.2s;
}

.cs-related__card:hover .cs-related__card-title {
  color: var(--c-blue);
}


/* ── RESPONSIVE: TABLET 900px ── */
@media (max-width: 900px) {
  .cs-hero {
    padding: 4rem 5vw 3rem;
  }

  .cs-hero__body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .cs-hero__image {
    aspect-ratio: 16 / 9;
  }

  .cs-content {
    padding: 3.5rem 5vw 4rem;
  }

  .cs-results {
    padding: 4rem 5vw;
  }

  .cs-related {
    padding: 4rem 5vw 5rem;
  }

  .cs-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}


/* ── RESPONSIVE: MOBILE 600px ── */
@media (max-width: 600px) {
  .cs-hero {
    padding: 3rem 5vw 2.5rem;
  }

  .cs-hero__title {
    margin-bottom: 2rem;
  }

  .cs-stat__number {
    font-size: clamp(1.8rem, 6vw, 2.2rem);
  }

  .cs-content {
    padding: 3rem 5vw 4rem;
  }

  .cs-results {
    padding: 3.5rem 5vw;
  }

  .cs-related {
    padding: 3.5rem 5vw 4rem;
  }

  .cs-related__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cs-image-break {
    padding: 3rem 5vw;
  }
}


/* ============================================================
   NEWS ARCHIVE PAGE — CSS
   ============================================================ */

/* ── NEWS HERO ── */
.news-hero {
  background: var(--c-white);
  padding: 6rem 5vw 4rem;
  border-bottom: 1px solid var(--c-border);
}

.news-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: center;
}

.news-hero__left h1 {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 300;
  color: var(--c-black);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-top: 0.75rem;
}

.news-hero__right {
  padding-top: 0;
}

.news-hero__right p {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.news-hero__right a {
  color: var(--c-blue);
  text-decoration: underline;
}


/* ── CATEGORY FILTER ── */
.news-categories {
  background: var(--c-white);
  padding: 1.75rem 5vw;
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 60px;
  z-index: 10;
  overflow: visible;
}

.news-categories__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.news-cat-pill {
  display: inline-block;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  transition: all 0.2s;
  white-space: nowrap;
}

.news-cat-pill:hover,
.news-cat-pill.active {
  background: var(--c-blue);
  color: var(--c-white);
  border-color: var(--c-blue);
}


/* ── NEWS GRID ── */
.news-grid-section {
  background: var(--c-off-white);
  padding: 5rem 5vw 6rem;
}

.news-grid-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
}


/* ── NEWS CARD ── */
.news-card {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-card__image-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 1.25rem;
  background: var(--c-light);
  position: relative;
}

.news-card__image-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.35s ease;
}

.news-card:hover .news-card__image-wrap img {
  transform: scale(1.04);
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.news-card__date {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-black);
}

.news-card__cat {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
  text-decoration: none;
  border: 1px solid var(--c-blue);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.7rem;
  transition: all 0.2s;
}

.news-card__cat:hover {
  background: var(--c-blue);
  color: var(--c-white);
}

.news-card__title {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  color: var(--c-black);
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

.news-card__title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

.news-card__title a:hover {
  color: var(--c-blue);
}

.news-card__excerpt {
  font-size: 0.95rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.news-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--c-black);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--c-border);
  transition: color 0.2s;
}

.news-card__read-more span {
  color: var(--c-muted);
  margin: 0 0.15rem;
}

.news-card__read-more svg {
  transition: transform 0.2s;
}

.news-card__read-more:hover {
  color: var(--c-blue);
}

.news-card__read-more:hover svg {
  transform: translateX(4px);
}


/* ── PAGINATION ── */
.news-pagination {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
}

.news-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.news-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--c-black);
  text-decoration: none;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  transition: all 0.2s;
}

.news-pagination .page-numbers.current,
.news-pagination .page-numbers:hover {
  background: var(--c-blue);
  color: var(--c-white);
  border-color: var(--c-blue);
}

.news-pagination .page-numbers.dots {
  border: none;
  background: none;
}


/* ── EMPTY STATE ── */
.news-empty {
  text-align: center;
  padding: 4rem 0;
  color: var(--c-muted);
}


/* ── RESPONSIVE: TABLET 900px ── */
@media (max-width: 900px) {
  .news-hero {
    padding: 4rem 5vw 3rem;
  }

  .news-hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .news-grid-section {
    padding: 4rem 5vw 5rem;
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
  }

  .news-categories {
    position: static;
    padding: 1.25rem 5vw;
  }

  .news-pagination {
    margin-top: 3rem;
  }
}


/* ── RESPONSIVE: MOBILE 600px ── */
@media (max-width: 600px) {
  .news-hero {
    padding: 3rem 5vw 2.5rem;
  }

  .news-hero__right {
    padding-top: 0;
  }

  .news-grid-section {
    padding: 3.5rem 5vw 4rem;
  }

  .news-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .news-card__title {
    font-size: 1.05rem;
  }

  .news-categories {
    padding: 1rem 5vw;
  }

  .news-categories__inner {
    gap: 0.4rem;
  }

  .news-cat-pill {
    font-size: 0.7rem;
    padding: 0.35rem 0.85rem;
  }

  .news-pagination {
    margin-top: 2.5rem;
  }

  .news-pagination .page-numbers {
    min-width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
  }
}


/* ============================================================
   SINGLE NEWS POST — CSS
   ============================================================ */

/* ── SINGLE HERO ── */
.single-hero {
  background: var(--c-white);
  padding: 5rem 5vw 1.5rem;
}

.single-hero__inner {
  max-width: 860px;
  margin: 0 auto;
}

.single-hero__cat {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 1.25rem;
}

.single-hero__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  color: var(--c-black);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}


/* ── FEATURED IMAGE BAND ── */
.single-image-band {
  background: var(--c-white);
  padding: 2rem 5vw 0;
}

.single-image-band__inner {
  max-width: 960px;
  margin: 0 auto;
}

.single-image-band__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.single-image-band__image img {
  display: block;
  max-width: 100%;
  height: auto !important;
  max-height: 560px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  margin: 0 auto;
}

.single-image-band__caption {
  font-size: 0.8rem;
  color: var(--c-muted);
  text-align: right;
  margin-top: 0.5rem;
  opacity: 0.75;
}


/* ── META BAR ── */
.single-meta-bar {
  background: var(--c-white);
  padding: 1.5rem 5vw;
}

.single-meta-bar__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.single-meta-divider {
  width: 1px;
  height: 1.2rem;
  background: var(--c-border);
  flex-shrink: 0;
}

.single-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.single-meta-label {
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.single-meta-value {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--c-black);
}


/* .single-summary section removed — summary now renders inside .single-hero */

.single-summary__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
  margin: 1.5rem 0 0;
}


/* ── KEY TAKEAWAYS ── */
.single-key-points {
  position: relative;
  background-color: rgba(229, 229, 255, 0.5);
  padding: 3rem 5vw;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
}

.single-key-points::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/uploads/2026/04/section-bkg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
  z-index: 0;
}

.single-key-points__inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

.single-key-points__heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 1.25rem;
}

.single-key-points__content {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
}

.single-key-points__content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.single-key-points__content ul li {
  position: relative;
  padding-left: 1.4rem;
}

.single-key-points__content ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--c-blue);
  font-size: 0.9rem;
}


/* ── SHARE centred modifier ── */
.single-share--centred .single-share__inner {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


/* ── ARTICLE BODY ── */
.single-content {
  background: var(--c-white);
  padding: 2rem 5vw 1.5rem;
}

.single-content__inner {
  max-width: 860px;
  margin: 0 auto;
}

/* WordPress post content typography */
.single-content__inner h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 300;
  color: var(--c-black);
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.single-content__inner h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--c-black);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.single-content__inner p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.single-content__inner a {
  color: var(--c-blue);
  text-decoration: underline;
  transition: color 0.2s;
}

.single-content__inner a:hover {
  color: var(--c-sky-blue);
}

.single-content__inner ul,
.single-content__inner ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.single-content__inner ul {
  list-style: disc;
}

.single-content__inner ol {
  list-style: decimal;
}

.single-content__inner ul li,
.single-content__inner ol li {
  font-size: 1.05rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 0.5rem;
}

.single-content__inner ul li::marker,
.single-content__inner ol li::marker {
  color: var(--c-muted);
}

.single-content__inner blockquote {
  border-left: 3px solid var(--c-blue);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: var(--c-blue-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.single-content__inner blockquote p {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--c-black);
  margin: 0;
}

.single-content__inner img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
}

.single-content__inner figure {
  margin: 2rem 0;
}

.single-content__inner figcaption {
  font-size: 0.85rem;
  color: var(--c-muted);
  text-align: center;
  margin-top: 0.5rem;
}


/* ── SOCIAL SHARE ── */
.single-share {
  background: var(--c-white);
  padding: 2.5rem 5vw 3.5rem;
  border-top: 1px solid var(--c-border);
}

.single-share__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.single-share__label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-right: 0.5rem;
}

.single-share__buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.single-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: none;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--c-white);
  color: var(--c-black);
}

.single-share__btn:hover {
  background: var(--c-blue);
  color: var(--c-white);
  border-color: var(--c-blue);
}

.single-share__btn--linkedin:hover { background: #0077b5; border-color: #0077b5; color: var(--c-white); }
.single-share__btn--facebook:hover { background: #1877f2; border-color: #1877f2; color: var(--c-white); }
.single-share__btn--copy { background: var(--c-white); color: var(--c-black); border-color: var(--c-border); cursor: pointer; }
.single-share__btn--copy:hover { background: var(--c-off-white); border-color: var(--c-muted); color: var(--c-black); }

.copy-label {
  font-family: var(--font-body);
  font-size: inherit;
}


/* ── SINGLE RELATED POSTS CAROUSEL ── */
.single-related {
  background: var(--c-white);
  padding: 3rem 5vw 4rem;
  border-top: 1px solid var(--c-border);
}

.single-related__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.single-related__heading {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 300;
  color: var(--c-blue);
  margin-bottom: 2rem;
}

.single-related__track-wrap {
  overflow: hidden;
}

.single-related__track {
  display: flex;
  gap: 24px;
  transition: transform 0.4s ease;
  will-change: transform;
}

.single-related__card {
  flex: 0 0 calc( ( 100% - 48px ) / 3 );
  text-decoration: none;
  color: inherit;
}

.single-related__controls {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  justify-content: flex-end;
}

.single-related__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--c-blue);
  background: transparent;
  color: var(--c-blue);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.single-related__btn:hover:not(:disabled) {
  background: var(--c-blue);
  color: var(--c-white);
}

.single-related__btn:disabled {
  opacity: 0.3;
  cursor: default;
}


/* ══════════════════════════════════════════════════════════════
   SINGLE POST — OPTIONAL MODULAR SECTIONS (ACF)
   Each renders only when its fields are filled in — see single.php
   ══════════════════════════════════════════════════════════════ */

/* ── SPLIT: IMAGE + TEXT (used for both left/right variants) ──
   Image floats so heading + body text wrap beside it, then flow
   full-width once the text runs longer than the image. ── */
.single-split {
  background: var(--c-white);
  padding: 0.5rem 5vw 1.5rem;
}

.single-split__inner {
  max-width: 860px;
  margin: 0 auto;
}

.single-split__inner::after {
  content: '';
  display: table;
  clear: both;
}

.single-split__image {
  float: left;
  width: 42%;
  margin: 0.4rem 2.5rem 1.5rem 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.single-split--image-right .single-split__image {
  float: right;
  margin: 0.4rem 0 1.5rem 2.5rem;
}

.single-split__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.single-split__text h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 300;
  color: var(--c-black);
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}

.single-split__body,
.single-split__body p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
}

.single-split__body p {
  margin-bottom: 1rem;
}

.single-split__body p:last-child {
  margin-bottom: 0;
}

/* Modifier: image filled in but heading + body left blank —
   show a clean centred image instead of a float with empty space beside it. */
.single-split--image-only .single-split__image {
  float: none;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}


/* ── CALLOUT BAND ── */
.single-callout-band {
  background: var(--c-white);
  padding: 0.5rem 5vw 1.5rem;
}

.single-callout-band__inner {
  max-width: 860px;
  margin: 0 auto;
  background-color: rgba(229, 229, 255, 0.5);
  border-left: 4px solid var(--c-blue);
  border-radius: var(--radius-md);
  padding: 2rem 2.5rem;
  text-align: left;
}

.single-callout-band__inner p {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 400;
  color: var(--c-black);
  line-height: 1.5;
  letter-spacing: -0.01em;
}


/* ── IMAGE GALLERY: 1 OR 3 IMAGES ── */
.single-gallery {
  background: var(--c-white);
  padding: 0.5rem 5vw 1.5rem;
}

.single-gallery__inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: 0.85rem;
}

.single-gallery--count-1 .single-gallery__inner {
  grid-template-columns: 1fr;
}

.single-gallery--count-2 .single-gallery__inner {
  grid-template-columns: 1fr 1fr;
}

.single-gallery--count-3 .single-gallery__inner {
  grid-template-columns: 1fr 1fr 1fr;
}

.single-gallery__item {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.single-gallery--count-1 .single-gallery__item {
  aspect-ratio: 16 / 9;
}

.single-gallery--count-2 .single-gallery__item,
.single-gallery--count-3 .single-gallery__item {
  aspect-ratio: 1 / 1;
}

.single-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── SUMMARY + BULLET BREAKDOWN ── */
.single-summary-block {
  background: var(--c-white);
  padding: 0.5rem 5vw 1.5rem;
}

.single-summary-block__inner {
  max-width: 860px;
  margin: 0 auto;
}

.single-summary-block__inner::after {
  content: '';
  display: table;
  clear: both;
}

.single-summary-block__image {
  float: left;
  width: 42%;
  margin: 0.4rem 2.5rem 1.5rem 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.single-summary-block__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

.single-summary-block__bullets-label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-black);
  margin-bottom: 0.75rem;
}

.single-summary-block__inner h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 300;
  color: var(--c-black);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.single-summary-block__inner > p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.single-summary-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.single-summary-block__list li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
}

.single-summary-block__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--c-blue);
  font-size: 1.2rem;
  line-height: 1.4;
}

.single-summary-block__list li strong {
  color: var(--c-black);
  font-weight: 700;
}


/* ══════════════════════════════════════════════════════════════
   LEGAL / PRIVACY POLICY PAGE
   ══════════════════════════════════════════════════════════════ */

.legal-hero {
  background: var(--c-dark-blue);
  padding: 7rem 5vw 3.5rem;
}

.legal-hero__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.legal-hero__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--c-white);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.legal-hero__intro {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  max-width: 700px;
}

.legal-hero__updated {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 1.5rem;
  letter-spacing: 0.02em;
}

/* ── Content body ── */
.legal-content {
  background: var(--c-white);
  padding: 4rem 5vw 5rem;
}

.legal-content__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.legal-content__inner h2 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 300;
  color: var(--c-black);
  margin-top: 3rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.legal-content__inner h2:first-child {
  margin-top: 0;
}

.legal-content__inner h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--c-black);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.legal-content__inner h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-black);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.legal-content__inner p {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.legal-content__inner a {
  color: var(--c-blue);
  text-decoration: underline;
  transition: color 0.2s;
}

.legal-content__inner a:hover {
  color: var(--c-blue-dark);
}

.legal-content__inner ul,
.legal-content__inner ol {
  padding-left: 2rem;
  margin-bottom: 1.5rem;
}

.legal-content__inner ul {
  list-style: disc;
}

.legal-content__inner ol {
  list-style: decimal;
}

.legal-content__inner ul li,
.legal-content__inner ol li {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 0.4rem;
}

.legal-content__inner ul li::marker,
.legal-content__inner ol li::marker {
  color: var(--c-muted);
}

.legal-content__inner strong {
  color: var(--c-black);
  font-weight: 700;
}

.legal-content__inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.legal-content__inner th,
.legal-content__inner td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-muted);
  line-height: 1.6;
}

.legal-content__inner th {
  font-weight: 700;
  color: var(--c-black);
}

.legal-content__inner blockquote {
  border-left: 3px solid var(--c-blue);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: var(--c-blue-light);
  border-radius: var(--radius-sm);
}

.legal-content__inner blockquote p {
  color: var(--c-black);
  margin-bottom: 0;
}

.legal-content__inner hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: 3rem 0;
}

/* ── Legal responsive: tablet ── */
@media (max-width: 900px) {
  .legal-hero {
    padding: 6rem 5vw 3rem;
  }

  .legal-content {
    padding: 3rem 5vw 4rem;
  }
}

/* ── Legal responsive: mobile ── */
@media (max-width: 600px) {
  .legal-hero {
    padding: 5rem 5vw 2.5rem;
  }

  .legal-hero__title {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .legal-hero__intro {
    font-size: 1rem;
  }

  .legal-content {
    padding: 2.5rem 5vw 3rem;
  }

  .legal-content__inner h2 {
    margin-top: 2.5rem;
  }
}


/* ── RESPONSIVE: TABLET 900px ── */
@media (max-width: 900px) {
  .single-hero {
    padding: 4rem 5vw 2.5rem;
  }

  .single-image-band {
    padding: 0 5vw 1.5rem;
  }

  .single-related__card {
    flex: 0 0 calc( ( 100% - 24px ) / 2 );
  }

  .single-related__heading {
    font-size: 1.4rem;
  }

  .single-image-band__image img {
    max-height: 400px;
  }

  .single-meta-bar__inner {
    gap: 1rem 2rem;
  }

  .single-meta-divider {
    display: none;
  }

  .single-key-points {
    padding: 2.5rem 5vw;
  }

  .single-key-points__heading {
    font-size: 1.3rem;
  }

  .single-content {
    padding: 3.5rem 5vw 2rem;
  }

  .single-content__inner h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  }

  .single-content__inner h3 {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
  }

  .single-content__inner img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
  }

  .single-share {
    padding: 2rem 5vw 3rem;
  }

  /* New modular sections */
  .single-split__image {
    float: none;
    width: 100%;
    margin: 0 0 1.5rem;
  }

  .single-split--image-right .single-split__image {
    margin: 0 0 1.5rem;
  }

  .single-callout-band {
    padding: 0.5rem 5vw 1.5rem;
  }

  .single-callout-band__inner {
    padding: 1.75rem 2rem;
  }

  .single-summary-block__image {
    float: none;
    width: 100%;
    margin: 0 0 1.5rem;
  }

  .single-gallery--count-3 .single-gallery__inner {
    grid-template-columns: 1fr 1fr;
  }
}


/* ── RESPONSIVE: MOBILE 600px ── */
@media (max-width: 600px) {
  .single-hero {
    padding: 3rem 5vw 2rem;
  }

  .single-image-band {
    padding: 0 5vw 1rem;
  }

  .single-related__card {
    flex: 0 0 100%;
  }

  .single-related__heading {
    font-size: 1.25rem;
  }

  .single-image-band__caption {
    text-align: left;
  }

  .single-image-band__image img {
    max-height: 280px;
  }

  .single-meta-bar {
    padding: 1.25rem 5vw;
  }

  .single-meta-bar__inner {
    gap: 0.75rem 1.5rem;
  }

  .single-key-points {
    padding: 2.5rem 5vw;
  }

  .single-key-points__content ul {
    gap: 0.5rem;
  }

  .single-content {
    padding: 3rem 5vw 1.75rem;
  }

  .single-content__inner h2 {
    font-size: 1.4rem;
  }

  .single-content__inner h3 {
    font-size: 1.2rem;
  }

  .single-content__inner blockquote {
    margin: 1.5rem 0;
    padding-left: 1rem;
    font-size: 1rem;
  }

  .single-share {
    padding: 2rem 5vw 3rem;
  }

  .single-share__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .single-share__buttons {
    gap: 0.5rem;
  }

  /* New modular sections */
  .single-split {
    padding: 0.5rem 5vw 1.5rem;
  }

  .single-callout-band {
    padding: 0.5rem 5vw 1.25rem;
  }

  .single-callout-band__inner {
    padding: 1.5rem 1.5rem;
  }

  .single-gallery {
    padding: 0.5rem 5vw 1.25rem;
  }

  .single-gallery--count-2 .single-gallery__inner,
  .single-gallery--count-3 .single-gallery__inner {
    grid-template-columns: 1fr;
  }

  .single-summary-block {
    padding: 0.5rem 5vw 1.25rem;
  }
}


/* ============================================================
   CONTACT PAGE — CSS
   ============================================================ */

/* ── CONTACT FORM SECTION ── */
.contact-section {
  background: var(--c-white);
  padding: 7rem 5vw 6rem;
}

/* Contact Us 2 only — hero sits directly above this section, so it
   needs less top padding than the original page (which has nothing
   above it but the nav). */
.contact-section--v2 {
  padding-top: 2.5rem;
}

.contact-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 6rem;
  align-items: start;
}

/* Left column */
.contact-section__left {
  display: flex;
  flex-direction: column;
}

.contact-section__heading {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  color: var(--c-blue);
  line-height: 1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.contact-section__intro {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 0.5rem;
}

.contact-section__details {
  margin-top: 1.75rem;
}

.contact-section__details p {
  font-size: 0.95rem;
  color: var(--c-muted);
  line-height: 1.6;
  margin-bottom: 0.35rem;
}

.contact-section__details a {
  color: var(--c-blue);
  text-decoration: underline;
  transition: color 0.2s;
}

.contact-section__details a:hover {
  color: var(--c-sky-blue);
}

/* Right column — CF7 form overrides */
.contact-section__form .wpcf7 {
  width: 100%;
}

.contact-section__form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* All CF7 inputs, selects and textareas */
.contact-section__form input[type="text"],
.contact-section__form input[type="email"],
.contact-section__form input[type="tel"],
.contact-section__form input[type="url"],
.contact-section__form input[type="number"],
.contact-section__form select,
.contact-section__form textarea {
  width: 100%;
  background: var(--c-blue-light);
  border: none;
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--c-black);
  outline: none;
  transition: background 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
}

.contact-section__form input::placeholder,
.contact-section__form textarea::placeholder {
  color: var(--c-muted);
}

.contact-section__form input:focus,
.contact-section__form select:focus,
.contact-section__form textarea:focus {
  background: var(--c-white);
  box-shadow: 0 0 0 2px var(--c-blue);
}

.contact-section__form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Select dropdown arrow */
.contact-section__form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  padding-right: 2.5rem;
}

/* CF7 label */
.contact-section__form .wpcf7-form label,
.contact-section__form label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-black);
  display: block;
  margin-bottom: 0.4rem;
}

/* CF7 submit button */
.contact-section__form input[type="submit"],
.contact-section__form .wpcf7-submit {
  background: var(--c-blue);
  color: var(--c-white);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.85rem 2.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  align-self: flex-end;
  transition: background 0.2s;
  width: auto;
}

.contact-section__form input[type="submit"]:hover,
.contact-section__form .wpcf7-submit:hover {
  background: var(--c-sky-blue);
}

/* CF7 validation */
.contact-section__form .wpcf7-not-valid-tip {
  font-size: 0.8rem;
  color: var(--c-crimson);
  margin-top: 0.25rem;
}

.contact-section__form .wpcf7-response-output {
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  margin-top: 0.5rem;
  border: none;
}

.contact-section__form .wpcf7-mail-sent-ok {
  background: var(--c-turquoise);
  color: var(--c-white);
}

.contact-section__form .wpcf7-mail-sent-ng,
.contact-section__form .wpcf7-spam-blocked {
  background: var(--c-crimson);
  color: var(--c-white);
}

/* ── CONTACT FORM — COMPACT (Contact Us 2 only) ── */
/* Tighter field spacing/height so the form fits without excessive
   scrolling, matching the old site's density. Scoped entirely to
   .contact-section__form--v2 — the original Contact Us form (which
   uses .contact-section__form alone) is completely unaffected. */
.contact-section__form--v2 .wpcf7-form {
  gap: 0.1rem;
}

.contact-section__form--v2 input[type="text"],
.contact-section__form--v2 input[type="email"],
.contact-section__form--v2 input[type="tel"],
.contact-section__form--v2 input[type="url"],
.contact-section__form--v2 input[type="number"],
.contact-section__form--v2 select,
.contact-section__form--v2 textarea {
  padding: 0.45rem 0.9rem;
  font-size: 0.88rem;
}

.contact-section__form--v2 textarea {
  min-height: 70px;
}

.contact-section__form--v2 .wpcf7-form label,
.contact-section__form--v2 label {
  font-size: 0.78rem;
  margin-bottom: 0.1rem;
}

.contact-section__form--v2 input[type="submit"],
.contact-section__form--v2 .wpcf7-submit {
  padding: 0.65rem 2.25rem;
}


/* ── OFFICES SECTION ── */
.contact-offices {
  background: var(--c-blue-light);
}

.contact-offices__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  max-width: 1400px;
  margin: 0 auto;
}

.contact-offices__image {
  overflow: hidden;
}

.contact-offices__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-offices__content {
  padding: 5rem 5vw 5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

.contact-offices__heading {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--c-blue);
  letter-spacing: -0.02em;
  margin: 0;
}

.contact-office {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-office__name {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-black);
  margin: 0;
}

.contact-office p {
  font-size: 0.95rem;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0;
}


/* ── ACKNOWLEDGEMENT OF COUNTRY ── */
.contact-acknowledgement {
  background: var(--c-white);
  padding: 3rem 5vw;
  border-top: 1px solid var(--c-border);
}

.contact-acknowledgement__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.contact-acknowledgement__inner p {
  font-size: 0.9rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin: 0;
}


/* ── RESPONSIVE: TABLET 900px ── */
@media (max-width: 900px) {
  .contact-section {
    padding: 5rem 5vw 4rem;
  }

  .contact-section__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .contact-offices__inner {
    grid-template-columns: 1fr;
  }

  .contact-offices__image {
    min-height: 320px;
  }

  .contact-offices__content {
    padding: 3.5rem 5vw;
  }
}


/* ── RESPONSIVE: MOBILE 600px ── */
@media (max-width: 600px) {
  .contact-section {
    padding: 3.5rem 5vw 3rem;
  }

  .contact-section__heading {
    font-size: 3rem;
  }

  .contact-offices__image {
    min-height: 240px;
  }

  .contact-offices__content {
    padding: 2.5rem 5vw;
    gap: 1.5rem;
  }

  .contact-acknowledgement {
    padding: 2.5rem 5vw;
  }

  .contact-section__form input[type="submit"],
  .contact-section__form .wpcf7-submit {
    width: 100%;
  }
}


/* ============================================================
   ABOUT US PAGE — CSS
   Sections reusing global styles: .hero-wrapper, .hero,
   .intro-band, .testimonial-band, .faq-section, .cta-simple
   ============================================================ */

/* ── STORY SECTION ── */
/* ── ABOUT US 2 — CULTURE CARDS ("We work hard...") ── */
.about-culture {
  background: var(--c-white);
  padding: 5rem 5vw;
}

.about-culture__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.about-culture__heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--c-blue);
  text-align: center;
  letter-spacing: -0.02em;
  margin-bottom: 3rem;
}

.about-culture__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.about-culture-card__media-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.about-culture-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden;
}

.about-culture-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.about-culture-card__overlay {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.about-culture-card__bar {
  background: var(--c-blue);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.9rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: background 0.2s;
}

.about-culture-card__chevron {
  display: inline-block;
  margin-left: 0.15rem;
}

a.about-culture-card__media-link:hover .about-culture-card__bar {
  background: var(--c-blue-dark);
}

a.about-culture-card__media-link:hover .about-culture-card__media img {
  transform: scale(1.03);
}

.about-culture-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin-top: 1rem;
}

@media (max-width: 900px) {
  .about-culture {
    padding: 3.5rem 5vw;
  }

  .about-culture__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.about-story {
  background: var(--c-white);
  padding: 4rem 5vw;
}

.about-story__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-story__heading {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 300;
  color: var(--c-blue);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.about-story__content p {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.about-story__content p:last-child { margin-bottom: 0; }

.about-story__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  position: relative;
}

.about-story__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center top;
  display: block;
}


/* ── INDUSTRY RECOGNITION ── */
.about-awards {
  background: var(--c-white);
  padding: 6rem 5vw;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.about-awards__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.about-awards__heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300;
  color: var(--c-blue);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.about-awards__intro {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  max-width: 820px;
  margin: 0 auto 3.5rem;
}

.about-awards__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem 3rem;
}

.about-awards__grid img {
  height: 160px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}


/* ── WHAT WE STAND FOR / OUR APPROACH ── */
.about-values {
  background: var(--c-white);
  padding: 7rem 5vw;
}

.about-values__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-values__inner--no-image {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Internship Program section: image on the right instead of left */
.about-values--reverse .about-values__image {
  order: 2;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  margin-left: 0;
  margin-right: calc(-5vw - 0px);
}
.about-values--reverse .about-values__content {
  order: 1;
}

.about-values--reverse {
  padding-bottom: 3rem;
}

@media (max-width: 900px) {
  .about-values--reverse .about-values__image,
  .about-values--reverse .about-values__content {
    order: 0;
  }
}

/* Reduce the gap between the two split sections (both share the same
   generous 7rem padding by default) */
.about-values--positions {
  padding-bottom: 3rem;
}
.about-values--reverse {
  padding-top: 3rem;
}

.about-values__image {
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  overflow: hidden;
  margin-left: calc(-5vw - 0px);
  position: relative;
  min-height: 400px;
  align-self: stretch;
}

.about-values__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.about-values__content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 1rem;
}

.about-values__block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.about-values__heading {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--c-blue);
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.about-values__block p {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin: 0;
}

.about-values__block ul,
.about-values__block ol {
  padding-left: 1.5rem;
  margin: 0;
}

.about-values__block ul {
  list-style: disc;
}

.about-values__block ol {
  list-style: decimal;
}

.about-values__block li {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 0.25rem;
}

.about-values__block a {
  color: var(--c-blue);
  text-decoration: underline;
}


/* ── OUR PEOPLE ── */
.about-people {
  background: var(--c-white);
  padding: 7rem 5vw;
  border-top: 1px solid var(--c-border);
}

.about-people--about2 {
  padding-bottom: 3rem;
  padding-top: 3rem;
}

.about-people--about2 .about-people__image {
  order: 1;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  margin-right: 0;
  margin-left: calc(-5vw - 0px);
}

.about-people--about2 .about-people__content {
  order: 2;
}

@media (max-width: 900px) {
  .about-people--about2 .about-people__image,
  .about-people--about2 .about-people__content {
    order: 0;
  }
}

.about-people__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-people__heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--c-blue);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.about-people__content p {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.about-people__content p:last-child { margin-bottom: 0; }

.about-people__image {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  overflow: hidden;
  margin-right: calc(-5vw - 0px);
  position: relative;
  min-height: 400px;
  align-self: stretch;
}

.about-people__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center top;
  display: block;
}


/* ── RESPONSIVE: TABLET 900px ── */
@media (max-width: 900px) {
  .about-story {
    padding: 5rem 5vw;
  }

  .about-story__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Show the whole photo on mobile — no fixed box, no cropping.
     Box follows the image's natural shape; everyone stays in frame. */
  .about-story__image {
    aspect-ratio: auto;
    position: static;
  }

  .about-story__image img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  .about-awards {
    padding: 4rem 5vw;
  }

  .about-awards__grid img {
    height: 120px;
    max-width: 160px;
  }

  .about-values {
    padding: 5rem 5vw;
  }

  .about-values__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-values__image {
    margin-left: 0;
    border-radius: var(--radius-xl);
    aspect-ratio: 16 / 9;
    order: -1;
    position: relative;
  }

  .about-values__image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .about-people {
    padding: 5rem 5vw;
  }

  .about-people__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Show the whole photo on mobile — no fixed box, no cropping.
     Matches the .about-story__image treatment. */
  .about-people__image {
    margin-right: 0;
    border-radius: var(--radius-xl);
    aspect-ratio: auto;
    min-height: 0;
    position: static;
  }

  .about-people__image img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}


/* ── RESPONSIVE: MOBILE 600px ── */
@media (max-width: 600px) {
  .about-story {
    padding: 3.5rem 5vw;
  }

  .about-awards {
    padding: 3.5rem 5vw;
  }

  .about-awards__grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
  }

  .about-awards__grid img {
    height: 100px;
    max-width: 140px;
  }

  .about-values {
    padding: 3.5rem 5vw;
  }

  .about-values__content {
    gap: 2rem;
  }

  .about-people {
    padding: 3.5rem 5vw;
  }
}


/* ═══════════════════════════════════════════════
   RELATED POSTS CAROUSEL
═══════════════════════════════════════════════ */

.related-posts {
  background: var(--c-white);
  padding: 5rem 5vw;
  border-top: 1px solid var(--c-border);
}

.related-posts__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.related-posts__heading {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  color: var(--c-black);
  margin-bottom: 2.5rem;
}

/* Track wrapper clips overflow */
.related-posts__track-wrap {
  overflow: hidden;
}

.related-posts__track {
  display: flex;
  gap: 2rem;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* Each card takes up 1/3 of the visible area (3 visible on desktop) */
.related-card {
  flex: 0 0 calc((100% - 4rem) / 3);
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.related-card__image-wrap {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.related-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.related-card:hover .related-card__image-wrap img {
  transform: scale(1.03);
}

.related-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.related-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.related-card__date {
  font-size: 0.8rem;
  color: var(--c-muted);
}

.related-card__cat {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.related-card__title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 1rem;
  flex: 1;
}

.related-card__title a {
  color: var(--c-black);
  text-decoration: none;
}

.related-card__title a:hover {
  color: var(--c-blue);
}

.related-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-blue);
  text-decoration: none;
  border-top: 1px solid var(--c-border);
  padding-top: 1rem;
  margin-top: auto;
}

.related-card__read-more span {
  color: var(--c-muted);
}

/* Prev / Next buttons */
.related-posts__controls {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  justify-content: flex-end;
}

.related-posts__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--c-blue);
  background: transparent;
  color: var(--c-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.related-posts__btn:hover:not(:disabled) {
  background: var(--c-blue);
  color: var(--c-white);
}

.related-posts__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── Tablet: 2 visible ── */
@media ( max-width: 900px ) {
  .related-card {
    flex: 0 0 calc((100% - 2rem) / 2);
  }
}

/* ── Mobile: 1 visible ── */
@media ( max-width: 600px ) {
  .related-posts {
    padding: 3rem 5vw;
  }

  .related-card {
    flex: 0 0 100%;
  }

  .related-posts__controls {
    justify-content: center;
  }
}


.prod-sources {
  padding: 1.5rem 5vw;
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
}

.prod-sources__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
}

.prod-sources__item {
  font-size: 0.78rem;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0;
}

.prod-sources__item a {
  color: var(--c-muted);
  text-decoration: underline;
}

/* ============================================================
   RESPONSIVE AUDIT — Tablet (768px) & iPhone 17 (393px)
   Applied to all components updated in this session
   ============================================================ */

/* ── TABLET 768px ── */
@media (max-width: 768px) {

  /* News card image */
  .news-card__image-wrap {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
  }

  .news-card__image-wrap img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* Services section */
  .home-services {
    padding: 4rem 5vw;
  }

  .home-services__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .home-services__left {
    text-align: center;
  }

  .home-services__left .eyebrow {
    display: block;
  }

  /* Values section */
  .home-values__body {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .home-values__image {
    aspect-ratio: 16 / 9;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Case study hero image */
  .cs-hero__image {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
  }

  .cs-hero__image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  /* Case study related cards — stack to 1 col */
  .cs-related__grid {
    grid-template-columns: 1fr;
  }

  .cs-related__card-image {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
  }

  .cs-related__card-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  /* Single post featured image */
  .single-image-band__image img {
    max-height: 360px;
  }

  /* Home logos heading */
  .home-logos h2 {
    max-width: 600px;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
  }

  /* Client logo size — tablet */
  .home-logos__track img {
    height: 50px;
    width: auto;
    max-width: 140px;
  }

  /* Portfolio grid — 2 cols on tablet */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-item__card {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
  }

  .portfolio-item__card img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }
}


/* ── MOBILE — iPhone 17 (393px) ── */
@media (max-width: 393px) {

  /* News card image — slightly taller crop on narrow screens */
  .news-card__image-wrap {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
  }

  .news-card__image-wrap img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* News grid — single column */
  .news-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .news-card__title {
    font-size: 1rem;
  }

  /* Services */
  .home-services {
    padding: 3rem 5vw;
  }

  .home-services__left h2 {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .home-service-row {
    padding: 1.25rem 0;
    gap: 1rem;
  }

  .home-service-row__icon {
    width: 44px;
    height: 44px;
  }

  .home-service-row p {
    font-size: 0.95rem;
    color: var(--c-muted);
    line-height: 1.75;
  }

  /* Values section */
  .home-values {
    padding: 3rem 5vw;
  }

  .home-values__statement {
    margin-bottom: 2rem;
  }

  .home-values__image {
    aspect-ratio: 4 / 3;
  }

  .home-values__content {
    gap: 1.25rem;
  }

  .home-values__lead {
    font-size: 0.9rem;
  }

  /* Case study hero */
  .cs-hero__image {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
  }

  .cs-hero__image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .cs-hero__title h1 {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  /* Case study related */
  .cs-related__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cs-related__card-image {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
  }

  .cs-related__card-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  /* Portfolio — single column */
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-item__card {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
  }

  .portfolio-item__card img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  /* Single post featured image */
  .single-image-band {
    padding: 0 4vw 1rem;
  }

  .single-image-band__image img {
    max-height: 240px;
  }

  .single-image-band__caption {
    text-align: left;
    font-size: 0.75rem;
  }

  /* Home logos heading */
  .home-logos h2 {
    max-width: 100%;
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    margin-bottom: 2rem;
  }

  /* Client logo size — iPhone 17 */
  .home-logos__track img {
    height: 42px;
    width: auto;
    max-width: 120px;
  }
}

/* ============================================================
   RESPONSIVE AUDIT — Additional fixes (May 2026)
   ============================================================ */

/* ── iOS Safari: smooth momentum scrolling for overflow areas ── */
.news-categories__inner,
.single-related__track-wrap,
.home-logos__track-wrap {
  -webkit-overflow-scrolling: touch;
}

/* ── iOS Safari: prevent font inflation on rotate ── */
.page-wrap {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Contact section: tighter padding on iPhone ── */
@media (max-width: 393px) {
  .contact-section {
    padding: 4rem 5vw 3.5rem;
  }

  .contact-section__heading {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }

  .contact-section__inner {
    gap: 2.5rem;
  }

  .contact-offices__inner {
    grid-template-columns: 1fr;
  }

  .contact-offices__content {
    padding: 2rem 5vw;
  }

  .contact-acknowledgement__inner {
    padding: 2rem 5vw;
  }

  /* Footer partners — smaller logos, centred on iPhone */
  .connected-footer-partners img {
    height: 28px;
  }

  /* Share buttons — ensure wrap on very narrow screens */
  .single-share__buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .single-share__btn {
    font-size: 0.8rem;
    padding: 0.5rem 0.9rem;
  }

  /* FAQ button text doesn't overflow */
  .faq-question {
    font-size: 0.9rem;
    gap: 0.5rem;
  }

  /* Hero content: tighter on very small screens */
  .hero-content {
    padding: 2rem 4vw;
  }

  .hero-content h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  /* CTA simple: tighter heading */
  .cta-simple h2 {
    font-size: clamp(1.4rem, 5.5vw, 1.8rem);
  }

  /* Testimonial band: tighter padding */
  .testimonial-band {
    padding: 1.75rem 5vw 3.5rem;
  }

  .testimonial-band blockquote {
    font-size: 1rem;
  }

  /* Stats grid */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-number {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }
}

/* ── Chrome vs Safari: ensure video covers correctly on all browsers ── */
.home-hero__video {
  -webkit-object-fit: cover;
  object-fit: cover;
}

/* ── Safari: fix for sticky nav z-index stacking context ── */
.connected-nav {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ── Safari: border-radius clip fix for hero image ── */
.hero-image,
.home-who__image,
.home-values__image,
.about-story__image,
.about-values__image,
.about-people__image {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
/* ============================================================
   CLIENT REPORT TEMPLATE — Password Gate + Iframe
   Append to: connected-global.css

   Breakpoints match the rest of the theme:
     900px → tablet (iPad portrait, large phones landscape)
     600px → mobile (iPhone 14/15/16/17 class portrait widths, ~390-430px)
     393px → narrow phones (iPhone SE/mini and similar)
   ============================================================ */

/* ── PASSWORD GATE ── */

/* Safety net: hides WordPress's default "This content is password
   protected..." banner if it's ever printed separately from the
   the_password_form filter output (e.g. by a theme/plugin that prints
   it independently). Our own form prints its own intro copy instead. */
.client-report-page .post-password-message {
  display: none;
}

.client-report-page .post-password-form {
  max-width: 480px;
  margin: 5rem auto;
  padding: 0 5vw;
  text-align: left;
  min-height: 50vh;
  box-sizing: border-box;
}

.client-report-page .post-password-form__heading {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 5vw, 3rem);
  color: var(--c-black);
  margin-bottom: 0.75rem;
}

.client-report-page .post-password-form p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-black);
  margin-bottom: 1.5rem;
}

.client-report-page .post-password-form__error {
  color: var(--c-crimson);
  font-weight: 700;
  margin-top: -0.75rem;
}

.client-report-page .post-password-form label {
  display: block;
  width: 100%;
}

.client-report-page .post-password-form label > * {
  display: block;
  width: 100%;
}

.client-report-page .post-password-form input[type="password"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  background: transparent;
  padding: 0.75rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-black);
  outline: none;
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  transition: border-color 0.2s;
  box-sizing: border-box;
  /* Prevent iOS Safari auto-zoom on focus (triggers below 16px) */
  font-size: 16px;
}
.client-report-page .post-password-form input[type="password"]::placeholder {
  color: #bbbbbb;
}
.client-report-page .post-password-form input[type="password"]:focus {
  border-color: var(--c-blue);
}

.client-report-page .post-password-form input[type="submit"] {
  display: block;
  width: 100%;
  background: var(--c-blue);
  color: var(--c-white);
  border: none;
  border-radius: 0;
  padding: 1rem 2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s;
  box-sizing: border-box;
}
.client-report-page .post-password-form input[type="submit"]:hover {
  background: var(--c-blue-dark);
}

/* ── REPORT IFRAME ── */
.client-report {
  width: 100%;
  /* Generous fixed height so the dashboard has room to work with, while still
     leaving the footer visible below on scroll. Adjust if reports need more/less. */
  height: 85vh;
  min-height: 700px;
  /* Allows pinch/scroll on touch devices if the embedded dashboard is wider
     than the viewport — third-party dashboard content does not reflow to fit
     a narrow iframe, so this avoids it being crushed illegibly on phones. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.client-report__iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.client-report__missing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 5vw;
  text-align: center;
  box-sizing: border-box;
}
.client-report__missing p {
  font-family: var(--font-body);
  color: var(--c-muted);
  max-width: 480px;
}

/* ── RESPONSIVE: TABLET 900px ── */
@media (max-width: 900px) {
  .client-report-page .post-password-form {
    margin: 4rem auto;
  }

  .client-report {
    /* Nav drops to 56px at this breakpoint */
    height: 75vh;
    min-height: 600px;
  }

  /* Give the embedded dashboard room to render its own layout, then let the
     wrapper scroll horizontally rather than squashing columns. Most report
     dashboards (Looker Studio, Power BI, etc.) are built around ~1000-1200px
     minimum widths, so we hold the iframe element itself at that width and
     let the parent scroll. */
  .client-report__iframe {
    min-width: 1000px;
    width: 100%;
  }
}

/* ── RESPONSIVE: MOBILE 600px (iPhone-class portrait widths) ── */
@media (max-width: 600px) {
  .client-report-page .post-password-form {
    margin: 3rem auto;
    padding: 0 6vw;
  }
  .client-report-page .post-password-form__heading {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .client-report {
    height: 70vh;
    min-height: 480px;
  }
}

/* ── RESPONSIVE: NARROW PHONES 393px (iPhone SE/mini and similar) ── */
@media (max-width: 393px) {
  .client-report-page .post-password-form {
    margin: 2.5rem auto;
  }
  .client-report-page .post-password-form__heading {
    font-size: clamp(1.6rem, 9vw, 2rem);
  }

  .client-report {
    height: 65vh;
    min-height: 420px;
  }
}


/* ── HOME2 AWARDS + INTRO (Layout Test) ── */
/* Blue bg, two-column: award logo grid left, intro copy right. */
/* Used by home-page-template-2.php only — original .home-awards-strip / */
/* .home-intro-band rules above are untouched so the live homepage is unaffected. */
.home2-awards-intro {
  background: var(--c-blue);
  padding: 5rem 5vw;
  width: 100%;
  box-sizing: border-box;
}

.home2-awards-intro__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
  width: 100%;
  box-sizing: border-box;
}

/* Logo grid — left column */
.home2-awards-intro__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem 1.5rem;
  align-items: center;
  justify-items: center;
}

.home2-awards-intro__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

.home2-awards-intro__logo img {
  height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.home2-awards-intro__logo:hover img {
  opacity: 1;
}

/* Intro copy — right column */
.home2-awards-intro__text {
  text-align: left;
}

.home2-awards-intro__text h2 {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  font-weight: 300;
  color: var(--c-white);
  line-height: 1.6;
  margin: 0;
}

/* ── Responsive: tablet ── */
@media (max-width: 900px) {
  .home2-awards-intro {
    padding: 4rem 6vw;
  }

  .home2-awards-intro__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .home2-awards-intro__logos {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  .home2-awards-intro__logo img {
    height: 50px;
  }

  .home2-awards-intro__text {
    text-align: center;
  }
}

/* ── Responsive: mobile ── */
@media (max-width: 600px) {
  .home2-awards-intro {
    padding: 3rem 6vw;
  }

  .home2-awards-intro__inner {
    gap: 2rem;
  }

  .home2-awards-intro__logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .home2-awards-intro__logo img {
    height: 42px;
  }

  .home2-awards-intro__text h2 {
    font-size: 1.1rem;
  }
}

/* ── Responsive: small phone ── */
@media (max-width: 393px) {
  .home2-awards-intro {
    padding: 2.5rem 5vw;
  }

  .home2-awards-intro__logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }

  .home2-awards-intro__logo img {
    height: 34px;
  }

  .home2-awards-intro__text h2 {
    font-size: 1rem;
  }
}

/* ============================================================
   HOME PAGE 2 — NEW SECTIONS
   Added for: home-page-template-2.php ("Home Page 2")
   These rules are additive only — nothing above this point has
   been modified, so the original Home Page template and all
   other pages are unaffected.
   ============================================================ */

/* ── BLOG LINKS ── */
/* White bg, eyebrow/heading/intro, 6-box grid (2 rows x 3 cols). */
/* Sits after "Our Work" case study, before "Who We Are". */
.home-blog-links {
  padding: 2rem 5vw 2rem;
  background: var(--c-white);
}

.home-blog-links__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Eyebrow uses global .eyebrow class */

.home-blog-links__inner h2 {
  font-weight: 300;
  margin-bottom: 0.75rem;
}

.home-blog-links__intro {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 640px;
}

.home-blog-links__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

.home-insight-tile {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.home-insight-tile--image {
  position: relative;
  min-height: 59px;
  background: var(--c-off-white);
}

.home-insight-tile--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-insight-tile--placeholder {
  background: var(--c-blue-light);
}

.home-insight-tile--text {
  background: var(--c-off-white);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.home-insight-tile__category {
  display: inline-block;
  align-self: flex-start;
  background: var(--c-blue);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.home-insight-tile__heading {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-black);
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

.home-insight-tile__text {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--c-muted);
  line-height: 1.6;
  margin-bottom: 0;
}

.home-insight-tile__text strong {
  font-weight: 900;
  color: var(--c-black);
}

a.home-insight-tile:hover .home-insight-tile__heading {
  color: var(--c-blue);
}

a.home-insight-tile--image:hover img {
  transform: scale(1.03);
}

.home-insight-tile--image img {
  transition: transform 0.3s ease;
}


/* ── OUR APPROACH ── */
/* White bg, eyebrow/heading/intro, 3-column icon cards. */
/* Sits after "Who We Are", before "Our Values". */
.home-approach {
  padding: 6rem 5vw 2rem;
  background: var(--c-white);
}

.home-approach__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Eyebrow uses global .eyebrow class */

.home-approach__inner h2 {
  font-weight: 300;
  margin-bottom: 0.75rem;
}

.home-approach__intro {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 640px;
}

.home-approach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.home-approach-card {
  background: var(--c-blue-light);
  border-radius: var(--radius-md);
  padding: 2rem;
}

.home-approach-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1.25rem;
}

.home-approach-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-approach-card h3 {
  font-weight: 400;
  color: var(--c-black);
  margin-bottom: 0.75rem;
}

/* HIGHLIGHTS — new section between Our Approach and Insights */
.home-highlights {
  padding: 2rem 5vw 2rem;
  background: var(--c-white);
}

.home-highlights__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.home-highlights__inner h2 {
  font-weight: 300;
  margin-bottom: 0.75rem;
}

.home-highlights__intro {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 640px;
}

.home-highlights__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.home-highlights-box {
  background: var(--c-blue-light);
  border-radius: var(--radius-md);
  padding: 1.1rem 2rem;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-highlights-box--link {
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.home-highlights-box--link:hover {
  background: var(--c-blue-light-2, #d6d6ff);
}

.home-highlights-box__heading {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  color: var(--c-black);
  margin-bottom: 0.35rem;
}

.home-highlights-box__body {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--c-muted);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 700px) {
  .home-highlights__grid {
    grid-template-columns: 1fr;
  }
}

.home-approach-card__body p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin-bottom: 0;
}

.home-approach-card__body a {
  color: var(--c-blue);
  text-decoration: underline;
}


/* ── RESPONSIVE: TABLET 900px ── */
@media (max-width: 900px) {
  .home-blog-links {
    padding: 1.5rem 5vw;
  }

  .home-blog-links__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-insight-tile--image {
    min-height: 49px;
  }

  .home-insight-tile--text {
    padding: 1.25rem;
  }

  .home-approach {
    padding: 4rem 5vw 1.5rem;
  }

  .home-approach__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ── RESPONSIVE: MOBILE 600px ── */
@media (max-width: 600px) {
  .home-blog-links {
    padding: 1.25rem 5vw;
  }

  .home-blog-links__grid {
    grid-template-columns: 1fr;
  }

  .home-insight-tile--image {
    min-height: 54px;
  }

  .home-approach {
    padding: 3.5rem 5vw 1.25rem;
  }
}

/* ── CONTACT HERO (Contact Us 2 only) ── */
/* Full-width background image, blue overlay for text contrast, centred
   heading/subtext, curved white edge flowing into the page content below.
   Scoped entirely to .contact-hero — no shared/global selectors touched. */
.contact-hero {
  position: relative;
  min-height: 60vh;
  background-color: var(--c-blue);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 6rem 5vw 4rem;
}

.contact-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 255, 0.55); /* Blue tint over the image for text contrast */
  z-index: 1;
}

.contact-hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.contact-hero__heading {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  color: var(--c-white);
  margin: 0;
  line-height: 1.1;
}

.contact-hero__subtext {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
  color: var(--c-white);
  max-width: 900px;
}

.contact-hero__subtext p {
  margin: 0;
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: 600;
  color: var(--c-white);
  line-height: 1.5;
}

.contact-hero__subtext p + p {
  margin-top: 0.5rem; /* tight gap between the two subtext lines */
}

.contact-hero__curve {
  position: absolute;
  left: 0;
  bottom: -1px; /* -1px avoids a hairline gap from sub-pixel rounding */
  width: 100%;
  height: 80px;
  z-index: 3;
  display: block;
}

@media (max-width: 900px) {
  .contact-hero {
    min-height: 50vh;
    padding: 5rem 6vw 3rem;
  }
  .contact-hero__curve {
    height: 50px;
  }
}