/* ============================================================
   Homepage Gutenberg content sections.
   Moved from home.css so the static front page uses the shared
   frontend/editor component stylesheet instead of a per-page CSS file.
   ============================================================ */
/* =============================================
       CSS VARIABLES
    ============================================= */
    :root {
      --bg-primary: #f6f5f8;
      --bg-alt: #eeedf1;
      --bg-dark: #1a1a2e;
      --bg-footer: #161628;
      --text-heading: #1a1a2e;
      --text-body: #4a4a5a;
      --text-muted: #7a7a8a;
      --purple: #a78bfa;
      --purple-hover: #8b5cf6;
      --purple-bright: #7c5cfc;
      --purple-light: #ede9fe;
      --icon-bg: #e9e8ed;
      --card-bg: #fff;
      --card-radius: 20px;
      --card-shadow: 0 2px 16px rgba(0,0,0,0.05);
      --max-width: 1200px;
      --star-gold: #d4a853;
    }

    /* =============================================
       SUPERTREE ICON BLOCK
    ============================================= */
    .st-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .st-icon::before {
      content: "";
      display: block;
      width: 1em;
      height: 1em;
      background: currentColor;
      -webkit-mask: var(--st-icon-url) center / contain no-repeat;
              mask: var(--st-icon-url) center / contain no-repeat;
    }

    .st-icon--location { --st-icon-url: url("assets/icons/location.svg"); }
    .st-icon--users { --st-icon-url: url("assets/icons/users.svg"); }
    .st-icon--briefcase { --st-icon-url: url("assets/icons/briefcase.svg"); }
    .st-icon--pulse { --st-icon-url: url("assets/icons/pulse.svg"); }
    .st-icon--star { --st-icon-url: url("assets/icons/star.svg"); }
    .st-icon--workshop { --st-icon-url: url("assets/icons/workshop.svg"); }
    .st-icon--venue { --st-icon-url: url("assets/icons/venue.svg"); }
    .st-icon--clock { --st-icon-url: url("assets/icons/clock.svg"); }
    .st-icon--phone { --st-icon-url: url("assets/icons/phone.svg"); }
    .st-icon--globe { --st-icon-url: url("assets/icons/globe.svg"); }
    .st-icon--building { --st-icon-url: url("assets/icons/building.svg"); }
    .st-icon--monitor { --st-icon-url: url("assets/icons/monitor.svg"); }
    .st-icon--coffee { --st-icon-url: url("assets/icons/coffee.svg"); }
    .st-icon--calendar { --st-icon-url: url("assets/icons/calendar.svg"); }
    .st-icon--badge-check { --st-icon-url: url("assets/icons/badge-check.svg"); }
    .st-icon--calendar-check { --st-icon-url: url("assets/icons/calendar-check.svg"); }
    .st-icon--credit-card { --st-icon-url: url("assets/icons/credit-card.svg"); }
    .st-icon--door-open { --st-icon-url: url("assets/icons/door-open.svg"); }
    .st-icon--map-pin { --st-icon-url: url("assets/icons/map-pin.svg"); }
    .st-icon--train { --st-icon-url: url("assets/icons/train.svg"); }
    .st-icon--plane { --st-icon-url: url("assets/icons/plane.svg"); }
    .st-icon--parking { --st-icon-url: url("assets/icons/parking.svg"); }
    .st-icon--check { --st-icon-url: url("assets/icons/check.svg"); }
    .st-icon--message-circle { --st-icon-url: url("assets/icons/message-circle.svg"); }
    .st-icon--utensils { --st-icon-url: url("assets/icons/utensils.svg"); }

    /* "plain" variant: glyph only — size comes from the host tile container
       (.benefit-ico / .step-node / .loc-ico on the Meeting Rooms page). */
    .st-icon--plain.st-icon::before { width: 1.4em; height: 1.4em; }
    .benefit-ico > *,
    .step-node > *,
    .loc-ico > * { margin: 0; }
    .benefit-ico .st-icon,
    .step-node .st-icon,
    .loc-ico .st-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .benefit-ico .st-icon::before { width: 23px; height: 23px; }
    .step-node .st-icon::before { width: 30px; height: 30px; }
    .loc-ico .st-icon::before { width: 18px; height: 18px; }

    .feature-card-icon.st-icon::before { width: 24px; height: 24px; }
    :is(.standard-page__content, .editor-styles-wrapper) .difference-icon.st-icon::before { width: 20px; height: 20px; }
    :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .workshop-icon.st-icon::before { width: 22px; height: 22px; }
    :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-list-icon.st-icon::before { width: 16px; height: 16px; }

    /* =============================================
       LAYOUT
    ============================================= */
    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 80px;
    }
    .section-label {
      font-size: 12px !important;
      font-weight: 700 !important;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--purple);
      display: block;
      margin-bottom: 14px;
    }
    .section-label--center { text-align: center; }
    .section-label--light { color: rgba(255,255,255,0.5); }
    .section-title {
      font-size: 36px;
      font-weight: 400;
      color: var(--text-heading);
      line-height: 125%;
      margin-bottom: 16px;
    }
    .section-title--center { text-align: center; }
    .section-title--light { color: #fff; }
    .section-subtitle {
      font-size: 17px;
      color: var(--text-body);
      line-height: 175%;
      max-width: 560px;
    }
    .section-subtitle--center { text-align: center; margin: 0 auto; }
    .section-subtitle--light { color: rgba(255,255,255,0.65); }

    /* =============================================
       BUTTONS
    ============================================= */
    .wp-block-button.btn-primary,
    .wp-block-button.btn-primary--white,
    .wp-block-button.btn-outline,
    .wp-block-button.btn-outline--white,
    .wp-block-button.btn-small,
    .wp-block-button.btn-text {
      display: contents;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    /* Override Gutenberg core's default .wp-block-button__link { width: 100% }
       so Supertree pill buttons size to their content, not their column. */
    .wp-block-button.btn-primary > .wp-block-button__link,
    .wp-block-button.btn-primary--white > .wp-block-button__link,
    .wp-block-button.btn-outline > .wp-block-button__link,
    .wp-block-button.btn-outline--white > .wp-block-button__link,
    .wp-block-button.btn-small > .wp-block-button__link,
    .wp-block-button.btn-text > .wp-block-button__link {
      width: auto;
    }
    a.btn-primary,
    .btn-primary > .wp-block-button__link,
    a.btn-primary--white,
    .btn-primary--white > .wp-block-button__link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--purple);
      color: #fff !important;
      padding: 16px 40px;
      border-radius: 50px;
      font-weight: 500 !important;
      font-size: 16px !important;
      line-height: 120%;
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      border: none;
      cursor: pointer;
      text-decoration: none !important;
    }
    a.btn-primary:hover,
    .btn-primary > .wp-block-button__link:hover {
      background: var(--purple-hover);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
    }
    a.btn-primary--white,
    .btn-primary--white > .wp-block-button__link {
      background: #fff;
      color: var(--bg-dark) !important;
    }
    a.btn-primary--white:hover,
    .btn-primary--white > .wp-block-button__link:hover {
      background: #f0f0f0;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
    a.btn-outline,
    .btn-outline > .wp-block-button__link,
    a.btn-outline--white,
    .btn-outline--white > .wp-block-button__link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: transparent;
      color: var(--text-body) !important;
      padding: 16px 40px;
      border-radius: 50px;
      border: 1px solid rgba(26,26,46,0.14);
      font-weight: 500 !important;
      font-size: 16px !important;
      line-height: 120%;
      transition: all 0.2s ease;
      cursor: pointer;
      text-decoration: none !important;
      box-shadow: none;
    }
    a.btn-outline:hover,
    .btn-outline > .wp-block-button__link:hover {
      border-color: var(--text-heading);
      color: var(--text-heading) !important;
      transform: translateY(-1px);
    }
    a.btn-outline--white,
    .btn-outline--white > .wp-block-button__link {
      color: #fff !important;
      border-color: rgba(255,255,255,0.4);
    }
    a.btn-outline--white:hover,
    .btn-outline--white > .wp-block-button__link:hover {
      background: #fff;
      color: var(--bg-dark) !important;
    }
    a.btn-small,
    .btn-small > .wp-block-button__link { padding: 12px 28px; font-size: 14px !important; }
    a.btn-text,
    .btn-text > .wp-block-button__link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--purple) !important;
      background: transparent;
      padding: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      font-weight: 600;
      font-size: 15px;
      transition: gap 0.2s ease;
      text-decoration: none !important;
    }
    a.btn-text::after,
    .btn-text > .wp-block-button__link::after {
      content: "→";
      font-size: 16px;
      line-height: 1;
    }
    a.btn-text:hover,
    .btn-text > .wp-block-button__link:hover { gap: 10px; }

    /* =============================================
       2. HERO — purple gradient, centered, premium
    ============================================= */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: linear-gradient(
        160deg,
        #8B5CF6 0%,
        #9b6ffb 40%,
        #a07dfb 60%,
        #8B5CF6 100%
      );
    }
    /* Subtle top-light for dimension */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.12) 0%, transparent 50%);
      z-index: 1;
    }
    /* Supertree mark watermark belongs to theme styling, not page content. */
    .hero::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      z-index: 1;
      width: auto;
      height: 100%;
      aspect-ratio: 821 / 631;
      transform: translateX(-50%);
      background: #fff;
      opacity: 0.06;
      pointer-events: none;
      user-select: none;
      -webkit-mask: url('assets/logo/panda-systems-mark-v2.svg') center / contain no-repeat;
      mask: url('assets/logo/panda-systems-mark-v2.svg') center / contain no-repeat;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 160px 80px 120px;
      max-width: 800px;
    }
    /* `.hero .hero-badge` (specificity 0,2,0) wins over the generic
       `.hero p` subtitle rule (0,1,1) below — needed because the badge
       was migrated from <div> to a native <p> Gutenberg block and would
       otherwise inherit subtitle styling (19px, line-height 175%, etc.). */
    .hero .hero-badge {
      display: inline-block;
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
      padding: 10px 24px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 1.5px;
      line-height: 1;
      text-transform: uppercase;
      margin: 0 0 36px;
      max-width: none;
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(4px);
    }
    .hero h1 {
      font-size: 60px;
      font-weight: 400;
      line-height: 115%;
      color: #fff;
      margin-bottom: 24px;
      letter-spacing: -0.5px;
      text-wrap: balance;
    }
    .hero p {
      font-size: 19px;
      line-height: 175%;
      color: rgba(255,255,255,0.65);
      margin-bottom: 48px;
      max-width: 540px;
      text-wrap: pretty;
      margin-left: auto;
      margin-right: auto;
    }
    .hero-ctas {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }
    /* White primary button on hero for contrast */
    .hero a.btn-primary,
    .hero .btn-primary > .wp-block-button__link,
    .hero .btn-outline > .wp-block-button__link {
      display: inline-flex !important;
      width: auto;
    }
    .hero a.btn-primary,
    .hero .btn-primary > .wp-block-button__link {
      background: #fff;
      color: var(--bg-dark) !important;
      font-weight: 500 !important;
    }
    .hero a.btn-primary:hover,
    .hero .btn-primary > .wp-block-button__link:hover {
      background: #f0f0f0;
      box-shadow: 0 8px 32px rgba(255,255,255,0.2);
    }

    /* =============================================
       3. CLIENT LOGOS BAR
    ============================================= */
    .clients-bar {
      background: var(--bg-alt);
      padding: 56px 0;
    }
    .clients-bar-label {
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-muted);
      margin-bottom: 32px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }
    .clients-bar-marquee {
      overflow: hidden;
      position: relative;
      mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    }
    .clients-bar-track {
      display: flex;
      align-items: center;
      gap: 0;
      width: max-content;
      background: var(--bg-alt);
      animation: clients-scroll 50s linear infinite;
    }
    .clients-bar-marquee:hover .clients-bar-track { animation-play-state: paused; }
    @keyframes clients-scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .clients-bar-track { animation: none; }
    }
    .clients-bar-logo {
      flex-shrink: 0;
      height: var(--h, 36px);
      width: 180px;
      object-fit: contain;
      filter: grayscale(1);
      mix-blend-mode: multiply;
      opacity: 0.75;
      transition: opacity 0.3s;
    }
    .clients-bar-logo:hover { opacity: 1; }
    /* For white-on-transparent logos (e.g. Eagle): invert so they read dark */
    .clients-bar-logo.logo-invert {
      filter: grayscale(1) invert(1);
    }

    /* =============================================
       4. THREE PILLARS — photo cards, premium style
    ============================================= */
    .pillars {
      background: var(--bg-primary);
      padding: clamp(72px, 9vw, 120px) 0;
    }
    .pillars-header { margin-bottom: 56px; }
    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .pillars-grid > .pillar-card {
      margin-block-start: 0;
    }
    .pillar-card {
      background: var(--card-bg);
      border-radius: var(--card-radius);
      overflow: hidden;
      box-shadow: var(--card-shadow);
      border: 1px solid rgba(0,0,0,0.04);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .pillar-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(0,0,0,0.1);
    }
    .pillar-card-image {
      height: 260px;
      overflow: hidden;
      position: relative;
    }
    .pillar-card-image::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(transparent, rgba(0,0,0,0.04));
      pointer-events: none;
    }
    .pillar-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .pillar-card:hover .pillar-card-image img { transform: scale(1.05); }
    .pillar-card-body {
      padding: 36px 32px;
    }
    .pillar-card-body h3 {
      font-size: 21px;
      font-weight: 700;
      margin-bottom: 10px;
      color: var(--text-heading);
    }
    .pillar-card-body p {
      font-size: 15px;
      line-height: 175%;
      color: var(--text-body);
      margin-bottom: 16px;
    }

    /* =============================================
       5. ABOUT / WHAT IS SUPERTREE
    ============================================= */
    .about {
      background: var(--bg-alt);
      padding: clamp(72px, 9vw, 120px) 0;
    }
    .about-inner {
      display: flex;
      gap: 64px;
      align-items: stretch;
    }
    /* About image: take the absolute-positioning trick so the figure does
       not contribute its natural image height to the row. .about-text then
       dictates the row height, and align-items: stretch makes the image
       column match it exactly — image top aligns with eyebrow, bottom
       aligns with end of text/CTA. */
    .about-image {
      flex: 1;
      position: relative;
    }
    .about-image .wp-block-image {
      position: absolute;
      inset: 0;
      margin: 0;
    }
    .about-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--card-radius);
      box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    }
    .about-text { flex: 1.1; }
    .about-text h2 {
      font-size: 36px;
      font-weight: 400;
      line-height: 125%;
      color: var(--text-heading);
      margin-bottom: 16px;
    }
    .about-text p {
      font-size: 16px;
      line-height: 175%;
      color: var(--text-body);
      margin-bottom: 16px;
    }
    .about-ctas { margin-top: 32px; display: flex; gap: 16px; }

    /* =============================================
       5b. STATS BANNER
    ============================================= */
    .stats {
      position: relative;
      background: linear-gradient(
        160deg,
        #8B5CF6 0%,
        #9b6ffb 40%,
        #a07dfb 60%,
        #8B5CF6 100%
      );
      padding: 64px 0;
      overflow: hidden;
      isolation: isolate;
    }
    .stats::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.12) 0%, transparent 50%);
      z-index: 1;
      pointer-events: none;
    }
    .stats .container { position: relative; z-index: 2; }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
      text-align: center;
    }
    /* Five-up variant. Reusable modifier: set the block className to
       "stats-grid stats-grid--five". Never scope this by page slug. */
    .stats-grid--five {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    /* Five columns get too narrow well before the 968px breakpoint, so the
       five-up variant falls back to two columns early and lets the leftover
       odd item span the full row instead of sitting alone in column one. */
    @media (max-width: 1180px) {
      .stats-grid--five {
        grid-template-columns: repeat(2, 1fr);
      }
      .stats-grid--five .stat-item:nth-child(2n)::after {
        display: none;
      }
      .stats-grid--five .stat-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
      }
    }
    .stats-grid > .stat-item {
      margin-block-start: 0;
    }
    .stat-item {
      position: relative;
    }
    .stat-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -16px;
      top: 10%;
      height: 80%;
      width: 1px;
      background: rgba(255,255,255,0.1);
    }
    .stat-number {
      font-size: 44px;
      font-weight: 800;
      color: #fff;
      line-height: 1;
      margin-bottom: 10px;
      letter-spacing: -1px;
    }
    .stat-number span {
      color: #fff;
    }
    .stat-label {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.5px;
    }
    /* Linked stat. The label holds a normal inline link; its ::after stretches
       over the whole tile so the entire stat is clickable without wrapping the
       counter markup in an anchor (which would fight the count-up script). */
    .stat-item--link .stat-label a {
      color: rgba(255,255,255,0.75);
      text-decoration: underline;
      text-decoration-color: rgba(255,255,255,0.28);
      text-underline-offset: 3px;
      transition: color 0.2s, text-decoration-color 0.2s;
    }
    .stat-item--link .stat-label a::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .stat-item--link:hover .stat-label a,
    .stat-item--link:focus-within .stat-label a {
      color: #fff;
      text-decoration-color: rgba(255,255,255,0.7);
    }

    /* =============================================
       6. WHY SUPERTREE — photo + feature cards
    ============================================= */
    .features {
      background: var(--bg-primary);
      padding: clamp(72px, 9vw, 120px) 0;
    }
    .features-inner {
      display: flex;
      gap: 56px;
      align-items: stretch;
    }
    /* Why Supertree image: same absolute-positioning trick as .about-image
       so the figure doesn't dictate row height. .features-content drives
       the height; image stretches to match (eyebrow top → card grid bottom). */
    .features-photo {
      flex: 1;
      position: relative;
    }
    .features-photo .wp-block-image {
      position: absolute;
      inset: 0;
      margin: 0;
    }
    .features-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: left center;
      border-radius: var(--card-radius);
      box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    }
    .features-content { flex: 1.1; }
    .features-content .section-label { margin-bottom: 14px; }
    .features-content .section-title { margin-bottom: 12px; }
    .features-content > p {
      font-size: 16px;
      line-height: 175%;
      color: var(--text-body);
      margin-bottom: 36px;
    }
    .features-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .features-list > .feature-card {
      margin-block-start: 0;
    }
    .feature-card {
      background: var(--card-bg);
      border-radius: 16px;
      padding: 24px 20px;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s ease;
    }
    .feature-card:hover { transform: translateY(-4px); }
    .feature-card-icon {
      width: 52px;
      height: 52px;
      background: var(--purple-light);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }
    .feature-card-icon svg { width: 24px; height: 24px; color: var(--purple-bright); }
    .feature-card h4 {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-heading);
      margin-bottom: 6px;
    }
    .feature-card p:not(.feature-card-icon) {
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-muted);
    }
    .feature-card p.feature-card-icon {
      color: var(--purple-bright);
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 14px;
    }

    /* =============================================
       8. TESTIMONIALS
    ============================================= */
    .testimonials {
      background: var(--bg-primary);
      padding: clamp(72px, 9vw, 120px) 0;
    }
    .testimonials-header { margin-bottom: 56px; }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .testimonials-grid > .testimonial-card {
      margin-block-start: 0;
    }
    .testimonial-card {
      background: var(--card-bg);
      border-radius: var(--card-radius);
      padding: 32px 28px;
      box-shadow: var(--card-shadow);
      display: flex;
      flex-direction: column;
    }
    .testimonial-card blockquote { flex: 1; }
    .testimonial-stars {
      display: flex;
      gap: 3px;
      margin-bottom: 16px;
      color: var(--star-gold);
      fill: var(--star-gold);
      font-size: 16px;
      letter-spacing: 3px;
      line-height: 1;
    }
    .testimonial-stars svg { width: 16px; height: 16px; color: var(--star-gold); fill: var(--star-gold); }
    .testimonial-card blockquote,
    .testimonial-quote {
      font-size: 15px;
      line-height: 1.6;
      color: var(--text-body);
      font-style: italic;
      margin: 0 0 24px;
      padding: 0;
      border: 0;
    }
    /* Gutenberg wraps quote text in an inner <p>. Force italic + reset
       paragraph defaults so the inner element inherits the quote styling
       instead of body styles (font-style was being lost to the inner p). */
    .testimonial-quote p,
    .testimonial-card blockquote p {
      font-style: italic;
      font-size: inherit;
      line-height: inherit;
      color: inherit;
      margin: 0;
    }
    .testimonial-author { display: flex; align-items: center; gap: 12px; }
    .testimonial-avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--purple-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: var(--purple-bright);
      margin: 0;
      flex-shrink: 0;
    }
    /* Cancel WP's is-layout-flow auto-injected top margin on the author-info
       div (which was being added because it's the 2nd flex item in
       .testimonial-author and WP inserts block-gap between siblings).
       Then make the info column tight + vertically centered so name/company
       align with the avatar circle. */
    .testimonial-author > .testimonial-author-info {
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      min-height: 44px;
    }
    .testimonial-author-info > * { margin: 0 !important; }
    .testimonial-author-info strong,
    .testimonial-author-info .testimonial-name {
      display: block;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.25;
      color: var(--text-heading);
    }
    .testimonial-author-info span,
    .testimonial-author-info p:not(.testimonial-name) {
      font-size: 13px;
      line-height: 1.25;
      color: var(--text-muted);
    }

    /* =============================================
       9. MEETING ROOMS & EVENT SPACES
    ============================================= */
    .spaces {
      background: var(--bg-alt);
      padding: clamp(72px, 9vw, 120px) 0;
    }
    .spaces-header { margin-bottom: 56px; }
    .spaces-row {
      display: flex;
      gap: 0;
      align-items: stretch;
      margin-bottom: 48px;
      background: var(--card-bg);
      border-radius: var(--card-radius);
      overflow: hidden;
      box-shadow: var(--card-shadow);
      border: 1px solid rgba(0,0,0,0.04);
    }
    .spaces-row:last-child { margin-bottom: 0; }
    .spaces-row.reverse { flex-direction: row-reverse; }
    /* Image: absolute-positioning trick so the <figure> doesn't impose its
       natural image height on the row. .spaces-content drives row height. */
    .spaces-image {
      flex: 1.1;
      position: relative;
    }
    .spaces-image .wp-block-image {
      position: absolute;
      inset: 0;
      margin: 0;
      border-radius: 0;
    }
    .spaces-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 35%;
      border-radius: 0;
      display: block;
    }
    .spaces-content {
      flex: 1;
      padding: 28px 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .spaces-content h3 { font-size: 22px; font-weight: 700; color: var(--text-heading); margin: 0 0 10px; line-height: 1.2; }
    /* Specificity bump: .spaces-content .section-label (0,2,0) wins over
       .spaces-content p (0,1,1) so the eyebrow renders purple, not body grey.
       Same pattern as .hero .hero-badge. */
    .spaces-content .section-label {
      color: var(--purple);
      font-size: 12px !important;
      font-weight: 700 !important;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 14px;
      line-height: 1;
    }
    .spaces-content h3 a,
    .spaces-content .section-label a {
      color: inherit;
      text-decoration: none;
    }
    .spaces-content h3 a:hover,
    .spaces-content .section-label a:hover {
      color: var(--purple);
    }
    .spaces-content p { font-size: 14px; line-height: 1.55; color: var(--text-body); margin: 0 0 16px; }
    .spaces-features { list-style: none; margin: 0 0 16px; padding-left: 0; }
    .spaces-features li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--text-body);
      margin: 0 0 6px;
    }
    .spaces-features li:last-child { margin-bottom: 0; }
    /* Reset WP's auto-injected block-gap inside the content column so margins
       above stay deterministic instead of stacking with WP defaults. */
    .spaces-content > * { margin-block-start: 0; }
    .spaces-content .section-label { margin-top: 0; }
    /* Circle-check icon via inline SVG background-image. CSS-only so we
       don't need to touch the block markup (Lucide-style check-circle). */
    .spaces-features li::before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      background-color: var(--purple);
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>") no-repeat center / contain;
              mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>") no-repeat center / contain;
    }
    .spaces-features li svg { width: 20px; height: 20px; color: var(--purple); flex-shrink: 0; }

    /* =============================================
       10. EVENTS
    ============================================= */
    .events-section {
      background: var(--bg-primary);
      padding: clamp(72px, 9vw, 120px) 0;
    }
    .events-header { margin-bottom: 56px; }
    .events-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .events-grid > .event-card {
      margin-block-start: 0;
    }
    .event-card {
      background: var(--card-bg);
      border-radius: var(--card-radius);
      padding: 36px 28px;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s ease;
      /* Uniform cards: column flow so the Learn-more link can pin to the
         bottom edge and align across the row regardless of text length. */
      display: flex;
      flex-direction: column;
    }
    .event-card:hover { transform: translateY(-4px); }
    /* Grid: square 56px badge column, 1fr meta column. Badge spans both
       rows; rows are half the badge height so day pins to bottom of row 1
       and time to top of row 2 → tight, vertically-centered stack. */
    .event-date {
      display: grid;
      grid-template-columns: 56px 1fr;
      grid-template-rows: 28px 28px;
      column-gap: 16px;
      align-items: center;
      margin: 0 0 20px;
    }
    .event-date > * { margin-block-start: 0 !important; }
    .event-date p { margin: 0; }
    .event-date-badge {
      grid-row: 1 / 3;
      grid-column: 1;
      width: 56px;
      height: 56px;
      background: var(--purple-light);
      border-radius: 12px;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
    }
    /* Kill WP's auto block-gap inside the badge so "27" and "APR" use our gap. */
    .event-date-badge > * { margin-block-start: 0 !important; }
    .event-date-badge .day { display: block; font-size: 22px; font-weight: 800; color: var(--text-heading); line-height: 1; margin: 0; letter-spacing: -0.5px; }
    .event-date-badge .month { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin: 0; line-height: 1; }
    /* Day pinned to bottom of row 1, time to top of row 2 → tight middle. */
    .event-date-day { grid-row: 1; grid-column: 2; align-self: end; }
    .event-date-time { grid-row: 2; grid-column: 2; align-self: start; }
    /* Day-of-week + time on two lines (reference design).
       Both are muted grey, regular weight — they read as one quiet meta block. */
    .event-date-day { font-size: 16px; color: var(--text-muted); font-weight: 400; line-height: 1.35; }
    .event-date-time { font-size: 16px; color: var(--text-muted); font-weight: 400; line-height: 1.35; }
    .event-card h3 { font-size: 18px; font-weight: 700; color: var(--text-heading); margin: 0 0 8px; line-height: 1.3; }
    /* Description only. Use a direct-child selector so this never leaks onto
       the nested badge paragraphs (.day/.month) or the meta paragraphs
       (.event-date-day/.event-date-time), which previously inherited this
       rule's font-size/line-height/margin and pushed "27" out of the badge. */
    .event-card > p {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-body);
      margin: 0 0 18px;
      /* Standard description size: clamp to 3 lines (same preview-clamp
         pattern as .blog-card); full text lives on the event page. */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    /* The button wrappers are display:contents, so the link itself is the
       flex item — push it to the card bottom for a level Learn-more row. */
    .event-card .btn-text > .wp-block-button__link { margin-top: auto; }
    /* Reset WP's auto-injected margin-block-start between siblings in event cards. */
    .event-card > * { margin-block-start: 0; }
    .event-date > * { margin-block-start: 0; }

    /* =============================================
       11. BLOG
    ============================================= */
    /* Everything here is scoped to .standard-page .blog: the section wrapper
       so it does not match WordPress's <body class="blog"> on the posts
       index, and the card rules so they never leak into the blog archive or
       single-post related articles, which style the same class names in
       blog.css (the unscoped height:200px here + blog.css's aspect-ratio
       made the browser derive a fixed 320px width, leaving a white strip
       on the right of every archive card image). */
    .standard-page .blog {
      background: var(--bg-alt);
      padding: clamp(72px, 9vw, 120px) 0;
    }
    .standard-page .blog .blog-header { margin-bottom: 56px; }
    .standard-page .blog .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-bottom: 48px;
    }
    .standard-page .blog .blog-card {
      background: var(--card-bg);
      border-radius: var(--card-radius);
      overflow: hidden;
      box-shadow: var(--card-shadow);
      transition: transform 0.3s ease;
    }
    .standard-page .blog .blog-card:hover { transform: translateY(-4px); }
    .standard-page .blog .blog-card-image {
      display: block;
      height: 200px;
      overflow: hidden;
      background: var(--icon-bg);
    }
    .standard-page .blog .blog-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease;
    }
    .standard-page .blog .blog-card:hover .blog-card-image img { transform: scale(1.04); }
    .standard-page .blog .blog-card-body { padding: 28px 24px; }
    .standard-page .blog .blog-card-tag {
      font-size: 12px;
      font-weight: 600;
      color: var(--purple);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 10px;
      display: block;
    }
    /* Title + excerpt are clamped to keep cards compact and uniform-height
       regardless of how long the underlying post title/excerpt is. Purely a
       preview clamp — the article content is untouched. */
    .standard-page .blog .blog-card h3 {
      font-size: 17px; font-weight: 700; color: var(--text-heading);
      margin-bottom: 8px; line-height: 145%;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    }
    .standard-page .blog .blog-card-body p {
      font-size: 14px; line-height: 170%; color: var(--text-body); margin-bottom: 16px;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    }
    /* CTA: the button lives in a Gutenberg .wp-block-buttons flex row, so
       text-align:center on the wrapper can't center it — center the flex row. */
    .standard-page .blog .blog-cta { text-align: center; }
    .standard-page .blog .blog-cta .wp-block-buttons { justify-content: center; }

    /* =============================================
       12. FAQ
    ============================================= */
    .faq {
      background: var(--bg-primary);
      padding: clamp(72px, 9vw, 120px) 0;
    }
    .faq-layout {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 64px;
      align-items: start;
    }
    .faq-side .section-title { margin-bottom: 18px; }
    .faq-side p {
      color: var(--text-body);
      margin-bottom: 26px;
      max-width: 38ch;
      font-size: 16px;
      line-height: 1.65;
    }
    .faq-list { max-width: none; margin: 0; }
    .faq-list > .faq-item { margin-block-start: 0; }
    .faq-item {
      border-bottom: 1px solid rgba(26,26,46,0.1);
      color: var(--text-heading);
    }
    .faq-item:first-child { border-top: 1px solid rgba(26,26,46,0.1); }
    .faq-item summary {
      padding: 26px 0;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      font-size: 17px;
      font-weight: 600;
      color: var(--text-heading);
      list-style: none;
      transition: color 0.25s cubic-bezier(.2,.7,.2,1);
    }
    .faq-item summary:hover { color: var(--purple-bright); }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(26,26,46,0.08);
      display: grid;
      place-items: center;
      flex-shrink: 0;
      color: var(--text-heading);
      font-size: 20px;
      line-height: 1;
      transition: background 0.3s cubic-bezier(.2,.7,.2,1), border-color 0.3s cubic-bezier(.2,.7,.2,1), color 0.3s cubic-bezier(.2,.7,.2,1), transform 0.3s cubic-bezier(.2,.7,.2,1);
    }
    .faq-item[open] summary::after {
      background: var(--bg-dark);
      border-color: var(--bg-dark);
      color: #fff;
      transform: rotate(45deg);
    }
    .faq-item > p {
      padding: 0 0 26px;
      margin: 0;
      font-size: 16px;
      line-height: 1.7;
      color: var(--text-body);
      max-width: 60ch;
    }

    /* =============================================
       13. BOOK A TOUR CTA
    ============================================= */
    .cta-section {
      position: relative;
      background: linear-gradient(
        160deg,
        #8B5CF6 0%,
        #9b6ffb 40%,
        #a07dfb 60%,
        #8B5CF6 100%
      );
      color: #fff;
      padding: clamp(72px, 9vw, 120px) 0;
      overflow: hidden;
      isolation: isolate;
    }
    .cta-section::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 15% 20%, rgba(255,255,255,0.22), transparent 60%),
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.10) 0%, transparent 50%);
      z-index: 1;
      pointer-events: none;
    }
    .cta-section .container { position: relative; z-index: 2; }
    .cta-inner {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .cta-section h2 {
      font-size: 36px;
      font-weight: 400;
      line-height: 125%;
      color: #fff;
      margin-bottom: 16px;
    }
    .cta-section p {
      font-size: 17px;
      line-height: 175%;
      color: rgba(255,255,255,0.7);
      margin-bottom: 32px;
      max-width: 48ch;
    }
    .cta-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
    .cta-card {
      background: #fff;
      border-radius: 22px;
      padding: 32px 30px;
      box-shadow: 0 20px 60px rgba(26,26,46,0.18);
    }
    .cta-section .cta-card h3 {
      font-size: 12px; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--purple-hover);
      margin-bottom: 10px;
    }
    .cta-section .cta-card .cta-card-lead {
      color: var(--text-body);
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 20px;
      max-width: none;
    }
    .cta-card .hs-form-frame { margin: 0 !important; padding: 0 !important; }
    .cta-card .hs-form-frame iframe { min-height: 0 !important; margin: 0 !important; }
    .cta-card label { color: var(--text-heading) !important; font-size: 13px !important; }
    .cta-card input[type="text"],
    .cta-card input[type="email"],
    .cta-card input[type="tel"],
    .cta-card select,
    .cta-card textarea {
      background: #fff !important;
      border: 1px solid rgba(26,26,46,0.15) !important;
      color: var(--text-heading) !important;
      border-radius: 12px !important;
    }
    .cta-card input::placeholder { color: rgba(26,26,46,0.4) !important; }

    /* Custom "Schedule a tour" form (replaces the HubSpot embed). */
    .cta-form { display: flex; flex-direction: column; gap: 14px; }
    .cta-form-field { display: flex; flex-direction: column; gap: 6px; }
    .cta-form-label { font-size: 13px; font-weight: 600; color: var(--text-heading); }
    .cta-form input[type="text"],
    .cta-form input[type="email"],
    .cta-form input[type="tel"],
    .cta-form select,
    .cta-form textarea {
      width: 100%;
      padding: 12px 14px;
      font-size: 15px;
      font-family: inherit;
      color: var(--text-heading);
      background: #fff;
      border: 1px solid rgba(26,26,46,0.15);
      border-radius: 12px;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .cta-form textarea { resize: vertical; min-height: 84px; }
    .cta-form input::placeholder,
    .cta-form textarea::placeholder { color: rgba(26,26,46,0.4); }
    .cta-form input:focus,
    .cta-form select:focus,
    .cta-form textarea:focus {
      outline: none;
      border-color: var(--purple);
      box-shadow: 0 0 0 3px rgba(167,139,250,0.18);
    }
    .cta-form-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--text-body);
    }
    /* Override the global `input, textarea { width:100% }` so the checkbox
       stays a checkbox instead of stretching the whole row. */
    .cta-form-consent input[type="checkbox"] {
      flex: 0 0 auto;
      width: 16px;
      height: 16px;
      min-width: 0;
      margin: 2px 0 0;
      padding: 0;
    }
    .cta-form-consent a { color: var(--purple-hover); text-decoration: underline; }
    .cta-form-submit {
      width: 100%;
      margin-top: 4px;
      padding: 14px 26px;
      font-family: 'Manrope', sans-serif;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      background: var(--purple);
      border: none;
      border-radius: 50px;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .cta-form-submit:hover { background: var(--purple-hover); transform: translateY(-1px); }
    .cta-form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
    .cta-form-status { margin: 0; font-size: 13px; }
    .cta-form-status[data-state="error"] { color: #c0392b; }
    .cta-form-status[data-state="success"] { color: #1e7d4f; }
    /* Honeypot: off-screen, never shown to humans. */
    .cta-form-hp {
      position: absolute !important;
      left: -9999px !important;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    /* The field that blocked the submit. theme.js sets this alongside the
       message in .form-status, so the person can see WHICH box to fix rather
       than hunting for the one the vanished browser bubble pointed at. */
    .is-invalid,
    input.is-invalid,
    select.is-invalid,
    textarea.is-invalid {
      border-color: #c0392b !important;
      box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
    }

    /* request-form lives inside the colored CTA card on some pages, where
       `.cta-section p` (and the higher-specificity `:is(.standard-page__content)
       .cta-section p`) would paint the consent line white/17px. Restore it.
       Second selector is needed to outrank the standard-page variant. */
    .cta-section .form-consent,
    :is(.standard-page__content, .editor-styles-wrapper) .cta-section .form-consent {
      color: var(--text-muted);
      font-size: 12.5px;
      max-width: none;
      margin-bottom: 0;
    }

    /* Stop the CTA columns from stretching the form card to match the taller
       hero column (which left a tall band of empty white below the form).
       WP core ships `.wp-block-columns { align-items: normal !important }`,
       so we must use !important to win. */
    .cta-section .wp-block-columns { align-items: flex-start !important; }

    /* =============================================
       RESPONSIVE — TABLET
    ============================================= */
    @media (max-width: 968px) {
      .container { padding: 0 40px; }

      .hero { min-height: 80vh; }
      .hero-content { padding: 130px 40px 80px; }
      .hero h1 { font-size: 46px; }

      .pillars-grid { grid-template-columns: 1fr; gap: 20px; }

      .about-inner { flex-direction: column; gap: 40px; }
      /* On mobile the image flows naturally — release the absolute trick. */
      .about-image .wp-block-image { position: static; }

      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
      .stat-item:nth-child(2)::after { display: none; }
      .stat-number { font-size: 36px; }

      .features-inner { flex-direction: column; gap: 40px; }
      /* Release the absolute trick on mobile so the image flows naturally. */
      .features-photo .wp-block-image { position: static; }
      .features-list { grid-template-columns: 1fr 1fr; }

      .testimonials-grid { grid-template-columns: 1fr; gap: 20px; }

      .spaces-row,
      .spaces-row.reverse { flex-direction: column; }
      .spaces-image { max-height: 280px; min-height: 280px; }
      /* Release absolute trick on mobile so image flows naturally inside its column. */
      .spaces-image .wp-block-image { position: static; height: 100%; }
      .spaces-content { padding: 36px 32px; }

      .events-grid { grid-template-columns: 1fr; }
      .standard-page .blog .blog-grid { grid-template-columns: 1fr; }

      .cta-inner { grid-template-columns: 1fr; gap: 40px; }
      .faq-layout { grid-template-columns: 1fr; gap: 40px; }

    }

    /* =============================================
       RESPONSIVE — MOBILE
    ============================================= */
    @media (max-width: 480px) {
      .container { padding: 0 20px; }
      .hero { min-height: 85vh; }
      .hero-content { padding: 110px 20px 60px; }
      .hero h1 { font-size: 36px; letter-spacing: -0.5px; }
      .no-break { white-space: normal; }
      .hero p { font-size: 16px; }
      .hero-ctas { flex-direction: column; }
      .hero-ctas .btn-primary,
      .hero-ctas .btn-outline { width: 100%; justify-content: center; }

      .section-title { font-size: 28px; }

      .clients-bar-logo { width: 130px; }

      .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
      .stat-number { font-size: 32px; }
      .stat-item::after { display: none !important; }

      .features-list { grid-template-columns: 1fr; gap: 16px; }

      .spaces-content h3 { font-size: 24px; }

      .cta-section h2 { font-size: 28px; }

    }

/* ============================================================
   Gutenberg landing-page primitives and components.
   Shared by native Page content; page CSS should only provide section glue.
   ============================================================ */
:root {
  --st-bg-primary: #f6f5f8;
  --st-bg-dark: #1a1a2e;
  --st-bg-footer: #161628;
  --st-bg-alt: #eeedf1;
  --st-text-heading: #1a1a2e;
  --st-text-body: #4a4a5a;
  --st-text-muted: #7a7a8a;
  --st-purple: #a78bfa;
  --st-purple-hover: #8b5cf6;
  --st-purple-bright: #7c5cfc;
  --st-purple-light: #ede9fe;
  --st-card-bg: #fff;
  --st-card-radius: 20px;
  --st-card-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
  --st-max-width: 1200px;
  --st-star-gold: #d4a853;
  --st-coral: #ff6666;
  --st-coral-deep: #e85555;
}

:is(.standard-page__content, .editor-styles-wrapper) .container {
  max-width: var(--st-max-width);
  margin-inline: auto;
  padding-inline: 80px;
}

:is(.standard-page__content, .editor-styles-wrapper) .section-label {
  display: block;
  margin-bottom: 14px;
  color: var(--st-purple);
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
}
:is(.standard-page__content, .editor-styles-wrapper) .section-label--center,
:is(.standard-page__content, .editor-styles-wrapper) .section-title--center,
:is(.standard-page__content, .editor-styles-wrapper) .section-subtitle--center { text-align: center; }
:is(.standard-page__content, .editor-styles-wrapper) .section-label--light { color: rgba(255, 255, 255, 0.55); }
:is(.standard-page__content, .editor-styles-wrapper) .section-title {
  margin-bottom: 16px;
  color: var(--st-text-heading);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}
:is(.standard-page__content, .editor-styles-wrapper) .section-subtitle {
  max-width: 560px;
  color: var(--st-text-body);
  font-size: 17px;
  line-height: 1.75;
  text-wrap: pretty;
}
:is(.standard-page__content, .editor-styles-wrapper) .section-subtitle--center { margin-inline: auto; }

:is(.standard-page__content, .editor-styles-wrapper) .btn-primary .wp-block-button__link,
:is(.standard-page__content, .editor-styles-wrapper) .btn-outline .wp-block-button__link,
:is(.standard-page__content, .editor-styles-wrapper) a.btn-primary,
:is(.standard-page__content, .editor-styles-wrapper) a.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 500 !important;
  line-height: 1.2;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
:is(.standard-page__content, .editor-styles-wrapper) .btn-primary .wp-block-button__link,
:is(.standard-page__content, .editor-styles-wrapper) a.btn-primary {
  background: var(--st-purple);
  color: #fff !important;
  padding: 16px 40px;
}
:is(.standard-page__content, .editor-styles-wrapper) .btn-primary .wp-block-button__link:hover,
:is(.standard-page__content, .editor-styles-wrapper) a.btn-primary:hover {
  background: var(--st-purple-hover);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
  transform: translateY(-2px);
}
:is(.standard-page__content, .editor-styles-wrapper) .btn-outline .wp-block-button__link,
:is(.standard-page__content, .editor-styles-wrapper) a.btn-outline {
  border: 1px solid rgba(26, 26, 46, 0.14);
  background: transparent;
  color: var(--st-text-body) !important;
  padding: 16px 40px;
}
:is(.standard-page__content, .editor-styles-wrapper) .btn-outline .wp-block-button__link:hover,
:is(.standard-page__content, .editor-styles-wrapper) a.btn-outline:hover {
  border-color: var(--st-text-heading);
  color: var(--st-text-heading) !important;
  transform: translateY(-1px);
}
:is(.standard-page__content, .editor-styles-wrapper) .btn-small .wp-block-button__link { padding: 12px 28px; font-size: 14px !important; }
:is(.standard-page__content, .editor-styles-wrapper) .btn-primary--white .wp-block-button__link { background: #fff; color: var(--st-text-heading) !important; }
/* The white primary sits on a purple band, so it must NOT inherit the generic
   primary hover: that paints it #8b5cf6, the band's own gradient start, and the
   button dissolves into the background. The generic rule above is (0,4,0) and
   the unscoped .btn-primary--white:hover is only (0,3,0), so it loses. This is
   the missing sibling of the .btn-outline--white:hover rule below it. */
:is(.standard-page__content, .editor-styles-wrapper) .btn-primary--white .wp-block-button__link:hover,
:is(.standard-page__content, .editor-styles-wrapper) a.btn-primary--white:hover {
  background: #f0f0f0;
  color: var(--st-text-heading) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transform: translateY(-2px);
}
:is(.standard-page__content, .editor-styles-wrapper) .btn-outline--white .wp-block-button__link { border-color: rgba(255,255,255,0.45); color: #fff !important; }
:is(.standard-page__content, .editor-styles-wrapper) .btn-outline--white .wp-block-button__link:hover { background: #fff; color: var(--st-text-heading) !important; }

:is(.standard-page__content, .editor-styles-wrapper) .fit-header,
:is(.standard-page__content, .editor-styles-wrapper) .premium-header,
:is(.standard-page__content, .editor-styles-wrapper) .pricing-header,
:is(.standard-page__content, .editor-styles-wrapper) .testimonials-header { margin-bottom: 48px; }
:is(.standard-page__content, .editor-styles-wrapper) .pricing-header {
  margin-bottom: 56px;
  padding: 0;
  background: transparent;
}
:is(.standard-page__content, .editor-styles-wrapper) .fit-columns,
:is(.standard-page__content, .editor-styles-wrapper) .premium-columns,
:is(.standard-page__content, .editor-styles-wrapper) .pricing-columns,
:is(.standard-page__content, .editor-styles-wrapper) .difference-columns,
:is(.standard-page__content, .editor-styles-wrapper) .testimonials-columns,
:is(.standard-page__content, .editor-styles-wrapper) .cta-columns { margin-bottom: 0; }
:is(.standard-page__content, .editor-styles-wrapper) .fit-columns,
:is(.standard-page__content, .editor-styles-wrapper) .premium-columns,
:is(.standard-page__content, .editor-styles-wrapper) .pricing-columns,
:is(.standard-page__content, .editor-styles-wrapper) .difference-columns { gap: 24px; }
/* Opt-in equal heights. A row of these cards with uneven copy otherwise
   ends on a ragged baseline; the existing 2x2 block is left as it is. */
:is(.standard-page__content, .editor-styles-wrapper) .difference-columns--even .difference-card { height: 100%; }
/* Icon tiles cycle purple / green / coral, the same rhythm the eight-up
   benefits row on the product pages uses. Scoped to the --even modifier so the
   existing all-purple 2x2 block is untouched. Specificity has to clear the
   base .difference-icon rule, which is 0,2,0. */
:is(.standard-page__content, .editor-styles-wrapper) .difference-columns--even .wp-block-column:nth-child(2) .difference-icon {
  background: #e7faf2;
  color: #1a845e;
}
:is(.standard-page__content, .editor-styles-wrapper) .difference-columns--even .wp-block-column:nth-child(3) .difference-icon {
  background: #fff0f0;
  color: #e85555;
}
/* The closing link is a plain text link, not a pill: it points at background
   reading, and a full-size button there read as a primary action. */
:is(.standard-page__content, .editor-styles-wrapper) .band-close-cta { justify-content: center; }
:is(.standard-page__content, .editor-styles-wrapper) .testimonials-columns { gap: 28px; max-width: 920px; margin-inline: auto; }
:is(.standard-page__content, .editor-styles-wrapper) .cta-columns { gap: 64px; align-items: center; }

:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.fit-card,
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.premium-card {
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: var(--st-card-radius);
  box-shadow: var(--st-card-shadow);
  isolation: isolate;
  padding: 28px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.fit-card:hover,
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.premium-card:hover { transform: translateY(-4px); }
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.fit-card .wp-block-cover__background,
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.premium-card .wp-block-cover__background {
  background: linear-gradient(180deg, rgba(26,26,46,0) 35%, rgba(26,26,46,0.86) 100%) !important;
  opacity: 1 !important;
}
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.fit-card .wp-block-cover__inner-container,
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.premium-card .wp-block-cover__inner-container {
  width: 100%;
  color: #fff;
  z-index: 2;
}
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.fit-card h3,
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.premium-card h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
}
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.fit-card h3 a,
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.premium-card h3 a { color: inherit; text-decoration: none; }
/* Whole card is clickable when its heading links out — the small heading link
   over the photo isn't discoverable on its own. Stretched-link overlay. */
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.fit-card:has(h3 a),
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.premium-card:has(h3 a) { position: relative; cursor: pointer; }
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.fit-card h3 a::after,
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.premium-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.fit-card:hover h3 a,
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.premium-card:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.fit-card p,
:is(.standard-page__content, .editor-styles-wrapper) .wp-block-cover.premium-card p {
  margin: 0;
  color: rgba(255,255,255,0.84);
  font-size: 14px;
  line-height: 1.55;
}
:is(.standard-page__content, .editor-styles-wrapper) .fit-columns--bottom .fit-card h3 { font-size: 18px; }
:is(.standard-page__content, .editor-styles-wrapper) .fit-columns--bottom .fit-card p { font-size: 13px; }

/* The sixth workspace card runs the full container width under the two rows,
   so Managed Company Offices reads as the step up at the end of the ladder
   rather than a sixth equal option. The copy is capped, or the sentence runs
   the whole width of the card. */
:is(.standard-page__content, .editor-styles-wrapper) .fit-columns--feature .fit-card h3 { font-size: 24px; }
:is(.standard-page__content, .editor-styles-wrapper) .fit-columns--feature .fit-card .wp-block-cover__inner-container {
  max-width: 620px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* The badge belongs in the top-left corner of the wide card, not stacked on top
   of the heading. Stretching the inner container to the full card height and
   giving the badge an auto bottom margin pushes the heading and its line back
   down to the foot of the card. */
:is(.standard-page__content, .editor-styles-wrapper) .fit-columns--feature .fit-card .fit-card-badge { margin-bottom: auto; }

/* --- Coworking "Find Your Best Fit": the Managed Company Offices feature card.
   Added 2026-09-04 with Page Update 3.0. It sits full width under the two card
   rows and carries the coral treatment so the newest, largest product reads as
   the step up from the five cards above it rather than a sixth equal option. */
/* Marks the newest option inside the workspace grid. Solid coral because it
   sits on a photo card, where a translucent white pill disappears. */
:is(.standard-page__content, .editor-styles-wrapper) .fit-card .fit-card-badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--st-coral-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

:is(.standard-page__content, .editor-styles-wrapper) .premium-card h3 { font-size: 22px; }

:is(.standard-page__content, .editor-styles-wrapper) .pricing-columns .wp-block-column { display: flex; }
:is(.standard-page__content, .editor-styles-wrapper) .pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 40px 28px;
  border-radius: var(--st-card-radius);
  background: var(--st-card-bg);
  box-shadow: var(--st-card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
:is(.standard-page__content, .editor-styles-wrapper) .pricing-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
:is(.standard-page__content, .editor-styles-wrapper) .pricing-card.featured { border-top: 3px solid var(--st-purple); }
:is(.standard-page__content, .editor-styles-wrapper) .pricing-card .badge {
  position: absolute;
  top: 18px;
  right: 18px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--st-purple-light);
  color: var(--st-purple-bright);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
:is(.standard-page__content, .editor-styles-wrapper) .pricing-card h3 { margin: 0 0 4px; color: var(--st-text-heading); font-size: 19px; font-weight: 700; }
:is(.standard-page__content, .editor-styles-wrapper) .pricing-type { min-height: calc(13px * 1.4 * 2); margin: 0 0 8px; color: var(--st-text-muted); font-size: 13px; line-height: 1.4; }
:is(.standard-page__content, .editor-styles-wrapper) .pricing-amount { margin: 0 0 4px; color: var(--st-text-heading); font-size: 32px; font-weight: 500; line-height: 1.1; }
:is(.standard-page__content, .editor-styles-wrapper) .pricing-period { margin: 0 0 24px; color: var(--st-text-muted); font-size: 14px; }
:is(.standard-page__content, .editor-styles-wrapper) .pricing-features {
  flex-grow: 1;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
:is(.standard-page__content, .editor-styles-wrapper) .pricing-features li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 28px;
  color: var(--st-text-body);
  font-size: 14px;
  line-height: 1.6;
}
:is(.standard-page__content, .editor-styles-wrapper) .pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--st-purple-bright);
  font-weight: 800;
}
:is(.standard-page__content, .editor-styles-wrapper) .pricing-card .wp-block-buttons { margin-top: auto; }
:is(.standard-page__content, .editor-styles-wrapper) .pricing-card .wp-block-button,
:is(.standard-page__content, .editor-styles-wrapper) .pricing-card .wp-block-button__link { width: 100%; }

/* Upsell strip — soft, secondary "want more?" nudge below the two plans.
   Tinted + left accent so it reads as highlighted, but stays lighter than a card. */
:is(.standard-page__content, .editor-styles-wrapper) .upsell-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 24px;
  padding: 20px 28px;
  border-radius: 14px;
  border-left: 4px solid var(--st-purple);
  background: var(--st-purple-light);
}
:is(.standard-page__content, .editor-styles-wrapper) .upsell-text { flex: 1 1 340px; min-width: 0; }
:is(.standard-page__content, .editor-styles-wrapper) .upsell-text > * { margin: 0; }
:is(.standard-page__content, .editor-styles-wrapper) .upsell-eyebrow {
  margin-bottom: 4px;
  color: var(--st-purple-bright);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
:is(.standard-page__content, .editor-styles-wrapper) .upsell-desc {
  color: var(--st-text-heading);
  font-size: 15px;
  line-height: 1.55;
}
:is(.standard-page__content, .editor-styles-wrapper) .upsell-desc strong { font-weight: 700; }
:is(.standard-page__content, .editor-styles-wrapper) .upsell-strip .wp-block-buttons { flex: 0 0 auto; margin: 0; }

:is(.standard-page__content, .editor-styles-wrapper) .scale-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 36px;
  align-items: center;
  margin-top: 32px;
  padding: 40px 44px;
  overflow: hidden;
  border-radius: var(--st-card-radius);
  background: linear-gradient(135deg, var(--st-coral) 0%, var(--st-coral-deep) 100%);
  box-shadow: 0 18px 50px rgba(255, 98, 67, 0.25);
}
:is(.standard-page__content, .editor-styles-wrapper) .scale-banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.18), transparent 55%); pointer-events: none; }
:is(.standard-page__content, .editor-styles-wrapper) .scale-banner > * { position: relative; z-index: 1; }
:is(.standard-page__content, .editor-styles-wrapper) .scale-eyebrow { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
:is(.standard-page__content, .editor-styles-wrapper) .scale-banner h3 { margin: 0 0 8px; color: #fff; font-size: 26px; line-height: 1.3; }
:is(.standard-page__content, .editor-styles-wrapper) .scale-banner p { max-width: 56ch; margin: 0; color: rgba(255,255,255,0.92); font-size: 15px; line-height: 1.65; }
:is(.standard-page__content, .editor-styles-wrapper) .scale-banner .btn-primary .wp-block-button__link { background: #fff; color: var(--st-coral-deep) !important; }
/* --- `.scale-banner--ribbon`, chosen 2026-09-04 from three concepts. The
   split panel was 367px, taller than the 280px workspace cards right above it,
   so it read as a whole extra section. The ribbon is one row: heading and
   eyebrow side by side, a single sentence, the button on the right, and no
   photograph. 140px, well under the cards it follows.
   The base `.scale-banner` rule above is left alone: the Romanian twin still
   uses it, and under 968px the base collapses this to one column too. --- */
:is(.standard-page__content, .editor-styles-wrapper) .scale-banner--ribbon {
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  min-height: 140px;
  padding: 26px 32px 26px 40px;
}
:is(.standard-page__content, .editor-styles-wrapper) .scale-banner--ribbon .scale-banner-text {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* Heading and eyebrow share a row. Stacking them is half of what made the old
   banner tall, and the eyebrow is a date, not a second heading. */
:is(.standard-page__content, .editor-styles-wrapper) .scale-banner--ribbon .scale-banner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
:is(.standard-page__content, .editor-styles-wrapper) .scale-banner--ribbon h3 { margin: 0; font-size: 24px; }
:is(.standard-page__content, .editor-styles-wrapper) .scale-banner--ribbon .scale-eyebrow { margin: 0; }
/* Wide enough that the one sentence stays one line at the 1040px content
   width; the grid column caps it before this does on anything narrower. */
:is(.standard-page__content, .editor-styles-wrapper) .scale-banner--ribbon p { max-width: 80ch; font-size: 14.5px; }

/* --- Closing line under the "new to coworking" cards --- */
:is(.standard-page__content, .editor-styles-wrapper) .band-close {
  margin: 40px auto 0;
  max-width: 40ch;
  color: var(--st-text-heading);
  font-size: 19px;
  line-height: 1.5;
  text-align: center;
}
:is(.standard-page__content, .editor-styles-wrapper) .band-close-cta { margin-top: 20px; }


:is(.standard-page__content, .editor-styles-wrapper) .difference-layout { gap: 56px; align-items: stretch; }
:is(.standard-page__content, .editor-styles-wrapper) .difference-photo,
:is(.standard-page__content, .editor-styles-wrapper) .difference-photo figure,
:is(.standard-page__content, .editor-styles-wrapper) .difference-photo img { height: 100%; }
:is(.standard-page__content, .editor-styles-wrapper) .difference-photo img { width: 100%; object-fit: cover; object-position: left center; border-radius: var(--st-card-radius); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
:is(.standard-page__content, .editor-styles-wrapper) .difference-content .section-label { margin-bottom: 14px; }
:is(.standard-page__content, .editor-styles-wrapper) .difference-content .section-title { margin-bottom: 12px; }
:is(.standard-page__content, .editor-styles-wrapper) .difference-content > p { margin-bottom: 36px; color: var(--st-text-body); font-size: 16px; line-height: 1.75; }
:is(.standard-page__content, .editor-styles-wrapper) .difference-card { padding: 24px 20px; border-radius: 16px; background: var(--st-card-bg); box-shadow: var(--st-card-shadow); transition: transform 0.3s ease; }
:is(.standard-page__content, .editor-styles-wrapper) .difference-card:hover { transform: translateY(-4px); }
:is(.standard-page__content, .editor-styles-wrapper) .difference-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 14px; border-radius: 12px; background: var(--st-purple-light); color: var(--st-purple-bright); font-size: 22px; font-weight: 800; }
:is(.standard-page__content, .editor-styles-wrapper) .difference-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}
:is(.standard-page__content, .editor-styles-wrapper) .difference-card h4 { margin: 0 0 4px; color: var(--st-text-heading); font-size: 15px; font-weight: 700; }
:is(.standard-page__content, .editor-styles-wrapper) .difference-card p { margin: 0; color: var(--st-text-muted); font-size: 13px; line-height: 1.65; }

:is(.standard-page__content, .editor-styles-wrapper) .testimonial-card { padding: 40px 32px; border-radius: var(--st-card-radius); background: var(--st-card-bg); box-shadow: var(--st-card-shadow); }
:is(.standard-page__content, .editor-styles-wrapper) .testimonial-stars { margin: 0 0 20px; color: var(--st-star-gold); font-size: 18px; letter-spacing: 3px; }
:is(.standard-page__content, .editor-styles-wrapper) .testimonial-quote { margin: 0 0 24px; padding: 0; border: 0; }
:is(.standard-page__content, .editor-styles-wrapper) .testimonial-quote p { margin: 0; color: var(--st-text-body); font-size: 15px; font-style: italic; line-height: 1.75; }
:is(.standard-page__content, .editor-styles-wrapper) .testimonial-author { display: flex; align-items: center; gap: 12px; }
:is(.standard-page__content, .editor-styles-wrapper) .testimonial-avatar { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 50%; background: var(--st-purple-light); color: var(--st-purple-bright); font-size: 16px; font-weight: 700; }
:is(.standard-page__content, .editor-styles-wrapper) .testimonial-name { margin: 0; color: var(--st-text-heading); font-size: 14px; font-weight: 700; }
:is(.standard-page__content, .editor-styles-wrapper) .testimonial-author-info p:not(.testimonial-name) { margin: 0; color: var(--st-text-muted); font-size: 13px; }

:is(.standard-page__content, .editor-styles-wrapper) .faq-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
:is(.standard-page__content, .editor-styles-wrapper) .faq-side .section-title { margin-bottom: 18px; }
:is(.standard-page__content, .editor-styles-wrapper) .faq-side p { max-width: 38ch; margin-bottom: 26px; color: var(--st-text-body); font-size: 16px; line-height: 1.65; }
:is(.standard-page__content, .editor-styles-wrapper) .faq-list { max-width: none; margin: 0; }
:is(.standard-page__content, .editor-styles-wrapper) .faq-list > .faq-item { margin-block-start: 0; }
:is(.standard-page__content, .editor-styles-wrapper) .faq-item {
  border-bottom: 1px solid rgba(26,26,46,0.1);
  color: var(--st-text-heading);
}
:is(.standard-page__content, .editor-styles-wrapper) .faq-item:first-child { border-top: 1px solid rgba(26,26,46,0.1); }
:is(.standard-page__content, .editor-styles-wrapper) .faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  color: var(--st-text-heading);
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
}
:is(.standard-page__content, .editor-styles-wrapper) .faq-item summary::-webkit-details-marker { display: none; }
:is(.standard-page__content, .editor-styles-wrapper) .faq-item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(26,26,46,0.08);
  border-radius: 50%;
  color: var(--st-text-heading);
  font-size: 20px;
  line-height: 1;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
:is(.standard-page__content, .editor-styles-wrapper) .faq-item[open] summary::after {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: #fff;
  transform: rotate(45deg);
}
:is(.standard-page__content, .editor-styles-wrapper) .faq-item > p {
  margin: 0;
  padding: 0 0 26px;
  color: var(--st-text-body);
  font-size: 15px;
  line-height: 1.7;
}

:is(.standard-page__content, .editor-styles-wrapper) .cta-section { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, #8B5CF6 0%, #9b6ffb 40%, #a07dfb 60%, #8B5CF6 100%); color: #fff; }
:is(.standard-page__content, .editor-styles-wrapper) .cta-section::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 15% 20%, rgba(255,255,255,0.22), transparent 60%), radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.10) 0%, transparent 50%); }
:is(.standard-page__content, .editor-styles-wrapper) .cta-section .container { position: relative; z-index: 2; }
:is(.standard-page__content, .editor-styles-wrapper) .cta-section h2 { margin-bottom: 16px; color: #fff; font-size: 36px; font-weight: 400; line-height: 1.25; }
:is(.standard-page__content, .editor-styles-wrapper) .cta-section p { max-width: 48ch; margin-bottom: 32px; color: rgba(255,255,255,0.72); font-size: 17px; line-height: 1.75; }
:is(.standard-page__content, .editor-styles-wrapper) .cta-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
:is(.standard-page__content, .editor-styles-wrapper) .cta-card { padding: 32px 30px; border-radius: 22px; background: #fff; box-shadow: 0 20px 60px rgba(26,26,46,0.18); }
:is(.standard-page__content, .editor-styles-wrapper) .cta-card h3 { margin-bottom: 10px; color: var(--st-purple-hover); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
:is(.standard-page__content, .editor-styles-wrapper) .cta-card .cta-card-lead { max-width: none; margin-bottom: 20px; color: var(--st-text-body); font-size: 14px; line-height: 1.6; }
:is(.standard-page__content, .editor-styles-wrapper) .cta-card .hs-form-frame,
:is(.standard-page__content, .editor-styles-wrapper) .cta-card .hs-form-frame iframe { min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
:is(.standard-page__content, .editor-styles-wrapper) .cta-card label { color: var(--st-text-heading) !important; font-size: 13px !important; }
:is(.standard-page__content, .editor-styles-wrapper) .cta-card input[type="text"],
:is(.standard-page__content, .editor-styles-wrapper) .cta-card input[type="email"],
:is(.standard-page__content, .editor-styles-wrapper) .cta-card input[type="tel"],
:is(.standard-page__content, .editor-styles-wrapper) .cta-card select,
:is(.standard-page__content, .editor-styles-wrapper) .cta-card textarea { border: 1px solid rgba(26,26,46,0.15) !important; border-radius: 12px !important; background: #fff !important; color: var(--st-text-heading) !important; }

@media (max-width: 968px) {
  :is(.standard-page__content, .editor-styles-wrapper) .container { padding-inline: 40px; }
  :is(.standard-page__content, .editor-styles-wrapper) .fit-columns--top .fit-card,
  :is(.standard-page__content, .editor-styles-wrapper) .fit-columns--bottom .fit-card,
  :is(.standard-page__content, .editor-styles-wrapper) .fit-columns--feature .fit-card { min-height: 240px !important; }
  :is(.standard-page__content, .editor-styles-wrapper) .premium-card { min-height: 280px !important; }
  :is(.standard-page__content, .editor-styles-wrapper) .scale-banner { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
  :is(.standard-page__content, .editor-styles-wrapper) .difference-layout,
  :is(.standard-page__content, .editor-styles-wrapper) .faq-layout { gap: 40px; }
  /* The generic .faq-layout collapses to one column at this breakpoint, but the
     :is() rule above out-specifies it, so the two-column split survived down to
     phone widths and squeezed the questions into a ~190px column. Reset it here
     for every page using the standard content wrapper. */
  :is(.standard-page__content, .editor-styles-wrapper) .faq-layout { grid-template-columns: 1fr; }
  :is(.standard-page__content, .editor-styles-wrapper) .cta-columns { gap: 40px; }
}

@media (max-width: 480px) {
  :is(.standard-page__content, .editor-styles-wrapper) .container { padding-inline: 20px; }
  :is(.standard-page__content, .editor-styles-wrapper) .section-title { font-size: 28px; }
  :is(.standard-page__content, .editor-styles-wrapper) .scale-banner h3 { font-size: 22px; }
  :is(.standard-page__content, .editor-styles-wrapper) .cta-section h2 { font-size: 28px; }
}

/* Coworking page section glue.
   Kept with shared components so the page no longer needs a separate CSS file. */
:is(.standard-page__content, .editor-styles-wrapper) > .fit,
:is(.standard-page__content, .editor-styles-wrapper) > .premium,
:is(.standard-page__content, .editor-styles-wrapper) > .pricing,
:is(.standard-page__content, .editor-styles-wrapper) > .difference,
:is(.standard-page__content, .editor-styles-wrapper) > .testimonials,
:is(.standard-page__content, .editor-styles-wrapper) > .faq,
:is(.standard-page__content, .editor-styles-wrapper) > .cta-section {
  max-width: none;
  padding: clamp(72px, 9vw, 120px) 0;
}

:is(.standard-page__content, .editor-styles-wrapper) > .fit,
:is(.standard-page__content, .editor-styles-wrapper) > .pricing,
:is(.standard-page__content, .editor-styles-wrapper) > .testimonials {
  background: var(--st-bg-primary);
}

:is(.standard-page__content, .editor-styles-wrapper) > .premium,
:is(.standard-page__content, .editor-styles-wrapper) > .difference,
:is(.standard-page__content, .editor-styles-wrapper) > .faq {
  background: var(--st-bg-alt);
}
/* Editor canvas: block editor wrappers sit between .editor-styles-wrapper and section blocks. */
.editor-styles-wrapper .fit,
.editor-styles-wrapper .premium,
.editor-styles-wrapper .pricing,
.editor-styles-wrapper .difference,
.editor-styles-wrapper .testimonials,
.editor-styles-wrapper .faq,
.editor-styles-wrapper .cta-section {
  max-width: none;
  padding: clamp(72px, 9vw, 120px) 0;
}

.editor-styles-wrapper .fit,
.editor-styles-wrapper .pricing,
.editor-styles-wrapper .testimonials {
  background: var(--st-bg-primary);
}

.editor-styles-wrapper .premium,
.editor-styles-wrapper .difference,
.editor-styles-wrapper .faq {
  background: var(--st-bg-alt);
}

/* ============================================================
   Events page Gutenberg sections.
   ============================================================ */
.standard-page--content-only:has(> .hero--events) {
  padding-bottom: 0;
  background: var(--bg-primary);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) {
  background: var(--bg-primary);
  color: var(--text-heading);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 80px;
}

.hero--events {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 92vh;
  overflow: hidden;
  padding-top: 100px;
  background: linear-gradient(160deg, #8B5CF6 0%, #9b6ffb 40%, #a07dfb 60%, #8B5CF6 100%);
  color: #fff;
}

.hero--events::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.14) 0%, transparent 55%);
}

.hero--events::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 50%;
  z-index: 1;
  width: min(60vw, 760px);
  height: 90%;
  pointer-events: none;
  background: url("assets/logo/panda-systems-mark-v2.svg") center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.05;
  transform: translateY(-50%);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px 80px 80px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .hero-eyebrow {
  display: inline-block;
  margin: 0 0 24px;
  padding: 8px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.45;
  text-transform: uppercase;
}

.hero--events h1 {
  max-width: 22ch;
  margin: 0 0 22px;
  color: #fff;
  font-size: 56px !important;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .hero-subtext {
  max-width: 56ch;
  margin: 0 0 32px;
  color: rgba(255,255,255,0.7);
  font-size: 18px;
  line-height: 1.75;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
}

.hero--events .btn-primary .wp-block-button__link {
  background: #fff;
  color: var(--bg-dark) !important;
}

.clients-bar--static {
  padding: 64px 0 24px;
  background: var(--bg-primary);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .clients-bar-label {
  margin-bottom: 32px;
  color: var(--text-muted);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .clients-bar-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .clients-bar-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 92px;
  padding: 22px 36px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  background: var(--card-bg);
  opacity: 0.7;
  transition: box-shadow 0.3s, opacity 0.3s;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .clients-bar-logo img {
  width: auto;
  max-width: 130px;
  height: 44px;
  object-fit: contain;
  filter: grayscale(100%);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .clients-bar-logo:hover {
  opacity: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.usecases,
.workshops,
.testimonials--two {
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--bg-primary);
}

.spaces--events,
.location {
  padding: clamp(56px, 6vw, 88px) 0;
  background: var(--bg-alt);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) :is(.usecases-header, .spaces-header, .workshops-header, .testimonials-header) {
  margin-bottom: 56px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecases-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecases-grid--bottom {
  margin-top: 28px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecases-grid > .wp-block-column,
:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .workshops-grid > .wp-block-column,
:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonials-grid > .wp-block-column {
  display: flex;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecase-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecase-card-image {
  position: relative;
  height: 260px;
  overflow: hidden;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecase-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecase-card:hover .usecase-card-image img {
  transform: scale(1.05);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecase-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 32px 32px 36px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecase-card-body h3 {
  margin: 0 0 10px;
  color: var(--text-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecase-card-body p {
  flex: 1;
  margin: 0 0 18px;
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.75;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-header {
  text-align: center;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  margin-bottom: 28px;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-row:last-child {
  margin-bottom: 0;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-row.reverse {
  flex-direction: row-reverse;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-row > .wp-block-column:first-child {
  flex: 1.1;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-row > .wp-block-column:last-child {
  flex: 1;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 52px 48px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-content h3 {
  margin: 0 0 14px;
  color: var(--text-heading);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-content p {
  margin: 0 0 22px;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.75;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-features {
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-features li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 30px;
  color: var(--text-body);
  font-size: 15px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--purple);
  font-weight: 800;
}

/* Booking CTA inside a spaces card: 40px + the last li's 12px margin equals
   the 52px bottom padding, so the button sits centered between the features
   list and the card edge. */
:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-content .wp-block-buttons {
  margin-top: 40px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .workshops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .workshop-card {
  width: 100%;
  padding: 32px 26px;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .workshop-card:hover {
  transform: translateY(-4px);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .workshop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--purple-light);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .workshop-icon svg {
  width: 22px;
  height: 22px;
  color: var(--purple-bright);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .workshop-card h4 {
  margin: 0 0 8px;
  color: var(--text-heading);
  font-size: 16px;
  font-weight: 700;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .workshop-card p {
  margin: 0;
  color: var(--text-body);
  font-size: 14px;
  line-height: 1.7;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-inner {
  display: flex;
  gap: 64px;
  align-items: stretch;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-inner > .wp-block-column:first-child {
  flex: 1.1;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-inner > .wp-block-column:last-child {
  flex: 1;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-image {
  width: 100%;
  height: 100%;
  min-height: 420px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-image img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border-radius: var(--card-radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-intro {
  margin: 0 0 28px;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.75;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-list {
  display: grid;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-list-item:last-child {
  border-bottom: 0;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-list-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--purple-light);
  color: var(--purple-bright);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-list-icon svg {
  width: 16px;
  height: 16px;
  color: var(--purple-bright);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-list-copy {
  margin: 0;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-list-copy h4 {
  margin: 0 0 2px;
  color: var(--text-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-list-copy p {
  margin: 0;
  color: var(--text-body);
  font-size: 15px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonial-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 40px 32px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 20px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonial-stars svg {
  width: 18px;
  height: 18px;
  color: var(--star-gold);
  fill: var(--star-gold);
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonial-quote {
  flex: 1;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonial-quote p {
  margin: 0;
  color: var(--text-body);
  font-size: 15px;
  font-style: italic;
  line-height: 1.75;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonial-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: var(--purple-light);
  color: var(--purple-bright);
  font-size: 16px;
  font-weight: 700;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonial-name {
  margin: 0;
  color: var(--text-heading);
  font-size: 14px;
  font-weight: 700;
}

:is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonial-author-info p:not(.testimonial-name) {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

@media (max-width: 968px) {
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .container { padding-inline: 40px; }
  .hero--events { min-height: auto; padding-top: 120px; padding-bottom: 60px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .hero-inner { padding: 20px 40px 40px; }
  .hero--events h1 { font-size: 42px !important; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecases-grid,
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .workshops-grid,
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .testimonials-grid { grid-template-columns: 1fr; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecase-card-image { height: 220px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-row,
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-row.reverse { flex-direction: column; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-image { min-height: 280px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-content { padding: 40px 36px; }
  /* 12px li margin + 28px = the 40px mobile bottom padding (same centering as desktop). */
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-content .wp-block-buttons { margin-top: 28px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-inner { flex-direction: column; gap: 40px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-image,
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .location-image img { min-height: 360px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .clients-bar-logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .clients-bar-logo {
    min-width: 0;
    min-height: 76px;
    padding: 16px 12px;
    border-radius: 12px;
  }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .clients-bar-logo img {
    max-width: 100px;
    height: 32px;
  }
}

@media (max-width: 480px) {
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .container { padding-inline: 20px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .hero-inner { padding: 20px 20px 40px; }
  .hero--events h1 { font-size: 34px !important; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .hero-subtext { font-size: 16px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .hero-ctas { flex-direction: column; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .hero-ctas .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .section-title { font-size: 28px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecase-card-body { padding: 28px 24px 32px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .usecase-card-body h3 { font-size: 20px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-content { padding: 32px 24px; }
  /* 12px li margin + 20px = the 32px small-screen bottom padding (same centering as desktop). */
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-content .wp-block-buttons { margin-top: 20px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .spaces-content h3 { font-size: 22px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .workshops-grid { grid-template-columns: 1fr; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .clients-bar-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .clients-bar-logo { min-height: 68px; padding: 14px 12px; border-radius: 10px; }
  :is(.hero--events, .clients-bar--static, .usecases, .spaces--events, .workshops, .location, .testimonials--two) .clients-bar-logo img { max-width: 92px; height: 28px; }
}

/* ============================================================
   Terms and Conditions legal document sections.
   ============================================================ */
:is(.standard-page__content, .editor-styles-wrapper) > .terms--legal {
  max-width: none;
  padding: clamp(64px, 8vw, 110px) 0;
  background: #fff;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: start;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-aside {
  position: sticky;
  top: 112px;
  padding: 26px;
  border: 1px solid #e8e8ef;
  border-radius: 8px;
  background: #f7f7fa;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-aside > * { margin-block-start: 0; }

:is(.standard-page__content, .editor-styles-wrapper) .terms-aside h2 {
  margin: 0 0 12px;
  color: #1a1a2e;
  font-size: 18px;
  font-weight: 700;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-aside p {
  margin: 0 0 20px;
  color: #8a8a9a;
  font-size: 14px;
  line-height: 1.7;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-nav {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.55;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-nav li::before { content: none; }

:is(.standard-page__content, .editor-styles-wrapper) .terms-nav a {
  display: block;
  padding: 7px 0;
  color: #4a4a5a;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-nav a:hover { color: #7c5cfc; }

:is(.standard-page__content, .editor-styles-wrapper) .terms-content {
  max-width: 780px;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-content > * { margin-block-start: 0; }

:is(.standard-page__content, .editor-styles-wrapper) .terms-content .legal-intro {
  margin: 0 0 34px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e8e8ef;
  color: #4a4a5a;
  font-size: 18px;
  line-height: 1.8;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-content h2 {
  margin: 34px 0 14px;
  padding-top: 34px;
  border-top: 1px solid #e8e8ef;
  color: #1a1a2e;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.2;
  scroll-margin-top: 112px;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-content > h2:first-child,
:is(.standard-page__content, .editor-styles-wrapper) .terms-content > .legal-intro + h2 {
  margin-top: 0;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-content p,
:is(.standard-page__content, .editor-styles-wrapper) .terms-content li {
  color: #4a4a5a;
  font-size: 17px;
  line-height: 1.78;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-content p { margin: 0 0 14px; }

:is(.standard-page__content, .editor-styles-wrapper) .terms-content ul {
  display: grid;
  gap: 14px;
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-content li {
  position: relative;
  padding-left: 24px;
  list-style: none;
}

:is(.standard-page__content, .editor-styles-wrapper) .terms-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8f63ff;
}

@media (max-width: 960px) {
  :is(.standard-page__content, .editor-styles-wrapper) .terms-layout { grid-template-columns: 1fr; }
  :is(.standard-page__content, .editor-styles-wrapper) .terms-aside { position: static; }
}

@media (max-width: 640px) {
  :is(.standard-page__content, .editor-styles-wrapper) > .terms--legal { padding: 64px 0; }
  :is(.standard-page__content, .editor-styles-wrapper) .terms-content h2 { font-size: 26px; }
  :is(.standard-page__content, .editor-styles-wrapper) .terms-content p,
  :is(.standard-page__content, .editor-styles-wrapper) .terms-content li { font-size: 16px; }
  :is(.standard-page__content, .editor-styles-wrapper) .terms-aside { padding: 22px; }
}

/* ============================================================
   Business Consulting page Gutenberg sections.
   ============================================================ */

/* Hero variant: side-positioned Supertree mark, left-aligned content. */
.hero--consulting {
  min-height: 92vh;
  align-items: center;
  padding-top: 100px;
}

.hero--consulting::after {
  left: auto;
  right: -8%;
  top: 50%;
  width: auto;
  height: 90%;
  aspect-ratio: 884 / 700;
  transform: translateY(-50%);
}

.hero--consulting .hero-content {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px 80px 80px;
  text-align: left;
}

.hero--consulting .hero-badge {
  margin: 0 0 24px;
}

.hero--consulting h1 {
  max-width: 22ch;
  margin: 0 0 22px;
  font-size: 56px;
}

.hero--consulting .hero-content > h1 { margin-block-start: 0; }
.hero--consulting .hero-content > p { margin-block-start: 0; }
.hero--consulting .hero-content > .wp-block-buttons { margin-block-start: 0; }

.hero--consulting p {
  max-width: 50ch;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 36px;
  font-size: 18px;
  color: rgba(255,255,255,0.7);
}

.hero--consulting .hero-ctas {
  justify-content: flex-start;
  gap: 14px;
}

/* About pillars — small 3-up list nested inside .about-text. */
.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.about-pillars > .about-pillar { margin-block-start: 0; }
.about-pillar {
  background: var(--bg-alt);
  border-radius: 14px;
  padding: 16px 18px;
}
.about-pillar > * { margin-block-start: 0; }
.about-pillar h4 {
  margin: 0 0 4px;
  color: var(--text-heading);
  font-size: 14px;
  font-weight: 700;
}
.about-pillar p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* About variant for Consulting — sits on white instead of grey,
   to match the original .intro section background. */
.about--consulting { background: var(--bg-primary); }
.about--consulting .about-pillar { background: var(--bg-alt); }
.about--consulting .about-text h2 { text-wrap: balance; }
/* Eyebrow is a <p class="section-label"> Gutenberg block here, so the
   .about-text p / .learn-text p body-color rules (0,1,1) would override the
   purple .section-label (0,1,0). Bump specificity so the eyebrow stays purple. */
.about--consulting .about-text .section-label { color: var(--purple); }

/* Services — Consulting modifier with native Cover service cards. */
.services--consulting {
  background: var(--bg-primary);
  padding: clamp(72px, 9vw, 120px) 0;
}
.services--consulting .services-header { margin-bottom: 56px; }
.services--consulting .services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.services--consulting .services-grid > * { margin-block-start: 0; }
.services--consulting .service-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  aspect-ratio: 1 / 1.05;
  min-height: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  color: #fff;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  isolation: isolate;
}
.services--consulting .service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.14); }
.services--consulting .service-card .wp-block-cover__background { display: none; }
.services--consulting .service-card .wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.services--consulting .service-card:hover .wp-block-cover__image-background { transform: scale(1.05); }
.services--consulting .service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26,26,46,0) 35%, rgba(26,26,46,0.86) 100%);
}
.services--consulting .service-card .wp-block-cover__inner-container {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2 !important;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  width: auto;
  color: #fff;
}
.services--consulting .service-card .wp-block-cover__inner-container > * { margin-block-start: 0; }
.services--consulting .service-card h3 {
  max-width: 80%;
  margin: 0;
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.services--consulting .service-card h3 a { color: #fff !important; text-decoration: none; }
.services--consulting .service-card .service-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

/* Advisory banner — purple CTA strip below services grid. */
.advisory-banner {
  position: relative;
  margin-top: 32px;
  padding: 36px 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  background: var(--purple);
  border-radius: var(--card-radius);
  box-shadow: 0 18px 50px rgba(124, 92, 252, 0.25);
  overflow: hidden;
}
.advisory-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.18), transparent 55%);
  pointer-events: none;
}
.advisory-banner > * { margin-block-start: 0; }
.advisory-banner-text { position: relative; z-index: 1; }
.advisory-banner-text > * { margin-block-start: 0; }
.advisory-banner h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.advisory-banner p {
  margin: 0;
  color: rgba(255,255,255,0.85);
  font-size: 15px;
}
.advisory-banner .wp-block-buttons { position: relative; z-index: 1; margin: 0; }
.advisory-banner .btn-primary > .wp-block-button__link {
  background: #fff;
  color: var(--purple) !important;
  font-weight: 500 !important;
}
.advisory-banner .btn-primary > .wp-block-button__link:hover {
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  transform: translateY(-2px);
}

/* Learn & Grow — Consulting modifier single-card section. */
.learn--consulting {
  background: var(--bg-primary);
  padding: clamp(56px, 7vw, 100px) 0 clamp(72px, 9vw, 120px);
}
.learn-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: stretch;
  background: var(--bg-alt);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.learn-photo { position: relative; min-height: 360px; }
.learn-photo .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
}
.learn-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.learn-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(36px, 5vw, 64px);
}
.learn-text > * { margin-block-start: 0; }
.learn-text .section-label { color: var(--purple); }
.learn-text .section-title { margin-bottom: 14px; }
.learn-text p {
  margin: 0 0 28px;
  max-width: 50ch;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.75;
}
.learn-text .wp-block-buttons { margin: 0; }

/* Responsive — tablet */
@media (max-width: 968px) {
  .hero--consulting { min-height: auto; padding: 120px 0 60px; }
  .hero--consulting .hero-content { padding: 20px 40px 40px; }
  .hero--consulting h1 { font-size: 42px; }

  .about--consulting .about-inner { flex-direction: column; gap: 32px; }
  .about-pillars { grid-template-columns: 1fr; gap: 10px; }

  .services--consulting .services-grid { grid-template-columns: repeat(2, 1fr); }
  .advisory-banner { grid-template-columns: 1fr; gap: 20px; padding: 28px; }

  .learn--consulting .learn-card { grid-template-columns: 1fr; }
  .learn--consulting .learn-photo { min-height: 240px; }
}

/* Responsive — mobile */
@media (max-width: 480px) {
  .hero--consulting .hero-content { padding: 20px 20px 40px; }
  .hero--consulting h1 { font-size: 34px; letter-spacing: -0.5px; }
  .hero--consulting p { font-size: 16px; }
  .hero--consulting .hero-ctas { flex-direction: column; }
  .hero--consulting .hero-ctas > .wp-block-button { width: 100%; }
  .hero--consulting .hero-ctas .wp-block-button__link { width: 100%; justify-content: center; }

  .services--consulting .services-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .services--consulting .service-card h3 { font-size: 14px; }
  .advisory-banner h3 { font-size: 19px; }
}

/* ============================================================
   MEETING ROOMS PAGE — product page sections
   Shared component classes (band, room-card, benefits-row,
   step-node, etc.); reuses theme tokens. No page-level scope.
   ============================================================ */

.band { padding: clamp(64px, 8vw, 110px) 0; background: var(--bg-primary); }
.band--alt { background: var(--bg-primary); }
.band--mauve { background: var(--bg-alt); }
/* Step-node ring needs to match the section bg so the box-shadow "outline" sits on the right tone. */
.band--mauve .step-node { box-shadow: 0 0 0 7px var(--bg-alt); }
/* The "what's included" band reads clean and premium on white — the colored icon
   tiles pop instead of disappearing into the gray section tone. */
.band--white { background: #fff; }

/* --- Private Offices page: band rhythm, filled splits, dark statement band ---
   Added 2026-08-24 after review. Three problems this solves, all measured
   rather than eyeballed:
   1. band--white / --alt / --mauve are only 8 points apart (255 / 246 / 238),
      so consecutive sections did not read as distinct and the page felt like
      one undifferentiated scroll. band--dark gives a real break.
   2. A media-split centres its columns, so a 325px image beside 806px of copy
      floated with 481px of dead space. --fill stretches it instead. No page
      uses --fill any more (the two option bands that did became .opt-grid
      cards), but it is kept on purpose: the live Coworking Desks page has the
      same 337px hole and verify-page.mjs flags it.
   3. Two sibling product blocks each got their own full band, which spent
      220px of padding per boundary, so both now sit inside one band. They
      started as stacked .option-block rows parted by a rule; that rule is
      gone because the pair became .opt-grid cards, see the end of this file. */

.band--dark { background: var(--bg-dark); color: #fff; }
.band--dark .section-title, .band--dark .eco-title, .band--dark h2, .band--dark h3 { color: #fff; }
.band--dark .section-label { color: #b9a6ff; }
.band--dark .section-sub, .band--dark p { color: rgba(255,255,255,.72); }
.band--dark a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.band--dark a:hover { color: #d6c7ff; }
.band-head--wide { max-width: 820px; }

/* Full-width statement row on the dark band. */
.eco-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(40px, 5vw, 60px); }
.eco-row > *, .eco-item > * { margin-block-start: 0; }
.eco-item { padding: 30px 28px 32px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.eco-ico { width: 46px; height: 46px; margin: 0 0 18px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.09); color: #c9b6ff; }
.eco-ico .st-icon::before { width: 22px; height: 22px; }
.band--dark .eco-title { margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.band--dark .eco-desc { margin: 0; font-size: 15px; line-height: 1.65; }

@media (max-width: 860px) {
  .eco-row { grid-template-columns: 1fr; }
}
.band-head { max-width: 680px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.band-head .section-label { margin-bottom: 14px; }
.band-head .section-title { font-weight: 700; text-wrap: balance; }
.band-head .section-sub { margin-top: 16px; font-size: 17px; line-height: 175%; color: var(--text-body); }
.band-head .section-sub--small { font-size: 14px; color: var(--text-muted); margin-top: 8px; }
/* The line above sets a dark body colour at the same specificity as
   `.band--dark .section-sub` (line ~2959) but LATER in the file, so it wins
   and a sub-heading inside a dark band renders #4a4a5a on #1a1a2e: a contrast
   ratio of 1.96:1, effectively invisible. Found 2026-08-27 on the Brand
   Partnerships build; the LIVE Private Offices page has the same defect in its
   dark ecosystem band. These two rules are one step more specific, so they win
   in both directions and must stay after the `.band-head` block.
   See feedback_supertree_theme_css_specificity_traps. */
.band--dark .band-head .section-sub { color: rgba(255,255,255,.72); }
.band--dark .band-head .section-sub--small { color: rgba(255,255,255,.58); }
/* The small-print variant is also used outside .band-head (the VAT line under
   the Day Passes pricing grid). Without a standalone rule it had no declared
   size and fell through to 1rem, i.e. ~11px. 2026-08-19 */
.section-sub--small { font-size: 14px; color: var(--text-muted); }

/* Generic lucide-style line icons */
.band .lucide { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ---------- Rooms grid ---------- */
.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Two-card variant. The corporate party page has exactly two open-space
   venues and the default three-column grid left a visible hole beside them.
   Sits before the responsive block below on purpose, so the 980px and 620px
   .room-grid rules still collapse it to two then one column. 2026-08-19 */
.room-grid--two { grid-template-columns: repeat(2, 1fr); }
.room-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(35,35,35,.07); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.room-card:hover { transform: translateY(-4px); box-shadow: 0 24px 80px rgba(35,35,35,.08); }
.room-photo { aspect-ratio: 16/10; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--purple-hover), var(--purple)); }
.room-card:nth-child(2) .room-photo { background: linear-gradient(135deg, #2bab80, #33cc99); }
.room-card:nth-child(3) .room-photo { background: linear-gradient(135deg, #ff6666, #ff9a6b); }
.room-card:nth-child(4) .room-photo { background: linear-gradient(135deg, #5b54d6, var(--purple-hover)); }
.room-card:nth-child(5) .room-photo { background: linear-gradient(135deg, #1a1a2e, #3a3a6e); }
.room-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.room-card:hover .room-photo img { transform: scale(1.05); }
.room-photo .cap-badge { position: absolute; z-index: 2; top: 14px; left: 14px; background: rgba(255,255,255,.92); color: var(--text-heading); font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 50px; backdrop-filter: blur(4px); }
.room-card .room-body { margin: 0; padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.room-card .room-name { font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 8px; color: var(--text-heading); }
.room-card .room-desc { font-size: 15px; color: var(--text-body); line-height: 1.55; margin: 0 0 18px; }
.room-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.room-tags .room-tag { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-body); background: var(--bg-primary); padding: 6px 11px; border-radius: 8px; }
/* Availability status chip. Unlike .room-tag (a "best for" label) this states
   whether a product can be taken today, so it has to stay legible on every
   band colour: .room-tag uses var(--bg-primary), which is exactly the
   band--alt background and therefore disappears there. */
.avail-tag { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 7px 15px; border-radius: 999px; background: #fff; border: 1px solid #e4e2ea; font-size: 13px; font-weight: 600; color: var(--text-heading); }
.avail-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22a173; flex: none; }
.avail-tag--queue::before { background: #b6b2c2; }
.room-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.room-pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.room-pricing p { margin: 0; }
.room-pricing .room-price { font-size: 24px; font-weight: 800; line-height: 1; color: var(--text-heading); }
.room-pricing .room-fullday { font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--text-muted); }
.room-foot .wp-block-button.btn-primary { width: 100%; }
.room-foot .wp-block-button.btn-primary .wp-block-button__link { width: 100%; }
.room-card .room-body > :not(.room-foot),
.room-card .room-foot > * { margin-block-start: 0; }

/* ---------- Included row ---------- */
/* Sits on a white band (see .band:has(.benefits-row)); the light borders
   and faint hover fill read crisp on white, matching the prototype. */
.benefits-row { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
.benefit { position: relative; padding: 36px 28px 38px; display: flex; flex-direction: column; transition: background .25s ease; }
.benefit + .benefit::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: #e8e8e8; }
.benefit:hover { background: var(--bg-primary); }
.benefit-ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: #f0ecff; color: var(--purple-hover); margin-bottom: 22px; transition: transform .25s ease; }
.benefit-ico .lucide { width: 23px; height: 23px; }
.benefit:nth-child(2) .benefit-ico { background: #e7faf2; color: #22a173; }
.benefit:nth-child(3) .benefit-ico { background: #fff0f0; color: #ff6666; }
.benefit:nth-child(4) .benefit-ico { background: #f0ecff; color: var(--purple-hover); }
.benefit:nth-child(5) .benefit-ico { background: #e7faf2; color: #22a173; }
.benefit:hover .benefit-ico { transform: translateY(-3px); }
.benefit-num { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; }
.benefit-title { font-weight: 700; font-size: 16px; line-height: 1.3; margin: 0 0 8px; color: var(--text-heading); letter-spacing: -.01em; min-height: 42px; }
.benefit-desc { font-size: 14px; color: var(--text-body); line-height: 1.55; margin: 0; }

/* ---------- Compare table ---------- */
.compare-wrap { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(35,35,35,.07); background: #fff; border: 1px solid #e8e8e8; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare-table thead th { background: var(--bg-dark); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-align: left; padding: 18px 22px; white-space: nowrap; }
.compare-table thead th.num { text-align: center; }
.compare-table tbody td { padding: 20px 22px; border-bottom: 1px solid #e8e8e8; color: var(--text-body); vertical-align: middle; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr { transition: background .18s ease; }
.compare-table tbody tr:hover { background: var(--bg-primary); }
.compare-room { display: flex; align-items: center; gap: 12px; }
.compare-room .swatch { flex: none; width: 10px; height: 34px; border-radius: 6px; background: var(--purple-hover); }
.compare-table tbody tr:nth-child(2) .swatch { background: #7c6ff0; }
.compare-table tbody tr:nth-child(3) .swatch { background: #33cc99; }
.compare-table tbody tr:nth-child(4) .swatch { background: #22a173; }
.compare-table tbody tr:nth-child(5) .swatch { background: #ff6666; }
.compare-room strong { font-size: 17px; font-weight: 700; color: var(--text-heading); letter-spacing: -.01em; }
.compare-cap { font-weight: 600; color: var(--text-heading); white-space: nowrap; }
.compare-table td.num { text-align: center; white-space: nowrap; }
.compare-rate { font-size: 17px; font-weight: 700; color: var(--text-heading); }
.compare-day { font-weight: 600; color: var(--text-muted); }
.compare-book { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--purple-hover); white-space: nowrap; transition: gap .2s ease; }
.compare-book:hover { gap: 10px; color: var(--purple-bright); }
.compare-note { margin-top: 18px; font-size: 13px; color: var(--text-muted); text-align: center; }
.compare-cards { display: none; }

/* ---------- Steps timeline ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 920px; margin-inline: auto; }
.steps::before { content: ""; position: absolute; top: 36px; left: 16.66%; right: 16.66%; height: 2px; background: linear-gradient(90deg, var(--purple-hover), #33cc99, #ff6666); opacity: .5; z-index: 0; }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 14px; }
.step-node { position: relative; width: 72px; height: 72px; border-radius: 50%; background: #f0ecff; color: var(--purple-hover); display: grid; place-items: center; margin-bottom: 22px; box-shadow: 0 0 0 7px var(--bg-primary); transition: transform .25s ease; }
.step:hover .step-node { transform: translateY(-5px); }
.step-node .st-icon { grid-area: 1 / 1; }
.step-node .lucide { width: 30px; height: 30px; stroke-width: 1.6; }
.step-badge { position: absolute; top: -4px; right: -4px; width: 27px; height: 27px; border-radius: 50%; background: var(--purple-hover); color: #fff; font-size: 13px; font-weight: 800; line-height: 1; display: grid; place-items: center; border: 2.5px solid #fff; }
.step:nth-child(2) .step-node { background: #e7faf2; color: #22a173; }
.step:nth-child(2) .step-badge { background: #33cc99; }
.step:nth-child(3) .step-node { background: #fff0f0; color: #ff6666; }
.step:nth-child(3) .step-badge { background: #ff6666; }
.step h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--text-heading); }
.step p { font-size: 15px; color: var(--text-body); line-height: 1.6; max-width: 30ch; margin: 0 auto; }
.steps-cta { text-align: center; margin-top: 40px; }
/* Center the "Book a room now" button under the steps row (the wp:buttons block
   is a flex container, so text-align on .steps-cta alone won't center it). */
.steps-cta .wp-block-buttons { justify-content: center; }

/* ---------- Location ---------- */
#location.band { padding: clamp(42px, 4.5vw, 60px) 0; background: #fff; }
.loc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); align-items: center; }
.loc-map { border-radius: 30px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 16px 48px rgba(26,26,46,.08); background: linear-gradient(135deg, #e7faf2, #f0ecff); position: relative; }
.loc-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loc-text > .section-label { margin-bottom: 10px; }
.loc-text .section-title { font-size: clamp(32px, 2.2vw, 44px); font-weight: 700; line-height: 1.15; margin-top: 0; margin-bottom: 20px; text-wrap: balance; }
#location .loc-sub { color: var(--text-body); font-size: clamp(16px, 1.1vw, 20px); line-height: 1.45; margin: 0 0 22px; }
.loc-list { list-style: none; display: flex; flex-direction: column; gap: 16px; padding: 0; margin: 0; }
.loc-item { display: flex; gap: 13px; align-items: flex-start; }
.loc-list .loc-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #f0ecff; display: grid; place-items: center; color: var(--purple-hover); }
.loc-ico .st-icon::before { width: 18px; height: 18px; }
.loc-item-text { min-width: 0; margin: 0; }
#location .loc-item-title { margin: 0; font-size: clamp(16px, 1vw, 18px); line-height: 1.24; font-weight: 700; color: var(--text-heading); }
#location .loc-item-sub { margin: 5px 0 0; font-size: clamp(14px, .9vw, 16px); line-height: 1.28; color: var(--text-body); }

/* ---------- Venues teaser ---------- */
.venues { padding: clamp(40px, 5vw, 64px) 0; background: #fff; }
.venues-card { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); background: #fff; border: 1px solid #e8e8e8; border-radius: 20px; box-shadow: 0 10px 30px rgba(35,35,35,.07); padding: 22px clamp(22px, 3vw, 34px); }
.venues-thumbs { display: flex; gap: 12px; flex: none; }
.venues-thumb { position: relative; width: 118px; height: 88px; border-radius: 14px; overflow: hidden; }
.venues-thumb img { width: 100%; height: 100%; object-fit: cover; }
.venues-thumb .venues-cap { margin: 0; position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-size: 11px; font-weight: 700; padding: 14px 8px 6px; text-align: center; }
.venues-text { flex: 1; min-width: 0; }
.venues-text .section-label { margin-bottom: 6px; }
.venues-text h3 { font-size: clamp(20px, 1vw + 8px, 22px); font-weight: 700; color: var(--text-heading); line-height: 1.25; margin: 0 0 6px; text-wrap: balance; white-space: nowrap; }
.venues-text p { font-size: 14px; line-height: 1.5; color: var(--text-body); max-width: 52ch; margin: 0; }
.venues-card > .wp-block-buttons { flex: none; margin-block-start: 0; justify-content: flex-end; }
.venues-card .wp-block-button { margin: 0; }
.venues-card .wp-block-button__link { min-width: 230px; justify-content: center; white-space: nowrap; }

/* ---------- Questions + HubSpot form ---------- */
.request-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.request-text .section-title { margin-bottom: 16px; text-wrap: balance; }
.request-text .section-sub { font-size: 17px; line-height: 175%; color: var(--text-body); margin: 0; }
.request-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 22px 0 0; padding: 0; }
.request-list li { display: flex; gap: 11px; font-size: 16px; color: var(--text-heading); }
.request-list li::before { content: "→"; color: var(--purple-hover); font-weight: 800; }
.form-card { background: #fff; border-radius: 30px; padding: clamp(28px, 3vw, 42px); box-shadow: 0 10px 30px rgba(35,35,35,.07); }
.request-form .field { margin-bottom: 18px; }
.request-form .field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; color: var(--text-heading); }
.request-form .field label .field-optional { font-weight: 500; color: var(--text-muted); }
.request-form .field input,
.request-form .field textarea { width: 100%; border: 1.5px solid #e8e8e8; border-radius: 12px; padding: 13px 16px; font-family: inherit; font-size: 15px; color: var(--text-heading); background: #fff; transition: border-color .15s; }
.request-form .field input:focus,
.request-form .field textarea:focus { outline: none; border-color: var(--purple-hover); }
.request-form .field textarea { resize: vertical; min-height: 96px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.request-form button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; gap: 8px;
  background: var(--purple); color: #fff;
  padding: 16px 40px; border: 0; border-radius: 50px;
  font-family: inherit; font-weight: 500; font-size: 16px; line-height: 120%;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.request-form button[type="submit"]:hover {
  background: var(--purple-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
}
.request-form button[type="submit"]:disabled { opacity: .65; cursor: wait; transform: none; box-shadow: none; }
.form-consent { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); text-align: center; }
.form-consent a { color: var(--purple-hover); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.form-status { margin-top: 14px; padding: 14px 18px; border-radius: 12px; font-size: 14px; line-height: 1.5; display: none; }
.form-status.is-error { display: block; background: #fff0f0; color: #c33; border: 1px solid #ffcccc; }
.form-status.is-success { display: block; background: #e7faf2; color: #22a173; border: 1px solid #b8eed4; }

/* ---------- Final CTA actions row ---------- */
/* Native wp:buttons; the shared .btn-primary--white / .btn-outline--white wrapper
   rules style the child links, so only the row layout is needed here. */
.cta-actions { margin-top: 12px; }
.cta-actions .wp-block-buttons { gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-section .cta-sub { text-align: center; margin: 0 auto; max-width: 60ch; }

/* ---------- Native-block reconciliation ----------
   The body is native Gutenberg now: images carry a <figure class="wp-block-image">
   wrapper, and core groups add is-layout-flow auto-margins between children.
   Neutralise both so the component CSS above controls layout/spacing. */
.room-photo .wp-block-image,
.loc-map .wp-block-image,
.venues-thumb .wp-block-image { margin: 0; position: absolute; inset: 0; height: 100%; width: 100%; }
.room-photo .wp-block-image img,
.loc-map .wp-block-image img,
.venues-thumb .wp-block-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Reset ONLY Gutenberg's flow auto-margin (margin-block-start on non-first
   children) inside grid/flex containers, where it misaligns cells. Flow
   containers keep their component margins (incl. .room-foot margin-top:auto). */
.room-grid > *, .benefits-row > *, .steps > *, .loc-grid > *,
.loc-list > *, .venues-thumbs > *, .faq-layout > *,
.room-tags > *, .room-pricing > *, .cta-actions > *, .stepnav > * { margin-block-start: 0; }

/* Gutenberg's .wp-block-heading carries a higher-specificity heading colour;
   force the intended dark colour for the migrated card/benefit titles (same
   !important pattern used elsewhere in this file for Gutenberg headings). */
.room-card .room-name, .benefit .benefit-title,
.stepnav-card .stepnav-title,
.choice-card .choice-title { color: var(--text-heading) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .room-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-row { grid-template-columns: repeat(2, 1fr); }
  .benefit { border-bottom: 1px solid #e8e8e8; padding: 30px 24px 32px; }
  .benefit + .benefit::before { display: none; }
  .benefit:nth-child(odd) { border-right: 1px solid #e8e8e8; }
  .benefit:nth-last-child(1) { border-bottom: none; }
  .benefit:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .benefit-title { min-height: 0; }
}
@media (max-width: 880px) {
  .request-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; gap: 0; max-width: 440px; }
  .steps::before { left: 31px; right: auto; top: 40px; bottom: 40px; width: 2px; height: auto; background: linear-gradient(180deg, var(--purple-hover), #33cc99, #ff6666); }
  .step { flex-direction: row; text-align: left; align-items: flex-start; gap: 22px; padding: 0 0 40px; }
  .step:last-child { padding-bottom: 0; }
  .step-node { margin-bottom: 0; flex: none; width: 64px; height: 64px; box-shadow: 0 0 0 6px var(--bg-primary); }
  .step p { max-width: none; margin: 0; }
  .loc-grid { grid-template-columns: 1fr; }
  .loc-map { order: -1; aspect-ratio: 16/10; }
  .venues-card { flex-direction: column; align-items: flex-start; gap: 18px; }
  .venues-text h3 { white-space: normal; }
  .venues-card > .wp-block-buttons,
  .venues-card .wp-block-button,
  .venues-card .wp-block-button__link,
  .venues-card a.btn-primary { width: 100%; }
}
@media (max-width: 760px) {
  .compare-wrap { display: none; }
  .compare-cards { display: grid; gap: 14px; }
  .cmp-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 16px; padding: 20px; box-shadow: 0 10px 30px rgba(35,35,35,.07); }
  .cmp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
  .cmp-top strong { font-size: 18px; font-weight: 700; color: var(--text-heading); }
  .cmp-top .swatch { width: 10px; height: 28px; border-radius: 6px; background: var(--purple-hover); }
  .cmp-card:nth-child(2) .swatch { background: #7c6ff0; }
  .cmp-card:nth-child(3) .swatch { background: #33cc99; }
  .cmp-card:nth-child(4) .swatch { background: #22a173; }
  .cmp-card:nth-child(5) .swatch { background: #ff6666; }
  .cmp-card .cmp-best { font-size: 14px; color: var(--text-body); margin-bottom: 14px; }
  .cmp-row { display: flex; justify-content: space-between; font-size: 14px; padding: 7px 0; border-top: 1px solid #e8e8e8; }
  .cmp-row span:first-child { color: var(--text-muted); }
  .cmp-row span:last-child { font-weight: 700; color: var(--text-heading); }
}
@media (max-width: 620px) {
  .room-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .benefits-row { grid-template-columns: 1fr; }
  .benefit { border-right: none !important; border-bottom: 1px solid #e8e8e8 !important; }
  .benefit:last-child { border-bottom: none !important; }
  .venues-thumbs { width: 100%; }
  .venues-thumb { flex: 1; width: auto; }
}




.standard-page__hero{min-height:180px!important}/*TEMP5*/

/* ============================================================
   Business Address / Virtual Office page additions
   ============================================================ */
/* 3-up variant of the benefits row (the meeting-rooms row is a 5-up). */
.benefits-row--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .benefits-row--three { grid-template-columns: 1fr; } }

/* 6-up variant (3 x 2), used by the Day Passes "what's included" row. The base
   rules assume a single row, so two things need correcting: the vertical
   divider must not appear at the start of the second row, and the two rows need
   a horizontal divider between them. */
.benefits-row--six { grid-template-columns: repeat(3, 1fr); }
.benefits-row--six .benefit:nth-child(3n+1)::before { content: none; }
.benefits-row--six .benefit:nth-child(-n+3) { border-bottom: 1px solid #e8e8e8; }
/* The base row only colours icons 1-5, so a 6th would fall back to purple and
   break the purple/green/coral rhythm the two rows otherwise share. */
.benefits-row--six .benefit:nth-child(6) .benefit-ico { background: #fff0f0; color: #ff6666; }
@media (max-width: 980px) { .benefits-row--six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefits-row--six { grid-template-columns: 1fr; } }
/* Style native <select> in the lead form to match inputs/textarea. */
.request-form .field select {
  width: 100%;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text-heading);
  background: #fff;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.request-form .field select:focus { outline: none; border-color: var(--purple-hover); }
/* Image + text split (intro & workspace sections). */
.media-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.media-split > * { margin-block-start: 0; }
.media-split .ms-text > * { margin-block-start: 0; }
.media-split .ms-text .section-label { margin-bottom: 14px; }
.media-split .ms-text .section-title { margin-bottom: 16px; }
.media-split .ms-text p { color: var(--text-body); font-size: 17px; line-height: 1.7; }
/* Opt-in variant for a media-split whose text column carries several body
   paragraphs. The rule above zeroes block-start margins (the label/title rhythm
   comes from their own margin-bottom), which flattens multi-paragraph copy into
   one slab. This restores the gap between consecutive top-level paragraphs.
   The child combinator matters: without it this also hits the .room-tag
   paragraphs inside .ms-tags and staggers the chips. Scoped to a modifier so
   Day Passes, Modullo and Business Address keep their current spacing.
   Added 2026-08-19 for the corporate training landing page. */
.media-split--prose .ms-text > p + p { margin-block-start: 18px; }
/* A feature list dropped straight into a prose split needs the same gap as a
   following paragraph would get, or it collides with the copy above it. */
.media-split--prose .ms-text > p + ul, .media-split--prose .ms-text > ul { margin-block-start: 22px; }
.media-split .ms-media { margin-block-start: 0; }
.media-split .ms-media .wp-block-image { margin: 0; }
.media-split .ms-media img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 10px 30px rgba(35,35,35,.07); }
.media-split--reverse .ms-media { order: -1; }
/* Stretch the media column to the height of the copy beside it. */
.media-split--fill { align-items: stretch; }
.media-split--fill .ms-media { display: flex; }
.media-split--fill .ms-media .wp-block-image { flex: 1 1 auto; display: flex; margin: 0; }
.media-split--fill .ms-media img { height: 100%; width: 100%; object-fit: cover; }
.media-split--fill .ms-media .choice-card { height: 100%; }

@media (max-width: 860px) {
  /* Back to natural height once the split is one column, or a cover-fitted
     image stretches to whatever the copy above it happens to be. */
  .media-split--fill .ms-media img { height: auto; object-fit: contain; }
}
@media (max-width: 860px) {
  .media-split { grid-template-columns: 1fr; }
  .media-split--reverse .ms-media { order: 0; }
}

/* Media-split photo slider — a native core/gallery shown one photo at a time.
   Baseline (no JS) is a scroll-snap track, so it already swipes on touch;
   theme.js layers arrows and dots on top. Editors add or reorder photos in
   wp-admin as they would in any gallery. The rounded corners and shadow move
   from the individual images onto the track so the frame stays put while the
   photos slide inside it. The :not(#ms-gal) hooks match core's own
   :not(#individual-image) specificity trick — without them core wins. */
.media-split .ms-media { position: relative; }
.media-split .ms-media .ms-gallery.wp-block-gallery {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  border-radius: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  box-shadow: 0 10px 30px rgba(35,35,35,.07);
}
.media-split .ms-media .ms-gallery.wp-block-gallery::-webkit-scrollbar { display: none; }
.media-split .ms-media .ms-gallery > figure.wp-block-image:not(#ms-gal) {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  scroll-snap-align: center;
}
.media-split .ms-media .ms-gallery > figure.wp-block-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* Arrows and dots are injected by theme.js, and only when there are 2+ photos.
   No button chrome: just a hairline white chevron sitting on the photo. The
   button keeps a 44px tap target while the chevron itself stays small, and a
   drop-shadow carries it over the light parts of a photo. */
.ms-gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
  opacity: .85;
  transition: opacity .18s ease;
}
.ms-gal-nav::before {
  content: "";
  width: 11px;
  height: 11px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
}
.ms-gal-prev::before { transform: rotate(45deg); margin-left: 3px; }
.ms-gal-next::before { transform: rotate(-135deg); margin-right: 3px; }
.ms-gal-nav:hover { opacity: 1; }
.ms-gal-nav:focus-visible { outline: 2px solid #fff; outline-offset: -6px; border-radius: 4px; opacity: 1; }
.ms-gal-prev { left: 4px; }
.ms-gal-next { right: 4px; }
.ms-gal-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.ms-gal-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  cursor: pointer;
  transition: background .18s ease, width .18s ease;
}
.ms-gal-dot.is-active { width: 16px; border-radius: 3px; background: #fff; }
.ms-gal-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 860px) {
  .ms-gal-prev { left: 0; }
  .ms-gal-next { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .media-split .ms-media .ms-gallery.wp-block-gallery { scroll-behavior: auto; }
  .ms-gal-nav, .ms-gal-dot { transition: none; }
}

/* ============================================================
   Business Address — split hero (text left, rounded image card right).
   Contained to the page grid + rounded media to match site style.
   Replaces the shared purple hero on this page via the
   _supertree_hide_standard_hero meta (see functions.php + page.php).
   ============================================================ */
.ba-hero {
  background: #faf8ff;
  border-bottom: 1px solid #efeaf9;
}
.ba-hero__inner {
  max-width: var(--st-max-width);
  margin-inline: auto;
  /* Contained to the same 1200px rhythm as every other section.
     Top padding clears the fixed nav; inline padding matches .container. */
  padding: clamp(120px, 14vh, 164px) 80px clamp(64px, 9vh, 100px);
  display: grid;
  /* Roughly even columns (slight edge to the text) so the headline, copy and
     buttons never get squeezed; image stays a comfortable size, not dominant. */
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 4vw, 64px);
  align-items: stretch;
}
.ba-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ba-hero__eyebrow {
  display: block;
  margin: 0 0 14px;
  color: var(--st-purple);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ba-hero__title {
  margin: 0 0 20px;
  max-width: none;
  color: var(--st-text-heading);
  font-size: clamp(34px, 2.9vw, 44px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.5px;
  text-wrap: balance;
}
.ba-hero__sub {
  margin: 0 0 34px;
  max-width: 46ch;
  color: var(--st-text-body);
  text-wrap: pretty;
}
/* The font-size lives on a two-class selector on purpose. style.css has
   `.standard-page__content p, li { font-size: 1rem; line-height: 1.7 }`
   (specificity 0,1,1), which outranks a bare `.ba-hero__sub` (0,1,0) no matter
   where it sits in the cascade, so the declared size here was never applied.
   Worse, the root font-size is fluid (`html { font-size: 0.87vw }` in
   style.css), so that inherited 1rem resolved to ~12.5px at 1440px wide and the
   hero lead ended up smaller than the body copy further down the page.
   Explicit px, clamped so it eases down on narrow screens rather than sitting
   at 18px under a 26px title. Applies to every .ba-hero page: Day Passes,
   Business Address, Modullo and Corporate Training. Changed 2026-08-19. */
.ba-hero .ba-hero__sub {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.65;
}
.ba-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.ba-hero__media {
  position: relative;
  /* Stretches to the full height of the text column (align-items: stretch)
     so the image stays large; min-height guards short-copy cases. */
  min-height: 480px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(35, 35, 35, 0.10);
}
.ba-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 980px) {
  .ba-hero__inner { padding-inline: 40px; }
}
@media (max-width: 880px) {
  .ba-hero__inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: clamp(104px, 16vh, 130px) 22px 48px;
  }
  .ba-hero__text { padding-left: 0; }
  .ba-hero__eyebrow { font-size: 11px; letter-spacing: 1.4px; }
  .ba-hero__title { max-width: none; font-size: clamp(26px, 6.6vw, 40px); }
  .ba-hero__media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ============================================================
   Business Address — roadmap steps, included ticks, native-hero resets
   (moved here from a page-inline <style>; page-scoped via .steps--roadmap,
   #included, and the .ba-hero block classes so other pages are unaffected)
   ============================================================ */
.steps--roadmap .step-num { margin: 0; font-size: 34px; font-weight: 800; line-height: 1; color: inherit; font-feature-settings: "tnum"; }
.steps--roadmap .step-node::after { content: ""; position: absolute; top: 50%; right: -21px; width: 13px; height: 13px; border-top: 3px solid #b9a3f2; border-right: 3px solid #b9a3f2; border-radius: 2px; transform: translateY(-50%) rotate(45deg); z-index: 2; }
.steps--roadmap .step:last-child .step-node::after { content: none; }
@media (max-width: 820px) {
  .steps--roadmap .step-node::after { top: auto; bottom: -21px; left: 50%; right: auto; transform: translateX(-50%) rotate(135deg); }
}
#included .benefit-ico { background: #e7faf2; color: #22a173; }
/* Native-block hero: reset Gutenberg flow margins; let the wp:image fill the media cell. */
.ba-hero__inner > *, .ba-hero__text > * { margin-block-start: 0; }
.ba-hero__media .wp-block-image { margin: 0; }

/* ============================================================
   Modullo page (390) — highlight the Modullo row in the
   comparison table in brand purple. No page-wide accent change;
   eyebrows, price card and buttons keep the default purple.
   ============================================================ */
.page-id-390 .compare-table tbody tr.is-highlight { background: var(--st-purple-light); }
.page-id-390 .compare-table tbody tr.is-highlight .compare-room strong { color: var(--st-purple-bright); }
.page-id-390 .compare-table tbody tr.is-highlight .swatch { background: var(--st-purple); }
.page-id-390 .cmp-card.is-highlight { border-color: var(--st-purple); box-shadow: 0 10px 30px rgba(167,139,250,.18); }
.page-id-390 .cmp-card.is-highlight .swatch { background: var(--st-purple); }

/* =====================================================================
   Supertree KIDS Summer School page (.kids-page)
   Kids sub-brand campaign landing composed as native Gutenberg content
   (page slug kids-summer-school). Every rule is scoped under .kids-page:
   the page carries its own playful palette and must not leak styles into
   shared components, nor inherit theirs (hero/location/pricing/faq class
   names are kids- prefixed for that reason). Decorative icons render as
   CSS masks from assets/icons/, so lists and cards stay plain native
   blocks in the editor. The lead form posts through the shared
   [data-hs-form-api] handler in theme.js.
   ===================================================================== */

.kids-page {
  /* Supertree Kids palette, scoped so it never leaks to the main site */
  --purple: #a78bfa;
  --purple-dark: #8b5cf6;
  --deep-purple: #7c3aed;
  --ink: #2d1a52;
  --orange: #f9b872;
  --yellow: #f6d860;
  --blue: #5aa0e6;
  --mint: #86d8c8;
  --lilac: #e0b8f0;
  --periwinkle: #7d87f7;
  --cyan: #14c4d9;
  --coral: #ff6b6b;

  color: var(--ink);
  background: #fff;
  font-size: 16px;
}

/* Local reset: the source design owns all its margins explicitly. */
.kids-page :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
.kids-page ul { list-style: none; padding: 0; }
.kids-page img { max-width: 100%; height: auto; display: block; }
.kids-page a { text-decoration: none; }

/* Neutralize Gutenberg flow-layout auto margins inside kids grids/rows. */
.kids-page :is(.kids-hero-body, .kids-hero-text, .kids-hero-meta,
  .kids-about-split, .learn-grid, .gallery-grid, .accred-row,
  .cohorts-cards, .recognised-logos, .daily-cols, .daily-col, .weekly-grid,
  .day-card, .included-inner, .kids-location-inner, .kids-pricing-grid,
  .members, .kids-details-inner, .kids-details-items) > * {
  margin-block-start: 0;
}

/* Anchor target clears the fixed nav when CTAs jump to the form. */
.kids-page #register,
.kids-page #enquiry { scroll-margin-top: 110px; }

/* The kids-page group's own children (the page sections) sit outside the
   descendant neutralizer below; zero their injected block-gap margins so no
   white bands appear between full-bleed sections. */
.wp-block-group.kids-page > * { margin-block-start: 0; }

/* Remove the generic page bottom padding under the last kids section
   (both the content wrapper and the main template's 5rem). */
.standard-page__content:has(> .kids-page:last-child) { padding-bottom: 0; }
.standard-page--default:has(.standard-page__content > .kids-page:last-child) { padding-bottom: 0; }

/* CTA button: styles shared by plain anchors (.cta-button in html islands)
   and native Button blocks (.kids-cta wrapper class). Per the Gutenberg
   button rule the wrapper is reset and the __link is styled. */
.kids-page .wp-block-button.kids-cta { margin: 0; }
.kids-page .cta-button,
.kids-page .kids-cta .wp-block-button__link {
  display: inline-block;
  background: #fff;
  color: var(--deep-purple);
  padding: 18px 48px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 800;
  font-size: 17px;
  line-height: 120%;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.kids-page .cta-button:hover,
.kids-page .kids-cta .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.kids-page .cta-button.purple,
.kids-page .kids-cta--purple .wp-block-button__link {
  background: var(--purple);
  color: #fff;
}
.kids-page .cta-button.purple:hover,
.kids-page .kids-cta--purple .wp-block-button__link:hover {
  background: var(--purple-dark);
}

/* Generic centered section header */
.kids-page .section-header { text-align: center; margin-bottom: 48px; }
.kids-page .section-header h2 {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: 12px;
}
.kids-page .section-header p {
  font-size: 17px;
  color: #555;
  max-width: 640px;
  margin: 0 auto;
  line-height: 160%;
}

/* ---------- HERO ---------- */
.kids-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 120px 80px 56px;
  overflow: hidden;
  background: linear-gradient(135deg, #6d4cc4 0%, #7d87f7 45%, #14c4d9 100%);
  background-size: 220% 220%;
  animation: kidsHeroGradient 20s ease-in-out infinite;
}
@keyframes kidsHeroGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Playful floating shapes (decorative html island) */
.kids-hero-shapes i {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  display: block;
}
.kids-hero-shapes i:nth-child(1) { width: 180px; height: 180px; background: var(--coral);  opacity: 0.55; top: 12%;    right: 14%; animation: kidsFloaty 11s ease-in-out infinite; }
.kids-hero-shapes i:nth-child(2) { width: 110px; height: 110px; background: var(--yellow); opacity: 0.5;  bottom: 22%; right: 6%;  animation: kidsFloaty 9s  ease-in-out infinite 0.8s; }
.kids-hero-shapes i:nth-child(3) { width: 80px;  height: 80px;  background: var(--mint);   opacity: 0.5;  top: 30%;    left: 4%;   animation: kidsFloaty 8s  ease-in-out infinite 0.4s; }
.kids-hero-shapes i:nth-child(4) { width: 140px; height: 140px; background: var(--lilac);  opacity: 0.45; bottom: 14%; left: 8%;   animation: kidsFloatAlt 13s ease-in-out infinite 0.2s; }
.kids-hero-shapes i:nth-child(5) { width: 60px;  height: 60px;  background: #ffffff;       opacity: 0.35; top: 22%;    right: 38%; animation: kidsFloatAlt 10s ease-in-out infinite 1.2s; }
@keyframes kidsFloaty {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(14px, -26px) scale(1.06); }
}
@keyframes kidsFloatAlt {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-18px, 20px) scale(0.94); }
}

/* Hero entrance */
@keyframes kidsFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kids-hero-text > *, .kids-hero-form-card {
  animation: kidsFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.kids-hero-text > *:nth-child(1) { animation-delay: 0.10s; }
.kids-hero-text > *:nth-child(2) { animation-delay: 0.18s; }
.kids-hero-text > *:nth-child(3) { animation-delay: 0.26s; }
.kids-hero-text > *:nth-child(4) { animation-delay: 0.34s; }
.kids-hero-text > *:nth-child(5) { animation-delay: 0.42s; }
.kids-hero-text > *:nth-child(6) { animation-delay: 0.50s; }
.kids-hero-text > *:nth-child(7) { animation-delay: 0.58s; }
.kids-hero-form-card { animation-delay: 0.40s; }
@media (prefers-reduced-motion: reduce) {
  .kids-hero, .kids-hero-shapes i, .kids-hero-text > *, .kids-hero-form-card { animation: none !important; }
}

.kids-hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 7px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  pointer-events: none;
  backdrop-filter: blur(2px);
  margin-bottom: 18px;
}

.kids-hero-body {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 40px;
  max-width: 1100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.kids-hero-text { flex: 1; max-width: 580px; }

.kids-hero-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.kids-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.kids-hero-meta-item::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: #fff;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.kids-hero-meta-item.km-dates::before { -webkit-mask-image: url(assets/icons/calendar.svg); mask-image: url(assets/icons/calendar.svg); }
.kids-hero-meta-item.km-place::before { -webkit-mask-image: url(assets/icons/map-pin.svg); mask-image: url(assets/icons/map-pin.svg); }
.kids-hero-meta-item.km-ages::before  { -webkit-mask-image: url(assets/icons/users.svg); mask-image: url(assets/icons/users.svg); }

.kids-page .seats-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--coral);
  color: #fff;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.kids-page .seats-badge::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: #fff;
  -webkit-mask: url(assets/icons/users.svg) center / contain no-repeat;
  mask: url(assets/icons/users.svg) center / contain no-repeat;
}

.kids-hero h1 {
  font-size: 44px !important;
  font-weight: 800 !important;
  line-height: 118% !important;
  color: #fff !important;
  margin-bottom: 16px !important;
}
.kids-hero-sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 32px;
}

.kids-page .delivered-by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.kids-page .delivered-by .db-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.2px;
}
.kids-page .delivered-by figure.db-logo img { height: 44px; width: auto; }

/* Hero form card */
.kids-hero-form-card {
  background: #fff;
  border-radius: 24px;
  padding: 26px 28px;
  width: 560px;
  flex-shrink: 0;
  box-shadow: 0 20px 60px rgba(45, 26, 82, 0.35);
}
.kids-hero-form-card h3 {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
  text-align: center;
}
.kids-hero-form-card .form-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 18px;
  text-align: center;
}
.kids-hero-form-card .form-note {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin-top: 12px;
  line-height: 150%;
}

/* Custom lead form (posts via the shared data-hs-form-api handler) */
.kids-page .lp-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.kids-page .lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kids-page .lp-field { display: flex; flex-direction: column; gap: 6px; }
.kids-page .lp-field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.kids-page .lp-field label .req { color: var(--coral); margin-left: 2px; }
.kids-page .lp-field input,
.kids-page .lp-field textarea,
.kids-page .lp-field select {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #f7f5ff;
  border: 1.5px solid #ece8fb;
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.kids-page .lp-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.kids-page .lp-field input::placeholder { color: #b3aec6; }
.kids-page .lp-field input:focus,
.kids-page .lp-field select:focus {
  outline: none;
  border-color: var(--purple);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.18);
}
.kids-page .lp-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: #666; line-height: 150%; cursor: pointer;
}
.kids-page .lp-consent input {
  margin-top: 1px; width: 18px; height: 18px; flex-shrink: 0;
  accent-color: var(--deep-purple); cursor: pointer;
}
.kids-page .lp-consent a { color: var(--deep-purple); }
.kids-page .lp-submit {
  margin-top: 4px;
  background: var(--purple);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  border: none;
  border-radius: 50px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.28);
}
.kids-page .lp-submit:hover { background: var(--purple-dark); transform: translateY(-2px); }
.kids-page .lp-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.kids-page .lp-form .form-status { display: none; border-radius: 10px; padding: 11px 14px; font-size: 13.5px; line-height: 150%; font-weight: 600; }
.kids-page .lp-form .form-status.is-success { display: block; background: #e2f7f1; color: #14735f; }
.kids-page .lp-form .form-status.is-error { display: block; background: #ffe9e9; color: #c0392b; font-weight: 400; }

/* ---------- ACCREDITATIONS (trust bar) ---------- */
.kids-page .accreditations {
  padding: 40px 80px;
  background: #f8f7ff;
  border-bottom: 1px solid #ece8fb;
}
.kids-page .accred-caption {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8a82a8;
  margin-bottom: 24px;
}
.kids-page .accred-row {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 52px;
  flex-wrap: wrap;
}
.kids-page figure.accred-item img { height: 78px; width: auto; object-fit: contain; }
.kids-page figure.accred-item.wide img { height: 44px; }

/* ---------- COHORTS ---------- */
.kids-page .cohorts { padding: 56px 80px; background: #f8f7ff; }
.kids-page .cohorts-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.kids-page .cohorts-caption {
  display: block;
  font-size: 13px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--deep-purple); margin-bottom: 22px;
}
.kids-page .cohorts-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.kids-page .cohort-card {
  background: #fff;
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 6px 24px rgba(45, 26, 82, 0.08);
  border-top: 6px solid var(--periwinkle);
}
.kids-page .cohort-card:nth-child(2) { border-top-color: var(--mint); }
.kids-page .cohort-tag {
  display: inline-block;
  background: #ece1fb; color: var(--deep-purple);
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 5px 16px; border-radius: 50px; margin-bottom: 14px;
}
.kids-page .cohort-dates { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: 6px; }
.kids-page .cohort-note { font-size: 15px; color: #666; }
.kids-page .cohorts-both { margin-top: 24px; font-size: 16px; color: #444; }
.kids-page .cohorts-both strong { color: var(--deep-purple); }

/* ---------- ABOUT ---------- */
.kids-about { padding: 80px 80px; background: #fff; }
.kids-about-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.kids-about-inner h2 {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: 20px;
}
.kids-about-inner > p {
  font-size: 17px;
  color: #555;
  line-height: 170%;
  margin-bottom: 16px;
}
.kids-about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
  text-align: left;
}
.kids-page .ab-card {
  border-radius: 22px;
  padding: 30px 28px;
  box-shadow: 0 10px 30px rgba(45, 26, 82, 0.10);
}
.kids-page .ab-card.kids    { background: linear-gradient(145deg, #ffe27a 0%, #ff9ec4 100%); }
.kids-page .ab-card.parents { background: linear-gradient(145deg, #9be6c2 0%, #5fc7d6 100%); }
.kids-page figure.ab-card-icon { width: 66px; height: 66px; margin-bottom: 16px; }
.kids-page figure.ab-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(45, 26, 82, 0.18));
}
.kids-page .ab-card h3 {
  font-size: 19px !important;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}
.kids-page .ab-card p { font-size: 15px; color: #3a2b54; line-height: 165%; }

/* ---------- LEARN ---------- */
.kids-page .learn { padding: 80px 80px; background: #f8f7ff; }
.kids-page .learn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.kids-page .kids-learn-card {
  background: #fff;
  border-radius: 20px;
  padding: 34px 28px;
  box-shadow: 0 2px 16px rgba(45, 26, 82, 0.06);
  transition: transform 0.2s;
}
.kids-page .kids-learn-card:hover { transform: translateY(-4px); }
.kids-page .learn-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  margin-bottom: 20px;
  position: relative;
}
.kids-page .learn-icon::before {
  content: "";
  position: absolute;
  inset: 15px;
  background: #fff;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.kids-page .learn-icon.i-coins::before    { -webkit-mask-image: url(assets/icons/coins.svg); mask-image: url(assets/icons/coins.svg); }
.kids-page .learn-icon.i-bulb::before     { -webkit-mask-image: url(assets/icons/lightbulb.svg); mask-image: url(assets/icons/lightbulb.svg); }
.kids-page .learn-icon.i-message::before  { -webkit-mask-image: url(assets/icons/message-circle.svg); mask-image: url(assets/icons/message-circle.svg); }
.kids-page .learn-icon.i-idea::before     { -webkit-mask-image: url(assets/icons/idea-lamp.svg); mask-image: url(assets/icons/idea-lamp.svg); }
.kids-page .learn-icon.i-users::before    { -webkit-mask-image: url(assets/icons/users.svg); mask-image: url(assets/icons/users.svg); }
.kids-page .learn-icon.i-badge::before    { -webkit-mask-image: url(assets/icons/badge-check.svg); mask-image: url(assets/icons/badge-check.svg); }
.kids-page .learn-icon.i-globe::before    { -webkit-mask-image: url(assets/icons/globe.svg); mask-image: url(assets/icons/globe.svg); }
.kids-page .learn-icon.i-star::before     { -webkit-mask-image: url(assets/icons/star.svg); mask-image: url(assets/icons/star.svg); }
.kids-page .kids-learn-card h3 {
  font-size: 18px !important;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 135%;
}
.kids-page .kids-learn-card p { font-size: 15px; color: #666; line-height: 160%; }
.kids-page .ic-orange { background: var(--orange); }
.kids-page .ic-blue { background: var(--blue); }
.kids-page .ic-coral { background: var(--coral); }
.kids-page .ic-mint { background: #3dbfa8; }
.kids-page .ic-periwinkle { background: var(--periwinkle); }
.kids-page .ic-purple { background: var(--purple); }
.kids-page .ic-cyan { background: var(--cyan); }

/* "Ready to join?" gradient card closing the learn grid */
.kids-page .kids-learn-card.kids-learn-card--cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: linear-gradient(150deg, var(--purple), var(--periwinkle));
}
.kids-page .kids-learn-card--cta h3 { color: #fff; font-size: 20px !important; margin-bottom: 6px; }
.kids-page .kids-learn-card--cta p { color: rgba(255, 255, 255, 0.92); margin-bottom: 18px; }
.kids-page .kids-learn-card--cta .kids-cta .wp-block-button__link,
.kids-page .kids-learn-card--cta .cta-button { padding: 14px 32px; font-size: 15px; }

/* ---------- GALLERY ---------- */
.kids-page .gallery { padding: 80px 80px; background: #fff; }
.kids-page .gallery-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.kids-page .gallery-grid figure {
  overflow: hidden;
  border-radius: 22px;
  margin: 0;
  height: 320px;
}
.kids-page .gallery-grid figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}
.kids-page .gallery-grid figure:hover img { transform: scale(1.04); }

/* ---------- DAILY STRUCTURE ---------- */
.kids-page .daily {
  padding: 80px 80px;
  background: linear-gradient(150deg, #7d87f7 0%, #a78bfa 60%, #b794f6 100%);
  position: relative;
  overflow: hidden;
}
.kids-page .daily-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 28px;
}
.kids-page .daily-logo figure.dl-supertree img { height: 32px; width: auto; }
.kids-page .daily-logo figure.dl-kidprenor img { height: 34px; width: auto; }
.kids-page .daily-logo .dl-x { color: rgba(255, 255, 255, 0.7); font-size: 18px; font-weight: 700; }
.kids-page .daily-card {
  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
  border-radius: 32px;
  padding: 44px 44px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.kids-page .daily-card h2 {
  font-size: 30px !important;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 6px;
}
.kids-page .daily-card .daily-sub {
  font-size: 15px;
  color: #777;
  font-style: italic;
  margin-bottom: 32px;
}
.kids-page .daily-cols {
  display: grid;
  grid-template-columns: 1fr 0.85fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.kids-page .daily-col { display: flex; flex-direction: column; gap: 16px; }
.kids-page .daily-block {
  flex: 1;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 5px solid transparent;
}
.kids-page .daily-block .dt,
.kids-page .daily-col.lunch .dt {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.kids-page .daily-block .dd { font-size: 14px; color: #4a4a5a; line-height: 140%; }
.kids-page .daily-block.c-orange     { background: #ffe9d2; border-left-color: var(--orange); }
.kids-page .daily-block.c-yellow     { background: #fbf0bd; border-left-color: #e9c84a; }
.kids-page .daily-block.c-mint       { background: #d4f1ea; border-left-color: var(--mint); }
.kids-page .daily-block.c-periwinkle { background: #e1e4fb; border-left-color: var(--periwinkle); }
.kids-page .daily-block.c-blue       { background: #dceafa; border-left-color: var(--blue); }
.kids-page .daily-block.c-coral      { background: #ffdedb; border-left-color: var(--coral); }
.kids-page .daily-block.c-purple     { background: #ece1fb; border-left-color: var(--purple); }
.kids-page .daily-block.c-cyan       { background: #d2f0f4; border-left-color: var(--cyan); }
.kids-page .daily-col.lunch {
  background: linear-gradient(150deg, var(--purple), var(--periwinkle));
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px 18px;
}
.kids-page .daily-col.lunch::before {
  content: "";
  width: 42px;
  height: 42px;
  background: #fff;
  opacity: 0.95;
  margin-bottom: 12px;
  -webkit-mask: url(assets/icons/utensils.svg) center / contain no-repeat;
  mask: url(assets/icons/utensils.svg) center / contain no-repeat;
}
.kids-page .daily-col.lunch .dt {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  padding: 6px 18px;
  border-radius: 50px;
  font-size: 15px;
  margin-bottom: 10px;
  line-height: 130%;
}
.kids-page .daily-col.lunch .dd { font-size: 16px; font-weight: 700; color: #fff; }
.kids-page .daily-note {
  max-width: 1080px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- WEEKLY PROGRAM ---------- */
.kids-page .weekly { padding: 80px 80px; background: #fff; }
.kids-page .weekly-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.kids-page .day-card {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  background: #f8f7ff;
  border-radius: 20px;
  padding: 28px 30px;
  border-left: 6px solid var(--purple);
}
.kids-page .day-card:nth-child(1) { border-left-color: var(--orange); }
.kids-page .day-card:nth-child(2) { border-left-color: var(--periwinkle); }
.kids-page .day-card:nth-child(3) { border-left-color: var(--mint); }
.kids-page .day-card:nth-child(4) { border-left-color: var(--blue); }
.kids-page .day-card:nth-child(5) { border-left-color: var(--coral); }
.kids-page .day-num {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(45, 26, 82, 0.08);
}
.kids-page .day-num .lab { font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.5px; }
.kids-page .day-num .no { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.kids-page .day-content h3 {
  font-size: 20px !important;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}
.kids-page .day-content .day-tag {
  font-size: 14px;
  font-weight: 700;
  color: var(--deep-purple);
  margin-bottom: 8px;
}
.kids-page .day-content p { font-size: 15px; color: #555; line-height: 165%; }
.kids-page .day-content .outcome {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- RECOGNISED BY ---------- */
.kids-page .recognised {
  padding: 64px 80px;
  background: linear-gradient(135deg, #6d4cc4 0%, #7d87f7 55%, #14c4d9 100%);
  text-align: center;
}
.kids-page .recognised-caption {
  display: block;
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.92); margin-bottom: 22px;
}
.kids-page .recognised-panel {
  max-width: 820px; margin: 0 auto;
  background: #fff;
  border-radius: 24px;
  padding: 34px 40px;
  box-shadow: 0 20px 50px rgba(45, 26, 82, 0.30);
}
.kids-page .recognised-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 44px;
  align-items: center;
  justify-items: center;
}
.kids-page .recognised-logos figure img {
  max-height: 44px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.kids-page .recognised-logos figure.tall img { max-height: 62px; }

/* ---------- INCLUDED + SUPER-KIT ---------- */
.kids-page .included { padding: 80px 80px; background: #f8f7ff; }
.kids-page .included-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}
.kids-page .included-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  color: #444;
  font-weight: 500;
  padding: 11px 0;
  border-bottom: 1px solid #ece8fb;
  margin: 0;
}
.kids-page .included-list li::before {
  content: "";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--deep-purple);
  -webkit-mask: url(assets/icons/check.svg) center / contain no-repeat;
  mask: url(assets/icons/check.svg) center / contain no-repeat;
}
.kids-page .superkit {
  position: relative;
  background: linear-gradient(150deg, var(--periwinkle), var(--purple));
  border-radius: 24px;
  padding: 34px 32px;
  color: #fff;
}
.kids-page figure.superkit-gift {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 96px;
  height: 96px;
  pointer-events: none;
}
.kids-page figure.superkit-gift img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(45, 26, 82, 0.28));
}
.kids-page .superkit .kit-badge {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.kids-page .superkit h3 { font-size: 22px !important; font-weight: 800; color: #fff; margin-bottom: 6px; padding-right: 88px; }
.kids-page .superkit > p { font-size: 15px; color: rgba(255, 255, 255, 0.9); line-height: 160%; margin-bottom: 18px; }
.kids-page .superkit li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500; padding: 8px 0; margin: 0;
}
.kids-page .superkit li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--yellow);
  -webkit-mask: url(assets/icons/check.svg) center / contain no-repeat;
  mask: url(assets/icons/check.svg) center / contain no-repeat;
}

/* ---------- LOCATION ---------- */
.kids-location { padding: 80px 80px; background: #fff; }
.kids-location-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: center;
}
.kids-page figure.kids-location-photo {
  width: 480px;
  height: 340px;
  border-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
}
.kids-page figure.kids-location-photo img { width: 100%; height: 100%; object-fit: cover; }
.kids-location-info { flex: 1; }
.kids-location-label {
  font-size: 13px; font-weight: 800; color: var(--purple);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.kids-location h2 {
  font-size: 32px !important; font-weight: 800 !important;
  color: var(--ink) !important; margin-bottom: 16px; line-height: 130%;
}
.kids-location-info > p { font-size: 16px; color: #555; line-height: 170%; margin-bottom: 22px; }
.kids-location-details { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.kids-location-details li {
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; color: #555; font-weight: 500; margin: 0;
}
.kids-location-details li::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--deep-purple);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.kids-location-details li.kl-map::before   { -webkit-mask-image: url(assets/icons/map-pin.svg); mask-image: url(assets/icons/map-pin.svg); }
.kids-location-details li.kl-clock::before { -webkit-mask-image: url(assets/icons/clock.svg); mask-image: url(assets/icons/clock.svg); }
.kids-location-details li.kl-cal::before   { -webkit-mask-image: url(assets/icons/calendar.svg); mask-image: url(assets/icons/calendar.svg); }
.kids-location .kids-cta .wp-block-button__link { font-size: 15px; padding: 14px 36px; }

/* ---------- PRICING ---------- */
.kids-pricing { padding: 80px 80px; background: #f8f7ff; }
.kids-pricing-grid {
  max-width: 940px;
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.kids-price-card {
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(45, 26, 82, 0.06);
  border-top: 6px solid var(--mint);
}
.kids-price-card.en { border-top-color: var(--coral); }
.kids-price-card .pc-lang {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--deep-purple); margin-bottom: 10px;
}
.kids-price-card .pc-price { font-size: 40px; font-weight: 800; color: var(--ink); line-height: 1; }
.kids-price-card .pc-price span { font-size: 18px; font-weight: 600; color: #888; }
.kids-price-card .pc-meals { font-size: 15px; color: #666; margin-top: 10px; }
.kids-page .members {
  max-width: 940px;
  margin: 0 auto;
  background: linear-gradient(150deg, var(--deep-purple), var(--periwinkle));
  border-radius: 24px;
  padding: 32px 36px;
  color: #fff;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.kids-page .members .m-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.kids-page .members ul { display: flex; flex-direction: column; gap: 6px; }
.kids-page .members li { font-size: 15px; display: flex; align-items: center; gap: 8px; margin: 0; }
.kids-page .members li::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: var(--yellow);
  -webkit-mask: url(assets/icons/check.svg) center / contain no-repeat;
  mask: url(assets/icons/check.svg) center / contain no-repeat;
}
.kids-page .members .m-note { font-size: 14px; color: rgba(255, 255, 255, 0.85); margin-top: 10px; }

/* ---------- FAQ (native core/details) ---------- */
.kids-faq { padding: 80px 80px; background: #fff; }
.kids-faq-inner { max-width: 800px; margin: 0 auto; }
.kids-page details.kids-faq-item { border-bottom: 1px solid #ece8fb; }
.kids-page .kids-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  transition: color 0.15s ease;
}
.kids-page .kids-faq-item summary::-webkit-details-marker { display: none; }
.kids-page .kids-faq-item summary:hover { color: var(--deep-purple); }
.kids-page .kids-faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--purple);
  -webkit-mask: url(assets/icons/chevron-down.svg) center / contain no-repeat;
  mask: url(assets/icons/chevron-down.svg) center / contain no-repeat;
  transition: transform 0.25s ease;
}
.kids-page .kids-faq-item[open] summary::after { transform: rotate(180deg); }
.kids-page .kids-faq-item[open] summary { color: var(--deep-purple); }
.kids-page .kids-faq-item > :not(summary) {
  padding: 0 0 22px;
  font-size: 15px;
  color: #555;
  line-height: 165%;
  margin: 0;
}

/* ---------- DETAILS BAR ---------- */
.kids-details-bar { padding: 56px 80px; background: linear-gradient(135deg, #6d4cc4 0%, #7d87f7 100%); }
.kids-details-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.kids-details-items { display: flex; gap: 44px; flex-wrap: wrap; }
.kids-page .detail-item { text-align: center; }
.kids-page .detail-item .detail-label {
  font-size: 12px; color: rgba(255, 255, 255, 0.7); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}
.kids-page .detail-item .detail-value { font-size: 18px; color: #fff; font-weight: 700; }
.kids-page .detail-item .detail-value.small { font-size: 15px; line-height: 1.4; }
.kids-details-bar .kids-cta .wp-block-button__link { padding: 16px 40px; font-size: 16px; }

/* ---------- STICKY MOBILE CTA ---------- */
.kids-sticky-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: #fff; padding: 12px 20px;
  box-shadow: 0 -4px 20px rgba(45, 26, 82, 0.14); text-align: center;
}
.kids-sticky-cta .cta-button { width: 100%; display: block; padding: 16px; font-size: 16px; }
@media (max-width: 968px) {
  .kids-sticky-cta { display: block; }
  /* Keep the site footer readable above the fixed CTA bar. */
  body:has(.kids-sticky-cta) .footer { padding-bottom: 96px; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 968px) {
  .kids-hero { padding: 110px 40px 40px; }
  .kids-hero-body { flex-direction: column; align-items: stretch; gap: 36px; padding-bottom: 40px; }
  .kids-hero-text { max-width: 100%; }
  .kids-hero h1 { font-size: 36px !important; }
  .kids-hero-form-card { width: 100%; max-width: 560px; margin: 0 auto; }
  .kids-page :is(.kids-about, .learn, .gallery, .daily, .weekly, .included, .kids-location, .kids-pricing, .kids-faq) { padding: 60px 40px; }
  .kids-page :is(.cohorts, .recognised) { padding: 48px 40px; }
  .kids-page .cohorts-cards { grid-template-columns: 1fr; }
  .kids-page .accreditations { padding: 32px 40px; }
  .kids-page .accred-row { gap: 36px; }
  .kids-page figure.accred-item img { height: 64px; }
  .kids-page figure.accred-item.wide img { height: 38px; }
  .kids-page .learn-grid { grid-template-columns: 1fr; max-width: 460px; }
  .kids-page .gallery-grid { gap: 14px; }
  .kids-page .gallery-grid figure { height: 240px; }
  .kids-about-split { grid-template-columns: 1fr; }
  .kids-page .daily-card { padding: 32px 26px; }
  .kids-page .daily-cols { grid-template-columns: 1fr; }
  .kids-page .daily-col.lunch { padding: 22px; }
  .kids-page .included-inner { grid-template-columns: 1fr; }
  .kids-location-inner { flex-direction: column; text-align: center; }
  .kids-page figure.kids-location-photo { width: 100%; max-width: 480px; height: 260px; margin: 0 auto; }
  .kids-location-details { align-items: center; }
  .kids-location-details li { text-align: left; }
  .kids-pricing-grid { grid-template-columns: 1fr; max-width: 460px; }
  .kids-page .members { flex-direction: column; text-align: center; }
  .kids-page .members ul { align-items: center; }
  .kids-details-bar { padding: 40px; }
  .kids-details-inner { flex-direction: column; text-align: center; }
  .kids-details-items { justify-content: center; gap: 28px; }
}

@media (max-width: 480px) {
  .kids-hero { padding: 96px 20px 32px; }
  .kids-hero-meta { justify-content: center; }
  .kids-hero h1 { font-size: 30px !important; text-align: center; }
  .kids-hero-sub { font-size: 16px; text-align: center; }
  .kids-hero-text { display: flex; flex-direction: column; align-items: center; }
  .kids-hero-form-card { padding: 22px 14px; }
  .kids-page :is(.kids-about, .learn, .gallery, .daily, .weekly, .included, .kids-location, .kids-pricing, .kids-faq) { padding: 48px 20px; }
  .kids-page :is(.cohorts, .recognised) { padding: 40px 20px; }
  .kids-page .recognised-panel { padding: 24px 20px; }
  .kids-page .recognised-logos { grid-template-columns: repeat(2, 1fr); gap: 24px 26px; }
  .kids-page .cohort-dates { font-size: 21px; }
  .kids-page .accreditations { padding: 28px 20px; }
  .kids-page .accred-row { gap: 26px; }
  .kids-page figure.accred-item img { height: 56px; }
  .kids-page figure.accred-item.wide img { height: 34px; }
  .kids-page .gallery-grid { grid-template-columns: 1fr; }
  .kids-page .gallery-grid figure { height: 240px; }
  .kids-page .section-header h2, .kids-about-inner h2, .kids-location h2 { font-size: 26px !important; }
  .kids-page .daily-card h2 { font-size: 24px !important; }
  .kids-page .day-card { flex-direction: column; gap: 16px; }
  .kids-details-bar { padding: 32px 20px; }
  .kids-details-items { gap: 22px; }
}

/* Kids page: Gutenberg flow-layout gap neutralizer. The source design sets
   every margin explicitly, so injected block gaps are always unwanted. */
.kids-page :where(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; }

/* Price line is two paragraphs (RichText drops bare spans), laid out inline. */
.kids-price-card .pc-line { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.kids-price-card .pc-per { font-size: 18px; font-weight: 600; color: #888; }

/* =====================================================================
   Supertree KIDS hub page (permanent /kids/ landing)
   Shares the .kids-page sub-brand scope and palette with the Summer
   School campaign page, but this page has no lead form, so it cannot
   reuse the campaign's hero (a space-between flex sized around the form
   card) or its centered .kids-about-inner (built for one short intro
   paragraph, not long-form copy). These components carry the same
   playful language for an editorial, text-heavy page: readable
   left-aligned prose columns, real styled lists, and photo pairings so
   no section is a bare wall of centered text.
   ===================================================================== */

/* ---------- SECTION BANDS ---------- */
.kids-page .kids-band { padding: 84px 80px; background: #fff; }
.kids-page .kids-band--tint { background: #f8f7ff; }
.kids-page .kids-band--grad {
  background: linear-gradient(135deg, #6d4cc4 0%, #7d87f7 55%, #14c4d9 100%);
}
.kids-page .kids-band-inner { max-width: 1100px; margin: 0 auto; }

/* Centered section intro. Caps the measure so headings and lead copy
   stay readable; body copy elsewhere is left-aligned in .kids-prose. */
.kids-page .kids-intro { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.kids-page .kids-intro:last-child { margin-bottom: 0; }
.kids-page .kids-eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--deep-purple); margin-bottom: 14px;
}
.kids-page .kids-band--grad .kids-eyebrow { color: rgba(255, 255, 255, 0.85); }
.kids-page .kids-intro h2 {
  font-size: 34px !important; font-weight: 800 !important;
  color: var(--ink) !important; line-height: 125%; margin-bottom: 14px;
}
.kids-page .kids-band--grad .kids-intro h2 { color: #fff !important; }
/* Subsection head (e.g. "Corporate and Community Partners"): the kids
   scope has no h3 default, so it would otherwise sit near body size. */
.kids-page .kids-intro h3 {
  font-size: 23px !important; font-weight: 800;
  color: var(--ink); line-height: 130%; margin-bottom: 10px;
}
.kids-page .kids-intro p { font-size: 17px; color: #555; line-height: 168%; }
.kids-page .kids-intro p + p { margin-top: 12px; }
.kids-page .kids-band--grad .kids-intro p { color: rgba(255, 255, 255, 0.92); }

/* ---------- HERO (hub variant) ---------- */
/* The campaign hero is full-viewport because it carries a tall form
   card. Without one it reads as a void, so the hub hero is sized by
   its content and balanced with a photo instead. */
.kids-page .kids-hero--hub { min-height: 0; padding: 140px 80px 88px; }
.kids-page .kids-hero--hub .kids-hero-body {
  align-items: center;
  gap: 60px;
  padding-top: 0;
}
.kids-page .kids-hero--hub .kids-hero-text { max-width: 560px; }
.kids-page .kids-hero--hub h1 { font-size: 60px !important; letter-spacing: -0.5px; }
.kids-page .kids-hero--hub .kids-hero-sub { font-size: 19px; max-width: 480px; }

/* Photo slot replacing the campaign form card. Slight rotation and a
   soft ring keep the playful register without a cropped-photo look. */
.kids-page figure.kids-hero-media {
  width: 460px;
  flex-shrink: 0;
  height: 400px;
  border-radius: 28px;
  overflow: hidden;
  margin: 0;
  transform: rotate(2deg);
  box-shadow: 0 24px 60px rgba(45, 26, 82, 0.34);
  border: 8px solid rgba(255, 255, 255, 0.9);
  animation: kidsFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.4s;
}
.kids-page figure.kids-hero-media img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .kids-page figure.kids-hero-media { animation: none !important; }
}

/* ---------- BUTTON ROWS ---------- */
/* Gutenberg's .wp-block-buttons is a full-width flex row starting at
   flex-start, so inside a centered section it lands at the section edge
   rather than under the text. Center it and allow wrapping. */
.kids-page .kids-btn-row.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 32px;
}
.kids-page .kids-hero .kids-btn-row.wp-block-buttons { justify-content: flex-start; }
/* Campaign CTAs are 18px/48px, sized for one button per row. These rows
   carry two or three, so they run at a smaller size to fit the measure
   without wrapping a lone button onto its own line. */
.kids-page .kids-btn-row .kids-cta .wp-block-button__link {
  padding: 15px 32px;
  font-size: 16px;
}

/* Outline variant: white CTAs on the near-white tint band vanish. */
.kids-page .kids-cta--outline .wp-block-button__link {
  background: transparent;
  color: var(--deep-purple);
  border: 2px solid var(--deep-purple);
  box-shadow: none;
}
.kids-page .kids-cta--outline .wp-block-button__link:hover {
  background: var(--deep-purple);
  color: #fff;
}
/* On any purple field the deep-purple outline disappears into the
   background, so both the hero and the gradient band invert it. */
.kids-page :is(.kids-band--grad, .kids-hero) .kids-cta--outline .wp-block-button__link {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.8);
}
.kids-page :is(.kids-band--grad, .kids-hero) .kids-cta--outline .wp-block-button__link:hover {
  background: #fff;
  color: var(--deep-purple);
}
/* Filled purple CTA: inherits the base .kids-cta--purple colour
   (var(--purple) #a78bfa / hover --purple-dark) so it matches the
   Summer School page's "Save Your Seat" buttons exactly. */

/* ---------- SPLIT: prose + photo ---------- */
.kids-page .kids-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}
.kids-page .kids-split--flip .kids-split-media { order: -1; }
.kids-page .kids-split-text h2 {
  font-size: 34px !important; font-weight: 800 !important;
  color: var(--ink) !important; line-height: 125%; margin-bottom: 18px;
}
/* Long-form copy: left-aligned, capped measure, real paragraph rhythm. */
.kids-page .kids-prose p {
  font-size: 16.5px;
  color: #555;
  line-height: 176%;
  max-width: 60ch;
}
.kids-page .kids-prose p + p { margin-top: 15px; }
.kids-page .kids-prose strong { color: var(--ink); font-weight: 700; }
.kids-page figure.kids-split-media {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  height: 420px;
  box-shadow: 0 18px 48px rgba(45, 26, 82, 0.16);
}
.kids-page figure.kids-split-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- STATEMENT CARDS (Vision / Mission) ---------- */
.kids-page .kids-statements { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.kids-page .kids-statement {
  border-radius: 24px;
  padding: 40px 38px;
  box-shadow: 0 12px 34px rgba(45, 26, 82, 0.12);
}
.kids-page .kids-statement--vision { background: linear-gradient(145deg, #ffe27a 0%, #ff9ec4 100%); }
.kids-page .kids-statement--mission { background: linear-gradient(145deg, #9be6c2 0%, #5fc7d6 100%); }
.kids-page .kids-statement .kids-statement-label {
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(45, 26, 82, 0.62); margin-bottom: 12px;
}
.kids-page .kids-statement h2 {
  font-size: 26px !important; font-weight: 800 !important;
  color: var(--ink) !important; line-height: 130%; margin-bottom: 14px;
}
.kids-page .kids-statement p { font-size: 15.5px; color: #3a2b54; line-height: 172%; }
.kids-page .kids-statement p + p { margin-top: 12px; }

/* ---------- SKILL CHIPS ---------- */
/* Seven items never fill a 3-up grid cleanly, so these wrap and center:
   the short final row reads as intentional rather than orphaned. */
.kids-page .kids-chip-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.kids-page .kids-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(33.333% - 11px);
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 2px 16px rgba(45, 26, 82, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kids-page .kids-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(45, 26, 82, 0.13);
}
.kids-page .kids-chip .learn-icon {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 0; flex-shrink: 0;
}
.kids-page .kids-chip .learn-icon::before { inset: 11px; }
.kids-page .kids-chip h3 {
  font-size: 15.5px !important;
  font-weight: 700;
  color: var(--ink);
  line-height: 140%;
  margin: 0;
}

/* ---------- CHECKLIST ---------- */
/* .kids-page strips list markers globally, so any <ul> left native reads
   as an undifferentiated text blob. Every list on this page uses this. */
.kids-page .kids-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.kids-page .kids-checklist li {
  position: relative;
  padding: 14px 20px 14px 52px;
  background: #fff;
  border-radius: 14px;
  font-size: 15.5px;
  line-height: 150%;
  color: var(--ink);
  box-shadow: 0 2px 12px rgba(45, 26, 82, 0.06);
}
.kids-page .kids-checklist li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mint);
  -webkit-mask: none;
  mask: none;
}
.kids-page .kids-checklist li::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 20px;
  width: 10px;
  height: 10px;
  background: #fff;
  -webkit-mask: url(assets/icons/check.svg) center / contain no-repeat;
  mask: url(assets/icons/check.svg) center / contain no-repeat;
}
.kids-page .kids-checklist--plain li { background: #f8f7ff; box-shadow: none; }

/* ---------- PULL QUOTE ---------- */
.kids-page .kids-pullquote {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 156%;
  color: var(--ink);
  padding: 30px 34px;
  border-radius: 22px;
  background: #fff;
  border: 2px dashed #ddd3f7;
}

/* ---------- PARTNER CARD (Kidprenor) ---------- */
/* The Kidprenor mark is a white knockout, so it needs a dark field. */
.kids-page .kids-partner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 44px;
  align-items: center;
  background: linear-gradient(140deg, #2d1a52 0%, #4c2f8f 60%, #6d4cc4 100%);
  border-radius: 26px;
  padding: 44px 48px;
  box-shadow: 0 18px 46px rgba(45, 26, 82, 0.26);
}
.kids-page .kids-partner-logo { display: flex; flex-direction: column; gap: 14px; }
.kids-page .kids-partner-logo .kids-partner-role {
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}
.kids-page figure.kids-partner-mark { margin: 0; }
.kids-page figure.kids-partner-mark img { height: 58px; width: auto; }
.kids-page .kids-partner-text h3 {
  font-size: 22px !important; font-weight: 800; color: #fff; margin-bottom: 12px;
}
.kids-page .kids-partner-text p {
  font-size: 16px; color: rgba(255, 255, 255, 0.86); line-height: 172%;
}

/* ---------- SUMMER SCHOOL PROMO ---------- */
/* The one conversion moment on an otherwise editorial page: a white card
   on the gradient band so it reads as the featured programme. */
.kids-page .kids-promo {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 26px 64px rgba(45, 26, 82, 0.3);
}
.kids-page figure.kids-promo-media { margin: 0; min-height: 100%; }
.kids-page figure.kids-promo-media img { width: 100%; height: 100%; object-fit: cover; min-height: 380px; }
.kids-page .kids-promo-body { padding: 44px 46px; }
.kids-page .kids-promo-body h2 {
  font-size: 30px !important; font-weight: 800 !important;
  color: var(--ink) !important; line-height: 126%; margin-bottom: 10px;
}
.kids-page .kids-promo-lead {
  font-size: 16.5px; font-weight: 700; color: var(--deep-purple);
  line-height: 155%; margin-bottom: 14px;
}
.kids-page .kids-promo-body > p { font-size: 15.5px; color: #555; line-height: 172%; }
/* Fixed 2x2 rather than wrapping flex: the date value is wide enough to
   push the fourth fact onto a row of its own. */
.kids-page .kids-promo-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin: 24px 0 4px;
  padding: 20px 0 0;
  border-top: 1px solid #ece8fb;
}
.kids-page .kids-promo-fact .fact-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #8a82a8; margin-bottom: 6px;
}
.kids-page .kids-promo-fact .fact-value {
  font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 138%;
}
.kids-page .kids-promo .kids-btn-row.wp-block-buttons { justify-content: flex-start; margin-top: 38px; }

/* ---------- GENERAL ENQUIRY FORM ---------- */
/* Reuses the canonical .request-grid / .form-card / .request-form pattern
   (see template-parts/tour-form.php) so this form behaves like every other
   Supertree lead form. Only the kids-scope collisions are corrected here. */
.kids-page .kids-enquiry { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.kids-page .kids-enquiry-text h2 {
  font-size: 34px !important; font-weight: 800 !important;
  color: var(--ink) !important; line-height: 125%; margin-bottom: 16px;
}
.kids-page .kids-enquiry-text > p { font-size: 16.5px; color: #555; line-height: 174%; }
.kids-page .kids-enquiry-text > p + p { margin-top: 13px; }
.kids-page .kids-enquiry-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 13px; }
.kids-page .kids-enquiry-list li {
  display: flex; gap: 11px; font-size: 16px; font-weight: 600; color: var(--ink);
}
.kids-page .kids-enquiry-list li::before { content: "\2192"; color: var(--deep-purple); font-weight: 800; }
/* Submit button matches the kids brand purple (same as the Summer School
   form's submit and this page's other filled CTAs). */
.kids-page .request-form button[type="submit"] { background: var(--purple); font-weight: 700; }
.kids-page .request-form button[type="submit"]:hover { background: var(--purple-dark); }
/* .kids-page zeroes p margins via :where(); .form-consent needs its own back. */
.kids-page .request-form .form-consent { margin-top: 14px; }
.kids-page .request-form .field label { color: var(--ink); }

/* ---------- RESPONSIVE (hub) ---------- */
@media (max-width: 1080px) {
  .kids-page .kids-chip { width: calc(50% - 8px); }
}
@media (max-width: 968px) {
  .kids-page .kids-band { padding: 60px 40px; }
  .kids-page .kids-hero--hub { padding: 120px 40px 60px; }
  .kids-page .kids-hero--hub h1 { font-size: 40px !important; }
  .kids-page .kids-hero--hub .kids-hero-body { flex-direction: column; gap: 40px; }
  .kids-page .kids-hero--hub .kids-hero-text { max-width: 100%; }
  .kids-page .kids-hero .kids-btn-row.wp-block-buttons { justify-content: center; }
  .kids-page figure.kids-hero-media {
    width: 100%; max-width: 460px; height: 300px; margin: 0 auto; transform: none;
  }
  .kids-page .kids-split { grid-template-columns: 1fr; gap: 34px; }
  .kids-page .kids-split--flip .kids-split-media { order: 0; }
  .kids-page .kids-prose p { max-width: 100%; }
  .kids-page figure.kids-split-media { height: 300px; }
  .kids-page .kids-statements { grid-template-columns: 1fr; }
  .kids-page .kids-partner { grid-template-columns: 1fr; gap: 26px; padding: 36px 32px; }
  .kids-page .kids-promo { grid-template-columns: 1fr; }
  .kids-page figure.kids-promo-media img { min-height: 260px; }
  .kids-page .kids-promo-body { padding: 34px 30px; }
  .kids-page .kids-promo .kids-btn-row.wp-block-buttons { justify-content: center; }
  .kids-page .kids-enquiry { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 620px) {
  .kids-page .kids-band { padding: 48px 20px; }
  .kids-page .kids-hero--hub { padding: 100px 20px 48px; }
  .kids-page .kids-hero--hub h1 { font-size: 32px !important; }
  .kids-page .kids-intro h2, .kids-page .kids-split-text h2 { font-size: 26px !important; }
  .kids-page .kids-chip { width: 100%; }
  .kids-page .kids-checklist { grid-template-columns: 1fr; }
  .kids-page .kids-statement { padding: 30px 26px; }
  .kids-page .kids-pullquote { font-size: 17px; padding: 24px 22px; }
  .kids-page .kids-promo-body { padding: 28px 22px; }
  .kids-page .kids-promo-facts { gap: 16px 20px; }
  /* Keeps "Discover Summer School 2026 →" on one line at 390px. */
  .kids-page .kids-btn-row .kids-cta .wp-block-button__link {
    padding: 14px 22px;
    font-size: 15px;
  }
}

/* ============================================================
   MODULLO PAGE — Jul 2026 refresh
   Mini-office positioning: includes checklist, photo gallery,
   "New" badge, and the fit-finder router block (cheaper option
   to the left, private offices to the right). The fit-finder is
   designed to be reused on every product page.
   ============================================================ */

/* "New" pill in the hero eyebrow */
/* Pill badge sitting inline before a hero eyebrow. `.hero-badge` is the shared
   name; `.mod-new` is Modullo's original page-prefixed one, kept as an alias so
   that page keeps working. Prefer .hero-badge on anything new. */
.mod-new, .hero-badge { display: inline-block; background: var(--purple-hover); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 50px; margin-right: 10px; vertical-align: middle; }

/* ---------- "Each Modullo includes" checklist ---------- */
.mod-includes { list-style: none; max-width: 860px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
/* Block flow (not flex) so inline spans like .mod-tip stay in the text run */
.mod-includes li { position: relative; display: block; background: #fff; border: 1px solid #ececf2; border-radius: 14px; padding: 16px 20px 16px 54px; font-size: 16px; line-height: 1.5; color: var(--text-heading); box-shadow: 0 2px 10px rgba(35,35,35,.04); }
.mod-includes li::before { content: "\2713"; position: absolute; left: 20px; top: 17px; width: 22px; height: 22px; border-radius: 50%; background: var(--purple-light, #ede9fe); color: var(--purple-hover); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }

/* Hover/focus tooltip on the Herman Miller chair line ("The Porsche of office furniture.") */
.mod-tip { position: relative; cursor: help; text-decoration: underline dotted; text-decoration-color: var(--purple-hover); text-underline-offset: 3px; }
.mod-tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); background: var(--bg-dark, #1a1a2e); color: #fff; font-size: 13px; font-style: italic; line-height: 1.4; padding: 8px 14px; border-radius: 10px; white-space: nowrap; box-shadow: 0 8px 24px rgba(35,35,35,.18); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 20; }
.mod-tip::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--bg-dark, #1a1a2e); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.mod-tip:hover::after, .mod-tip:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.mod-tip:hover::before, .mod-tip:focus::before { opacity: 1; }

/* Closing tagline in the "smarter alternative" band */
.mod-tagline { font-size: 19px; font-weight: 700; color: var(--text-heading); margin-top: 22px; text-wrap: balance; }

/* ---------- "Why Modullo" split: text left, "what you skip" card right ---------- */
.why-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: center; max-width: 980px; margin: 0 auto; }
.why-split > *, .why-text > * { margin-block-start: 0; }
.why-text .section-label { margin-bottom: 14px; }
.why-text .section-title { margin-bottom: 14px; }
.why-text > p { color: var(--text-body); font-size: 17px; line-height: 1.7; margin-bottom: 14px; }
.why-text .mod-tagline { font-size: 17px; color: var(--text-heading); margin: 2px 0 22px; }
.skip-card { background: #fff; border-radius: 20px; padding: 26px 30px; box-shadow: 0 6px 20px rgba(35,35,35,.06); }
.skip-head { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 10px; }
.skip-list { list-style: none; margin: 0 0 16px; padding: 0; }
.skip-list li { padding: 6px 0; font-size: 15px; color: #8a8899; text-decoration: line-through; text-decoration-color: var(--wps-coral, #ff6666); text-decoration-thickness: 2px; }
.skip-instead { border-top: 1px solid #e8e6ef; padding-top: 14px; margin: 0; font-size: 15px; font-weight: 700; color: var(--text-heading); }
.skip-instead::before { content: "\2713"; color: var(--wps-green-deep, #2bab80); font-weight: 800; margin-right: 8px; }
@media (max-width: 860px) { .why-split { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Fit-finder (price ladder router) ---------- */
/* Compact band: a slim signpost between sections, not a full content section.
   Both cards share one structure: h3, one-line blurb, price, link. */
.fitfinder.band { padding: clamp(24px, 3vw, 36px) 0; }
.fitfinder .band-head { margin-bottom: 16px; }
.fitfinder .band-head .section-title { font-size: clamp(20px, 2.4vw, 24px); }
.fitfinder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 980px; margin: 0 auto; }
.ff-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; padding: 24px 28px; box-shadow: 0 6px 20px rgba(35,35,35,.06); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.ff-card:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(35,35,35,.11); }
/* Margins tuned per line-height so the three gaps read optically equal (~14px) */
.ff-card h3 { margin: 0 0 9px; font-size: 16.5px; color: var(--text-heading); }
.ff-card p { margin: 0 0 7px; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.ff-price { font-weight: 700; color: var(--text-heading); }
.ff-link { font-weight: 700; font-size: 14px; color: var(--purple-hover); }
.ff-card:hover .ff-link { text-decoration: underline; text-underline-offset: 3px; }
/* The "go bigger" card reads premium: dark card, light text */
.ff-card--up { background: var(--bg-dark, #1a1a2e); }
.ff-card--up h3 { color: #fff; }
.ff-card--up p { color: rgba(255,255,255,.78); }
.ff-card--up .ff-price { color: #fff; }
.ff-card--up .ff-link { color: var(--purple, #a78bfa); }

@media (max-width: 768px) {
  .mod-includes { grid-template-columns: 1fr; }
  .fitfinder-grid { grid-template-columns: 1fr; }
  .ff-card { padding: 20px 24px; }
}

/* ============================================================
   Coworking Day Passes page additions
   ============================================================ */
/* Sticky mobile purchase bar. This is the shared, page-agnostic version of the
   older .kids-sticky-cta: KIDS scopes its .cta-button styling to .kids-page, so
   this one carries its own button rules and can be dropped on any page. */
.sticky-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: #fff; padding: 12px 20px;
  box-shadow: 0 -4px 20px rgba(45, 26, 82, 0.14); text-align: center;
}
.sticky-cta .cta-button {
  display: block; width: 100%; padding: 16px;
  background: var(--purple); color: #fff;
  border-radius: 50px; text-decoration: none;
  font-weight: 800; font-size: 16px; line-height: 120%;
  transition: background .2s ease;
}
.sticky-cta .cta-button:hover { background: var(--purple-hover); }

/* "Best for" tag block in a media-split text column. Without this the label sat
   flush against the paragraph above and read as one more line of body copy, so
   the pills looked detached from nothing in particular. A hairline rule plus
   real spacing makes it a deliberate block, and the pills get a little more
   room to breathe between themselves. */
.media-split .ms-text .ms-tags {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(26, 26, 46, .12);
}
.media-split .ms-text .ms-tags .section-label { margin-bottom: 16px; }
.media-split .ms-text .ms-tags .room-tags { gap: 10px; margin-bottom: 0; }
.media-split .ms-text .ms-tags .room-tag { background: #fff; padding: 8px 14px; font-size: 13.5px; }
/* White pills need a tinted ground when the band itself is white, otherwise
   they vanish and the row reads as oddly indented plain text. Seen on the
   conference page's "Recent events" list. 2026-08-19 */
.band--white .media-split .ms-text .ms-tags .room-tag { background: var(--bg-primary); }
@media (max-width: 968px) {
  .sticky-cta { display: block; }
  /* Keep the site footer readable above the fixed bar. */
  body:has(.sticky-cta) .footer { padding-bottom: 96px; }
}

/* ---------- Coworking desk memberships (2026-08-20) ----------
   Supports /coworking-desks-bucharest/: a two-product page (Hot Desk vs
   Dedicated Desk). All four blocks below are page-agnostic and reusable. */

/* Two pricing cards would otherwise stretch to half the 1200px container
   each. Cap the row so the pair reads as a comparison, not two banners. */
:is(.standard-page__content, .editor-styles-wrapper) .pricing-columns--two { max-width: 880px; margin-inline: auto; }
/* .pricing-card.featured adds a 3px top accent border that the plain card does
   not have, so its content starts 3px lower and every row in the pair is off by
   that much. Take the border back out of the padding. Scoped to this two-card
   row so the three-card rows elsewhere are untouched. */
:is(.standard-page__content, .editor-styles-wrapper) .pricing-columns--two .pricing-card.featured { padding-top: 39px; }
/* btn-outline carries a 1px border and btn-primary does not, so the two buttons
   differ in height by 2px and drag the "Best for" block above them out of line.
   Give the solid button the same border box, in its own colour. */
:is(.standard-page__content, .editor-styles-wrapper) .pricing-columns--two .btn-primary > .wp-block-button__link,
:is(.standard-page__content, .editor-styles-wrapper) .choice-card .btn-primary > .wp-block-button__link { border: 1px solid transparent; }

/* The "Best for:" line that closes each pricing card, above the button. */
:is(.standard-page__content, .editor-styles-wrapper) .pricing-best {
  margin: 18px 0 22px; padding-top: 16px; border-top: 1px solid #e8e8e8;
  font-size: 13px; line-height: 1.6; color: var(--st-text-muted, #6b6b76);
  /* Reserve two lines so the rule above "Best for" lands at the same height in
     every card of the row. The block is bottom-anchored, so without this a
     card whose copy wraps to one extra line pushes its own divider up and the
     row stops reading as a comparison. Keep the copy to two lines. */
  min-height: calc(1.6em * 2 + 16px);
}
:is(.standard-page__content, .editor-styles-wrapper) .pricing-best strong { color: var(--st-text-heading); }
/* Pin the "Best for" block and the button to the card bottom so a card with
   one fewer feature still lines its footer up with its neighbour. */
:is(.standard-page__content, .editor-styles-wrapper) .pricing-card .pricing-best { margin-top: auto; }
:is(.standard-page__content, .editor-styles-wrapper) .pricing-card .pricing-best + .wp-block-buttons { margin-top: 0; }

/* Feature matrix: features down the side, the two products across the top.
   .compare-table is the other shape (one product per ROW) and stays as is;
   this variant rides inside the same .compare-wrap shell, so the existing
   <=760px swap to .compare-cards works here for free. */
.spec-table thead th { text-align: center; }
.spec-table thead th:first-child { width: 34%; }
.spec-table tbody td { padding: 16px 22px; text-align: center; vertical-align: middle; }
.spec-table tbody td:first-child { text-align: left; font-weight: 600; color: var(--text-heading); white-space: normal; }
.spec-table .spec-price { font-size: 17px; font-weight: 700; color: var(--text-heading); }
.spec-table .spec-yes { font-weight: 700; color: #22a173; }
.spec-table .spec-no { color: var(--text-muted); }

/* Eight amenity cards: 4 x 2 rather than the 3-wide .benefits-row--six,
   so neither row is left with an orphan cell. */
.benefits-row--eight { grid-template-columns: repeat(4, 1fr); }
.benefits-row--eight .benefit:nth-child(4n+1)::before { content: none; }
.benefits-row--eight .benefit:nth-child(-n+4) { border-bottom: 1px solid #e8e8e8; }
.benefits-row--eight .benefit:nth-child(6) .benefit-ico { background: #fff0f0; color: #ff6666; }
.benefits-row--eight .benefit:nth-child(7) .benefit-ico { background: #f0ecff; color: var(--purple-hover); }
.benefits-row--eight .benefit:nth-child(8) .benefit-ico { background: #e7faf2; color: #22a173; }
@media (max-width: 1080px) { .benefits-row--eight { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefits-row--eight { grid-template-columns: 1fr; } }

/* Decision cards under the comparison table. The table answers "what is the
   difference"; these answer "which one am I". Each card takes the identity of
   its product (teal for Hot Desk, purple for Dedicated) so the two are told
   apart at a glance, and the purple one keeps the "Most complete" tag its
   pricing card already carries. */
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; margin-top: clamp(28px, 3.5vw, 44px); }
.choice-grid > * { margin-block-start: 0; }
.choice-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 34px 34px 30px; background: #fff; border: 1px solid #e8e8e8; border-top: 4px solid var(--accent, var(--purple-hover)); border-radius: 20px; box-shadow: 0 10px 30px rgba(35,35,35,.07); transition: transform .25s ease, box-shadow .25s ease; }
.choice-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(35,35,35,.11); }
.choice-card > * { margin-block-start: 0; }
.choice-card--hot { --accent: #22a173; --accent-soft: #e7faf2; }
.choice-card--dedicated { --accent: var(--purple-hover); --accent-soft: #f0ecff; background: linear-gradient(#faf8ff, #fff 220px); }
/* Private Offices page. Modullo carries the featured treatment because it is
   the option a visitor can actually take today; the Private Office card is
   deliberately muted to match its "availability queue" state. */
.choice-card--modullo { --accent: var(--purple-hover); --accent-soft: #f0ecff; background: linear-gradient(#faf8ff, #fff 220px); }
.choice-card--private { --accent: #5a5570; --accent-soft: #f2f1f6; }
.choice-ico { width: 52px; height: 52px; margin: 0 0 18px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.choice-ico .st-icon::before { width: 25px; height: 25px; }
.choice-tag { position: absolute; top: 20px; right: 22px; margin: 0; padding: 6px 13px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.choice-eyebrow { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.choice-card .choice-title { margin: 0 0 20px; font-size: clamp(21px, 1.7vw, 25px); font-weight: 700; line-height: 1.2; }
.choice-list { flex-grow: 1; margin: 0 0 26px; padding: 0; list-style: none; }
.choice-list li { position: relative; margin: 0 0 13px; padding-left: 30px; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.choice-list li:last-child { margin-bottom: 0; }
.choice-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft, #f0ecff); color: var(--accent, var(--purple-hover)); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.choice-card .wp-block-buttons { margin: auto 0 0; }
/* Scoped the same way .pricing-card is, so these beat Gutenberg's own
   .wp-block-buttons > .wp-block-button width rule and the pair of buy buttons
   matches the pricing cards directly above. */
:is(.standard-page__content, .editor-styles-wrapper) .choice-card .wp-block-button,
:is(.standard-page__content, .editor-styles-wrapper) .choice-card .wp-block-button__link { width: 100%; }
@media (max-width: 860px) {
  .choice-grid { grid-template-columns: 1fr; }
  .choice-card { padding: 28px 24px 26px; }
}

/* Step navigation: one band that answers both objections at once. "Too much
   commitment" points back down to Day & Flex Passes, "not enough space"
   points up to Modullo and Private Offices. */
.stepnav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }
.stepnav-card { display: flex; flex-direction: column; height: 100%; padding: 30px 32px; background: #fff; border: 1px solid #e8e8e8; border-radius: 20px; box-shadow: 0 10px 30px rgba(35,35,35,.07); transition: transform .25s ease, box-shadow .25s ease; }
.stepnav-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(35,35,35,.11); }
.stepnav-card > * { margin-block-start: 0; }
.stepnav-dir { align-self: flex-start; margin: 0 0 14px; padding: 6px 13px; border-radius: 999px; background: var(--bg-primary); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--purple-hover); }
.stepnav-card--up .stepnav-dir { background: #e7faf2; color: #22a173; }
.stepnav-title { margin: 0 0 10px; font-size: clamp(20px, 1.6vw, 23px); font-weight: 700; line-height: 1.25; color: var(--text-heading); }
.stepnav-desc { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--text-body); }
.stepnav-card .wp-block-buttons { margin: auto 0 0; }
@media (max-width: 860px) {
  .stepnav { grid-template-columns: 1fr; }
  .stepnav-card { padding: 26px 24px; }
  .stepnav-card .wp-block-buttons,
  .stepnav-card .wp-block-button,
  .stepnav-card .wp-block-button__link { width: 100%; }
}

/* ---------- Pass families inside the purchase band (2026-08-20) ----------
   The band now carries two product families under one H2: pay-as-you-go Day
   Passes and prepaid Flex Passes. Each family gets its own sub-head, so
   .band-head stays reserved for the band's single H2 and these sub-heads sit
   tighter above their own card row. */
.pass-group { scroll-margin-top: 112px; }
.pass-group + .pass-group { margin-top: clamp(48px, 5.5vw, 76px); }
.pass-group-head { max-width: 680px; margin: 0 auto 30px; text-align: center; }
.pass-group-head .section-label { margin-bottom: 10px; }
.pass-group-head .pass-group-title { margin: 0; font-size: clamp(23px, 2.6vw, 28px); font-weight: 700; color: var(--text-heading); }
.pass-group-head .section-sub { margin-top: 12px; font-size: 16px; line-height: 172%; color: var(--text-body); }

/* FLEX 50 and FLEX 100 are quoted per client, not sold online, so they get one
   full-width signpost under the Flex row instead of a fourth price card that
   would promise instant checkout. */
.flex-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 28px; padding: 26px 32px; background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(35,35,35,.06); }
.flex-more > * { margin-block-start: 0; }
.flex-more-text { flex: 1 1 460px; }
.flex-more-text > * { margin-block-start: 0; }
.flex-more-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--text-heading); }
.flex-more-desc { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-body); }
.flex-more .wp-block-buttons { margin: 0; flex: 0 0 auto; }

@media (max-width: 768px) {
  .flex-more { padding: 22px 24px; }
  .flex-more .wp-block-buttons,
  .flex-more .wp-block-button,
  .flex-more .wp-block-button__link { width: 100%; }
}

/* ---------- Private Offices: the two options as a photo-led card pair ----------
   2026-08-24, round 3. Replaces the two stacked full-width .option-block rows.

   Why the blocks shrank: the page stated the same facts three times. Five of
   Modullo's seven bullets (Wi-Fi, printing, coffee, lounge access, meeting
   rooms) were repeated by the comparison table directly below and again by the
   eight amenity tiles further down, and the Private Office list was the same
   story. Each card now carries only what is unique to its own product; the
   shared amenities stay in the amenities section, which already owns them.

   Deliberately NOT a .choice-card. The pair under the comparison table uses
   that component to answer "which one am I": text only, 4px accent top rule,
   small icon tile, one full-width button. These are the product showcase, so
   they lead with a media header, carry a numeral badge, an availability chip
   and two CTAs, and drop the top rule. The two sections must not read as the
   same component twice.

   Placed at the end of the file on purpose: these rules refine .choice-list
   and .avail-tag, which are declared earlier at the same specificity, and a
   later rule wins. See feedback_supertree_theme_css_specificity_traps. */
.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; align-items: stretch; }
.opt-grid > * { margin-block-start: 0; }

.opt-card {
  --accent: var(--purple-hover); --accent-soft: #f0ecff;
  position: relative; display: flex; flex-direction: column; height: 100%;
  scroll-margin-top: 112px; overflow: hidden;
  background: #fff; border: 1px solid #e8e8e8; border-radius: 22px;
  box-shadow: 0 14px 40px rgba(35,35,35,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.opt-card:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(35,35,35,.13); }
.opt-card > * { margin-block-start: 0; }
/* Modullo keeps the brand purple because it is the option a visitor can take
   today; the Private Office card is muted slate to match its queue state. */
.opt-card--modullo { --accent: var(--purple-hover); --accent-soft: #f0ecff; }
.opt-card--private { --accent: #5a5570; --accent-soft: #e9e6f1; }

/* Media header. Both cards use the same aspect ratio so the two bodies start
   at the same y whatever each one carries. */
.opt-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--accent-soft); }
.opt-media > * { margin: 0; }
.opt-media .wp-block-image { height: 100%; }
.opt-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.opt-card:hover .opt-media img { transform: scale(1.045); }

/* No-photo fallback, kept although no card uses it today: Sergey put the
   Everest room photo on card 02 as a stand-in on 2026-08-24, but a product
   card component needs a variant for the case where no usable shot exists.
   A pale rectangle beside a full-colour photograph reads as a missing image,
   measured against the Modullo shot rather than guessed: the tint has to carry
   real weight to balance it. Gradient + dot field + a floating tile reads as a
   designed panel; a flat #f2f1f6 box did not. */
.opt-media--glyph { display: grid; place-items: center; background: linear-gradient(155deg, #e9e6f2 0%, #dcd7ea 46%, #cbc5de 100%); }
.opt-media--glyph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(26,26,46,.13) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 22%, transparent 76%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 22%, transparent 76%);
}
.opt-glyph {
  position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 28px;
  display: grid; place-items: center; background: #fff; color: var(--accent);
  box-shadow: 0 12px 34px rgba(26,26,46,.14);
}
.opt-glyph .st-icon::before { width: 42px; height: 42px; }

.opt-num {
  position: absolute; z-index: 2; top: 16px; left: 16px; margin: 0;
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--accent); font-size: 15px; font-weight: 800; line-height: 1;
  box-shadow: 0 4px 16px rgba(26,26,46,.16);
}

.opt-body { display: flex; flex-direction: column; flex: 1; padding: 30px 32px 32px; }
.opt-body > * { margin-block-start: 0; }
.opt-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.opt-card .opt-title { margin: 0 0 12px; font-size: clamp(22px, 1.85vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--text-heading); }
.opt-promise { margin: 0 0 12px; font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--text-heading); }
.opt-desc { margin: 0 0 22px; font-size: 15px; line-height: 1.65; color: var(--text-body); }
/* Hairline above the fact list so the card separates "what it is" from "what
   you get" without another heading. */
.opt-body .choice-list { margin: 0 0 20px; padding-top: 20px; border-top: 1px solid #ebeaef; }
.opt-body .avail-tag { margin: 0 0 20px; align-self: flex-start; }
.opt-cta { margin: auto 0 0; display: grid; gap: 10px; }
/* .btn-outline carries a 1px border and .btn-primary does not, so stacked
   buttons rendered 41px and 43px tall. Same fix .choice-card already uses. */
.opt-cta .btn-primary > .wp-block-button__link { border: 1px solid transparent; }
/* Scoped the way .choice-card and .pricing-card are, so these beat Gutenberg's
   own .wp-block-buttons > .wp-block-button width rule. */
:is(.standard-page__content, .editor-styles-wrapper) .opt-cta .wp-block-button,
:is(.standard-page__content, .editor-styles-wrapper) .opt-cta .wp-block-button__link { width: 100%; }

@media (max-width: 900px) {
  .opt-grid { grid-template-columns: 1fr; gap: 22px; }
  .opt-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .opt-body { padding: 26px 22px 26px; }
  .opt-glyph { width: 82px; height: 82px; border-radius: 24px; }
  .opt-glyph .st-icon::before { width: 36px; height: 36px; }
}


/* ---------- Ambassador referral programme (/ambassador/) ----------
   Direction B, approved 2026-08-26. Headline left, the referral generator
   right in a navy card, both above the fold. Rewards get their own band where
   the three figures finally read as three different things. Weights follow the
   live site (h1 600-700, h2 700), never 800 and never the 400 of the old cut.
   Reward figures 10 / 8h / 15% are provisional: they live only in content.html. */

.standard-page:has(.amb-page),
.standard-page__content:has(.amb-page) {
  padding-bottom: 0;
}

.amb-page {
  --amb-ink: var(--st-text-heading);
  --amb-body: var(--st-text-body);
  --amb-muted: var(--st-text-muted);
  --amb-purple: #855ce8;
  --amb-lilac: #a678ff;
  --amb-teal: #1f9c73;
  --amb-coral: #e04a4a;
  --amb-navy: #1a1a2e;
  --amb-line: #e8e8e8;
  --amb-shell: 1200px;
  --amb-gut: 80px;
  color: var(--amb-ink);
}
.amb-page > * { margin-block-start: 0; }
.amb-hero > *,
.amb-hero__inner > *,
.amb-hero__copy > *,
.amb-card > *,
.amb-rewards > *,
.amb-rewards__inner > *,
.amb-rewards__head > *,
.amb-reward-row > *,
.amb-reward > *,
.amb-how > *,
.amb-how__inner > *,
.amb-how__media > *,
.amb-how__copy > *,
.amb-steps > *,
.amb-step > *,
.amb-note > * { margin-block-start: 0; }

.amb-kicker,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-kicker {
  margin: 0 0 20px;
  color: var(--amb-purple);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- Hero: headline left, generator right ---------- */

/* The site nav is position:fixed and its bottom sits at ~93-101px at every
   width, and this page hides the standard hero, so the band has to clear the
   nav itself. Anything under ~120px of top padding puts the H1 behind it. */
.amb-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: clamp(132px, 10vw, 156px) 0 clamp(64px, 7vw, 96px);
}
/* One soft lilac bloom behind the card. Radial, not a flat disc: a hard edge
   reads as a rendering artifact (same lesson as the old reward cards). */
.amb-hero::before {
  content: "";
  position: absolute;
  top: -340px;
  right: -260px;
  width: 840px;
  height: 840px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166, 120, 255, 0.20), rgba(166, 120, 255, 0) 66%);
  pointer-events: none;
}
.amb-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(40px, 5vw, 70px);
  align-items: center;
  max-width: var(--amb-shell);
  margin: 0 auto;
  padding-inline: var(--amb-gut);
}
.amb-hero__copy { min-width: 0; }
.amb-hero__title,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-hero__title {
  margin: 0;
  color: var(--amb-ink);
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
/* The one flourish on the page: brand purple running into brand teal across
   the word the whole promise turns on. */
.amb-hero__title em {
  font-style: normal;
  background: linear-gradient(96deg, var(--amb-purple), var(--amb-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.amb-hero__sub,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-hero__sub {
  margin: 24px 0 0;
  max-width: 30rem;
  color: var(--amb-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.62;
}
.amb-proof,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-proof {
  margin: 30px 0 0;
  color: var(--amb-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.amb-proof::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 14px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--amb-teal);
  box-shadow: 0 0 0 4px rgba(31, 156, 115, 0.16);
}
.amb-proof strong { color: var(--amb-ink); font-weight: 700; }

/* ---------- The generator card ----------
   Navy, not white. The old build put a #fff card on a near-white band, eight
   points apart, and the page's one action dissolved into its own background. */

.amb-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: var(--amb-navy);
  padding: clamp(28px, 3vw, 38px);
  box-shadow: 0 34px 80px rgba(50, 30, 110, 0.24);
}
.amb-card::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(166, 120, 255, 0.42), transparent 68%);
  pointer-events: none;
}
.amb-card .amb-form,
.amb-card .amb-success { position: relative; }
.amb-card .amb-form > *,
.amb-card .amb-success > * { margin-block-start: 0; }

.amb-page .amb-form-kicker,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-form-kicker {
  margin: 0 0 12px;
  color: #b9a6ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.amb-page .amb-form-title,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-form-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.amb-page .amb-form-lead,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-form-lead {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
.amb-page .amb-form-label,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-form-label {
  display: block;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.amb-page .amb-form input[type="email"] {
  display: block;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--wps-radius-pill);
  background: rgba(255, 255, 255, 0.09);
  padding: 17px 24px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}
.amb-page .amb-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.42); }
.amb-page .amb-form input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--amb-lilac);
  box-shadow: 0 0 0 3px rgba(166, 120, 255, 0.35);
}
.amb-page .amb-form button[type="submit"] {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: var(--wps-radius-pill);
  background: var(--amb-lilac);
  padding: 17px 32px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.18s ease;
}
.amb-page .amb-form button[type="submit"]:hover { background: #b98cff; }
.amb-page .amb-form button[type="submit"]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.amb-page .amb-form-privacy,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-form-privacy {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.55;
}
.amb-page .amb-form .form-consent,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-form .form-consent {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.38);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.amb-page .amb-form .form-consent a { color: rgba(255, 255, 255, 0.72); text-underline-offset: 3px; }
.amb-page .amb-form .form-consent a:hover { color: #fff; }
.amb-page .amb-form .form-status {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13.5px;
  line-height: 1.5;
}
.amb-page .amb-form .form-status:empty { margin: 0; }
.amb-page .cta-form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Success state swaps into the same card, so nothing moves on the page. */
.amb-page .amb-success-kicker,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-success-kicker {
  margin: 0 0 12px;
  color: #6ee7b7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.amb-page .amb-success-title,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-success-title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.amb-page .amb-success-lead,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-success-lead {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.6;
}
.amb-share { display: flex; gap: 10px; }
.amb-page .amb-share-url {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--wps-radius-pill);
  background: rgba(255, 255, 255, 0.09);
  padding: 15px 22px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}
.amb-page .amb-copy {
  flex: none;
  border: 0;
  border-radius: var(--wps-radius-pill);
  background: #fff;
  padding: 15px 28px;
  color: var(--amb-navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease;
}
.amb-page .amb-copy:hover { background: #ece7ff; }
.amb-page .amb-reward-note,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-reward-note {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---------- Rewards: three figures, one per brand accent ---------- */

.amb-rewards {
  background: var(--wps-soft);
  padding: clamp(56px, 7vw, 84px) 0;
}
.amb-rewards__inner {
  max-width: var(--amb-shell);
  margin: 0 auto;
  padding-inline: var(--amb-gut);
}
.amb-rewards__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(24px, 4vw, 40px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 44px);
}
.amb-rewards__title,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-rewards__title {
  margin: 0;
  max-width: 23ch;
  color: var(--amb-ink);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.amb-rewards__lead,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-rewards__lead {
  margin: 0;
  color: var(--amb-muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
.amb-reward-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.amb-reward {
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--amb-ac);
  border-radius: var(--st-card-radius);
  background: var(--st-card-bg);
  padding: 32px 28px 30px;
}
/* Corner wash tinted to the card's own accent; fades out, no visible edge. */
.amb-reward::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--amb-wash), transparent 70%);
  pointer-events: none;
}
.amb-reward--purple { --amb-ac: var(--amb-purple); --amb-wash: rgba(133, 92, 232, 0.14); }
.amb-reward--teal   { --amb-ac: var(--amb-teal);   --amb-wash: rgba(31, 156, 115, 0.16); }
.amb-reward--coral  { --amb-ac: var(--amb-coral);  --amb-wash: rgba(224, 74, 74, 0.14); }
.amb-reward__num,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-reward__num {
  position: relative;
  margin: 0;
  color: var(--amb-ac);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
/* Word mark in the figure slot. Rewards are agreed with each ambassador
   individually, so the cards carry the shape of the deal and not an amount.
   Smaller than __num because a word is much wider than "8h"; at 780-1100px
   the cards are still three across and the longest mark has ~164px to sit in.
   __num is kept above in case a published tariff ever lands. */
.amb-reward__word,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-reward__word {
  position: relative;
  margin: 0;
  color: var(--amb-ac);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.amb-reward__title,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-reward__title {
  position: relative;
  margin: 14px 0 9px;
  color: var(--amb-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.amb-reward__copy,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-reward__copy {
  position: relative;
  margin: 0;
  color: var(--amb-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
.amb-prov,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-prov {
  margin: 26px 0 0;
  color: var(--amb-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

/* ---------- How it works: one photograph, then the three steps ---------- */

.amb-how {
  background: #fff;
  padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 56px);
}
.amb-how__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
  max-width: var(--amb-shell);
  margin: 0 auto;
  padding-inline: var(--amb-gut);
}
.amb-how__media .wp-block-image,
.amb-how__media figure { margin: 0; }
.amb-how__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  border-radius: var(--st-card-radius);
}
.amb-how__copy { min-width: 0; }
.amb-how__title,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-how__title {
  margin: 0 0 8px;
  color: var(--amb-ink);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.amb-steps { display: flex; flex-direction: column; }
.amb-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--amb-line);
}
.amb-step:first-child { border-top: 1px solid var(--amb-line); margin-top: 26px; }
.amb-step__num,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-step__num {
  grid-row: span 2;
  margin: 0;
  padding-top: 3px;
  color: var(--amb-purple);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
}
.amb-step__title,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-step__title {
  margin: 0 0 6px;
  color: var(--amb-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.amb-step__desc,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-step__desc {
  margin: 0;
  color: var(--amb-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

/* Fine print is a row, not a band. One band for one grey sentence was the
   thing that got the old build called ugly. */
.amb-note {
  max-width: var(--amb-shell);
  margin: 0 auto;
  padding: 24px var(--amb-gut) clamp(48px, 6vw, 72px);
}
.amb-note-text,
:is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-note-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin: 0;
  border-top: 1px solid var(--amb-line);
  padding-top: 22px;
  color: var(--amb-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}
.amb-page .amb-note-text a {
  color: var(--amb-purple);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .amb-page { --amb-gut: 40px; }
  .amb-hero__inner,
  .amb-how__inner { grid-template-columns: 1fr; }
  .amb-hero__inner { gap: 44px; }
  .amb-card { max-width: 520px; }
  .amb-how__media img { min-height: 280px; }
  .amb-rewards__head { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 780px) {
  .amb-page { --amb-gut: 22px; }
  .amb-hero::before { display: none; }
  .amb-reward-row { grid-template-columns: 1fr; }
  .amb-reward__num,
  :is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-reward__num { font-size: 46px; }
  .amb-share { flex-direction: column; }
  .amb-page .amb-copy { width: 100%; }
  .amb-note-text,
  :is(.standard-page__content, .editor-styles-wrapper) .amb-page .amb-note-text { justify-content: flex-start; }
}

/* Mobile ~390: the hero eyebrow was being clipped by flex min-width:auto. */
@media (max-width: 420px) {
  .ba-hero__text,
  .ba-hero__inner > * { min-width: 0; }
  .ba-hero__eyebrow,
  .ba-hero .ba-hero__sub {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: break-word;
    -webkit-line-clamp: unset;
    max-width: none;
  }
  .ba-hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
    letter-spacing: 1px;
  }
}


/* ============================================================
   BRAND PARTNERSHIPS  (/brand-partnerships-bucharest/)
   Rebuilt 2026-08-27 in the visual language Sergey picked from the
   Ambassador direction artifact: B ("form in the hero") and C ("the pass").

   What was carried over from those two directions:
     - a rich dark ground with radial colour glows, not a flat navy fill
     - very large display type at tight tracking, with one accent word
       carrying a purple-to-teal gradient
     - big numerals as the visual anchor, in the brand trio
     - cards with a coloured top rule and a soft glow in the top corner (B)
     - the editorial row list: coloured left bar, numeral, label, prose (C)
     - a drawn gradient "pass" object as a hero prop (C)

   Manrope 200-800 is already enqueued site-wide (functions.php), so the
   heavier display weights cost no extra request.

   Three dark bands (hero, the three ways, the closing CTA) bookend and
   break the page. The dark closing band also sidesteps the shared
   .cta-section purple gradient, whose body text measures 2.3-3.0:1;
   on this ground the same copy measures over 12:1.
   ============================================================ */

.bp-hero, .bp-ways-band, .bp-cta {
  --bp-ink: #141227;
  --bp-ink-2: #1b1833;
  --bp-purple: #8b5cf6;
  --bp-purple-lt: #b39aff;
  --bp-teal: #33cc99;
  --bp-teal-dp: #2bab80;
  --bp-coral: #ff7a7a;
  --bp-on-dark: rgba(255,255,255,.72);
  --bp-on-dark-2: rgba(255,255,255,.54);
  --bp-hair: rgba(255,255,255,.11);
}

/* ---------- The dark ground ----------
   Two radial glows over a near-black violet. Painted on ::before so the
   section's own background stays available for a solid fallback, and so
   the glow never sits above content. */
.bp-ways-band, .bp-cta {
  position: relative;
  background: var(--bp-ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.bp-ways-band::before, .bp-cta::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 12% 8%, rgba(139,92,246,.30), transparent 62%),
    radial-gradient(ellipse 60% 55% at 88% 92%, rgba(51,204,153,.16), transparent 60%),
    radial-gradient(ellipse 50% 40% at 78% 4%, rgba(179,154,255,.14), transparent 60%);
}
.bp-ways-band > *, .bp-cta > * { position: relative; z-index: 1; }

/* Headline accent word: purple to teal, the two brand colours the deck
   already pairs. background-clip needs a transparent fill, and the
   -webkit- pair is still required in Safari. */
.bp-grad {
  background: linear-gradient(96deg, var(--bp-purple-lt) 0%, #9d8bff 38%, var(--bp-teal) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Hero ----------
   Light, on the same #faf8ff ground and the same type scale as .ba-hero
   (Private Offices, Coworking Desks, Day Passes, Modullo, Business Address),
   so the page opens the way every other product page opens. Changed
   2026-08-28: the first build opened on the dark ground and read as a
   different site.

   The site header is position:fixed and 101px tall on desktop, and this is
   the first section on the page, so a full-bleed hero starts underneath it.
   The theme has no header-height variable; the other full-bleed heroes bake
   the clearance into their own top padding, so this does the same. */
.bp-hero {
  position: relative;
  background: #faf8ff;
  border-bottom: 1px solid #efeaf9;
  padding: clamp(120px, 11vw, 150px) 0 clamp(64px, 7vw, 96px);
}
/* Same box model as .container (max-width 1200 + 80px gutters), so the hero
   lines up with every .container section below it and with .ba-hero on the
   other product pages. It previously used width: min(--max-width, 100% - 48px)
   with NO inline padding, which put the headline at x=120 while every other
   product page starts at x=200: 160px wider, and out of line with its own
   page. Sergey spotted it on live 2026-08-28. */
.bp-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.10fr) minmax(0, .90fr);
  gap: clamp(36px, 4.4vw, 64px); align-items: center;
  max-width: var(--max-width); margin-inline: auto; padding-inline: 80px;
}
.bp-hero__inner > *, .bp-hero__copy > * { margin-block-start: 0; }
.bp-hero .bp-hero__eyebrow {
  margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--st-purple);
}
/* Same size, weight and tracking as .ba-hero__title. The first build ran 66px
   at weight 800 with -.035em, which is a display scale nothing else here uses. */
.bp-hero .bp-hero__title {
  margin: 0 0 20px; color: var(--st-text-heading); font-weight: 600;
  font-size: clamp(34px, 2.9vw, 46px); line-height: 1.14; letter-spacing: -.5px;
  text-wrap: balance;
}
/* The accent word, kept from the first build but in solid brand purple: the
   purple-to-teal gradient was drawn for a dark ground and the teal end
   measures ~2:1 on #faf8ff. */
.bp-hero .bp-grad {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor; color: var(--st-purple-bright, #7c4dff);
}
.bp-hero .bp-hero__sub {
  margin: 0 0 32px; max-width: 46ch; font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.65; color: var(--st-text-body);
}
.bp-hero .bp-hero__sub strong { color: var(--st-text-heading); font-weight: 700; }
/* 1.10/.90 rather than .ba-hero's 1.05/.95, and a 10px gap rather than 14px,
   for one reason: with Manrope loaded this hero's two CTAs measure 214 + 305
   = 531px, and the .ba-hero split leaves a 527px column, so they wrapped at
   every desktop width. The copy column ends up 21px wider than Desks and the
   photo 27px narrower, which is invisible; a wrapped button pair is not.
   1.12 was also tried and is too far: the pass then covers most of the photo.
   MEASURE THIS WITH THE WEBFONT LOADED. A domcontentloaded measurement reads
   the fallback face and under-reports the buttons by ~17px, which is enough
   to call a wrapped row "one line".
   They still wrap between roughly 980px and 1150px, where the labels genuinely
   do not fit. Shortening "Request the partnership deck" is the only fix for
   that band, and that is Sergey's copy to change. */
.bp-hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
/* btn-outline carries a 1px border and btn-primary does not, so a pair
   renders 41px and 43px unless both declare one. Fifth page to hit this. */
.bp-hero__ctas .wp-block-button__link { border: 1px solid transparent; }
.bp-hero__note {
  display: flex; align-items: center; gap: 11px; margin: 26px 0 0;
  font-size: 13.5px; color: var(--st-text-body);
}
.bp-hero__note::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--bp-teal-dp); box-shadow: 0 0 0 4px rgba(51,204,153,.20);
}

/* ---------- Hero prop: the photo in an elevated frame, with the partner
   card tucked into its corner. Direction C's drawn object, but keeping the
   real photograph: the Supertree partner banners visible behind the people
   are literally the product this page sells, and no illustration beats
   that as proof. ---------- */
.bp-hero__media { position: relative; }
.bp-hero__media > * { margin-block-start: 0; }
/* 24px radius and the same soft shadow as .ba-hero__media. The heavy black
   drop shadow and the white hairline both belonged to the dark ground. */
.bp-hero__frame { position: relative; border-radius: 24px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(35,35,35,.10); }
.bp-hero__frame .wp-block-image, .bp-hero__frame figure { margin: 0; }
.bp-hero__frame img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
/* A short scrim at the bottom-left only, so the pass keeps a darker corner to
   sit against. The old full-height ink gradient dulled the whole photo. */
.bp-hero__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(20,18,39,0) 58%, rgba(20,18,39,.34) 100%);
}

/* The pass. A gradient card, notched on both sides, with a perforated stub,
   sitting over the bottom-left corner of the photo. */
/* The notches are cut out of the card with a two-layer mask rather than
   painted as discs. On the old dark ground a disc in --bp-ink was
   indistinguishable from the section behind it; over a photograph it is a
   white dot. A mask shows whatever is actually behind: hero ground on the
   left, the photo on the right.
   box-shadow would be clipped away by the mask, so the shadow is a
   drop-shadow filter instead, which follows the notched alpha channel. */
.bp-pass {
  position: absolute; left: -38px; bottom: -30px; z-index: 3; width: min(272px, 66%);
  padding: 18px 20px 15px; border-radius: 16px;
  background: linear-gradient(133deg, #8b5cf6 0%, #7f6bf3 44%, #33cc99 100%);
  filter: drop-shadow(0 16px 30px rgba(76,50,140,.34));
  transform: rotate(-3.5deg);
  -webkit-mask-image:
    radial-gradient(circle 9px at left 50%, transparent 99%, #000 100%),
    radial-gradient(circle 9px at right 50%, transparent 99%, #000 100%);
  mask-image:
    radial-gradient(circle 9px at left 50%, transparent 99%, #000 100%),
    radial-gradient(circle 9px at right 50%, transparent 99%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.bp-pass > * { margin-block-start: 0; }
/* The two notches. Painted as ink-coloured discs half outside the card, the
   same trick the deck's ticket uses. */
/* The notches are now cut by the mask above; nothing to paint. */
.bp-pass__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bp-pass .bp-pass__brand { margin: 0; font-size: 12.5px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.bp-pass .bp-pass__kind {
  margin: 0; font-size: 8.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.82); text-align: right; line-height: 1.35;
}
.bp-pass .bp-pass__label {
  margin: 16px 0 3px; font-size: 8.5px; font-weight: 800; letter-spacing: .17em;
  text-transform: uppercase; color: rgba(255,255,255,.75);
}
.bp-pass .bp-pass__value .bp-pass__per { font-size: 12px; font-weight: 600; opacity: .82; letter-spacing: 0; }
.bp-pass .bp-pass__value {
  margin: 0 0 14px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 800;
  color: #fff; letter-spacing: -.02em; line-height: 1.1;
}
.bp-pass__stub {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1.5px dashed rgba(255,255,255,.45);
}
.bp-pass .bp-pass__admits { margin: 0; font-size: 10.5px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.bp-pass .bp-pass__valid { margin: 2px 0 0; font-size: 10px; color: rgba(255,255,255,.8); }
/* Barcode, drawn with a repeating gradient so it needs no asset. */
.bp-pass__code {
  width: 54px; height: 20px; flex: none; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 9px);
  opacity: .92;
}

/* ---------- Shared: light bands on this page ----------
   A faint lavender rather than the shared grey. Against three dark bands it
   still reads as a break, and it keeps the page from going cold. */
.bp-soft { background: #f7f5fb; }

/* Section heads, dark and light variants */
.bp-head { max-width: 760px; margin: 0 auto clamp(38px, 4.6vw, 58px); text-align: center; }
.bp-head > * { margin-block-start: 0; }
.bp-head--left { margin-inline: 0; text-align: left; }
.bp-head .bp-kicker {
  margin: 0 0 15px; font-size: 11.5px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--purple-hover);
}
.bp-head .bp-title {
  margin: 0; font-weight: 800; font-size: clamp(29px, 3.5vw, 45px);
  line-height: 1.08; letter-spacing: -.035em; color: var(--text-heading); text-wrap: balance;
}
.bp-head .bp-lead {
  margin: 18px 0 0; font-size: 17px; line-height: 1.68; color: var(--text-body);
}
.bp-head--left .bp-lead { margin-inline: 0; }
/* On a dark band the same head has to invert. One step more specific than
   the base rules above so it wins wherever it sits. */
.bp-ways-band .bp-head .bp-kicker, .bp-cta .bp-head .bp-kicker { color: var(--bp-purple-lt); }
.bp-ways-band .bp-head .bp-title, .bp-cta .bp-head .bp-title { color: #fff; }
.bp-ways-band .bp-head .bp-lead, .bp-cta .bp-head .bp-lead { color: var(--bp-on-dark); }

/* ---------- Ecosystem figures: direction B's big numerals ---------- */
.bp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 22px); margin-top: clamp(34px, 4vw, 48px); }
.bp-stats > *, .bp-stat > * { margin-block-start: 0; }
.bp-stat {
  position: relative; overflow: hidden; padding: 28px 26px 26px;
  background: #fff; border: 1px solid #e9e6f1; border-radius: 18px;
  box-shadow: 0 12px 34px rgba(40,26,90,.06);
}
/* The coloured top rule and the corner glow, both from direction B. */
.bp-stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--bp-a, var(--purple-hover)); }
/* A blurred disc clipped by the card edge read as a mistake rather than a
   flourish (Sergey, 2026-08-27). Replaced with a wash that runs top-down from
   the coloured rule and fades out, which follows the card's own geometry. */
.bp-stat::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 96px; pointer-events: none;
  background: linear-gradient(180deg, var(--bp-wash, rgba(139,92,246,.07)), transparent);
}
.bp-stat:nth-child(1) { --bp-a: #8b5cf6; --bp-wash: rgba(139,92,246,.08); }
.bp-stat:nth-child(2) { --bp-a: #1b8a63; --bp-wash: rgba(27,138,99,.08); }
.bp-stat:nth-child(3) { --bp-a: #e05555; --bp-wash: rgba(224,85,85,.07); }
.bp-stat:nth-child(4) { --bp-a: #2d1b52; --bp-wash: rgba(45,27,82,.06); }
.bp-stat .bp-stat__num {
  position: relative; margin: 0 0 8px; font-size: clamp(34px, 3.6vw, 46px); font-weight: 800;
  line-height: 1; letter-spacing: -.045em; color: var(--bp-a);
}
.bp-stat .bp-stat__label { position: relative; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text-body); text-wrap: balance; }

/* ---------- Touchpoints: direction B's card ---------- */
.bp-touch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.1vw, 26px); margin-top: clamp(34px, 4vw, 48px); }
.bp-touch-grid > *, .bp-touch-card > * { margin-block-start: 0; }
.bp-touch-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%;
  padding: 32px 32px 34px; background: #fff; border: 1px solid #e9e6f1; border-radius: 20px;
  box-shadow: 0 14px 40px rgba(40,26,90,.07); transition: transform .25s ease, box-shadow .25s ease;
}
.bp-touch-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(40,26,90,.13); }
.bp-touch-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--bp-a, var(--purple-hover)); }
.bp-touch-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none;
  background: linear-gradient(180deg, var(--bp-wash), transparent);
}
.bp-touch-card:nth-child(1) { --bp-a: #8b5cf6; --bp-wash: rgba(139,92,246,.08); }
.bp-touch-card:nth-child(2) { --bp-a: #1b8a63; --bp-wash: rgba(27,138,99,.08); }
.bp-touch-card:nth-child(3) { --bp-a: #e05555; --bp-wash: rgba(224,85,85,.07); }
.bp-touch-card:nth-child(4) { --bp-a: #2d1b52; --bp-wash: rgba(45,27,82,.06); }
.bp-touch-card > *, .bp-touch-card > * > * { position: relative; }
.bp-touch-card .bp-touch__ico {
  width: 46px; height: 46px; margin: 0 0 20px; border-radius: 13px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bp-a) 12%, #fff); color: var(--bp-a);
}
.bp-touch__ico .st-icon::before { width: 22px; height: 22px; }
.bp-touch-card .bp-touch__title {
  margin: 0 0 9px; font-size: 12px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bp-a);
}
/* Two lines' worth, so the rule under the promise lands on the same baseline
   in both cards of a row even when one promise is a line shorter. */
.bp-touch-card .bp-touch__lead { margin: 0 0 22px; min-height: 48px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text-heading); letter-spacing: -.01em; }
@media (max-width: 780px) { .bp-touch-card .bp-touch__lead { min-height: 0; } }
.bp-touch__list { margin: 0; padding: 20px 0 0; list-style: none; border-top: 1px solid #ece9f3; }
.bp-touch__list li { position: relative; margin: 0 0 11px; padding-left: 19px; font-size: 14.5px; line-height: 1.5; color: var(--text-body); }
.bp-touch__list li:last-child { margin-bottom: 0; }
.bp-touch__list li::before { content: ""; position: absolute; left: 1px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--bp-a); opacity: .5; }

/* ---------- Three ways: direction C's editorial rows ----------
   Deliberately carries no bullet list. The brief gave this section 24
   bullets and the touchpoints grid another 23, roughly 70% the same items
   re-sliced by channel; the tier cards below then repeat most of it a third
   time. A row keeps only the outcome and who it suits. */
.bp-ways-band { padding: clamp(66px, 8vw, 104px) 0; }
.bp-ways { margin-top: clamp(34px, 4vw, 48px); border-top: 1px solid var(--bp-hair); }
.bp-ways > *, .bp-way > * { margin-block-start: 0; }
.bp-way {
  position: relative; display: grid;
  grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.32fr);
  gap: clamp(20px, 3vw, 46px); align-items: start;
  padding: clamp(28px, 3.2vw, 40px) 0 clamp(28px, 3.2vw, 40px) 26px;
  border-bottom: 1px solid var(--bp-hair);
  transition: background .22s ease;
}
.bp-way:hover { background: rgba(255,255,255,.03); }
/* The coloured left bar, direction C's signature. */
.bp-way::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--bp-a); }
.bp-way:nth-child(1) { --bp-a: var(--bp-purple-lt); }
.bp-way:nth-child(2) { --bp-a: var(--bp-teal); }
.bp-way:nth-child(3) { --bp-a: var(--bp-coral); }
.bp-way .bp-way__num {
  margin: 0; font-size: clamp(32px, 3.4vw, 44px); font-weight: 800; line-height: .95;
  letter-spacing: -.05em; color: var(--bp-a);
}
.bp-way__mid > * { margin-block-start: 0; }
.bp-way .bp-way__kind {
  margin: 0 0 9px; font-size: 11px; font-weight: 800; letter-spacing: .17em;
  text-transform: uppercase; color: var(--bp-on-dark-2);
}
.bp-way .bp-way__title {
  margin: 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; line-height: 1.22;
  color: #fff; letter-spacing: -.02em; text-wrap: balance;
}
.bp-way__end > * { margin-block-start: 0; }
.bp-way .bp-way__desc { margin: 0 0 16px; font-size: 15.5px; line-height: 1.62; color: var(--bp-on-dark); }
.bp-way .bp-way__best { margin: 0; font-size: 14px; line-height: 1.55; color: var(--bp-on-dark-2); }
.bp-way .bp-way__best strong { color: #fff; font-weight: 700; }

/* ---------- Partnership levels ---------- */
.bp-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 26px); align-items: stretch; margin-top: clamp(38px, 4.4vw, 54px); }
.bp-tier-grid > *, .bp-tier > * { margin-block-start: 0; }
.bp-tier {
  --accent: var(--purple-hover); --accent-soft: #f2eeff;
  --cap: linear-gradient(133deg, #8b5cf6, #7d5bf0);
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid #e9e6f1; border-radius: 22px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(40,26,90,.08); transition: transform .25s ease, box-shadow .25s ease;
}
.bp-tier:hover { transform: translateY(-5px); box-shadow: 0 28px 70px rgba(40,26,90,.15); }
.bp-tier--community { --accent: #7c5cfc; --accent-soft: #f2eeff; --cap: linear-gradient(133deg, #8b5cf6, #7d5bf0); }
.bp-tier--business  { --accent: #1b8a63; --accent-soft: #e9faf3; --cap: linear-gradient(133deg, #1b8a63, #2bab80 55%, #33cc99); }
.bp-tier--strategic { --accent: #2d1b52; --accent-soft: #efeaf7; --cap: linear-gradient(133deg, #241543, #3b2566 58%, #4d3382); }
/* The middle tier is the one to steer to, so it sits proud of the other two
   and carries the ribbon. Below 900px the grid is one column and a lifted
   card just looks misaligned, so the lift is scoped to the wide layout. */
@media (min-width: 901px) {
  .bp-tier--business { transform: translateY(-14px); box-shadow: 0 26px 64px rgba(27,138,99,.20); }
  .bp-tier--business:hover { transform: translateY(-19px); }
}
/* Every cap reserves the ribbon row, whether or not it has a ribbon, so the
   three price blocks stay on one baseline. Absolutely positioning the badge
   into the corner instead put it straight on top of "/ month". */
.bp-tier__ribbon {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  z-index: 3; margin: 0; white-space: nowrap;
  padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.94);
  font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: #1b8a63; box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
.bp-tier__cap { position: relative; overflow: hidden; padding: 48px 28px 26px; background: var(--cap); text-align: center; }
.bp-tier__cap > * { margin-block-start: 0; }
.bp-tier__cap::after {
  content: ""; position: absolute; top: -60px; left: -30px; width: 170px; height: 170px;
  border-radius: 50%; background: rgba(255,255,255,.14); filter: blur(4px); pointer-events: none;
}
.bp-tier .bp-tier__price {
  position: relative; margin: 0 0 12px; font-size: clamp(30px, 2.8vw, 38px); font-weight: 800;
  line-height: 1; letter-spacing: -.045em; color: #fff;
}
.bp-tier .bp-tier__price .bp-tier__per { font-size: 14px; font-weight: 600; letter-spacing: 0; opacity: .82; }
.bp-tier .bp-tier__name {
  position: relative; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .19em;
  text-transform: uppercase; color: rgba(255,255,255,.94); line-height: 1.5;
}
.bp-tier__body { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 22px; }
.bp-tier__body > * { margin-block-start: 0; }
.bp-tier .bp-tier__promise { margin: 0 0 20px; font-size: 16.5px; font-weight: 700; line-height: 1.45; color: var(--text-heading); letter-spacing: -.015em; }
.bp-tier .bp-tier__inherits {
  margin: 0 0 15px; padding-bottom: 15px; border-bottom: 1px solid #ece9f3;
  font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
}
.bp-tier .choice-list li { font-size: 14.5px; }
/* No tinted footer. It was the only card footer on the site carrying a
   background wash, so the three cards read as a pattern used nowhere else.
   The hairline does the separating; the card stays white top to bottom.
   --accent-soft stays declared above because .choice-list li::before still
   reads it for the tick circles inside the card. Changed 2026-08-28. */
.bp-tier__foot { padding: 20px 28px 26px; border-top: 1px solid #ece9f3; }
.bp-tier__foot > * { margin-block-start: 0; }
.bp-tier .bp-tier__commit { margin: 0 0 15px; font-size: 12.5px; font-weight: 700; text-align: center; color: var(--text-body); letter-spacing: .01em; }
/* btn-outline carries a 1px border and btn-primary does not, so a stacked
   pair renders 41px and 43px. Fourth page to hit this. */
.bp-tier__foot .wp-block-button.btn-primary .wp-block-button__link { border: 1px solid transparent; }
:is(.standard-page__content, .editor-styles-wrapper) .bp-tier__foot .wp-block-buttons > .wp-block-button,
:is(.standard-page__content, .editor-styles-wrapper) .bp-tier__foot .wp-block-button__link { width: 100%; }
.bp-tier__foot .wp-block-button__link { background: var(--cap); border-color: transparent; color: #fff; font-weight: 700; }

/* ---------- Full benefit overview ---------- */
.bp-cmp .compare-wrap { border-radius: 20px; border-color: #e9e6f1; box-shadow: 0 14px 40px rgba(40,26,90,.07); }
.bp-cmp .compare-table thead th { background: #1b1833; padding: 17px 20px; }
.bp-cmp .compare-table thead th.bp-cmp__tier { text-align: center; text-transform: none; letter-spacing: 0; }
.bp-cmp .compare-table thead th .bp-cmp__tname { display: block; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.bp-cmp .compare-table thead th .bp-cmp__tprice { display: block; margin-top: 5px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.bp-cmp .compare-table thead th:nth-child(2) .bp-cmp__tname { color: #b39aff; }
.bp-cmp .compare-table thead th:nth-child(3) .bp-cmp__tname { color: #6fe0b4; }
.bp-cmp .compare-table thead th:nth-child(4) .bp-cmp__tname { color: #d9c9ff; }
.bp-cmp .compare-table tbody td { font-size: 14.5px; padding: 17px 20px; border-bottom-color: #eeebf4; }
.bp-cmp .compare-table tbody td.bp-cmp__cell { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--text-heading); white-space: nowrap; }
.bp-cmp .compare-table tbody th { padding: 17px 20px; border-bottom: 1px solid #eeebf4; text-align: left; font-size: 14.5px; font-weight: 600; color: var(--text-heading); }
.bp-cmp .compare-table tbody tr:last-child th, .bp-cmp .compare-table tbody tr:last-child td { border-bottom: none; }
.bp-cmp .compare-table tbody tr:hover { background: #f9f7fd; }
.bp-cmp__yes { display: inline-block; width: 21px; height: 21px; border-radius: 50%; background: #e9faf3; color: #1b8a63; font-size: 11px; font-weight: 800; line-height: 21px; }
.bp-cmp__no { color: #c3bfd0; font-weight: 700; }
.bp-cmp__hint { margin: 18px 0 0; text-align: center; }

/* ---------- One-off activations ---------- */
.bp-act-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 24px); margin-top: clamp(34px, 4vw, 48px); }
.bp-act-grid > *, .bp-act > * { margin-block-start: 0; }
.bp-act {
  position: relative; overflow: hidden; display: flex; flex-direction: column; height: 100%;
  padding: 28px 28px 26px; background: #fff; border: 1px solid #e9e6f1; border-radius: 20px;
  box-shadow: 0 12px 34px rgba(40,26,90,.06); transition: transform .25s ease, box-shadow .25s ease;
}
.bp-act:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(40,26,90,.12); }
.bp-act::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--bp-a); }
.bp-act::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 104px; pointer-events: none; background: linear-gradient(180deg, var(--bp-wash), transparent); }
.bp-act > * { position: relative; }
.bp-act:nth-child(3n+1) { --bp-a: #8b5cf6; --bp-wash: rgba(139,92,246,.08); }
.bp-act:nth-child(3n+2) { --bp-a: #1b8a63; --bp-wash: rgba(27,138,99,.08); }
.bp-act:nth-child(3n+3) { --bp-a: #e05555; --bp-wash: rgba(224,85,85,.07); }
.bp-act__ico { width: 44px; height: 44px; margin: 0 0 18px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--bp-a) 12%, #fff); color: var(--bp-a); }
.bp-act__ico .st-icon::before { width: 21px; height: 21px; }
.bp-act .bp-act__title { margin: 0 0 7px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bp-a); }
.bp-act .bp-act__promise { margin: 0 0 13px; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--text-heading); letter-spacing: -.02em; }
.bp-act__formats { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: var(--text-body); }
.bp-act__price { margin: auto 0 0; padding-top: 17px; border-top: 1px solid #ece9f3; font-size: 19px; font-weight: 800; color: var(--text-heading); letter-spacing: -.03em; }
.bp-act__price .bp-act__from { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Who it is for ----------
   Was a centred cloud of pills over a lot of empty space, with the "not sure"
   line and its CTA orphaned underneath (Sergey, 2026-08-27). Now a two-column
   split: the pitch and the CTA hold the left, the industries sit right as a
   ruled two-column list. The rules give 15 short labels a structure that a
   ragged centred wrap could not, and the section stops being mostly air. */
.bp-who {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 5vw, 76px); align-items: start;
}
.bp-who > *, .bp-who__copy > * { margin-block-start: 0; }
.bp-who__copy .bp-head { margin-bottom: 0; }
.bp-who .bp-who__note {
  margin: 26px 0 0; padding-left: 18px; border-left: 3px solid var(--purple-hover);
  font-size: 16.5px; line-height: 1.6; color: var(--text-body);
}
.bp-who__copy .wp-block-buttons { margin-top: 26px; }

/* Multi-column, not grid. A two-column grid fills row by row, so the list read
   across (Technology, Banking / Insurance, Business Services) when a reader
   goes down a column. CSS columns flow top-to-bottom then across, which is the
   order the eye actually takes. */
.bp-ind__grid { columns: 2; column-gap: clamp(20px, 2.6vw, 34px); }
.bp-ind__grid > * { margin-block-start: 0; }
.bp-ind__item {
  display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 14px 2px; border-top: 1px solid #e4e0ee;
  font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--text-heading);
  break-inside: avoid;
}
/* One accent for every dot. Cycling the brand trio here would imply the
   industries are grouped three ways, which they are not. */
.bp-ind__item::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--purple-hover);
}

/* A standalone CTA row under a grid. wp-block-buttons is a flex row that
   defaults to justify-content:normal, so it sits hard left under a centred
   section. Scoped to the modifier so no existing .cta-actions row moves.
   (This rule was lost in the redesign and the button drifted left again.) */
:is(.standard-page__content, .editor-styles-wrapper) .cta-actions--center,
.cta-actions--center { justify-content: center; }
/* Gutenberg's default block gap left only 12px between the card grid and this
   button, against 58px above the grid and 110px of section padding below it,
   so it read as stuck to the cards. Sits on the modifier, which only this
   page uses. */
.cta-actions--center { margin-top: clamp(32px, 3.6vw, 44px); }

/* ---------- Closing band ---------- */
.bp-cta { padding: clamp(66px, 8vw, 106px) 0; }
.bp-cta__inner {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(34px, 4.6vw, 64px); align-items: center;
  max-width: var(--max-width); margin-inline: auto; padding-inline: 80px;
}
.bp-cta__inner > *, .bp-cta__copy > * { margin-block-start: 0; }
.bp-cta .bp-cta__quote {
  margin: 24px 0 0; padding-left: 20px; border-left: 3px solid var(--bp-teal);
  font-size: 17px; font-weight: 600; line-height: 1.55; color: #fff; letter-spacing: -.01em;
}
.bp-cta__ctas { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 30px; }
.bp-cta__ctas .wp-block-button__link { border: 1px solid transparent; }
.bp-cta__ctas .btn-primary .wp-block-button__link { background: linear-gradient(96deg, #8b5cf6, #7d5bf0); color: #fff; box-shadow: 0 12px 34px rgba(139,92,246,.42); }
.bp-cta__ctas .btn-outline--white .wp-block-button__link { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.42); }
.bp-cta__ctas .btn-outline--white .wp-block-button__link:hover { background: #fff; }
/* The form card stays light: a dark form on a dark band loses the one
   high-contrast surface the page needs at the point of conversion. */
.bp-form-card { background: #fff; border-radius: 22px; padding: 32px 30px; box-shadow: 0 30px 70px rgba(0,0,0,.42); }
.bp-form-card > * { margin-block-start: 0; }
.bp-form-card .bp-form__kicker { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--purple-hover); }
.bp-form-card .bp-form__title { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--text-heading); }
.bp-form-card .bp-form__lead { margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.bp-form-card .request-form button[type="submit"] { background: linear-gradient(96deg, #8b5cf6, #7d5bf0); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .bp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .bp-hero { padding-top: clamp(112px, 26vw, 132px); }
  .bp-hero__inner, .bp-cta__inner, .bp-who { grid-template-columns: 1fr; }
  .bp-pass { left: auto; right: 10px; bottom: -26px; width: min(280px, 78%); }
  .bp-way { grid-template-columns: 68px minmax(0, 1fr); }
  .bp-way__end { grid-column: 2; }
  .bp-tier-grid, .bp-act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .bp-tier-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .bp-touch-grid, .bp-act-grid { grid-template-columns: 1fr; }
  .bp-cmp .compare-wrap { overflow-x: auto; }
  .bp-cmp .compare-table { min-width: 640px; }
}
/* Gutters track .container exactly (80 / 40 / 20 at the same breakpoints), so
   the two full-bleed bands stay aligned with the rest of the page at every
   width. Order matters within this pair: at 400px both queries match, so the
   480 rule has to come second. */
@media (max-width: 968px) {
  .bp-hero__inner, .bp-cta__inner { padding-inline: 40px; }
}
@media (max-width: 480px) {
  .bp-hero__inner, .bp-cta__inner { padding-inline: 20px; }
}

@media (max-width: 560px) {
  .bp-stats { grid-template-columns: 1fr; }
  .bp-ind__grid { columns: 1; }
  .bp-way { grid-template-columns: 1fr; gap: 14px; padding-left: 20px; }
  .bp-way__end { grid-column: 1; }
  .bp-pass { position: static; width: 100%; transform: none; margin-top: 18px;
    -webkit-mask-image: none; mask-image: none;
    filter: none; box-shadow: 0 14px 30px rgba(76,50,140,.24); }
}

/* The theme pads below the last section (50px on .standard-page__content,
   63px on main) over main's own #f2f2f2. Any page ending in a full-bleed
   band shows that as a light strip above the footer. Scoped with :has() so
   only a page that actually ends in .bp-cta is affected. */
main.standard-page:has(.standard-page__content > .bp-cta:last-child) { padding-bottom: 0; }
.standard-page__content:has(> .bp-cta:last-child) { padding-bottom: 0; }

/* ============================================================
   Managed Offices, Floor 6 (/managed-offices-bucharest/)
   Built 2026-08-31 from the Floor 6 brief.

   Appended at the END of the file on purpose: every rule below
   modifies a shared component defined earlier (.compare-table,
   .eco-row, .choice-list, .band), and a modifier placed before
   the block it modifies loses at equal specificity. See the
   .media-split--fill incident on the Private Offices build.

   The page ships with NO photographs: Floor 6 does not exist
   yet, so every visual here is a schematic drawn in SVG. The
   card media slot is sized so a real render drops in later
   with no CSS change.
   ============================================================ */

/* Page tokens. On :root rather than on the page's blocks because
   .mo-card--small/--mid/--hq sit inside the office-types band, which
   carries none of those classes: scoped to them, every card accent
   resolved to nothing. The --mo- prefix is the namespace. */
:root {
  --mo-ink: #1a1a2e;
  /* #22a173 (the shared green used elsewhere) measures 3.27:1 on white,
     which fails AA for the 12px uppercase card eyebrow. Darkened along
     the same hue to 4.66:1. Purple is 4.23:1 and deep purple 9.80:1,
     both measured, not eyeballed. */
  --mo-teal: #1a845e;
  --mo-teal-soft: #e7faf2;
  --mo-purple: #8b5cf6;
  --mo-purple-soft: #f0ecff;
  --mo-deep: #4c328c;
  --mo-deep-soft: #ece7f8;
  /* Only ever used on the dark band, where a light green reads clearly
     and needs no AA check against white. */
  --mo-teal-bright: #33cc99;
}

/* ---------- Hero ----------
   Light, matching the other product pages. Brand Partnerships
   shipped dark first and was rebuilt light so the product pages
   read as one set; this starts where that ended up. */
.mo-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(120px, 13vw, 168px) 0 clamp(64px, 8vw, 104px);
  background: #fff;
}

/* One soft lilac bloom, top-right, behind the plate. Radial so it
   has no visible edge; a flat disc reads as a mistake. */
.mo-hero__wash {
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -12%;
  width: min(760px, 78%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, .16), rgba(139, 92, 246, .05) 46%, rgba(139, 92, 246, 0) 70%);
  pointer-events: none;
}

.mo-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(36px, 4vw, 60px);
  align-items: center;
}

/* Gutenberg gives every direct child a top margin; the grid owns
   the spacing here instead. */
.mo-hero__inner > *,
.mo-hero__text > * { margin-block-start: 0; }

.mo-hero__eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mo-purple);
}

.mo-hero__title {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 62px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--mo-ink);
  text-wrap: balance;
}

.mo-hero__title em {
  font-style: normal;
  color: var(--mo-purple);
}

.mo-hero__sub {
  margin: 22px 0 0;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-body);
}

.mo-hero__sub strong { color: var(--mo-ink); font-weight: 700; }

/* Three facts as a rule-separated row rather than cards: they are
   one line each, and three cards for three short strings is the
   kind of empty-box rhythm the Private Offices review flagged. */
.mo-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.mo-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 22px;
  border-left: 1px solid #e6e3ee;
}

.mo-hero__facts li:first-child { padding-left: 0; border-left: none; }

.mo-fact__n {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--mo-ink);
}

.mo-fact__l {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
}

.mo-hero__ctas { margin-top: 34px; gap: 12px; }
.mo-hero__ctas .wp-block-button__link { white-space: nowrap; }

@media (max-width: 620px) {
  .mo-hero__ctas .wp-block-button__link { white-space: normal; }
}

/* .btn-outline carries a 1px border and .btn-primary does not, so
   a side-by-side pair renders 41px and 43px without this. Fourth
   page to hit it; any stacked or paired primary+outline needs it. */
.mo-hero__ctas .btn-primary .wp-block-button__link {
  border: 1px solid transparent;
}

/* ---------- Hero prop: the schematic floor plate ---------- */
.mo-hero__plate { margin: 0; }

/* Hero render. Portrait on purpose: the right column is about half the
   container and the old 3:2 diagram floated small beside a tall stack of copy.
   max-height caps it on wide screens; object-fit crops rather than distorts. */
.mo-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 26px 60px rgba(40, 26, 90, .18);
}

.mo-hero__platecap {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- The three office types ---------- */
.mo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  align-items: stretch;
}

.mo-grid > * { margin-block-start: 0; }

.mo-card {
  --accent: var(--purple-hover);
  --accent-soft: #f0ecff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e8e6ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(35, 35, 35, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.mo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 46px rgba(40, 26, 90, .12);
}

.mo-card > * { margin-block-start: 0; }

/* Fixed aspect ratio so all three media headers agree, which is
   what lands the three CTAs on one baseline. A photograph or a
   render drops straight in here at the same ratio. */
.mo-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--accent-soft);
  border-bottom: 1px solid #e8e6ef;
}

.mo-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mo-card__num {
  position: absolute;
  top: 14px;
  left: 16px;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--accent);
  opacity: .65;
}

/* Render variant. The image is painted after the number, so the number needs a
   stacking context of its own plus a scrim, or it disappears into the photo. */
.mo-card__media--photo {
  padding: 0;
  background: #efece7;
}

.mo-card__media--photo::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 96px;
  background: linear-gradient(to bottom, rgba(20, 18, 28, .5), rgba(20, 18, 28, 0));
  pointer-events: none;
}

.mo-card__media--photo .mo-card__num {
  z-index: 2;
  color: #fff;
  opacity: 1;
}

.mo-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 26px 26px 28px;
}

.mo-card__body > * { margin-block-start: 0; }

.mo-card__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--accent);
}

/* Two classes, not one. The theme sets
   `.standard-page__content h2, h3, h4 { color: var(--wps-purple) }` at
   specificity 0,1,1, which beats a bare `.mo-card__title` at 0,1,0 and
   painted all three card headings brand purple. `.mo-card .mo-card__title`
   is 0,2,0 and wins without !important, the same way `.opt-card .opt-title`
   does. Measured with which-rule.mjs, not eyeballed. */
.mo-card .mo-card__title {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--text-heading);
}

.mo-card__promise {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #eceaf2;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-heading);
}

.mo-card__desc {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-body);
}

/* Pushes every CTA to the bottom of its card, so three cards of
   different copy length still line their buttons up. */
.mo-card .choice-list { flex: 1 1 auto; }
.mo-card__cta { margin: 22px 0 0; }

/* Gutenberg's own .wp-block-buttons > .wp-block-button rule wins
   against a bare class, so the width override needs the same
   scope the other product pages use. */
:is(.standard-page__content, .editor-styles-wrapper) .mo-card__cta .wp-block-button,
:is(.standard-page__content, .editor-styles-wrapper) .mo-card__cta .wp-block-button__link {
  width: 100%;
}

.mo-card--small { --accent: var(--mo-teal); --accent-soft: var(--mo-teal-soft); }
.mo-card--mid   { --accent: var(--mo-purple); --accent-soft: var(--mo-purple-soft); }
.mo-card--hq    { --accent: var(--mo-deep); --accent-soft: var(--mo-deep-soft); }

.mo-grid__note {
  margin: 26px 0 0;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Traditional vs managed ----------
   The base .compare-table sets white-space: nowrap on thead th and
   td.num, which suits a 4-word pricing cell and blows this table
   off the page: several cells here run to six words. Overridden
   rather than reworked, so the shared component stays as it is for
   the pages already using it. */
.mo-cmp__table thead th,
.mo-cmp__table td.num { white-space: normal; }

.mo-cmp__table thead th { width: 30%; vertical-align: bottom; }
.mo-cmp__table thead th:first-child { width: 40%; }

.mo-cmp__table tbody th {
  padding: 18px 22px;
  border-bottom: 1px solid #e8e8e8;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: var(--text-heading);
  vertical-align: middle;
}

.mo-cmp__table tbody tr:last-child th { border-bottom: none; }

.mo-cmp__table tbody td.num { text-align: left; }

/* The column the page is arguing for. A tint plus a left hairline
   is enough; a full accent fill would fight the green Included
   labels sitting inside it. */
.mo-cmp__table thead th.mo-cmp__ours { background: #2c2450; }
.mo-cmp__table tbody td.mo-cmp__ours {
  background: rgba(139, 92, 246, .045);
  border-left: 1px solid #ece8f7;
  border-right: 1px solid #ece8f7;
}
.mo-cmp__table tbody tr:hover td.mo-cmp__ours { background: rgba(139, 92, 246, .075); }

/* ---------- Traditional vs managed: density and hierarchy ----------
   Seventeen rows at 20px vertical padding ran the band to 1575px at 1440 for
   a table people scan rather than read, and seventeen identical white rows
   gave the eye no rail to follow across. Tighter rows, a stripe, and a clear
   winner column. */
.mo-cmp__table { font-size: 14.5px; }

.mo-cmp__table thead th {
  padding: 16px 22px;
  font-size: 11.5px;
  letter-spacing: 1.2px;
}

.mo-cmp__table tbody th,
.mo-cmp__table tbody td { padding: 14px 22px; }

.mo-cmp__table tbody th { font-size: 14.5px; }

/* Three columns, three grounds. The label column and the traditional column
   shared the same white body and the same navy header cell, so the header
   read as one wide dark block and the eye could not find where the row label
   ended. Each column now has its own ground and its own zebra step, written
   out per column rather than as one generic stripe, because a generic stripe
   at :nth-child specificity kept beating the per-column rules. Header runs
   darkest to brand, left to right: the axis, then them, then us. */
.mo-cmp__table thead th:first-child { background: #12121f; }
.mo-cmp__table thead th.num:not(.mo-cmp__ours) { background: #26263c; }

/* Column 1, the row label. Lightest, it is the axis and not a value. */
.mo-cmp__table tbody th { background: #fff; }
.mo-cmp__table tbody tr:nth-child(even) th { background: #faf9fc; }

/* Column 2, the traditional office. A neutral grey so it sits visibly apart
   from the label column without competing with the purple on its right. */
.mo-cmp__table tbody td:not(.mo-cmp__ours) {
  background: #f5f5f8;
  border-left: 1px solid #ebebf1;
}
.mo-cmp__table tbody tr:nth-child(even) td:not(.mo-cmp__ours) { background: #efeff4; }

/* The traditional column is the option the page argues against, so it
   recedes. Muted, never bold. */
.mo-cmp__table tbody td:not(.mo-cmp__ours) { color: var(--text-muted); }

.mo-cmp__table thead th.mo-cmp__ours {
  background: linear-gradient(160deg, #3b2a6b, #2b2350);
  color: #fff;
}

.mo-cmp__table tbody td.mo-cmp__ours {
  background: rgba(139, 92, 246, .06);
  border-left: 1px solid #e7e1f5;
  border-right: 1px solid #e7e1f5;
  color: var(--text-heading);
}

/* Written after the zebra rule so the tinted column keeps its identity on
   striped rows instead of losing to the later, equally specific stripe. */
.mo-cmp__table tbody tr:nth-child(even) td.mo-cmp__ours { background: rgba(139, 92, 246, .105); }
.mo-cmp__table tbody tr:hover td.mo-cmp__ours { background: rgba(139, 92, 246, .15); }

/* Rows where both columns genuinely say the same thing (rent, service
   charges) held the most prominent position while telling the reader
   nothing. Muted on BOTH sides so the eye drops to the rows that differ.
   Written after the .mo-cmp__ours colour rule and matching its specificity,
   or the right-hand cell keeps the darker treatment and implies a win. */
.mo-cmp__table tbody td.mo-cmp__same { color: var(--text-muted); font-weight: 400; }

/* "Included" nine times over is monotonous as plain text. The tick turns each
   one into a mark you scan rather than a word you read. */
.mo-cmp__table .spec-yes {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  color: #157a58;
}

.mo-cmp__table .spec-yes::before {
  content: "✓";
  flex: none;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #dff5eb;
  color: #157a58;
  font-size: 10.5px;
  font-weight: 800;
}

/* ---------- Traditional vs managed, narrow screens ----------
   The shared .compare-cards pattern is two cards of every row,
   which at seventeen rows is thirty-four lines of one-word
   context. Stacked per requirement instead, so each comparison
   stays next to the thing being compared. */
.mo-cmp__stack { display: none; }

.mo-result {
  margin: clamp(30px, 4vw, 44px) auto 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
  text-align: center;
}

.mo-result strong { color: var(--text-heading); font-weight: 700; }

/* ---------- One agreement, not eight ----------
   First build put ragged supplier chips on the left and a single sentence on
   the right. Nothing lined up, so there was nothing to read across, and the
   right panel sat mostly empty. Now both panels carry the SAME eight rows:
   on the left each one is its own contract, on the right all eight sit
   inside one agreement. The comparison is the point, so the two sides have
   to be structurally identical. */
.mo-consol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  align-items: stretch;
  margin-top: clamp(36px, 5vw, 54px);
}

.mo-consol__side {
  display: flex;
  flex-direction: column;
  padding: 30px 30px 32px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  background: rgba(255, 255, 255, .04);
}

.mo-consol__cap {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* Was a large 08 / 01 numeral. Two zero-padded figures with no unit read as
   a code rather than a count, and the reader had to look down to the label to
   learn what they counted. A plain headline says it outright; the eight and
   the one now live in the sentence under it, where they have a noun. */
.mo-consol .mo-consol__title {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .82);
}

.mo-consol__lead {
  margin: 12px 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}

.mo-consol__list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}

.mo-consol__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 14.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .62);
}

/* A hollow ring on the left: an open item, still yours to arrange. */
.mo-consol__list li::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
}

/* A filled tick on the right: the same item, already handled. Both lists
   keep identical row heights so the eye can track straight across. */
.mo-consol__list--done li { color: #fff; }

.mo-consol__list--done li::before {
  content: "✓";
  display: grid;
  place-items: center;
  border: none;
  background: var(--mo-teal-bright, #33cc99);
  color: #10241c;
  font-size: 10px;
  font-weight: 800;
}

.mo-consol__foot {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(255, 255, 255, .5);
}

/* The payoff panel. It is the only thing on the page carrying brand colour at
   full strength, and it now has the same amount of content as the panel it
   is arguing against, so the weight is earned rather than decorative. */
.mo-consol__side--one {
  border-color: rgba(167, 139, 250, .38);
  background: linear-gradient(158deg, rgba(139, 92, 246, .28), rgba(51, 204, 153, .12));
}

.mo-consol__side--one .mo-consol__cap { color: rgba(255, 255, 255, .78); }
.mo-consol .mo-consol__side--one .mo-consol__title { color: #fff; }
.mo-consol__side--one .mo-consol__lead { color: rgba(255, 255, 255, .88); }
.mo-consol__side--one .mo-consol__foot { color: #fff; }

/* ---------- Ecosystem: four items, not three ----------
   .eco-row is a hard three-column grid and this page has four
   items, so it needs its own track count. Defined after the base
   rule, which is the whole reason this block sits at the end of
   the file. */
.eco-row--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mo-cta__note {
  margin: 20px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .eco-row--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .mo-hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .mo-hero__plate { max-width: 620px; margin-inline: auto; }
  .mo-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .mo-consol { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .eco-row--four { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* .compare-wrap is display:none from here down, so the stack
     takes over. Each row keeps its own label, which is what the
     shared two-card pattern loses at this many rows. */
  .mo-cmp__stack { display: grid; gap: 12px; }

  .mo-cmp__srow {
    padding: 16px 18px;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(35, 35, 35, .05);
  }

  .mo-cmp__slabel {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-heading);
  }

  .mo-cmp__scols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .mo-cmp__scols span {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-body);
  }

  .mo-cmp__scols b {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .mo-cmp__scols .is-ours {
    padding-left: 12px;
    border-left: 2px solid var(--mo-purple);
    color: var(--text-heading);
    font-weight: 600;
  }

  .mo-cmp__scols .is-ours b { color: var(--mo-purple); }
}

@media (max-width: 560px) {
  .mo-hero__facts li { padding: 0 16px; }
  .mo-hero__ctas .wp-block-button,
  .mo-hero__ctas .wp-block-button__link { width: 100%; }
  .mo-cmp__scols { grid-template-columns: 1fr; }
}

/* The theme pads below the last section (50px on
   .standard-page__content, 63px on main) over main's own #f2f2f2,
   which shows as a light strip above the footer on any page that
   ends in a full-bleed band. Same :has() fix the Brand
   Partnerships page uses, scoped by .mo-cta so it changes only
   this page. .cta-section alone would have repadded every live
   page that ends in one, which is most of the product pages. */
main.standard-page:has(.standard-page__content > .mo-cta:last-child) { padding-bottom: 0; }
.standard-page__content:has(> .mo-cta:last-child) { padding-bottom: 0; }