/* Royalhouse Chapel NJ — v4 (no sticky header, no horizontal scrollbars) */
:root{--max:1800px;--g:clamp(18px,2.6vw,56px);--h1:clamp(54px,7vw,126px);--h2:clamp(34px,4.2vw,70px)}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.skip{position:absolute;left:-999px;top:10px;background:#fff;padding:10px 12px;border:1px solid var(--line);z-index:9999}.skip:focus{left:12px}

.announce{background:linear-gradient(90deg,#121212,#232323);color:#fff}
.announce__inner{max-width:var(--max);margin:0 auto;padding:14px var(--g);display:flex;justify-content:space-between;gap:18px}
.announce__side{width:50%;display:flex;flex-direction:column;align-items:center}
.announce__title{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.announce__sub{font-weight:500;opacity:.85;font-size:12px;margin-top:2px}

.top{background:#fff;border-bottom:1px solid var(--line)}
.top__inner{max-width:var(--max);margin:0 auto;padding:18px var(--g);display:flex;align-items:center;justify-content:space-between;gap:22px;}
.top__logo img{height:72px;width:auto}
.top__actions{display:flex;gap:12px;align-items:center}
.btn{padding:12px 14px;font-weight:700;font-size:13px;border:1px solid var(--line);background:#fff}
.btn--solid{background:var(--ink);color:#fff;border-color:rgba(18,18,18,.65)}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.menuBtn{display:inline-flex;align-items:center;gap:12px;padding:12px 14px;border:none;background:transparent;cursor:pointer;font-weight:700;letter-spacing:.12em;}
.menuBtn i{background:#ccc; width:22px;height:2px;background:var(--ink);display:block}.menuBtn i:last-child{opacity:.7}

.menu{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;transition:opacity .18s ease}
.menu.is-open{pointer-events:auto;opacity:1}
.menu__panel{position:absolute;inset:0;background:radial-gradient(1200px 600px at 22% 20%, rgba(255, 255, 255, .06), transparent 60%), #0b3594;color:#fff;padding:34px var(--g)}
.menu__logo{position:absolute;left:var(--g);top:26px}.menu__logo img{height:76px;filter:brightness(1.1)}
.menu__close{position:absolute;right:var(--g);top:26px;display:flex;align-items:center;gap:12px;color:#fff;background:transparent;border:none;cursor:pointer;font-weight:700;letter-spacing:.18em}
.menu__close b{font-size:30px;line-height:1;font-weight:300;opacity:.9}
.menu__grid{max-width:var(--max);margin:0 auto;height:100%;display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.menu__ghost{font-size:clamp(46px,5vw,84px);font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45);margin-bottom:14px}
.menu__big a{display:block;font-size:clamp(34px,5.8vw,90px);font-weight:700;line-height:1.05;padding:6px 0}
.menu__cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.menu__link{display:block;font-size:19px;font-weight:600;line-height:1.65;opacity:.92}
.menu__meta{margin-top:22px;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.menu__addr{font-size:14px;opacity:.75;font-weight:500}
.menu__metaLinks{display:flex;gap:18px;margin-top:12px;font-weight:600;opacity:.9}

/* === FULLSCREEN VIDEO MODAL (replace  existing .modal / .modal__* / .ratio block with this) === */
.modal{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .18s ease}
.modal.is-open{pointer-events:auto;opacity:1}
.modal__bg{position:absolute;inset:0;background:#000} /* full black, no dim overlay */
.modal__panel{position:absolute;inset:0;width:100vw;height:100vh;background:#000;transform:none;left:0;top:0}
.modal__close{position:absolute;right:22px;top:18px;border:none;background:transparent;font-size:44px;cursor:pointer;color:#fff;z-index:2;line-height:1}
.ratio{width:100%;height:100%}
.ratio iframe{width:100%;height:100%;border:0}
.heroup{ border-top: 0px solid #F19F0D}
.hero{ border-top: 1px solid #0b3594}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.subnav{display:flex;justify-content:center;gap:34px;font-weight:700;font-size:13px;}
.subnav a:hover{text-decoration:underline}
.heroMeta{display:flex;justify-content:center;gap:18px;align-items:center;color:rgba(18,18,18,.62);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase; margin-top: 50px;}
.heroMeta__divider{width:120px;height:1px;background:var(--line)}
.heroTitle{margin:10px auto 20px;padding:0 var(--g);text-align:center;font-size:var(--h1);letter-spacing:-.03em;line-height:.95;font-weight:800;max-width:var(--max)}
.video{position:relative;overflow:hidden}
.video img{width:100%;height:min(66vh,780px);min-height:420px;object-fit:cover}
.video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;background:rgba(255,255,255,.92);border:1px solid rgba(18,18,18,.18);display:flex;align-items:center;justify-content:center;cursor:pointer}


.section{padding:70px 0}
.sectionHead{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px}
.sectionTitle{margin:0;font-size:var(--h2);font-weight:800;letter-spacing:-.02em}
.sectionSub{margin-top:10px;color:var(--muted);font-weight:500;max-width:70ch;line-height:1.6}
.sectionLink{font-weight:700;text-decoration:underline}

.panelDark{background:#141414cf;color:#fff}
.panelDark .sectionSub{color:rgba(255,255,255,.75)}
.panelLight{background:var(--paper);color:var(--ink)}
.carouselBtns{display:flex;gap:12px}
.cBtn{width:46px;height:46px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800}
.panelLight .cBtn{border-color:rgba(18,18,18,.18);background:#FFC107;color:#121212}

.carouselViewport{overflow:hidden} /* no native scrollbar */
.carouselTrack{display:flex;gap:18px;transition:transform .45s ease;will-change:transform}
.card{background:#fff;flex:0 0 calc((100% - 54px)/4)}
.cards5 .card{flex:0 0 calc((100% - 72px)/5)}
.cardImg{height:380px;overflow:hidden}
.cardImg img{width:100%;height:100%;object-fit:cover}



.cardBar{background:#fff;color:#121212;padding:16px 18px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.cardTitle{font-size:20px;font-weight:800;margin:0}
.cardSub{font-size:12px;font-weight:700;opacity:.78;margin-top:6px}
.cardTag{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-bottom:6px}
.cardArrow{width:44px;height:44px;border:1px solid rgba(18,18,18,.18);background:#fff;display:flex;align-items:center;justify-content:center}
.cardArrow:before{content:"";width:0;height:0;border-left:10px solid #F19F0D;border-top:7px solid transparent;border-bottom:7px solid transparent}

.pastor{background:#0b3594;color:#fff;padding:86px 0}
.pastorGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.pastorTitle{font-size:clamp(56px,6vw,120px);font-weight:900;letter-spacing:-.03em;margin:0 0 18px; color: #F19F0D;}
.pastorPhoto{
    width:100%;
    height:auto;
    object-fit:contain;
    border:1px solid #333;
    display:block;
    border-radius:10px;

    /* Modern layered shadow */
    box-shadow:
        0 2px 6px rgba(0,0,0,.25),
        0 18px 40px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.04);
}
.pastorSig{margin-top:-30px;margin-left:10px;width:min(360px,60%)}
.pastorText{color:rgba(255,255,255,.82);font-weight:500;line-height:1.8;font-size:15px;max-width:62ch}


/* ===== Pastor Section Refinement ===== */

.pastorGrid{
  display:grid;
  grid-template-columns:1fr 1.15fr; /* give text more space */
  gap:clamp(28px,4vw,60px);
  align-items:start;
}

/* Keep full image visible */
.pastorPhoto{
  width:100%;
  height:auto;
  object-fit:contain;   /* no crop */
  border:none;
  display:block;
}

/* Remove overlay signature positioning */
.pastorSig{
  display:none; /* we will replace with text signature */
}

/* Modern larger typography */
.pastorText{
  font-size:22px;              /* larger */
  line-height:1.2;             /* elegant breathing room */
  font-weight:100;
  letter-spacing:.01em;
  color:rgba(255,255,255,.86);
  max-width:72ch;              /* wider */
}

/* Replace the dynamic name text with a CSS signature */
.pastorText p strong{
  position:relative;
  display:inline-block;
  color:transparent !important;   /* hides <?= e($c["pastor"]["name"]) ?> */
}

/* The actual signature text */
.pastorText p strong::after{
  content:"Rev. Hazel Bediako";
  position:absolute;
  left:0;
  top:0;
  white-space:nowrap;
  font-family:"Brush Script MT", cursive;
  font-size:clamp(30px,3.5vw,52px);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.05;
  color:rgba(255,255,255,.95);
}


/* VOUS-style mission quote block */
.missionQuote{
  position:relative;
  margin-top:34px;
  padding:clamp(46px,6vw,96px) 0;
  overflow:hidden;
}

/* faint line-art background (no image needed) */
.missionQuote__bg{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(700px 400px at 50% 50%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 520px at 20% 30%, rgba(255,255,255,.04), transparent 62%),
    radial-gradient(900px 520px at 80% 65%, rgba(255,255,255,.035), transparent 62%);
  opacity:.9;
  transform:scale(1.02);
  pointer-events:none;
}

/* big centered quote text */
.missionQuote__text{
  position:relative;
  z-index:2;
  margin:0 auto;
  max-width:min(1400px, 92vw);
  text-align:center;
  color:#F19F0D;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.02;
  font-size:clamp(38px, 5.2vw, 86px);
  text-shadow: 0 18px 48px rgba(0,0,0,.35);
}

/* sticker word (like VOUS "SIMPLE," chip) */
.missionQuote__chip{
  display:inline-block;
  margin-left:.12em;
  padding:.18em .42em .16em;
  background:rgba(255,255,255,.94);
  color:#0b3594;
  font-weight:950;
  letter-spacing:.02em;
  transform:rotate(-4deg) translateY(-.06em);
  box-shadow:
    0 18px 38px rgba(0,0,0,.35),
    0 1px 0 rgba(0,0,0,.15);
}

/* keep it readable on smaller screens */
@media (max-width:720px){
  .missionQuote{ padding:42px 0; }
  .missionQuote__text{ font-size:clamp(28px, 7.8vw, 46px); }
}

/* ensure parent positioning */
.pastor{
  position:relative;
}
.giveBanner{background:#141414cf;padding:0 0 86px}
.giveCard{background:var(--givebg);margin:0 auto;max-width:var(--max);padding:40px var(--g);display:flex;justify-content:space-between;gap:24px;align-items:center;border:1px solid rgba(0,0,0,.14)}
.giveBig{font-size:clamp(46px,5.2vw,90px);font-weight:900;letter-spacing:-.02em;margin:0}
.giveSmall{margin-top:8px;color:rgba(18,18,18,.78);font-weight:500;max-width:62ch}
.giveLink{display:inline-flex;align-items:center;gap:12px;font-weight:900;margin-top:14px;border-bottom:2px solid #121212;padding-bottom:3px}
.giveArt{width:min(420px,34vw);opacity:.5}

.pageHead{padding:66px 0 18px}
.pageHead h1{margin:0;text-align:center;font-size:clamp(56px,6.2vw,110px);letter-spacing:-.03em;font-weight:900;line-height:.95}
.pageHead p{margin:18px auto 0;text-align:center;color:var(--muted);font-weight:500;max-width:78ch;line-height:1.65;padding:0 var(--g)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:#fff;border:1px solid rgba(18,18,18,.14);padding:26px}
.panel h3{margin:0 0 10px;font-size:22px;font-weight:900}
.panel p{margin:0;color:var(--muted);font-weight:500;line-height:1.75}
.list{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.row{border:1px solid rgba(18,18,18,.14);background:rgba(18,18,18,.02);padding:14px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-weight:800}
.small{font-size:12px;opacity:.72;font-weight:700}

.socialGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.socialCard{background:#fff;border:1px solid rgba(18,18,18,.14);padding:18px}
.socialHead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.socialBtn{border:1px solid rgba(18,18,18,.14);background:#fff;padding:10px 12px;font-weight:800;font-size:13px}
.socialBtn--solid{background:var(--ink);color:#fff;border-color:rgba(18,18,18,.65)}
.embedWrap{margin-top:14px;border:1px solid rgba(18,18,18,.10);padding:12px;background:#fff}

.footer{background:var(--dark);color:#fff}
.footer__inner{max-width:var(--max);margin:0 auto;padding:76px var(--g);display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:18px}
.footer__logo{height:56px;filter:brightness(1.05)}
.footer__muted{color:rgba(255,255,255,.68);font-weight:500;margin-top:14px}
.footer__head{font-size:12px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.footer__link{display:block;margin-top:14px;font-weight:800;opacity:.92}
.footer__link:hover{text-decoration:underline}
.footer__bottom{max-width:var(--max);margin:0 auto;padding:16px var(--g) 28px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer__legal{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.70);font-weight:600}
.footer__legal a{color:rgba(255,255,255,.78)}
.footer__addr{color:rgba(255,255,255,.66);font-weight:500}



/* === Index Splash + Header Statement === */

/* Center statement in top row without changing layout */
.top__inner{position:relative}
.top__center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}

.top__statement{
  display:none; /* shown only after splash close */
  border:none;
  background:transparent;
  cursor:pointer;
  padding:10px 14px;
  text-align:center;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  font-size:clamp(12px,1.15vw,16px);
  line-height:1;
}

.top__statementYear{font-weight:900}
.top__statementDash{opacity:.65;margin:0 10px}
.top__statementMain{
  font-weight:900;
  /* “bold art form” feel */
  -webkit-text-stroke: 0px transparent;
}

.top__statement:hover{opacity:.85}

/* Fullscreen splash */
.splash{
  position:fixed;
  inset:0;
  z-index:99999;
  background:#000;
  display:none;
}
.splash.is-open{display:block}

.splash__close{
  position:absolute;
  top:18px;
  right:26px;
  width:56px;
  height:56px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:46px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}

.splash__inner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.splash__inner img{
  width:auto;
  height:auto;
  max-width:96vw;
  max-height:92vh;
  object-fit:contain;
}


/* Centered header statement image (constrained + modern fade) */
.top__inner{position:relative}

/* reserve a safe "center lane" so it never collides with logo/actions */
.top__center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:42vw;           /* keeps it from taking over */
  width:42vw;
  pointer-events:auto;
}


/* ===== Visit carousel: arrows + full-bleed right ===== */

/* Make the carousel reach the RIGHT edge of the browser */
.panelDark .carouselViewport{
  margin-right: calc(-1 * var(--g));  /* removes right gutter */
  padding-right: 0;
}


/* ===== Carousel arrows (no bg, no border, just white) ===== */
.panelDark .carouselBtns{
  gap: 18px;
}

.panelDark .cBtn{
  width: auto;
  height: auto;
  border: none !important;
  background: transparent !important;
  color: #FFC107 !important;
  font-size: 28px;
  line-height: 1;
  padding: 6px 8px;
  opacity: .88;
  transform: translateY(0);
}

.panelDark .cBtn:hover{
  opacity: 1;
  transform: translateY(-1px);
}

.panelDark .cBtn:active{
  transform: translateY(0);
  opacity: .92;
}

/* ===== Card arrow: slanted white tile with modern NE arrow ===== */
.cardArrow{
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(18,18,18,.14);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  /* slanted left edge like VOUS */
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

/* Replace  old triangle with a sleek ↗ arrow */
.cardArrow:before{
  content:"";
  position:absolute;
  width: 12px;
  height: 12px;
  border-top: 2px solid #F19F0D;
  border-right: 2px solid #F19F0D;
  transform: rotate(45deg);
  top: 16px;
  left: 18px;
  opacity: .95;
}

.cardArrow:after{
  content:"";
  position:absolute;
  width: 16px;
  height: 2px;
  background:#121212;
  transform: rotate(45deg);
  top: 26px;
  left: 14px;
  opacity: .95;
}

/* On dark panel, keep card arrow crisp */
.panelDark .cardArrow{
  border-color: rgba(255,255,255,.18);
}

/* button wrapper */
.top__statementImg{
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  opacity:0;
  transform:translateY(6px);
  animation:fadeInStatement .55s ease forwards;
}

/* image itself must FIT inside the header */
.top__statementImg img{
  display:block;
  max-width:100%;
  max-height:106px;          /* hard cap inside header */
  width:auto;
  height:auto;
  object-fit:contain;
  background:
    /* bottom fade */
    linear-gradient(to bottom, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%),
    /* left fade */
    linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 42%),
    /* right fade */
    linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 42%);
  filter:contrast(1.02) saturate(1.02);
}


.top__statementImgMobile{
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  opacity:0;
  transform:translateY(6px);
  animation:fadeInStatement .55s ease forwards;
}

/* image itself must FIT inside the header */
.top__statementImgMobile img{
  display:block;
  max-width:100%;
  max-height:106px;          /* hard cap inside header */
  width:auto;
  height:auto;
  object-fit:contain;
  background:
    /* bottom fade */
    linear-gradient(to bottom, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%),
    /* left fade */
    linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 42%),
    /* right fade */
    linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 42%);
  filter:contrast(1.02) saturate(1.02);
}




.top__ref{
  position:absolute;
    left: 29.3%;
    top: -9px;                /* adjust up/down if needed */
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(18,18,18,.65);
}

/* side + bottom fade */
.top__statementImg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  
}

/* side + bottom fade */
.top__statementImgMobile::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  
}



/* Modern sleek highlight animation */

.animatedText span{
  position:relative;
  color:#222;
    color:#222;
    text-transform:uppercase;
  pointer-events:none;
  font-weight:900;
  letter-spacing:-.03em;
  font-size:clamp(14px,1.4vw,64px);
  overflow:hidden;
}

/* Shine layer */
.animatedText span::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:120%;
  height:100%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:skewX(-20deg);
}

/* Sequential sweep timing */
.animatedText span:nth-child(1)::after{
  animation: shine 4s infinite;
}

.animatedText span:nth-child(2)::after{
  animation: shine 4s infinite;
  animation-delay:1s;
}

.animatedText span:nth-child(3)::after{
  animation: shine 4s infinite;
  animation-delay:2s;
}

.animatedText span:nth-child(4)::after{
  animation: shine 4s infinite;
  animation-delay:3s;
}




@keyframes shine{
  0%{ left:-120%; }
  15%{ left:120%; }
  100%{ left:120%; }
}

/* BELOW HEADER FADE */
.statementReveal{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .6s ease, transform .6s ease, max-height .6s ease;
  background:#fff;
  border-bottom:1px solid rgba(18,18,18,.08);
}

.statementReveal.is-visible{
  max-height:600px; /* large enough for image */
  opacity:1;
  transform:translateY(0);
}

.statementReveal__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:24px var(--g);
  display:flex;
  justify-content:center;
}

.statementReveal__inner img{
  max-width:100%;
  height:auto;
  max-height:380px;
  object-fit:contain;
}

.panelDark{ overflow: visible; }
.panelDark .wrap{ overflow: visible; }

/* 2) remove ONLY the right “gutter” for this carousel area */
.panelDark .carouselViewport{
  overflow: hidden;                 /* keep no scrollbar */
  margin-right: calc(-1 * var(--g));/* bleed to browser edge */
  padding-right: var(--g);          /* keeps last card from being cut */
}

/* 3) keep left aligned as-is */
.panelDark .carouselTrack{
  padding-right: 0;
}
.panelDark .carouselViewport{
  width: calc(100% + var(--g));
  margin-right: calc(-1 * var(--g));
}
/* modern fade */
@keyframes fadeInStatement{
  to{opacity:1;transform:translateY(0)}
}

/* Responsiveness: hide center image when space is tight */
@media (max-width:440px){
  .top__center{display:none}
}




/* Responsive */
@media (max-width:1200px){
  .card,.cards5 .card{flex:0 0 calc((100% - 18px)/2)}
  .cardImg{height:280px}
  .footer__inner{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:980px){
  .pastorGrid{grid-template-columns:1fr}
  .pastorSig{margin-top:10px}
  .grid2{grid-template-columns:1fr}
  .socialGrid{grid-template-columns:1fr}
  .giveCard{flex-direction:column;align-items:flex-start}
  .giveArt{width:100%}
}
@media (max-width:720px){
  .card,.cards5 .card{flex:0 0 100%}
  .top__logo img{height:62px}
  
.top__ref {

    left: 16.3%;
    top: -9px;

}
}

@media (min-width:620px) and (max-width:1100px){
  .top__ref{
    left:25.3%;
    top:-9px;
  }
  .animatedText{font-size: 2em};
}



.panelDark .carouselViewport{
  width: 100vw !important;
  margin-left: calc(50% - 50vw + var(--g)) !important; /* aligns left with .wrap padding */
  margin-right: 0 !important;
  padding-right: 0 !important;  /* last card touches edge */
  overflow: hidden !important;
}

/* make sure nothing clips it */
.panelDark{ overflow: visible !important; }
.panelDark .wrap{ overflow: visible !important; }

/* === NO horizontal scroll (hard stop) === */
html, body{
  overflow-x: hidden;     /* fallback */
}
@supports (overflow-x: clip){
  html, body{ overflow-x: clip; } /* modern, prevents scroll without creating a scrollbar */
}

/* === Full-bleed carousel to RIGHT edge without overflow math === */
.panelDark .carouselViewport{
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;

  /* keep left aligned with  site gutter, but let right hit the edge */
  padding-left: var(--g) !important;
  padding-right: 0 !important;

  /* kill any old gutter rules */
  margin: 0 !important;
}

/* ensure the track doesn't accidentally create page overflow */
.panelDark .carouselTrack{
  will-change: transform;
}



/* ===== Fullscreen image viewer (Visit cards) ===== */
.imgViewer{
  position:fixed; inset:0; z-index:99998;
  display:none;
}
.imgViewer.is-open{ display:block; }

.imgViewer__bg{
  position:absolute; inset:0;
  background:rgba(0,0,0,.88);
}

.imgViewer__panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
}

.imgViewer__close{
  position:absolute; top:18px; right:22px;
  border:none; background:transparent;
  color:#fff; font-size:44px; line-height:1;
  cursor:pointer; z-index:2;
  opacity:.92;
}
.imgViewer__close:hover{ opacity:1; }

.imgViewer__media{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:72px 18px 96px;
}

.imgViewer__media img{
  max-width:96vw;
  max-height:84vh;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.imgViewer__bar{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 18px 16px;
  display:flex; justify-content:space-between; gap:14px; align-items:flex-end;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}

.imgViewer__title{
  color:#fff; font-weight:900;
  font-size:clamp(18px,2.2vw,28px);
  letter-spacing:-.02em;
}
.imgViewer__sub{
  margin-top:4px;
  color:rgba(255,255,255,.78);
  font-weight:600;
  font-size:12px;
}

.imgViewer__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.imgViewer__btn{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.imgViewer__btn:hover{ background:rgba(255,255,255,.16); }

/* ===== Icon buttons (modern glass) ===== */

.imgViewer__iconBtn{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
  color:#fff;
}

.imgViewer__iconBtn svg{
  width:20px;
  height:20px;
  display:block;
}

.imgViewer__iconBtn:hover{
  background:rgba(255,255,255,.18);
  transform:translateY(-2px);
}

.imgViewer__iconBtn:active{
  transform:translateY(0);
  background:rgba(255,255,255,.22);
}

.menu__logo__menu {
    position: absolute;
    left: 27px;
    top: 26px;
    background: none;
    border-radius: 10px;
    max-width: 200px;
    /* border: 1px solid #6a6969; */
}


/* ===== Hero Welcome + Artful Background ===== */

.heroTitleWrap{
  position:relative;
  max-width:var(--max);
  margin:18px auto 24px;
  padding:0 var(--g);
}

/* subtle praying-hands line art behind */
.heroTitleWrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  transform:translateX(-50%);
  width:min(980px,92vw);
  height:360px;
  opacity:.12;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  
}


/* ===== Hero Praying Hands Background ===== */

.heroTitleWrap{
  position:relative;
  max-width:var(--max);
  margin:24px auto 30px;
  padding:0 var(--g);
  text-align:center;
}

/* Actual praying hands image */
.heroHands{
  position:absolute;
  left:50%;
  top:10px;
  transform:translateX(-50%) rotate(6deg);
  width:min(760px, 82vw);
  height:auto;
  opacity:.08;                 /* subtle */
  pointer-events:none;
  z-index:0;
  filter:contrast(1.05) saturate(1.02);
}

/* Welcome text above art */
.heroWelcome{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto 20px;
}

.heroWelcome__kicker{
  display:inline-block;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(18,18,18,.6);
  padding:10px 16px;
  border:opx solid rgba(18,18,18,.12);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);
}

.heroWelcome__copy{
  margin:16px auto 0;
  font-weight:500;
  line-height:1.7;
  font-size:clamp(15px,1.4vw,20px);
  color:#fff;
}

.heroWelcome__em{
  font-weight:900;
  color:#0b3594;
}

/* Keep hero title dominant */
.heroTitle{
  position:relative;
  z-index:2;
  margin-top:18px;
}

/* Responsive tuning */
@media (max-width:720px){
  .heroHands{
    width:92vw;
    opacity:.06;
  }
}

.heroWelcome{
  position:relative;
  z-index:2;
  text-align:center;
  margin:0 auto 18px;
  max-width:min(980px,92vw);
}

.heroWelcome__kicker{
  display:inline-block;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(18,18,18,.62);
  padding:10px 14px;
  border:1px solid rgba(18,18,18,.12);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
}

.heroWelcome__copy{
  margin:14px auto 0;
  font-weight:500;
  line-height:1.65;
  font-size:clamp(15px,1.35vw,20px);
  color:#eeeeee;
  text-shadow:0 8px 30px rgba(0,0,0,.06);
      margin-top: -20px;
    margin-bottom: 20px;
}

.heroWelcome__em{
  font-weight:900;
  color:rgba(18,18,18,.92);
  white-space:nowrap;
}

/* Let  existing .heroTitle stay the star but feel integrated */
.heroTitle{
  position:relative;
  z-index:2;
  margin:14px auto 10px;
}

/* mobile: reduce art height */
@media (max-width:720px){
  .heroTitleWrap::before{ height:260px; opacity:.10; }
  .heroWelcome__kicker{ font-size:11px; }
}


/* ===== Massive Background Hero Text ===== */

.heroTitleWrap{
  position:relative;
  overflow:hidden;  /* prevents scroll */
  padding:00px var(--g) 00px;
  text-align:center;
}

/* HUGE outlined background text */
.heroBigText{
  position:absolute;
  top:40px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;

  font-weight:900;
  letter-spacing:.02em;
  font-size:clamp(80px, 1vw, 260px);
  line-height:.9;

  color:transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.08);  /* subtle outline */
  text-stroke: 2px rgba(255,255,255,.08);

  opacity:.6;
  pointer-events:none;
  z-index:0;
}

/* Content above */
.heroWelcome,
.heroTitle{
  position:relative;
  z-index:2;
}

/* Dark section support */
.panelDark .heroBigText{
  -webkit-text-stroke: 2px rgba(255,255,255,.12);
}

/* Light section support */
.heroTitleWrap:not(.panelDark) .heroBigText{
  -webkit-text-stroke: 2px rgba(18,18,18,.06);
}

/* Responsive tuning */
@media (max-width:900px){
  .heroBigText{
    font-size:clamp(90px, 18vw, 160px);
    top:60px;
  }
}

.heroWelcome, .heroTitle {

    padding: 10px;
}

/* Kicker: stroked + faded background band (blue/gold) */
.heroWelcome__kicker{
  position:relative;
  display:inline-block;
  padding:12px 18px;
  margin:0 auto 18px;
  border-radius:14px;

  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(18,18,18,.75);

  /* subtle glass */
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);


}

/* dual-stroke frame + fade edges */
.heroWelcome__kicker::before{
  content:"";
  position:absolute;
  inset:-2px;                 /* stroke thickness */
  border-radius:16px;
  padding:2px;
  pointer-events:none;

  /* blue + gold stroke */
  background:linear-gradient(90deg,#0b3594,#F19F0D);

  /* cutout center so it looks like a stroked border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;

  opacity:.85;
}

/* soft fade / glow wash */
.heroWelcome__kicker::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:18px;
  pointer-events:none;

  background:
    radial-gradient(120px 60px at 18% 50%, rgba(241,159,13,.22), transparent 70%),
    radial-gradient(140px 70px at 82% 50%, rgba(11,53,148,.22), transparent 72%),
    linear-gradient(to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.65) 18%,
      rgba(255,255,255,.65) 82%,
      rgba(255,255,255,0) 100%);
  filter: blur(10px);
  opacity:.55;
}

/* Optional: if kicker sits on dark panel, make text white */
.panelDark .heroWelcome__kicker{
  color:rgba(255,255,255,.88);
  background:rgba(0,0,0,.22);
  
}

.heroWelcome__kicker::before{
  animation:kickerStroke 3.6s ease-in-out infinite;
}

.menuBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:14px;
  border:none;
  background:transparent;
  cursor:pointer;
}

/* 3 horizontal lines */
.menuBtn i{
  width:24px;
  height:2px;
  background:#121212; /* or var(--ink) */
  display:block;
}


/* ===== Modern Pastor Section Buttons ===== */

.pastorText .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  font-weight:800;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:6px;
  border:none;
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}

/* PRIMARY – Gold solid */
.pastorText .btn--solid{
  background:#F19F0D;
  color:#0b3594;
  box-shadow:
    0 10px 25px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06);
}

.pastorText .btn--solid:hover{
  transform:translateY(-3px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45);
}

/* SECONDARY – Glass outline */
.pastorText .btn:not(.btn--solid){
  background:rgba(255,255,255,.06);
  color:#fff;
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.18);
}

.pastorText .btn:not(.btn--solid):hover{
  background:rgba(255,255,255,.12);
  transform:translateY(-3px);
}

.pastorText .btn::after{
  content:"→";
  margin-left:10px;
  font-weight:900;
  transition:transform .25s ease;
}

.pastorText .btn:hover::after{
  transform:translateX(4px);
}


/* Give options inside banner */
.giveDir{
  margin:14px 0 16px;
}

.giveRow{
  display:flex;
  gap:18px;
  margin-bottom:6px;
  font-size:14px;
}

.giveKey{
  min-width:140px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.7;
}

.giveVal{
  font-weight:600;
  opacity:.9;
}

/* Make banner the clipping container */
.giveBanner{
  position: relative;
  overflow: hidden;
  z-index: 2;
}

/* Ensure content sits above the art */
.giveCard{
  position: relative;
 
}

/* Hand image behind everything */
.giveArt--img{
  position: absolute;
  right: -60px;      /* push slightly off screen */
  bottom: 80px;     /* creates bottom cut-off */
  width: 520px;
  max-width: 50%;
  height: auto;
  object-fit: contain;
  z-index: 1;        /* behind content */
  pointer-events: none;
  opacity: .9;       /* optional softness */
}

/* Mobile adjustment */
@media (max-width: 900px){
  .giveArt--img{
    right: -30px;
    bottom: -50px;
    max-width: 80%;
  }
}

/* The CARD should clip the image */
.giveCard{
  position: relative;
  overflow: hidden;   /* THIS prevents bleed into black area */
}

/* Hand image behind content */
.giveArt--img{
  position: absolute;
  right: -60px;
  bottom: -80px;      /* */
  width: 520px;
  max-width: 50%;
  height: auto;
  object-fit: contain;
  z-index: 0;         /* behind text */
  pointer-events: none;
}

/* Ensure text sits above */
.giveCard > div{
  position: relative;
  z-index: 2;
}



/* --- 2026 badge: keep it glued to the statement --- */
.top__center{
  width:auto !important;        /* override  42vw lane */
  max-width:none !important;
  justify-content:flex-start !important;
  gap:10px;                     /* consistent spacing */
}

/* the button must NOT stretch */
.top__statementImg{
  width:auto !important;
  flex:0 0 auto !important;
}

/* the button must NOT stretch */
.top__statementImgMobile{
  width:auto !important;
  flex:0 0 auto !important;
}

/* stack the two spans inside the existing button (NO new classes) */
.top__statementImg{
  display:flex;
  flex-direction:column;   /* puts subtext below */
  align-items:center;
  justify-content:center;
  gap:4px;
}

.top__statementImgMobile{
  display:flex;
  flex-direction:column;   /* puts subtext below */
  align-items:center;
  justify-content:center;
  gap:4px;
}

/* make each line behave like a line */
.top__statementImg > span{
  display:block;
  text-align:center;
}
.top__statementImgMobile > span{
  display:block;
  text-align:center;
}


/* ===== 2026 Theme Button (Brand Styled) ===== */

button#statementBtn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:2px;

  padding:6px 14px;

  background:transparent;
  border:0px solid #0b3594;
  border-radius:4px;

  color:#0b3594;
  cursor:pointer;

  text-align:left;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;

  transition:all .18s ease;
}

/* hover state */
button#statementBtn:hover{
  background:none;
  border-color:none;
  color:#0b3594;
}

/* main line */
button#statementBtn span:first-child{
  font-size:12px;
  font-weight:900;
}

/* subtext */
button#statementBtn span:last-child{
  font-size:10px;
  letter-spacing:.18em;
  opacity:.75;
}

/* smooth modern hover fade */
button#statementBtn{
  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}

/* softer gold hover */
button#statementBtn:hover{
  /**background:rgba(241,159,13,.12);   /* subtle fade */
  /**border-color:#F19F0D;**/
  color:#0b3594;
}

/* ===== Overlay Theme Image ===== */

.menu__themeImage{
  margin-top:28px;
  max-width:820px;        /* keeps it controlled */
}

.menu__themeImage img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  opacity:.95;
}

.heroWelcome__kicker{
  border:0 !important;
}
.heroWelcome__kicker::before{
  display:none !important;   /* kills the gradient stroke frame */
}

.heroWelcome__kicker{
  border:0 !important;
  background:#0b3594 !important;   /* deep blue */
  color:#F19F0D !important;        /* gold text */

  padding:10px 18px;
  border-radius:4px;

  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* remove previous decorative frame */
.heroWelcome__kicker::before,
.heroWelcome__kicker::after{
  display:none !important;
}


.socialRow {
  display:flex;
  gap:14px;
  margin-top:14px;
}

.socialIcon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  color:#fff;
}

.socialIcon svg{
  width:20px;
  height:20px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Instagram gets the gradient chip, icon stays white */
.socialIcon--ig{
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

/* FIXED selector (no colon) */
.socialIcon--fb{
  background:#1877f2;
}

/* Facebook icon is a filled mark (not stroked) */
.socialIcon--fb svg{
  fill:currentColor;
  stroke:none;
  
  
}


/* ===== FOUNDERS: premium editorial (no animation) ===== */
#founders.foundersSection{
  padding:96px 0;
  background:
    radial-gradient(900px 500px at 18% 10%, rgba(16, 38, 120, .08), transparent 60%),
    radial-gradient(800px 420px at 82% 35%, rgba(200, 60, 140, .06), transparent 58%),
    linear-gradient(180deg, #fbfbfc 0%, #f5f6f8 100%);
}

#founders .foundersHeader{
  max-width:820px;
  margin-bottom:54px;
  position:relative;
}

#founders .foundersKicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(0,0,0,.55);
  margin-bottom:14px;
}

#founders .foundersHeader h2{
  font-size:62px;
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 14px 0;
}

#founders .foundersHeader p{
  font-size:18px;
  line-height:1.65;
  color:rgba(0,0,0,.62);
  margin:0;
  max-width:68ch;
}

/* Accent rule under header */
#founders .foundersHeader:after{
  content:"";
  display:block;
  width:88px;
  height:3px;
  margin-top:26px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(16,38,120,.85), rgba(200,60,140,.85));
}

/* GRID */
#founders .foundersGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
}

@media (max-width: 1040px){
  #founders .foundersGrid{ grid-template-columns:1fr; gap:46px; }
}

section#founders {
    background: #fff !important;
}

/* FOUNDER ITEM */
#founders .founderItem{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:40px;
  align-items:start;
  position:relative;
  padding-top:6px;
}

@media (max-width: 720px){
  #founders .founderItem{ grid-template-columns:1fr; gap:22px; }
}

/* Subtle vertical rule = “editorial” feel */
#founders .founderItem:before{
  content:"";
  position:absolute;
  left:300px;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.04), rgba(0,0,0,0));
}
@media (max-width: 720px){
  #founders .founderItem:before{ display:none; }
}

/* IMAGE: clean, premium frame */
#founders .founderImage{
  position:relative;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
  border:1px solid rgba(0,0,0,.10);
  padding:12px;
      margin-right: 10px;
}

#founders .founderImage img{
  width:100%;
  display:block;
  border-radius:14px;
  background:#fff;
}

/* NAME + TITLE: strong hierarchy */
#founders .founderContent h3{
  margin:0 0 18px 0;
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.01em;
}

#founders .founderContent h3 span{
  display:inline-block;
  margin-left:12px;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(0,0,0,.50);
  font-weight:700;
}

/* BODY TYPE */
#founders .founderContent p{
  margin:0 0 16px 0;
  font-size:16px;
  line-height:1.75;
  color:rgba(0,0,0,.70);
  max-width:70ch;
}

/* LINKS: subtle, premium */
#founders .founderLinks{
  margin-top:18px;
  display:flex;
  gap:18px;
  align-items:center;
}

#founders .founderLinks a{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  color:rgba(0,0,0,.72);
  border-bottom:1px solid rgba(0,0,0,.30);
  padding-bottom:4px;
}

#founders .foundersLead{
  font-size:22px;
  line-height:1.6;
  font-weight:500;
  margin-bottom:16px;
  position:relative;
}

#founders .foundersLead:after{
  content:"";
  display:block;
  width:72px;
  height:2px;
  background:#111;
  margin-top:18px;
}

#founders .foundersSub{
  margin-top:14px;
  font-size:16px;
  color:rgba(0,0,0,.55);
  max-width:65ch;
}
.pastor-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}

/* Hero */
.aboutCine{
  position:relative;
  min-height: 620px;
  color:#fff;
  overflow:hidden;
  background:#060a14;
}
.aboutCine__bg{
  position:absolute; inset:0;
}
.aboutCine__bg img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.02) contrast(1.05);
}
.aboutCine__shade{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 700px at 35% 35%, rgba(0,0,0,.18), rgba(0,0,0,.75) 72%),
    linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.40) 52%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 100%);
}
.aboutCine__inner{
  position:relative;
  padding: 92px 0 66px;
  max-width: 1100px;
}
.aboutCine__kicker{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  opacity:.80;
  margin-bottom:18px;
}
.aboutCine__title{
  font-size: clamp(32px, 6.2vw, 66px);
  line-height:1.0;
  letter-spacing:-.03em;
  margin:0 0 18px 0;
  font-weight: 900;
    letter-spacing: -.03em;
    margin: 0 0 18px;
    color: #f9ecd6;


}
.aboutCine__copy{
  max-width: 66ch;
  font-size:16px;
  line-height:1.85;
  opacity:.90;
}
.aboutCine__copy p{ margin:0 0 12px 0; }

.aboutCine__actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}


@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}

.aboutCine__meta{
  margin-top:26px;
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
  max-width: 860px;
}
.aboutMetaLabel{
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  opacity:.72;
  margin-bottom:6px;
}
.aboutMetaValue{
  font-size:13px;
  line-height:1.45;
  opacity:.92;
}
.aboutMetaLink{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:4px;
  color:#fff;
  opacity:.88;
}

@media (max-width: 920px){
  .aboutCine{ min-height: 560px; }
  .aboutCine__inner{ padding: 78px 0 54px; }
}

/* Statement band */
.aboutStatement{
  background:#0a0d14;
  padding: 64px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.aboutStatement__quote{
  text-align:center;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.12;
  font-size: clamp(30px, 4.2vw, 62px);
  color:#f5b02e; /* matches  gold tone */
  max-width: 22ch;
  margin: 0 auto;
}

/* Sections */
.aboutSection{
  background:#ffffff;
  padding: 92px 0;
}
.aboutAlt{
  background:#f6f6f8;
}
.aboutGrid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 56px;
  align-items:start;
}
.aboutGrid--tight{ gap: 42px; }
@media (max-width: 980px){
  .aboutGrid{ grid-template-columns:1fr; gap:30px; }
}

/* Ghost typography */
.aboutGhost{
  font-size: 96px;
  line-height: .9;
  font-weight: 950;
  letter-spacing: -.04em;
  color: rgba(0,0,0,.06);
  margin-bottom: -26px;
  user-select:none;
  pointer-events:none;
}
.aboutAlt .aboutGhost{ color: rgba(0,0,0,.05); }

.aboutH2{
  font-size: 42px;
  letter-spacing:-.02em;
  margin: 0 0 14px 0;
}
.aboutLead{
  font-size: 18px;
  line-height: 1.95;
  color: rgba(0,0,0,.78);
  margin:0;
  max-width: 72ch;
}
.aboutRight p{
  margin:0 0 16px 0;
  font-size:16px;
  line-height:1.95;
  color:rgba(0,0,0,.72);
}

/* Big lines for mission/vision */
.aboutBigLine{
  font-size: 28px;
  line-height: 1.35;
  font-weight: 950;
  letter-spacing:-.01em;
  color: rgba(0,0,0,.92);
  margin-bottom: 14px;
  max-width: 52ch;
}

/* Pillars rows */
.aboutTopRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom: 18px;
}
@media (max-width: 900px){
  .aboutTopRow{ flex-direction:column; align-items:flex-start; }
}
.aboutMini{
  margin:0;
  max-width: 62ch;
  line-height:1.75;
  color: rgba(0,0,0,.62);
}
.aboutRows{
  margin-top: 10px;
  border-top: 1px solid rgba(0,0,0,.12);
}
.aboutRow{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 26px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
@media (max-width: 780px){
  .aboutRow{ grid-template-columns:1fr; gap:10px; }
}
.aboutRowTitle{
  font-weight: 950;
  letter-spacing:-.01em;
  color: rgba(0,0,0,.92);
}
.aboutRowBody{
  color: rgba(0,0,0,.72);
  line-height: 1.9;
  max-width: 78ch;
}

/* Ending */
.aboutEnd{
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid rgba(0,0,0,.12);
}
.aboutEndK{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color: rgba(0,0,0,.55);
  margin-bottom: 10px;
}
.aboutEndT{
  font-size: 28px;
  font-weight: 950;
  letter-spacing:-.01em;
  color: rgba(0,0,0,.92);
  max-width: 60ch;
}
.aboutEndActions{
  margin-top: 16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ===== HARD RESET: Mission/Vision should NOT look like cards ===== */
.aboutSection#mission,
.aboutSection#vision{
  background: transparent !important;
  padding: 0 !important;
}

/* Kill any rounding/borders/shadows coming from earlier rules */
.aboutSection#mission .aboutGrid--tight,
.aboutSection#vision .aboutGrid--tight{
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  background: #f6f1e6 !important;
}

/* Make the whole band full-bleed (edge-to-edge), while keeping content aligned */
.aboutSection#mission .wrap,
.aboutSection#vision .wrap{
  max-width: none !important;
  padding: 0 !important;
}

/* Band container */
.aboutSection#mission .aboutGrid,
.aboutSection#vision .aboutGrid{
  margin: 0 !important;
  gap: 0 !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 240px;
}

/* Left half: dark navy slab (hard edge) */
.aboutSection#mission .aboutLeft,
.aboutSection#vision .aboutLeft{
  padding: 56px clamp(22px, 4vw, 70px) !important;
  background: #070b18 !important;
  color: #fff !important;
  position: relative;
}

/* Right half: warm light slab (hard edge) */
.aboutSection#mission .aboutRight,
.aboutSection#vision .aboutRight{
  padding: 56px clamp(22px, 4vw, 70px) !important;
  background: #f6f1e6 !important;
  color: #0b1020 !important;
}

/* Subtle top/bottom dividers like modern brand sites */
.aboutSection#mission .aboutGrid,
.aboutSection#vision .aboutGrid{
  border-top: 1px solid rgba(0,0,0,.10);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

/* Ghost word stays, but not huge/washed out */
.aboutSection#mission .aboutGhost,
.aboutSection#vision .aboutGhost{
  color: rgba(255,255,255,.08) !important;
  font-size: clamp(64px, 7vw, 96px) !important;
  margin-bottom: -18px !important;
}

/* Heading styling */
.aboutSection#mission .aboutH2,
.aboutSection#vision .aboutH2{
  margin: 0 0 14px 0 !important;
  font-size: clamp(34px, 3.2vw, 44px) !important;
  letter-spacing: -.02em !important;
  font-weight: 950 !important;
  color: #fff !important;
}

/* Gold accent rule (tight + clean) */
.aboutSection#mission .aboutH2:after,
.aboutSection#vision .aboutH2:after{
  content:"";
  display:block;
  width: 64px;
  height: 3px;
  border-radius: 0 !important;
  background: #f5b02e;
  margin-top: 16px;
}

/* Big line on the right should be bold and breathe */
.aboutSection#mission .aboutBigLine,
.aboutSection#vision .aboutBigLine{
  color: #0b1020 !important;
  font-size: clamp(26px, 2.7vw, 40px) !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
  max-width: 22ch;
}

/* Remove  */
.aboutSection#mission .aboutRight p,
.aboutSection#vision .aboutRight p{
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: rgba(11,16,32,.78) !important;
}

/* Mobile: stack bands (still hard edges, no rounding) */
@media (max-width: 980px){
  .aboutSection#mission .aboutGrid,
  .aboutSection#vision .aboutGrid{
    grid-template-columns: 1fr !important;
    min-height: auto;
  }
}


/* ===== MODERN BUTTON SYSTEM ===== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:4px;           /* not pill, not card */
  border:1px solid transparent;
  transition:none;             /* no animations */
}

/* PRIMARY (Gold) */
.btn--solid{
  background:#f5b02e;
  color:#0b1020;
  border-color:#f5b02e;
}

.btn--solid:hover{
  background:#e4a124;
  border-color:#e4a124;
  color:#0b1020;
}

/* DARK BUTTON (Hero dark context) */
.aboutCine .btn:not(.btn--solid){
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  color:#ffffff;
}

.aboutCine .btn:not(.btn--solid):hover{
  border-color:#ffffff;
  background:rgba(255,255,255,.08);
}

/* LIGHT CONTEXT BUTTON */
.aboutSection .btn:not(.btn--solid){
  background:transparent;
  border:1px solid rgba(11,16,32,.25);
  color:#0b1020;
}

.aboutSection .btn:not(.btn--solid):hover{
  border-color:#0b1020;
}

/* ===== Make <p class="aboutMini"> artful + bold (no hardcode) ===== */

.aboutMini{
  /* layout */
  margin:0;
  max-width: 56ch;
  text-align: left;

  /* typography */
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.7;
  font-weight: 850;
  letter-spacing: -.01em;

  /* color */
  color: rgba(11,16,32,.82);

  /* “designed statement” feel */
  position: relative;
  padding: 14px 0 14px 18px;
}

.aboutMini:before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:4px;
  background:#f5b02e; /* brand gold */
}

/* optional: make it pop more when it sits in the “What We’re Building” header row */
.aboutTopRow .aboutMini{
  color: rgba(11,16,32,.78);
}

/* if it ever appears on a dark section, invert automatically */
.aboutCine .aboutMini,
.aboutStatement .aboutMini,
.aboutAlt .aboutMini.darkOn{
  color: rgba(255,255,255,.86);
}
.aboutCine .aboutMini:before,
.aboutStatement .aboutMini:before{
  background:#f5b02e;
}

.aboutCine__actions--sub{
  margin-top:12px;
}
.aboutCine__actions--sub .btn{
  border-color: rgba(255,255,255,.22);
}


/* ===== Kids (Unique) — light, modern, editorial. No animations. ===== */
:root{
  --kx-ink:#0b1020;
  --kx-text: rgba(11,16,32,.78);
  --kx-muted: rgba(11,16,32,.60);
  --kx-line: rgba(11,16,32,.12);
  --kx-bg: #ffffff;
  --kx-wash: #fbfbfd;
  --kx-gold: #f5b02e;
  --kx-navy: #071022;
  --kx-cream: #f6f1e6;
}

/* Buttons (match  site’s vibe, not “card UI”) */
.kbtn{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 14px;
  font-weight: 900; letter-spacing:.06em; text-transform:uppercase;
  font-size: 11px;
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
  background: rgba(255,255,255,.10);
  text-decoration:none;
}
.kbtn--primary{
  background: var(--kx-gold);
  border-color: var(--kx-gold);
  color:#000;
}
.kbtn--ghost{
  background: transparent;
  border-color: rgba(0,0,0,.18);
  color: rgba(0,0,0,.85);
}

/* HERO (light + image frame) */
.kidsXHero{
  background:
    radial-gradient(900px 520px at 12% 18%, rgba(245,176,46,.18), transparent 60%),
    linear-gradient(180deg, var(--kx-bg) 0%, var(--kx-wash) 100%);
  border-bottom:1px solid var(--kx-line);
  padding: 54px 0 56px;
}
.kidsXHero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 38px;
  align-items:center;
}
@media (max-width: 980px){
  .kidsXHero__grid{ grid-template-columns: 1fr; gap: 18px; }
}
.kidsXKicker{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color: rgba(0,0,0,.60);
  margin-bottom: 12px;
}
.kidsXKicker--dark{ color: rgba(255,255,255,.72); }

.kidsXHero__title{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height:1.03;
  letter-spacing:-.04em;
  font-weight: 950;
  color: var(--kx-ink);
  margin:0 0 10px 0;
}
.kidsXHero__sub{
  margin:0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.95;
  color: var(--kx-text);
}
.kidsXHero__actions{ margin-top: 18px; display:flex; gap:10px; flex-wrap:wrap; }
.kidsXHero__actions .kbtn{ height:44px; }

.kidsXHero__frame{
  border:1px solid var(--kx-line);
  background:#000;
}
.kidsXHero__frame img{ width:100%; height:auto; display:block; object-fit:cover; }

.kidsXHero__micro{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 980px){ .kidsXHero__micro{ grid-template-columns: 1fr; } }
.kidsXMicro{
  border:1px solid var(--kx-line);
  background:#fff;
  padding: 12px;
}
.kidsXMicro__k{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color: rgba(0,0,0,.55); }
.kidsXMicro__v{ margin-top: 6px; font-weight: 950; color: var(--kx-ink); letter-spacing:-.01em; }

/* VIDEO BAND (distinct look: dark stage + premium video frame) */
.kidsXVideo{
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(245,176,46,.18), transparent 62%),
    linear-gradient(180deg, #071022 0%, #050b18 100%);
  color:#fff;
  padding: 78px 0;
}
.kidsXVideo__grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 28px;
  align-items:start;
}
@media (max-width: 980px){ .kidsXVideo__grid{ grid-template-columns: 1fr; } }

.kidsXH2{
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 950;
  letter-spacing:-.03em;
  margin:0 0 10px 0;
  color: currentColor;
}
.kidsXBody p{
  margin:0 0 12px 0;
  line-height: 2.0;
  color: rgba(255,255,255,.82);
}
.kidsXBody--lg p{ font-size:16px; color: var(--kx-text); }

.kidsXVideo__player{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 10px;
}
.kidsXVideo__player video{
  width:100%;
  height:auto;
  display:block;
  background:#000;
}
.kidsXNote{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

/* HIGHLIGHTS (modern grid, not “cards”; flat panels + accent dot) */
.kidsXHighlights{
  background: #fff;
  padding: 84px 0;
  border-bottom:1px solid var(--kx-line);
}
.kidsXHeadRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 980px){ .kidsXHeadRow{ flex-direction:column; align-items:flex-start; } }
.kidsXAside{ max-width: 46ch; color: rgba(0,0,0,.62); line-height:1.9; }

.kidsXGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .kidsXGrid{ grid-template-columns: repeat(6, 1fr); } }

.kidsXTile{
  grid-column: span 4;
  border:1px solid var(--kx-line);
  background: #fff;
  padding: 16px 16px 14px;
}
@media (max-width: 980px){ .kidsXTile{ grid-column: span 6; } }

.kidsXTile__top{ display:flex; align-items:center; gap:10px; margin-bottom: 8px; }
.kidsXDot{
  width:10px; height:10px;
  background: var(--kx-gold);
}
.kidsXTile__t{ font-weight: 950; letter-spacing:-.01em; color: var(--kx-ink); }
.kidsXTile__b{ color: rgba(0,0,0,.66); line-height:1.9; }

/* PHOTO STRIP (asymmetric row, very different from About) */
.kidsXStrip{ background: var(--kx-wash); padding: 34px 0; border-bottom:1px solid var(--kx-line); }
.kidsXStrip__wrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){ .kidsXStrip__wrap{ grid-template-columns: 1fr; } }
.kidsXStrip__img{
  margin:0;
  border:1px solid var(--kx-line);
  background:#000;
}
.kidsXStrip__img img{ width:100%; height: 320px; object-fit:cover; display:block; }
@media (max-width: 980px){ .kidsXStrip__img img{ height: 240px; } }

/* EDITORIAL (rail + side mission, clean + premium) */
.kidsXEditorial{
  background:#fff;
  padding: 92px 0;
}
.kidsXEditorial__grid{
  display:grid;
  grid-template-columns: 18px 1.1fr .9fr;
  gap: 26px;
  align-items:start;
}
@media (max-width: 980px){
  .kidsXEditorial__grid{ grid-template-columns: 1fr; gap: 18px; }
}
.kidsXEditorial__rail{
  background: linear-gradient(180deg, var(--kx-gold), rgba(245,176,46,.25));
  width: 8px;
  height: 100%;
}
.kidsXSideTitle{
  font-size: 12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight: 950;
  color: rgba(0,0,0,.70);
  margin-bottom: 10px;
}
.kidsXList{ margin:0; padding-left: 18px; }
.kidsXList li{
  margin: 8px 0;
  line-height: 1.95;
  color: rgba(0,0,0,.70);
}
.kidsXList li::marker{ color: var(--kx-gold); }

.kidsXCTA{
  margin-top: 16px;
  border:0px solid var(--kx-line);
  background: var(--kx-wash);
  padding: 14px;
}
.kidsXCTA__t{ font-weight: 950; color: var(--kx-ink); letter-spacing:-.01em; }
.kidsXCTA__b{ margin: 8px 0 12px 0; color: rgba(0,0,0,.66); line-height:1.9; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}

/* Modernize highlight tiles */
.kidsXTile{
  grid-column: span 4;
  border: 1px solid rgba(11,16,32,.10);
  background: #fff;
  padding: 18px 18px 16px;
  border-radius: 18px;

  /* modern “soft lift” */
  box-shadow:
    0 10px 30px rgba(11,16,32,.08),
    0 2px 8px rgba(11,16,32,.06);

  /* subtle depth */
  background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(251,251,253,1) 100%);
}



.kidsXTile {
    grid-column: span 4;
    border: 5px solid rgba(11, 16, 32, .10);
    background: #fff;
    padding: 18px 18px 16px;
    border-radius: 8px;
    box-shadow: none !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(251, 251, 253, 1) 100%);
}
.kidsXDot {
    width: 60px;
    height: 10px;
    border-radius: 999px;
    background: #323a66;
    /* box-shadow: 0 6px 16px rgba(245, 176, 46, .35); */
}


/* Base tile */
.kidsXTile{
  grid-column: span 4;
  border: 5px solid rgba(11,16,32,.10);
  background: #fff;
  padding: 18px 18px 16px;
  border-radius: 8px;
  box-shadow: none;
  background-image: linear-gradient(
    180deg,
    rgba(255,255,255,1) 0%,
    rgba(251,251,253,1) 100%
  );
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Hover — keep same thickness, just refine */
.kidsXTile:hover{
  border-color: rgba(11,16,32,.28);

  /* modern subtle lift */
  box-shadow:
    0 10px 28px rgba(11,16,32,.08);
}

/* ===== Kids micro “statements” — NOT cards ===== */

.kidsXHero__micro{
  display:flex;
  gap:18px;
  margin-top:18px;
  align-items:flex-end;
}

/* remove card look entirely */
.kidsXMicro{
  position:relative;
  flex:1;
  min-width: 220px;

  border:none !important;
  background:transparent !important;
  box-shadow:none !important;

  padding: 8px 4px 10px;
  cursor: default;

  opacity:0;
  transform:translateY(6px);
  animation: kidsMicroIn .55s ease forwards;
}

/* stagger (no JS, no HTML changes) */
.kidsXMicro:nth-child(2){ animation-delay:.06s; }
.kidsXMicro:nth-child(3){ animation-delay:.12s; }

@keyframes kidsMicroIn{
  to{ opacity:1; transform:translateY(0); }
}

/* the “fade band” behind text (artful like your image fades) */
.kidsXMicro::before{
  content:"";
  position:absolute;
  inset:-10px -10px -12px -10px;
  pointer-events:none;

  background:
    /* subtle base wash */
    radial-gradient(120% 90% at 20% 30%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%),
    /* left fade */
    linear-gradient(to right, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 46%),
    /* right fade */
    linear-gradient(to left, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 46%),
    /* bottom fade */
    linear-gradient(to bottom, rgba(255,255,255,0) 45%, rgba(255,255,255,.98) 100%);
  filter: contrast(1.02) saturate(1.02);
  opacity:.95;
}

/* top label */
.kidsXMicro__k{
  position:relative;
  z-index:1;

  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:900;
  color: rgba(11,16,32,.60);
}

/* main value */
.kidsXMicro__v{
  position:relative;
  z-index:1;

  margin-top:6px;
  font-size:18px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.02em;
  color: rgba(11,16,32,.98);
}

/* elegant accent underline (not a top border) */
.kidsXMicro::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:44px;
  height:3px;
  border-radius:3px;
  background: rgba(245,176,46,.95);
  box-shadow: 0 8px 20px rgba(245,176,46,.18);
  opacity:.95;
}

/* optional: tiny “lift” without card shadow */
.kidsXMicro:hover{
  transform:translateY(-1px);
}


/* ===== Elegant Minimal Panels ===== */

.kidsXTile{
  grid-column: span 4;

  position: relative;
  padding: 18px 18px 18px 24px; /* extra left space */

  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;

  transition: color .2s ease;
}

/* LEFT accent line */
.kidsXTile::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  width:4px;
  height:28px;
  border-radius:2px;

  background: var(--kx-gold);
  transition: background .2s ease, height .2s ease;
}

/* Hover: change accent to blue */
.kidsXTile:hover::before{
  background: #0c1830; /* your dark blue */
  height:36px;         /* subtle elongation */
}

/* Title */
.kidsXTile__t{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -.02em;
  color: #0b1020;
}

/* Body */
.kidsXTile__b{
  margin-top: 8px;
  line-height: 1.9;
  color: rgba(11,16,32,.70);
  font-size: 14px;
}

.rcBreadcrumb{
  margin-bottom:20px;
  font-size:13px;
}

.rcBreadcrumb__list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  margin:0;
}

.rcBreadcrumb__item{
  display:flex;
  align-items:center;
  gap:8px;
}

.rcBreadcrumb__item a{
  text-decoration:none;
  color:#64748b;
  font-weight:600;
  transition:color .15s ease;
}

.rcBreadcrumb__item a:hover{
  color:#f19f0d;
}

.rcBreadcrumb__current{
  font-weight:800;
  color:#0b1220;
}

.rcBreadcrumb__sep{
  color:#cbd5e1;
}

.splash{
  -webkit-overflow-scrolling: touch;
}

/* when splash is CLOSED */
.splash[aria-hidden="true"]{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* when splash is OPEN (your JS adds .is-open) */
.splash.is-open,
.splash[aria-hidden="false"]{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* safety: don’t block vertical scroll globally */
html, body{
  height: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* ========== Kids Hero responsiveness fix ========== */

/* Base safety: prevent horizontal overflow anywhere in the hero */
.kidsXHero,
.kidsXHero *{
  box-sizing:border-box;
}
.kidsXHero{ overflow:hidden; }
.kidsXHero__grid{ max-width:1620px; margin:0 auto; padding:40px 18px; }

/* Make the grid responsive */
.kidsXHero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:center;
}

/* Media frame must never overflow */
.kidsXHero__media{ min-width:0; }
.kidsXHero__frame{
  width:100%;
  border-radius:18px;
  overflow:hidden;
}
.kidsXHero__frame img{
  width:100%;
  height:auto;
  display:block;
}

/* Micro cards: allow wrapping and prevent pushing width */
.kidsXHero__micro{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.kidsXMicro{ min-width:0; }

/* --- Tablet / Mobile --- */
@media (max-width: 980px){
  .kidsXHero__grid{
    grid-template-columns: 1fr;
  }

  /* Put image first OR keep copy first — choose one:
     If you want image first on mobile, uncomment the next 2 lines.
  */
  /* .kidsXHero__media{ order:-1; } */

  .kidsXHero__copy{ max-width: 680px; }
}

/* Small phones */
@media (max-width: 640px){
  .kidsXHero__grid{ padding:28px 16px; gap:16px; }

  /* CTA buttons wrap nicely */
  .kidsXHero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .kidsXHero__actions .kbtn{
    flex: 0 0 auto;
    white-space:nowrap;
  }

  /* Micro stats stack cleaner */
  .kidsXHero__micro{
    flex-direction:column;
    align-items:stretch;
  }
}

.heroMeta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;

  color:rgba(18,18,18,.62);
  font-size:15px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;

  margin-top:50px;

  /* FIX */
  padding:0 20px;
  text-align:center;
  flex-wrap:wrap;
}

@media (max-width:640px){
  .heroMeta{
    margin-top:32px;
    gap:10px;
    font-size:11px;
    letter-spacing:.14em;
  }
}



.heroTitle{
  display:block;
  text-align:center;

  /* Always single line */
  white-space:nowrap;

  /* Scale perfectly with viewport */
  font-size:5.5vw;
  text-transform: uppercase;
  color:#8ea2cd !important;
  letter-spacing: .00015em !important;

  font-weight:900;
  letter-spacing:-0.03em;
  line-height:0.95;

  color:#111;
  margin-top:28px;
}
span.speaker {
    color: #7a4c09;
}
a.video__play {
    background: #b4aeae70 !important;
    border: 0 solid #fff;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}
.video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;background:rgba(255,255,255,.92);border:1px solid rgba(18,18,18,.18);display:flex;align-items:center;justify-content:center;cursor:pointer}
.video__play::before{
    content:"";
    width:40px;
    height:40px;
    display:block;
    background:#f5b02e;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 18 Q35 10 45 16 L82 46 Q90 50 82 54 L45 84 Q35 90 30 82 Z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 18 Q35 10 45 16 L82 46 Q90 50 82 54 L45 84 Q35 90 30 82 Z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
}

.themeModal{ position:fixed; inset:0; z-index:9999; display:none; }
.themeModal.is-open{ display:block; }
.themeModal__backdrop{ position:absolute; inset:0; background:rgba(8,10,14,.86); }

.themeModal__panel{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px;
  max-width:980px;
  margin:0 auto;
}

.themeModal__close{
  position:absolute;
  top:14px; right:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
}
.themeModal__close span{ font-size:11px; letter-spacing:.14em; font-weight:900; opacity:.9; }
.themeModal__close b{ font-size:18px; line-height:1; font-weight:900; }

.themeModal__media{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.themeModal__media img{
  width:100%;
  height:min(64vh, 560px);
  object-fit:cover;
  display:block;
}

.themeModal__meta{
  margin-top:14px;
  color:#fff;
  padding:14px 6px 0;
}
.themeModal__kicker{
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.8;
  font-size:12px;
}
.themeModal__title{
  margin-top:8px;
  font-weight:1000;
  font-size:28px;
  letter-spacing:.02em;
}
.themeModal__line{
  margin-top:10px;
  font-size:14px;
  line-height:1.55;
  font-weight:800;
  opacity:.92;
}
.themeModal__label{
  display:inline-block;
  min-width:90px;
  opacity:.7;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width:640px){
  .themeModal__panel{ padding:12px; }
  .themeModal__media img{ height:56vh; }
  .themeModal__title{ font-size:22px; }
}

.menu__big {
    color: #ffa600bd;
}