/* ==========================================================================
   KILR Studios - Custom Styles
   ========================================================================== */

/* ==========================================================================
   1. CSS VARIABLES (Brand Override)
   ========================================================================== */

   :root {
    /* Colors (from WebStudio reference) */
    --color-primary: rgb(250 189 2 / 1);
    --color-secondary: rgb(240 238 232 / 1);
    --color-dark: rgb(28 28 28 / 1);
    --color-light: white;
    --color-gray: #F5F5F5;
    
    /* Fonts */
    --font-heading: 'Benguiat Pro ITC', 'itc-benguiat', Georgia, serif;
    --font-subheading: 'Degular', 'degular-variable', 'Inter', sans-serif;
    --font-body: 'DM Sans', 'dm-sans', 'Inter', sans-serif;
    --font-faq: 'Adelphi PE Variable', 'Inter', sans-serif;
    
    /* Section Padding (Fluid - from WebStudio) */
    --section-xxl: clamp(7.01rem, 5.644rem + 6.83vw, 12.47rem);
    --section-xl: clamp(5.26rem, 4.37rem + 4.45vw, 8.82rem);
    --section-l: clamp(3.95rem, 3.378rem + 2.86vw, 6.24rem);
    --section-m: clamp(2.96rem, 2.598rem + 1.81vw, 4.41rem);
    --section-s: clamp(2.22rem, 1.996rem + 1.12vw, 3.12rem);
    --section-xs: clamp(1.67rem, 1.534rem + 0.68vw, 2.21rem);
    --section-xxs: clamp(1.25rem, 1.172rem + 0.39vw, 1.56rem);
    
    /* Container Widths (Fluid - from WebStudio) */
    --container-xl: clamp(19.4rem, 0.5rem + 94.5vw, 95rem);
    --container-l: clamp(18.49rem, 2.886rem + 78.02vw, 80.91rem);
    --container-m: clamp(17.62rem, 4.796rem + 64.12vw, 68.92rem);
    --container-s: clamp(16.79rem, 6.312rem + 52.39vw, 58.7rem);
    --container-xs: clamp(16rem, 7.5rem + 42.5vw, 50rem);
    
    /* Spacing (Fluid - from WebStudio) */
    --space-xxl: clamp(2.85rem, 2.16rem + 3.45vw, 5.61rem);
    --space-xl: clamp(1.9rem, 1.508rem + 1.96vw, 3.47rem);
    --space-l: clamp(1.27rem, 1.052rem + 1.09vw, 2.14rem);
    --space-m: clamp(0.84rem, 0.72rem + 0.6vw, 1.32rem);
    --space-s: clamp(0.56rem, 0.496rem + 0.32vw, 0.82rem);
    --space-xs: clamp(0.38rem, 0.348rem + 0.16vw, 0.51rem);
    --space-xxs: clamp(0.25rem, 0.234rem + 0.08vw, 0.3125rem);
    
    /* Typography (Fluid - from WebStudio) */
    --heading-xxl: clamp(3.5rem, 2.2rem + 6.5vw, 8.7rem);
    --heading-xl: clamp(2.8rem, 1.968rem + 4.16vw, 6.13rem);
    --heading-l: clamp(2.24rem, 1.722rem + 2.59vw, 4.31rem);
    --heading-m: clamp(1.79rem, 1.478rem + 1.56vw, 3.04rem);
    --heading-s: clamp(1.43rem, 1.252rem + 0.89vw, 2.14rem);
    --heading-xs: clamp(1.15rem, 1.06rem + 0.45vw, 1.51rem);
    --heading-xxs: clamp(0.92rem, 0.884rem + 0.18vw, 1.06rem);
    
    /* Custom Spacing */
    --nav-height: rem;
    --btn-radius: 100rem; /* Fully rounded */
    --card-radius: 2rem;
    --faq-radius: 2.125rem;
  }
  
  /* ==========================================================================
     2. CONTAINER SETUP (Ensure framework containers work)
     ========================================================================== */
  
  [class*="container-"] {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    position: relative;
  }
  
  .container-xl {
    width: var(--container-xl);
    max-width: 100%;
  }
  
  .container-l {
    width: var(--container-l);
    max-width: 100%;
  }
  
  .container-m {
    width: var(--container-m);
    max-width: 100%;
  }
  
  .container-s {
    width: var(--container-s);
    max-width: 100%;
  }
  
  .container-xs {
    width: var(--container-xs);
    max-width: 100%;
  }
  
  /* ==========================================================================
     3. BASE OVERRIDES
     ========================================================================== */
  
  body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background-color: var(--color-dark);
    color: var(--color-light);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip; /* Prevent horizontal scroll but allow overflow within sections */
  }
  
  /* Page wrapper clips horizontal overflow from tears */
  .page-wrapper {
    overflow-x: clip;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 0.85;
    margin: 0;
    padding: 0;
  }
  
  p {
    margin: 0;
    padding: 0;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* ==========================================================================
     3. TYPOGRAPHY UTILITIES
     ========================================================================== */
  
  .font-heading {
    font-family: var(--font-heading);
    font-weight: 500;
  }
  
  .font-subheading {
    font-family: var(--font-subheading);
    font-weight: 600;
  }
  
  .font-body {
    font-family: var(--font-body);
    font-weight: 400;
  }
  
  .text-uppercase {
    text-transform: uppercase;
  }
  
  .text-center {
    text-align: center;
  }
  
  /* Custom text sizes using fluid variables */
  .text-hero {
    font-size: var(--heading-xxl);
    line-height: 0.9;
  }
  
  .text-section-title {
    font-size: var(--heading-l);
    line-height: 0.9;
  }
  
  .text-statement {
    font-size: var(--heading-l);
    line-height: 0.9;
  }
  
  .text-quote {
    font-size: var(--heading-m);
    line-height: 0.9;
  }
  
  .text-cta-heading {
    font-size: var(--heading-l);
    line-height: 0.9;
  }
  
  .text-subheading-l {
    font-size: var(--heading-xs);
    line-height: 1;
  }
  
  .text-subheading-m {
    font-size: var(--heading-xxs);
    line-height: 1;
  }
  
  .text-body-l {
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.3rem);
    line-height: 1.5;
  }
  
  .text-tagline {
    font-size: var(--heading-xs);
    line-height: 1;
  }
  
  /* ==========================================================================
     4. BUTTONS
     ========================================================================== */
  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--btn-radius);
    font-family: var(--font-subheading);
    font-weight: 500;
    font-size: var(--heading-xxs);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
    padding-left: var(--space-l);
    padding-right: var(--space-l);
  }
  
  .btn:hover {
    transform: translateY(-2px);
  }
  
  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-dark);
  }
  
  .btn-dark {
    background-color: var(--color-dark);
    color: var(--color-secondary);
    border: 1px solid var(--color-dark);
  }
  
  .btn-outline {
    background-color: transparent;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
  }
  
  .btn-l {
    font-size: var(--heading-xs);
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
  
  .btn-m {
    font-size: var(--heading-xxs);
    padding-left: var(--space-l);
    padding-right: var(--space-l);
  }
  
  .btn-s {
    font-size: var(--heading-xxs);
    padding: var(--space-xs) var(--space-m);
  }
  
  .btn-xs {
    font-size: clamp(0.87rem, 0.862rem + 0.04vw, 0.9rem);
    padding-left: var(--space-m);
    padding-right: var(--space-m);
  }
  
  /* ==========================================================================
     5. NAVIGATION
     ========================================================================== */
  
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    height: var(--nav-height);
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
  }
  
  .nav.is-scrolled {
    background-color: rgba(28, 28, 28, 0.9);
    backdrop-filter: blur(10px);
  }
  
  .nav_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: var(--container-xl);
    max-width: 100%;
    margin: 0 auto;
    position: relative;
  }
  
  .nav_logo {
    display: flex;
    align-items: center;
  }
  
  .nav_logo-img {
    height: 2.5rem;
    width: auto;
  }
  
  /* ==========================================================================
     6. HERO SECTION
     ========================================================================== */
  
  /* Level 1: Section - framework padding variables */
  .hero {
    position: relative;
    z-index: 1;
    padding-top: var(--section-xl);
    padding-bottom: var(--section-xl);
    overflow: visible; /* Allow tears from adjacent sections to overlap */
  }
  
  /* Level 2: Container - handled by .container-xl in HTML */
  /* Level 3: Content wrapper - flow direction and internal spacing */
  .hero_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: var(--section-xl);
    padding-bottom: var(--section-xl);
  }
  
  /* Background image - absolute positioned */
  .hero_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }
  
  .hero_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
  }
  
  /* Gradient overlay */
  .hero_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(to bottom, rgba(28, 28, 28, 0.5), transparent);
    z-index: -1;
  }
  
  /* Content elements */
  .hero_tagline {
    margin-bottom: var(--space-l);
  }
  
  .hero_headline {
    margin-bottom: var(--space-xl);
  }
  
  /* CTA spacing */
  .hero_cta {
    margin-top: var(--space-xxl);
  }
  
  /* Grain texture overlay */
  .grain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: lighten;
    opacity: 0.5;
  }
  
  .grain-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
/* ==========================================================================
   7. TORN PAPER DIVIDERS
   
   TWO METHODS:
   A) Combined PNG tear (dark+paper) for dark-to-light transitions
      Uses translate positioning from WebStudio reference.
   B) SVG mask on section edge for light-to-dark or any transition
      The section edge IS the tear shape. No extra images needed.
   ========================================================================== */

/* --- METHOD A: Combined PNG tear image (dark fill baked in) --- */
/* Used when transitioning INTO a dark section */
.tear-wrapper {
  position: absolute;
  width: 100%;
  left: 0;
  overflow-x: visible;
  overflow-y: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.tear-wrapper--top {
  top: 0;
  translate: 0px -50% 0px;
}

.tear-wrapper--bottom {
  bottom: 0;
  translate: 0px 50% 0px;
  transform: rotate(180deg);
}

.tear-image {
  height: auto;
  max-width: none;
  min-width: 110%;
  min-height: 2rem;
  object-fit: cover;
}

/* Flip the image vertically - used when placing a light tear at the top of a dark section */
.tear-image--flipped {
  transform: scaleY(-1);
}

@media (max-width: 767px) {
  .tear-image {
    min-height: 2.5rem;
  }
}

/* --- METHOD B: SVG mask on section edge --- */
/* Used for ANY transition - shapes the section edge itself */
/* The SVG path creates the torn edge, background shows through naturally */

/* Sections with tears must allow pseudo-elements to extend beyond bounds */
.tear-edge--bottom,
.tear-edge--top {
  position: relative;
  overflow: visible;
  z-index: 2; /* Above adjacent dark sections */
}

/* Encode the tear SVG path inline for use as mask-image */
.tear-edge--bottom::after,
.tear-edge--top::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(2.5rem, 1.5rem + 3vw, 6rem);
  z-index: 10;
  background-color: var(--color-secondary);
  background-image: url('../images/paper-texture.png');
  background-size: cover;
  background-blend-mode: overlay;
  pointer-events: none;
}

/* Bottom tear edge - shapes the bottom of the current section */
/* Extends below section to overlap next dark section */
.tear-edge--bottom::after {
  bottom: 0;
  transform: translateY(50%); /* Push down to overlap next section */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2958 106' preserveAspectRatio='none'%3E%3Cpath d='M79.5 0H0v105.1h2957.5V0l-59.3 10.8h-99.7H2720.4l-95.7 20.2-70.1 14.8-68.7 6.7-52.6-21.6-91.6-12.1-68.7-8.1h-86.2l-98.4-10.8h-56.6l-75.4 10.8-94.3 41.8h-90.3l-107.8-21.6-66-12.1-66-8.1-67.4-10.8-98.4 10.8h-67.4l-29.6 8.1-109.1 12.1-114.5 8.1h-62l-132-28.3h-90.3-76.8l-91.6-10.8-63.3 10.8-84.9 20.2-107.8 25.6-80.8-17.5-107.8-28.3L79.5 0z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2958 106' preserveAspectRatio='none'%3E%3Cpath d='M79.5 0H0v105.1h2957.5V0l-59.3 10.8h-99.7H2720.4l-95.7 20.2-70.1 14.8-68.7 6.7-52.6-21.6-91.6-12.1-68.7-8.1h-86.2l-98.4-10.8h-56.6l-75.4 10.8-94.3 41.8h-90.3l-107.8-21.6-66-12.1-66-8.1-67.4-10.8-98.4 10.8h-67.4l-29.6 8.1-109.1 12.1-114.5 8.1h-62l-132-28.3h-90.3-76.8l-91.6-10.8-63.3 10.8-84.9 20.2-107.8 25.6-80.8-17.5-107.8-28.3L79.5 0z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Top tear edge - shapes the top of the current section */
/* Extends above section to overlap previous dark section */
.tear-edge--top::before {
  top: 0;
  transform: translateY(-50%) scaleY(-1); /* Pull up to overlap + flip vertically */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2958 106' preserveAspectRatio='none'%3E%3Cpath d='M79.5 0H0v105.1h2957.5V0l-59.3 10.8h-99.7H2720.4l-95.7 20.2-70.1 14.8-68.7 6.7-52.6-21.6-91.6-12.1-68.7-8.1h-86.2l-98.4-10.8h-56.6l-75.4 10.8-94.3 41.8h-90.3l-107.8-21.6-66-12.1-66-8.1-67.4-10.8-98.4 10.8h-67.4l-29.6 8.1-109.1 12.1-114.5 8.1h-62l-132-28.3h-90.3-76.8l-91.6-10.8-63.3 10.8-84.9 20.2-107.8 25.6-80.8-17.5-107.8-28.3L79.5 0z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2958 106' preserveAspectRatio='none'%3E%3Cpath d='M79.5 0H0v105.1h2957.5V0l-59.3 10.8h-99.7H2720.4l-95.7 20.2-70.1 14.8-68.7 6.7-52.6-21.6-91.6-12.1-68.7-8.1h-86.2l-98.4-10.8h-56.6l-75.4 10.8-94.3 41.8h-90.3l-107.8-21.6-66-12.1-66-8.1-67.4-10.8-98.4 10.8h-67.4l-29.6 8.1-109.1 12.1-114.5 8.1h-62l-132-28.3h-90.3-76.8l-91.6-10.8-63.3 10.8-84.9 20.2-107.8 25.6-80.8-17.5-107.8-28.3L79.5 0z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Color variants - match the section the tear overlaps INTO */
.tear-edge--dark::after,
.tear-edge--dark::before {
  background-color: var(--color-dark);
}
  
  /* ==========================================================================
     7B. BADGE WITH BRUSH STROKE (Text inside yellow oval)
     ========================================================================== */
  
  .badge-brush {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
  }
  
  .badge-brush_stroke {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    min-width: 21.375rem; /* 342px minimum */
    pointer-events: none;
  }
  
  .badge-brush_stroke svg {
    width: 100%;
    height: 100%;
  }
  
  .badge-brush_text {
    position: relative;
    z-index: 1;
    font-family: var(--font-subheading);
    font-weight: 600;
    font-size: clamp(1.25rem, 1rem + 0.75vw, 2.25rem); /* 36px */
    text-transform: uppercase;
    color: var(--color-light);
    white-space: nowrap;
  }
  
  /* Smaller badge variant */
  .badge-brush.badge-brush--small .badge-brush_stroke {
    min-width: 18.25rem; /* 292px */
  }
  
  .badge-brush.badge-brush--small .badge-brush_text {
    font-size: clamp(1.25rem, 1rem + 0.5vw, 2.25rem);
  }
  
  /* Dark text variant for cream backgrounds */
  .badge-brush.badge-brush--dark .badge-brush_text {
    color: var(--color-dark);
  }
  
  /* Left-aligned badge variant */
  .badge-brush--left {
    justify-content: flex-start;
  }
  
  /* ==========================================================================
     8. PHILOSOPHY SECTION
     ========================================================================== */
  
  .philosophy {
    position: relative;
    z-index: 2;
    background-color: var(--color-dark);
    padding-top: var(--section-xl);
    padding-bottom: var(--section-xl);
    overflow: visible; /* CRITICAL: Allow tear to extend beyond section bounds */
  }
  
  .philosophy_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .philosophy_statement {
    max-width: 67.5rem; /* 1081px */
    margin-bottom: 2rem;
  }
  
  .philosophy_description {
    max-width: 67.625rem; /* 1082px */
    color: var(--color-gray);
  }
  
  /* Philosophy section CTA spacing */
  .philosophy_content .btn {
    margin-top: 2rem;
  }
  
  /* ==========================================================================
     9. WHAT WE DO SECTION
     ========================================================================== */
  
.what-we-do {
  position: relative;
  z-index: 1;
  background-color: var(--color-secondary);
  padding-top: var(--section-xl);
  padding-bottom: var(--section-xl);
  overflow: visible; /* Allow tears from adjacent sections to overlap */
}
  
  .what-we-do_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    mix-blend-mode: multiply;
    opacity: 0.5;
  }
  
  .what-we-do_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .what-we-do_container {
    position: relative;
    z-index: 1;
  }
  
  .what-we-do_left {
    max-width: 55rem; /* ~880px */
  }
  
  .what-we-do_badge {
    margin-bottom: 1rem;
  }
  
  .what-we-do_badge img {
    width: 18.25rem; /* 292px */
    height: auto;
  }
  
  .what-we-do_label {
    color: var(--color-dark);
    margin-bottom: 1.5rem;
  }
  
  .what-we-do_headline {
    color: var(--color-dark);
    margin-bottom: 2rem;
  }
  
  .what-we-do_description {
    color: var(--color-dark);
    margin-bottom: 2rem;
  }
  
  .what-we-do_tagline {
    color: var(--color-dark);
    max-width: 58.5rem; /* 934px */
    margin-bottom: 2.5rem;
  }
  
  .what-we-do_graphic {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
    max-width: 40rem;
    z-index: 0;
  }
  
  .what-we-do_graphic img {
    width: 100%;
    height: auto;
  }
  
  /* ==========================================================================
     10. CLIENT STORIES SECTION
     ========================================================================== */
  
.client-stories {
  position: relative;
  z-index: 2;
  min-height: 73.8125rem; /* 1181px */
  padding-top: var(--section-xl);
  padding-bottom: var(--section-xl);
  overflow: visible; /* CRITICAL: Allow tear to extend beyond section bounds */
}
  
  .client-stories_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  
  .client-stories_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .client-stories_content {
    position: relative;
    z-index: 1;
    padding-top: 15rem;
    padding-left: 10%;
  }
  
  .client-stories_label {
    margin-bottom: 2rem;
  }
  
  .client-stories_quote-icon {
    width: 10.125rem; /* 162px */
    margin-bottom: 1rem;
  }
  
  .client-stories_quote {
    max-width: 47rem; /* 751px */
    margin-bottom: 2rem;
  }
  
  .client-stories_cta {
    margin-bottom: 8rem;
  }
  
  .client-stories_attribution {
    position: absolute;
    bottom: 10%;
    right: 5%;
  }
  
  /* Slider dots */
  .slider-dots {
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }
  
  .slider-dot {
    width: 1.25rem; /* 20px */
    height: 1.25rem;
    cursor: pointer;
  }
  
  .slider-dot.is-active {
    width: 1.75rem; /* 28px */
    height: 1.75rem;
  }
  
  /* Slider arrows */
  .slider-arrows {
    display: flex;
    gap: 2rem;
    align-items: center;
  }
  
  /* Client Stories slider arrows - positioned on sides */
  .client-stories_slider-arrows {
    position: absolute;
    bottom: 40%;
    left: 5%;
    right: 5%;
    justify-content: space-between;
  }
  
  /* What's Included slider dots - centered below slider */
  .whats-included_slider-dots {
    justify-content: center;
    margin-top: 2rem;
  }
  
  .slider-arrow {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }
  
  .slider-arrow:hover {
    opacity: 1;
  }
  
  /* ==========================================================================
     11. WORK WITH US SECTION
     ========================================================================== */
  
.work-with-us {
  position: relative;
  z-index: 1;
  background-color: var(--color-secondary);
  padding-top: var(--section-xl);
  padding-bottom: var(--section-xl);
  overflow: visible; /* Allow tears from adjacent sections to overlap */
}
  
  .work-with-us_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    mix-blend-mode: multiply;
    opacity: 0.5;
  }
  
  .work-with-us_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .work-with-us_container {
    position: relative;
    z-index: 1;
  }
  
  .work-with-us_left {
    max-width: 60%;
  }
  
  .work-with-us_badge {
    margin-bottom: 1rem;
  }
  
  .work-with-us_badge img {
    width: 18.25rem; /* 292px */
    height: auto;
  }
  
  .work-with-us_label {
    color: var(--color-dark);
    margin-bottom: 1.5rem;
  }
  
  .work-with-us_headline {
    color: var(--color-dark);
    margin-bottom: 3rem;
    max-width: 77.7rem; /* 1243px */
  }
  
  .work-with-us_checklist {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }
  
  .work-with-us_checklist-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  
  .work-with-us_checklist-icon {
    position: relative;
    width: 2.678rem; /* ~43px */
    height: 2.678rem;
    flex-shrink: 0;
  }
  
  .work-with-us_checklist-icon img:first-child {
    width: 100%;
    height: 100%;
  }
  
  .work-with-us_checklist-icon img:last-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
  }
  
  .work-with-us_checklist-text {
    font-family: var(--font-subheading);
    font-weight: 500;
    font-size: clamp(1.25rem, 1rem + 1vw, 2.5rem); /* 40px */
    color: var(--color-dark);
  }
  
  .work-with-us_graphic {
    position: absolute;
    right: 5%;
    bottom: 0;
    width: 35%;
    max-width: 31rem; /* ~492px */
    z-index: 2;
  }
  
  .work-with-us_graphic img {
    width: 100%;
    height: auto;
  }
  
  .work-with-us_scribble {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 35rem;
    z-index: 1;
  }
  
  /* ==========================================================================
     12. WHAT'S INCLUDED SECTION
     ========================================================================== */
  
  .whats-included {
    position: relative;
    z-index: 2;
    background-color: var(--color-dark);
    padding-top: var(--section-xl);
    padding-bottom: var(--section-xl);
    overflow: visible; /* CRITICAL: Allow tear to extend beyond section bounds */
  }
  
  .whats-included_header {
    margin-bottom: 2rem;
  }
  
  .whats-included_badge {
    margin-bottom: 1rem;
  }
  
  .whats-included_badge img {
    width: 24.42rem; /* ~390px */
    height: auto;
  }
  
  .whats-included_label {
    margin-bottom: 2rem;
  }
  
  .whats-included_tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
  }
  
  .whats-included_tab {
    padding: 0.8125rem 1.5rem;
    border-radius: var(--btn-radius);
    font-family: var(--font-subheading);
    font-weight: 600;
    font-size: 1.125rem; /* 18px */
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .whats-included_tab.is-active {
    background-color: var(--color-primary);
    color: var(--color-dark);
  }
  
  .whats-included_tab:not(.is-active) {
    background-color: transparent;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
  }
  
  .whats-included_headline {
    margin-bottom: 1.5rem;
    max-width: 82.7rem; /* 1323px */
  }
  
  .whats-included_description {
    margin-bottom: 3rem;
    max-width: 81.6rem; /* 1306px */
  }
  
  .whats-included_slider {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 2rem;
    scroll-snap-type: x mandatory;
  }
  
  .whats-included_card {
    flex-shrink: 0;
    width: 40.85rem; /* ~654px */
    height: 27.25rem; /* ~436px */
    border-radius: var(--card-radius);
    overflow: hidden;
    scroll-snap-align: start;
  }
  
  .whats-included_card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* ==========================================================================
     13. CTA SECTION
     ========================================================================== */
  
.cta-section {
  position: relative;
  z-index: 1;
  min-height: 62.1875rem; /* 995px */
  padding-top: var(--section-xl);
  padding-bottom: var(--section-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible; /* Allow tears from adjacent sections to overlap */
}
  
  .cta-section_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }
  
  .cta-section_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .cta-section_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
  }
  
  .cta-section_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 2rem;
    z-index: 1;
  }
  
  .cta-section_subheading {
    margin-bottom: 2rem;
    max-width: 37.5rem; /* 600px */
  }
  
  .cta-section_headline {
    margin-bottom: 3rem;
    max-width: 60.25rem; /* 964px */
  }
  
  /* ==========================================================================
     14. FAQ SECTION
     ========================================================================== */
  
  .faq {
    position: relative;
    z-index: 2;
    background-color: var(--color-dark);
    padding-top: var(--section-xl);
    padding-bottom: var(--section-xl);
    overflow: visible; /* CRITICAL: Allow tear to extend beyond section bounds */
  }
  
  .faq_headline {
    margin-bottom: 4rem;
  }
  
  .faq_list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 80.6875rem; /* 1291px */
    margin: 0 auto;
  }
  
  .faq_item {
    background-color: var(--color-gray);
    border: 1px solid var(--color-dark);
    border-radius: var(--faq-radius);
    overflow: hidden;
    transition: border-radius 0.3s ease;
  }
  
  .faq_item.is-open {
    border-radius: var(--faq-radius) var(--faq-radius) 1.5625rem 1.5625rem; /* 25px */
  }
  
  .faq_question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 3.75rem; /* 28px 60px */
    cursor: pointer;
  }
  
  .faq_question-text {
    font-family: var(--font-faq);
    font-weight: 500;
    font-size: 1.375rem; /* 22px */
    color: var(--color-dark);
    text-transform: uppercase;
  }
  
  .faq_question-icon {
    width: 1.128rem; /* ~18px */
    height: 1.128rem;
    transition: transform 0.3s ease;
  }
  
  .faq_item.is-open .faq_question-icon {
    transform: rotate(-45deg);
  }
  
  .faq_answer {
    display: none;
    padding: 0 4.8125rem 4.375rem; /* 0 77px 70px */
  }
  
  .faq_item.is-open .faq_answer {
    display: block;
  }
  
  .faq_answer-text {
    font-family: var(--font-faq);
    font-weight: 300;
    font-size: 1.125rem; /* 18px */
    color: var(--color-dark);
    line-height: 1.5;
  }
  
  .faq_cta {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
  }
  
  /* ==========================================================================
     15. FOOTER
     ========================================================================== */
  
  .footer {
    position: relative;
    z-index: 1;
    background-color: var(--color-secondary);
    padding-top: var(--section-xl);
    padding-bottom: var(--section-m);
    overflow: visible; /* Allow tears from adjacent sections to overlap */
  }
  
  .footer_container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .footer_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
  }
  
  .footer_logo-img {
    width: 8.3125rem; /* 133px */
    height: auto;
    filter: invert(1); /* Inverts white to dark for footer */
  }
  
  .footer_tagline {
    font-family: var(--font-subheading);
    font-weight: 700;
    font-size: 1.5625rem; /* 25px */
    color: var(--color-dark);
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    letter-spacing: -0.047rem; /* -0.75px */
    max-width: 27.6875rem; /* 443px */
    margin-bottom: 3rem;
  }
  
  .footer_newsletter {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 6rem;
  }
  
  .footer_newsletter-input {
    background-color: #D9D9D9;
    border: none;
    border-radius: 1.875rem; /* 30px */
    padding: 0.75rem 1.5rem;
    width: 15.1875rem; /* 243px */
    height: 2.375rem; /* 38px */
    font-family: var(--font-subheading);
    font-size: 1.25rem; /* 20px */
    color: rgba(0, 0, 0, 0.25);
    text-transform: uppercase;
  }
  
  .footer_newsletter-input::placeholder {
    color: rgba(0, 0, 0, 0.25);
  }
  
  .footer_newsletter-btn {
    margin-left: -2rem;
  }
  
  .footer_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 90%;
  }
  
  .footer_copyright {
    font-family: var(--font-body);
    font-size: 1.125rem; /* 18px */
    color: var(--color-light);
  }
  
  .footer_links {
    display: flex;
    gap: 3rem;
  }
  
  .footer_link {
    font-family: var(--font-body);
    font-size: 1.125rem; /* 18px */
    color: var(--color-light);
    transition: opacity 0.2s ease;
  }
  
  .footer_link:hover {
    opacity: 0.7;
  }
  
  /* ==========================================================================
     16. UTILITIES
     ========================================================================== */
  
  .section-dark {
    background-color: var(--color-dark);
  }
  
  .section-cream {
    background-color: var(--color-secondary);
  }
  
  .color-dark {
    color: var(--color-dark);
  }
  
  .color-light {
    color: var(--color-light);
  }
  
  .color-primary {
    color: var(--color-primary);
  }
  
  .color-cream {
    color: var(--color-secondary);
  }
  
  /* Hide visually but keep accessible */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  /* ==========================================================================
     17. RESPONSIVE
     ========================================================================== */
  
  @media (max-width: 1200px) {
    .work-with-us_graphic {
      width: 30%;
    }
    
    .what-we-do_graphic {
      width: 35%;
    }
  }
  
  @media (max-width: 991px) {
    .what-we-do_graphic,
    .work-with-us_graphic,
    .work-with-us_scribble {
      display: none;
    }
    
    .what-we-do_left,
    .work-with-us_left {
      max-width: 100%;
    }
    
    .client-stories_content {
      padding-left: 5%;
      padding-right: 5%;
    }
    
    .client-stories_attribution {
      position: relative;
      bottom: auto;
      right: auto;
      margin-top: 2rem;
    }
  }
  
  @media (max-width: 767px) {
    .nav_container {
      padding: 0 1rem;
    }
    
    .hero_headline {
      font-size: 3rem;
    }
    
    .philosophy_statement,
    .what-we-do_headline,
    .work-with-us_headline {
      font-size: 2.5rem;
    }
    
    .whats-included_tabs {
      flex-wrap: wrap;
    }
    
    .whats-included_card {
      width: 80vw;
    }
    
    .faq_question {
      padding: 1.25rem 1.5rem;
    }
    
    .faq_answer {
      padding: 0 1.5rem 2rem;
    }
    
    .footer_bottom {
      flex-direction: column;
      gap: 2rem;
      text-align: center;
    }
    
    .footer_links {
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem;
    }
  }
  
  @media (max-width: 479px) {
    .btn-l {
      height: 3.5rem;
      font-size: 1.25rem;
    }
    
    .btn-m {
      height: 3rem;
      font-size: 1rem;
    }
    
    .btn-s {
      padding: var(--space-xs) var(--space-s);
      font-size: 0.875rem;
    }
    
    .client-stories_quote {
      font-size: 1.5rem;
    }
    
    .work-with-us_checklist-text {
      font-size: 1rem;
    }
    
    /* Hero typography adjustments for mobile */
    .hero_headline {
      font-size: 2.5rem;
      word-break: break-word;
      /* margin-bottom: var(--space-xs); */
    }
    
    .hero_tagline {
      font-size: 0.75rem;
    }
    
    /* Nav mobile fixes */
    .nav_container {
      padding: 0 0.75rem;
    }
    
    .nav_logo-img {
      /* width: 6rem; */
      height: 2rem;
    }
    
    .footer_logo-img {
      width: 6rem;
    }
  }