/* ============================================================
   LayerTwo — Let's Work section
   v8: clean, em-based, single source of truth.
   Families: Open Sauce One (display) + Open Sauce Two (body/UI).
   Benton stays Benton (never touch .fancy).
   ============================================================ */

/* -----------------------------------------------------------
   Entry animations — premium feel
   Scroll-triggered via IntersectionObserver in index.html.
   Strategy: each part of the section gets a [data-anim] type and
   an --anim-delay (set by JS). All transitions use expo-out for
   that decelerating, weighty feel. Long durations (~1100–1300ms).
   Respects prefers-reduced-motion.
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .lets-work-section [data-anim] {
    opacity: 0;
    transform: translate3d(0, 1.4em, 0);
    transition:
      opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--anim-delay, 0ms);
    will-change: opacity, transform;
  }
  /* Heading: a touch longer, larger lift, micro scale-in */
  .lets-work-section [data-anim="heading"] {
    transform: translate3d(0, 1.6em, 0) scale(0.985);
    transition:
      opacity 1300ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 1300ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Vertical tier dividers reveal top → bottom */
  .lets-work-section [data-anim="divider-v"] {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
    transition:
      opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--anim-delay, 0ms);
  }
  /* Horizontal CTA dividers reveal left → right */
  .lets-work-section [data-anim="divider-h"] {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition:
      opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--anim-delay, 0ms);
  }
  /* In-view state — unified end position */
  .lets-work-section [data-anim].is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  .lets-work-section [data-anim="divider-v"].is-in,
  .lets-work-section [data-anim="divider-h"].is-in {
    opacity: 1;
    transform: scaleY(1);
  }
  .lets-work-section [data-anim="divider-h"].is-in {
    transform: scaleX(1);
  }
}

@import url("https://fonts.googleapis.com/css2?family=Open+Sauce+One:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap");

/* -----------------------------------------------------------
   Global label cleanup — kill Geist-Mono uppercase site-wide
   ----------------------------------------------------------- */
.label-xl, .label-lg, .label-md, .label-sm, .label-xs {
  font-family: "Open Sauce Two", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
}

/* -----------------------------------------------------------
   Section frame
   ----------------------------------------------------------- */
.lets-work-section {
  /* Top spacing above eyebrow.
     The dark .main-section ABOVE has `position: relative; z-index: 1` and a
     `border-radius: 0 0 85px 85px` that physically overlaps DOWN into this
     section by 210-283px depending on viewport (the curve eats real padding).
     We compensate in two parts:
       --overlap-comp = approximate amount the dark section bleeds into us
       --visible-air  = actual whitespace we want between curve and eyebrow
     Tune either piece independently. Sum = padding-top.
  */
  --lw-overlap-comp: clamp(13rem, 13vw + 6rem, 19rem);
  --lw-visible-air: clamp(6.5rem, 1.5vw + 5.5rem, 9rem);
  padding-top: calc(var(--lw-overlap-comp) + var(--lw-visible-air));
  padding-bottom: 0;    /* footer sits flush at the very bottom of the section */
  /* overflow: visible — let the giant heading bleed past section edges if the
     tuner pushes it wider than the section. Page-level horizontal clip on
     html/body keeps the scrollbar in check. */
  overflow: visible;
  background: #ECECEC;
  /* z-index stays 0 (from Webflow .bottom-section) so the dark .main-section
     (z-index:1) and its testimonials render ABOVE the white panel.
     Setting z-index:1 here was hiding the testimonials behind the curve. */
}
.lets-work-section .container {
  overflow: visible;
}
.lw-hero {
  /* Allow the heading text to spill past hero edges without clipping */
  overflow: visible;
}

.lw-heading {
  /* Break the heading out of the padded container so it spans full viewport.
     This way the heading can grow to its full size and center against the
     real viewport edges — never clipped by container padding. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: visible;
}

/* The .main-heading inline-block keeps its width to its content and 
   center-aligns inside the now-viewport-wide .lw-heading parent. */
.lw-heading .main-heading {
  max-width: 100%;
}

/* Removed overflow-x clip on html/body — was blocking scroll behaviors. (Cam ask) */
.lw-inner {
  /* Single source of truth for the section's max content width.
     All children (hero, tier grid, CTA row, FAQ block) just fill this. */
  width: 90%;
  max-width: 1062px;
  margin: 0 auto;
  padding: 0;
}

/* Override Webflow's .container auto-margins inside lets-work-section
   so the inner content spans the full available width at tablet sizes
   (.container otherwise eats ~7-8% on each side via Webflow defaults). */
.lets-work-section .w-layout-blockcontainer.container {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

/* -----------------------------------------------------------
   Hero
   ----------------------------------------------------------- */
.lw-hero {
  /* Fill .lw-inner so hero/tiers/CTA/FAQ share identical L/R edges */
  width: 100%;
  margin: 0 auto 4em;
  text-align: center;
  /* Container-query context so the giant heading sizes off the hero width,
     not the viewport. Reliable scaling at every container width. */
  container-type: inline-size;
}

/* Sub-note below "Let's Work" describing flexibility on custom dev work.
   Sits between heading and tier cards. */
.lw-subnote {
  font-family: "Open Sauce Two", "Helvetica Neue", sans-serif;
  font-size: clamp(0.875rem, 1.05vw, 1.0625rem);
  line-height: 1.45;
  font-weight: 400;
  color: #14101d;
  opacity: 0.7;
  max-width: 38em;
  margin: 1.5em auto 0;
  text-align: center;
  padding: 0 1em;
}

.lw-eyebrow-serif {
  font-family: "benton-modern-display-extra", "ff-meta-serif-web-pro", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15em;
  line-height: 1.3;
  color: #14101d;
  opacity: 0.85;
  margin: 0 0 2.25em;
  padding-top: 0;
}

/* "Let's Work" — Open Sauce One, sized off the container (cqi) */
.lw-heading {
  text-align: center;
  margin-top: 0.4em;
}
.lw-heading .main-heading {
  font-family: "Open Sauce One", "Open Sauce Two", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  background: linear-gradient(346deg, rgba(19, 16, 27, 0.10) 10.29%, #13101B 101.64%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Container-query sizing. Baked from tuner settings 2026-05-27 (Cam-final). */
  font-size: clamp(4.5rem, var(--lw-heading-cqi, 21.1cqi), 14rem);
  line-height: 0.82;
  letter-spacing: -0.065em;
  white-space: nowrap;
  padding-right: 0.06em;
  padding-bottom: 0.08em;
  display: block;
  /* Optical centering nudge — baked from tuner settings 2026-05-27 (Cam-final). */
  transform: translateX(var(--lw-heading-shift, -0.035em));
  transform-origin: center center;
}

/* -----------------------------------------------------------
   Tier cards — NO bg, NO padding, NO row borders.
   Grid layout: card | divider | card | divider | card.
   Dividers are real DOM elements (.lw-tier-divider) so they live
   inside the grid's column track and sit perfectly between cards.
   Card columns get equal flexible width, dividers get the gutter width.
   ----------------------------------------------------------- */
.lw-tiers {
  display: grid;
  /* card | divider | card | divider | card.
     minmax(0, 1fr) forces tracks to truly share width equally regardless
     of intrinsic content size. Divider track stays a fixed % gutter.
     Width is inherited from .lw-inner; no local max — keeps every row
     of the section aligned to the same edges. */
  grid-template-columns: minmax(0, 1fr) 9% minmax(0, 1fr) 9% minmax(0, 1fr);
  gap: 0;
  position: relative;
  align-items: stretch;
  width: 100%;
}

.lw-tier-card {
  background: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Real DOM divider — a thin double-rule sitting in the middle of its grid track */
.lw-tier-divider {
  position: relative;
  align-self: stretch;
  pointer-events: none;
}
.lw-tier-divider::before,
.lw-tier-divider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.15px;
}
.lw-tier-divider::before {
  left: 50%;
  transform: translateX(calc(-50% - 0.6px));
  background: rgba(17, 16, 15, 0.12);
}
.lw-tier-divider::after {
  left: 50%;
  transform: translateX(calc(-50% + 0.55px));
  background: #ffffff;
}

/* Tier header — name on left, price stack on right, baseline-aligned */
.lw-tier-header {
  display: flex;
  align-items: flex-end;       /* sit price block visually centered against name */
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 2.25em;       /* extra breathing room above the list */
}

.lw-tier-name {
  font-family: "Open Sauce Two", sans-serif;
  font-weight: 600;
  margin: 0;
  line-height: 1;
  /* Scale with viewport so 3-col grid stays readable down to 767px.
     min 1.4rem (~22px at 767), preferred 3.2vw, max 2.95rem (~47px at 1440+) */
  font-size: clamp(1.4rem, 3.2vw, 2.95rem);
}

/* Price block — $6k stacked ABOVE "per month", both centered to each other.
   Whole block fades to 40% opacity so the tier names lead, price supports. */
.lw-tier-price {
  display: flex;
  flex-direction: column;
  align-items: center;          /* horizontally center the two lines to each other */
  gap: 0.1em;
  padding-bottom: 0.15em;       /* nudge so $6k aligns with cap-height of "Execute" */
  opacity: 0.4;
}

.lw-tier-amount {
  font-family: "Open Sauce Two", sans-serif;
  font-weight: 600;
  margin: 0;
  line-height: 1;
  text-align: center;
  /* Scale with viewport. min 0.85rem (~13.6px @ 767), max 1.54rem (~24.5px @1440+) */
  font-size: clamp(0.85rem, 1.7vw, 1.54rem);
}

.lw-tier-period {
  font-family: "Open Sauce Two", sans-serif;
  font-weight: 600;             /* heavier than $6k label, per spec */
  font-size: 0.55em;
  text-transform: none;
  letter-spacing: -0.005em;
  opacity: 1;                    /* parent .lw-tier-price already at 0.4 */
  margin: 0;
  line-height: 1;
  text-align: center;
  white-space: nowrap;           /* keep "per month" on one line — Cam ask 2026-05-29 */
}

/* Feature rows — NO borders. Spacing only. */
.lw-tier-features {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}
.lw-tier-feature {
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  gap: 0.75em;
  font-family: "Open Sauce Two", sans-serif;
}
.lw-tier-feature .text-sm-reg {
  /* Scale with viewport so 3-col grid stays readable down to 767px.
     Reduced ~1pt across the board (2026-05-27 Cam directive).
     min 0.66rem (~10.5px @ 767), max 0.8125rem (13px @ 1024+) */
  font-size: clamp(0.66rem, 1vw, 0.8125rem);
  font-weight: 500;              /* heavier than the default 400 */
  line-height: 1.35;
}
.lw-tier-feature .lw-check {
  width: clamp(0.85rem, 1.15vw, 1.125rem);
  height: clamp(0.85rem, 1.15vw, 1.125rem);
}

.lw-check {
  width: 1.125em;
  height: 1.125em;
  flex-shrink: 0;
  color: #14101d;
  opacity: 0.3;
}
.lw-check path { stroke-width: 2; }

/* -----------------------------------------------------------
   CTA row
   ----------------------------------------------------------- */
.lw-cta-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2em;
  align-items: stretch;     /* button stretches full height of row */
  margin-top: 5.25em;
}

.lw-cta-left {
  display: flex;
  flex-direction: column;
}

/* Horizontal double-line separators wrap the pfp row */
.lw-cta-left .lw-divider {
  position: relative;
  height: 2.3px;
  width: 100%;
}
.lw-cta-left .lw-divider::before,
.lw-cta-left .lw-divider::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.15px;
}
.lw-cta-left .lw-divider::before { top: 0;     background: rgba(17, 16, 15, 0.12); }
.lw-cta-left .lw-divider::after  { top: 1.15px; background: #ffffff; }

.lw-pfp-row {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1.25em 0;
}

.lw-pfp .pfp-img,
.lw-pfps .pfp-img {
  width: 2.5em;
  height: 2.5em;
  border-radius: 65.7px;
  object-fit: cover;
}

/* Disable pfp links — they're decorative, not clickable. Cam directive
   2026-05-27 #22480. JS-side: href stripped on load. CSS-side: kill cursor +
   pointer-events so nothing reacts to hover. */
.lw-pfp.w-inline-block, a.lw-pfp {
  pointer-events: none;
  cursor: default;
}

.lw-pfps {
  display: flex;
  align-items: center;
}
.lw-pfps .lw-pfp + .lw-pfp { margin-left: -1em; }

/* "15-min chat with Cam & Erick?" — Figma: small, bold, 2 lines via the <br/> already in HTML */
.lw-pfp-text {
  font-family: "Open Sauce Two", "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-size: 0.875em;       /* ~14px */
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #14101d;
  max-width: none;          /* let the <br/> in markup control wrapping */
  white-space: normal;
  text-align: center;
}

/* Book a Call button — Figma: full-width of right column, big text */
.lw-cta-btn-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
}
/* Override Webflow's .fancy-button.monthly { width:auto; font-size:.9em; padding-left:1.2em } */
.lw-cta-btn-fancy.fancy-button.monthly,
.lw-cta-btn-fancy {
  width: 100% !important;
  min-height: 5.5em;
  font-size: 1em !important;
  padding: 1.25em 2em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: normal !important;
}
/* Keep the cropped glow image — Webflow IX2 translates it into view on hover.
   Hiding it killed the hover gradient effect on the Book a Call button. */
.lw-cta-btn-fancy .fancy-btn-text {
  font-family: "Open Sauce Two", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 2.25em;         /* ~36px */
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
  text-align: center;
}

/* -----------------------------------------------------------
   FAQ — normalize ALL question fonts to same size + weight
   (HTML wraps some labels in <strong>, which is what was causing
   the size differences via Webflow inherited styles)
   ----------------------------------------------------------- */
.lw-faq-block {
  margin-top: 8em;     /* lots of air above the FAQ block */
}

.lw-faq-eyebrow {
  font-family: "Open Sauce Two", sans-serif;
  font-weight: 500;
  font-size: 0.8125em;       /* ~13px */
  letter-spacing: -0.01em;
  text-transform: none;
  opacity: 0.45;
  color: #14101d;
  margin-bottom: 1.5em;
}

/* Force every label + any nested strong/span to identical type */
.lw-faq-list .fs_accordion-1_label,
.lw-faq-list .fs_accordion-1_label *,
.lw-faq-list .fs_accordion-1_label strong,
.lw-faq-list .fs_accordion-1_label span {
  font-family: "Open Sauce Two", "Helvetica Neue", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.5em !important;   /* 24px at 16 base */
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

/* But the LABEL element itself sets the size — child strong inherits 1em */
.lw-faq-list .fs_accordion-1_label > strong,
.lw-faq-list .fs_accordion-1_label > span {
  font-size: 1em !important;
}

.lw-faq-list .fs_accordion-1_header {
  padding-top: 1.875em;
  padding-bottom: 1.875em;
  border-top: 1px solid rgba(20, 16, 29, 0.15);
}
.lw-faq-list .fs_accordion-1_item:last-child .fs_accordion-1_header {
  border-bottom: 1px solid rgba(20, 16, 29, 0.15);
}

/* When open: match the visual gap between top border and question.
   Header has padding-top: 1.875em, so the answer needs equal padding-bottom
   so the next row's border sits the same distance away. */
.lw-faq-list .fs_accordion-1_body {
  padding-bottom: 1.875em;
}

/* Balance line lengths in FAQ answers so wrap looks intentional — Cam ask 2026-05-29 */
.lw-faq-list .fs_accordion-1_body,
.lw-faq-list .fs_accordion-1_body p,
.lw-faq-list .fs_accordion-1_body .text-sm-reg {
  text-wrap: balance;
}

/* -----------------------------------------------------------
   FAQ interactions:
   1. Hide the dropdown arrow by default; show on row hover
   2. On hover of ANY item, fade non-hovered siblings to 40% opacity
   ----------------------------------------------------------- */
.lw-faq-list .fs_accordion-1_arrow-wrapper,
.lw-faq-list .fs_accordion-1_icon {
  opacity: 0;
  transition: opacity 0.18s ease;
}
.lw-faq-list .fs_accordion-1_item:hover .fs_accordion-1_arrow-wrapper,
.lw-faq-list .fs_accordion-1_item:hover .fs_accordion-1_icon,
.lw-faq-list .fs_accordion-1_item:focus-within .fs_accordion-1_arrow-wrapper,
.lw-faq-list .fs_accordion-1_item:focus-within .fs_accordion-1_icon {
  opacity: 1;
}

/* Sibling-dim effect: when the list is hovered, every item drops to 40%,
   then the specifically-hovered item snaps back to 100%. */
.lw-faq-list .fs_accordion-1_component:hover .fs_accordion-1_item {
  opacity: 0.4;
  transition: opacity 0.18s ease;
}
.lw-faq-list .fs_accordion-1_component .fs_accordion-1_item:hover,
.lw-faq-list .fs_accordion-1_component .fs_accordion-1_item:focus-within {
  opacity: 1;
}

/* -----------------------------------------------------------
   Footer — pin to container width, kill the off-right overflow,
   add breathing room above and zero space below.
   ----------------------------------------------------------- */
.light-footer {
  width: 100%;
  margin-top: 8em;       /* space above the footer (below the last FAQ row) */
  padding-bottom: 0;     /* no space below — flush against the section bottom */
}
.light-footer .footer {
  /* Match width of the case-study .work-grid in dark section above by
     using the same 85.5% intrinsic width pattern (no transform). The grid
     above shows 85.5% effective because work-section is 90% with IX2's
     scale(0.95) applied. Bake that into a static width here so footer
     matches without the visual scale transform. */
  width: 85.5% !important;
  max-width: 1525px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 1.5em !important;
  box-sizing: border-box;
}

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */
/* Tablet / narrow desktop: keep 3-col grid; tighten gutters slightly */
@media (max-width: 1024px) {
  .lw-tiers { grid-template-columns: 1fr 6% 1fr 6% 1fr; }
}

/* Mobile breakpoint — stack 1 col below 767px */
@media (max-width: 767px) {
  /* padding-top is governed by the section's clamp() rule — don't override
     here, otherwise top spacing collapses on mobile. */
  .lets-work-section { padding-bottom: 0; }
  .light-footer { margin-top: 4em; }
  .lw-hero { margin-bottom: 3em; }
  /* Reset the full-viewport bleed at mobile — the heading isn't bigger
     than the container at this size, so the bleed causes left-hang.
     Also drop the optical translate which exaggerates left-hang at small
     widths. Cam directive 2026-05-27 #22507. */
  .lw-heading {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  .lw-heading .main-heading {
    font-size: clamp(2.5rem, 16cqi, 5.25rem);
    transform: none;
  }
  .lw-eyebrow-serif { font-size: 1.15em; padding-top: 0; }
  .lw-tiers { grid-template-columns: 1fr; gap: 2em; }
  .lw-tier-divider { display: none; }
  /* Restore full tier-text sizes on mobile single-column (no longer tight) */
  .lw-tier-name { font-size: 2.25rem; }
  .lw-tier-amount { font-size: 1.25rem; }
  .lw-tier-feature .text-sm-reg { font-size: 0.95rem; }
  .lw-tier-feature .lw-check { width: 1.125rem; height: 1.125rem; }
  /* Never stack the pfp-row + Book a Call button. Keep side-by-side at
     all viewport sizes (Cam directive 2026-05-27 #22502). */
  .lw-cta-row { grid-template-columns: max-content 1fr; gap: 1em; }
  .lw-cta-btn-fancy .fancy-btn-text { font-size: 1.1em; }
  .lw-faq-block { margin-top: 4em; }
  .lw-faq-list .fs_accordion-1_label,
  .lw-faq-list .fs_accordion-1_label * { font-size: 1.25em !important; }
  /* On touch devices arrows + sibling dim don't make sense — show arrows, no dim */
  .lw-faq-list .fs_accordion-1_arrow-wrapper,
  .lw-faq-list .fs_accordion-1_icon { opacity: 1; }
  .lw-faq-list .fs_accordion-1_component:hover .fs_accordion-1_item { opacity: 1; }
  /* Kill Webflow's mobile footer top-border (Cam #22512). */
  .light-footer .footer { border-top: 0 !important; }
}

/* -----------------------------------------------------------
   Loader — apply screen blend mode from first paint so the black
   video frame disappears against the black .loader bg immediately,
   before Webflow IX2 JS gets a chance to add it.
   ----------------------------------------------------------- */
.loader { background-color: #000; }
.loader-loop,
.layertwo-logo-animation,
.layertwo-logo-animation video,
.layertwo-logo-animation .w-background-video-atom {
  mix-blend-mode: screen;
  background-color: transparent !important;
  background-image: none !important;  /* drop the poster JPG so no flash before video starts */
}