/* specialb-v2 home experience */

:root{
  --sb-navy:#0b3a6e;
  --sb-navy-2:#082a50;
  --sb-ink:#0b1220;
  --sb-muted:#5b6b7f;
  --sb-line:rgba(15,23,42,.12);
  --sb-paper:#fff;
  --sb-soft:#f6f8fb;
  --sb-softblue:#eef5ff;
  --sb-pearl:#fbf8f1;
  --sb-shadow:0 22px 70px rgba(2,6,23,.14);
}

.fullbleed{width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);}
.section{padding:64px 0;}
.section-tight{padding:52px 0;}
.section-soft{background:var(--sb-soft); border-top:1px solid var(--sb-line); border-bottom:1px solid var(--sb-line)}
.section-navy{background:linear-gradient(180deg, var(--sb-navy), var(--sb-navy-2)); color:#e8f0ff;}

.section-kicker{
  font-size:12px;
  letter-spacing:.14em;
  font-weight:900;
  text-transform:uppercase;
  color:var(--sb-navy);
  margin-bottom:10px;
}
.section-kicker-light{color:#d9e7ff}

.hero-mega{position:relative; padding:84px 0 58px;}
.hero-mega.fullbleed{padding-left:0; padding-right:0;}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(1.05);}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 80% 18%, rgba(244,248,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(8,12,18,.48), rgba(8,12,18,.22) 26%, rgba(8,12,18,.72));
}
.hero-inner{position:relative; z-index:2; display:grid; gap:24px;}
.hero-stage{display:grid; grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr); gap:20px; align-items:stretch}

.hero-card{
  width:min(100%, 640px);
  overflow:hidden;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.6);
  border-radius:22px;
  box-shadow:var(--sb-shadow);
  backdrop-filter: blur(12px);
}
.hero-brand-band{
  position:relative;
  min-height:132px;
  display:grid;
  place-items:center;
  padding:18px;
  background:#050608;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-brand-band-core{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:144px;
  height:92px;
}
.hero-brand-gif{
  width:106px;
  height:106px;
  display:block;
  object-fit:contain;
  transform:translateY(-8px);
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.44));
}
.hero-card-content{padding:22px 22px 20px}
.hero-kicker{font-size:12px; letter-spacing:.14em; font-weight:900; text-transform:uppercase; color:#3f4c60; opacity:.9}
.hero-title{font-size:58px; line-height:.98; font-weight:900; letter-spacing:-.035em; margin:10px 0 14px; color:var(--sb-ink)}
.hero-lead{font-size:18px; line-height:1.68; color:#334155; margin:0 0 18px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-cta .btn{min-width:210px}
.hero-card .btn:visited{color:#fff}
.hero-card .btn-ghost{color:#0f172a}
.hero-card .btn-ghost:visited{color:#0f172a}

.hero-sidekick{display:block}
.hero-sidekick-shell{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:28px 28px 26px;
  border-radius:30px;
  background:
    linear-gradient(180deg, rgba(8,15,27,.72), rgba(8,15,27,.58)),
    radial-gradient(520px 220px at 18% 20%, rgba(84,206,241,.18), transparent 58%);
  border:1px solid rgba(226,232,240,.22);
  box-shadow:0 28px 80px rgba(2,6,23,.24);
  backdrop-filter: blur(14px);
}
.hero-sidekick h2{font-size:36px; line-height:1.05; margin:0 0 12px; color:#f8fbff}
.hero-sidekick p{margin:0; color:rgba(232,240,255,.84); line-height:1.72; font-size:17px}
.hero-sidekick-metrics{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:26px}
.hero-sidekick-metric{
  padding:16px 14px;
  border-radius:18px;
  border:1px solid rgba(226,232,240,.16);
  background:rgba(255,255,255,.06);
}
.hero-sidekick-metric strong{display:block; font-size:20px; color:#fff}
.hero-sidekick-metric span{display:block; font-size:12px; color:rgba(232,240,255,.76); margin-top:5px}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:36px;
}
.benefit{
  position:relative;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.6);
  border-radius:18px;
  padding:16px 14px 14px;
  box-shadow:0 18px 60px rgba(2,6,23,.08);
}
.benefit::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(11,58,110,.95), rgba(84,206,241,.75));
}
.benefit strong{display:block; font-size:16px; color:#0f172a}
.benefit span{display:block; font-size:13px; color:var(--sb-muted); margin-top:8px; line-height:1.55}

.alt{display:grid; grid-template-columns:1.06fr .94fr; gap:22px; align-items:center}
.alt.reverse .photo{order:2}
.alt.reverse .copy{order:1}
.alt .photo{
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--sb-line);
  box-shadow:0 24px 70px rgba(2,6,23,.12);
  min-height:332px;
  position:relative;
}
.alt .photo img{width:100%; height:100%; object-fit:cover; object-position:center; display:block}
.alt .photo .overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:16px 18px;
  background:linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.66));
  color:#fff;
  font-weight:800;
}
.alt .copy{
  background:#fff;
  border:1px solid var(--sb-line);
  border-radius:24px;
  padding:26px 24px;
  box-shadow:0 20px 60px rgba(2,6,23,.07);
}
.copy-pearl{background:linear-gradient(180deg, rgba(251,248,241,.92), #fff)}
.copy-ice{background:linear-gradient(180deg, rgba(238,245,255,.86), #fff)}
.copy-softblue{background:linear-gradient(180deg, rgba(242,247,255,.92), #fff)}
.alt .copy h2{margin:0 0 12px; font-size:38px; line-height:1.05; font-weight:900; letter-spacing:-.02em}
.alt .copy p{margin:0 0 14px; color:#334155; line-height:1.72; font-size:17px}
.alt .copy ul{margin:12px 0 0; padding-left:20px; color:#334155}
.alt .copy li{margin:7px 0; line-height:1.65}

.process-list{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:10px;
}
.process-list li{
  margin:0;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(11,58,110,.06);
  border:1px solid rgba(11,58,110,.1);
}

.navy-split{display:grid; grid-template-columns:.88fr 1.12fr; gap:24px; align-items:center}
.navy-split .portrait{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(226,232,240,.18);
  box-shadow:0 22px 60px rgba(2,6,23,.35);
}
.navy-split .portrait img{width:100%; height:100%; object-fit:cover; display:block}
.navy-split h2{font-size:40px; margin:0 0 12px; font-weight:900; letter-spacing:-.02em}
.navy-split p{color:rgba(232,240,255,.88); line-height:1.72; font-size:17px}
.navy-split-top{align-items:start}
.navy-followup{margin-top:16px}
.kpis{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:18px}
.kpi{
  border:1px solid rgba(226,232,240,.18);
  background:rgba(255,255,255,.06);
  border-radius:18px;
  padding:14px 14px;
}
.kpi strong{display:block; font-size:20px}
.kpi span{display:block; font-size:12px; color:rgba(232,240,255,.8); margin-top:4px}

.testimonials-section{position:relative}
.testimonials-head{
  display:grid;
  grid-template-columns:minmax(0, .96fr) minmax(0, 1.04fr);
  gap:24px;
  align-items:end;
  margin-bottom:18px;
}
.testimonials-lead{
  margin:0;
  color:#475569;
  font-size:18px;
  line-height:1.7;
  max-width:620px;
}
.quotes{display:grid; grid-template-columns:1.28fr .86fr .86fr; gap:16px}
.quote{
  margin:0;
  background:#fff;
  border:1px solid var(--sb-line);
  border-radius:22px;
  padding:18px;
  box-shadow:0 18px 50px rgba(2,6,23,.06);
}
.quote blockquote{margin:0; font-size:18px; line-height:1.7; color:#0f172a}
.quote figcaption{margin-top:14px; color:var(--sb-muted); font-size:13px}
.quote-featured{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(242,247,255,.96));
  padding:24px;
}
.quote-featured blockquote{font-size:28px; line-height:1.28; font-weight:900; letter-spacing:-.02em}

.contact-final{position:relative; overflow:hidden}
.contact-final::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(720px 320px at 14% 18%, rgba(84,206,241,.12), transparent 55%),
    url('/assets/img/source/background.svg') center/cover no-repeat;
  opacity:.18;
}
.contact-final .inner{position:relative; z-index:2}
.contact-copy{padding-right:10px}
.contact-pill-row{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 20px}
.contact-pill{
  display:inline-flex;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(226,232,240,.16);
  font-weight:700;
  font-size:12px;
}
.contact-detail-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-top:6px}
.contact-detail-card,
.contact-location-card{
  display:block;
  padding:16px 16px 14px;
  border-radius:20px;
  border:1px solid rgba(226,232,240,.16);
  background:rgba(255,255,255,.06);
  color:#e8f0ff;
  text-decoration:none;
}
.contact-detail-card strong,
.contact-location-card strong{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; color:#dbe8ff}
.contact-detail-card span{font-size:18px; line-height:1.4}
.contact-location-card{margin-top:12px}
.contact-address{margin:0; color:rgba(232,240,255,.78); line-height:1.65}

.box{border:1px solid var(--sb-line); border-radius:24px; padding:22px; box-shadow:0 26px 70px rgba(2,6,23,.18)}
.contact-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.06));
  border-color:rgba(226,232,240,.2);
}
.contact-panel .btn-ghost{color:#e8f0ff; border-color:rgba(226,232,240,.24); background:rgba(255,255,255,.04)}
.contact-panel .btn-ghost:visited{color:#e8f0ff}
.contact-panel .btn-ghost:hover{background:rgba(255,255,255,.08)}
.contact-panel-title{margin:0 0 8px; font-size:28px}
.contact-panel-intro{color:rgba(232,240,255,.78); font-size:13px; margin:0 0 14px}
.form{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form .full{grid-column:1 / -1}
.form label{display:block; font-weight:800; font-size:12px; margin:0 0 6px}
.form input,.form textarea,.form select{
  width:100%;
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(226,232,240,.22);
  background:rgba(255,255,255,.07);
  color:#e8f0ff;
}
.form textarea{min-height:120px; resize:vertical}
.form select option{color:#0b1220}
.form .hint{font-size:11px; color:rgba(232,240,255,.75)}
.form-actions{display:flex; gap:10px; flex-wrap:wrap}
.form-actions .btn{flex:1 1 220px}

@media (max-width: 1200px){
  .hero-stage{grid-template-columns:minmax(0, 1fr) minmax(0, .84fr)}
  .hero-title{font-size:50px}
  .hero-sidekick-shell{padding:28px}
  .hero-sidekick h2{font-size:32px}
  .alt .copy h2{font-size:34px}
}

@media (max-width: 980px){
  .fullbleed{width:100%; margin-left:0; margin-right:0;}
  .section{padding:56px 0}
  .hero-mega{padding:56px 0 42px}
  .hero-stage{grid-template-columns:1fr}
  .hero-card{width:100%; max-width:640px}
  .hero-sidekick{display:none}
  .benefits-grid{grid-template-columns:1fr 1fr; margin-top:0}
  .alt,.alt.reverse,.navy-split,.testimonials-head{grid-template-columns:1fr}
  .alt.reverse .photo,.alt.reverse .copy{order:initial}
  .quotes{grid-template-columns:1fr}
  .quote-featured blockquote{font-size:24px}
  .kpis{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .form{grid-template-columns:1fr}
  .contact-copy{padding-right:0}
}

@media (max-width: 720px){
  .section{padding:48px 0}
  .hero-mega{padding:52px 0 38px}
  .hero-brand-band{min-height:112px; padding:16px}
  .hero-brand-band-core{width:126px; height:82px}
  .hero-brand-gif{width:94px; height:94px}
  .hero-brand-gif{transform:translateY(-7px)}
  .hero-card-content{padding:20px}
  .hero-title{font-size:40px}
  .hero-lead{font-size:17px}
  .benefits-grid{gap:12px}
  .benefit{padding:16px}
  .alt .photo{min-height:260px}
  .alt .copy{padding:22px 20px}
  .alt .copy h2,.navy-split h2{font-size:30px}
  .kpis,.contact-detail-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 560px){
  .section{padding:40px 0}
  .hero-mega{padding:36px 0 28px}
  .hero-card{border-radius:22px}
  .hero-brand-band{min-height:98px; padding:14px}
  .hero-brand-band-core{width:112px; height:72px}
  .hero-brand-gif{width:82px; height:82px}
  .hero-brand-gif{transform:translateY(-6px)}
  .hero-card-content{padding:18px 16px 16px}
  .hero-title{font-size:29px; line-height:1.02}
  .hero-lead{font-size:15px; line-height:1.55}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%; min-width:0}
  .benefits-grid{grid-template-columns:1fr; gap:12px}
  .benefit strong{font-size:15px}
  .alt,.navy-split{gap:14px}
  .alt .photo{min-height:220px}
  .alt .photo .overlay{padding:12px}
  .alt .copy h2,.navy-split h2{font-size:26px}
  .quote-featured blockquote{font-size:22px}
  .kpis,.contact-detail-grid{grid-template-columns:1fr}
  .box{border-radius:20px; padding:18px 16px}
  .form-actions{display:grid}
  .form-actions .btn{width:100%; flex:1 1 auto}
}

@media (max-width: 400px){
  .hero-brand-band{min-height:88px; padding:12px}
  .hero-brand-band-core{width:100px; height:66px}
  .hero-brand-gif{width:74px; height:74px}
  .hero-brand-gif{transform:translateY(-5px)}
  .hero-card-content{padding:16px 14px 14px}
  .hero-title{font-size:27px}
  .hero-kicker,.section-kicker{font-size:11px}
  .alt .copy h2,.navy-split h2{font-size:24px}
  .benefit{padding:14px}
}