:root {
  --navy: #0B1C3D;
  --red: #C1121F;
  --white: #FFFFFF;
  --black: #111111;
  --gray-100:#F3F4F6;
  --gray-300:#D1D5DB;
  --gray-600:#4B5563;
  --offwhite:#FAFAFA;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: var(--black); }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

.topbar { background: var(--black); color: var(--white); font-size: 14px; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; height: 42px; }
.topbar .cta {
  background: var(--red); color: var(--white); padding: 6px 12px; border-radius: 8px; font-weight: 600;
}
.topbar .cta:hover { opacity: .9; text-decoration: none; }

.header { position: sticky; top: 0; background: var(--offwhite); border-bottom: 1px solid var(--gray-300); z-index: 50; transition: box-shadow .2s, background .2s; }
.header.scrolled { box-shadow: 0 8px 24px rgba(0,0,0,.08); background:white; }


.nav .links a { font-weight:600; color: var(--black); padding: 8px 10px; border-radius: 8px; }
.nav .links a:not(.primary-cta):hover { background: var(--gray-100); text-decoration:none; }



.hero { background: linear-gradient(180deg, var(--navy), #15254d); color: white; padding: 72px 0 48px; }
.hero h1 { font-size: clamp(28px, 5vw, 44px); margin: 0 0 12px; }
.hero p.lead { font-size: clamp(16px, 2.5vw, 20px); opacity: .95; max-width: 820px; }
.hero .cta-row { display:flex; gap:12px; margin-top: 20px; flex-wrap: wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; padding: 12px 16px; border-radius: 10px; font-weight:700; border: 2px solid transparent; cursor:pointer; }
.btn.primary { background: var(--red); color: white; }
.btn.primary:hover { filter: brightness(.95); }
.btn.secondary { background: transparent; color: white; border-color: rgba(255,255,255,.35); }
.btn.secondary:hover { background: rgba(255,255,255,.08); }

.section { padding: 56px 0; background: white; }
.section.alt { background: var(--gray-100); }
.kpis { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.kpi { background:white; border:1px solid var(--gray-300); border-radius: 14px; padding:18px; text-align:center; }
.kpi .number { font-size: 36px; font-weight: 900; color: var(--navy); }
.cards3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.card { background:white; border:1px solid var(--gray-300); border-radius: 14px; padding:18px; }
.card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.card h3 { margin-top: 0; }
.badges { display:flex; gap:12px; flex-wrap:wrap; }
.badge { border:1px dashed var(--gray-300); padding:8px 10px; border-radius: 999px; font-size: 14px; color: var(--gray-600); background:white; }

.grid2 { display:grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items:center; }
.process { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.step { background:white; border:1px solid var(--gray-300); border-radius: 14px; padding:18px; text-align:center; font-weight:600; }

.accordion .item { border-bottom:1px solid var(--gray-300); }
.accordion .head { cursor:pointer; display:flex; justify-content:space-between; padding: 14px 0; font-weight:700; }
.accordion .body { display:none; padding: 0 0 14px; color: var(--gray-600); }
.accordion .item.open .body { display:block; }

.footer { background: #F3F4F6; color: #000000; padding: 40px 0; margin-top: 40px; border-top: 1px solid var(--gray-300); }
.footer a { color: #000000; }
.footer .cols { display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.footer h4 { margin-top:0; }

.cta-rail { position: fixed; right: 20px; bottom: 20px; display:flex; flex-direction:column; gap:10px; z-index: 60; }
.cta-rail a { box-shadow: 0 6px 16px rgba(0,0,0,.15); }

.notice { background: #fff8e1; border:1px solid #ffe082; padding: 12px 14px; border-radius: 10px; }

@media (max-width: 960px) {
  .mobile-drawer { display:block; position: fixed; top:0; bottom:0; right:-100%; width: 80vw; background:white; z-index: 90; padding:16px; transition:right .25s; border-left:1px solid var(--gray-300); }

  .cards3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .process { grid-template-columns: repeat(2,1fr); }
  .footer .cols { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
  .process { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; }
}

/* Animations */
.reveal { opacity: 0; transform: translateY(10px); transition: all .5s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Modal */
.modal-backdrop { position: fixed; inset:0; background: rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:80; }
.modal { width: min(720px, 92vw); background:white; border-radius: 14px; overflow:hidden; border:1px solid var(--gray-300); }
.modal header { background: var(--navy); color:white; padding: 14px 18px; font-weight:800; }
.modal .content { padding: 18px; }
.modal-backdrop.show { display:flex; }

/* Forms */
.form-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.form-grid .full { grid-column: 1/-1; }
input, select, textarea { width:100%; padding: 12px 12px; border:1px solid var(--gray-300); border-radius: 10px; font-size: 16px; }
label { font-weight: 700; font-size: 14px; margin-bottom: 6px; display:block; }
.help { font-size: 12px; color: var(--gray-600); }
button { font-family: inherit; }
.dropzone { padding: 16px; border: 2px dashed var(--gray-300); border-radius: 10px; text-align:center; background: var(--gray-100); }
.file-list { margin-top:10px; font-size: 14px; }

/* Before/After slider */
.ba-wrap { position: relative; overflow: hidden; border-radius: 14px; border:1px solid var(--gray-300); }
.ba-wrap img { width:100%; display:block; }
.ba-handle { position:absolute; top:0; bottom:0; width: 2px; background: var(--red); left:50%; }
.ba-input { position:absolute; left:0; right:0; bottom:10px; width:100%; -webkit-appearance:none; background: transparent; }
.ba-input::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background: var(--red); border:2px solid white; box-shadow: 0 0 0 2px var(--red); }

/* Mobile nav */
.mobile-toggle { display:none; }
@media (max-width: 960px) {
  .mobile-drawer { display:block; position: fixed; top:0; bottom:0; right:-100%; width: 80vw; background:white; z-index: 90; padding:16px; transition:right .25s; border-left:1px solid var(--gray-300); }

  
  .mobile-toggle { display:block; background: var(--navy); color:white; padding:8px 12px; border-radius:8px; }
  .mobile-drawer { position: fixed; top:0; bottom:0; right:-100%; width: 80vw; background:white; z-index: 90; padding:16px; transition:right .25s; border-left:1px solid var(--gray-300); }
  .mobile-drawer.open { right:0; }
  .mobile-drawer a { display:block; padding:12px; border-bottom:1px solid var(--gray-300); color:var(--black); }
}

.nav .brand img { height: 78px; width: auto; display:block; }

/* Navbar fixes */
.mobile-drawer { display:none; }


/* --- NAVBAR LAYOUT (authoritative) --- */
.nav { height: 92px; display:flex; align-items:center; justify-content:flex-start; gap:24px; flex-wrap:nowrap; }
.nav .brand { flex: 0 0 auto; display:flex; align-items:center; }
.nav .links { margin-left: auto !important; display: flex !important; align-items: center; gap: 24px; white-space: nowrap; }
.nav .links a { font-weight:600; color: var(--black); padding: 8px 10px; border-radius: 8px; }
.nav .links a:not(.primary-cta):hover { background: var(--gray-100); text-decoration:none; }
.nav .links a.primary-cta { background: var(--navy); color: var(--white) !important; padding: 10px 14px; border-radius: 10px; font-weight:700; }
.nav .links a.primary-cta:hover { background:#0a1730 !important; color: var(--white) !important; text-decoration:none; }


#footer-logo { height: 40px; width: auto; display:block; border-radius: 0; background: transparent; }

#footer-wordmark { height: 48px; width: auto; display: block; }


/* MOBILE NAV RULES */
.nav { position: relative; }
.nav .hamburger { display:none; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--gray-300); border-radius:10px; background: var(--white); cursor:pointer; }
.nav .hamburger span { display:block; width:22px; height:2px; margin:4px 0; background: var(--navy); }

@media (max-width: 900px) {
  .nav { height: 64px; gap: 12px; }
  .nav .brand img { height: 40px; }
  .nav .hamburger { display:flex; margin-left:auto; }
  .nav .links { 
    display: none; position: absolute; top: 100%; left: 0; right: 0; 
    background: var(--white); border-top: 1px solid var(--gray-200); 
    padding: 16px; flex-direction: column; gap: 12px; z-index: 50; 
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }
  .nav.open .links { display: flex; }
  body.nav-open { overflow: hidden; }
  .nav .links a { padding: 10px 6px; }
  .nav .links .primary-cta { width: 100%; text-align: center; }
}


/* MOBILE NAV COLLAPSE FIX */
.nav { position: relative; }
.nav .links { display: flex; align-items: center; gap: 16px; } /* desktop default */
.nav .hamburger { display: none; }

@media (max-width: 900px) {
  .nav { height: 64px; gap: 12px; }
  .nav .brand img { height: 40px; }
  .nav .hamburger { display: flex; margin-left: auto; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--gray-300); border-radius:10px; background: var(--white); cursor:pointer; }
  .nav .hamburger span { display:block; width:22px; height:2px; margin:4px 0; background: var(--navy); }
  .nav .links { 
    display: none; position: absolute; top: 100%; left: 0; right: 0; 
    background: var(--white); border-top: 1px solid var(--gray-200); 
    padding: 16px; flex-direction: column; gap: 12px; z-index: 50; 
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }
  .nav.open .links { display: flex; }
  body.nav-open { overflow: hidden; }
  .nav .links a { padding: 10px 6px; }
  .nav .links .primary-cta { width: 100%; text-align: center; }
}


/* MOBILE NAV HARDENED */
@media (max-width: 900px) {
  .nav { position: relative; }
  .nav .hamburger { display: flex !important; margin-left:auto; }
  .nav .links {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-top: 1px solid var(--gray-200);
    padding: 16px; flex-direction: column; gap: 12px;
    z-index: 9999; box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }
  .nav.open .links { display: flex !important; }
  body.nav-open { overflow: hidden; }
}


/* TEAM PAGE */
.team .intro { max-width: 800px; color: var(--gray-600); margin-top: 8px; }
.team-grid { 
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px;
}
.team-card { 
  display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; 
  padding: 16px; border: 1px solid var(--gray-200); border-radius: 14px; background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.team-card .avatar { width: 96px; height: 96px; border-radius: 999px; overflow: hidden; background: #eef3fb; }
.team-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { margin: 0; font-size: 1.05rem; color: var(--navy); }
.team-card .role { margin: 4px 0 8px; color: var(--gray-600); }
.team-card .contact { display: flex; gap: 8px; flex-wrap: wrap; }
.team-card .contact a { color: var(--navy); text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,.15); }
.team-card .contact a:hover { border-bottom-color: currentColor; }

@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .team-card { grid-template-columns: 72px 1fr; }
  .team-card .avatar { width: 72px; height: 72px; }
  .team-grid { grid-template-columns: 1fr; }
}



/* === WFPE Sleek Modern Theme (Aug 2025) ===================================
   Non-destructive: extends existing styles without removing sticky behavior.
   Focus: refined typography, generous spacing, cleaner cards, subtle motion.
============================================================================ */

/* Core scale & spacing */
:root{
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-1: 0 6px 20px rgba(0,0,0,.08);
  --shadow-2: 0 10px 30px rgba(0,0,0,.12);
  --container-w: 1200px;
  --leading: 1.55;
  --h1: clamp(32px, 4.6vw, 56px);
  --h2: clamp(24px, 3.2vw, 40px);
  --h3: clamp(20px, 2.6vw, 28px);
  --text: clamp(16px, 1.4vw, 18px);
}

/* Containers */
.container{ max-width: var(--container-w); padding-inline: 20px; margin-inline:auto; }
.section{ padding: clamp(40px, 5vw, 80px) 0; background: transparent; }
.section.alt{ background: var(--offwhite); }

/* Typography */
h1,h2,h3{ letter-spacing:-0.02em; line-height:1.2; margin: 0 0 14px; }
h1{ font-size: var(--h1); }
h2{ font-size: var(--h2); }
h3{ font-size: var(--h3); }
p, li{ font-size: var(--text); line-height: var(--leading); }
.lead{ font-size: clamp(18px, 2.2vw, 22px); line-height:1.6; opacity:.95; }

/* Header / Nav refinement (keeps sticky) */
.header{ backdrop-filter: saturate(140%) blur(6px); border-bottom: 1px solid rgba(0,0,0,.06); }
.header .nav{ display:flex; align-items:center; justify-content:space-between; gap: 16px; height: 72px; }
.brand img{ height: 36px; }

.nav .links{ display:flex; align-items:center; gap: 8px; }
.nav .links a{ padding: 10px 12px; border-radius: 10px; color: var(--black); }
.nav .links a:hover{ background: var(--gray-100); }

.nav .links .primary-cta,
.nav .links a.primary-cta { 
  background: var(--navy); color: var(--white) !important; 
  border-radius: 999px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-1);
}
.nav .links a.primary-cta:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2); text-decoration:none; }

/* Mobile drawer polish */
#mobile-drawer{
  background: #fff; border-bottom: 1px solid rgba(0,0,0,.06);
}
#mobile-drawer a{ padding: 14px 20px; border-radius: 10px; }
#mobile-drawer a:hover{ background: var(--gray-100); text-decoration:none; }

/* Hero refresh */
.hero{ background: linear-gradient(180deg, var(--navy), #15254d); color:#fff; padding: clamp(72px, 10vw, 120px) 0 56px; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap: 12px; }
.btn{ border-radius: 12px; padding: 12px 18px; font-weight:700; }
.btn.primary{ background: var(--red); border-color: var(--red); color: var(--white); }
.btn.secondary{ background: transparent; border-color: rgba(255,255,255,.6); color:#fff; }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-1); text-decoration:none; }

/* Cards & grids */
.cards3{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 900px){ .cards3{ grid-template-columns: 1fr; } }
.card{
  background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card h3{ margin: 6px 0 8px; }

/* Feature rows */
.feature{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items:center; }
@media (max-width: 1000px){ .feature{ grid-template-columns: 1fr; } }
.feature .media{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-1); }

/* Tables (projects/resources) */
.table{ width:100%; border-collapse: collapse; font-size: var(--text); }
.table th, .table td{ text-align:left; padding: 14px 12px; border-bottom: 1px solid rgba(0,0,0,.08); }
.table th{ background: var(--offwhite); font-weight: 700; }
.table tr:hover td{ background: rgba(0,0,0,.02); }

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], input[type="file"], textarea, select{
  width:100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15); background:#fff; outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
input:focus, textarea:focus, select:focus{
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(11,28,61,.10);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width: 800px){ .form-row{ grid-template-columns:1fr; } }

/* Footer */
.footer{ background: #F3F4F6; color: #000000; padding: 48px 0; margin-top: 48px; }
.footer a{ color: #000000; opacity:.92; }
.footer .cols{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
@media (max-width: 950px){ .footer .cols{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .footer .cols{ grid-template-columns: 1fr; } }
#footer-wordmark{ max-width:220px; opacity:.95; }

/* Subtle motion */
.reveal{ opacity:0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.reveal.show{ opacity:1; transform: none; }

/* Accessibility niceties */
:focus-visible{ outline: 3px solid rgba(193,18,31,.35); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce){
  *{ animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}


/* === About page modern cards === */
.values-grid { --value-accent: var(--navy); }
.values-grid .value { padding: 22px; border-radius: 16px; box-shadow: var(--shadow-1); border: 1px solid rgba(0,0,0,.06); }
.values-grid .value .icon{ width:48px; height:48px; border-radius: 12px; display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(11,28,61,.08), rgba(11,28,61,.02)); color: var(--navy);
  margin-bottom: 10px; }
.values-grid .value h3{ margin:6px 0 8px; font-size: clamp(18px, 2.2vw, 22px); }
.values-grid .value p{ margin:0; opacity:.9; }


/* === About page: Purpose & Vision cards === */
.cards2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
@media (max-width: 900px){ .cards2{ grid-template-columns: 1fr; } }
.pv-grid .pv-card{ padding:22px; border-radius:16px; border:1px solid rgba(0,0,0,.06); box-shadow: var(--shadow-1); background:#fff; }
.pv-grid .icon{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; margin-bottom:10px;
  background: linear-gradient(135deg, rgba(11,28,61,.08), rgba(11,28,61,.02)); color: var(--navy); }
.pv-grid h3{ margin:6px 0 8px; font-size: clamp(18px, 2.2vw, 22px); }
.pv-grid p{ margin:0 0 10px; opacity:.92; }


/* Team headshots */
.headshot{
  width: 96px;
  height: 96px;
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
  display: block;
  margin: 8px auto 12px auto;
}
@media (min-width: 800px){
  .team-grid .card .headshot, .team .card .headshot{ margin-top: 4px; }
}


/* Team grid */
.cards4{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
@media (max-width: 1100px){ .cards4{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 800px){ .cards4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .cards4{ grid-template-columns: 1fr; } }
.cards4 .person{ text-align:center; }
.cards4 .person h3{ margin: 6px 0 0; font-size: clamp(16px, 2vw, 18px); }


/* Expanded service capability matrix */
.capability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.capability{background:#fff;border:1px solid var(--gray-300);border-radius:14px;padding:20px;box-shadow:0 5px 18px rgba(15,23,42,.04)}
.capability strong{display:block;font-size:17px;line-height:1.25;color:var(--navy,#132238);margin-bottom:8px}
.capability span{display:block;color:var(--gray-700,#475569);font-size:14px;line-height:1.55}
.center-link{text-align:center;margin-top:24px;font-weight:700}
@media (max-width:900px){.capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.capability-grid{grid-template-columns:1fr}}

/* ========================================================================
   WFPE GLOBAL OVERLAY + SHADOW DEPTH SYSTEM — Aug 21 2026
   Applied across every page. White canvas; depth from translucent overlays,
   faint brand geometry, soft borders and elevated shadows.
   ======================================================================== */
:root{
  --depth-navy:rgba(11,28,61,.075);
  --depth-navy-soft:rgba(11,28,61,.038);
  --depth-red:rgba(193,18,31,.052);
  --depth-red-soft:rgba(193,18,31,.026);
  --depth-line:rgba(11,28,61,.105);
  --depth-shadow:0 14px 36px rgba(11,28,61,.085),0 3px 10px rgba(11,28,61,.035);
  --depth-shadow-raised:0 24px 54px rgba(11,28,61,.13),0 8px 20px rgba(11,28,61,.055);
  --depth-shadow-large:0 34px 85px rgba(11,28,61,.12);
}
html{background:#fff}
body.wfpe-site{min-height:100vh;background-color:#fff;background-image:radial-gradient(ellipse 760px 500px at -8% 20%,rgba(11,28,61,.055),transparent 68%),radial-gradient(ellipse 680px 440px at 108% 48%,rgba(193,18,31,.038),transparent 67%),radial-gradient(ellipse 860px 560px at 12% 92%,rgba(11,28,61,.030),transparent 70%),linear-gradient(128deg,transparent 0 44%,rgba(11,28,61,.010) 44% 45%,transparent 45% 100%);background-attachment:fixed;overflow-x:hidden}
.header{background:rgba(255,255,255,.91)!important;border-bottom:1px solid rgba(11,28,61,.08)!important;box-shadow:0 7px 26px rgba(11,28,61,.07)!important;-webkit-backdrop-filter:blur(14px) saturate(145%);backdrop-filter:blur(14px) saturate(145%)}
.header.scrolled{background:rgba(255,255,255,.97)!important;box-shadow:0 14px 34px rgba(11,28,61,.11)!important}
.hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 560px 300px at 82% 8%,rgba(255,255,255,.13),transparent 68%),radial-gradient(ellipse 430px 260px at 98% 94%,rgba(193,18,31,.20),transparent 70%),linear-gradient(135deg,#08172f 0%,#0b1c3d 56%,#142b55 100%)!important;box-shadow:0 18px 48px rgba(11,28,61,.19)}
.hero::before{content:"";position:absolute;z-index:-1;width:min(58vw,760px);height:230px;right:-9%;top:14%;transform:rotate(-9deg) skewX(-10deg);border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.012) 58%,transparent);box-shadow:0 28px 70px rgba(0,0,0,.10)}
.hero::after{content:"";position:absolute;z-index:-1;width:390px;height:390px;right:8%;bottom:-305px;border-radius:50%;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle,rgba(255,255,255,.07),transparent 68%)}
.hero .container{position:relative;z-index:1}
.section,.section.alt{position:relative;isolation:isolate;overflow:hidden;background:transparent!important;border:0!important}
.section+.section{border-top:1px solid rgba(11,28,61,.045)!important}
.section::before,.section::after{content:"";position:absolute;pointer-events:none;z-index:-1}
.section::before{width:min(64vw,840px);height:min(40vw,520px);right:-18%;top:3%;border-radius:50%;background:radial-gradient(ellipse at center,var(--depth-navy) 0%,var(--depth-navy-soft) 38%,transparent 72%);filter:blur(1px);transform:rotate(-8deg)}
.section::after{width:min(52vw,680px);height:210px;left:-14%;bottom:5%;transform:rotate(-7deg) skewX(-12deg);border:1px solid rgba(11,28,61,.045);background:linear-gradient(135deg,rgba(11,28,61,.042),rgba(11,28,61,.009) 62%,transparent);box-shadow:0 28px 75px rgba(11,28,61,.035)}
.section.alt::before{left:-18%;right:auto;top:0;background:radial-gradient(ellipse at center,var(--depth-red) 0%,var(--depth-red-soft) 38%,transparent 72%);transform:rotate(8deg)}
.section.alt::after{left:auto;right:-14%;bottom:7%;transform:rotate(7deg) skewX(11deg);border-color:rgba(193,18,31,.042);background:linear-gradient(135deg,rgba(193,18,31,.034),rgba(193,18,31,.007) 62%,transparent)}
.section>.container,.project-meta>.container,.project-body>.container,.footer>.container{position:relative;z-index:1}
body.wfpe-site .section>.container>h1:first-child::after,body.wfpe-site .section>.container>h2:first-child::after,.section h2::after{content:"";display:block;width:54px;height:3px;margin-top:12px;border-radius:999px;background:linear-gradient(90deg,var(--red),rgba(193,18,31,.15));box-shadow:0 4px 12px rgba(193,18,31,.15)}
.card h2::after,.card h3::after,.footer h4::after{display:none!important}
.card,.capability,.kpi,.step,.team-card,.pv-grid .pv-card,.values-grid .value,.notice,.modal,.ba-wrap{background:rgba(255,255,255,.94)!important;border-color:var(--depth-line)!important;box-shadow:var(--depth-shadow)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.card,.capability,.kpi,.step,.team-card,.notice{position:relative;overflow:hidden}
.card::before,.capability::before,.kpi::before,.step::before,.notice::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,rgba(11,28,61,.72),rgba(11,28,61,.10));opacity:.62}
.card:nth-child(even)::before,.capability:nth-child(3n+2)::before,.portfolio-grid .card:nth-child(even)::before{background:linear-gradient(180deg,rgba(193,18,31,.70),rgba(193,18,31,.09))}
.card,.capability,.team-card,.kpi,.step{transition:transform .20s ease,box-shadow .20s ease,border-color .20s ease}
.card:hover,.capability:hover,.team-card:hover{transform:translateY(-5px);box-shadow:var(--depth-shadow-raised)!important;border-color:rgba(11,28,61,.17)!important}
.cards3,.cards2,.cards4,.capability-grid,.kpis,.team-grid,.portfolio-grid,.process{position:relative;isolation:isolate}
.cards3::before,.cards2::before,.cards4::before,.capability-grid::before,.kpis::before,.team-grid::before,.portfolio-grid::before,.process::before{content:"";position:absolute;z-index:-1;inset:-24px -28px;border-radius:30px;background:radial-gradient(ellipse at 18% 20%,rgba(11,28,61,.028),transparent 52%),radial-gradient(ellipse at 88% 78%,rgba(193,18,31,.020),transparent 50%);border:1px solid rgba(11,28,61,.035);box-shadow:0 28px 75px rgba(11,28,61,.025)}
.form-grid,.accordion{position:relative;background:rgba(255,255,255,.91)!important;border:1px solid var(--depth-line);border-radius:20px;padding:26px;box-shadow:var(--depth-shadow-large);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);overflow:hidden}
.form-grid::after,.accordion::after{content:"";position:absolute;z-index:-1;width:300px;height:180px;right:-100px;top:-70px;border-radius:50%;background:radial-gradient(ellipse,rgba(11,28,61,.055),transparent 70%)}
input,select,textarea{background:rgba(255,255,255,.97)!important;border-color:rgba(11,28,61,.13)!important;box-shadow:inset 0 1px 2px rgba(11,28,61,.035),0 4px 12px rgba(11,28,61,.035)}
.dropzone{background:rgba(255,255,255,.64)!important;border-color:rgba(11,28,61,.18)!important;box-shadow:inset 0 0 40px rgba(11,28,61,.025)}
.team-card .avatar{border:3px solid rgba(255,255,255,.96);outline:1px solid rgba(11,28,61,.09);box-shadow:0 11px 28px rgba(11,28,61,.18)}
.portfolio-grid .card{min-height:100%}
.project-meta,.project-body{position:relative;isolation:isolate;overflow:hidden;background:transparent!important}
.project-meta{padding:38px 0!important;border-bottom:1px solid rgba(11,28,61,.055)}
.project-meta::before,.project-body::before,.project-body::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.project-meta::before{width:720px;height:300px;right:-190px;top:-95px;border-radius:50%;background:radial-gradient(ellipse,var(--depth-navy),transparent 71%)}
.project-body{padding:56px 0 72px!important}
.project-body::before{width:800px;height:390px;left:-260px;top:6%;border-radius:50%;background:radial-gradient(ellipse,var(--depth-red-soft),transparent 72%)}
.project-body::after{width:650px;height:220px;right:-160px;bottom:5%;transform:rotate(8deg) skewX(9deg);border:1px solid rgba(11,28,61,.04);background:linear-gradient(135deg,rgba(11,28,61,.035),rgba(11,28,61,.006) 65%,transparent)}
.project-meta .card,.project-body .card{background:rgba(255,255,255,.94)!important;box-shadow:var(--depth-shadow)!important}
.project-body .project-note{background:rgba(255,255,255,.82)!important;border:1px solid var(--depth-line)!important;box-shadow:var(--depth-shadow)!important;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.btn{box-shadow:0 7px 18px rgba(11,28,61,.08)}
.btn.primary{box-shadow:0 10px 25px rgba(193,18,31,.20)}
.cta-rail .btn{box-shadow:0 12px 30px rgba(11,28,61,.18)!important;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.footer{position:relative;isolation:isolate;overflow:hidden;margin-top:0!important;background:rgba(255,255,255,.93)!important;border-top:1px solid rgba(11,28,61,.10)!important;box-shadow:inset 0 18px 42px rgba(11,28,61,.028),0 -10px 30px rgba(11,28,61,.035)}
.footer::before,.footer::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.footer::before{width:720px;height:320px;right:-210px;bottom:-175px;border-radius:50%;background:radial-gradient(ellipse,rgba(11,28,61,.075),transparent 70%)}
.footer::after{width:520px;height:165px;left:-145px;top:10px;transform:rotate(-8deg) skewX(-9deg);border:1px solid rgba(193,18,31,.035);background:linear-gradient(135deg,rgba(193,18,31,.030),transparent 72%)}
@media(max-width:900px){.cards3::before,.cards2::before,.cards4::before,.capability-grid::before,.kpis::before,.team-grid::before,.portfolio-grid::before,.process::before{inset:-16px -12px}}
@media(max-width:700px){body.wfpe-site{background-image:radial-gradient(ellipse 520px 360px at -30% 20%,rgba(11,28,61,.052),transparent 68%),radial-gradient(ellipse 480px 330px at 130% 72%,rgba(193,18,31,.034),transparent 68%)}.section{padding:44px 0}.section::before{width:560px;height:340px;right:-390px}.section.alt::before{left:-390px;right:auto}.section::after{width:430px;left:-300px}.section.alt::after{left:auto;right:-300px}.form-grid,.accordion{padding:18px}.hero::before{right:-330px}.hero::after{right:-120px}}

/* ========================================================================
   WFPE INTENTIONAL DEPTH PASS — Aug 21 2026
   Stronger, repeatable translucent geometry. Still a white site, but the
   background treatment now reads as a deliberate visual system rather than
   faint artifacts.
   ======================================================================== */
:root{
  --intent-navy: rgba(11,28,61,.115);
  --intent-navy-mid: rgba(11,28,61,.075);
  --intent-navy-soft: rgba(11,28,61,.045);
  --intent-red: rgba(193,18,31,.090);
  --intent-red-mid: rgba(193,18,31,.055);
  --intent-red-soft: rgba(193,18,31,.032);
  --intent-edge: rgba(11,28,61,.14);
  --intent-shadow: 0 20px 50px rgba(11,28,61,.13), 0 5px 16px rgba(11,28,61,.055);
  --intent-shadow-hover: 0 30px 70px rgba(11,28,61,.18), 0 10px 24px rgba(11,28,61,.075);
}

/* Keep the overall canvas bright. Ambient background is visible, not foggy. */
body.wfpe-site{
  background-color:#fff;
  background-image:
    radial-gradient(ellipse 900px 560px at -12% 16%, rgba(11,28,61,.070), transparent 64%),
    radial-gradient(ellipse 760px 500px at 112% 55%, rgba(193,18,31,.050), transparent 63%),
    radial-gradient(ellipse 920px 600px at 4% 94%, rgba(11,28,61,.045), transparent 67%);
  background-attachment:fixed;
}

/* Section backgrounds become deliberate translucent planes rather than solids. */
.section,
.section.alt{
  background-color:transparent !important;
  background-image:
    linear-gradient(126deg, transparent 0 64%, rgba(11,28,61,.050) 64% 75%, transparent 75% 100%),
    radial-gradient(ellipse 680px 390px at 92% 18%, rgba(11,28,61,.058), transparent 67%) !important;
  border-top:0 !important;
}
.section.alt{
  background-image:
    linear-gradient(54deg, transparent 0 65%, rgba(193,18,31,.047) 65% 77%, transparent 77% 100%),
    radial-gradient(ellipse 660px 390px at 7% 18%, rgba(193,18,31,.052), transparent 67%) !important;
}
.section + .section{
  border-top:1px solid rgba(11,28,61,.07)!important;
}

/* Large repeated edge geometry. The shape is intentionally obvious but still translucent. */
.section::before{
  width:min(72vw,980px);
  height:min(46vw,610px);
  right:-25%;
  top:-6%;
  border-radius:48% 52% 46% 54% / 58% 44% 56% 42%;
  background:
    radial-gradient(ellipse at 48% 52%, var(--intent-navy) 0%, var(--intent-navy-mid) 36%, var(--intent-navy-soft) 55%, transparent 74%);
  filter:none;
  transform:rotate(-10deg);
  opacity:1;
}
.section::after{
  width:min(66vw,900px);
  height:260px;
  left:-24%;
  bottom:1%;
  transform:rotate(-8deg) skewX(-13deg);
  border:1px solid rgba(11,28,61,.085);
  background:linear-gradient(132deg, rgba(11,28,61,.082), rgba(11,28,61,.040) 50%, rgba(255,255,255,.10) 76%, transparent);
  box-shadow:0 35px 85px rgba(11,28,61,.060);
}
.section.alt::before{
  left:-25%;
  right:auto;
  top:-7%;
  background:radial-gradient(ellipse at 52% 50%, var(--intent-red) 0%, var(--intent-red-mid) 37%, var(--intent-red-soft) 55%, transparent 74%);
  transform:rotate(10deg);
}
.section.alt::after{
  left:auto;
  right:-24%;
  bottom:2%;
  transform:rotate(8deg) skewX(13deg);
  border-color:rgba(193,18,31,.075);
  background:linear-gradient(132deg, rgba(193,18,31,.070), rgba(193,18,31,.034) 50%, rgba(255,255,255,.10) 76%, transparent);
  box-shadow:0 35px 85px rgba(193,18,31,.045);
}

/* Make content surfaces unmistakably elevated from the background treatment. */
.card,
.capability,
.kpi,
.step,
.team-card,
.pv-grid .pv-card,
.values-grid .value,
.notice,
.project-meta .card,
.project-body .card{
  background:rgba(255,255,255,.965)!important;
  border:1px solid rgba(11,28,61,.13)!important;
  box-shadow:var(--intent-shadow)!important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.card:hover,
.capability:hover,
.team-card:hover,
.pv-grid .pv-card:hover,
.values-grid .value:hover{
  transform:translateY(-7px);
  border-color:rgba(11,28,61,.22)!important;
  box-shadow:var(--intent-shadow-hover)!important;
}

/* Card collections get a subtle glass stage beneath them, making the composition intentional. */
.cards3::before,
.cards2::before,
.cards4::before,
.capability-grid::before,
.kpis::before,
.team-grid::before,
.portfolio-grid::before,
.process::before{
  inset:-32px -34px;
  border-radius:36px;
  background:
    linear-gradient(132deg, rgba(255,255,255,.66), rgba(255,255,255,.30)),
    radial-gradient(ellipse at 16% 15%, rgba(11,28,61,.065), transparent 48%),
    radial-gradient(ellipse at 88% 84%, rgba(193,18,31,.045), transparent 46%);
  border:1px solid rgba(11,28,61,.075);
  box-shadow:0 30px 80px rgba(11,28,61,.065), inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

/* Slightly stronger branded edge bars so cards look intentionally composed. */
.card::before,
.capability::before,
.kpi::before,
.step::before,
.notice::before{
  width:4px;
  opacity:.88;
  background:linear-gradient(180deg, rgba(11,28,61,.88), rgba(11,28,61,.18));
}
.card:nth-child(even)::before,
.capability:nth-child(3n+2)::before,
.portfolio-grid .card:nth-child(even)::before{
  background:linear-gradient(180deg, rgba(193,18,31,.88), rgba(193,18,31,.16));
}

/* Forms should read as a purposeful raised work surface. */
.form-grid,
.accordion{
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(11,28,61,.14)!important;
  box-shadow:0 28px 72px rgba(11,28,61,.15), 0 8px 20px rgba(11,28,61,.055)!important;
}

/* Interior project pages use the same stronger motif. */
.project-meta::before{
  width:860px;
  height:360px;
  right:-220px;
  top:-115px;
  background:radial-gradient(ellipse, rgba(11,28,61,.105), rgba(11,28,61,.045) 48%, transparent 72%);
}
.project-body::before{
  width:900px;
  height:430px;
  left:-285px;
  top:3%;
  background:radial-gradient(ellipse, rgba(193,18,31,.065), rgba(193,18,31,.030) 48%, transparent 72%);
}
.project-body::after{
  width:760px;
  height:260px;
  right:-190px;
  bottom:3%;
  border-color:rgba(11,28,61,.075);
  background:linear-gradient(135deg, rgba(11,28,61,.070), rgba(11,28,61,.025) 62%, transparent);
  box-shadow:0 34px 80px rgba(11,28,61,.05);
}

/* Footer gets one readable, repeated translucent motif instead of a vague wash. */
.footer::before{
  width:820px;
  height:380px;
  right:-240px;
  bottom:-205px;
  background:radial-gradient(ellipse, rgba(11,28,61,.105), rgba(11,28,61,.040) 50%, transparent 71%);
}
.footer::after{
  width:650px;
  height:205px;
  left:-175px;
  top:-10px;
  border-color:rgba(193,18,31,.070);
  background:linear-gradient(135deg, rgba(193,18,31,.060), rgba(193,18,31,.020) 60%, transparent 76%);
}

/* Mobile: keep the motif visible, but prevent it from crowding the content. */
@media(max-width:700px){
  .section,
  .section.alt{
    background-image:
      linear-gradient(126deg, transparent 0 70%, rgba(11,28,61,.040) 70% 82%, transparent 82% 100%),
      radial-gradient(ellipse 480px 300px at 112% 15%, rgba(11,28,61,.050), transparent 68%) !important;
  }
  .section.alt{
    background-image:
      linear-gradient(54deg, transparent 0 70%, rgba(193,18,31,.038) 70% 82%, transparent 82% 100%),
      radial-gradient(ellipse 470px 290px at -12% 15%, rgba(193,18,31,.045), transparent 68%) !important;
  }
  .section::before{width:650px;height:390px;right:-470px;top:-30px}
  .section.alt::before{left:-470px;right:auto}
  .section::after{width:520px;height:185px;left:-380px}
  .section.alt::after{left:auto;right:-380px}
  .cards3::before,.cards2::before,.cards4::before,.capability-grid::before,.kpis::before,.team-grid::before,.portfolio-grid::before,.process::before{inset:-18px -10px;border-radius:24px}
}


/* === TEAM PAGE LAYOUT TUNING (Aug 21 2026) ================================
   Adds breathing room above the card stage and gives contact information
   enough horizontal room without changing the Careers grid that shares
   the same base component classes.
============================================================================ */
.team-page .team > .container{
  max-width:1320px;
}
.team-page .team .intro{
  margin-top:8px;
  margin-bottom:0;
}
.team-page .team .team-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:56px;
}
.team-page .team-card{
  grid-template-columns:96px minmax(0,1fr);
}
.team-page .team-card .meta,
.team-page .team-card .contact{
  min-width:0;
}
.team-page .team-card .contact{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.team-page .team-card .contact a{
  max-width:100%;
}
.team-page .team-card .contact a[href^="mailto:"]{
  font-size:.92rem;
  letter-spacing:-.012em;
  white-space:nowrap;
}
@media (max-width:1280px){
  .team-page .team .team-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:700px){
  .team-page .team .team-grid{
    grid-template-columns:1fr;
    margin-top:44px;
  }
  .team-page .team-card{
    grid-template-columns:72px minmax(0,1fr);
  }
}
@media (max-width:430px){
  .team-page .team-card .contact a[href^="mailto:"]{
    white-space:normal;
    overflow-wrap:anywhere;
    font-size:.86rem;
  }
}


/* === TEAM PROFILE / VIRTUAL BUSINESS CARD MODAL (Aug 21 2026) ============ */
.team-page .team-profile-trigger{
  cursor:pointer;
  outline:none;
}
.team-page .team-profile-trigger:focus-visible{
  box-shadow:0 0 0 4px rgba(193,18,31,.16),var(--depth-shadow-raised)!important;
  border-color:rgba(193,18,31,.42)!important;
}
.team-page .team-card .profile-cue{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:10px;
  color:var(--navy);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  opacity:.58;
  transition:opacity .18s ease,color .18s ease;
}
.team-page .team-profile-trigger:hover .profile-cue,
.team-page .team-profile-trigger:focus-visible .profile-cue{
  opacity:1;
  color:var(--red);
}
.profile-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:10050;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(3,13,32,.68);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.profile-modal-backdrop.show{display:flex}
body.profile-modal-open{overflow:hidden}
.profile-modal{
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,.82fr) minmax(0,1.35fr);
  width:min(880px,100%);
  max-height:calc(100vh - 56px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.72);
  border-radius:26px;
  background:rgba(255,255,255,.985);
  box-shadow:0 34px 100px rgba(2,13,34,.34),0 8px 30px rgba(2,13,34,.16);
}
.profile-modal-close{
  position:absolute;
  z-index:3;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  border:1px solid rgba(11,28,61,.12);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--navy);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(11,28,61,.10);
}
.profile-modal-close:hover{background:#fff;color:var(--red)}
.profile-modal-close:focus-visible{outline:3px solid rgba(193,18,31,.24);outline-offset:2px}
.profile-modal-photo-panel{
  position:relative;
  display:flex;
  min-height:470px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:58px 34px 38px;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,0) 38%),
    linear-gradient(155deg,#071a3c 0%,#0b1c3d 62%,#132b58 100%);
}
.profile-modal-photo-panel::before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  top:-150px;
  right:-150px;
  transform:rotate(24deg);
  background:rgba(193,18,31,.28);
  border:1px solid rgba(255,255,255,.08);
}
.profile-modal-photo-panel::after{
  content:"";
  position:absolute;
  width:250px;
  height:92px;
  bottom:-52px;
  left:-78px;
  transform:rotate(-22deg);
  background:rgba(193,18,31,.18);
}
.profile-modal-photo-wrap{
  position:relative;
  z-index:1;
  width:210px;
  height:210px;
  padding:7px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:0 24px 55px rgba(0,0,0,.28);
}
.profile-modal-photo-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:999px;
  background:#eef3fb;
}
.profile-modal-brand{
  position:relative;
  z-index:1;
  margin-top:32px;
  font-size:1.35rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.19em;
}
.profile-modal-brand-sub{
  position:relative;
  z-index:1;
  margin-top:9px;
  color:rgba(255,255,255,.68);
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
}
.profile-modal-content{
  min-width:0;
  padding:66px 58px 46px;
}
.profile-modal-eyebrow{
  margin:0 0 12px;
  color:var(--red);
  font-size:.74rem;
  line-height:1.3;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
}
.profile-modal-content h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(1.85rem,3vw,2.7rem);
  line-height:1.06;
}
.profile-modal-role{
  margin:10px 0 0;
  color:var(--gray-600);
  font-size:1.08rem;
  line-height:1.5;
}
.profile-modal-bio{
  margin:28px 0 0;
  color:#334155;
  font-size:1rem;
  line-height:1.75;
}
.profile-modal-contact{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
  margin-top:30px;
}
.profile-contact-link{
  display:flex;
  align-items:center;
  min-height:44px;
  width:100%;
  padding:10px 14px;
  border:1px solid rgba(11,28,61,.10);
  border-radius:12px;
  color:var(--navy);
  background:rgba(11,28,61,.025);
  text-decoration:none;
  font-weight:700;
  overflow-wrap:anywhere;
}
.profile-contact-link:hover{
  border-color:rgba(11,28,61,.22);
  background:rgba(11,28,61,.05);
}
.profile-modal-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:24px;
}
.profile-save-contact{
  min-height:46px;
  padding:11px 20px;
  border:0;
  border-radius:12px;
  background:var(--red);
  color:#fff;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 9px 22px rgba(193,18,31,.18);
}
.profile-save-contact:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(193,18,31,.25)}
.profile-save-contact:focus-visible{outline:3px solid rgba(193,18,31,.22);outline-offset:3px}
.profile-company-link{
  color:var(--navy);
  font-weight:800;
  text-decoration:none;
  border-bottom:1px solid rgba(11,28,61,.22);
}
.profile-save-note{
  margin:18px 0 0;
  color:#718096;
  font-size:.76rem;
  line-height:1.5;
}
@media(max-width:760px){
  .profile-modal-backdrop{padding:14px;align-items:flex-start;overflow:auto}
  .profile-modal{grid-template-columns:1fr;max-height:none;border-radius:22px}
  .profile-modal-photo-panel{min-height:auto;padding:52px 24px 28px}
  .profile-modal-photo-panel::before{width:220px;height:220px}
  .profile-modal-photo-wrap{width:168px;height:168px}
  .profile-modal-brand{margin-top:24px}
  .profile-modal-content{padding:34px 24px 30px}
  .profile-modal-bio{margin-top:20px}
  .profile-modal-contact{margin-top:22px}
}
@media(max-width:430px){
  .profile-modal-backdrop{padding:8px}
  .profile-modal-content{padding:30px 18px 24px}
  .profile-modal-close{top:10px;right:10px}
  .profile-modal-photo-panel{padding-top:50px}
}
@media(prefers-reduced-motion:reduce){
  .profile-save-contact,.team-page .team-profile-trigger,.team-page .team-card .profile-cue{transition:none!important}
}

/* === HOME FEATURED PROJECT HERO SLIDER === */
.featured-projects-section{padding-top:clamp(54px,6vw,90px);padding-bottom:clamp(60px,7vw,104px)!important}
.featured-projects-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}
.featured-projects-heading h2{margin:.25rem 0 0}
.project-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.featured-projects-all{font-weight:800;text-decoration:none;white-space:nowrap}
.project-hero-slider{position:relative;border-radius:28px;overflow:hidden;background:#08172f;color:#fff;box-shadow:0 28px 70px rgba(11,28,61,.24);outline:none;border:1px solid rgba(255,255,255,.11)}
.project-hero-slider:focus-visible{box-shadow:0 0 0 4px rgba(193,18,31,.18),0 28px 70px rgba(11,28,61,.24)}
.project-hero-stage{position:relative;min-height:520px}
.project-hero-slide{--slide-accent:#c1121f;--slide-accent-rgb:193,18,31;position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);opacity:0;visibility:hidden;transform:translateX(26px);transition:opacity .52s ease,transform .52s ease,visibility .52s;pointer-events:none;background:radial-gradient(circle at 85% 20%,rgba(var(--slide-accent-rgb),.27),transparent 29%),radial-gradient(circle at 74% 100%,rgba(255,255,255,.07),transparent 38%),linear-gradient(120deg,#08172f 0%,#0b1c3d 58%,#10274f 100%)}
.project-hero-slide::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.02),transparent 40%,rgba(255,255,255,.018));}
.project-hero-slide.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto;z-index:2}
.project-hero-copy{position:relative;z-index:2;padding:clamp(38px,5vw,70px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.project-slide-kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.64);margin-bottom:13px}
.project-hero-copy h3{font-size:clamp(32px,4.3vw,58px);line-height:1.01;letter-spacing:-.035em;margin:0 0 15px;max-width:780px;color:#fff}
.project-slide-service{font-size:clamp(17px,2vw,22px);font-weight:750;color:#fff;margin:0 0 15px;padding-left:15px;border-left:3px solid var(--slide-accent)}
.project-slide-description{max-width:760px;color:rgba(255,255,255,.77);font-size:16px;line-height:1.72;margin:0 0 25px}
.project-slide-facts{display:flex;flex-wrap:wrap;gap:10px 30px;margin:0 0 27px}
.project-slide-facts span{display:grid;gap:1px;min-width:98px}
.project-slide-facts strong{font-size:20px;color:#fff;letter-spacing:-.02em}
.project-slide-facts small{font-size:11px;text-transform:uppercase;letter-spacing:.11em;color:rgba(255,255,255,.5)}
.project-slide-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px}
.project-slide-actions .btn.primary{box-shadow:0 11px 28px rgba(var(--slide-accent-rgb),.28)}
.project-text-link{color:#fff;font-weight:750;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
.project-text-link:hover{border-bottom-color:#fff;text-decoration:none}
.project-hero-visual{position:relative;overflow:hidden;min-width:0;border-left:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(var(--slide-accent-rgb),.095));display:flex;align-items:flex-end;justify-content:flex-end;padding:42px}
.project-hero-visual::before{content:"";position:absolute;width:430px;height:430px;right:-145px;top:-126px;border:1px solid rgba(255,255,255,.11);transform:rotate(45deg);box-shadow:0 0 0 58px rgba(255,255,255,.018),0 0 0 116px rgba(var(--slide-accent-rgb),.034)}
.project-hero-visual::after{content:"";position:absolute;width:280px;height:280px;left:-140px;bottom:-145px;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.018)}
.project-visual-grid{position:absolute;inset:0;opacity:.23;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(135deg,transparent 5%,#000 50%,#000 100%)}
.project-visual-index{position:absolute;right:28px;top:18px;font-size:clamp(86px,11vw,154px);line-height:1;font-weight:900;letter-spacing:-.07em;color:rgba(255,255,255,.055)}
.project-visual-mark{position:relative;z-index:2;text-align:right;margin-bottom:54px}
.project-visual-mark span{display:block;font-size:clamp(50px,7vw,88px);font-weight:900;line-height:.95;letter-spacing:-.065em;color:#fff;text-shadow:0 14px 34px rgba(0,0,0,.22)}
.project-visual-mark small{display:block;margin-top:8px;font-size:13px;font-weight:850;letter-spacing:.22em;text-transform:uppercase;color:var(--slide-accent)}
.project-visual-caption{position:absolute;z-index:2;left:34px;right:34px;bottom:25px;padding-top:15px;border-top:1px solid rgba(255,255,255,.13);font-size:11px;line-height:1.45;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.project-slider-controls{position:absolute;z-index:5;left:0;right:0;bottom:0;display:flex;align-items:center;gap:18px;padding:0 clamp(30px,5vw,70px) 22px;pointer-events:none}
.project-slider-arrows,.project-slider-dots,.project-slider-count{pointer-events:auto}
.project-slider-arrows{display:flex;gap:7px}
.project-slider-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.19);background:rgba(4,13,29,.44);color:#fff;font-size:18px;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px);transition:background .18s ease,border-color .18s ease,transform .18s ease}
.project-slider-arrow:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);transform:translateY(-1px)}
.project-slider-arrow:focus-visible,.project-slider-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.project-slider-dots{display:flex;align-items:center;gap:8px;margin-left:auto}
.project-slider-dot{width:26px;height:4px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.23);cursor:pointer;transition:width .22s ease,background .22s ease}
.project-slider-dot.is-active{width:48px;background:var(--red)}
.project-slider-count{display:flex;gap:5px;min-width:55px;font-size:12px;font-weight:800;letter-spacing:.09em;color:rgba(255,255,255,.62)}
@media(max-width:960px){
  .project-hero-stage{min-height:610px}
  .project-hero-slide{grid-template-columns:1fr 300px}
  .project-hero-copy{padding:42px 38px 92px}
  .project-hero-visual{padding:28px}
  .project-visual-mark span{font-size:56px}
  .project-visual-caption{left:24px;right:24px}
  .project-slider-controls{padding-left:38px;padding-right:30px}
}
@media(max-width:760px){
  .featured-projects-heading{align-items:flex-start;flex-direction:column;gap:8px}
  .featured-projects-all{white-space:normal}
  .project-hero-slider{border-radius:22px}
  .project-hero-stage{min-height:760px}
  .project-hero-slide{grid-template-columns:1fr;grid-template-rows:auto 235px}
  .project-hero-copy{padding:34px 25px 80px;justify-content:flex-start}
  .project-hero-copy h3{font-size:clamp(30px,9vw,42px)}
  .project-slide-description{font-size:15px;line-height:1.62}
  .project-slide-facts{gap:12px 20px}
  .project-hero-visual{border-left:0;border-top:1px solid rgba(255,255,255,.08);padding:24px}
  .project-visual-index{font-size:90px}
  .project-visual-mark{margin-bottom:42px}
  .project-visual-mark span{font-size:54px}
  .project-visual-caption{bottom:16px;left:22px;right:22px}
  .project-slider-controls{bottom:241px;padding:0 24px 18px;gap:10px}
  .project-slider-arrows{display:none}
  .project-slider-dots{margin-left:0}
  .project-slider-count{margin-left:auto}
}
@media(max-width:420px){
  .project-hero-stage{min-height:810px}
  .project-slide-actions{align-items:flex-start;flex-direction:column}
  .project-slide-facts span{min-width:82px}
}
@media(prefers-reduced-motion:reduce){
  .project-hero-slide,.project-slider-arrow,.project-slider-dot{transition:none!important}
}

/* === FEATURED PROJECT SLIDER READABILITY FIX (Aug 21 2026) === */
.featured-projects-section::before,
.featured-projects-section::after{display:none!important}
.project-hero-slider{isolation:isolate;background:#08172f}
.project-hero-stage{min-height:520px}
.project-hero-slide{isolation:isolate;background:linear-gradient(118deg,#08172f 0%,#0b1c3d 62%,#10274f 100%)}
.project-hero-slide::after{display:none!important}
.project-hero-copy{z-index:4;background:linear-gradient(90deg,rgba(8,23,47,.99) 0%,rgba(8,23,47,.96) 72%,rgba(8,23,47,.82) 100%);padding:clamp(38px,5vw,68px)}
.project-hero-visual{isolation:isolate;z-index:1;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(var(--slide-accent-rgb),.10))}
.project-hero-visual::before,.project-hero-visual::after,.project-visual-grid{z-index:0}
.project-visual-mark,.project-visual-caption,.project-visual-index{z-index:2}
.project-slider-controls{position:relative;z-index:6;left:auto;right:auto;bottom:auto;min-height:68px;padding:13px clamp(24px,4vw,52px);background:linear-gradient(90deg,#061327,#091a35);border-top:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);pointer-events:auto}
.project-slider-arrow{background:rgba(255,255,255,.055)}
.project-slider-dot{background:rgba(255,255,255,.30)}
.project-slider-count{color:rgba(255,255,255,.72)}
@media(max-width:960px){.project-hero-stage{min-height:590px}.project-hero-copy{padding:42px 38px}.project-slider-controls{padding-left:30px;padding-right:30px}}
@media(max-width:760px){.project-hero-stage{min-height:700px}.project-hero-copy{padding:34px 25px 36px}.project-slider-controls{bottom:auto;padding:12px 22px}}
@media(max-width:420px){.project-hero-stage{min-height:750px}}

/* === FEATURED PROJECT SLIDER CONSISTENT LAYOUT FIX (Aug 21 2026) === */
@media (min-width:761px){
  .project-hero-stage{height:620px;min-height:620px}
  .project-hero-slide{grid-template-columns:minmax(0,1.22fr) minmax(360px,.78fr)}
  .project-hero-copy{
    padding:54px 56px 50px;
    justify-content:start;
    display:grid;
    grid-template-rows:24px 154px 58px 116px 64px 52px;
    row-gap:0;
    align-content:start;
  }
  .project-slide-kicker{margin:0;align-self:start}
  .project-hero-copy h3{
    margin:0;
    align-self:center;
    max-width:760px;
    font-size:clamp(38px,4vw,56px);
    line-height:1.03;
    display:flex;
    align-items:center;
  }
  .project-slide-service{
    margin:0;
    align-self:center;
    min-height:0;
    display:flex;
    align-items:center;
  }
  .project-slide-description{
    margin:0;
    align-self:start;
    max-width:720px;
    padding-top:10px;
    line-height:1.62;
  }
  .project-slide-facts{
    margin:0;
    align-self:center;
    min-height:0;
  }
  .project-slide-actions{
    margin:0;
    align-self:end;
  }
  .project-hero-visual{padding:0}
  .project-visual-mark{
    position:absolute;
    z-index:2;
    right:38px;
    bottom:94px;
    margin:0;
    text-align:right;
  }
  .project-visual-mark span{font-size:clamp(56px,6.5vw,88px)}
  .project-visual-mark small{margin-top:7px}
  .project-visual-caption{left:34px;right:34px;bottom:26px}
  .project-slider-controls{min-height:68px}
}

@media (min-width:761px) and (max-width:1100px){
  .project-hero-stage{height:650px;min-height:650px}
  .project-hero-slide{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)}
  .project-hero-copy{
    padding:48px 40px 46px;
    grid-template-rows:24px 160px 60px 126px 66px 52px;
  }
  .project-hero-copy h3{font-size:clamp(36px,4.2vw,50px)}
  .project-slide-description{font-size:15px}
  .project-visual-mark{right:28px;bottom:92px}
  .project-visual-mark span{font-size:clamp(48px,6vw,68px)}
}

@media (max-width:760px){
  .project-hero-stage{height:auto;min-height:0}
  .project-hero-slide{
    position:relative;
    inset:auto;
    display:none;
    grid-template-columns:1fr;
    grid-template-rows:auto 230px;
    transform:none;
  }
  .project-hero-slide.is-active{display:grid}
  .project-hero-copy{
    padding:34px 25px 36px;
    display:block;
  }
  .project-slide-kicker{margin-bottom:13px}
  .project-hero-copy h3{margin-bottom:15px}
  .project-slide-service{margin-bottom:15px}
  .project-slide-description{margin-bottom:24px}
  .project-slide-facts{margin-bottom:25px}
  .project-slide-actions{margin-bottom:0}
  .project-hero-visual{min-height:230px;padding:0}
  .project-visual-mark{position:absolute;right:24px;bottom:76px;margin:0}
  .project-visual-mark span{font-size:52px}
  .project-visual-caption{left:22px;right:22px;bottom:17px}
  .project-slider-controls{position:relative;bottom:auto;padding:12px 22px}
}

@media(max-width:420px){
  .project-slide-actions{gap:12px}
  .project-slide-actions .btn.primary{width:100%;text-align:center}
  .project-text-link{display:inline-block}
  .project-visual-mark span{font-size:46px}
}

/* final desktop sizing after visual QA of long-title slide */
@media (min-width:1101px){
  .project-hero-stage{height:650px;min-height:650px}
  .project-hero-copy{
    grid-template-rows:24px 184px 56px 110px 64px 52px;
  }
}

/* ========================================================================
   WFPE SITE-WIDE SPACING / VERTICAL RHYTHM PASS — Aug 21 2026
   Keeps text from visually colliding with raised card groups and normalizes
   breathing room around headings, intros, forms, notices and project panels.
   ======================================================================== */
:root{
  --space-copy-to-surface: clamp(34px, 3.6vw, 48px);
  --space-heading-to-surface: clamp(28px, 3vw, 40px);
  --space-surface-to-copy: clamp(30px, 3.2vw, 44px);
  --surface-pad: clamp(22px, 2.2vw, 28px);
}

/* Give ordinary section copy a dependable rhythm instead of relying on
   browser-default margins that vary by element. */
body.wfpe-site .section > .container > h1,
body.wfpe-site .section > .container > h2{
  margin-bottom:18px;
}
body.wfpe-site .section > .container > p,
body.wfpe-site .section > .container > .lead,
body.wfpe-site .section > .container > .intro{
  margin-top:0;
  margin-bottom:20px;
}
body.wfpe-site .section > .container > p:last-child{
  margin-bottom:0;
}

/* Space text/headings away from any raised collection that follows it. */
body.wfpe-site .section > .container > :is(p,.lead,.intro,ul,ol) + :is(.cards3,.cards2,.cards4,.capability-grid,.kpis,.team-grid,.portfolio-grid,.process,.accordion,.form-grid,.grid2,.feature),
body.wfpe-site .section > .container > :is(h1,h2,h3) + :is(.cards3,.cards2,.cards4,.capability-grid,.kpis,.team-grid,.portfolio-grid,.process,.accordion,.form-grid,.grid2,.feature){
  margin-top:var(--space-copy-to-surface);
}
body.wfpe-site .section > .container > :is(h1,h2,h3) + :is(.accordion,.form-grid){
  margin-top:var(--space-heading-to-surface);
}

/* When a collection is followed by explanatory copy/CTA, keep the same
   separation below it as above it. */
body.wfpe-site .section > .container > :is(.cards3,.cards2,.cards4,.capability-grid,.kpis,.team-grid,.portfolio-grid,.process,.accordion,.form-grid,.grid2,.feature) + :is(p,.center-link,.notice,.btn){
  margin-top:var(--space-surface-to-copy);
}

/* The translucent collection stage previously extended 32px upward, which
   visually consumed most of the gap above the cards. Pull it back so the
   space users see matches the actual layout spacing. */
.cards3::before,
.cards2::before,
.cards4::before,
.capability-grid::before,
.kpis::before,
.team-grid::before,
.portfolio-grid::before,
.process::before{
  inset:-18px -30px -28px;
}

/* More comfortable internal padding on the site's repeated surfaces. */
.card,
.capability,
.kpi,
.step,
.notice,
.pv-grid .pv-card,
.values-grid .value{
  padding:var(--surface-pad);
}
.notice{
  line-height:1.6;
}

/* Several index pages use standalone cards rather than a grid wrapper.
   Treat those as an intentional stack instead of allowing cards to touch. */
body.wfpe-site .section > .container > .card + .card{
  margin-top:24px;
}
body.wfpe-site .section > .container > :is(p,.lead,.intro,h1,h2,h3,ul,ol) + .card{
  margin-top:var(--space-copy-to-surface);
}
body.wfpe-site .section > .container > .card + :is(p,.center-link,.notice){
  margin-top:var(--space-surface-to-copy);
}

/* Two-column service and contact layouts need enough air between prose and
   the raised surface in the adjacent column. */
.grid2{
  column-gap:clamp(38px,5vw,68px);
  row-gap:36px;
}
.grid2 > *{
  min-width:0;
}
.grid2 .notice{
  align-self:center;
}

/* Forms and accordions are large card-like surfaces; give their contents
   more room and keep labels/groups from feeling crowded. */
.form-grid,
.accordion{
  padding:clamp(24px,3vw,34px);
}
.form-grid{
  gap:18px;
}
.form-grid .full + .full,
.form-grid > div + div{
  min-width:0;
}
.accordion .head{
  padding:18px 2px;
}
.accordion .body{
  padding:0 2px 18px;
}

/* Team spacing stays generous even though its glass stage extends outside
   the actual grid box. */
.team-page .team .intro{
  margin-bottom:0;
}
.team-page .team .team-grid{
  margin-top:64px;
}
.team-page .team-card{
  padding:22px;
  gap:20px;
}

/* Project case studies: increase separation and panel padding consistently
   across every portfolio detail page. */
.project-meta{
  padding:48px 0!important;
}
.project-body{
  padding:68px 0 84px!important;
}
.project-body .layout{
  gap:clamp(28px,3.5vw,46px)!important;
}
.project-meta .card,
.project-body .card{
  padding:clamp(24px,2.6vw,32px)!important;
}
.project-meta .card h3,
.project-body .card h2{
  margin-bottom:14px;
}
.project-meta .card p,
.project-body .card p:last-child{
  margin-bottom:0;
}

/* Portfolio and capability collections always get room before their visible
   glass stage, even on pages where the wrapper already had a small margin. */
.capability-grid,
.portfolio-grid{
  margin-top:var(--space-copy-to-surface);
}

/* Legal/resource text pages: keep headings from running into preceding copy. */
body.wfpe-site .section > .container > p + h2,
body.wfpe-site .section > .container > ul + h2,
body.wfpe-site .section > .container > ol + h2{
  margin-top:38px;
}
body.wfpe-site .section > .container > h2 + h3{
  margin-top:24px;
}
body.wfpe-site .section > .container > :is(p,ul,ol) + h3{
  margin-top:28px;
}

@media(max-width:900px){
  .cards3::before,.cards2::before,.cards4::before,.capability-grid::before,.kpis::before,.team-grid::before,.portfolio-grid::before,.process::before{
    inset:-14px -12px -20px;
  }
  .team-page .team .team-grid{margin-top:52px}
}
@media(max-width:700px){
  :root{
    --space-copy-to-surface:34px;
    --space-heading-to-surface:28px;
    --space-surface-to-copy:32px;
    --surface-pad:22px;
  }
  .grid2{row-gap:30px}
  .form-grid,.accordion{padding:22px}
  .team-page .team .team-grid{margin-top:46px}
  .team-page .team-card{padding:18px;gap:16px}
  .project-meta{padding:40px 0!important}
  .project-body{padding:52px 0 66px!important}
}


/* ================================================================
   Targeted equal-card + About section-spacing fix — 2026-08-21
   ================================================================ */

/* These two index rows should read as one deliberate set. Use flex here
   instead of relying on implicit grid stretching so every card has the
   exact same top/bottom edge regardless of copy length or browser. */
.services-page .hero + .section .cards3,
.resources-page .hero + .section .cards3{
  display:flex;
  align-items:stretch;
  gap:20px;
}
.services-page .hero + .section .cards3 > .card,
.resources-page .hero + .section .cards3 > .card{
  flex:1 1 0;
  min-width:0;
  height:auto!important;
  align-self:stretch!important;
  margin:0!important;
  display:flex;
  flex-direction:column;
}
.services-page .hero + .section .cards3 > .card > p:last-child,
.resources-page .hero + .section .cards3 > .card > p:last-child{
  margin-top:auto;
  padding-top:18px;
  margin-bottom:0;
}
.services-page .hero + .section .cards3 > .card h3,
.resources-page .hero + .section .cards3 > .card h3{
  margin-top:6px;
}

/* Mission and Values are separate visual groups. Give the second heading
   a real layout gap instead of the previous <br> spacer. */
.about-page .pv-grid + .values-heading{
  margin-top:72px!important;
  margin-bottom:0;
}
.about-page .values-heading + .values-grid{
  margin-top:44px!important;
}

@media(max-width:900px){
  .services-page .hero + .section .cards3,
  .resources-page .hero + .section .cards3{
    flex-direction:column;
  }
  .services-page .hero + .section .cards3 > .card,
  .resources-page .hero + .section .cards3 > .card{
    width:100%;
  }
  .about-page .pv-grid + .values-heading{
    margin-top:58px!important;
  }
  .about-page .values-heading + .values-grid{
    margin-top:36px!important;
  }
}


/* === SERVICES DETAIL MODAL === */
.services-page .service-modal-trigger{
  position:relative;
  cursor:pointer;
  outline:none;
}
.services-page .service-modal-trigger:focus-visible{
  border-color:rgba(193,18,31,.42)!important;
  box-shadow:0 0 0 4px rgba(193,18,31,.14),var(--depth-shadow-raised)!important;
}
.services-page .hero + .section .service-modal-trigger{
  display:flex;
  flex-direction:column;
}
.services-page .service-card-cue{
  display:inline-flex!important;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:auto!important;
  padding-top:20px;
  color:var(--navy)!important;
  font-size:.78rem!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.035em;
  text-transform:uppercase;
  opacity:.62;
  transition:opacity .18s ease,color .18s ease,transform .18s ease;
}
.services-page .capability .service-card-cue{
  margin-top:18px!important;
  padding-top:0;
}
.services-page .service-modal-trigger:hover .service-card-cue,
.services-page .service-modal-trigger:focus-visible .service-card-cue{
  opacity:1;
  color:var(--red)!important;
  transform:translateX(2px);
}
.service-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:10060;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(3,13,32,.70);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.service-modal-backdrop.show{display:flex}
body.service-modal-open{overflow:hidden}
.service-detail-modal{
  position:relative;
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.48fr);
  width:min(930px,100%);
  max-height:calc(100vh - 56px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.72);
  border-radius:26px;
  background:rgba(255,255,255,.99);
  box-shadow:0 34px 100px rgba(2,13,34,.36),0 8px 30px rgba(2,13,34,.17);
}
.service-modal-close{
  position:absolute;
  z-index:4;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  border:1px solid rgba(11,28,61,.12);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--navy);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(11,28,61,.10);
}
.service-modal-close:hover{background:#fff;color:var(--red)}
.service-modal-close:focus-visible{outline:3px solid rgba(193,18,31,.24);outline-offset:2px}
.service-modal-side{
  position:relative;
  display:flex;
  min-height:500px;
  flex-direction:column;
  justify-content:center;
  padding:64px 38px 42px;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,0) 38%),
    linear-gradient(155deg,#071a3c 0%,#0b1c3d 62%,#132b58 100%);
}
.service-modal-side::before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  top:-155px;
  right:-150px;
  transform:rotate(24deg);
  background:rgba(193,18,31,.28);
  border:1px solid rgba(255,255,255,.08);
}
.service-modal-side::after{
  content:"";
  position:absolute;
  width:260px;
  height:96px;
  bottom:-50px;
  left:-82px;
  transform:rotate(-22deg);
  background:rgba(193,18,31,.18);
}
.service-modal-side-eyebrow,
.service-modal-mark,
.service-modal-category,
.service-modal-tagline{position:relative;z-index:1}
.service-modal-side-eyebrow{
  margin:0 0 24px;
  color:rgba(255,255,255,.63);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.service-modal-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:112px;
  height:112px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:24px;
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 20px 42px rgba(0,0,0,.20);
  color:#fff;
  font-size:2rem;
  line-height:1;
  font-weight:950;
  letter-spacing:.04em;
}
.service-modal-category{
  margin:30px 0 0;
  font-size:1.35rem;
  line-height:1.2;
  font-weight:900;
}
.service-modal-tagline{
  max-width:250px;
  margin:12px 0 0;
  color:rgba(255,255,255,.68);
  font-size:.84rem;
  line-height:1.55;
}
.service-modal-content{
  min-width:0;
  padding:64px 60px 44px;
}
.service-modal-eyebrow{
  margin:0 0 12px;
  color:var(--red);
  font-size:.74rem;
  line-height:1.3;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
}
.service-modal-content h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(1.9rem,3vw,2.85rem);
  line-height:1.05;
}
.service-modal-summary{
  margin:20px 0 0;
  color:#425168;
  font-size:1rem;
  line-height:1.72;
}
.service-modal-scope{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid rgba(11,28,61,.10);
}
.service-modal-scope h3{
  margin:0 0 14px;
  color:var(--navy);
  font-size:1rem;
  line-height:1.2;
}
.service-modal-scope ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 22px;
  margin:0;
  padding:0;
  list-style:none;
}
.service-modal-scope li{
  position:relative;
  min-width:0;
  padding-left:17px;
  color:#334155;
  font-size:.9rem;
  line-height:1.48;
}
.service-modal-scope li::before{
  content:"";
  position:absolute;
  top:.58em;
  left:0;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--red);
}
.service-modal-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-top:30px;
}
.service-modal-more{
  color:var(--navy);
  font-weight:900;
  text-decoration:none;
  border-bottom:1px solid rgba(11,28,61,.24);
}
.service-modal-more:hover{color:var(--red);border-color:rgba(193,18,31,.35)}
.service-modal-note{
  margin:18px 0 0;
  color:#718096;
  font-size:.76rem;
  line-height:1.5;
}
@media(max-width:820px){
  .service-modal-backdrop{padding:14px;align-items:flex-start;overflow:auto}
  .service-detail-modal{grid-template-columns:1fr;max-height:none;border-radius:22px}
  .service-modal-side{min-height:auto;padding:48px 28px 28px}
  .service-modal-mark{width:86px;height:86px;border-radius:19px;font-size:1.55rem}
  .service-modal-category{margin-top:22px}
  .service-modal-tagline{max-width:480px}
  .service-modal-content{padding:34px 26px 30px}
}
@media(max-width:560px){
  .service-modal-backdrop{padding:8px}
  .service-modal-content{padding:30px 18px 24px}
  .service-modal-side{padding:46px 20px 24px}
  .service-modal-close{top:10px;right:10px}
  .service-modal-scope ul{grid-template-columns:1fr;gap:9px}
  .service-modal-actions{align-items:stretch}
  .service-modal-actions .btn{width:100%;justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .services-page .service-card-cue,.services-page .service-modal-trigger{transition:none!important}
}

/* ================================================================
   Card content alignment system — 2026-08-21
   Keeps repeated cards visually aligned even when copy lengths differ.
   ================================================================ */

/* Primary three-up service/resource/home cards: reserve a consistent title
   zone, let the description absorb variable copy, and pin the action row. */
.cards3:not(.values-grid) > .card{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.cards3:not(.values-grid) > .card > h3{
  min-height:2.65em;
  margin-bottom:14px;
}
.cards3:not(.values-grid) > .card > p:not(:last-child){
  flex:1 1 auto;
}
.cards3:not(.values-grid) > .card > p:last-child{
  margin-top:auto;
  padding-top:20px;
}

/* The Services modal cards use a span CTA rather than a final paragraph. */
.services-page .hero + .section .cards3 > .service-modal-trigger > h3{
  min-height:2.65em;
  margin-bottom:14px;
}
.services-page .hero + .section .cards3 > .service-modal-trigger > p{
  flex:1 1 auto;
  margin-bottom:0;
}
.services-page .hero + .section .cards3 > .service-modal-trigger > .service-card-cue{
  margin-top:auto!important;
  padding-top:22px;
}

/* Capability cards: fixed title/body zones keep every cue on the same
   baseline without truncating any copy. */
.capability-grid{
  align-items:stretch;
}
.capability-grid > .capability{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
}
.capability-grid > .capability > strong:first-child{
  display:block;
  min-height:3.15em;
  line-height:1.28;
  margin-bottom:12px;
}
.capability-grid > .capability > span:not(.service-card-cue){
  display:block;
  flex:1 1 auto;
  min-height:4.8em;
}
.capability-grid > .capability > .service-card-cue{
  margin-top:auto!important;
  padding-top:18px!important;
}

/* Portfolio cards share four content zones: meta, title, service, body + CTA. */
.portfolio-grid{
  align-items:stretch;
}
.portfolio-grid > .card{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
}
.portfolio-grid > .card > .project-card-meta{
  min-height:2.1em;
}
.portfolio-grid > .card > h3{
  min-height:3.0em;
  margin-bottom:12px;
}
.portfolio-grid > .card > p:nth-of-type(1){
  min-height:3.1em;
  margin-bottom:12px;
}
.portfolio-grid > .card > p:nth-of-type(2){
  flex:1 1 auto;
}
.portfolio-grid > .card > p:last-child{
  margin-top:auto;
  padding-top:20px;
}

/* About cards: reserve consistent icon/title space so copy begins together. */
.about-page .pv-grid > .pv-card,
.about-page .values-grid > .value{
  display:flex;
  flex-direction:column;
  height:100%;
}
.about-page .pv-grid > .pv-card > .icon,
.about-page .values-grid > .value > .icon{
  flex:0 0 auto;
}
.about-page .pv-grid > .pv-card > h3,
.about-page .values-grid > .value > h3{
  min-height:2.65em;
  display:flex;
  align-items:flex-start;
}
.about-page .pv-grid > .pv-card > p,
.about-page .values-grid > .value > p{
  flex:1 1 auto;
}

/* On narrow screens cards stack, so reserved desktop line zones would just
   create artificial whitespace. Let content return to natural height. */
@media(max-width:760px){
  .cards3:not(.values-grid) > .card > h3,
  .services-page .hero + .section .cards3 > .service-modal-trigger > h3,
  .capability-grid > .capability > strong:first-child,
  .capability-grid > .capability > span:not(.service-card-cue),
  .portfolio-grid > .card > .project-card-meta,
  .portfolio-grid > .card > h3,
  .portfolio-grid > .card > p:nth-of-type(1),
  .about-page .pv-grid > .pv-card > h3,
  .about-page .values-grid > .value > h3{
    min-height:0;
  }
}

/* Service modal action alignment — 2026-08-21
   Keep proposal CTA beneath scope column 1 and related-service link beneath column 2. */
@media(min-width:561px){
  .service-modal-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:22px;
    row-gap:12px;
    align-items:center;
  }
  .service-modal-actions .btn{
    justify-self:start;
  }
  .service-modal-actions .service-modal-more{
    justify-self:start;
  }
}
@media(max-width:560px){
  .service-modal-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  .service-modal-actions .service-modal-more{
    justify-self:start;
  }
}

/* Proposal/upload dropzone spacing — 2026-08-21
   Separate the native file-picker surface from its drag/drop helper copy. */
.dropzone > input[type="file"]{
  display:block;
  margin:0 0 16px;
}
.dropzone > div{
  margin-top:0;
  line-height:1.45;
}
@media(max-width:560px){
  .dropzone > input[type="file"]{
    margin-bottom:14px;
  }
}

/* ==========================================================
   CONTACT PAGE — REIMAGINED
   ========================================================== */
.contact-page .cta-rail{display:none}
.contact-page main{overflow:hidden}
.contact-page .contact-eyebrow,
.contact-page .contact-router-kicker,
.contact-page .contact-card-kicker{
  margin:0 0 12px;
  color:var(--red);
  font-size:12px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.contact-hero{
  position:relative;
  padding:64px 0 58px;
}
.contact-hero::before{
  content:"";
  position:absolute;
  width:760px;
  height:420px;
  right:-290px;
  top:-120px;
  transform:rotate(-10deg);
  background:linear-gradient(135deg,rgba(11,28,61,.055),rgba(11,28,61,.012) 58%,transparent);
  border:1px solid rgba(11,28,61,.035);
  pointer-events:none;
}
.contact-hero-shell{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);
  overflow:hidden;
  border:1px solid rgba(11,28,61,.10);
  border-radius:30px;
  background:#fff;
  box-shadow:0 28px 70px rgba(11,28,61,.13);
}
.contact-hero-copy{
  position:relative;
  padding:clamp(44px,5vw,72px);
  min-width:0;
  background:
    radial-gradient(circle at 8% 92%,rgba(193,18,31,.045),transparent 31%),
    #fff;
}
.contact-hero-copy::after{
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  left:-175px;
  bottom:-165px;
  border:1px solid rgba(193,18,31,.07);
  transform:rotate(45deg);
}
.contact-hero-copy h1{
  max-width:720px;
  margin:0;
  color:var(--navy);
  font-size:clamp(42px,5.2vw,72px);
  line-height:.99;
  letter-spacing:-.045em;
}
.contact-hero-lead{
  max-width:720px;
  margin:26px 0 0;
  color:#536079;
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.72;
}
.contact-hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:22px;
  margin-top:32px;
}
.contact-call-link{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:160px;
  color:var(--navy);
  text-decoration:none;
}
.contact-call-link:hover{text-decoration:none}
.contact-call-label{
  color:#7a8498;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.contact-call-link strong{font-size:17px}
.contact-service-line{
  max-width:700px;
  margin:34px 0 0;
  padding-top:20px;
  border-top:1px solid rgba(11,28,61,.09);
  color:#7b8495;
  font-size:12px;
  font-weight:750;
  line-height:1.6;
  letter-spacing:.02em;
}
.contact-router{
  position:relative;
  isolation:isolate;
  padding:clamp(38px,4vw,58px);
  color:#fff;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.12),transparent 34%),
    radial-gradient(circle at 10% 100%,rgba(193,18,31,.24),transparent 42%),
    linear-gradient(145deg,#08172f,#10264e);
}
.contact-router::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:300px;
  height:300px;
  right:-155px;
  top:-145px;
  border:1px solid rgba(255,255,255,.10);
  transform:rotate(45deg);
  box-shadow:0 0 0 56px rgba(255,255,255,.018);
}
.contact-router .contact-router-kicker{color:#ff8a93}
.contact-router h2{
  margin:0 0 26px;
  color:#fff;
  font-size:clamp(28px,3vw,42px);
  letter-spacing:-.03em;
}
.contact-route-list{display:grid;gap:12px}
.contact-route{
  display:grid;
  grid-template-columns:minmax(0,1fr) 30px;
  gap:16px;
  align-items:center;
  min-width:0;
  padding:20px 18px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:17px;
  color:#fff;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.contact-route:hover{
  transform:translateY(-2px);
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.25);
}
.contact-route span:first-child{min-width:0}
.contact-route strong{display:block;font-size:16px;line-height:1.35}
.contact-route small{display:block;margin-top:6px;color:rgba(255,255,255,.67);font-size:13px;line-height:1.48}
.contact-route-arrow{font-size:25px;font-weight:300;text-align:right}

.contact-message-section{padding-top:78px!important}
.contact-section-heading{max-width:790px;margin:0 0 34px}
.contact-section-heading h2,
.contact-process-header h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(34px,4vw,52px);
  line-height:1.05;
  letter-spacing:-.035em;
}
.contact-section-heading>p:last-child{
  max-width:720px;
  margin:18px 0 0;
  color:#667085;
  font-size:17px;
  line-height:1.65;
}
.contact-workspace{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr);
  gap:28px;
  align-items:start;
}
.contact-form-card{
  position:relative;
  overflow:hidden;
  padding:clamp(28px,4vw,46px);
  border:1px solid rgba(11,28,61,.10);
  border-radius:26px;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 62px rgba(11,28,61,.12);
}
.contact-form-card::before{
  content:"";
  position:absolute;
  width:300px;
  height:170px;
  right:-95px;
  top:-85px;
  transform:rotate(-9deg);
  background:linear-gradient(135deg,rgba(11,28,61,.055),rgba(11,28,61,.008));
  border:1px solid rgba(11,28,61,.035);
  pointer-events:none;
}
.contact-form-intro{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.7fr);
  gap:28px;
  align-items:end;
  margin-bottom:28px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(11,28,61,.09);
}
.contact-form-intro>div{display:flex;align-items:center;gap:14px}
.contact-form-number{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:13px;
  color:#fff;
  background:var(--navy);
  font-size:12px;
  font-weight:900;
  letter-spacing:.07em;
}
.contact-form-intro h3{margin:0;color:var(--navy);font-size:25px;letter-spacing:-.02em}
.contact-form-intro p{margin:0;color:#778195;font-size:13px;line-height:1.55}
.contact-form-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 18px;
}
.contact-form-full{grid-column:1/-1}
.contact-form-card label{margin-bottom:8px;color:#1a2540}
.contact-optional{margin-left:6px;color:#8b94a7;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea{
  border-radius:12px;
  border:1px solid rgba(11,28,61,.14)!important;
  background:#fff!important;
  box-shadow:0 4px 14px rgba(11,28,61,.035)!important;
}
.contact-form-card textarea{resize:vertical;min-height:160px}
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus{
  outline:3px solid rgba(193,18,31,.10);
  border-color:rgba(193,18,31,.45)!important;
}
.contact-submit-row{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding-top:4px;
}
.contact-submit-row>span{max-width:350px;color:#788297;font-size:12px;line-height:1.5}
.contact-side-stack{display:grid;gap:20px}
.contact-person-card,
.contact-office-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(11,28,61,.10);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 22px 55px rgba(11,28,61,.11);
}
.contact-person-card{padding:26px}
.contact-person-card::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  right:-105px;
  bottom:-105px;
  transform:rotate(45deg);
  background:rgba(193,18,31,.055);
  border:1px solid rgba(193,18,31,.08);
}
.contact-person-top{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;align-items:center}
.contact-person-top img{width:88px;height:88px;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 10px 26px rgba(11,28,61,.18)}
.contact-person-label{display:block;margin-bottom:5px;color:var(--red);font-size:10px;font-weight:900;letter-spacing:.08em}
.contact-person-top h3{margin:0;color:var(--navy);font-size:20px}
.contact-person-top p{margin:4px 0 0;color:#6c768a;font-size:13px;line-height:1.4}
.contact-person-copy{position:relative;z-index:1;margin:20px 0;color:#566176;font-size:14px;line-height:1.6}
.contact-person-links,
.contact-office-links{position:relative;z-index:1;display:grid;gap:0;border-top:1px solid rgba(11,28,61,.08)}
.contact-person-links a,
.contact-office-links a{
  display:grid;
  gap:3px;
  padding:15px 0;
  color:var(--navy);
  border-bottom:1px solid rgba(11,28,61,.07);
  text-decoration:none;
}
.contact-person-links a:last-child,
.contact-office-links a:last-child{border-bottom:0;padding-bottom:0}
.contact-person-links span,
.contact-office-links span{color:#8a93a6;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.contact-person-links strong,
.contact-office-links strong{overflow-wrap:anywhere;font-size:14px;line-height:1.4}
.contact-office-card{padding:28px;background:linear-gradient(145deg,#0b1c3d,#112a54)!important;color:#fff}
.contact-office-card .contact-card-kicker{color:#ff8991}
.contact-office-card h3{margin:0 0 12px;color:#fff;font-size:28px;letter-spacing:-.025em}
.contact-office-card address{margin:0 0 22px;color:rgba(255,255,255,.74);font-style:normal;line-height:1.65}
.contact-office-card .contact-office-links{border-top-color:rgba(255,255,255,.13)}
.contact-office-card .contact-office-links a{color:#fff;border-bottom-color:rgba(255,255,255,.10)}
.contact-office-card .contact-office-links span{color:rgba(255,255,255,.48)}

.contact-process-section{padding-top:64px!important;padding-bottom:86px!important}
.contact-process-header{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.65fr);
  gap:50px;
  align-items:end;
  margin-bottom:32px;
}
.contact-process-header>p{margin:0;color:#687286;font-size:15px;line-height:1.65}
.contact-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.contact-process-step{
  position:relative;
  min-height:250px;
  padding:30px 28px;
  overflow:hidden;
  border:1px solid rgba(11,28,61,.10);
  border-radius:22px;
  background:rgba(255,255,255,.95);
  box-shadow:0 18px 44px rgba(11,28,61,.09);
}
.contact-process-step::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--red),rgba(193,18,31,.10));
}
.contact-process-step>span{display:block;margin-bottom:42px;color:rgba(11,28,61,.26);font-size:38px;font-weight:950;letter-spacing:-.04em}
.contact-process-step h3{margin:0 0 10px;color:var(--navy);font-size:21px;letter-spacing:-.02em}
.contact-process-step p{margin:0;color:#667085;font-size:14px;line-height:1.62}

.contact-final-cta{padding:0 0 54px}
.contact-final-cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  padding:40px 44px;
  overflow:hidden;
  position:relative;
  border-radius:26px;
  color:#fff;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.10),transparent 34%),
    linear-gradient(135deg,#08172f,#10264e);
  box-shadow:0 25px 62px rgba(11,28,61,.20);
}
.contact-final-cta-inner::after{
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  right:-160px;
  bottom:-170px;
  border:1px solid rgba(255,255,255,.10);
  transform:rotate(45deg);
}
.contact-final-cta .contact-router-kicker{color:#ff8991}
.contact-final-cta h2{margin:0;color:#fff;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em}
.contact-final-cta p:last-child{max-width:680px;margin:10px 0 0;color:rgba(255,255,255,.67);font-size:14px;line-height:1.6}
.contact-final-actions{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto}

@media(max-width:980px){
  .contact-hero-shell{grid-template-columns:1fr}
  .contact-router{padding:36px}
  .contact-route-list{grid-template-columns:repeat(3,1fr)}
  .contact-route{grid-template-columns:1fr;align-content:space-between;min-height:165px}
  .contact-route-arrow{text-align:left}
  .contact-workspace{grid-template-columns:1fr}
  .contact-side-stack{grid-template-columns:1fr 1fr}
  .contact-process-header{grid-template-columns:1fr;gap:18px}
}
@media(max-width:760px){
  .contact-hero{padding:30px 0 42px}
  .contact-hero-shell{border-radius:22px}
  .contact-hero-copy{padding:34px 24px}
  .contact-hero-copy h1{font-size:clamp(38px,12vw,54px)}
  .contact-router{padding:30px 24px}
  .contact-route-list{grid-template-columns:1fr}
  .contact-route{grid-template-columns:minmax(0,1fr) 26px;min-height:0}
  .contact-route-arrow{text-align:right}
  .contact-message-section{padding-top:52px!important}
  .contact-form-intro{grid-template-columns:1fr;gap:14px}
  .contact-form-grid{grid-template-columns:1fr;gap:17px}
  .contact-form-full{grid-column:auto}
  .contact-side-stack{grid-template-columns:1fr}
  .contact-process-grid{grid-template-columns:1fr}
  .contact-process-step{min-height:0}
  .contact-process-step>span{margin-bottom:26px}
  .contact-final-cta-inner{align-items:flex-start;flex-direction:column;padding:32px 26px}
  .contact-final-actions{width:100%}
}
@media(max-width:480px){
  .contact-hero-actions{align-items:flex-start;flex-direction:column}
  .contact-hero-actions .btn{width:100%;justify-content:center}
  .contact-person-top{grid-template-columns:76px minmax(0,1fr)}
  .contact-person-top img{width:76px;height:76px}
  .contact-final-actions{display:grid;grid-template-columns:1fr}
  .contact-final-actions .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .contact-route{transition:none}
}


/* HOME CLIENT REVIEW SLIDER */
.client-reviews-section{
  position:relative;
  overflow:hidden;
  padding-top:76px!important;
  padding-bottom:82px!important;
  /* Deliberately red-biased ambient treatment for the testimonial section. */
  background-image:
    radial-gradient(ellipse 760px 470px at 108% 16%, rgba(193,18,31,.095), transparent 64%),
    linear-gradient(128deg, transparent 0 63%, rgba(193,18,31,.070) 63% 73%, transparent 73% 100%),
    radial-gradient(ellipse 640px 360px at -6% 88%, rgba(193,18,31,.050), transparent 68%) !important;
}
.client-reviews-section::before{
  content:"";
  position:absolute;
  width:min(66vw,880px);
  height:330px;
  right:-18%;
  top:-18px;
  border-radius:48% 52% 44% 56% / 56% 42% 58% 44%;
  transform:rotate(-9deg) skewX(-8deg);
  background:linear-gradient(135deg,rgba(193,18,31,.105),rgba(193,18,31,.045) 58%,rgba(193,18,31,.010));
  border:1px solid rgba(193,18,31,.090);
  box-shadow:0 34px 90px rgba(193,18,31,.055);
  pointer-events:none;
}
.client-reviews-section::after{
  content:"";
  position:absolute;
  width:min(58vw,760px);
  height:230px;
  left:-20%;
  bottom:-34px;
  transform:rotate(8deg) skewX(12deg);
  background:linear-gradient(132deg,rgba(193,18,31,.082),rgba(193,18,31,.034) 55%,transparent 82%);
  border:1px solid rgba(193,18,31,.070);
  box-shadow:0 32px 78px rgba(193,18,31,.045);
  pointer-events:none;
}
.client-reviews-heading{
  position:relative;
  z-index:1;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:36px;
  margin-bottom:30px;
}
.reviews-eyebrow{
  display:block;
  margin-bottom:9px;
  color:var(--red);
  font-size:11px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.client-reviews-heading h2{
  margin:0;
  color:var(--navy);
  font-size:clamp(34px,4.1vw,52px);
  line-height:1.03;
  letter-spacing:-.035em;
}
.client-reviews-heading>p{
  max-width:430px;
  margin:0 0 3px;
  color:#687286;
  font-size:15px;
  line-height:1.6;
}
.client-review-slider{
  position:relative;
  z-index:1;
  overflow:hidden;
  border:1px solid rgba(11,28,61,.12);
  border-radius:28px;
  background:#fff;
  box-shadow:0 28px 68px rgba(11,28,61,.13);
  outline:none;
}
.client-review-slider:focus-visible{box-shadow:0 0 0 4px rgba(193,18,31,.12),0 28px 68px rgba(11,28,61,.13)}
.client-review-stage{
  position:relative;
  height:500px;
  min-height:500px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 100%,rgba(193,18,31,.045),transparent 34%),
    linear-gradient(135deg,#fff,#fbfcff);
}
.client-review-slide{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:46px;
  align-items:stretch;
  height:100%;
  padding:54px 58px 48px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(18px);
  transition:opacity .38s ease,transform .38s ease,visibility .38s step-end;
}
.client-review-slide.is-active{
  position:relative;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:opacity .38s ease,transform .38s ease,visibility 0s step-start;
}
.client-review-quote{
  display:grid;
  grid-template-rows:auto 1fr;
  align-content:start;
  min-width:0;
  padding-right:10px;
}
.client-review-stars{
  margin-bottom:22px;
  color:#c1121f;
  font-size:20px;
  line-height:1;
  letter-spacing:.12em;
}
.client-review-quote blockquote{
  position:relative;
  margin:0;
  color:#16213d;
  font-size:22px;
  font-weight:650;
  line-height:1.48;
  letter-spacing:-.018em;
}
.client-review-person{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  padding:32px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.10),transparent 34%),
    linear-gradient(145deg,#0b1c3d,#112b56);
  border-radius:22px;
}
.client-review-person::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-105px;
  top:-100px;
  transform:rotate(45deg);
  background:rgba(193,18,31,.19);
  border:1px solid rgba(255,255,255,.07);
}
.client-review-person::before{
  content:"“";
  position:relative;
  z-index:1;
  display:block;
  margin-bottom:auto;
  color:rgba(255,255,255,.13);
  font-family:Georgia,"Times New Roman",serif;
  font-size:112px;
  font-weight:700;
  line-height:.72;
}
.client-review-person>div:last-child{position:relative;z-index:1;display:grid;gap:5px;margin-top:auto}
.client-review-person strong{font-size:20px;line-height:1.25}
.client-review-person span{color:rgba(255,255,255,.63);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.client-review-controls{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:26px;
  min-height:68px;
  padding:12px 26px;
  border-top:1px solid rgba(11,28,61,.09);
  background:#0b1c3d;
}
.client-review-arrows{display:flex;gap:8px}
.client-review-arrow{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#fff;
  background:transparent;
  cursor:pointer;
  font:inherit;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.client-review-arrow:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.38);transform:translateY(-1px)}
.client-review-arrow:focus-visible{outline:3px solid rgba(255,255,255,.25);outline-offset:2px}
.client-review-dots{display:flex;justify-content:center;gap:9px}
.client-review-dot{
  width:34px;
  height:4px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.30);
  cursor:pointer;
  transition:background .18s ease,width .18s ease;
}
.client-review-dot.is-active{width:48px;background:var(--red)}
.client-review-dot:focus-visible{outline:2px solid #fff;outline-offset:4px}
.client-review-count{display:flex;gap:7px;color:rgba(255,255,255,.62);font-size:12px;font-weight:850;letter-spacing:.08em}
.client-review-count [data-review-current]{color:#fff}
@media(max-width:900px){
  .client-review-slide{grid-template-columns:minmax(0,1fr) 245px;gap:28px;padding:42px}
  .client-review-stage{height:480px;min-height:480px}
  .client-review-quote blockquote{font-size:18px;line-height:1.44}
  .client-review-person{padding:26px}
}
@media(max-width:820px){
  .client-reviews-section{padding-top:58px!important;padding-bottom:64px!important}
  .client-reviews-heading{display:block;margin-bottom:24px}
  .client-reviews-heading>p{margin-top:14px}
  .client-review-stage{height:auto;min-height:0}
  .client-review-slide{position:absolute;height:auto;grid-template-columns:1fr;gap:24px;padding:30px 24px 26px}
  .client-review-slide.is-active{position:relative}
  .client-review-person{min-height:132px;display:flex;flex-direction:column;padding:24px}
  .client-review-person::before{font-size:76px;line-height:.68}
  .client-review-person>div:last-child{align-self:stretch}
  .client-review-quote blockquote{font-size:20px;line-height:1.48}
  .client-review-controls{grid-template-columns:auto 1fr auto;gap:14px;padding:12px 16px}
  .client-review-dots{gap:6px}
  .client-review-dot{width:16px}
  .client-review-dot.is-active{width:28px}
}
@media(max-width:820px){
  .client-reviews-section::before{width:620px;height:270px;right:-420px;top:10px}
  .client-reviews-section::after{width:520px;height:190px;left:-360px;bottom:-22px}
}
@media(max-width:430px){
  .client-review-slide{padding:26px 20px 22px}
  .client-review-controls{grid-template-columns:auto 1fr;grid-template-areas:"arrows count" "dots dots";row-gap:10px}
  .client-review-arrows{grid-area:arrows}
  .client-review-count{grid-area:count;justify-self:end}
  .client-review-dots{grid-area:dots}
}
@media(prefers-reduced-motion:reduce){
  .client-review-slide,.client-review-arrow,.client-review-dot{transition:none}
}