/* ===== base / layout ===== */
.cs2 { --cs2-accent:#29389f; color:#0f1220; }
.cs2 * { box-sizing:border-box; }

.cs2-fixed-bg{
  position:fixed; inset:0; z-index:-1;
  background-image: var(--cs2-brick);
  background-repeat: repeat;
  background-size: auto;
  background-position: top center;
  background-attachment: fixed;
  pointer-events:none;
}

/* utility */
.cs2-wrap{ width:100%; max-width:100%; margin:0 auto; padding:0 0px; }
.cs2-h1{ font: 800 clamp(28px,5vw,56px)/1.02 system-ui, -apple-system, Segoe UI, Roboto, Arial; letter-spacing:.02em; color:#fff; }
.cs2-h2{ font: 800 clamp(22px,3.2vw,36px)/1.05 system-ui; color:var(--cs2-accent); margin:0 0 8px; }
.cs2-kicker{ text-transform:uppercase; letter-spacing:.14em; font-weight:800; color:#fff; margin:0 0 10px;display: none; }
.cs2-tagline{ color:#ffffff; font-weight:800; margin:.4rem 0 1rem; }
.cs2-dek{ color:#ffffff; max-width:48ch; }
.cs2-pillars{ color:#29389f; font-weight:700; margin-top:10px; }
.cs2-rich {
    font-size: 1.16rem;
    color: #1b1e2a;
    font-weight: 300;
    letter-spacing: 0rem;
}
.cs2-figure img, .cs2-gallery img, .cs2-social-grid img{ width:100%; height:auto; display:block; border-radius:0px; }

/* ===== hero ===== */
.cs2-hero{
  position:relative; padding: 96px 0 40px;
  background:#0a0a0a;
  background-image:url("http://localhost:10010/wp-content/uploads/2025/09/Dark-Brick-copy.png");
  background-size: cover;
  background-position: center;
}
.cs2-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
.cs2-hero__grid{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:32px; align-items:center;
}
.cs2-hero__copy{ padding-right:8px; }
.cs2-hero__image img{ border-radius:0px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }

/* ===== full bleed ===== */
.cs2-bleed__media{ width:100%; height:auto; display:block; }

/* ===== two column (challenge/solution) ===== */
.cs2-two-col{
  padding: 36px 0;
  background: url("http://localhost:10010/wp-content/uploads/2025/09/White-Brick2.png");
  background-position: bottom;
}
.cs2-two-col__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;      /* left text, right image */
  grid-template-rows: 1fr 1fr;         /* two equal rows for the text blocks */
  gap: 28px 36px;
  align-items: stretch;
}


/* place left blocks */
.cs2-two-col__grid > .cs2-block:nth-of-type(1){ grid-column:1; grid-row:1; }
.cs2-two-col__grid > .cs2-block:nth-of-type(2){ grid-column:1; grid-row:2; }

/* right image spans both rows */
.cs2-two-col__grid > .cs2-figure:first-of-type{
  grid-column:2; grid-row:1 / span 2; align-self:stretch;
}
.cs2-two-col__grid > .cs2-figure:first-of-type img{
  width:100%; height:100%; object-fit:cover; border-radius:0px;
}

/* optional second figure below grid (full width) */
.cs2-two-col__grid > .cs2-figure:nth-of-type(2){
  grid-column:1 / -1; grid-row:3;
}

/* ===== brand development ===== */
.cs2-brand{ background:#51e6fa; padding: 40px 0; }
.cs2-gallery{ list-style:none; padding:0; margin:16px 0 0; display:grid; grid-template-columns: repeat(5,1fr); gap:14px; }
.cs2-gallery li{}

/* ===== outbound ===== */
.cs2-outbound{ background:#1a39be; padding: 40px 0; }
.cs2-outbound .cs2-h2{ color:#fff; }
.cs2-outbound .cs2-rich{ color:#eaf6ff; }
.cs2-video-grid{ margin-top:14px; display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.cs2-video video, .cs2-video iframe{
  width:100%; aspect-ratio:16/9; display:block; border-radius:0px; box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

/* OUTBOUND: prevent iOS native play overlay while paused; wrapper handles the first tap */
.cs2-outbound .cs2-video--overlay.paused .cs2-video__el{
  pointer-events: none;
}
.cs2-outbound .cs2-video--overlay.paused .cs2-video__el::-webkit-media-controls{
  display: none !important;
}
.cs2-outbound .cs2-video--overlay.paused .cs2-video__el::-webkit-media-controls-start-playback-button{
  display: none !important;
  -webkit-appearance: none;
}
.cs2-outbound .cs2-video--overlay.paused .cs2-video__el::-webkit-media-controls-overlay-play-button{
  display: none !important;
  -webkit-appearance: none;
}
.cs2-outbound .cs2-video--overlay.is-playing .cs2-video__el{
  pointer-events: auto;
}

/* ===== social ===== */
.cs2-social{ background:#fff; padding: 40px 0 70px; }
.cs2-social-grid{ list-style:none; padding:0; margin:16px 0 0; display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }

/* ===== responsive ===== */
@media (max-width: 1024px){
  .cs2-hero__grid{ grid-template-columns: 1fr; }
  .cs2-two-col__grid{ grid-template-columns: 1fr; grid-template-rows: auto; }
  .cs2-two-col__grid > .cs2-figure:first-of-type,
  .cs2-two-col__grid > .cs2-figure:nth-of-type(2),
  .cs2-two-col__grid > .cs2-block:nth-of-type(1),
  .cs2-two-col__grid > .cs2-block:nth-of-type(2){ grid-column:auto; grid-row:auto; }
  .cs2-two-col__grid > .cs2-figure:first-of-type img{ height:auto; object-fit:contain; }
  .cs2-gallery{ grid-template-columns: repeat(3,1fr); }
  .cs2-video-grid{ grid-template-columns: 1fr 1fr; }
  .cs2-social-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .cs2-video-grid{ grid-template-columns: 1fr; }
  .cs2-gallery{ grid-template-columns: 1fr 1fr; }
}

/* ===== neon title option for image headings ===== */
.neon-title{ position:relative; display:inline-block; line-height:0; }
.neon-title__img{
  display:block; max-width:100%; height:auto; filter:
    drop-shadow(0 0 2px rgba(81,230,250,.8))
    drop-shadow(0 0 8px rgba(81,230,250,.55))
    drop-shadow(0 0 18px rgba(81,230,250,.35));
  transition:filter .25s ease;
}
.neon-title::before{
  content:""; position:absolute; inset:0; background:#51E6FA;
  -webkit-mask-image: var(--neon-img); mask-image: var(--neon-img);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  filter: blur(16px) opacity(.8); transition: filter .28s ease, opacity .28s ease; pointer-events:none; z-index:-1;
}
.neon-title:hover .neon-title__img{ filter:
  drop-shadow(0 0 3px rgba(81,230,250,.95))
  drop-shadow(0 0 12px rgba(81,230,250,.75))
  drop-shadow(0 0 22px rgba(81,230,250,.55));
}
.neon-title:hover::before{ filter: blur(22px) opacity(.98); }

@media (prefers-reduced-motion: reduce){
  .neon-title__img, .neon-title::before{ transition:none !important; }
}

/* Force hidden state for any AOS target until it's animated */
[data-aos] {
  opacity: 0 !important;
  transform: translateY(14px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

/* When AOS fires */
[data-aos].aos-animate {
  opacity: 1 !important;
  transform: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}