/* ========================================================================
   Bright Wave — v2 (mid-market positioning) — additions on top of /css/styles.css
   Only the NEW components live here; base tokens/nav/hero/gallery/founder/cta
   are inherited from the shared styles.css so v2 stays visually on-brand.
   ======================================================================== */

/* ---- CAPABILITIES: 4 focused cards (replaces the 8-card bento) ---- */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.cap{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:1.9rem 1.6rem;transition:transform .38s var(--ease),border-color .38s,box-shadow .38s}
.cap:hover{transform:translateY(-6px);border-color:var(--brand);box-shadow:var(--shadow-sm)}
.cap h3{font-size:1.16rem;margin:1rem 0 .55rem}
.cap p{color:var(--text-2);font-size:.95rem}
.cap__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:rgba(22,112,181,.12);border:1px solid rgba(22,112,181,.22)}
[data-theme="dark"] .cap__icon{background:rgba(111,185,242,.12);border-color:rgba(111,185,242,.22)}
.cap__icon svg{width:26px;height:26px;stroke:var(--ink-accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- HOW WE WORK: 4-step process ---- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;counter-reset:step}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:1.8rem 1.5rem;position:relative;transition:.4s var(--ease)}
.step:hover{transform:translateY(-5px);border-color:var(--gold)}
.step__no{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  font-family:'Sora';font-weight:800;font-size:1.1rem;color:var(--navy-deep);
  background:var(--gold);margin-bottom:1rem}
[data-theme="dark"] .step__no{color:#0b1026}
.step h3{font-size:1.06rem;margin-bottom:.45rem}
.step p{color:var(--text-2);font-size:.92rem}

/* ---- CTA budget select — match the input styling from styles.css ---- */
.cta__form select{
  background:var(--bg-2);border:1px solid var(--border);border-radius:12px;
  padding:.8rem 1rem;color:var(--text);font-family:inherit;font-size:.96rem;
  transition:border-color .25s,box-shadow .25s;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238089ab' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:18px;padding-right:2.6rem}
.cta__form select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,112,181,.22)}

/* ---- footer secondary services (kept off the main stage) ---- */
.footer__also{display:block;margin-top:.5rem;color:var(--text-3);font-size:.86rem;opacity:.85}

/* ---- responsive ---- */
@media (max-width:960px){
  .caps{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .caps{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}

/* ---- small-screen overflow guards (2026-07-27, roadshowspecialist.com launch) ----
   body{overflow-x:hidden} was masking real clipping: at <=389px the hero grid item's
   min-content (322px) blew past the 288px column and the 2-col footer overran by 14px.
   Grid children need an explicit min-width:0 to be allowed to shrink. ---- */
html{overscroll-behavior-x:none}
@media (max-width:960px){
  .hero__inner{grid-template-columns:minmax(0,1fr)}
  .hero__copy,.hero__visual{min-width:0}
  .footer__brand,.footer__col{min-width:0}
  .footer__brand p{overflow-wrap:anywhere}
}
@media (max-width:389px){
  .hero__title{font-size:clamp(1.9rem,8.6vw,2.5rem)}
  /* "Get a Free Campaign Proposal" + arrow is 322px on a nowrap button — 34px past a 320 viewport */
  .hero__cta{width:100%}
  .hero__cta .btn{white-space:normal;text-align:center;justify-content:center;width:100%;padding-inline:1.1rem}
  .hero__badge{max-width:calc(100% - 1.4rem)}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
}