/* About page homepage-consistent styling
   This file is loaded only on about-us.html.
   It keeps the existing HTML/format and only changes the visual styling. */

:root{
  --bw-blue:#062b61;
  --bw-dark:#031b40;
  --bw-red:#e21d2f;
  --bw-light:#f6f8fc;
}

body{
  background:#fff;
}

/* Page hero / first banner */
main > section:first-of-type,
section:first-of-type,
.page-header,
.page-hero,
.hero,
.about-hero,
.inner-hero{
  background:
    linear-gradient(90deg,rgba(3,27,64,.94),rgba(3,27,64,.68)),
    url('../images/hero/hero.jpg') center/cover no-repeat !important;
  color:#fff !important;
  position:relative;
}

main > section:first-of-type h1,
section:first-of-type h1,
.page-header h1,
.page-hero h1,
.hero h1,
.about-hero h1,
.inner-hero h1{
  color:#fff !important;
  text-transform:uppercase;
  font-weight:950 !important;
  letter-spacing:-.035em;
  text-shadow:0 3px 18px rgba(0,0,0,.28);
}

main > section:first-of-type p,
section:first-of-type p,
.page-header p,
.page-hero p,
.hero p,
.about-hero p,
.inner-hero p{
  color:#e5eefc !important;
}

/* Typography to match homepage */
main h1,
main h2,
main h3{
  font-weight:950 !important;
}

main h2,
main h3{
  color:var(--bw-blue) !important;
}

main p,
main li{
  line-height:1.65;
}

/* Existing content cards/boxes */
main .card,
main .box,
main .feature,
main .feature-box,
main .about-box,
main .about-card,
main .value-card,
main .why-card,
main .service-card,
main .content-card,
main [class*="card"],
main [class*="box"]{
  border-radius:16px !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 16px 36px rgba(15,23,42,.10) !important;
  background:#fff;
}

/* Existing image blocks */
main img{
  border-radius:14px;
  box-shadow:0 14px 34px rgba(15,23,42,.12);
}

/* Homepage-style red accents under section headings */
main h2::after{
  content:"";
  display:block;
  width:54px;
  height:4px;
  background:var(--bw-red);
  border-radius:99px;
  margin-top:12px;
}

/* Buttons */
main .btn,
main a.btn,
main button,
main input[type="submit"],
main a[class*="button"],
main a[class*="cta"]{
  border-radius:10px !important;
  font-weight:950 !important;
  text-transform:uppercase;
  letter-spacing:.03em;
  box-shadow:0 12px 28px rgba(226,29,47,.24) !important;
}

/* Blue/callout areas */
main .blue,
main .blue-box,
main .callout,
main .cta,
main .cta-section,
main [class*="blue"],
main [class*="callout"],
main [class*="cta"]{
  background:
    radial-gradient(circle at top left,rgba(255,255,255,.16),transparent 34%),
    linear-gradient(135deg,var(--bw-dark),var(--bw-blue) 58%,#0b3d8a) !important;
  color:#fff !important;
}

main .blue h2,
main .blue h3,
main .blue-box h2,
main .blue-box h3,
main .callout h2,
main .callout h3,
main .cta h2,
main .cta h3,
main .cta-section h2,
main .cta-section h3,
main [class*="blue"] h2,
main [class*="blue"] h3,
main [class*="callout"] h2,
main [class*="callout"] h3,
main [class*="cta"] h2,
main [class*="cta"] h3{
  color:#fff !important;
}

main .blue p,
main .blue-box p,
main .callout p,
main .cta p,
main .cta-section p,
main [class*="blue"] p,
main [class*="callout"] p,
main [class*="cta"] p{
  color:#dbeafe !important;
}

/* Icons */
main .icon,
main [class*="icon"]{
  color:var(--bw-red) !important;
}