/* ============================================================
   ABOUT — Consolidated Styles (deduped + organized)
   Scope: #about only
   Rule: if a selector repeats, the LOWER one wins (CSS order).
   Keep this whole block together for upkeep.
============================================================ */


/* ============================================================
   1) SECTION BACKGROUND (soft sky wash)
============================================================ */
section#about.about.section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:transparent;
}
section#about.about.section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(79,143,214,.14), rgba(255,255,255,0) 60%),
    radial-gradient(860px 520px at 82% 22%, rgba(185,219,255,.18), rgba(255,255,255,0) 62%),
    radial-gradient(1100px 760px at 50% 105%, rgba(2,62,138,.10), rgba(255,255,255,0) 64%),
    linear-gradient(120deg, #F7FBFF 0%, #EAF4FF 35%, #D7ECFF 100%);
  opacity:.95;
}
section#about.about.section > *{
  position:relative;
  z-index:1;
}


/* ============================================================
   2) GLASS SURFACES (main right card + form wrapper)
   Note: this is the “base recipe”. Later sections may override.
============================================================ */
#about .content,
#about .about-form-wrapper{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(6,30,37,.10);
  border-radius:18px;
  box-shadow:
    0 18px 42px rgba(6,30,37,.10),
    0 2px 10px rgba(6,30,37,.06);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#about .content{ padding:clamp(18px, 2.2vw, 28px); }
#about .about-form-wrapper{ padding:clamp(18px, 2.2vw, 26px); }


/* ============================================================
   3) LEFT COLUMN (desktop-only surface + legacy service tiles)
   Note: If you switch to the new “Affiliated Entities” markup,
         see Section 9 (sda-entities).
============================================================ */
#about .desktop-only{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(6,30,37,.08);
  border-radius:18px;
  padding:clamp(14px, 2vw, 20px);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#about .service-grid .service-item{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(6,30,37,.08);
  border-radius:14px;
}
#about img.rounded-4{
  box-shadow:0 18px 44px rgba(6,30,37,.16);
}


/* ============================================================
   4) BUTTONS — “Victoria Register” sweep (LEFT ➜ RIGHT)
   Applies to:
   - #about .btn-contact (Talk to Our Team)
   - #about .btn-primary (Submit)
============================================================ */
#about .btn-contact,
#about .btn-primary{
  --vr-red:#B53028;

  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:clamp(.78rem, .55vw + .68rem, .98rem) clamp(1.15rem, 1vw + .95rem, 1.55rem);
  font-size:clamp(.82rem, .28vw + .76rem, .92rem);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;

  border-radius:12px;
  border:2px solid var(--vr-red);
  background:transparent;
  color:var(--vr-red);
  text-decoration:none;
  cursor:pointer;

  overflow:hidden;     /* required for sweep */
  isolation:isolate;   /* sweep behind text */
  transform:translateZ(0);

  transition:transform 220ms ease, box-shadow 220ms ease, color 220ms ease, border-color 220ms ease;
}
#about .btn-contact::before,
#about .btn-primary::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--vr-red);
  transform:translateX(-105%);
  transition:transform 520ms ease;
  will-change:transform;
}
#about .btn-contact:hover,
#about .btn-primary:hover,
#about .btn-contact:focus-visible,
#about .btn-primary:focus-visible{
  color:#fff !important;
  box-shadow:0 14px 30px rgba(181,48,40,.20);
  transform:translateY(-1px);
  outline:none;
}
#about .btn-contact:hover::before,
#about .btn-primary:hover::before,
#about .btn-contact:focus-visible::before,
#about .btn-primary:focus-visible::before{
  transform:translateX(0%);
}
#about .btn-contact:active,
#about .btn-primary:active{
  transform:translateY(0) scale(.99);
  box-shadow:0 10px 22px rgba(181,48,40,.18);
}
#about button.btn-primary{
  appearance:none;
  -webkit-appearance:none;
}


/* ============================================================
   5) FORM SUBMIT — HARD RESET (kills theme button styles)
   Targets ONLY the About form submit button.
============================================================ */
#about form .text-center > button.btn-primary{
  all:unset !important;
  box-sizing:border-box !important;
  font:inherit !important;
  -webkit-tap-highlight-color:transparent;
}

/* Rebuild submit button (same Victoria sweep) */
#about form .text-center > button.btn-primary{
  --vr-red:#B53028;

  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:clamp(.78rem, .55vw + .68rem, .98rem) clamp(1.15rem, 1vw + .95rem, 1.55rem) !important;
  font-size:clamp(.82rem, .28vw + .76rem, .92rem) !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  line-height:1 !important;

  border-radius:12px !important;
  border:2px solid var(--vr-red) !important;
  background:transparent !important;
  color:var(--vr-red) !important;

  cursor:pointer !important;
  overflow:hidden !important;
  isolation:isolate !important;
  transform:translateZ(0) !important;

  transition:transform 220ms ease, box-shadow 220ms ease, color 220ms ease, border-color 220ms ease !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
#about form .text-center > button.btn-primary::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:var(--vr-red) !important;
  transform:translateX(-105%) !important;
  transition:transform 520ms ease !important;
  will-change:transform !important;
}
#about form .text-center > button.btn-primary:hover,
#about form .text-center > button.btn-primary:focus-visible{
  color:#fff !important;
  box-shadow:0 14px 30px rgba(181,48,40,.20) !important;
  transform:translateY(-1px) !important;
  outline:none !important;
}
#about form .text-center > button.btn-primary:hover::before,
#about form .text-center > button.btn-primary:focus-visible::before{
  transform:translateX(0%) !important;
}
#about form .text-center > button.btn-primary:active{
  transform:translateY(0) scale(.99) !important;
  box-shadow:0 10px 22px rgba(181,48,40,.18) !important;
}


/* ============================================================
   6) RIGHT COLUMN — premium card + clean split between blocks
============================================================ */

/* Override base glass recipe for the right column card (more “premium”) */
#about .col-lg-6 .content{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(16, 38, 84, .08);
  border-radius:22px;
  box-shadow:0 18px 42px rgba(7, 26, 55, .10);
  padding:clamp(22px, 2.2vw, 34px);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* Section break before the 2nd H3 (relies on your HTML order) */
#about .col-lg-6 .content h3 + p + ul + div + h3{
  margin-top:clamp(22px, 3.2vw, 42px) !important;
  padding-top:clamp(18px, 2.6vw, 32px) !important;
  position:relative;
}

/* Soft divider line */
#about .col-lg-6 .content h3 + p + ul + div + h3::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(92%, 520px);
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(181,48,40,0),
    rgba(181,48,40,.32),
    rgba(181,48,40,0)
  );
}

/* Divider tag (base label — overridden later to “One Team”) */
#about .col-lg-6 .content h3 + p + ul + div + h3::after{
  content:"How we deliver";
  position:absolute;
  top:-0.65rem;
  left:50%;
  transform:translateX(-50%);
  padding:.18rem .55rem;

  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(16, 38, 84, .68);

  background:rgba(255,255,255,.78);
  border:1px solid rgba(16, 38, 84, .10);
  border-radius:999px;

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* CTA spacing: reads as “end of section 1” */
#about .col-lg-6 .content .btn-contact{
  margin-top:clamp(.4rem, 1vw, .9rem) !important;
  margin-bottom:clamp(1.6rem, 2.6vw, 2.6rem) !important;
}

/* Heading rhythm */
#about .col-lg-6 .content h3{
  letter-spacing:-0.01em;
  line-height:1.12;
}


/* ============================================================
   7) LIST BACKGROUNDS — apply to BOTH ULs (mini-card)
============================================================ */
#about .col-lg-6 .content ul.mb-4,
#about .col-lg-6 .content h3 + p + ul{
  margin-top:clamp(14px, 1.6vw, 18px) !important;
  padding:clamp(14px, 1.8vw, 18px) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(16, 38, 84, .08) !important;
}


/* ============================================================
   8) DEVICE + ACCESSIBILITY
============================================================ */
@media (max-width: 991.98px){
  #about .content,
  #about .about-form-wrapper,
  #about .desktop-only{
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    background:rgba(255,255,255,.78);
  }
}

@media (prefers-reduced-motion: reduce){
  #about .content,
  #about .about-form-wrapper,
  #about .desktop-only{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  #about .btn-contact,
  #about .btn-primary,
  #about form .text-center > button.btn-primary{
    transition:none !important;
    transform:none !important;
    box-shadow:none !important;
  }

  #about .btn-contact::before,
  #about .btn-primary::before,
  #about form .text-center > button.btn-primary::before{
    transition:none !important;
    transform:none !important;
  }
}


/* ============================================================
   9) OVERRIDES / LATEST CHANGES (bottom wins)
   A) Divider tag: bigger + says “One Team”
   B) Extra space between the pill and the heading
============================================================ */

/* A) Pill label + styling */
#about .col-lg-6 .content h3 + p + ul + div + h3::after{
  content:"One Team" !important;

  font-size:clamp(.86rem, 1.1vw, 1.02rem) !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  padding:.34rem .78rem !important;

  color:rgba(16, 38, 84, .78) !important;
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(16, 38, 84, .12) !important;
  box-shadow:0 10px 24px rgba(7, 26, 55, .10) !important;
}

/* B) Give the second heading more breathing room */
#about .col-lg-6 .content h3 + p + ul + div + h3{
  padding-top:clamp(26px, 4vw, 44px) !important;
}
/* Move the pill up so it doesn’t crowd the heading */
#about .col-lg-6 .content h3 + p + ul + div + h3::after{
  top:-1.05rem !important;
}


/* ============================================================
   10) AFFILIATED ENTITIES (Redesign — Option A)
   Requires HTML markup using:
     .sda-entities, .sda-entity, .sda-entity-icon, .sda-entity-text
   Scoped to: #about .desktop-only
============================================================ */
#about .desktop-only .sda-entities{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(12px, 1.3vw, 16px);
  margin-top:clamp(10px, 1.2vw, 14px);
}
#about .desktop-only .sda-entity{
  --ink: rgba(16, 38, 84, .90);
  --muted: rgba(16, 38, 84, .12);
  --glass: rgba(255,255,255,.62);
  --red: #B53028;

  display:flex;
  align-items:center;
  gap:clamp(12px, 1.2vw, 14px);

  padding:clamp(14px, 1.4vw, 18px);
  border-radius:16px;
  background:var(--glass);
  border:1px solid var(--muted);
  box-shadow:0 10px 22px rgba(7, 26, 55, .08);
  text-decoration:none;

  transition:transform 220ms ease, box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
  transform:translateZ(0);
}
#about .desktop-only .sda-entity-icon{
  width:clamp(46px, 3.2vw, 60px);
  height:clamp(46px, 3.2vw, 60px);
  border-radius:14px;

  display:grid;
  place-items:center;

  background:rgba(181,48,40,.08);
  border:1px solid rgba(181,48,40,.18);
}
#about .desktop-only .sda-entity-icon i{
  font-size:clamp(1.35rem, 1.0rem + 1.1vw, 1.85rem);
  color:var(--red);
  line-height:1;
}
#about .desktop-only .sda-entity-text{
  font-weight:800;
  letter-spacing:-0.01em;
  color:rgba(16, 38, 84, .88);
  font-size:clamp(1.02rem, .95rem + .35vw, 1.18rem);
  line-height:1.12;
}
@media (hover:hover){
  #about .desktop-only .sda-entity:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 34px rgba(7, 26, 55, .12);
    background:rgba(255,255,255,.70);
    border-color:rgba(16, 38, 84, .16);
  }
}
#about .desktop-only .sda-entity:focus-visible{
  outline:3px solid rgba(181,48,40,.20);
  outline-offset:2px;
}
@media (max-width: 575.98px){
  #about .desktop-only .sda-entities{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  #about .desktop-only .sda-entity{ transition:none; }
}


/* ============================================================
   11) MOBILE POLISH — right column lists + type
   Goal: better readability + cleaner checklist layout on phones
============================================================ */
@media (max-width: 575.98px){
  #about .col-lg-6 .content{
    padding:18px !important;
    border-radius:18px !important;
  }

  #about .col-lg-6 .content h3{
    font-size:clamp(1.55rem, 4.8vw, 1.95rem) !important;
    line-height:1.12 !important;
    margin-bottom:.75rem !important;
  }
  #about .col-lg-6 .content p{
    font-size:clamp(1.02rem, 3.6vw, 1.12rem) !important;
    line-height:1.55 !important;
    margin-bottom:1rem !important;
  }

  #about .col-lg-6 .content ul.mb-4,
  #about .col-lg-6 .content h3 + p + ul{
    padding:14px !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.52) !important;
    border:1px solid rgba(16, 38, 84, .10) !important;
  }

  #about .col-lg-6 .content ul li{
    display:grid !important;
    grid-template-columns:22px 1fr !important;
    column-gap:10px !important;
    align-items:start !important;
    margin:0 0 12px 0 !important;
  }
  #about .col-lg-6 .content ul li:last-child{ margin-bottom:0 !important; }

  #about .col-lg-6 .content ul li i{
    margin:0 !important;
    font-size:1.05rem !important;
    line-height:1.2 !important;
    transform:translateY(2px);
  }
  #about .col-lg-6 .content ul li span{
    display:block !important;
    font-size:clamp(.98rem, 3.4vw, 1.08rem) !important;
    line-height:1.5 !important;
  }

  #about .col-lg-6 .content .btn-contact{
    width:100% !important;
    max-width:360px;
  }
}

/* =========================================
   SDA About: image + caption as one unit
   ========================================= */

#sda-about .sda-about-media{
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08), 0 10px 24px rgba(0,0,0,0.10);
  background: #fff;
}

#sda-about .sda-about-media img{
  display: block;
  width: 100%;
  height: auto;

  /* your look */
  filter: brightness(1.10) contrast(1.03) saturate(1.05);

  /* IMPORTANT: neutralize any older “absolute fill” rules */
  position: static !important;
  top: auto !important;
  left: auto !important;
  object-fit: cover; /* safe even when height:auto */
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

#sda-about .sda-about-caption{
  padding: 0.95rem 1.1rem;
  text-align: center;
  font-style: italic;
  font-size: clamp(0.92rem, 0.9vw, 1.05rem);
  line-height: 1.4;
  color: rgba(30,30,30,0.88);

  background: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(0,0,0,0.08);
}