:root {
    --black: #000000;
  --acid: #C8F400;
  --acid-dim: #C8F40044;
  --acid-glow: #C8F40022;
    --white: #ffffff;
    --gray: #000000;
  --gray-muted: #888888;
    --light: #f2f2f2;
    --border: #e0e0e0;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--white);
    color: var(--black);
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    cursor: auto;
  }

  /* ── GLOBAL SUBHEADING / LABEL FONT — Barlow Condensed ── */
  .hero-index, .hero-desc-top, .hero-services-list li, .hero-cta,
  .showreel-label, .work-count, .work-type, .work-num,
  .services-label, .services-sub, .services-count,
  .svc-num, .svc-desc, .svc-arrow,
  .about-cell-label, .about-cell-desc,
  .process-label, .process-body, .ps-num, .ps-desc,
  .cta-label, .cta-sub, .cta-email,
  .marquee-item, .video-label, .footer-copy,
  .footer-links a, .hero-desc-top {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 500;
    letter-spacing: 0.08em;
  }

  /* Section titles — Barlow Condensed Bold */
  .showreel-title, .work-title, .services-title,
  .process-title, .cta-title, .about-cell-num,
  .work-client, .svc-name, .ps-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  /* Small caps labels stay condensed but lighter */
  .hero-index, .showreel-label, .work-count, .work-num,
  .svc-num, .ps-num, .about-cell-label, .process-label,
  .cta-label, .work-type, .video-label, .footer-copy,
  .footer-links a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
  }

  /* ── NAV ── */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 40px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    opacity: 1;
  }

  .nav-logo {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--black);
    text-decoration: none;
    flex-shrink: 0;
  }

  .nav-links {
    display: flex;
    flex: 1;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 26px;
    margin: 0 20px;
    list-style: none;
  }
  .nav-links a { white-space: nowrap; }

  .nav-links a {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--black);
    text-decoration: none;
    transition: opacity 0.2s;
  }

  .nav-links a:hover { color: #C8F400; opacity: 1; }

  .nav-contact {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--black);
    text-decoration: none;
    border-bottom: 1px solid var(--black);
    padding-bottom: 1px;
    flex-shrink: 0;
    white-space: nowrap;
    transition: opacity 0.2s;
  }

  .nav-contact:hover { color: #C8F400 !important; opacity: 1; }

  /* ── HERO ── */
  #hero {
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
  }

  .hero-top {
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }

  .hero-desc-top {
    max-width: 380px;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    font-weight: 700;
    text-align: right;
    font-family: 'Barlow Condensed', sans-serif;
  }

  .hero-mid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    overflow: hidden;
    height: 100%;
  }

  .hero-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
    border-top: 1px solid var(--border);
  }

  .hero-services-list {
    display: flex;
    gap: 24px;
    list-style: none;
    align-items: center;
    flex-wrap: wrap;
  }

  .hero-services-list li {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #000;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
  }

  .hero-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--black);
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    transition: gap 0.3s;
    white-space: nowrap;
  }

  .hero-cta:hover { gap: 20px; color: #C8F400; }
  .hero-cta:hover .hero-cta-line { background: #C8F400; width: 60px; }

  .hero-cta-line {
    width: 40px;
    height: 1px;
    background: var(--black);
    transition: width 0.3s;
  }

  /* ── MARQUEE ── */





  /* ── VIDEO SECTION ── */
  #showreel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
    border-bottom: 1px solid var(--border);
  }

  .showreel-left {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--border);
  }

  .showreel-label {
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000;
  }

  .showreel-title {
    font-family: 'Oswald', sans-serif; font-weight: 700;
    font-size: clamp(36px, 4vw, 56px);
    
    line-height: 1.0;
    letter-spacing: -0.02em;
  }

  .showreel-title em {
    font-style: normal;
    
  }

  .showreel-body {
    font-size: 18px;
    line-height: 1.7;
    color: #000;
    max-width: 380px;
  }

  .showreel-right {
    position: relative;
    background: var(--black);
    overflow: hidden;
    min-height: 400px;
  }

  .showreel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.9;
  }

  /* Video placeholder */
  .video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #0a0a0a;
  }

  .play-ring {
    width: 72px;
    height: 72px;
    border: 1px solid #ffffff33;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s, transform 0.3s;
  }

  .showreel-right:hover .play-ring {
    border-color: #ffffff88;
    transform: scale(1.1);
  }

  .play-triangle {
    width: 0;
    height: 0;
    border-left: 20px solid var(--white);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    margin-left: 4px;
    opacity: 0.8;
  }

  .video-label {
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #ffffff44;
  }

  /* ── WORK GRID ── */
  #work {
    padding: 80px 40px;
    border-bottom: 1px solid var(--border);
  }



  .work-title em { font-style: normal;  }




  .work-item:first-child {
    grid-column: span 2;
    aspect-ratio: 16/9;
  }

  .work-item:hover .work-num { color: #C8F400; }

  .work-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
  }

  .work-item:hover img {
    transform: scale(1.04);
    opacity: 0.7;
  }



  .work-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--black);
    opacity: 0;
    transition: opacity 0.4s;
  }

  .work-item:hover .work-placeholder::before { opacity: 0.06; }



  .work-item:hover .work-arrow {
    opacity: 1;
    transform: translate(0, 0);
  }


  .work-item:hover .work-info { transform: translateY(-4px); }



  /* Decorative placeholder content */

  .work-line-h {
    position: absolute;
    height: 1px;
    background: var(--border);
  }

  .work-line-v {
    position: absolute;
    width: 1px;
    background: var(--border);
  }

  .work-info {
    position: relative;
    z-index: 2;
    transition: transform 0.4s;
  }

  .work-item:hover .work-info { transform: translateY(-4px); }

  .work-client {
    font-family: 'Oswald', sans-serif; font-weight: 700;
    font-size: 18px;
    
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }

  .work-type {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000;
  }

  .work-arrow {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 16px;
    color: var(--black);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.3s, transform 0.3s;
  }

  .work-item:hover .work-arrow {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* ── SERVICES ── */
  #services {
    border-bottom: 1px solid var(--border);
  }

  .services-header {
    padding: 60px 40px 40px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .services-title {
    font-family: 'Oswald', sans-serif; font-weight: 700;
    font-size: 42px;
    
    letter-spacing: -0.02em;
  }

  .services-title em { font-style: normal;  }

  .services-sub {
    font-size: 18px;
    color: #000;
    max-width: 320px;
    line-height: 1.6;
    text-align: right;
  }

  .service-row {
    display: grid;
    grid-template-columns: 1fr 200px 80px;
    align-items: center;
    gap: 40px;
    padding: 28px 40px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.3s;
    position: relative;
    overflow: hidden;
  }

  .service-row::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: #C8F400;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .service-row:hover::after { width: 100%; }
  .service-row:hover { background: var(--light); }

  .svc-num {
    font-size: 10px;
    letter-spacing: 0.15em;
    color: #000;
  }

  .svc-name {
    font-family: 'Oswald', sans-serif; font-weight: 700;
    font-size: 22px;
    
    letter-spacing: -0.01em;
  }

  .svc-desc {
    font-size: 12px;
    color: #000;
    line-height: 1.6;
  }

  .svc-arrow {
    font-size: 18px;
    text-align: right;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateX(-8px);
  }

  .service-row:hover .svc-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  /* ── PROCESS ── */
  #process {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border);
  }




  .process-title em { font-style: normal;  }




  .process-step:first-child { border-top: 1px solid var(--border); }
  .process-step:hover { padding-left: 12px; border-left: 2px solid #C8F400; }




  /* ── ABOUT STRIP ── */
  #about {
    display: block;
    border-bottom: 1px solid var(--border);
  }


  .about-cell:last-child { border-right: none; }




  /* ── CTA SECTION ── */
  #cta {
    padding: 120px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
  }

  .cta-left {}

  .cta-label {
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 24px;
  }

  .cta-title {
    font-family: 'Oswald', sans-serif; font-weight: 700;
    font-size: clamp(40px, 5.5vw, 80px);
    
    line-height: 0.95;
    letter-spacing: -0.03em;
    max-width: 700px;
  }

  .cta-title em { font-style: normal;  }

  .cta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    flex-shrink: 0;
    margin-left: 80px;
  }

  .cta-email {
    font-family: 'Oswald', sans-serif; font-weight: 700;
    font-size: 16px;
    font-style: normal;
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
  }

  .cta-email:hover { color: var(--black); }

  .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--black);
    padding: 18px 36px;
    text-decoration: none;
    transition: background 0.3s;
  }

  .cta-button:hover { background: #333; }

  /* ── FOOTER ── */
  footer {
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .footer-logo {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    list-style: none;
  }

  .footer-links a {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
  }

  .footer-links a:hover { color: var(--black); }

  .footer-copy {
    font-size: 10px;
    color: #000;
    letter-spacing: 0.05em;
  }

  /* ── CLIENTS ── */
  .clients-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    background: var(--border);
  }

  .client-item {
    background: var(--white);
    padding: 40px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border);
    transition: background 0.3s;
  }

  .client-item:last-child { border-right: none; }
  .client-item:hover, .client-item:active, .client-item:focus-within, .client-item:focus { background: #f8ffe0; outline: none; }

  .client-item img {
    max-width: 100%;
    max-height: 48px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: opacity 0.3s, filter 0.3s;
  }

  .client-item:hover img,
  .client-item:active img,
  .client-item:focus-within img,
  .client-item:focus img {
    opacity: 1;
    filter: grayscale(0%);
  }


  /* ── FAQ ── */
  .faq-items { display: flex; flex-direction: column; }

  .faq-item {
    padding: 24px 40px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 32px;
    grid-template-rows: auto auto;
    gap: 0 16px;
    transition: background 0.3s;
  }

  .faq-item:hover { background: #fafff0; }
  .faq-item:last-child { border-bottom: none; }

  .faq-q {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.01em;
    color: #000;
    padding: 4px 0;
    grid-column: 1;
    grid-row: 1;
  }

  .faq-icon {
    font-family: 'Barlow', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: #C8F400;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    width: 32px;
    height: 32px;
    transition: transform 0.3s;
    flex-shrink: 0;
    align-self: start;
    margin-top: 2px;
  }

  .faq-a {
    font-family: 'Barlow', sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: #000;
    font-weight: 400;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease;
    grid-column: 1;
    grid-row: 2;
    padding-top: 0;
  }

  .faq-item.open .faq-a {
    max-height: 600px;
    padding-top: 20px;
  }

  .faq-item.open .faq-icon {
    transform: rotate(45deg);
  }

  .faq-item.open { background: #fafff0; }

  @media (max-width: 900px) {
    #faq > div:last-of-type { grid-template-columns: 1fr; }
    .faq-item { padding: 20px 24px; }
  }

  /* ── ANIMATIONS ── */
  @keyframes ftScrollBounce {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(8px); }
    100% { transform: translateY(0px); }
  }

  @keyframes fadeIn {
    to { opacity: 1; }
  }

  @keyframes slideUp {
    from { opacity: 0; transform: translateY(32px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── HERO ANIMATION ── */
  .hero-headline {
    opacity: 0;
    animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  }

  .hero-top {
    opacity: 1;
  }

  .hero-bottom {
    opacity: 0;
    animation: fadeIn 0.8s ease 0.8s forwards;
  }

  /* ── REDUCED MOTION ── */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .hero-headline, .hero-bottom { opacity: 1 !important; }
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 900px) {
    nav { padding: 20px 24px; }
    .nav-links { display: none; }
    .hero-top { flex-direction: column; gap: 12px; }
    .hero-desc-top { text-align: left; }
    .hero-bottom { flex-direction: column; gap: 20px; align-items: flex-start; }
    .hero-services-list { flex-wrap: wrap; gap: 10px 18px; justify-content: flex-start; }
    /* hide the "·" separator items on mobile so wrapping doesn't strand dots */
    .hero-services-list li:nth-child(even) { display: none; }
    #showreel { grid-template-columns: 1fr; }
    .showreel-left { border-right: none; border-bottom: 1px solid var(--border); }
    .work-grid { grid-template-columns: 1fr; }
    .work-item:first-child { grid-column: span 1; aspect-ratio: 4/3; }
    .service-row { grid-template-columns: 1fr; gap: 6px; padding: 24px 24px 30px; }
    .svc-arrow { display: none; }
    #process { grid-template-columns: 1fr; }
    .process-left { border-right: none; border-bottom: 1px solid var(--border); }
    #about { grid-template-columns: 1fr; }
    .about-cell { border-right: none; border-bottom: 1px solid var(--border); }
    #cta { flex-direction: column; align-items: flex-start; gap: 48px; }
    .cta-right { align-items: flex-start; margin-left: 0; }
    footer { flex-direction: column; gap: 20px; text-align: center; }
    .footer-links { justify-content: center; gap: 14px 20px; }
    /* keep the legal strip clear of the floating back-to-top button */
    #legalStrip { padding-right: 84px !important; }
    #services, #work { padding: 60px 24px; }

    /* ── HERO: stack headline above reel, drop fixed height ── */
    #hero { height: auto !important; max-height: none !important; }
    .hero-mid { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; }
    .hero-mid > div { max-width: 100vw !important; width: 100% !important; box-sizing: border-box; }
    .hero-mid > div:first-child { border-right: none !important; border-bottom: 1px solid var(--border); padding: 40px 24px !important; }
    .hero-mid > div:nth-child(2) { min-height: 0 !important; aspect-ratio: 16 / 9; width: 100% !important; max-width: 100vw !important; }
    .hero-top { padding: 20px 24px; }

    /* ── Stats banner: 2 cols, no dividers, drop the trailing tag ── */
    #statsBanner { grid-template-columns: 1fr 1fr !important; gap: 24px 20px !important; padding: 28px 24px !important; }
    #statsBanner > div { border-left: none !important; padding-left: 0 !important; }
    #statsBanner > div:last-child { grid-column: 1 / -1; }

    /* ── Positioning band: stack ── */
    #gapGrid { grid-template-columns: 1fr !important; gap: 32px !important; }
    #gapStats { grid-template-columns: 1fr 1fr 1fr !important; }
    #why-fulltake { padding: 56px 24px !important; }

    /* ── Pricing: stack cards ── */
    #pricingGrid { grid-template-columns: 1fr !important; }

    /* ── Free-sample & project bands: stack, full-width buttons ── */
    #sampleBand, #projectBand { grid-template-columns: 1fr !important; gap: 24px !important; padding: 40px 24px !important; }
    #sampleBand a, #projectBand a { text-align: center; }

    /* ── Contact: stack copy above form ── */
    #contactGrid { grid-template-columns: 1fr !important; min-height: 0 !important; }
    #contactGrid > div:first-child { border-right: none !important; border-bottom: 1px solid var(--border); padding: 56px 24px !important; }
    #contactGrid > div:nth-child(2) { padding: 56px 24px !important; }
    #contactGrid form > div:first-child { grid-template-columns: 1fr !important; }

    /* ── Services / pricing section headers: stack, left-align ── */
    #services > div:first-child,
    #pricing > div:first-child { grid-template-columns: 1fr !important; gap: 20px !important; text-align: left !important; }
    #pricing > div:first-child > div:last-child { text-align: left !important; }

    /* services header: stack cleanly, left-aligned (fixes unbalanced look) */
    .services-header { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 48px 24px 32px !important; }
    .services-title { font-size: 38px !important; }
    .services-sub { max-width: 100% !important; text-align: left !important; font-size: 16px !important; }

    /* prevent any stray horizontal overflow */
    html, body { overflow-x: hidden; max-width: 100%; }

    /* ── Nav: hide CTA on small screens (links already hidden), keep logo only ── */
    .nav-contact { display: none !important; }
    .nav-logo { font-size: 20px !important; }
    .nav-logo span:last-child { font-size: 10px !important; margin-left: 8px !important; }

    /* ── Hero top: let text wrap, no overflow ── */
    .hero-top { gap: 8px !important; padding: 16px 24px !important; }
    .hero-top > div:first-child { font-size: 12px !important; letter-spacing: 0.1em !important; }
    .hero-desc-top { max-width: 100% !important; font-size: 13px !important; text-align: left !important; }

    /* ── Reel: hide redundant in-video capability strip on mobile (services list below covers it) ── */
    #reelStrip { display: none !important; }
    /* reel top overlay: keep logo clear, hide the right label on small screens */
    .hero-mid > div:nth-child(2) > div:first-child { padding: 14px 16px !important; }
    .hero-mid > div:nth-child(2) > div:first-child img { height: 18px !important; }
    .hero-mid > div:nth-child(2) > div:first-child span { display: none !important; }

    /* ── Clients logos: 2 across (7 logos -> clean 4 rows, last full-width) ── */
    .clients-grid { grid-template-columns: repeat(2,1fr) !important; }
    .client-item { box-sizing: border-box; }
    .client-item:last-child { grid-column: 1 / -1; }

    /* ── Reel panel: contain its absolutely-positioned overlays ── */
    .hero-mid > div:nth-child(2) { overflow: hidden !important; }
    .hero-mid > div:nth-child(2) span,
    #reelStrip { font-size: 10px !important; letter-spacing: 0.12em !important; }
    #reelStrip { padding: 12px 16px !important; white-space: normal !important; }
    .hero-mid > div:nth-child(2) > div:first-child { padding: 14px 16px !important; flex-wrap: wrap; gap: 6px; }

    /* ── Services list: wrap within width ── */
    .hero-services-list { max-width: 100% !important; }
    .hero-bottom > div { white-space: normal !important; }

    /* box-sizing safety + tighten full-width flex rows so padding doesn't overflow */
    .hero-top, .hero-bottom { box-sizing: border-box !important; max-width: 100vw !important; padding-left: 24px !important; padding-right: 24px !important; }

    /* ── Clients logo grid: 2 across (handled above), tidy header ── */
    .client-item { border-right: 1px solid var(--border) !important; }
    #clients > div:first-child { padding: 48px 24px 32px !important; }
    #clients > div:first-child > div:nth-child(2) { font-size: 32px !important; }
    #clients > div:first-child > div:last-child { font-size: 16px !important; max-width: 100% !important; }

    /* ── FAQ: stack video panel above questions ── */
    #faq > div:last-of-type { grid-template-columns: 1fr !important; }
    .faq-video { border-right: none !important; border-bottom: 1px solid var(--border); }

    /* ── How-it-works steps: 4 across -> 2 across ── */
    #howItWorks { grid-template-columns: 1fr 1fr !important; }
    #howItWorks > div { padding: 28px 20px !important; }

    /* hide the vertical divider stubs between guarantee items when stacked */
    .guarantee-divider { display: none !important; }

    /* ── About: story 1 col, credentials 2 across ── */
    #about > div:first-child { padding: 56px 24px !important; }
    #about > div:first-child > div:last-child { grid-template-columns: 1fr !important; gap: 24px !important; }
    #about > div:last-child { grid-template-columns: 1fr 1fr !important; }

    /* ── FAQ privacy/long text: keep within width ── */
    #faq * { max-width: 100% !important; word-break: break-word; }

    /* ── Global: reduce big section side padding on phones ── */
    section { box-sizing: border-box; max-width: 100vw; }
    #clients, #faq, #contact, #privacy { padding-left: 0 !important; padding-right: 0 !important; }
  }

  /* ── STICKY MOBILE CTA ── */
  #mobileCta { display: none; }
  @media (max-width: 900px) {
    #mobileCta {
      display: flex;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 95;
      gap: 10px;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
      background: rgba(255,255,255,0.96);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border-top: 1px solid var(--border);
      box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
    }
    #mobileCta a {
      flex: 1;
      text-align: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 15px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 14px 8px;
    }
    #mobileCta .mcta-primary { background: #C8F400; color: #000; flex: 1.7; }
    #mobileCta .mcta-secondary { background: #000; color: #fff; }
    body { padding-bottom: 74px; }
    #toTop { bottom: 88px !important; }
    .fs-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    #free-sample { padding: 56px 24px !important; }
  }

/* ── INNER PAGE STYLES (service pages) ── */
.page-wrap { max-width: 900px; margin: 0 auto; padding: 140px 40px 80px; }
.page-wrap h1 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(38px, 6vw, 76px); line-height: 0.95; letter-spacing: -0.02em;
  text-transform: uppercase; color: #000; margin: 0 0 24px;
}
.page-wrap h2 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.01em;
  text-transform: uppercase; color: #000; margin: 56px 0 18px;
}
.page-wrap h3 {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 20px; letter-spacing: 0.02em; color: #000; margin: 32px 0 10px;
}
.page-wrap p, .page-wrap li {
  font-family: 'Barlow', sans-serif; font-size: 17px; line-height: 1.75; color: #1a1a1a;
}
.page-wrap p { margin: 0 0 18px; }
.page-wrap ul { padding-left: 22px; margin: 0 0 22px; }
.page-wrap li { margin-bottom: 10px; }
.page-wrap strong { font-weight: 700; color: #000; }
.page-lede {
  font-size: 20px !important; line-height: 1.65 !important; color: #333 !important;
  border-left: 3px solid #C8F400; padding-left: 20px; margin-bottom: 36px !important;
}
.page-eyebrow {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.25em; text-transform: uppercase; color: #000; margin-bottom: 16px;
}
.page-cta {
  background: #000; padding: 40px; margin: 56px 0 0;
}
.page-cta h2 { color: #fff !important; margin-top: 0 !important; }
.page-cta p { color: rgba(255,255,255,0.75) !important; }
.page-cta a.btn {
  display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 900;
  font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #000; background: #C8F400; padding: 16px 28px; text-decoration: none;
}
.page-note {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px;
  color: #000; margin-top: 14px;
}
.page-faq { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 12px; }
.page-faq h3 { margin-top: 22px; }
@media (max-width: 900px) {
  .page-wrap { padding: 110px 24px 60px; }
  .page-cta { padding: 28px 22px; }
}

/* ── MOBILE MENU ── */
#navToggle { display: none; }
#mobileMenu { display: none; }
@media (max-width: 900px) {
  #navToggle {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  #navToggle span {
    display: block; width: 24px; height: 2px; background: #000;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  #navToggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #navToggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  #navToggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  #mobileMenu {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 30px rgba(0,0,0,0.14);
    padding: 4px 24px 20px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  #mobileMenu[hidden] { display: none; }
  #mobileMenu a {
    display: block;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase;
    color: #000; text-decoration: none;
    padding: 17px 0; border-bottom: 1px solid var(--border);
  }
  #mobileMenu a.mm-cta {
    background: #C8F400; color: #000; font-weight: 900;
    text-align: center; border-bottom: 0;
    margin-top: 16px; padding: 17px 16px;
  }

  /* service rows: description sits under the name, full width */
  .svc-desc { font-size: 13px; line-height: 1.55; }
  .svc-name { font-size: 20px; }
}

/* ── TERMS PAGE ── */
.terms-page h2 { font-size: clamp(20px, 2.4vw, 27px); margin: 44px 0 14px; }
.terms-page p { font-size: 16px; line-height: 1.75; }
.terms-updated {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700; font-size: 13px !important;
  letter-spacing: 0.12em; text-transform: uppercase; color: #666 !important;
  margin-bottom: 32px !important;
}
.terms-table {
  width: 100%; border-collapse: collapse; margin: 20px 0 24px;
  font-family: 'Barlow', sans-serif; font-size: 15px;
}
.terms-table th, .terms-table td {
  border: 1px solid var(--border); padding: 12px 14px; text-align: left;
}
.terms-table th {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; background: #fafafa;
}
@media (max-width: 900px) {
  .terms-table { font-size: 14px; }
  .terms-table th, .terms-table td { padding: 9px 10px; }
}