/* ===== v3.2: refined corporate direction (light/bold display type, sharper accent, open layout) ===== */
:root{
  --navy:#0c2238;
  --navy-2:#14304d;
  --signal:#ec5512;
  --signal-dk:#c9440a;
  --head:"Red Hat Display",system-ui,sans-serif;
  --r-lg:28px;--r-xl:56px;
}
h1,h2,h3,h4{font-stretch:100%;letter-spacing:-.02em}
h1,h2{font-weight:300;line-height:1.02}
h1 strong,h2 strong{font-weight:700}
h3,h4{font-weight:600}
.util .dot{box-shadow:0 0 0 4px rgba(236,85,18,.22)}
.hero{min-height:calc(100svh - 150px);max-height:none}
.hero::after{background:linear-gradient(90deg,rgba(8,20,33,.82) 0%,rgba(8,20,33,.5) 48%,rgba(8,20,33,.12) 100%),linear-gradient(0deg,rgba(8,20,33,.55),transparent 50%)}
.hero .wrap{padding-block:140px 96px}
.hero .loc,.eyebrow{font:700 13px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--signal)}
.hero .loc::before{background:var(--signal)}
.hero h1{font-size:clamp(46px,7vw,108px);font-weight:300;max-width:13ch;letter-spacing:-.03em}
.hero p.lede{color:#e3e9ef}
.phead .wrap{padding-block:120px 96px}
.phead h1{font-size:clamp(42px,6vw,88px);letter-spacing:-.03em}
.sec{padding-block:128px}
.sec-head{margin-bottom:64px}
.sec-head h2{font-size:clamp(38px,4.8vw,68px)}
.feature h2,.sd h2{font-size:clamp(34px,3.8vw,54px)}
.cta-band h2{font-size:clamp(32px,3.6vw,50px)}
.sd h2,.svc h3,.proj h3,.person h3,.fact h3{color:var(--navy)}
.sd-media .ph{border-radius:0 var(--r-xl) var(--r-xl) var(--r-xl)}
.sd:nth-child(even) .sd-media .ph{border-radius:var(--r-xl) 0 var(--r-xl) var(--r-xl)}
.feature .slot,.feature>div>.ph{border-radius:0 var(--r-xl) var(--r-xl) var(--r-xl)}
.mkt{border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 0;min-height:440px}
.mkt h3{font-size:30px;font-weight:600}
.svc{border-radius:var(--r-lg);border-color:transparent;box-shadow:0 1px 0 var(--line)}
.svc:hover{box-shadow:0 26px 50px -30px rgba(12,34,56,.5)}
.svc .ph{border-radius:var(--r-lg) var(--r-lg) 0 0}
.cta-band{border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 0}
.cred b{font-weight:600}
.c-card{border-radius:0 var(--r-xl) var(--r-xl) var(--r-xl)}
.c-card .em-line{font-weight:600}
.process div::before{font-weight:600}
.faq summary{font-stretch:100%}
.ft .em{font-stretch:100%;font-weight:600}
@media (max-width:640px){
  .hero{min-height:calc(100svh - 120px)}
  .hero .wrap{padding-block:110px 64px}
  .sec{padding-block:84px}
  .sec-head{margin-bottom:40px}
  .mkt{min-height:320px}
  :root{--r-xl:36px}
}

/* v3.3: real BMC media, team, testimonials */
.pic{border-radius:0 var(--r-xl) var(--r-xl) var(--r-xl);background:var(--navy) center/cover}
.pic.wide{aspect-ratio:16/7}.pic.std{aspect-ratio:4/3}
.dark .pic{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.plogo{aspect-ratio:16/9;background:#fff;display:grid;place-items:center;padding:28px;border-bottom:1px solid var(--line)}
.plogo img{max-height:110px;max-width:80%;width:auto;object-fit:contain}
.lead2{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:28px}
.lead2 .person{border:0;background:transparent}
.lead2 .hs{aspect-ratio:1/1;border-radius:0 var(--r-xl) var(--r-xl) var(--r-xl);background:var(--concrete) center/cover}
.lead2 .tx{padding:20px 4px 0}
.lead2 h3{font-size:26px}
.team-h{font-size:clamp(28px,3vw,40px);font-weight:300;margin:88px 0 8px;color:var(--navy)}
.groups{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 56px;margin-top:32px}
.grp .eyebrow{margin-bottom:18px;display:block}
.mems{display:grid;gap:14px}
.mem{display:flex;align-items:center;gap:18px;background:#fff;border-radius:999px 24px 24px 999px;padding:10px 22px 10px 10px}
.mem img,.mem .ini{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.mem .ini{display:grid;place-items:center;background:var(--navy);color:#fff;font:600 22px/1 var(--head);letter-spacing:.02em}
.mem h4{font-size:18px;font-weight:600;color:var(--navy)}
.mem p{margin:2px 0 0;font-size:15px;color:var(--steel)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.q{margin:0;background:var(--concrete);border-radius:0 var(--r-lg) var(--r-lg) var(--r-lg);padding:36px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;position:relative}
.q::before{content:"\201C";position:absolute;top:6px;left:26px;font:300 88px/1 var(--head);color:var(--signal)}
.q blockquote{margin:28px 0 0}
.q blockquote p{font:400 19px/1.5 var(--head);color:var(--navy);margin:0}
.q figcaption b{display:block;color:var(--navy);font-weight:700}
.q figcaption span{font-size:14.5px;color:var(--steel)}
.menu-btn{display:none;align-items:center;gap:10px}
.menu-btn .bars{width:18px;height:12px;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat}
@media (max-width:1080px){.quotes{grid-template-columns:1fr}.groups{grid-template-columns:1fr}}
@media (max-width:960px){.menu-btn{display:inline-flex}}
@media (max-width:640px){.lead2{grid-template-columns:1fr 1fr;gap:16px}.lead2 h3{font-size:19px}.pic.wide{aspect-ratio:4/3}.team-h{margin-top:56px}.q{padding:30px 24px}}

.phead h1{font-weight:300}
.phead h1 strong{font-weight:700}

/* v3.4: motion and depth */
.hdr{transition:box-shadow .3s,background .3s}
.hdr.scrolled{box-shadow:0 10px 30px -18px rgba(12,34,56,.35)}
.hero video{transform:scale(1.06);will-change:transform}
.hero .scroll-cue{position:absolute;left:50%;bottom:26px;z-index:3;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.55);border-radius:20px}
.hero .scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--signal);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.stats{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 100% 0%,rgba(236,85,18,.18),transparent 60%)}
.stats .wrap{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding-block:84px}
.stat{padding:8px 28px;border-left:1px solid rgba(255,255,255,.14)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font:300 clamp(48px,5.4vw,84px)/1 var(--head);letter-spacing:-.03em}
.stat b em{font-style:normal;color:var(--signal);font-weight:600}
.stat span{display:block;margin-top:14px;font-size:15.5px;color:#b9c6d2;max-width:22ch}
.stat i{display:block;width:44px;height:3px;background:var(--signal);margin-top:20px;transform-origin:left}
.svc{overflow:hidden}
.svc .ph{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.svc:hover .ph{transform:scale(1.07)}
.mkt{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.mkt:hover{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgba(12,34,56,.6)}
.mkt::after{content:"\2192";position:absolute;right:24px;top:24px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#fff;font:600 20px/1 var(--body);transition:background .3s,transform .3s}
.mkt:hover::after{background:var(--signal);transform:rotate(-45deg)}
.btn{transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.process{border-top-color:transparent;position:relative}
.process::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:rgba(255,255,255,.18)}
.process::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .2s}
.process.in::after,html:not(.fx) .process::after{transform:scaleX(1)}
/* reveal states (only when motion is allowed and JS is running) */
/* photos, headshots and logos are never hidden; only cards and headings ease in */
.fx .pic,.fx .sd-media .ph,.fx .lead2 .hs{transform:scale(1.03);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.fx .fact,.fx .q,.fx .mem,.fx .cred,.fx .stat,.fx .cta-band,.fx .sec-head{opacity:0;transform:translateY(22px);transition:opacity .7s ease var(--dl,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--dl,0ms)}
.fx .mkt,.fx .svc,.fx .proj{transform:translateY(22px);transition:transform .8s cubic-bezier(.2,.7,.2,1) var(--dl,0ms)}
.fx .in{opacity:1!important;transform:none!important}
.fx .stat i{transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--dl,0ms) + .3s)}
.fx .stat.in i{transform:scaleX(1)}
@media (max-width:960px){.stats .wrap{grid-template-columns:1fr 1fr;gap:36px 0}.stat:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:640px){.stats .wrap{padding-block:64px}.stat{padding:0 16px}.stat span{font-size:14.5px}.hero .scroll-cue{display:none}}
@media (prefers-reduced-motion:reduce){.hero .scroll-cue::after{animation:none}}
.fx .mkt.in:hover{transform:translateY(-6px)!important}
.stat b span{display:inline;font:inherit;color:inherit;margin:0;max-width:none}

/* v3.5: tighter mobile rhythm */
@media (max-width:640px){
  .sec{padding-block:56px}
  .sec-head{margin-bottom:28px}
  .sec-head h2{font-size:clamp(34px,10vw,44px)}
  .stats .wrap{padding-block:44px;gap:28px 0}
  .stat b{font-size:44px}
  .stat span{margin-top:8px}
  .stat i{margin-top:12px}
  .phead .wrap{padding-block:72px 56px}
  .hero .wrap{padding-block:72px 56px}
  .hero{min-height:auto}
  .mkt{min-height:260px}
  .mkt h3{font-size:24px}
  .process{margin-top:40px!important}
  .process div{padding:22px 0 0}
  .cta-band{padding:36px 24px}
  .team-h{margin-top:40px}
  .groups{gap:28px;margin-top:20px}
  .logos,.aff{gap:10px}
  .logos div{height:96px;padding:12px}
  .aff div{height:104px}
  .svc-detail{gap:48px}
  .sd{gap:22px}
  .feature{gap:28px}
  .faq summary{padding:18px 52px 18px 20px;font-size:17px}
  .sec.alt + .sec,.sec + .sec.alt{padding-top:56px}
}