/* Fineries — Brand & Strategy */
.bshero { min-height: min(800px, 100svh); background: var(--v3-blue); color: #fff; overflow: hidden; }
.bshero__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: clamp(44px, 8vw, 120px); align-items: center; min-height: min(800px, 100svh); padding-top: clamp(130px, 16vh, 170px); padding-bottom: clamp(64px, 9vh, 92px); }
.bshero__copy { max-width: 41rem; }
.bshero__title { margin: 22px 0 0; max-width: 15ch; font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 53px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.bshero__body { max-width: 54ch; margin-top: 28px; }
.bshero__body p { color: rgba(255,255,255,.82); }
.bshero__body p + p { margin-top: 12px; }
.bshero__body strong { color: #fff; }
.bshero__media { position: relative; display: grid; place-items: center; width: 100%; min-height: 420px; aspect-ratio: .94; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.04); border-radius: clamp(20px,2vw,30px); background: var(--v3-blue-d); color: #fff; cursor: pointer; box-shadow: 0 34px 80px rgba(22,24,82,.24); }
.bshero__poster, .bshero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.bshero__poster { object-fit: cover; }
.bshero__shade { background: linear-gradient(180deg,rgba(32,34,79,.05),rgba(32,34,79,.24)); transition: background .35s var(--v3-ease); }
.bshero__glow { position: absolute; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle,rgba(8,188,179,.22),rgba(8,188,179,.06) 42%,transparent 68%); transform: scale(.7); transition: transform .45s var(--v3-ease); }
.bshero__play { position: relative; z-index: 1; display: grid; place-items: center; width: 88px; height: 88px; border: 3px solid rgba(8,188,179,.28); border-radius: 50%; background: rgba(255,255,255,.34); backdrop-filter: blur(8px); transition: transform .35s var(--v3-ease),background .35s var(--v3-ease); }
.bshero__play svg { width: 27px; height: 27px; margin-left: 4px; fill: currentColor; }
.bshero__watch { position: absolute; z-index: 1; bottom: 28px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--v3-ease),transform .3s var(--v3-ease); }
.bshero__media:hover .bshero__shade { background: rgba(32,34,79,.08); }
.bshero__media:hover .bshero__glow { transform: scale(1); }
.bshero__media:hover .bshero__play { transform: scale(1.08); background: var(--v3-teal); }
.bshero__media:hover .bshero__watch { opacity: .8; transform: translateY(0); }
.bsproblem { background: #fff; }
.bsproblem__grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(420px,1.18fr); gap: clamp(48px,9vw,130px); align-items: start; }
.bsproblem__title { margin: 14px 0 22px; max-width: 12ch; }
.bsproblem__body p + p { margin-top: 14px; }
.bsproblem__questions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--v3-line); }
.bsproblem__questions li { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--v3-line); font-family: var(--font-display); font-size: clamp(18px,2vw,25px); font-weight: 700; color: var(--v3-ink); }
.bsproblem__questions li span { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--v3-teal); }
.bsservices { background: var(--v3-mist); }
.bsservices__head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: clamp(34px,5vw,60px); }
.bsservices__head .h-lg { max-width: 14ch; text-align: right; }
.bsservices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bservice { min-height: 300px; padding: clamp(26px,3vw,38px); border-radius: 16px; background: #fff; display: flex; flex-direction: column; }
.bservice__num { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--v3-text-2); }
.bservice__icon { display: grid; place-items: center; width: 48px; height: 48px; margin: auto 0 22px; border-radius: 12px; background: var(--v3-mist); color: var(--v3-blue); }
.bservice__icon svg { width: 23px; height: 23px; }
.bservice h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--v3-ink); }
.bservice p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v3-text-2); }
.bservice--2 .bservice__icon, .bservice--6 .bservice__icon { color: var(--v3-magenta); }
.bservice--3 .bservice__icon, .bservice--5 .bservice__icon { color: var(--v3-teal); }
.bservice--4 .bservice__icon { color: #b88b00; }
@media (max-width: 900px) {
  .bshero { min-height: auto; }
  .bshero__inner { grid-template-columns: 1fr; min-height: auto; padding-top: 132px; }
  .bshero__media { width: min(100%, 540px); min-height: 0; aspect-ratio: 16/10; }
  .bsproblem__grid { grid-template-columns: 1fr; }
  .bsservices__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .bshero__inner { padding-top: 112px; padding-bottom: 54px; gap: 38px; }
  .bshero__title { font-size: clamp(34px,9.2vw,46px); line-height: 1.06; max-width: 100%; }
  .bshero__media { border-radius: 18px; }
  .bshero__play { width: 72px; height: 72px; }
  .bsproblem__questions li { grid-template-columns: 38px 1fr; }
  .bsservices__head { align-items: flex-start; flex-direction: column; }
  .bsservices__head .h-lg { text-align: left; }
  .bsservices__grid { grid-template-columns: 1fr; }
  .bservice { min-height: 260px; }
}

/* Subservices as home-style cards — 3 across (9 items) */
.bsservices .svc3__grid{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.bsservices .svc3__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bsservices .svc3__grid{grid-template-columns:1fr}}

/* Subservice card artwork — no idle motion. On hover the uploaded image (whatever
   SVG/PNG is set) scales up and rotates. Animation lives on the img, so it persists
   regardless of which artwork is uploaded via the CMS. */
.bsservices .svc3__img{overflow:hidden}
.bsservices .svc3__img img{transform-origin:center;transition:transform .55s cubic-bezier(.34,1.56,.44,1)}
.bsservices .svc3:hover .svc3__img img{transform:scale(1.14) rotate(5deg)}
/* Card 1 (Research & Insights) — a touch more pronounced */
.bsservices .svc3:first-child:hover .svc3__img img{transform:scale(1.18) rotate(-6deg)}
@media(prefers-reduced-motion:reduce){
  .bsservices .svc3:hover .svc3__img img,
  .bsservices .svc3:first-child:hover .svc3__img img{transform:none}
}

/* Subservice cards are clickable (open the pop-up) */
.bsservices .svc3{cursor:pointer}
.svc3__more{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:16px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--v3-blue)}
.bsservices .svc3--magenta .svc3__more{color:var(--v3-magenta)}
.bsservices .svc3--teal .svc3__more{color:var(--v3-teal-d)}
.bsservices .svc3--gold .svc3__more{color:#b88b00}
.svc3__more-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--v3-line);color:inherit;transition:background .25s,color .25s,border-color .25s}
.svc3__more-arrow svg{width:14px;height:14px}
.bsservices .svc3--blue:hover .svc3__more-arrow{background:var(--v3-blue);border-color:var(--v3-blue);color:#fff}
.bsservices .svc3--magenta:hover .svc3__more-arrow{background:var(--v3-magenta);border-color:var(--v3-magenta);color:#fff}
.bsservices .svc3--teal:hover .svc3__more-arrow{background:var(--v3-teal);border-color:var(--v3-teal);color:#fff}
.bsservices .svc3--gold:hover .svc3__more-arrow{background:var(--v3-gold);border-color:var(--v3-gold);color:var(--v3-ink)}

/* Subservice pop-up modal */
.submodal{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.submodal[hidden]{display:none}
.submodal__backdrop{position:absolute;inset:0;background:rgba(16,14,45,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.submodal__panel{position:relative;z-index:1;width:min(620px,100%);max-height:86vh;overflow:auto;background:#fff;border-radius:18px;padding:clamp(30px,4vw,54px);box-shadow:0 40px 120px rgba(0,0,0,.35);animation:submodalIn .3s var(--v3-ease)}
@keyframes submodalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.submodal__close{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;border-radius:50%;background:var(--v3-mist);color:var(--v3-ink);font-size:24px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.submodal__close:hover{background:var(--v3-blue);color:#fff}
.submodal__eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--v3-teal)}
.submodal__title{margin:12px 0 16px;font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.12;color:var(--v3-ink)}
.submodal__copy p{margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--v3-text)}
.submodal__copy p:last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){.submodal__panel{animation:none}}

/* Icons shown at ~60% within a matching teal field (tiles carry their own teal bg,
   so the smaller image sits seamlessly on the same colour). */
.bsservices .svc3__img{background:#01D2CE}
.bsservices .svc3__img img{object-fit:cover;transform:scale(.6)}
.bsservices .svc3:hover .svc3__img img{transform:scale(.72) rotate(5deg)}
.bsservices .svc3:first-child:hover .svc3__img img{transform:scale(.76) rotate(-6deg)}
@media(prefers-reduced-motion:reduce){
  .bsservices .svc3:hover .svc3__img img,
  .bsservices .svc3:first-child:hover .svc3__img img{transform:scale(.6)}
}