/* ============================================================================
   become-an-engineer.styles.css — page-specific styling (.be-*).
   Shared foundation from home.styles.css; form UI from src/shared/forms.css.
   ============================================================================ */

/* ---- scroll reveal (JS only) --------------------------------------------- */
html.js .be-rev{opacity:0;transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--d,0ms),transform .7s cubic-bezier(.22,.61,.36,1) var(--d,0ms)}
html.js .be-rev.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .be-rev{opacity:1;transform:none;transition:none}}

/* ---- HERO (navy) --------------------------------------------------------- */
.be-hero{position:relative;background:var(--ink,#0A1F4D);color:#fff;overflow:hidden;
  padding:clamp(108px,12vh,140px) 0 clamp(34px,4vw,52px)}
.be-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 130% at 90% -14%,rgba(236,184,76,.20),transparent 55%)}
.be-hero-inner{position:relative;z-index:1}
.be-crumb{margin:0 0 20px}
.be-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5ch;margin:0;padding:0;
  font-family:'PlexMono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.6)}
.be-crumb li+li::before{content:"/";opacity:.4;margin-right:.4ch}
.be-crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.be-crumb a:hover{color:#fff;text-decoration:underline}
.be-crumb [aria-current="page"]{color:var(--amber,#ECB84C)}
.be-hero-copy{max-width:62ch}
.be-hero .be-eyebrow .etrack span,.be-hero .be-eyebrow .etrack i{color:var(--amber,#ECB84C)}
.be-hero h1{font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(2.4rem,5.6vw,4rem);line-height:1.02;letter-spacing:-.015em;margin:6px 0 0;color:#fff}
.be-hero h1 .r{color:var(--amber,#ECB84C)}
.be-lead{margin:18px 0 0;max-width:66ch;font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.62;color:rgba(255,255,255,.8)}
.be-trust{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0;padding:0}
.be-trust li{font-family:'PlexMono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 12px}
.be-hero-contact{display:flex;flex-wrap:wrap;gap:12px 26px;margin:24px 0 0}
.be-hero-contact a{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:600;font-size:.96rem;
  border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
.be-hero-contact a:hover{color:var(--amber,#ECB84C);border-bottom-color:var(--amber,#ECB84C)}
.be-hero-contact .be-ci{display:grid;place-items:center;width:18px;height:18px;color:var(--amber,#ECB84C)}
.be-hero-contact .be-ci svg{width:18px;height:18px}

/* ---- centred hero (matches the page's centred rhythm) -------------------- */
.be-hero-copy{max-width:74ch;margin-left:auto;margin-right:auto;text-align:center}
.be-crumb ol{justify-content:center}
.be-hero .be-eyebrow{margin-left:auto;margin-right:auto}
.be-lead{margin-left:auto;margin-right:auto}
.be-trust{justify-content:center}
.be-hero-contact{justify-content:center}

/* ---- WHY PARTNER (light) ------------------------------------------------- */
.be-why{background:#fff;padding:clamp(50px,7vw,88px) 0 clamp(18px,2.4vw,30px)}
.be-why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.be-wcard{background:#f7f9fc;border:1px solid rgba(10,31,77,.10);border-radius:18px;padding:clamp(22px,3vw,34px)}
.be-wcard .be-eyebrow.d .etrack span,.be-wcard .be-eyebrow.d .etrack i{color:var(--red,#C8102E)}
.be-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:13px}
.be-list li{position:relative;padding-left:30px;color:#33455f;font-size:1rem;line-height:1.55}
.be-list li b{color:#0A1F4D}
.be-list li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;
  background:var(--amber,#ECB84C);transform:translateY(-50%)}
.be-check li::before{content:"";left:0;top:.15em;width:18px;height:18px;border-radius:0;background:none;transform:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px}
.be-why-foot{max-width:80ch;margin:clamp(20px,3vw,32px) auto 0;text-align:center;color:#41526d;font-size:1.02rem;line-height:1.62}

/* ---- FORM SECTION (light-blue) ------------------------------------------- */
.be-formsec{background:#e3ebf8;padding:clamp(38px,5vw,60px) 0 clamp(52px,7vw,92px)}
.be-formhead{max-width:920px;margin:0 auto clamp(24px,3.4vw,38px);padding:0 clamp(18px,4vw,24px)}
.be-formhead .be-eyebrow.d .etrack span,.be-formhead .be-eyebrow.d .etrack i{color:var(--red,#C8102E)}
.be-formhead h2{font-family:'Manrope',system-ui,sans-serif;font-weight:800;color:#0A1F4D;
  font-size:clamp(1.9rem,3.8vw,2.8rem);line-height:1.06;letter-spacing:-.01em;margin:10px 0 0}
.be-formhead p{margin:12px 0 0;max-width:64ch;color:#41526d;font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.6}

/* ---- ACCREDITATIONS strip ------------------------------------------------ */
.be-accred{background:#e3ebf8;padding:clamp(8px,2vw,20px) 0 clamp(34px,5vw,58px)}

@media (max-width:820px){ .be-why-grid{grid-template-columns:1fr} }