/* CHILDREN BOOK PAGE - playful professional */
.cb-hero{position:relative;background:linear-gradient(145deg,rgba(90,49,32,.9) 0%,rgba(136,74,48,.88) 40%,rgba(202,123,55,.85) 100%), url("../images/book-writing-banner.png") center/cover no-repeat;color:#fff;padding:120px 0 110px;text-align:center;overflow:hidden}
.cb-hero .eyebrow{display:inline-block;color:var(--gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;margin-bottom:16px;padding:6px 18px;border:1px solid rgba(202,123,55,.55);border-radius:999px;background:rgba(0,0,0,.18)}
.cb-hero h1{font-size:clamp(30px,5.2vw,48px);color:#fff;margin-bottom:18px;text-shadow:0 4px 24px rgba(0,0,0,.3);line-height:1.18}
.cb-hero .hero-lead{max-width:720px;margin:0 auto 16px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.93)}
.cb-hero .btn-primary{margin-top:20px;padding:16px 40px;font-size:16px;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.cb-float{position:absolute;font-size:42px;opacity:.18;animation:cbFloat 7s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
.cb-float:nth-child(1){top:18%;left:8%;animation-delay:0s}
.cb-float:nth-child(2){top:55%;right:9%;animation-delay:-2.2s;font-size:36px}
.cb-float:nth-child(3){bottom:14%;left:14%;animation-delay:-4s;font-size:30px}
.cb-float:nth-child(4){top:28%;right:18%;animation-delay:-1.5s;font-size:28px}
@keyframes cbFloat{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-22px) rotate(6deg)}}
.expert-guidance-section{position:relative;padding:92px 0;background:linear-gradient(135deg,#fdf8ee 0%,#f7efe0 100%)}
.expert-guidance-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left, rgba(202,123,55,.1), transparent 42%);pointer-events:none}
.expert-guidance-section .lp-split-grid{gap:54px;align-items:center}
.expert-guidance-section .guidance-copy,
.expert-guidance-section .guidance-media{opacity:1 !important;transform:none !important;transition:none}
.expert-guidance-section .guidance-copy{max-width:580px}
.expert-guidance-section .section-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(202,123,55,.14);color:var(--navy-deep);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.expert-guidance-section h2{font-size:clamp(28px,3.4vw,36px);margin-bottom:16px;color:var(--navy-deep)}
.expert-guidance-section p{font-size:16px;line-height:1.8;color:var(--muted)}
.expert-guidance-section .guidance-highlights{display:grid;gap:10px;margin:22px 0 24px}
.expert-guidance-section .guidance-highlights div{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.75);box-shadow:0 10px 24px rgba(15,23,42,.04);color:var(--navy-deep);font-weight:600}
.expert-guidance-section .guidance-media{display:flex;justify-content:center}
.expert-guidance-section .guidance-media-card{position:relative;display:inline-block;padding:16px;border-radius:28px;background:linear-gradient(145deg,#fff,#f8eee0);box-shadow:0 24px 60px rgba(15,23,42,.14);border:1px solid rgba(202,123,55,.16);animation:guideFloat 5.8s ease-in-out infinite}
.expert-guidance-section .guidance-media-card img{display:block;width:min(100%,440px);max-height:420px;object-fit:cover;border-radius:20px;box-shadow:0 18px 38px rgba(15,23,42,.16)}
.expert-guidance-section .guidance-floating-badge{position:absolute;left:20px;bottom:20px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 12px 24px rgba(15,23,42,.12);color:var(--navy-deep);font-size:13px;font-weight:700;backdrop-filter:blur(6px)}
@keyframes guideFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1deg)}}
.cb-orb{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;animation:cbOrb 11s ease-in-out infinite alternate}
.cb-orb.one{width:320px;height:320px;background:rgba(202,123,55,.18);bottom:-120px;right:-80px}
.cb-orb.two{width:220px;height:220px;background:rgba(255,255,255,.08);top:40px;left:-60px;animation-delay:-3s}
@keyframes cbOrb{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-40px,30px) scale(1.15)}}
.cb-section{padding:90px 0}
.cb-intro-section{position:relative;overflow:visible;padding-left:120px;padding-right:120px}
.cb-intro-container{position:relative;z-index:2}
.cb-float-visual{position:absolute;top:50%;transform:translateY(-50%);width:min(16vw,180px);max-width:180px;z-index:1;animation:cbFloatDecor 6s ease-in-out infinite}
.cb-float-visual img{display:block;width:100%;height:auto;border-radius:20px;box-shadow:0 18px 40px rgba(15,23,42,.16);object-fit:cover}
.cb-float-left{left:265px}
.cb-float-right{right:320px;animation-delay:-3s}
@keyframes cbFloatDecor{0%,100%{transform:translateY(-50%) rotate(-3deg)}50%{transform:translateY(-58%) rotate(3deg)}}
.cb-section.cream{background:var(--cream)}
.cb-section.white{background:#fff}
.cb-section.dark{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff}
.section-head{text-align:center;max-width:700px;margin:0 auto 48px}
.section-head h2{margin-bottom:14px}
.section-head p{color:var(--muted);font-size:16px}
.cb-section.dark .section-head h2{color:#fff}
.cb-section.dark .section-head p{color:#D7DCE8}
.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.benefit-card{background:#fff;border-radius:16px;padding:30px 26px;box-shadow:0 12px 32px rgba(15,23,42,.07);border:1px solid transparent;transition:all .35s cubic-bezier(.34,1.2,.64,1);display:flex;gap:18px;align-items:flex-start}
.benefit-card:hover{transform:translateY(-8px);border-color:rgba(202,123,55,.35);box-shadow:0 22px 48px rgba(15,23,42,.13)}
.benefit-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;transition:transform .35s ease}
.benefit-card:hover .benefit-icon{transform:scale(1.12) rotate(8deg)}
.benefit-card h3{font-size:18px;margin:0 0 8px;color:var(--navy-deep)}
.benefit-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.type-card{background:var(--cream);border-radius:16px;padding:28px 22px;text-align:center;transition:all .35s ease;border:1px solid transparent;position:relative;overflow:hidden}
.type-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--navy));transform:scaleX(0);transition:transform .4s ease}
.type-card:hover{background:#fff;transform:translateY(-10px);box-shadow:0 20px 44px rgba(15,23,42,.12);border-color:rgba(202,123,55,.25)}
.type-card:hover::after{transform:scaleX(1)}
.type-card .icon{font-size:40px;margin-bottom:14px;display:block}
.type-card h3{font-size:17px;margin-bottom:8px;color:var(--navy-deep)}
.type-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.process-card{background:#fff;border-radius:16px;padding:28px 22px;box-shadow:0 12px 30px rgba(15,23,42,.07);border:1px solid #ECEBE4;transition:all .35s ease;text-align:center}
.process-card:hover{transform:translateY(-10px);box-shadow:0 24px 50px rgba(15,23,42,.14);border-color:rgba(202,123,55,.35)}
.process-num{
  font-family:var(--font-display);
  font-size:40px;
  font-weight:700;
  color:var(--gold); /* fallback for browsers that don't support -webkit-text-stroke */
  -webkit-text-stroke:1.5px var(--gold);
  -webkit-text-fill-color:transparent; /* make outlined style in WebKit/Blink */
  line-height:1;
  margin-bottom:12px;
  display:block;
  transition:all .3s ease;
}
.process-card:hover .process-num{
  color:var(--gold);
  -webkit-text-stroke:0;
  -webkit-text-fill-color:var(--gold);
  transform:scale(1.1);
}
.process-card h3{font-size:17px;margin-bottom:10px;color:var(--navy-deep)}
.process-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.approach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.approach-card{background:var(--cream);border-radius:14px;padding:28px 24px;transition:all .3s ease}
.approach-card:hover{background:#fff;box-shadow:0 16px 36px rgba(15,23,42,.1);transform:translateY(-6px)}
.approach-card h3{font-size:18px;margin-bottom:10px;color:var(--navy-deep);display:flex;align-items:center;gap:10px}
.approach-card p{margin:0;font-size:14.5px;line-height:1.6}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testi-card{background:#fff;border-radius:16px;padding:28px 24px;box-shadow:0 12px 32px rgba(15,23,42,.08);border-top:4px solid var(--gold);transition:all .3s ease}
.testi-card:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(15,23,42,.13)}
.testi-card .stars{color:var(--gold);letter-spacing:2px;margin-bottom:12px}
.testi-card p{font-size:14.5px;font-style:italic;line-height:1.65;margin-bottom:16px;color:var(--ink)}
.testi-card .author{font-weight:700;color:var(--navy-deep);font-size:14px}
.cb-cta{padding:80px 0;background:linear-gradient(120deg,var(--navy-deep),var(--navy),#3a1f14);color:#fff;text-align:center;position:relative;overflow:hidden}
.cb-cta h2{color:#fff;font-size:clamp(26px,4vw,38px);margin-bottom:14px}
.cb-cta p{max-width:600px;margin:0 auto 28px;color:#D7DCE8}
.cb-faq .faq-list{max-width:780px;margin:0 auto}
.cb-faq .faq-item{border-bottom:1px solid #E7E5DE}
.cb-faq .faq-q{width:100%;text-align:left;background:none;border:none;padding:18px 0;font-weight:600;font-size:16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--navy-deep);font-family:var(--font-body);gap:16px}
.cb-faq .faq-q:hover{color:var(--gold)}
.cb-faq .faq-icon{font-size:22px;color:var(--gold);transition:transform .35s ease}
.cb-faq .faq-item.open .faq-icon{transform:rotate(45deg)}
.cb-faq .faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.cb-faq .faq-a-inner{padding-bottom:18px;color:var(--muted);font-size:15px;line-height:1.7}
@media(max-width:980px){.benefits-grid,.approach-grid,.types-grid,.process-grid,.testi-grid{grid-template-columns:1fr 1fr}.expert-guidance-section .lp-split-grid{grid-template-columns:1fr;gap:32px}.expert-guidance-section .guidance-copy{max-width:none}.cb-intro-section{padding-left:90px;padding-right:90px}.cb-float-visual{display:none}}
@media(max-width:640px){.benefits-grid,.approach-grid,.types-grid,.process-grid,.testi-grid{grid-template-columns:1fr}.cb-hero{padding:90px 0 70px}.expert-guidance-section{padding:72px 0}.expert-guidance-section .guidance-media-card{padding:10px}.expert-guidance-section .guidance-media-card img{max-height:280px}.expert-guidance-section .guidance-floating-badge{position:static;margin-top:12px;display:inline-flex}.cb-intro-section{padding-left:24px;padding-right:24px}}

/* Extra background particles / soft shapes */
.cb-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.07) 0%, transparent 35%),
    radial-gradient(circle at 85% 70%, rgba(202,123,55,.12) 0%, transparent 40%);
  animation: cbBgPulse 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes cbBgPulse{
  0%{opacity:.7; transform:scale(1)}
  100%{opacity:1; transform:scale(1.04)}
}

/* Image showcase section */
.cb-visual{
  padding:70px 0 80px;
  background:linear-gradient(180deg, var(--cream), #fff);
  text-align:center;
}
.cb-visual-marquee{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  overflow:hidden;
  padding:30px 0 30px;
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.cb-visual-track{
  display:flex;
  width:max-content;
  gap:20px;
  animation:cbVisualScroll 24s linear infinite;
}
.cb-visual-track:hover{animation-play-state:paused}
.cb-visual-group{
  display:flex;
  gap:20px;
  flex-shrink:0;
}
.cb-visual-group img{
  width:min(220px, 32vw);
  height:280px;
  border-radius:18px;
  box-shadow:0 16px 36px rgba(15,23,42,.12);
  transition:transform .4s ease, box-shadow .4s ease;
  object-fit:cover;
  background:#f0ebe3;
  flex-shrink:0;
}
.cb-visual-group img:hover{
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 28px 50px rgba(15,23,42,.18);
}
@keyframes cbVisualScroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 10px))}
}
@media(max-width:900px){
  .cb-visual-group img{width:min(200px, 38vw);height:250px}
}
@media(max-width:640px){
  .cb-visual{padding:56px 0 64px}
  .cb-visual-group img{width:min(170px, 44vw);height:220px}
  .cb-visual-track{gap:14px;animation-duration:20s}
  .cb-visual-group{gap:14px}
}

/* Reset & Base */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #333;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* ===== SECTION: Exact recreation of the video section ===== */
    .bridge-hero-section {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      padding: 40px 20px 60px;
      background: #ffffff;
      position: relative;
    }

    /* Brand name */
    .brand-name {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.15rem;
      font-weight: 500;
      color: #b87333;
      text-align: center;
      letter-spacing: 0.5px;
      margin-bottom: 18px;
    }

    /* Main heading */
    .section-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.7rem, 4vw, 2.35rem);
      font-weight: 600;
      color: #1a1a1a;
      text-align: center;
      line-height: 1.25;
      margin-bottom: 28px;
      max-width: 820px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Text content with orange accent bar */
    .content-wrapper {
      position: relative;
      max-width: 820px;
      margin: 0 auto 40px;
      padding-right: 18px;
    }

    .content-wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(to bottom, #e67e22, #d35400);
      border-radius: 2px;
    }

    .content-text {
      font-size: 0.98rem;
      color: #444;
      font-weight: 400;
      line-height: 1.7;
    }

    .content-text p {
      margin-bottom: 1.1em;
    }

    .content-text p:last-child {
      margin-bottom: 0;
    }

    /* ===== SLIDER ===== */
    .slider-container {
      position: relative;
      width: 100%;
      max-width: 920px;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 4px;
      /* subtle shadow like book pages */
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    }

    .slider-track {
      display: flex;
      transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
    }

    .slide {
      min-width: 100%;
      flex-shrink: 0;
      position: relative;
      background: #fafafa;
    }

    .slide img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      vertical-align: middle;
    }

    /* Navigation arrows - enhanced */
    .slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 4px 14px rgba(0,0,0,0.12);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      transition: all 0.25s ease;
      color: #333;
    }

    .slider-btn:hover {
      background: #fff;
      box-shadow: 0 6px 20px rgba(0,0,0,0.18);
      transform: translateY(-50%) scale(1.08);
    }

    .slider-btn:active {
      transform: translateY(-50%) scale(0.96);
    }

    .slider-btn.prev {
      left: 14px;
    }

    .slider-btn.next {
      right: 14px;
    }

    .slider-btn svg {
      width: 20px;
      height: 20px;
      stroke-width: 2.2;
    }

    /* Pagination dots */
    .slider-dots {
      display: flex;
      justify-content: center;
      gap: 9px;
      margin-top: 22px;
      position: relative;
      z-index: 5;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #d0d0d0;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: all 0.3s ease;
    }

    .dot:hover {
      background: #b0b0b0;
    }

    .dot.active {
      background: #b87333;
      transform: scale(1.25);
      box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.25);
    }

    /* Pause indicator (subtle) */
    .slider-container:hover .slider-btn {
      opacity: 1;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .bridge-hero-section {
        padding: 30px 16px 50px;
      }

      .brand-name {
        font-size: 1.05rem;
        margin-bottom: 14px;
      }

      .section-title {
        font-size: 1.55rem;
        margin-bottom: 22px;
      }

      .content-wrapper {
        padding-right: 14px;
        margin-bottom: 32px;
      }

      .content-text {
        font-size: 0.92rem;
      }

      .slider-btn {
        width: 38px;
        height: 38px;
      }

      .slider-btn.prev {
        left: 8px;
      }

      .slider-btn.next {
        right: 8px;
      }

      .slider-btn svg {
        width: 18px;
        height: 18px;
      }

      .slider-dots {
        margin-top: 18px;
        gap: 8px;
      }

      .dot {
        width: 8px;
        height: 8px;
      }
    }

    @media (max-width: 480px) {
      .bridge-hero-section {
        padding: 24px 12px 40px;
      }

      .section-title {
        font-size: 1.35rem;
        line-height: 1.3;
      }

      .content-text {
        font-size: 0.88rem;
        line-height: 1.65;
      }

      .content-wrapper::after {
        width: 2.5px;
      }

      .slider-btn {
        width: 34px;
        height: 34px;
      }

      .slider-btn.prev {
        left: 6px;
      }

      .slider-btn.next {
        right: 6px;
      }
    }

    /* Smooth image loading */
    .slide img {
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .slide img.loaded {
      opacity: 1;
    }