/**
 * Layout and content tweaks on top of the captured Squarespace design.
 * Interaction states for buttons live in buttons.css.
 */

/* ── 1. Hero optical alignment ────────────────────────────────────────────
 * Every hero block already sits on the same 280px grid line, but large display
 * type carries proportionally larger left side-bearing, so the headline *reads*
 * as indented against the body copy and the button pills below it.
 *
 * Measured ink positions at 1440px before this rule:
 *     buttons (pill edge)  280      "Turn Your Story"  (T)  282
 *     "Make your business" 281      "Into a Winning"   (I)  286
 *
 * The offset is in em so it scales with the heading rather than over-correcting
 * on mobile, where the type is a third of the size.
 */
#block-yui_3_17_2_1_1752084434997_13443 h1 {
  margin-left: -0.025em;
}

/* ── 2. Social proof strip ────────────────────────────────────────────────
 * A manually paged row, not a marquee. The viewport is an ordinary
 * horizontally scrollable element, so touch swipe, trackpad and keyboard all
 * work without any JavaScript; carousel.js only wires the two arrows and
 * disables them at the ends.
 */
.sol-proof {
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
  background: var(--sol-proof-bg, #fdf6f0);
}

.sol-proof__title {
  margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
  padding: 0 1.5rem;
  max-width: 60rem;
  text-align: center;
  font-family: var(--heading-font-font-family, inherit);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  line-height: 1.3;
  color: #1a2223;
  text-wrap: balance;
}

.sol-proof__frame {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 clamp(0.5rem, 3vw, 2.5rem);
  max-width: 82rem;
  margin-inline: auto;
}

.sol-proof__viewport {
  flex: 1;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Native bars differ wildly between platforms and would sit under the
     logos; the arrows and swipe are the affordance instead. */
  scrollbar-width: none;
}
.sol-proof__viewport::-webkit-scrollbar { display: none; }

.sol-proof__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  width: max-content;
  padding: 0.5rem clamp(0.5rem, 2vw, 1.5rem);
}

.sol-proof__logo {
  flex: none;
  height: clamp(30px, 3.4vw, 46px);
  width: auto;
  scroll-snap-align: center;
  /* Ten logos in ten different palettes read as clutter; desaturating unifies
     them and lets the page's own pink and orange stay dominant. */
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.sol-proof__logo:hover {
  filter: grayscale(0);
  opacity: 1;
}

.sol-proof__arrow {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid #d33371;
  border-radius: 50%;
  background: transparent;
  color: #d33371;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.sol-proof__arrow:hover:not(:disabled) {
  background: #d33371;
  color: #fdf6f0;
}

.sol-proof__arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.sol-proof__arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Nothing to page through — hide the controls rather than show dead buttons. */
.sol-proof.is-static .sol-proof__arrow { display: none; }

@media (max-width: 640px) {
  .sol-proof__arrow { width: 38px; height: 38px; }
  .sol-proof__frame { gap: 0.25rem; padding-inline: 0.25rem; }
}

/* The orbit graphic keeps its original artwork and needs no styling here; it is
   only repositioned, via its grid-area in the page markup. */

/* ── 3. Services: three service cards, not a carousel ─────────────────────
 * The first block on /services is a Squarespace UserItemsListCarousel. Its
 * slides are already laid out as a three-column grid and nothing scrolls, so
 * the paging arrows never had anything to page — they were decoration over a
 * static row. This drops them and lines the three columns up.
 */
.user-items-list-carousel__arrow-wrapper,
.user-items-list-carousel .mobile-arrows {
  display: none;
}

/* The slide counter is an invisible aria-live region. With no paging left it
   would announce "Item 1 of 3" about something that never changes, so it goes
   from the accessibility tree too. */
.user-items-list-carousel [aria-live] {
  display: none;
}

/* No vertical-alignment rule here on purpose. The block used to carry
 * data-alignment-vertical="middle", which centred each slide in the row — and
 * since the three descriptions differ in length, that pushed each icon to a
 * different height, landing the headings at 361 / 369 / 349px. Squarespace
 * already ships a "top" variant of that attribute, so the markup now says
 * data-alignment-vertical="top" and its own stylesheet does the work. */

/* Turning it into a real grid.
 *
 * The three-across look on desktop was never grid placement: every slide is
 * assigned the same cell (grid-area 1/1/2/2) and then pushed sideways by an
 * inline `transform: translate3d(435px, 0, 0)` written by the carousel
 * controller. On a phone the grid drops to one column, the offsets stay, and
 * an overflow:hidden revealer clips them — so with the arrows gone, slides 2
 * and 3 became unreachable and only "Business Essentials" was visible.
 *
 * Clearing the placement and the transform lets the slides flow normally:
 * three columns on desktop, stacked on mobile. transform needs !important
 * because it is an inline style. */
.user-items-list-carousel__slide {
  grid-column: auto !important;
  grid-row: auto !important;
  transform: none !important;
}

/* Matches the specificity of Squarespace's
   `[data-show-adjacent-slides="true"] … { overflow: hidden }` at <576px. */
.user-items-list-carousel[data-show-adjacent-slides='true'] .user-items-list-carousel__slides-revealer {
  overflow: visible;
}

.user-items-list-carousel .user-items-list-carousel__slides {
  grid-auto-flow: row;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

@media (max-width: 900px) {
  .user-items-list-carousel .user-items-list-carousel__slides {
    grid-template-columns: 1fr;
    row-gap: clamp(2.5rem, 7vw, 4rem);
  }
}

/* ── 4. Testimonials ──────────────────────────────────────────────────────
 * Replaces two screenshots of LinkedIn cards with real quote markup, paged by
 * the same carousel.js the logo strip uses. Cards are a fixed width so several
 * are visible at once on desktop and one fills the screen on a phone.
 */
.sol-quotes {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

.sol-quotes__title {
  margin: 0 auto 0.9rem;
  padding: 0 1.5rem;
  text-align: center;
  font-family: var(--heading-font-font-family, inherit);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.15;
  color: #d33371;
  text-wrap: balance;
}

.sol-quotes__meta {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 0 1.5rem;
  max-width: 44rem;
  text-align: center;
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  line-height: 1.5;
  color: #1a2223;
  opacity: 0.8;
  text-wrap: balance;
}
.sol-quotes__meta strong { color: #d33371; }
.sol-quotes__meta a { color: inherit; }

.sol-quotes__frame {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 clamp(0.5rem, 3vw, 2.5rem);
  max-width: 86rem;
  margin-inline: auto;
}

.sol-quotes__viewport {
  flex: 1;
  overflow-x: auto;
  /* overflow-x:auto forces overflow-y to compute as auto, which clipped the
     taller cards and left the box scrolling vertically. Saying visible is
     illegal in that pairing, so the vertical axis is clipped deliberately and
     the track carries enough padding for the card shadows. */
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Without this, snapping parks the first card at the track's own left
     padding, so scrollLeft never returns to 0 and the back arrow never
     disables. */
  scroll-padding-inline: clamp(0.5rem, 1.5vw, 1rem);
  scrollbar-width: none;
}
.sol-quotes__viewport::-webkit-scrollbar { display: none; }

.sol-quotes__track {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: max-content;
  margin: 0;
  padding: 0.5rem clamp(0.5rem, 1.5vw, 1rem);
  list-style: none;
}

.sol-quote {
  flex: none;
  display: flex;
  /* Set per card by carousel.js: 1 when the card is fully in view, falling
     towards 0 as the viewport edge cuts across it. Defaults to 1 so the row
     looks right with no JavaScript. */
  --edge: 1;
  transform: scale(calc(0.9 + 0.1 * var(--edge)));
  opacity: calc(0.4 + 0.6 * var(--edge));
  transform-origin: center;
  /* No transition: the value already moves continuously with the scroll, and a
     transition would lag behind it. No will-change either — the scale already
     promotes the card, and adding it changed text antialiasing elsewhere on
     this site for no gain. */
  /* On a phone the arrows eat ~7rem of the row, so sizing against the
     viewport directly keeps one card whole with the next just peeking,
     rather than clipping the first card by a couple of pixels. */
  width: min(20rem, calc(100vw - 8rem));
  scroll-snap-align: start;
}

/* `height: 100%` here fought the flex sizing — the card resolved to the row
   height before the figure had laid out, so its content overflowed. Letting
   the figure flex inside a stretched item gives every card the same height
   without clipping. */
.sol-quote figure {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: #fff;
  border-radius: 18px;
  /* A soft lift rather than a border, so the cards read as separate objects
     against the cream without drawing hard lines. */
  box-shadow: 0 14px 34px -22px rgba(26, 34, 35, 0.5);
}

.sol-quote__text {
  margin: 0;
  flex: 1;
  font-size: 1rem;
  line-height: 1.6;
  color: #1a2223;
}
.sol-quote__text::before { content: '“'; }
.sol-quote__text::after { content: '”'; }

.sol-quote__who {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.sol-quote__avatar {
  grid-row: span 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.sol-quote__avatar--text {
  display: grid;
  place-items: center;
  background: #fdf6f0;
  color: #d33371;
  font-family: var(--heading-font-font-family, inherit);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.sol-quote__id { display: grid; gap: 0.1rem; min-width: 0; }
.sol-quote__name { font-weight: 600; font-size: 0.98rem; color: #1a2223; }
.sol-quote__role {
  font-size: 0.85rem;
  line-height: 1.35;
  color: #1a2223;
  opacity: 0.65;
  /* Narrower cards wrap these two-part roles; pretty keeps the last word
     off a line of its own ("Forbes 30 Under / 30"). */
  text-wrap: pretty;
}

.sol-quotes__arrow {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid #d33371;
  border-radius: 50%;
  background: transparent;
  color: #d33371;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.sol-quotes__arrow:hover:not(:disabled) { background: #d33371; color: #fdf6f0; }
.sol-quotes__arrow:disabled { opacity: 0.25; cursor: default; }
.sol-quotes__arrow svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

/* carousel.js sets is-static when everything already fits. */
.sol-quotes.is-static .sol-quotes__arrow { display: none; }

@media (max-width: 640px) {
  .sol-quotes__arrow { width: 38px; height: 38px; }
  .sol-quotes__frame { gap: 0.25rem; padding-inline: 0.25rem; }
}

/* ── 5. GrowthMentor booking ──────────────────────────────────────────────
 * Sits after the Winning Deck Deal on /services: the paid programme first,
 * then a free, no-commitment way in for founders who are not there yet.
 */
.sol-gm {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  padding-inline: 0;
  background: #fdf6f0;
}

.sol-gm__inner {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

/* The logo replaces the old text eyebrow: it says who this is with far more
   authority than the words did. Height-capped so the wordmark stays legible
   without dominating the heading below it. */
.sol-gm__logo {
  display: block;
  height: clamp(26px, 2.6vw, 34px);
  width: auto;
  margin: 0 auto 1.4rem;
}

.sol-gm__title {
  margin: 0 0 1.1rem;
  font-family: var(--heading-font-font-family, inherit);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  line-height: 1.15;
  color: #1a2223;
  text-wrap: balance;
}

.sol-gm__copy {
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
  max-width: 38rem;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  color: #1a2223;
  opacity: 0.85;
  text-wrap: pretty;
}

/* Matches the site's pill CTAs. buttons.css and buttons.js both include
   .sol-cta, so it lifts and glows exactly like every other button. */
.sol-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85em 1.9em;
  border: 2px solid transparent;
  border-radius: 300px;
  background: #d33371;
  color: #fff;
  font-family: var(--heading-font-font-family, inherit);
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}

.sol-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.sol-cta:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .sol-cta svg, .sol-cta:hover svg { transition: none; transform: none; }
}

@media (max-width: 480px) {
  /* Keep the pill from stretching the full column width on a phone. */
  .sol-cta {
    padding: 0.8em 1.5em;
    font-size: 0.95rem;
  }
}

/* ── 6. Mobile tap targets ────────────────────────────────────────────────
 * Measured at 390px before this block: footer links were 29px tall with
 * "WhatsApp" and "Telegram" sharing an edge at exactly 0px apart, the three
 * social icons were 24x24 on a 38px pitch, and the testimonial source labels
 * were 29px. All clear WCAG 2.5.8's 24px floor but sit well under the 44px
 * Apple and Google both ask for, and adjacent targets that touch are the case
 * where a mis-tap actually costs someone something.
 *
 * Padding does the work rather than a pseudo-element overlay: an invisible
 * 44px box over links spaced 29px apart would overlap its neighbour, so taps
 * near the boundary would land on the wrong link — worse than a small target.
 */
@media (max-width: 640px) {
  footer .sqs-html-content a {
    display: inline-block;
    /* Its own leading, so the paragraph's larger line-height below opens a gap
       between the links instead of simply making each one taller. */
    line-height: 1.5;
    padding-block: 0.55rem;
  }

  /* The links sit in their own paragraphs; spacing them apart is what makes
     room for the taller targets without them colliding. */
  footer .sqs-html-content p {
    margin-block: 0.55rem;
  }

  /* WhatsApp and Telegram share one paragraph, split by a <br>, so margin
     cannot separate them — the line box has to grow instead. Scoped with
     :has() so the tagline paragraph keeps its normal leading. */
  footer .sqs-html-content p:has(a) {
    line-height: 3.3;
  }

  /* 24x24 icons on a 38px pitch: grow the hit area and the gap together, or
     the enlarged targets simply overlap each other. Not scoped to the footer —
     /contacts repeats the same icon row in the page body. */
  .sqs-svg-icon--list {
    gap: 0.55rem;
  }
  a.sqs-svg-icon--wrapper {
    padding: 9px;
    margin: -9px;
  }

}

@media (max-width: 640px) {
  /* The email, WhatsApp and Telegram links on /contacts sit mid-sentence, so
     they cannot become 44px blocks without wrecking the prose — WCAG 2.5.8
     exempts inline targets for exactly that reason. They are the page's main
     call to action though, and 22px is under even the 24px floor, so vertical
     padding grows the hit area. On an inline element that costs no layout: the
     line boxes do not move, and "Email at …" and "Message Me on: …" are
     already separated by a blank line, so nothing collides. */
  #block-cad4da0d56e931f68cfb .sqs-html-content p a {
    padding-block: 0.42rem;
  }
}

/* ── 7. Text highlight circles ────────────────────────────────────────────
 * Squarespace's "circle" text highlight is drawn at runtime by a script that
 * writes an absolutely positioned <div class="TextShape-node"> next to the
 * word. The static capture froze those at their capture-time coordinates, so
 * the ellipse for "effectively" sat about 150px to its right, drawing an empty
 * loop in the margin — and on mobile several of them hung off the viewport.
 * Those twelve elements are removed; the circle is redrawn here instead, on
 * the span itself, so it tracks the word at any width.
 *
 * The path is the original artwork lifted from the captured SVG, used as a
 * mask so the colour stays controllable. preserveAspectRatio="none" lets it
 * stretch to whatever the word measures.
 */
.sqsrte-text-highlight {
  position: relative;
  /* The circle is inset past the word's own box, so the neighbouring words need
     clearance — margin rather than the literal padding spaces the original
     markup used, which rendered as visible gaps mid-sentence. */
  margin-inline: 0.3em;
}

.sqsrte-text-highlight::after {
  content: '';
  position: absolute;
  inset: -0.3em -0.55em;
  pointer-events: none;
  background-color: var(--sol-circle, #d33371);
  -webkit-mask-image: var(--sol-circle-art);
  mask-image: var(--sol-circle-art);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

:root {
  --sol-gutter: 5.8%;
  --sol-circle-art: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11 -2 128 33' preserveAspectRatio='none'%3E%3Cpath d='M33.4,26.35 C 58.7,27.8 114,26.02 114,12.16 C 114,0.445 77.5,0 51.5,0 S -8.76,0.445 -8.76,11.76 S 19.9,29.29 81.8,27.8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* No section-based colour override. Squarespace's `dark` class on a section is
   a colour-theme name, not a dark background — the cream hero carries it — so
   keying off it painted the circle cream on cream. Sections that really are
   dark are handled individually below, by block id. */

/* ── 8. Section headings share the site's content column ──────────────────
 * Everything Squarespace lays out starts at the same left edge — the hero h1
 * sits at 278px of 1440. These sections were centred, so their headings began
 * somewhere else on every page. Aligning them left against the same column is
 * what makes the whole page read as one grid.
 *
 * Measured off the hero h1: 5.8% either side, 19.3% above Squarespace's 768px
 * breakpoint.
 */
@media (min-width: 768px) {
  :root { --sol-gutter: 19.3%; }
}


.sol-proof__title,
.sol-quotes__title,
.sol-quotes__meta {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--sol-gutter);
  text-align: left;
}

/* This one stays centred. It is a standalone offer block rather than a section
   of the page's main column, and centring sets it apart from the programme
   pitch directly above it. */
.sol-gm__inner {
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  text-align: center;
}

.sol-gm__logo { margin: 0 auto 1.4rem; }
.sol-gm__copy { margin-inline: auto; max-width: 38rem; }

/* The carousels align to the same column, so their first card starts where the
   heading does rather than floating in from the page edge. */
.sol-proof__frame,
.sol-quotes__frame {
  max-width: none;
  margin-inline: 0;
  padding-inline: calc(var(--sol-gutter) - 3.2rem);
}

.sol-quotes__frame {
  padding-right: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  /* carousel.js pins --edge to 1 as well; this covers the no-JS case. */
  .sol-quote {
    transform: none;
    opacity: 1;
  }
}