/* ============================================================
   Reflections — local migration overrides
   Loaded AFTER the Webflow stylesheet so these rules win.
   ============================================================ */

/* ------------------------------------------------------------
   Coherent scroll-triggered fade-ups.
   Webflow's IX2 stagger felt random — every `data-w-id` element
   had its own JSON-defined duration/easing. A small inline script
   in each page tags IX2 fade-up elements with `.rl-fade-pending`
   on DOMContentLoaded and toggles `.rl-fade-active` via an
   IntersectionObserver as each element enters the viewport. CSS
   here defines a single shared duration, easing, and rise so every
   fade-up looks identical and fires only when its element scrolls
   into view. `!important` is needed to beat IX2's per-frame inline
   style writes. Each subsequent sibling within a parent staggers
   by 80ms for a clean top-to-bottom cascade.
   IX2 still runs for hover, lightbox, dropdown interactions.
   ------------------------------------------------------------ */
.rl-fade-pending {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  transition:
    opacity 550ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 550ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
/* IX2 stages the footer-content-bottom row at opacity:0 via the
   "Fade 0.3s" action list, then animates it to 1 on scroll-into-view.
   Our rl-fade script doesn't pick this row up (no inline opacity:0
   in the HTML — IX2 adds it via JS at runtime), so IX2 is the only
   thing trying to reveal it, and in Chrome the trigger sometimes
   never fires. Pin opacity:1 so the footer is never invisible. */
footer .footer-content-bottom {
  opacity: 1 !important;
  transform: none !important;
}
/* Terms & Privacy body content ships with inline opacity:0 on its two
   split-content columns (Webflow's scroll-into-view fade). The trigger
   doesn't always fire on this page, leaving the legal text invisible
   on a white background. Force visible. */
.section.terms-conditions .split-content.terms-conditions-left,
.section.terms-conditions .split-content.terms-conditions-right {
  opacity: 1 !important;
  transform: none !important;
}
.rl-fade-pending:nth-of-type(2) { transition-delay:  80ms !important; }
.rl-fade-pending:nth-of-type(3) { transition-delay: 160ms !important; }
.rl-fade-pending:nth-of-type(4) { transition-delay: 240ms !important; }
.rl-fade-pending:nth-of-type(5) { transition-delay: 320ms !important; }
.rl-fade-pending:nth-of-type(6) { transition-delay: 400ms !important; }
.rl-fade-pending:nth-of-type(7) { transition-delay: 480ms !important; }
.rl-fade-pending:nth-of-type(8) { transition-delay: 560ms !important; }
.rl-fade-active {
  opacity: 1 !important;
  transform: none !important;
}
/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .rl-fade-pending,
  .rl-fade-active {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   GLOBAL: prevent horizontal page overflow.
   Several decorative elements use negative offsets that can push
   the page wider than the viewport. Clip at the root.
   ------------------------------------------------------------ */
html,
body {
  /* Belt and braces: `clip` is the modern, scrollbar-suppressing
     overflow value; `hidden` is the fallback for browsers that
     don't honour `clip` on the body/html (some Safari versions
     keep the page wider than viewport even with `clip` set).
     Both together guarantee nothing pushes the page wider than
     the visible viewport. */
  overflow-x: hidden !important;
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
}
.page-wrapper {
  overflow-x: clip;
  max-width: 100vw;
  width: 100%;
}
.section {
  /* `overflow-x: hidden` forces overflow-y to compute to `auto`,
     which creates an unwanted vertical scrollbar inside any
     section whose content overflows (e.g. the Highlight Reel
     card on the pricing page scrolling like an iframe). Use
     `clip` instead — clips horizontally without affecting the
     vertical axis. */
  overflow-x: clip;
  max-width: 100vw;
}
/* Decorative shapes that Webflow positions with negative `right`
   to bleed off the page edge. These bypass section-level clipping
   in some Safari versions and show as right-edge overflow. Snap
   them flush to 0 so the visual bleed is gone. */
.bg.cta-1-shape-2,
.bg.newsletter-v1-shape-2,
.bg.home-v1-testimonials-shape-2,
.bg.terms-conditions-hero-shape-2,
.bg.about-v1-hero-shape-2,
.bg.pricing-shape-2,
.bg.pricing-shape-4,
.business-gift-decor-top-right,
.business-hero-decor-top-right {
  right: 0 !important;
}
/* `.container-default` defaults to 1440px width (or 1359px at
   ≥1440 viewport per Webflow). Clamp against `100%` (its parent's
   content width) — NOT `100vw` — because `.section` adds 40px L/R
   padding, so at narrow viewports a 100vw clamp lets the container
   push 80px past the section and out of the visible viewport. */
.container-default,
.container-default.w-container,
.container-default.new.w-container {
  max-width: min(1440px, 100%) !important;
  box-sizing: border-box;
}
/* Belt: force every common wrapper class to respect its container. */
.home-v3-testimonials-wrapper,
.home-v3-testimonials-wrapper.case-study,
.image-wrapper,
.blog-v3-hero-featured-grid,
.blog-v3-grid,
.blog-v3-featured-items-grid {
  max-width: 100%;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   VIDEOS: high-spread shadow so video cards lift off the page.
   Four layers — a dark cushion + tighter near-shadow that ground
   the card on light backgrounds, plus a soft white halo + thin top
   highlight that read as lift on dark backgrounds. Each pair fades
   into the opposite background and is invisible there. Targets only
   video containers, not photo thumbnails or team-bio image wrappers.
   ------------------------------------------------------------ */
.image-wrapper.home-v3-testimonials:has(.home-v3-testimonials-video-button),
.video.w-video.w-embed {
  box-shadow:
    0 40px 80px -20px rgba(15, 23, 42, 0.35),
    0 16px 32px -12px rgba(15, 23, 42, 0.22),
    0 28px 60px -10px rgba(255, 255, 255, 0.08),
    0 -1px 0 0 rgba(255, 255, 255, 0.06) inset;
}

/* Team page bio photos — match the same four-layer lift the
   videos use elsewhere on the page so the headshots feel symmetric
   with the Suzanne McFadden video and don't sit flat against the
   cream section bg. */
body.team-page .image-wrapper.home-v1-testimonials {
  box-shadow:
    0 40px 80px -20px rgba(15, 23, 42, 0.35),
    0 16px 32px -12px rgba(15, 23, 42, 0.22),
    0 28px 60px -10px rgba(255, 255, 255, 0.08),
    0 -1px 0 0 rgba(255, 255, 255, 0.06) inset;
}

/* On dark-navy sections (.section.bg-primary-1, .home-sections), the
   navy-tinted shadow above blends into the background and the lift
   disappears. Use a pure-black shadow that's noticeably darker than
   the navy bg so the same depth effect reads here too. */
.section.bg-primary-1 .image-wrapper.home-v3-testimonials:has(.home-v3-testimonials-video-button),
.section.bg-primary-1 .video.w-video.w-embed,
.section.home-sections .image-wrapper.home-v3-testimonials:has(.home-v3-testimonials-video-button),
.section.home-sections .video.w-video.w-embed,
.business-hero-section .image-wrapper.home-v3-testimonials:has(.home-v3-testimonials-video-button),
.business-testimonial-section .image-wrapper.home-v3-testimonials:has(.home-v3-testimonials-video-button) {
  box-shadow:
    0 40px 80px -16px rgba(0, 0, 0, 0.55),
    0 18px 36px -10px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 -1px 0 0 rgba(255, 255, 255, 0.12) inset;
}

/* Testimonials directly below each video inherit `background-color: #fff`
   and `padding` from the base `.div-block` rule, which renders them as
   opaque white cards that sit on top of the video's drop shadow and
   visually clip the lift. Strip the card chrome so the shadow can extend
   into the column area unobstructed. */
.div-block.testimonial {
  background-color: transparent;
  padding: 0;
}
/* On mobile the testimonial cards stack vertically and the default
   grid gap reads too tight — give each card a bit of bottom breathing
   room so quotes don't run together. */
@media (max-width: 767px) {
  .div-block.testimonial {
    margin-bottom: 32px;
  }
  .div-block.testimonial:last-child {
    margin-bottom: 0;
  }
}

/* Center the bottom CTA section across all pages. The base rule uses
   `justify-content: space-between` (text on left, button on right), and
   the >=1440px rule adds `padding-right: 140px` on the wrapper plus
   `margin-right: 40px` on the inner text container — both of which push
   the content off-center and make wide screens look more broken than
   narrow ones. Override at every breakpoint with a centered column. */
.cta-1-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-right: 0;
}
.cta-1-wrapper > .container-medium-637px {
  margin-left: auto;
  margin-right: auto;
}

/* On case-studies, keep the 200px gap on the card-side of the video (so
   the floating quote card has its space) but extend the video out to the
   wrapper's far edge — i.e. drop the `max-width: 70%` constraint that
   was leaving slack on the side opposite the card. Odd rows: card left,
   video extends to the right edge. Even rows: card right, video extends
   to the left edge. */
.container-default.case-studies .image-wrapper.home-v3-testimonials {
  max-width: none;
  width: calc(100% - 200px);
  margin-left: 200px;
  margin-right: 0;
}
.section > :nth-child(even of .container-default.case-studies) .image-wrapper.home-v3-testimonials {
  margin-left: 0;
  margin-right: 200px;
}

/* On even-indexed videos (2nd, 4th), flip the floating quote card to the
   right. `:nth-child(of)` counts only matching case-studies containers
   so we don't need to know about other siblings in the section. */
.section > :nth-child(even of .container-default.case-studies) .card.home-v3-testimonials {
  inset: 0% 0% 0% auto;
}
@media (min-width: 1440px) {
  .section > :nth-child(even of .container-default.case-studies) .card.home-v3-testimonials {
    inset: 20% 0% auto auto;
  }
}


/* ------------------------------------------------------------
   NAV: navbar's container should occupy the same content area as
   the hero/sections below so the brand logo lines up with the
   left-justified headline and the right-side CTA lines up with the
   right edge of the content. Inherit the main 1440 cap (set on
   .container-default above) and use the same 20px L/R padding so
   the edges match exactly.
   ------------------------------------------------------------ */
/* Switch .header.navbar from display:flex (Webflow default) to block
   so its child container centers via plain block-level margin:0 auto
   like the .section containers below — putting the navbar's content
   edges in the exact same x-coordinates as the hero. Internal flex
   layout for logo / nav / CTAs lives on .header-wrapper one level
   deeper, so vertical centering of the navbar items is preserved. */
.header.navbar {
  display: block !important;
}
.header.navbar > .container-default.w-container {
  padding-left: 20px;
  padding-right: 20px;
  /* Take the full 90px navbar height so .header-wrapper inside can
     flex-align its children vertically without collapsing. */
  height: 100%;
}
@media (max-width: 767px) {
  .header.navbar > .container-default.w-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Vertical alignment: Webflow's stock `.w-nav-menu { float: right }` and
   the wrapper's `line-height: 5px` break flex centering — logo, nav
   labels, and CTAs end up at three different vertical positions, none of
   them matching the visible white nav background. Reset to a clean
   single-row flex layout. */
.header.navbar .header-wrapper {
  line-height: normal;
  align-items: center;
  min-height: 60px;
}
.header.navbar .header-wrapper > .split-content,
.header.navbar .header-wrapper > nav.nav-menu {
  align-self: center;
  float: none;
}
/* Make both split-content wrappers flex so their children center vertically
   instead of sitting on a stale line-box baseline. */
.header.navbar .header-wrapper > .split-content.header-right,
.header.navbar .header-wrapper > .split-content.header-left {
  display: flex;
  align-items: center;
}
.header.navbar nav.nav-menu {
  margin-top: 0;
  margin-bottom: 0;
}
/* The logo's natural baseline sits below center inside its `.brand`
   inline-block; switch to flex so the SVG centers like the buttons do. */
.header.navbar .brand {
  display: inline-flex;
  align-items: center;
}
/* Webflow's >=1440px stylesheet adds `margin-top: 20px` to the logo and to
   the right-side CTA wrapper, which knocked them ~10px below the nav's
   visual center and out of line with the nav labels. */
.header.navbar .header-logo,
.header.navbar .split-content.header-left {
  margin-top: 0;
}
/* The nav labels' line-box sits slightly below visual centre relative
   to the logo and CTA buttons — Opensans has more headroom than
   descender, so flex centering by line box looks low. Nudge labels up
   a few pixels so they read centered against the nav bar. */
.header.navbar .header-navigation .nav-link {
  transform: translateY(-3px);
}

/* Wrapping list-item gets relative positioning so the absolute
   dropdown can anchor to it. */
.header.navbar .nav-item-wrapper.stories-dropdown {
  position: relative;
}

/* Caret next to the "Stories" label */
.stories-dropdown-caret {
  display: inline-block;
  margin-left: 8px;
  font-size: 1.25em;
  line-height: 1;
  transition: transform 0.18s ease;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.stories-dropdown:hover .stories-dropdown-caret,
.stories-dropdown:focus-within .stories-dropdown-caret {
  transform: rotate(180deg);
}

/* The dropdown menu itself.
   Left-aligned to the "Stories" nav link (not centred under it) so
   each item's icon lines up vertically with where the "Stories"
   label starts in the nav. The negative left offset compensates
   for the item's left padding so icons sit at the same x as the
   Stories label, not 16px to the right of it. */
.stories-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: -16px;
  transform: translateY(8px);
  min-width: 240px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12),
              0 2px 6px rgba(15, 23, 42, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 100;
}
.stories-dropdown:hover .stories-dropdown-menu,
.stories-dropdown:focus-within .stories-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Items in the dropdown */
.stories-dropdown-menu li {
  list-style: none;
}
.stories-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  /* Match `.nav-link` so the dropdown reads as a continuation of the top
     nav. Override `text-transform` because the >=1440px rule on
     `.header-navigation` forces uppercase, which the dropdown inherits. */
  color: var(--secondary-4);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  font-family: Opensans, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.125em;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.stories-dropdown-menu a:hover,
.stories-dropdown-menu a:focus {
  background-color: #f4ecd9;
  color: var(--primary-1);
}
.stories-dropdown-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #c2a14a;
}
img.stories-dropdown-icon {
  /* SVG-as-img can't take currentColor; keep its native colors */
  object-fit: contain;
}

/* Block the # link itself from being followed when the toggle is clicked */
.stories-dropdown-toggle {
  cursor: default;
}

/* Mobile: drop the "Stories" toggle entirely and surface "Family
   stories" and "Business stories" as top-level items at the same
   size/formatting as the other nav links (How It Works, Our Team,
   Pricing, Blog). There's plenty of room in the slide-out menu so
   no need for a submenu layer. */
@media (max-width: 991px) {
  /* Hide the "Stories ▾" toggle */
  .nav-item-wrapper.stories-dropdown > .stories-dropdown-toggle,
  .stories-dropdown-caret {
    display: none !important;
  }
  /* Surface the submenu as a sibling list at the top level */
  .stories-dropdown-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    display: contents !important;
  }
  .stories-dropdown-menu > li {
    list-style: none !important;
    margin: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    display: flex !important;
  }
  /* Make each submenu item read like a `.nav-link` */
  .stories-dropdown-menu > li > a {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--secondary-4) !important;
    font-family: Opensans, Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.125em !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
  }
  /* Hide the small SVG icons next to each item — top-level items
     don't have icons. */
  .stories-dropdown-menu .stories-dropdown-icon {
    display: none !important;
  }
  /* Collapse the empty wrapping <li.stories-dropdown> so it
     doesn't add a blank row of padding between siblings. */
  .nav-item-wrapper.stories-dropdown {
    display: contents !important;
  }
  /* Move the "Reserve Your Spot" CTA to the top of the slide-out
     drawer. The base button rule sets `margin-right: 24px` which
     was pushing the button past the menu's right edge (clipping).
     Reset that and force the CTA full-width inside the drawer. */
  .nav-item-wrapper.header-button-mobile {
    order: -1 !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
  }
  .nav-item-wrapper.header-button-mobile a.button-primary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Pull the menu items up so the CTA sits right below the
     navbar's logo+close row at the top of the drawer.
     Webflow's `.nav-menu { padding-top: 220px }` was leaving a
     huge gap; reduce to navbar height + small breathing room. */
  .nav-menu.w-nav-menu {
    padding-top: 100px !important;
    padding-bottom: 24px !important;
  }
  .header-navigation {
    margin-top: 0 !important;
  }

  /* Force the slide-out drawer and its contents to stay within the
     viewport. Webflow's [data-nav-menu-open] uses absolute
     positioning that, combined with the parent's `float: right`,
     sometimes lays the drawer's UL out past the right edge — the
     button inside then visibly clips. Lock everything to the
     viewport width with consistent box sizing. */
  .header.navbar .nav-menu.w-nav-menu,
  .header.navbar .nav-menu.w-nav-menu[data-nav-menu-open] {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    float: none !important;
  }
  .header.navbar .nav-menu.w-nav-menu .header-navigation {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Webflow's IX2 slide-in animation transforms the UL via
       inline `transform: translateX(...)`. When the animation is
       interrupted or the user re-opens the menu mid-state, the
       translate can leave the UL offset and clip its button.
       Force the resting state. */
    transform: none !important;
    -webkit-transform: none !important;
  }
  .header.navbar .nav-menu.w-nav-menu .nav-item-wrapper.header-button-mobile,
  .header.navbar .nav-menu.w-nav-menu .nav-item-wrapper.header-button-mobile a.button-primary {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* Match Webflow's smaller nav-link size at narrow phone widths */
@media (max-width: 479px) {
  .stories-dropdown-menu > li > a {
    font-size: 28px !important;
  }
}

/* ------------------------------------------------------------
   HERO: inherit the universal .container-default treatment (1440
   cap, 20px L/R padding) so the hero text and image columns sit at
   the same x-coordinates as the navbar above. The old override
   forced max-width:none + 110px padding to "match the nav's 110px
   inset"; the nav has since been changed to use 20px padding (so it
   aligns with section content), so the 110px hero override left the
   logo and headline visibly out of line.
   ------------------------------------------------------------ */
.home-screenshots-container {
  inset: 0 0 0 auto;
  width: 38%;
  max-width: 38%;
  align-items: center;
}
.home-screenshots-container > .screenshoots-grid {
  flex: 0 0 auto;
  min-width: 0;
  align-self: center;
}
.home-screenshots-container .screenshot-image {
  width: 446px;
  max-width: 446px;
  height: auto;
}

/* ------------------------------------------------------------
   "The magic, the mischief, and the memories" testimonial
   section — give the heading container and the video container
   exactly the same horizontal footprint so their centres AND
   their edges align. Webflow's defaults give them different
   widths (heading max-width:100%, video max-width:1440px) which
   leaves them centred at the same x but with different left/right
   gaps — the user sees that as a visual misalignment.
   ------------------------------------------------------------ */
.container-small-551px.testimonials.hero,
.container-small-551px.testimonials.hero + .container-default.w-container {
  max-width: 100% !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  /* Section provides 40px L/R; container adds 180px L/R for a
     total inset of 220px from the viewport. */
  padding-left: 180px !important;
  padding-right: 180px !important;
  box-sizing: border-box;
}
.container-small-551px.testimonials.hero {
  text-align: center;
  margin-bottom: 28px;
}
.container-small-551px.testimonials.hero > .subtitle,
.container-small-551px.testimonials.hero > h2,
.container-small-551px.testimonials.hero > h2.title.perks {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Row 2 ("and the memories") should use Playfair Display in
   gold. .heading-3 already sets Playfair Display on the wrapper,
   but the inner .italic-text-3 overrides to Novel Pro — bring
   it back to Playfair Display for this section. */
.container-small-551px.testimonials.hero .heading-3.centered .italic-text-3 {
  font-family: Playfairdisplay, "Times New Roman", serif;
}

/* The video wrapper occupies the full width of its (1400px) parent
   container, with the image-wrapper inside also full-width and
   auto-centred. */
.home-v3-testimonials-wrapper.media {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.image-wrapper.home-v3-testimonials.home-video {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ------------------------------------------------------------
   Play button — unified across the site.
   White circle with a centered blue (#1B2333) play triangle.
   Triangle is drawn in CSS via a ::before pseudo-element so the
   same rule covers the large homepage / case-study buttons AND
   the smaller team-bio variant; the original PNG icon is hidden.
   ------------------------------------------------------------ */
a.home-v3-testimonials-video-button,
a.home-v3-testimonials-video-button:visited,
a.home-v3-testimonials-video-button:focus,
a.home-v3-testimonials-video-button:active {
  background-color: #ffffff !important;
  border-radius: 50%;
  width: 96px;
  min-width: 96px;
  height: 96px;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
a.home-v3-testimonials-video-button:hover {
  background-color: #f4f4f4 !important;
}
/* Bio variant (team page) is smaller and the triangle should scale. */
a.home-v3-testimonials-video-button.bio,
a.home-v3-testimonials-video-button.bio:visited,
a.home-v3-testimonials-video-button.bio:focus,
a.home-v3-testimonials-video-button.bio:active {
  width: 64px;
  min-width: 64px;
  height: 64px;
  min-height: 64px;
}
/* Promote the play-button hover to fire whenever the user hovers anywhere
   over the video card, not just the small circular button. Plus a subtle
   zoom on the thumbnail image (replaces a Webflow IX2 JS interaction
   that only ran on the button itself). */
.image-wrapper.home-v3-testimonials:has(.home-v3-testimonials-video-button) {
  overflow: hidden;
}
.image-wrapper.home-v3-testimonials:has(.home-v3-testimonials-video-button) img.image.home-v3-testimonials {
  transition: transform 0.5s ease;
  will-change: transform;
}
.image-wrapper.home-v3-testimonials:has(.home-v3-testimonials-video-button):hover img.image.home-v3-testimonials {
  transform: scale(1.05);
}
.image-wrapper.home-v3-testimonials:has(.home-v3-testimonials-video-button):hover .home-v3-testimonials-video-button {
  box-shadow: 0 15px 22px #0b0c0ea6;
  background-color: #f4f4f4 !important;
}
/* Hide the original PNG icon — we draw the triangle in CSS */
a.home-v3-testimonials-video-button > img.home-v3-testimonials-video-button-icon {
  display: none !important;
}
a.home-v3-testimonials-video-button::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #1B2333;
  /* nudge right so the triangle looks optically centered in the
     circle (a centered triangle's visual mass sits left of its
     bounding-box center). */
  margin-left: 6px;
}
a.home-v3-testimonials-video-button.bio::before {
  border-width: 9px 0 9px 14px;
  margin-left: 4px;
}

/* ------------------------------------------------------------
   "Their golden hour won't last forever" benefits section —
   apply the same 220px L/R inset as the testimonials section.
   Forces the heading block and the alternating image/text rows
   to sit inside one 220px-inset column, fixing both the
   image-bleeding-to-viewport-edge and the right-column text
   cutoff seen at wide viewports.
   ------------------------------------------------------------ */
.section.bg-secondary-1.home-v1-testimonials.benefits > .container-default.benefits.w-container {
  max-width: 100% !important;
  width: 100%;
  /* Section provides 40px L/R; container adds 70px L/R for a
     total inset of 110px from the viewport. */
  padding-left: 70px !important;
  padding-right: 70px !important;
  box-sizing: border-box;
}
.section.bg-secondary-1.home-v1-testimonials.benefits .container-medium-637px.perks.home.new-section,
.section.bg-secondary-1.home-v1-testimonials.benefits .home-v1-testimonials-wrapper,
.section.bg-secondary-1.home-v1-testimonials.benefits .home-v1-testimonials-wrapper.benefits.home,
.section.bg-secondary-1.home-v1-testimonials.benefits .home-v1-testimonials-wrapper.benefits.mobile {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* Vertical gap between the 4 rows (heading + 3 image/text rows).
   Heading→first row uses 72px (40% smaller than the 120px row gap)
   so the heading sits closer to the rows; rows themselves stay
   spaced at 120px apart. */
.section.bg-secondary-1.home-v1-testimonials.benefits .container-medium-637px.perks.home.new-section {
  margin-bottom: 72px !important;
}
.section.bg-secondary-1.home-v1-testimonials.benefits .home-v1-testimonials-wrapper {
  margin-bottom: 120px !important;
}
.section.bg-secondary-1.home-v1-testimonials.benefits .home-v1-testimonials-wrapper:last-of-type {
  margin-bottom: 0 !important;
}

/* Horizontal gap between text and image inside each row. */
.section.bg-secondary-1.home-v1-testimonials.benefits .home-v1-testimonials-wrapper {
  justify-content: center !important;
  align-items: center;
  gap: 36px;
}
/* Middle row (the .benefits.mobile variant) gets a wider gap. */
.section.bg-secondary-1.home-v1-testimonials.benefits .home-v1-testimonials-wrapper.benefits.mobile {
  gap: 66px;
}

/* Equal breathing room top and bottom of the section. */
.section.bg-secondary-1.home-v1-testimonials.benefits {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* ------------------------------------------------------------
   "Our simple 3-step process" — match the dark-navy colour and
   700 weight of the .title.home-v1-testimonials headings
   ("Together, we uncover the…"). Scoped via :has() to the
   variant of .heading-2 that contains an .italic-text-17.dark
   sibling so this won't affect the homepage's gold heading.
   ------------------------------------------------------------ */
.heading-2:has(.italic-text-17.dark) {
  color: var(--neutral-800) !important;
  font-weight: 700 !important;
}

/* ------------------------------------------------------------
   Intro paragraph with inline links —
   Webflow's `.paragraph.home-v1-testimonials.subtext.new-section`
   is set to `display: flex; width: 48%`, which broke the inline
   flow of the new linked paragraph (each link became a flex item
   and the text wrapped into a zigzag). Force normal block flow.
   ------------------------------------------------------------ */
.paragraph.home-v1-testimonials.subtext.new-section,
.paragraph.home-v1-testimonials.subtext.new-section.body-text {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center;
}
.paragraph.home-v1-testimonials a,
.paragraph.home-v1-testimonials.subtext a,
.paragraph.home-v1-testimonials.subtext.new-section a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #c2a14a;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}
.paragraph.home-v1-testimonials a:hover,
.paragraph.home-v1-testimonials a:focus,
.paragraph.home-v1-testimonials.subtext a:hover,
.paragraph.home-v1-testimonials.subtext.new-section a:hover {
  color: #c2a14a;
}

/* ------------------------------------------------------------
   Home "Why families choose Reflections" section —
   1. Webflow's >=1440px rule flips `.italic-text-17` to white,
      which makes "Their golden hour" invisible on the cream bg.
      Pin it to navy in this section at every breakpoint.
   2. Replace the hacky single-paragraph 3-inline-links treatment
      with a centered intro line + three gold action links
      separated by middle dots.
   ------------------------------------------------------------ */
.section.bg-secondary-1.home-v1-testimonials.benefits .heading-2 .italic-text-17 {
  color: var(--neutral-800);
}
/* Override the inherited #bec0c2 light-grey body text in this section
   so the "Before we begin, most families:" lead reads cleanly on cream,
   and pull the actions closer so the lead and links read as one unit. */
.section.bg-secondary-1.home-v1-testimonials.benefits .paragraph.home-v1-testimonials.subtext.new-section {
  color: var(--neutral-800) !important;
  margin-top: 16px;
  margin-bottom: 6px;
  font-family: "Opensans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  /* Constrain so "There's never a perfect moment…" wraps to two lines
     instead of stretching across the full container width. */
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.section.bg-secondary-1.home-v1-testimonials.benefits .benefits-intro-actions {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 14px;
  font-family: "Opensans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.section.bg-secondary-1.home-v1-testimonials.benefits .benefits-intro-actions a {
  color: var(--primary-1);
  text-decoration: underline;
  text-decoration-color: rgba(202, 152, 75, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}
.section.bg-secondary-1.home-v1-testimonials.benefits .benefits-intro-actions a:hover {
  color: #a18838;
  text-decoration-color: #a18838;
}
.section.bg-secondary-1.home-v1-testimonials.benefits .benefits-intro-dot {
  color: var(--primary-1);
  opacity: 0.55;
  font-size: 18px;
  line-height: 1;
  user-select: none;
}
@media (max-width: 640px) {
  .section.bg-secondary-1.home-v1-testimonials.benefits .benefits-intro-actions {
    flex-direction: column;
    gap: 8px;
  }
  .section.bg-secondary-1.home-v1-testimonials.benefits .benefits-intro-dot {
    display: none;
  }
}

/* ------------------------------------------------------------
   FAQ section column gap — Webflow's CSS uses `margin-left: auto`
   on the right column and width:100% on both, which leaves the
   columns pinned to the wrapper edges with a big empty gap.
   Force fixed widths, no margins, and explicit centring.
   ------------------------------------------------------------ */
/* Use CSS Grid for predictable 2-column equal layout — flex was
   yielding inconsistent results because Webflow's stylesheet has
   layered `margin: auto`, `width: 100%`, and media-query rules
   that fought every flex override we tried. */
.faqs-wrapper.v2.new {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 40px !important;
  row-gap: 0 !important;
  max-width: min(1400px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
  justify-items: stretch !important;
  align-items: start !important;
  /* Force the grid container to be a horizontally-centered block
     regardless of any inherited width:100% rules. */
  width: auto !important;
}
/* Ensure the immediate parent doesn't constrain us asymmetrically.
   Force the container-default to be a flex column with centered
   items so the wrapper inside lands dead-centre regardless of any
   media-query margin rules. */
.section.padding-180px > .container-default.w-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: min(1440px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: auto !important;
  position: relative !important;
}
/* Centre the cream FAQ background. .bg.faqs-contact is
   position:absolute and defaults to left:0 of its containing
   block; pinning the section as the positioning context and
   using left:50% + translateX(-50%) centres it under the cards. */
.section.padding-180px .bg.faqs-contact {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
.faqs-wrapper.v2.new > .split-content,
.faqs-wrapper.v2.new > .split-content.faqs-left,
.faqs-wrapper.v2.new > .split-content.faqs-left.contact,
.faqs-wrapper.v2.new > .split-content.faqs-right,
.faqs-wrapper.v2.new > .split-content.faqs-right.contact {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------
   Contact page — dark navy background, light text on dark.
   Decorative gold circles bleed in from the top-right and
   bottom-left corners of the section. Section is the
   positioning anchor; the section's own background is kept
   transparent so the shapes (positioned at section corners with
   z-index 0) show behind the form content (z-index 1).
   ------------------------------------------------------------ */
body.contact-page .section.book {
  background-color: transparent !important;
  position: relative;
  overflow: hidden;
}
/* The two shape wrappers from book.html sit AFTER section.book in
   the DOM, which makes corner-relative positioning awkward. Move
   them into the section's stacking context via fixed positioning
   relative to the section using `position: absolute` and
   anchoring to body.contact-page (set position:relative).
   Body becomes the containing block for these shapes. */
body.contact-page {
  position: relative;
  overflow-x: hidden;
}
body.contact-page .bg.about-v1-hero {
  background: none !important;
  background-color: transparent !important;
  min-height: 0 !important;
  width: 0;
  height: 0;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible !important;
}
/* Top-right circle */
body.contact-page .bg.about-v1-hero.book .bg.about-v1-hero-shape-2 {
  background-color: #2E384D !important;
  opacity: 0.65;
  width: 294px !important;
  min-width: 294px !important;
  min-height: 294px !important;
  height: 294px !important;
  border-radius: 50% !important;
  position: fixed !important;
  top: -100px;
  right: -110px;
  left: auto;
  bottom: auto;
  transform: none !important;
  -webkit-transform: none !important;
  display: block !important;
  z-index: 0;
  pointer-events: none;
}
/* Bottom-left circle */
body.contact-page .bg.about-v1-hero:not(.book) .bg.about-v1-hero-shape-2 {
  background-color: #2E384D !important;
  opacity: 0.65;
  width: 280px !important;
  min-width: 280px !important;
  min-height: 280px !important;
  height: 280px !important;
  border-radius: 50% !important;
  position: fixed !important;
  bottom: -130px;
  left: -140px;
  top: auto;
  right: auto;
  transform: none !important;
  -webkit-transform: none !important;
  display: block !important;
  z-index: 0;
  pointer-events: none;
}
/* Form content stacks above the shapes */
body.contact-page .container-small-551px.about-v1-team.book,
body.contact-page .contact-form-container,
body.contact-page footer {
  position: relative;
  z-index: 1;
}


body.contact-page {
  background-color: var(--secondary-4);
}
body.contact-page .section.book {
  background-color: var(--secondary-4);
}
/* Heading & subtitle invert to light on dark. */
body.contact-page .subtitle.about-v1-team {
  color: var(--primary-1);
}
body.contact-page .title.about-v1-team.our-team,
body.contact-page .title.about-v1-team.our-team .bold-text,
body.contact-page .title.about-v1-team.our-team .italic-text-16 {
  color: #ffffff !important;
}
body.contact-page .contact-intro {
  color: rgba(255, 255, 255, 0.7) !important;
}
/* Form labels and inputs adjusted for dark background. */
body.contact-page .contact-form-label {
  color: rgba(255, 255, 255, 0.85);
}
body.contact-page .contact-form-input {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
body.contact-page .contact-form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
body.contact-page .contact-form-input:focus {
  border-color: var(--primary-1);
  box-shadow: 0 0 0 3px rgba(202, 152, 75, 0.25);
}

/* ------------------------------------------------------------
   Contact page form — Reflections brand styling.
   ------------------------------------------------------------ */
.contact-intro {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 18px;
  color: var(--neutral-700);
  margin: 12px 0 0;
}
/* Higher specificity needed — the book-page rule
   `.section.book .container-default.meet-our-interviewers.book`
   targets the same element with 880px !important and was winning
   the cascade. Scope this with body.contact-page so it overrides. */
body.contact-page .section.book .container-default.meet-our-interviewers.book.contact-form-container,
.contact-form-container {
  max-width: 636px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.contact-form-field {
  display: flex;
  flex-direction: column;
}
.contact-form-label {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-800);
  margin-bottom: 8px;
}
.contact-form-input {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 16px;
  color: var(--neutral-800);
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(202, 152, 75, 0.35);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.contact-form-input::placeholder {
  color: var(--neutral-500);
}
.contact-form-input:focus {
  border-color: var(--primary-1);
  box-shadow: 0 0 0 3px rgba(202, 152, 75, 0.18);
}
.contact-form-textarea {
  resize: vertical;
  min-height: 160px;
  font-family: "Opensans", Arial, sans-serif;
}
.contact-form-submit {
  align-self: flex-start;
  margin-top: 8px;
  cursor: pointer;
  border: none;
  font-family: "Opensans", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.contact-form-submit[disabled] {
  opacity: 0.7;
  cursor: progress;
}
.contact-form-status {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 14px;
  margin: 8px 0 0;
  min-height: 1em;
  color: var(--neutral-700);
}
.contact-form-status.is-error {
  color: #b13a3a;
}
@media (max-width: 640px) {
  .contact-form-row {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   Pricing page — "Working on a business story?" + "Giving a
   gift?" cards, side-by-side, on a white section background.
   ------------------------------------------------------------ */
.section.business-gift-section {
  background-color: #ffffff !important;
  padding-top: 80px !important;
  padding-bottom: 120px !important;
  padding-left: 110px !important;
  padding-right: 110px !important;
  position: relative;
  overflow: hidden;
}
.section.business-gift-section > .container-default.w-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: min(1440px, 100%) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Top-right: wavy/spiral pattern recoloured to #DDE2ED via mask */
.business-gift-decor-top-right {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 360px;
  height: 360px;
  pointer-events: none;
  z-index: 0;
  background-color: #DDE2ED;
  -webkit-mask-image: url('../img/67f79974cbc0e486ffbf3784_shape-careers-testimonials-startup-x-template.svg');
  mask-image: url('../img/67f79974cbc0e486ffbf3784_shape-careers-testimonials-startup-x-template.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top right;
  mask-position: top right;
}
/* Bottom-left: wavy/spiral pattern recoloured to light gold via mask */
.business-gift-decor-bottom-left {
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 360px;
  height: 360px;
  pointer-events: none;
  z-index: 0;
  background-color: #e6cf9c;
  -webkit-mask-image: url('../img/67f79974cbc0e486ffbf3784_shape-careers-testimonials-startup-x-template.svg');
  mask-image: url('../img/67f79974cbc0e486ffbf3784_shape-careers-testimonials-startup-x-template.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: bottom left;
  mask-position: bottom left;
  /* Mirror so it reads as a different orientation than top-right */
  transform: scaleX(-1);
}
/* Keep card content above decorations */
.section.business-gift-section .container-default,
.business-gift-heading,
.business-gift-cards-row {
  position: relative;
  z-index: 1;
}
/* Container-default is now display:flex/column with
   align-items:center (above), which auto-centres these children.
   Just constrain widths and let the flex parent handle centring. */
.business-gift-cards-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
}
.business-gift-heading {
  max-width: 720px !important;
  width: 100% !important;
  margin: 0 0 56px 0 !important;
  padding: 0 !important;
  text-align: center;
  position: static !important;
  left: auto !important;
  transform: none !important;
}
/* The CTAs are filled gold buttons; the business-card variant
   sits on the navy background, so override the inherited white-
   on-white styling of .button-primary.button-white. */
.info-card-cta.button-primary.button-white {
  background-color: var(--primary-1) !important;
  color: #ffffff !important;
  border: none !important;
}
.info-card-cta.button-primary.button-white:hover {
  background-color: #a18838 !important;
}

/* "Every Reflections package includes" section — force the
   whole block to display as a centred grid so heading and
   features share the same horizontal centre regardless of any
   inherited flex/margin rules. */
.section.padding-240px.line-break:not(.add-on):not(.business-gift-section) > .container-default.w-container {
  max-width: min(1280px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.home-v1-features-wrapper {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  min-height: 0 !important;
  gap: 32px;
}
.split-content.home-v1-features-left,
.split-content.home-v1-features-right {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: center;
}
.split-content.home-v1-features-right {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 47px;
}
.home-v1-feature-wrapper {
  max-width: 360px !important;
  flex: 0 1 360px;
  margin-right: 0 !important;
}
/* On phones AND tablets, the 32px wrapper gap + 47px card gap
   stacked vertically produced a tall scroll inside the "Every
   Reflections package includes" section. Trim both, and also kill
   Webflow's negative bottom margin that compounds the visible gap
   to the next section. Override both modern `gap` and Webflow's
   legacy `grid-row-gap` so the cascade can't fall back. */
@media (max-width: 991px) {
  .home-v1-features-wrapper {
    gap: 20px !important;
    grid-row-gap: 20px !important;
    grid-column-gap: 20px !important;
    row-gap: 20px !important;
    margin-bottom: 0 !important;
  }
  .split-content.home-v1-features-right {
    gap: 28px !important;
    grid-row-gap: 28px !important;
    grid-column-gap: 28px !important;
    row-gap: 28px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Also trim any internal margins that contribute to vertical
     stacking inside each feature card. Webflow ships
     margin-bottom: 60/50/40 at the three mobile breakpoints — kill
     them with high-specificity selectors so nothing bleeds back.
     And reset flex-basis: the desktop rule pins it at 360px (used as
     a column width when the parent is row), but on mobile the parent
     flips to column and that 360px gets reinterpreted as HEIGHT —
     making each card 360px tall regardless of content. */
  .section .home-v1-features-wrapper .split-content.home-v1-features-right .home-v1-feature-wrapper,
  .home-v1-features-wrapper .home-v1-feature-wrapper {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    height: auto !important;
  }
  .home-v1-features-wrapper .home-v1-feature-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
  }
  /* Tighten internal title margin too (was 10px) since the gap
     between title and paragraph counts as visual stacking. */
  .home-v1-features-wrapper .home-v1-feature-content .title.home-v1-feature {
    margin-bottom: 4px !important;
  }
}
.info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 56px 48px;
  border-radius: 18px;
  border: 1px solid rgba(202, 152, 75, 0.2);
}
.info-card-business {
  background-color: var(--secondary-4);
  color: #ffffff;
}
.info-card-gift {
  background-color: var(--secondary-1);
  color: var(--neutral-800);
}
.info-card-title {
  font-family: Playfairdisplay, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 16px 0;
}
.info-card-business .info-card-title,
.info-card-business .info-card-title .italic-text-13 {
  color: #ffffff !important;
}
.info-card-gift .info-card-title,
.info-card-gift .info-card-title .italic-text-13 {
  color: var(--neutral-800) !important;
}
.info-card-body {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 28px 0;
}
.info-card-business .info-card-body {
  color: rgba(255, 255, 255, 0.78);
}
.info-card-gift .info-card-body {
  color: var(--neutral-700);
}
.info-card-cta {
  align-self: flex-start;
  margin: 0;
  font-family: "Opensans", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Small "or book a discovery call — no brief needed" line below
   the business card's button. */
.info-card-secondary {
  margin: 18px 0 0 0;
  font-family: "Opensans", Arial, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.info-card-secondary a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-decoration-color: var(--primary-1);
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.18s ease;
}
.info-card-secondary a:hover {
  color: var(--primary-1);
}
/* Gift card variant — same line on cream background so colours
   need to invert (dark text on cream). */
.info-card-secondary.info-card-secondary-gift {
  color: var(--neutral-700);
}
.info-card-secondary.info-card-secondary-gift a {
  color: var(--neutral-800);
  text-decoration: underline;
  text-decoration-color: var(--primary-1);
}
.info-card-secondary.info-card-secondary-gift a:hover {
  color: var(--primary-1);
}

@media (max-width: 880px) {
  .business-gift-cards-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .info-card {
    padding: 40px 32px;
  }
  .info-card-title {
    font-size: 30px;
  }
}

/* ============================================================
   Business Stories page
   ============================================================ */
/* Force the body / page-wrapper to white so nothing bleeds navy
   on the left and right edges between the navy sections.
   NOTE: scoped to body.business-page on purpose — leaving `html`
   unscoped here hides any `z-index: -1` decorative background
   (e.g. `.bg.pricing` on the pricing hero) behind the html bg. */
body.business-page,
body.business-page .page-wrapper {
  background-color: #ffffff !important;
}
html:has(body.business-page) {
  background-color: #ffffff !important;
}
/* Make sure every section spans the full viewport width. */
body.business-page .section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.business-page .section.business-faqs-section {
  background-color: #ffffff !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
body.business-page .section.business-faqs-section::before,
body.business-page .section.business-faqs-section::after {
  content: none !important;
}

/* Business-stories hero — same wavy/spiral decorations as the
   "Other ways to use Reflections" section on pricing, recoloured
   to read well on the dark-navy hero background. */
.business-hero-section {
  position: relative;
  overflow: hidden;
}
/* ------------------------------------------------------------
   Pricing — "MOST POPULAR" badge on the Film card. Was a filled
   pill at the top of the card that pushed the title block down.
   Strip the bg + emoji and nestle the label in the card's top-
   right corner using the same gold as the card's stroke.
   ------------------------------------------------------------ */
.card.plan.popular .popular-badge {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  bottom: auto !important;
  left: auto !important;
  inset: 12px 16px auto auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--primary-1) !important;
  font-family: "Opensans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  max-width: none;
  max-height: none;
  box-shadow: none;
  border: 0;
}

/* ------------------------------------------------------------
   Pricing page — three plan cards were overflowing the section at
   100% zoom because each card is 33% + 23px margin, which exceeds
   the container at sub-1440 widths. Switch the row to flex-wrap so
   cards drop to a second row before clipping, neutralise the
   negative right margin that was nudging content past the edge,
   clamp the card max-width so any one card can't stretch, and
   stretch align so all three cards share the same height (was
   `align-items: flex-end` which made the popular card stick up
   visually and made the whole row read as off-centre).
   ------------------------------------------------------------ */
.pricing-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  /* Bottom-align the cards so all three CTAs land on the same line.
     The popular (Film) card grows taller via extra top padding below,
     so its TOP rises above the neighbours while the BOTTOM stays
     anchored with theirs. */
  align-items: flex-end !important;
  gap: 24px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
.pricing-wrapper > .card.plan {
  width: auto !important;
  flex: 0 1 360px;
  max-width: 360px;
  margin-right: 0 !important;
  box-sizing: border-box;
}
/* Bottoms align via .pricing-wrapper's flex-end alignment. The tops
   stagger naturally based on each card's content height — Spoken has
   fewer features than Film, which has slightly less copy than
   Between us, so the staircase forms organically without padding
   tricks. */

/* Film card's h2 carries an extra `.pricing` modifier that Webflow
   styles with `margin-bottom: 10px`; Spoken and Between us use the
   base `0`. That made the eyebrow under "Film" sit further from the
   title than its counterparts. Pin all three to the same margin. */
.card.plan .title.h3-size.card-plan.pricing {
  margin-bottom: 0 !important;
}

/* Hide the horizontal divider line under each card's price. */
.card.plan .divider.card-plan {
  display: none !important;
}

/* Give the "Can't find the right answer? Book a Call" tagline some
   breathing room above it so it doesn't sit flush against the FAQ
   cards on the pricing page. */
.container-small-529px.faqs-content-bottom {
  margin-top: 32px;
}

/* Make the play-triangle prefix on "See what it feels like" buttons
   match the button's text colour (currently the icon is hard-coded
   white via .playdemoicon.white, which doesn't match the gold label
   on the secondary CTA). currentColor pins the icon to whatever the
   surrounding button is using. */
.playdemoicon,
.playdemoicon.white {
  color: currentColor !important;
  -webkit-text-stroke-color: currentColor !important;
}

/* Team page — on mobile, the .mobile-variant team rows (Seamus, Mark,
   Caley) ship with text-then-photo in the DOM (so the desktop layout
   can be photo-right). When they stack on mobile, the headline lands
   above the photo, which is inconsistent with the photo-left rows
   (Steve, Kerry) where the image leads. Reverse the column order so
   every team member's photo appears above their headline on phones. */
@media (max-width: 991px) {
  body.team-page .home-v1-testimonials-wrapper.mobile {
    flex-direction: column-reverse !important;
    flex-flow: column-reverse !important;
  }
}
/* On mobile each card sits alone on its row, so the 360px fixed
   width was clipping against .section.pricing's overflow:hidden on
   <400px viewports. Let cards take full container width below the
   wrap point so the section never has to clip them. */
@media screen and (max-width: 767px) {
  .pricing-wrapper > .card.plan {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* Spacing between the Highlight Reel add-on row above and the
   "For businesses and gifting / More than a family story" section.
   Previously bumped to 120px which left a wide gap; trimmed back
   to 40px per latest feedback. */
.section.business-gift-section {
  padding-top: 40px !important;
}

/* "Every Reflections package includes" — left-align the three
   inclusion blurbs (matches the current live page). The default
   was centred because the wrapping flexbox had `text-align: center`. */
.home-v1-features-wrapper .split-content.home-v1-features-right,
.home-v1-features-wrapper .home-v1-feature-wrapper,
.home-v1-features-wrapper .home-v1-feature-content,
.home-v1-features-wrapper .home-v1-feature-content .title.home-v1-feature,
.home-v1-features-wrapper .home-v1-feature-content .paragraph.home-v1-feature {
  text-align: left !important;
}
.home-v1-features-wrapper .home-v1-feature-wrapper {
  align-items: flex-start;
}

/* "From back shed to boardroom" — make the italicised "boardroom"
   gold so it matches the accent treatment family-side pages use
   (e.g. "Forever." on the homepage). */
.business-hero-content .italic-text-9 {
  color: #c2a14a;
}

/* "Three reasons businesses call Reflections" — short intro
   paragraph between the title and the three numbered cards. */
/* Give the "call Reflections" italic line a small top breath so it
   doesn't sit flush against "Three reasons businesses" above it. */
.business-three-reasons .container-small-551px.faqs .heading-3.centered {
  margin-top: 8px;
}

.business-three-reasons-intro {
  max-width: 580px;
  margin: 24px auto 0;
  text-align: center;
}

/* Big context photo that sits BELOW the three reason cards, and the
   Steve Holloway quote that follows the photo. Replaces the older
   "Stories straight from the founders" section that was removed. */
.business-three-reasons-image-wrapper {
  margin: 56px auto 56px;
  max-width: 1080px;
  border-radius: 18px;
  overflow: hidden;
}
.business-three-reasons-image {
  width: 100%;
  height: auto;
  display: block;
}
.business-steve-quote {
  margin: 0 auto;
  max-width: 860px;
}
.business-hero-decor-top-right {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 360px;
  height: 360px;
  pointer-events: none;
  z-index: 0;
  background-color: #DDE2ED;
  opacity: 0.18;
  -webkit-mask-image: url('../img/67f79974cbc0e486ffbf3784_shape-careers-testimonials-startup-x-template.svg');
  mask-image: url('../img/67f79974cbc0e486ffbf3784_shape-careers-testimonials-startup-x-template.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top right;
  mask-position: top right;
}
.business-hero-decor-bottom-left {
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 360px;
  height: 360px;
  pointer-events: none;
  z-index: 0;
  background-color: #e6cf9c;
  opacity: 0.18;
  -webkit-mask-image: url('../img/67f79974cbc0e486ffbf3784_shape-careers-testimonials-startup-x-template.svg');
  mask-image: url('../img/67f79974cbc0e486ffbf3784_shape-careers-testimonials-startup-x-template.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: bottom left;
  mask-position: bottom left;
  transform: scaleX(-1);
}
/* Keep hero content above decorations */
.business-hero-section > .container-default.w-container {
  position: relative;
  z-index: 1;
}

/* Hero — narrower, text-centred, no image grid on the right */
.business-hero-section .business-hero-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 0;
}
.business-hero-section .business-hero-content .title.neutral-100.home-v1-hero {
  margin: 0;
}
.business-hero-section .business-hero-content .paragraph {
  max-width: 620px;
}
.business-hero-section .hero-buttons-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.business-hero-meta {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 8px 0 0;
}

/* Three reasons — 3-up card grid */
.business-three-reasons {
  background-color: #ffffff;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.business-reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1280px;
  margin: 56px auto 0;
  padding: 0 24px;
}
.reason-card {
  background-color: var(--secondary-1);
  border-radius: 18px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.reason-card-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--primary-1);
  color: #ffffff;
  font-family: novel-pro, "Times New Roman", serif;
  font-style: normal;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.reason-card-title {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--neutral-800);
  margin: 0;
}
.reason-card-body {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--neutral-700);
  margin: 0;
}
@media (max-width: 880px) {
  .business-reasons-grid {
    grid-template-columns: 1fr;
  }
}

/* "In their own words" — image + caption layout. */
.business-testimonial-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
/* Reduce the gap between the heading and the image */
.business-testimonial-section .container-small-551px.faqs {
  margin-bottom: 0 !important;
}
.business-quote-image-wrapper {
  max-width: 940px;
  margin: 16px auto 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.business-quote-image {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
}
.business-quote-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}
/* Quote uses the same font as the homepage testimonial quote
   (.paragraph.card-perk.testimonial — Novel Pro at ~20px italic). */
.business-quote-caption {
  font-family: novel-pro, "Times New Roman", serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.5em;
  font-weight: 400;
  color: var(--neutral-800);
  text-align: center;
  margin: 0;
  max-width: 740px;
}
.business-quote-cite {
  display: block;
  margin-top: 12px;
  font-family: "Opensans", Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-1);
}

/* Six-feature grid — "Built for stories that need more" — navy bg */
.business-features-section {
  background-color: var(--secondary-4) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.business-features-section .title.perks {
  color: #ffffff !important;
}
.business-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1280px;
  margin: 56px auto 0;
  padding: 0 24px;
}
.business-feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
  border-left: 2px solid var(--primary-1);
}
.business-feature-title {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.business-feature-body {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
@media (max-width: 992px) {
  .business-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .business-features-grid {
    grid-template-columns: 1fr;
  }
}

/* Steve quote — now lives inside the "What sets us apart" navy
   section as a darker-navy card below the features grid. */
.steve-quote-in-features {
  display: flex !important;
  justify-content: center !important;
  margin: 32px auto 20px !important;
  padding: 0 24px !important;
  max-width: 1280px !important;
  width: 100% !important;
}
.steve-quote-card-dark {
  background-color: #12161f !important;
  border-radius: 18px;
  padding: 48px 56px;
  max-width: 860px !important;
  width: 100%;
  flex: 0 1 860px !important;
  margin: 0 auto !important;
}
.steve-quote-card-dark .steve-quote-text {
  font-family: novel-pro, "Times New Roman", serif;
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 28px;
}
.steve-quote-card-dark .steve-quote-attribution {
  display: flex;
  align-items: center;
  gap: 14px;
}
.steve-quote-card-dark .steve-quote-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.steve-quote-card-dark .steve-quote-name {
  font-family: "Opensans", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-1);
  font-size: 14px;
}
.steve-quote-card-dark .steve-quote-role {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}
@media (max-width: 720px) {
  .steve-quote-card-dark {
    padding: 32px;
  }
}
.steve-quote-text {
  font-family: novel-pro, "Times New Roman", serif;
  font-style: italic;
  font-size: 28px;
  line-height: 1.45;
  color: var(--neutral-800);
  margin: 0 0 28px;
}
.steve-quote-text em {
  font-style: italic;
}
.steve-quote-attribution {
  display: flex;
  align-items: center;
  gap: 14px;
}
.steve-quote-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.steve-quote-name {
  font-family: "Opensans", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-1);
  font-size: 14px;
}
.steve-quote-role {
  color: var(--neutral-700);
  font-weight: 600;
}

/* Intro section — visual rhythm + chips + corner decorations
   so it doesn't feel like just floating text on cream. */
.business-intro-section {
  position: relative;
  overflow: hidden;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}
.business-intro-section .container-medium-637px {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.business-intro-section .subtitle {
  margin-bottom: 4px;
}
.business-intro-section .title.perks {
  margin: 0;
}
.business-intro-section .heading-3.centered {
  margin: 0 0 8px 0;
}
.business-intro-section .paragraph.home-v1-testimonials.subtext.new-section.body-text {
  max-width: 640px !important;
  font-size: 18px;
  line-height: 1.6;
  width: 100% !important;
  display: block !important;
}
/* "Perfect for …" lead-in below the intro paragraph. Replaces the
   earlier chip/pill row, which felt SaaS-y against the rest of the
   site's prose-and-italic-serif voice. Sans-serif "Perfect for" sets
   up an italic serif list of the customer segments. */
.business-intro-perfect-for {
  margin-top: 24px;
  margin-bottom: 0;
  text-align: center;
  font-family: "Opensans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-1);
}
.business-intro-perfect-for em {
  display: block;
  margin-top: 8px;
  font-family: novel-pro, "PT Serif", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--primary-1);
  line-height: 1.4em;
}
.business-intro-image-wrapper {
  width: 100%;
  max-width: 940px;
  margin: 40px auto 0;
}
.business-intro-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  object-fit: cover;
}
.business-intro-chip {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--neutral-800);
  background-color: #ffffff;
  border: 1px solid rgba(202, 152, 75, 0.4);
  border-radius: 999px;
  padding: 8px 18px;
  white-space: nowrap;
}
/* Decorative wavy shapes at the corners */
.business-intro-decor-top-right,
.business-intro-decor-bottom-left {
  position: absolute;
  width: 300px;
  height: 300px;
  pointer-events: none;
  z-index: 0;
  background-color: rgba(202, 152, 75, 0.18);
  -webkit-mask-image: url('../img/67f79974cbc0e486ffbf3784_shape-careers-testimonials-startup-x-template.svg');
  mask-image: url('../img/67f79974cbc0e486ffbf3784_shape-careers-testimonials-startup-x-template.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.business-intro-decor-top-right {
  top: -40px;
  right: -40px;
  -webkit-mask-position: top right;
  mask-position: top right;
}
.business-intro-decor-bottom-left {
  bottom: -40px;
  left: -40px;
  -webkit-mask-position: bottom left;
  mask-position: bottom left;
  transform: scaleX(-1);
}

/* Business-stories FAQ section — explicit white background so it
   sits cleanly between the dark navy "What sets us apart" above
   and the navy footer CTA below. The cream `.bg.faqs-contact`
   card behind the cards needs an isolated stacking context so its
   z-index:-1 stays within the container instead of going behind
   the section's white bg. */
.section.padding-180px.business-faqs-section {
  background-color: #ffffff !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
/* Apply the FAQ stacking fix to ANY `.section.padding-180px` that
   contains an FAQ wrapper — currently pricing.html, business-stories.html,
   and how-it-works.html. The `:has(.faqs-wrapper.v2.new)` selector keeps
   it scoped to FAQ sections only, so team-bio pages (which also use
   `.section.padding-180px`) aren't affected. */
.section.padding-180px:has(.faqs-wrapper.v2.new) > .container-default.w-container {
  isolation: isolate;
  position: relative;
}
.section.padding-180px:has(.faqs-wrapper.v2.new) .bg.faqs-contact {
  z-index: 0 !important;
  display: block !important;
}
.section.padding-180px:has(.faqs-wrapper.v2.new) .faqs-wrapper {
  position: relative;
  z-index: 1;
  /* Push the first row of cards down so the cream `.bg.faqs-contact`
     (anchored to wrapper top) peeks out above them, matching the
     peek visible below the shorter column. */
  padding-top: 20px !important;
}
/* The cream `.bg.faqs-contact` paints AFTER the static-positioned card
   columns inside `.faqs-wrapper` (positioned elements paint above static
   siblings), which is why it visually covers the questions. Promote the
   columns to `position: relative; z-index: 1` so they paint above. */
.section.padding-180px:has(.faqs-wrapper.v2.new) .faqs-wrapper > .split-content {
  position: relative;
  z-index: 1;
}

/* Business-stories footer CTA — tighter spacing between the
   two H1 lines and the paragraph below ("You built something /
   worth remembering. / Don't let the story…"). */
.section.bg-primary-1.footer-bdg.business-footer-bdg {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.section.bg-primary-1.footer-bdg.business-footer-bdg .container-medium-637px.perks.home.new-section {
  gap: 16px;
}
.section.bg-primary-1.footer-bdg.business-footer-bdg .home-v1-features-title-wrapper.footer-text {
  gap: 4px !important;
}
.section.bg-primary-1.footer-bdg.business-footer-bdg ._2-buttons.new-footer {
  /* Match the breathing room above and below the button to the 40px
     section padding above the headline. Above button = container gap
     (16) + margin-top (24) = 40px. Below button = margin-bottom (0)
     + section padding-bottom (40) = 40px. */
  margin-top: 24px;
  margin-bottom: 0 !important;
}
/* Hard-zero any Webflow paddings/margins on the wrappers between the
   section and the inner content so nothing creeps into the 40px
   optical inset above/below the button on this page. */
.section.bg-primary-1.footer-bdg.business-footer-bdg .cta-1-wrapper,
.section.bg-primary-1.footer-bdg.business-footer-bdg .cta-1-wrapper.new {
  padding: 0 !important;
  margin: 0 !important;
}
.section.bg-primary-1.footer-bdg.business-footer-bdg .container-medium-637px.perks,
.section.bg-primary-1.footer-bdg.business-footer-bdg .container-medium-637px.perks.home,
.section.bg-primary-1.footer-bdg.business-footer-bdg .container-medium-637px.perks.home.new-section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.section.bg-primary-1.footer-bdg.business-footer-bdg .home-v1-features-title-wrapper.new-section.footer-text {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Webflow's >=1440px rules add `margin-bottom: 50px` on the inner
   container and `margin-bottom: 40px` on the button wrapper, which makes
   the section's bottom whitespace 90px taller than the top. Zero them. */
.section.bg-primary-1.footer-bdg.business-footer-bdg .container-medium-637px.perks {
  margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
   Book page — "You'll be speaking with Kerry Quin" card above
   the meetings/contact form. Uses Reflections brand styling:
   cream background, subtle gold ring on the photo, gold uppercase
   tracked subtitle, Playfair Display name in dark navy.
   ------------------------------------------------------------ */
/* Tighten the gap between the email link and the Kerry card on
   book.html. Webflow's `.container-small-551px.about-v1-team`
   adds `margin-bottom: 80px` which is too much here. */
.section.book .container-small-551px.about-v1-team.book {
  margin-bottom: 24px;
}
.speaking-with-card {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 880px;
  margin: 0 auto 40px;
  padding: 28px 36px;
  background-color: #ffffff;
  border: 1px solid rgba(202, 152, 75, 0.35);
  border-radius: 18px;
  /* Webflow's >=1440px rule sets `.bg.about-v1-hero.book { z-index: auto }`,
     and since that bg is absolutely positioned it paints on top of the
     static-positioned card, hiding it at wide widths. Lift the card above
     the bg so it stays visible at every breakpoint. */
  position: relative;
  z-index: 1;
}

/* Match the meetings/calendar embed width to the Kerry card. */
.section.book .container-default.meet-our-interviewers.book {
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.speaking-with-card-photo {
  flex: 0 0 auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--primary-1);
  padding: 4px;
  background: var(--secondary-1);
}
.speaking-with-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.speaking-with-card-content {
  flex: 1 1 auto;
  min-width: 0;
}
.speaking-with-card-subtitle {
  color: var(--primary-1);
  font-family: "Opensans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.speaking-with-card-name {
  font-family: Playfairdisplay, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--neutral-800);
  margin: 0 0 10px 0;
  line-height: 1.1;
}
.speaking-with-card-bio {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--neutral-700);
  margin: 0;
}
@media (max-width: 640px) {
  .speaking-with-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 24px;
  }
  .speaking-with-card-photo {
    width: 96px;
    height: 96px;
  }
}

/* ------------------------------------------------------------
   Team page — role caption that appears directly under each
   member's "Meet <Name>" heading (Founder, Executive,
   Award-winning Interviewer, etc). Gold uppercase eyebrow that
   echoes the section subtitles used elsewhere on the site.
   ------------------------------------------------------------ */
.team-role {
  font-family: "Opensans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-1);
  margin: 4px 0 16px;
}
/* Heading above the role caption ships with 20px bottom margin; drop it
   so the role caption snugs up under the name. */
.title.home-v1-testimonials.interviewer-bio:has(+ .team-role) {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   Team page — "The team behind the team" sub-heading inside the
   cream card. Sits below Mark Stafford, with breathing room
   before Kerry's row. Forced dark text since the existing
   `.title.about-v1-team.our-team` rule is white-on-light.
   A subtle top divider separates the founders/interviewers
   above from the new "behind the team" group below.
   ------------------------------------------------------------ */
.container-small-551px.about-v1-team.team-behind-heading {
  margin-top: 40px !important;
  margin-bottom: 80px !important;
  padding-top: 40px;
  text-align: center;
  border-top: 1px solid rgba(202, 152, 75, 0.35);
  max-width: 92%;
}
.container-small-551px.about-v1-team.team-behind-heading .title.about-v1-team.our-team,
.container-small-651px.about-v1-team.team-behind-heading .bold-text,
.container-small-551px.about-v1-team.team-behind-heading .bold-text {
  color: var(--neutral-800) !important;
}

/* Hide the "Play video to see ... in conversation" captions under
   Mark's and Suzanne's videos on the team page. */
.paragraph.home-v1-testimonials.team.caption {
  display: none;
}

/* Match the spacing between Kerry and Caley to the spacing
   between Suzanne and Mark (the default .home-v1-testimonials-
   wrapper margin-bottom of 80px). The wrapper sitting just
   after the team-behind-heading inherits it correctly; ensure
   the gap is consistent across all wrappers in this card. */
.section.about-v1-hero .container-default.meet-our-interviewers .home-v1-testimonials-wrapper {
  margin-bottom: 80px;
}
/* Last wrapper inside the cream card was stacking its 80px
   margin-bottom on top of the card's 40px bottom padding, leaving
   120px of empty space below the final bio — far more than the
   80px gap at the top. Zero it out so the inner bottom space is
   driven by the card's padding alone. */
.section.about-v1-hero .container-default.meet-our-interviewers .home-v1-testimonials-wrapper:last-of-type {
  margin-bottom: 0;
}

/* The cream `.container-default.meet-our-interviewers` card —
   force symmetric horizontal centring so the white space margins
   are equal on the left and right at wide viewports. All four
   inner paddings pinned to 40px so the card feels evenly inset. */
.section.about-v1-hero .container-default.meet-our-interviewers {
  max-width: min(1400px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
  padding: 40px 0 !important;
}

/* ------------------------------------------------------------
   Testimonial "Featured" tag — currently hidden.
   The quotes self-identify the speaker's perspective so the
   tag is doing work the reader doesn't need. HTML retained so
   the team can flip this back on by removing `display: none`
   (and the pill styles below will take effect).
   ------------------------------------------------------------ */
.subtitle.perks.testimonial.subject {
  display: none;

  /* When re-enabled, swap `display: none` above for the pill
     treatment below: */
  /* display: inline-block; */
  margin-left: 10px;
  padding: 4px 12px;
  background-color: #f4ecd9;
  color: #0f2238 !important;
  border-radius: 999px;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.4;
  vertical-align: middle;
}

/* ------------------------------------------------------------
   Footer CTA — subtitle "We make sure you always can" reads
   white, lighter weight, slightly smaller.
   ------------------------------------------------------------ */
.home-v1-features-title-wrapper.footer-text .heading-2.subtext,
.home-v1-features-title-wrapper.footer-text .heading-2.subtext .italic-text-17,
.home-v1-features-title-wrapper.footer-text .heading-2.subtext .italic-text-17.new,
.home-v1-features-title-wrapper.footer-text .heading-2.subtext span {
  color: #ffffff;
  opacity: 1;
  -webkit-text-fill-color: #ffffff;
  font-weight: 300;
}
.home-v1-features-title-wrapper.footer-text .heading-2.subtext {
  font-size: 40px;
}

/* Footer CTA — center all content horizontally.
   Webflow's stylesheet sets margin:10px on .container-default,
   padding-right:140px on .cta-1-wrapper, margin-right:40px on
   .container-medium-637px, and justify-content:flex-start on
   ._2-buttons — every one of those left-shifts content. Override
   each at the section scope. */
.section.bg-primary-1.footer-bdg > .container-default,
.section.bg-primary-1.footer-bdg > .container-default.w-container {
  max-width: min(1440px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: auto !important;
}
/* Section ships with white-space:nowrap + overflow:hidden, so on
   mobile the CTA headlines ("We make sure you always can", etc.)
   don't wrap and their right/left edges get clipped. Force wrapping
   for any text inside this CTA. */
.section.bg-primary-1.footer-bdg,
.section.bg-primary-1.footer-bdg * {
  white-space: normal;
}

/* Lock the content area to a single fixed width across every wide
   viewport. The Webflow base sets width:1440 + max-width:1440, but
   the @media (min-width:1440px) override narrows it to 1359, which
   produces a visible jump as the window crosses 1440. Pin width:auto
   + max-width:1440 universally so the container is exactly 1440 wide
   for every viewport ≥1440 and shrinks with the viewport below that —
   the wider "natural" content area Joel prefers, with no jump. */
.container-default {
  width: auto !important;
  max-width: 1440px !important;
}

/* At ≥1440, Webflow transforms .header-navigation to uppercase + 700
   weight + 15px font-size — that bulkier treatment forces nav items
   to wrap and reads as "squished." Hold the lighter <1440 treatment
   (normal case, 600 weight, 14px) at every viewport. */
@media screen and (min-width: 1440px) {
  .header-navigation {
    text-transform: none !important;
    font-weight: 500 !important;
  }
  .header.navbar .header-navigation .nav-link {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  /* Prevent any nav item from wrapping mid-label. */
  .header.navbar .header-navigation .nav-link,
  .header.navbar .header-navigation .nav-item-wrapper {
    white-space: nowrap;
  }
  /* Push the hero text column wider so the headline wraps at 2 lines
     instead of 3 at ≥1440 (was 1.25fr / 1fr ≈ 56% of content area;
     bumping to 1.6fr / 1fr ≈ 62%). */
  .grid-home-sections.hero {
    grid-template-columns: 1.6fr 1fr !important;
  }
}
/* The testimonials wrapper has its own jump (40→60px side padding at
   ≥1440); pin to 40 so the row width stays continuous too. */
.home-v1-testimonials-wrapper {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.section.bg-primary-1.footer-bdg .cta-1-wrapper,
.section.bg-primary-1.footer-bdg .cta-1-wrapper.new {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.section.bg-primary-1.footer-bdg .container-medium-637px.perks.home.new-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  width: 100% !important;
  text-align: center;
}
/* Title wrapper holds the two H1s — keep them close so the two lines
   read as one phrase rather than two separate headlines. */
.section.bg-primary-1.footer-bdg .home-v1-features-title-wrapper.footer-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* Tighten the section's own top/bottom padding so the CTA feels
   compact instead of floating in a tall navy block. */
.section.bg-primary-1.footer-bdg {
  padding-top: 56px !important;
  padding-bottom: 40px !important;
}

/* ------------------------------------------------------------
   Hero heading consistency across pages.
   Webflow's stock CSS has different padding-top on every hero
   variant (home 75–86px, terms 80px, about 127px, pricing 120px,
   etc.). Unify all hero sections to the same 96px top inset so
   the eyebrow + heading land at the same y-coordinate from the
   navbar regardless of which page the visitor is on.
   ------------------------------------------------------------ */
@media (min-width: 992px) {
  .section.home-sections,
  .section.about-v1-hero,
  .section.bg-primary-1.terms-conditions-hero,
  .section.bg-primary-1.home-v1-hero,
  .section.pricing,
  .section.blog-v3-hero,
  .business-hero-section {
    padding-top: 96px !important;
  }
}

/* Case-study testimonial grid (Stephen Collie / Sam Hetherington row)
   sits too close together horizontally. Widen the column gap. */
.grid.testimonial.case-study-1 {
  grid-column-gap: 72px !important;
}
@media (max-width: 991px) {
  .grid.testimonial.case-study-1 {
    grid-column-gap: 40px !important;
  }
}
@media (max-width: 767px) {
  .grid.testimonial.case-study-1 {
    grid-column-gap: 24px !important;
  }
}
/* Buttons centre as a group */
.section.bg-primary-1.footer-bdg ._2-buttons,
.section.bg-primary-1.footer-bdg ._2-buttons.new-footer {
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
}

/* The "Starts with a free 15-minute call · No commitment" line
   carries a Webflow IX animation that initialises with opacity:0
   inline and is never animated back to 1 in our static copy.
   Force it visible. */
.section.bg-primary-1.footer-bdg .paragraph.home-v1-testimonials.subtext.new-section.footer-text {
  opacity: 1 !important;
  transform: none !important;
  -webkit-transform: none !important;
  /* Webflow only lightens this paragraph to #bec0c2 at ≥1440px; below
     that it inherits the body's dark grey (#6f7278), which is nearly
     invisible against the navy CTA. Force the light tone everywhere. */
  color: #d4d6da !important;
}


/* ============================================================
   MOBILE / TABLET layout safety net
   Several desktop overrides in this file set `max-width: none`
   or large L/R padding (110px, 70px) on `.container-default`
   variants without a media-query guard. On <=991px viewports
   that beat Webflow's mobile rules and produces horizontal
   overflow: containers stay 1440px wide on a 375px phone.
   Reset every container to viewport width with safe padding.
   ============================================================ */
@media (max-width: 991px) {
  .page-wrapper {
    overflow-x: clip;
  }
  .container-default,
  .container-default.w-container,
  .header.navbar > .container-default.w-container,
  .section.home-sections > .container-default.w-container,
  .section.bg-secondary-1.home-v1-testimonials.benefits > .container-default.benefits.w-container,
  .section.business-gift-section > .container-default.w-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  .section.business-gift-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Hero section: tighten L/R inset on mobile. The container inside
     adds its own 16px, total inset 16px each side, so hero copy gets
     near-edge breathing room instead of being pushed to the center. */
  .section.home-sections {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .section.home-sections > .container-default.w-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* The hero text wrapper has `max-width: 320px` (from Webflow's
     mobile rule), which leaves a fat empty margin on either side
     at typical phone widths (~50px each side at 390 viewport).
     Let it use the full container width so copy reads closer to
     the screen edges. The H1/paragraph inside also have hard
     max-widths (390px at <=767, 289px at <=479) that need
     overriding to fill the wrapper. */
  .hero-home-sections-text {
    max-width: 100% !important;
    width: 100% !important;
  }
  .hero-home-sections-text h1.title.neutral-100.home-v1-hero,
  .hero-home-sections-text p.paragraph.neutral-100.home-v1-hero {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   Additional mobile fixes
   ============================================================ */
@media (max-width: 991px) {
  /* Hide the desktop nav CTAs ("See the experience", "Reserve your
     spot") at mobile — the hamburger menu carries "Reserve Your Spot"
     via the .header-button-mobile item, and there's no room for both
     CTAs alongside the logo at <992px. */
  .header.navbar .split-content.header-left a.button-primary {
    display: none !important;
  }
  /* Make sure the hamburger sits flush right and the header-left
     collapses to just its width. */
  .header.navbar .split-content.header-left {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* Hide the homepage hero screenshot column on mobile — it bleeds
     off the right and overlaps the hero text. */
  .home-screenshots-container {
    display: none !important;
  }

  /* Tame the largest hero headlines so they wrap inside the viewport
     instead of overflowing as 60-70px text. */
  .title.neutral-100.pricing,
  .title.neutral-100.home-v1-hero,
  .title.about-v1-team.our-team,
  .title.perks,
  .heading-3,
  .heading-3.centered {
    font-size: 36px !important;
    line-height: 1.15 !important;
  }
  .business-hero-content h1 {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 767px) {
  /* On smaller phones, drop another step. */
  .title.neutral-100.pricing,
  .title.neutral-100.home-v1-hero,
  .title.about-v1-team.our-team,
  .title.perks,
  .heading-3,
  .heading-3.centered,
  .business-hero-content h1 {
    font-size: 32px !important;
  }

  /* On case-studies, the floating quote card is absolutely positioned
     and 400px wide — way wider than a 375px phone. Drop it back into
     normal document flow on mobile so it stacks above each video. */
  .card.home-v3-testimonials {
    position: static !important;
    inset: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    padding: 20px !important;
  }
  /* Even-row card flip becomes meaningless when the card is stacked. */
  .section > :nth-child(even of .container-default.case-studies) .card.home-v3-testimonials {
    inset: auto !important;
  }
  /* Remove the desktop margin we added that reserves card-side space. */
  .container-default.case-studies .image-wrapper.home-v3-testimonials,
  .section > :nth-child(even of .container-default.case-studies) .image-wrapper.home-v3-testimonials {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   Mobile cleanup pass — page-by-page polish
   ============================================================ */
@media (max-width: 991px) {
  /* HERO: the 2-col grid (`.grid-home-sections.hero`) had a base
     rule of `1.25fr 1fr` that beat Webflow's mobile `1fr` rule due
     to specificity. Collapse to single column on mobile so the hero
     text uses the full width. */
  .grid-home-sections.hero {
    grid-template-columns: 1fr !important;
    grid-row-gap: 32px !important;
  }
  /* Trim down the hero section's vertical padding and kill the
     `min-height: 80vh` that creates a massive empty navy block
     below the hero text on tall mobile screens. */
  .section.home-sections {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* "The magic, the mischief / and the memories" section heading
     AND its sibling video container — the desktop rule sets
     `padding-left/right: 180px !important` on both to match each
     other's horizontal footprint at wide widths. On mobile that
     left ~2px of content area, collapsing the heading words and
     hiding the video. Drop the padding back to 16px. */
  .container-small-551px.testimonials.hero,
  .container-small-551px.testimonials.hero + .container-default.w-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Breathing room between the video and the Saxon Conner quote
     directly underneath it. */
  .container-default.hero.w-container .grid.testimonial.hero,
  .container-default.hero .grid.testimonial.hero {
    margin-top: 28px !important;
  }

  /* "What Kiwi families are saying" (homepage) and case-studies
     family videos: unify the video and the quote into one cream
     card on mobile. Video at the top (edge-to-edge), quote text
     and meta underneath. `.media` variant is the magic-mischief
     hero video with no card — leave that alone. */
  .home-v3-testimonials-wrapper:not(.media) {
    flex-direction: column !important;
    align-items: stretch !important;
    background-color: var(--secondary-1) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin-bottom: 32px !important;
  }
  .home-v3-testimonials-wrapper:not(.media) .image-wrapper.home-v3-testimonials {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    order: 0 !important;
    border-radius: 0 !important;
  }
  .home-v3-testimonials-wrapper:not(.media) .image-wrapper.home-v3-testimonials .image.home-v3-testimonials {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  /* Strip the cream card's own bg/padding now that the wrapper is the
     card — leave it as the inner copy block. */
  .home-v3-testimonials-wrapper:not(.media) .card.home-v3-testimonials {
    order: 1 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .home-v3-testimonials-wrapper:not(.media) .card-home-v3-testimonials-name {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  .home-v3-testimonials-wrapper:not(.media) .paragraph.card-home-v3-testimonials {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }
  .home-v3-testimonials-wrapper:not(.media) .testimonial-meta {
    margin-top: 12px !important;
  }
  .container-small-551px.testimonials.hero > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  .container-small-551px.testimonials.hero .heading-3,
  .container-small-551px.testimonials.hero .heading-3.centered {
    display: block !important;
    text-align: center !important;
  }

  /* Eyebrows and subtitles: keep them on one line where reasonable. */
  .subtitle,
  .subtitle.home-v3-case-study,
  .subtitle.home-v3-case-study.testimonials {
    letter-spacing: 0.06em !important;
    word-spacing: normal !important;
  }
  /* Section eyebrow inside short narrow containers (e.g. testimonial
     intro) should never wrap one-word-per-line. */
  .container-small-551px.testimonials .subtitle,
  .container-small-551px.testimonials.hero .subtitle {
    white-space: normal !important;
    max-width: 100% !important;
  }
  /* Narrow text containers at mobile should be full-width. */
  .container-small-551px,
  .container-medium-637px,
  .container-medium-616px,
  .container-medium-683px {
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  /* Section vertical rhythm: less padding on small screens. */
  .section,
  .section.padding-180px,
  .section.padding-240px,
  .section.padding-240px.line-break {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  /* Testimonial avatars + names align cleanly */
  .testimonial-meta {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  /* "Why families choose us" benefits images come full width */
  .home-v1-testimonials-wrapper.benefits.home,
  .home-v1-testimonials-wrapper.benefits.mobile,
  .home-v1-testimonials-wrapper {
    flex-direction: column !important;
    gap: 32px !important;
    margin-bottom: 40px !important;
  }
  .split-content.home-v1-testimonials-left,
  .split-content.home-v1-testimonials-right {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  /* On mobile every benefits row should lead with the photo. The
     middle row's DOM order is text-then-image (image on the right
     for desktop), so reorder it via flex `order` so the image
     stacks above the copy on mobile, matching the other rows. */
  .home-v1-testimonials-wrapper.benefits.mobile .split-content.home-v1-testimonials-left {
    order: 0 !important;
  }
  .home-v1-testimonials-wrapper.benefits.mobile .split-content.home-v1-testimonials-right {
    order: 1 !important;
  }
  .image-wrapper.home-v1-testimonials {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .image-wrapper.home-v1-testimonials img {
    width: 100% !important;
    height: auto !important;
  }

  /* FAQ wrapper at mobile: single column, sensible gaps */
  .faqs-wrapper.v2.new {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 16px !important;
    padding: 0 !important;
  }

  /* Three-reasons-grid on business-stories: stack on mobile */
  .business-reasons-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 32px !important;
    padding: 0 !important;
  }
  .business-features-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* "Speaking with Kerry" card on book.html: stack vertically */
  .speaking-with-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px !important;
    gap: 16px !important;
  }
  .speaking-with-card-photo {
    width: 96px !important;
    height: 96px !important;
  }

  /* Steve quote card on business-stories — keep it compact on mobile */
  .steve-quote-in-features {
    padding: 0 !important;
  }
  .steve-quote-card-dark {
    padding: 24px !important;
  }

  /* Footer CTA buttons sized comfortably */
  ._2-buttons,
  ._2-buttons.new-footer {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    align-items: center !important;
  }
  ._2-buttons > a.button-primary,
  ._2-buttons > a.button-secondary {
    width: auto !important;
    min-width: 200px !important;
  }
}

@media (max-width: 767px) {
  /* Title sizing — second step down */
  .heading-2 {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
  /* Section eyebrow */
  .subtitle.home-v3-case-study.testimonials {
    font-size: 13px !important;
  }
  /* Headline paragraph copy */
  .paragraph,
  .paragraph.home-v1-testimonials,
  .paragraph.home-v1-testimonials.subtext.new-section {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}

/* Hide Webflow's "More Templates" / "Hire our Webflow team" promo
   blocks that ended up in the team bio pages during the scrape. */
.more-templates-logo-wrapper,
.more-templates-logo,
.more-templates-p,
.more-webflow-templates-sub,
.more-templates-section,
.more-webflow-templates-wrap,
.more-webflow-templates {
  display: none !important;
}

/* Hide stray decorative shapes on mobile where they sit awkwardly
   relative to the now-stacked content. */
@media (max-width: 991px) {
  .bg.team-shape-1,
  .bg.team-shape-2,
  .business-hero-decor-top-right,
  .business-hero-decor-bottom-left,
  .business-intro-decor-top-right,
  .business-intro-decor-bottom-left,
  .business-gift-decor-top-right,
  .business-gift-decor-bottom-left {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   Family Stories page — testimonial pairs were running too close,
   and the video + floating quote card were spilling past the
   container on narrower desktops. Bump vertical buffer between
   case-study blocks, constrain every layer to its container, and
   keep the floating quote card from punching past the wrapper's
   edge (when the row flips on even-indexed cards the card was
   absolute-positioned with `inset: 0 0 0 auto` plus the wrapper's
   `width: calc(100% - 200px)` left the card sitting in negative-
   margin territory at narrow widths).
   ------------------------------------------------------------ */
.home-v3-testimonials-wrapper.case-study {
  margin-bottom: 128px !important;
  max-width: 100%;
  overflow-x: clip;
}
.home-v3-testimonials-wrapper.case-study .image-wrapper.home-v3-testimonials,
.home-v3-testimonials-wrapper.case-study .image.home-v3-testimonials {
  max-width: 100%;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}
.home-v3-testimonials-wrapper.case-study .card.home-v3-testimonials {
  max-width: min(400px, 90%);
  box-sizing: border-box;
}
.home-v3-testimonials-wrapper.case-study:last-of-type {
  margin-bottom: 0 !important;
}
/* Clip horizontal overflow at the section level so any residual
   sub-pixel spill from the floating card or video iframe doesn't
   create a page-level horizontal scrollbar. */
.section:has(> .container-default.case-studies) {
  overflow-x: clip;
}
/* At intermediate desktop widths (992–1439) the 200px side
   reservation eats too much room and the quote card overlaps too
   much of the video. Scale the reservation down so the layout
   breathes; the desktop 200px is reserved for 1440+ only. */
@media (min-width: 992px) and (max-width: 1439px) {
  .container-default.case-studies .image-wrapper.home-v3-testimonials {
    width: calc(100% - 120px) !important;
    margin-left: 120px !important;
  }
  .section > :nth-child(even of .container-default.case-studies) .image-wrapper.home-v3-testimonials {
    margin-left: 0 !important;
    margin-right: 120px !important;
  }
}

/* ------------------------------------------------------------
   Team page — Kerry & Caley headshots reuse Steve/Seamus's
   `.steve` / `.seamus` classes. The shared `margin-top: -120px`
   pushes their foreheads above the frame because their source
   crops have less headroom than Steve's/Seamus's. Use object-fit
   to fill the rounded-rectangle wrapper cleanly with focal points
   near the top so eyes sit roughly on the upper-third line.
   ------------------------------------------------------------ */
/* Mirror Steve/Seamus's approach exactly — let the image render at
   its natural aspect (so the flex column doesn't collapse to the
   image's min-content width) and use a negative margin-top to
   slide the visible window down into the face area. Object-fit
   was forcing the column to shrink from 553px to 320px because
   the constrained image had a smaller min-content basis. */
.image.home-v1-testimonials.steve[src*="kerry_quin"] {
  margin-top: -60px !important;
}
.image.home-v1-testimonials.seamus[src*="caley_wilson"] {
  margin-top: 0 !important;
}

/* ------------------------------------------------------------
   How It Works — step eyebrows ("RESEARCH", "RECORD", "REMEMBER")
   carry the step number in a small navy circle, echoing the
   numbered circles on the homepage's "How It Works" cards
   (.card-home-v3-case-study-step). Inline so the eyebrow text
   reads "[1] RESEARCH" on one line.
   ------------------------------------------------------------ */
.hiw-step-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hiw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--primary-1);
  color: #ffffff;
  font-family: "DM Sans", "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------
   How It Works — step testimonial cards (.quote-only): the image
   that used to occupy the top half was removed because the people
   in those photos weren't the people being quoted. Client asked
   for "just larger words" to fill the space the image used to
   carry. Keep the site-native novel-pro typography (no decorative
   quote mark, no Playfair swap), just nudge the headline and body
   a notch larger than the default testimonial sizes.
   ------------------------------------------------------------ */
.card.home-v3-testimonials.testimonial-box.quote-only {
  padding: 32px;
  background: #ffffff;
}
.card.home-v3-testimonials.testimonial-box.quote-only .card-home-v3-testimonials-name {
  font-size: 22px;
  line-height: 1.4;
}
.card.home-v3-testimonials.testimonial-box.quote-only .paragraph.card-home-v3-testimonials {
  font-size: 17px;
  line-height: 1.55;
}
/* Wrap the quote in curly quotation marks — opening "/“ on the
   headline line, closing "/” on the body line, drawn via pseudo
   elements so the source HTML stays clean. Inline so they sit
   flush with the text. */
.card.home-v3-testimonials.testimonial-box.quote-only .card-home-v3-testimonials-name::before {
  content: "\201C";
}
.card.home-v3-testimonials.testimonial-box.quote-only .paragraph.card-home-v3-testimonials::after {
  content: "\201D";
}

/* ------------------------------------------------------------
   "What Kiwi families / are saying" section — tighten the gap
   between the two heading lines and add buffer between the
   video frame and the testimonial grid below it.
   ------------------------------------------------------------ */
.container-small-551px.testimonials:not(.hero) > .title.perks {
  margin-bottom: 0;
  line-height: 1.1;
}
.container-small-551px.testimonials:not(.hero) > .heading-3.centered {
  margin-top: 4px;
  line-height: 1.1;
}
/* Add breathing room between the Pete Marshall video block and the
   4-card testimonial grid. The grid sits in its own .container-default
   directly after the video wrapper's container-default. */
.section .home-v3-testimonials-wrapper:not(.media) {
  margin-bottom: 72px;
}

/* Hero "with STEVE and SEAMUS" tagline under the Between Two Beers
   logo. "with" and "and" sit in the same warm light grey as the
   BTB wordmark above; STEVE and SEAMUS are white so they pop.
   Slight left pad to optically align with the logo — the wordmark's
   leftmost letterform reads slightly inset, so a metric-aligned
   string here looks shifted left. */
.text-block-15.btb-with {
  font-family: "DM Sans", "Open Sans", sans-serif;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 10px;
  padding-left: 8px;
  color: #b5b0a8;
  font-weight: 500;
}
.text-block-15.btb-with strong {
  color: inherit;
  font-weight: 700;
}