/* ============================================================
   Climb 10 — Static Site Stylesheet
   Faithfully replicates the Drupal theme design
   System font: Helvetica Neue / Arial (matches original)
   Primary purple: #46003F
   ============================================================ */

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

/* ---- SUCCESS BANNER ---- */
#success-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #29abe2;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 48px 14px 24px;
  position: relative;
  text-align: center;
  width: 100%;
}
#success-banner-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  opacity: 0.8;
}
#success-banner-close:hover { opacity: 1; }

/* Headings never inherit the body's 1.6 prose line-height */
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #777;
  font-size: 16px;
  line-height: 1.6;
  background: #fff;
}

a { color: #46003F; }
a:hover { color: #6b005e; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

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

/* ---- HEADER & NAV ---- */
header {
  background: #fff;
  border-bottom: 1px solid #eee;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo a { display: block; }
.logo img { height: 62px; width: auto; }

nav { display: flex; align-items: center; gap: 0; }

nav a {
  color: #46003F;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  padding: 8px 16px;
  transition: color 0.2s;
}
nav a:hover { color: #000; text-decoration: none; }

/* Mobile hamburger (hidden on desktop) */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: #46003F; margin: 5px 0;
  transition: all 0.3s;
}

/* ---- PAGE TITLE BANNER ---- */
.page-title {
  padding: 20px 40px 0;
  text-align: right;
  max-width: 1250px;
  margin: 0 auto;
}

.page-title h1 {
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 500;
  text-transform: uppercase;
  color: #46003F;
  letter-spacing: 0;
  line-height: 1.1;
}

.page-title .title-rule {
  border: none;
  border-top: 4px solid #46003F;
  margin: 1px 0 0;
  max-width: 100%;
}

/* ---- SECTIONS ---- */
.section { padding: 32px 48px 40px; }
.section-grey { background: #eeeeee; }
.section-white { background: #fff; }

.container {
  max-width: 1170px;
  margin: 0 auto;
}

/* ---- ANCHOR SCROLL OFFSET ---- */
/* No sticky header, so no offset needed */

/* ---- SECTION HEADINGS ---- */
h2.section-title {
  font-size: 34px;
  font-weight: 500;
  color: #777;
  margin-bottom: 8px;
}

h3.subsection-title {
  display: inline-block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: #46003F;
  margin-bottom: 0;
  padding-bottom: 4px;
  padding-left: 6px;
  border-left: 3px solid #46003F;
  border-bottom: 3px solid #46003F;
  position: relative;
}

/* Black variant — About sub-headings: short underline via border-image (25% width) */
h3.subsection-title--black {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  color: #000;
  padding-left: 0;
  border-left: none;
  border-bottom: 2px solid #000;
  border-image: linear-gradient(to right, #000 25%, transparent 25%) 100% 1;
}

/* ---- FOUNDER / ABOUT SECTION ---- */
.founder-layout {
  display: grid;
  grid-template-columns: 275px 1fr;
  gap: 30px;
  align-items: start;
  padding-top: 0;
  padding-left: 92px;
}

.founder-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* The main bio heading "About Leslie Simone" is an h2, not h3 — no override needed here */

.founder-sub-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 24px;
  padding-top: 0;
  /* indent to align with bio column (left-offset 92px + photo 275px + gap 30px) */
  padding-left: calc(92px + 275px + 30px);
}

/* ---- SERVICES TITLE (inside grey section) ---- */
h2.services-title {
  font-size: 64px;
  font-weight: 500;
  color: #46003F;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 16px;
  line-height: 1.1;
  border-bottom: 3px solid #46003F;
  padding-bottom: 12px;
}

/* ---- SERVICES CTA BUTTON (at bottom of About section) ---- */
.services-cta-btn {
  text-align: center;
  margin-top: 32px;
}

/* ---- EXECUTIVE COACHING ---- */
.exec-coaching-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 32px;
  align-items: center;
}

.exec-coaching-heading-col {
  /* heading column — inline-block h3 sits flush left */
}

.exec-coaching-desc {
  color: #000;
  font-size: 13px;
  max-width: 320px;
  margin-top: 8px;
  margin-bottom: 0;
  /* indent to align "B" with "E": heading border-left (3px) + padding-left (6px) */
  padding-left: 9px;
}

.coaching-programs {
  width: 340px;
}

.program-item {
  display: flex;
  gap: 16px;
  align-items: center;
  border-bottom: 2px solid #000;
  border-image: linear-gradient(to right, #000 35%, transparent 35%) 100% 1;
  padding: 6px 0;
}

.program-num {
  font-size: 54px;
  font-weight: 400;
  line-height: 1;
  color: #000;
  flex-shrink: 0;
  width: 36px;
  text-align: left;
}

.program-info {
  flex: 1;
}

.program-info h4 {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
  margin-bottom: 4px;
}

/* ---- STRATEGIC SUPPLEMENTS ---- */
.supplements-title-wrapper {
  text-align: right;
  margin-bottom: 32px;
}

.supplements-title-wrapper p {
  font-size: 13px;
  color: #000;
  margin-top: 4px;
}

h3.subsection-title.subsection-title--right {
  border-left: none;
  padding-left: 0;
  border-right: 3px solid #46003F;
  padding-right: 6px;
  border-bottom: 3px solid #46003F;
}

.testimonial.testimonial-plain {
  border-left: none;
  font-style: normal;
  padding-left: 18px; /* indent to clear the absolute open-quote */
  margin-top: 24px;
  max-width: 400px;
  color: #777;
  font-size: 15px;
  line-height: 1.4;
}

/* In the plain testimonial the mark is centered within the narrow block */
.testimonial.testimonial-plain .testimonial-mark-img {
  margin: 0 auto 8px auto;
}

/* Quote text wrapper — open quote is the actual open_quote.png asset (14×11px) */
.tq {
  position: relative;
  display: inline;
}
.tq::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 2px;
  width: 14px;
  height: 11px;
  background: url('assets/open_quote.png') no-repeat center / contain;
}
.tq::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 11px;
  background: url('assets/close_quote.png') no-repeat center / contain;
  margin-left: 4px;
  vertical-align: middle;
}

.testimonial.testimonial-plain cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  color: #777;
  text-transform: none;
  letter-spacing: 0;
}

.testimonial.testimonial-with-mark {
  text-align: left;
  border-left: none;
  padding-left: 20px; /* room for absolute open-quote */
  font-style: normal;
  color: #777;
  font-size: 15px;
  line-height: 1.4;
  margin-left: auto;
  max-width: 400px;
}

.testimonial.testimonial-with-mark cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  color: #777;
  text-transform: none;
  letter-spacing: 0;
}

/* Signature Talks testimonial — left-aligned, no mark image */
.testimonial-talks-mark {
  display: block;
  width: 80px;
  height: auto;
  margin: 0 auto 14px;
}

.testimonial.testimonial-talks {
  border-left: none;
  padding-left: 20px;   /* room for absolute open-quote */
  font-style: normal;
  color: #777;
  font-size: 15px;
  line-height: 1.4;
  margin-left: 0;
  max-width: 397px;
  margin-top: 24px;
}

.testimonial.testimonial-talks cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  color: #777;
  text-transform: none;
  letter-spacing: 0;
}

.testimonial-mark-img {
  width: 48px;
  height: 48px;
  opacity: 1;
  display: block;
  margin: 0 auto 8px auto;
}

/* Left-aligned variant keeps auto centering but anchors to left edge */
.testimonial-mark-img--left {
  margin: 0 0 8px 0;
}

.supplements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 28px auto 0;
  max-width: 784px;
}

.supplement-item {
  margin-bottom: 0;
}

.supplement-item h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 8px;
  color: #000;
  margin-bottom: 6px;
}

.supplement-item p {
  font-size: 16px;
  color: #777;
  margin-bottom: 0;
}

/* ---- SIGNATURE TALKS & WORKSHOPS ---- */
/* Title row: sits above photo+workshops as its own block */
.sig-talks-title-wrapper {
  display: block;
  margin-bottom: 0;
}

/* Photo + WORKSHOPS flex row — shifted right to match original */
.sig-talks-photo-workshops {
  display: flex;
  width: 720px;
  position: relative;
  left: 366px;   /* mirrors original's left:392px on a 1220px container */
  margin-bottom: 0;
}

/* Photo column */
.sig-talks-photo {
  width: 360px;
  flex-shrink: 0;
}

.sig-talks-photo img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 6px;
}

/* Stacked WORKSHOPS letters column */
.sig-talks-workshops-col {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* WORKSHOPS stacked text — 55px to match original */
.workshop-stacked {
  display: inline-block;
  width: 160px;           /* fixed width so RK/OPS right-align correctly relative to WO/SH */
  font-size: 55px;
  font-weight: 500;
  color: #46003F;
  line-height: 1.0;
}

/* Each letter-pair: block so each child div fills parent (content) width */
.workshop-stacked-top,
.workshop-stacked-bottom {
  display: block;
}

/* WO and SH stay left-aligned (default); RK and OPS are right-aligned */
.workshop-stacked-top div:last-child,
.workshop-stacked-bottom div:last-child {
  text-align: right;
}

.workshop-stacked-top {
  border-bottom: 2px solid #46003F;
  padding-bottom: 3px;
}

/* ---- WORKSHOPS (numbered items) ---- */

.workshop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 30px;
  margin-top: 32px;
}

.workshop-item { align-self: start; } /* prevent grid from stretching height */

/* Waterfall stagger — each item cascades 120px below the previous */
.workshop-item:nth-child(2) { margin-top: 120px; }
.workshop-item:nth-child(3) { margin-top: 240px; }

.workshop-header {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid #000;
  padding-bottom: 6px;
  margin-bottom: 24px;
}

.workshop-num {
  font-size: 54px;
  font-weight: 400;
  line-height: 1.42857;
  color: #000;
  flex-shrink: 0;
}

.workshop-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: #000;
}

/* ---- TESTIMONIALS ---- */
.testimonial {
  border-left: 3px solid #46003F;
  padding: 12px 20px;
  margin: 36px 0;
  font-style: italic;
  color: #555;
  font-size: 15px;
}

.testimonial cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  color: #46003F;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- TESTIMONIAL CENTERED (wizard quote in results section) ---- */
.testimonial.testimonial-centered {
  border-left: none;
  padding-left: 0;
  text-align: center;
  margin: 36px auto 0;
}

.testimonial-centered-mark {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
}

.testimonial-centered-quote {
  font-size: 15px;
  font-weight: 400;
  color: #777;
  text-align: center;
  position: relative;
  display: inline-block;
}

.testimonial-centered-quote::before {
  content: url('assets/open_quote.png');
  display: block;
  width: 14px;
  height: 21px;
  position: absolute;
  left: -18px;
}

.testimonial-centered-quote::after {
  content: url('assets/close_quote.png');
  display: inline;
  position: relative;
  top: -4px;
  left: 4px;
}

.testimonial-centered-person {
  font-size: 16px;
  color: #777;
  text-align: center;
  margin-top: 8px;
}

/* ---- GUIDING PRINCIPLES ---- */
.gp-heading {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 40px;
}

.gp-heading-left {
  flex: 1;
}

.gp-title-word {
  font-size: 64px;
  font-weight: 700;
  color: #46003F;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Line under "GUIDING" — matches original border-bottom: 4px on first word only */
.gp-title-word:first-child {
  border-bottom: 4px solid #46003F;
}

.gp-heading-right {
  width: 400px;
  flex-shrink: 0;
}

.gp-values-block {
  margin-bottom: 16px;
}

.gp-starts-here {
  font-size: 22px;
  color: #777;
  margin-top: 39px;
  margin-bottom: 3px;
  max-width: 340px;
  padding-left: 8px;
}

.gp-values {
  margin-bottom: 0;
}

.gp-value-item {
  font-size: 24px;
  font-weight: 700;
  color: #46003F;
  border-left: 4px solid #46003F;
  padding-left: 4px;
  line-height: 1.4;
}

.gp-footer-text {
  font-size: 12px;
  color: #777;
  line-height: 1.5;
}

.gp-body {
  display: flex;
  gap: 0;
  align-items: center;
}

/* ---- GP TESTIMONIAL QUOTE ---- */
.gp-quote {
  border-left: none;
  font-style: normal;
  padding: 0;
  margin: 0;
}

.gp-quote-logo {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px auto;
}

.gp-quote-text {
  font-size: 15px;
  color: #777;
  line-height: 21px;
  margin: 0 0 12px 0;
  position: relative;
}

.gp-quote-text::before {
  content: url('assets/open_quote.png');
  display: block;
  width: 14px;
  height: 21px;
  position: absolute;
  left: -18px;
}

.gp-quote-text::after {
  content: url('assets/close_quote.png');
  display: inline;
}

.gp-quote-cite {
  display: block;
  font-size: 14px;
  color: #555;
  font-style: normal;
}

.gp-list-wrapper {
  flex: 1;
}

.gp-intro {
  font-size: 32px;
  font-weight: 400;
  color: #777;
  width: 300px;
  margin-bottom: 16px;
  line-height: 1.3;
}

.gp-list { }

.gp-item {
  max-width: 480px;
  margin-bottom: 28px;
}

.gp-item-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #000;
  margin-bottom: 0;
}

.gp-item p { margin-bottom: 0; color: #777; font-size: 16px; }

.gp-testimonial-col {
  width: 400px;
  flex-shrink: 0;
  padding-top: 0;
}

/* ---- RESULTS ---- */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 32px;
}

.result-item {
  text-align: center;
}

/* SVG icons in results grid */
.result-item svg {
  display: block;
  width: auto;
  height: 80px;
  margin: 0 auto 20px;
}

/* Leaders as Coaches has a square viewBox — constrain width too */
.result-item svg.c-results__leaders {
  height: 80px;
  width: 80px;
}

/* Colour the un-filled paths with the brand purple */
.result-item svg path:not([fill]),
.result-item svg polygon:not([fill]) {
  fill: #450B3E;
}

/* Grey paths */
.result-item svg path.c-results__embody-spark,
.result-item svg path.c-results__astound-rocket {
  fill: #CBCBCB;
}

/* Blue accent paths within results SVGs — specificity matches :not([fill]) rule so source order wins */
.result-item svg path.c-results__astound-chart,
.result-item svg path.c-results__embody-star,
.result-item svg path.c-results__talent-second-row,
.result-item svg polygon.c-results__talent-second-row,
.result-item svg polygon.c-results__mastery-block,
.result-item svg path.c-results__leaders-feather,
.result-item svg polygon.c-results__leaders-feather {
  fill: #00ADEF;
}

.result-item h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: #000;
  margin-bottom: 10px;
  text-align: center;
}

.result-item p {
  max-width: 308px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- CONTACT SECTION (photo background + two-col) ---- */
.contact-photo-section {
  position: relative;
  background-image: url('assets/contact_bg_1920.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.contact-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 0;
}

.contact-content {
  position: relative;
  z-index: 1;
  max-width: 1220px;
  margin: 0 auto;
  padding: 114px 40px;
}

.contact-two-col {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.contact-left-col {
  flex: 0 1 380px;
}

.contact-heading {
  font-size: 34px;
  font-weight: 500;
  color: #000;
  margin-bottom: 24px;
  line-height: 1.2;
  text-align: center;
}

.contact-left-col p {
  font-size: 14px;
  color: #555;
  margin-bottom: 16px;
  text-align: center;
}

.contact-right-col {
  flex: 1;
}

.contact-form {
  width: 100%;
}

.contact-form label {
  display: inline-block;
  font-size: 16px;
  color: #777;
  margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid #ccc;
  margin-bottom: 16px;
  font-family: inherit;
  font-size: 15px;
  color: #555;
  background: #fff;
  border-radius: 0;
  appearance: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid #46003F;
  border-color: #46003F;
}

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

.contact-form button {
  background: #46003F;
  color: #fff;
  border: none;
  padding: 10px 25px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}

.contact-form button:hover { background: #5e0056; }

/* ---- FOOTER ---- */
footer {
  background: #46003F;
  color: rgba(255,255,255,0.85);
  padding: 28px 40px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
}

.footer-contact p { margin-bottom: 5px; font-size: 14px; }
.footer-contact a { color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-contact a:hover { color: #fff; text-decoration: underline; }

.footer-mark img { height: 64px; width: auto; opacity: 0.9; }
.footer-pledge a img {
  height: 70px;
  width: auto;
  background: #fff;
  padding: 6px 10px;
  border-radius: 2px;
}

/* ---- BUTTON / CTA ---- */
.btn {
  display: inline-block;
  background: #46003F;
  color: #fff;
  padding: 13px 36px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}
.btn:hover { background: #5e0056; color: #fff; }

/* ---- DIVIDER ---- */
.section-divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 48px 0;
}

/* ---- BRANDING PAGE SPECIFIC ---- */
.color-swatch {
  width: 70px;
  height: 70px;
  border: 1px solid #ddd;
  margin-bottom: 8px;
  border-radius: 2px;
}

.brand-section { margin-bottom: 48px; }

.brand-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.brand-table th {
  text-align: left;
  padding: 10px 14px;
  background: #46003F;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brand-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  vertical-align: middle;
}

.brand-table tr:hover td { background: #f9f9f9; }

.brand-table td img { max-height: 60px; width: auto; }

.brand-table td a {
  color: #46003F;
  font-weight: 600;
  text-decoration: none;
}
.brand-table td a:hover { text-decoration: underline; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  /* Nav */
  .nav-toggle {
    display: block;
    background: #46003F;
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
  }
  .nav-toggle span { background: #fff; }
  nav { display: none; flex-direction: column; width: 100%; background: #fff; }
  nav.open { display: flex; }
  nav a { padding: 12px 40px; border-top: 1px solid #f0f0f0; }
  .nav-container { flex-wrap: wrap; padding: 14px 24px; }
  .logo img { height: 38px; }

  /* Page title */
  .page-title { padding: 36px 24px 0; text-align: left; }
  .page-title h1 { font-size: 32px; letter-spacing: 1px; }
  .page-title .title-rule { float: none; width: 100%; margin: 8px 0 0; }

  /* Founder */
  .founder-layout { grid-template-columns: 1fr; padding-left: 0; }
  .founder-photo { max-width: 180px; margin: 0 auto 24px; }
  .founder-sub-cols { grid-template-columns: 1fr; padding-left: 0; }

  /* Services */
  h2.services-title { font-size: 32px; letter-spacing: 1px; }
  .exec-coaching-layout { grid-template-columns: 1fr; }
  .supplements-grid { grid-template-columns: 1fr; }
  .supplements-title-wrapper { text-align: left; }
  h3.subsection-title.subsection-title--right {
    border-right: none; padding-right: 0;
    border-left: 3px solid #46003F; padding-left: 6px;
  }
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
  .results-grid { grid-template-columns: 1fr; }

  /* Signature talks */
  .sig-talks-photo-workshops { position: static; width: 100%; }
  .sig-talks-photo img { height: 260px; }
  .workshop-stacked { font-size: 42px; width: 122px; }
  .workshop-item:nth-child(2) { margin-top: 92px; }
  .workshop-item:nth-child(3) { margin-top: 184px; }

  /* Guiding Principles */
  .gp-body { flex-direction: column; }
  .gp-testimonial-col { width: 100%; margin-top: 32px; }
  .gp-heading { flex-direction: column; align-items: stretch; }
  .gp-heading-left { flex: none; width: 100%; }
  .gp-heading-right { width: 100%; }
  .gp-starts-here { margin-top: 24px; margin-bottom: 8px; }
  .gp-intro { width: 100%; }

  /* Contact */
  .contact-two-col { flex-direction: column; }
  .contact-content { padding: 24px 24px; }

  /* Footer */
  .footer-inner { flex-direction: column; text-align: center; }
  footer { padding: 20px 24px; }

  /* Global — reduce section vertical padding to match live site (~16-24px at mobile) */
  .section { padding: 24px 15px; }

  /* Results: page-title banner adds extra top space; collapse it to match live site */
  #results-section .page-title { padding-top: 0; }
  #results-section .section { padding-top: 11px; }
  .results-grid { margin-top: 11px; }
}

@media (max-width: 640px) {
  /* Workshops: drop stagger; hide photo and WORKSHOPS decorative element (not shown on mobile) */
  .workshop-grid { grid-template-columns: 1fr; }
  .workshop-item:nth-child(2),
  .workshop-item:nth-child(3) { margin-top: 0; }
  .sig-talks-photo { display: none; }
  .sig-talks-workshops-col { display: none; }
}

@media (max-width: 540px) {
  .principles-grid { grid-template-columns: 1fr; }
  .services-cta h2 { font-size: 26px; }
  .gp-title-word { font-size: 32px; letter-spacing: normal; } /* live site: 32px at mobile */
  .gp-quote { padding-left: 20px; }  /* shift blockquote right so ::before at left:-18px lands at x=17px (on-screen) */
  .gp-quote-text { padding-left: 0; } /* padding now on parent, not text element */
  /* Subsection titles: match live site 24px, full-width underline at mobile */
  h3.subsection-title { font-size: 24px; display: block; }
}