/* careers — page-specific styles */
@media (max-width:1180px){.nav-dd{flex-direction:column;align-items:flex-start;width:100%}.nav-dd .caret{display:none}.nav-dd .dd{position:static;opacity:1;visibility:visible;transform:none;margin:8px 0 0;padding:0 0 0 14px;background:transparent;border:none;box-shadow:none;min-width:0;border-left:1px solid rgba(255,255,255,.18)}.nav-dd::after{display:none}.menu .nav-dd .dd a{color:rgba(255,255,255,.82);padding:8px 0}.menu .nav-dd .dd a:hover{background:transparent;color:#fff}}
@media (max-width:1429px){.hero-logo{display:none}body.home .brand{opacity:1;pointer-events:auto}}
@media (max-width:1180px){
  .menu{position:fixed;inset:84px 0 auto 0;flex-direction:column;background:var(--ink-blue);padding:22px var(--pad) 30px;gap:22px;align-items:flex-start;transform:translateY(-130%);transition:transform .3s;height:auto;max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  header.scrolled .menu{background:#fff;border-bottom:1px solid var(--hair)}
  .menu.open{transform:translateY(0)}
  .menu a{font-size:16px;color:#fff}header.scrolled .menu a{color:var(--muted)}
  .menu .nav-cta{align-self:stretch;justify-content:center;font-size:15px;padding:14px}
  .burger{display:flex}
}
.hero{min-height:100vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;
  padding-top:150px;padding-bottom:clamp(120px,14vw,190px)}
.hero .bg{position:absolute;inset:0;z-index:0;background:#101C3A center/cover no-repeat;background-image:var(--hero-img,none)}
.h-title{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:clamp(54px,10vw,140px);line-height:.86;letter-spacing:-.04em;color:#fff;margin:0}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media (max-width:980px){.h-vlabel,.scrollcue{display:none}}
@media (prefers-reduced-motion:reduce){.scrollcue .bar{animation:none}}
.stats-wrap{position:relative;z-index:10;margin-top:clamp(-90px,-8vw,-70px);padding-bottom:clamp(30px,5vw,60px)}
@media (max-width:820px){.stats-float{grid-template-columns:1fr 1fr}.sf{border-left:1px solid var(--hair);border-top:1px solid var(--hair)}.sf:nth-child(-n+2){border-top:none}.sf:nth-child(odd){border-left:none}}
.trades{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:820px){.svc-head{grid-template-columns:1fr;gap:14px}.trades{grid-template-columns:1fr}.svc-grid{grid-template-columns:1fr}}
@keyframes pulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.play::before{animation:none}}
@media (max-width:900px){.story-in{grid-template-columns:1fr;gap:34px}}
.htl{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:40px;position:relative}
.htl::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:linear-gradient(90deg,var(--blue),var(--orange))}
.ht{position:relative;padding-top:38px}
.ht::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--blue)}
.ht:last-child::before{background:var(--orange);border-color:var(--orange-deep)}
.ht .yr{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--orange-deep)}
.ht h3{font-weight:800;font-size:20px;margin:10px 0 8px;letter-spacing:-.01em}
.ht p{color:var(--muted);margin:0;font-size:14.5px;line-height:1.55}
@media (max-width:860px){
  .htl{grid-template-columns:1fr;gap:0;margin-top:40px;padding-left:34px}
  .htl::before{left:6px;right:auto;top:6px;bottom:6px;width:2px;height:auto;background:linear-gradient(180deg,var(--blue),var(--orange))}
  .ht{padding:0 0 40px 6px}
  .ht::before{left:-34px;top:3px}
}
@media (max-width:900px){.tgrid{grid-template-columns:1fr}}
@media (max-width:900px){.cgrid{grid-template-columns:1fr;gap:40px}.two{grid-template-columns:1fr}}
@media (max-width:820px){.ft{grid-template-columns:1fr 1fr}.fb{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.page-banner{position:relative;overflow:hidden;color:#fff;padding-top:clamp(148px,19vh,188px);padding-bottom:clamp(64px,8vw,94px);background:#101C3A center/cover no-repeat}
.tcard2{display:block;border-radius:22px;padding:36px;border:1px solid var(--hair);background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;overflow:hidden}
.tcard2.a::before{background:var(--blue)}
.tcard2 .ico{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px;color:#fff}
.tcard2 p{color:var(--muted);font-size:15px;margin:16px 0 20px;line-height:1.55}
.tcard2 .go{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:gap .2s}
@media (max-width:820px){.tcards{grid-template-columns:1fr}}
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.wcard .wi{width:50px;height:50px;border-radius:14px;background:rgba(11,99,224,.10);border:1px solid rgba(11,99,224,.22);display:grid;place-items:center;color:var(--orange-deep);margin-bottom:20px}
@media (max-width:900px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.why{grid-template-columns:1fr}}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
@media (max-width:820px){.values{grid-template-columns:1fr}}
.rsum{display:flex;align-items:center;gap:30px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--hair);border-radius:20px;padding:32px 36px;margin-bottom:42px}
.rsum .big{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:60px;color:var(--blue-deep);line-height:1;letter-spacing:-.03em}
.rsum .rmeta{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.hero .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.esop-r p{color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.62;margin:0 0 14px}
.esop-r p:last-child{margin-bottom:0}
@media(max-width:820px){.esop-band{grid-template-columns:1fr;gap:24px}}
.page-banner{background-image:url(../images/background-01.jpg)}

/* ═══════════════════════════════════════════════════════════════════════════
   Careers page — layout matched to elevatemyhome.com/careers (Oct 2026)
     1. solid banner, centred, with a white listings card sitting inside it
     2. two columns: copy left, square image right, hairline under the heading
     3. white centred CTA with a faint brand watermark on the right
     4. closing colour band: one line of copy + a button
   Elite's own colours, type and components throughout. All new rules are
   prefixed .cr- so they cannot collide with shared classes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* wider container for this page only — the site default of 1200px left a lot
   of dead space on large screens. The nav is already full-bleed; this widens
   the content and the footer together so they stay aligned. */
:root{--maxw:1920px;--pad:clamp(22px,7vw,132px)}

/* ── 1. banner + listings card ──────────────────────────────────────────── */
.cr-hero{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:#101C3A center/cover no-repeat;background-image:url(../images/background-01.jpg);
  padding-top:clamp(140px,18vh,180px);padding-bottom:clamp(56px,7vw,86px)}
/* centred content, so the veil is symmetrical rather than the left-weighted
   one the other page banners use */
.cr-hero::after{content:"";position:absolute;inset:0;z-index:0;background:
  linear-gradient(180deg,rgba(16,28,58,.78) 0%,rgba(16,28,58,.42) 46%,rgba(16,28,58,.86) 100%),
  linear-gradient(90deg,rgba(16,28,58,.42),rgba(16,28,58,.06) 50%,rgba(16,28,58,.42))}
.cr-hero .wrap{position:relative;z-index:1}
.cr-hero h1{color:#fff;font-weight:900;font-size:clamp(40px,6.5vw,80px);letter-spacing:-.035em;line-height:.94;margin:0}
.cr-lede{color:rgba(255,255,255,.84);font-size:clamp(16px,1.8vw,19px);line-height:1.55;margin:22px auto 0;max-width:62ch}
.cr-leadin{color:#fff;font-weight:600;font-size:clamp(15px,1.7vw,17.5px);letter-spacing:0;margin:16px auto 0}

.cr-card{background:#fff;border-radius:18px;text-align:left;
  padding:clamp(24px,3.4vw,46px) clamp(22px,3.4vw,46px) clamp(30px,4vw,56px);
  margin-top:clamp(34px,4.5vw,54px);box-shadow:0 34px 80px rgba(5,12,28,.34)}

.cr-list{display:flex;flex-direction:column}
.cr-job{position:relative;border-bottom:1px solid var(--hair);scroll-margin-top:110px;
  transition:background .28s ease}
.cr-job:first-child{border-top:1px solid var(--hair)}
/* accent bar wipes in from the centre on hover and stays while the row is open */
.cr-job::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
  background:var(--orange);transform:scaleY(0);transform-origin:center;transition:transform .32s ease}
.cr-job:hover::before,.cr-job[open]::before{transform:scaleY(1)}
.cr-job:hover{background:var(--soft-2)}
.cr-job[open]{background:var(--soft-2)}

.cr-sum{list-style:none;cursor:pointer;user-select:none;display:block;
  padding:22px 20px 22px 18px;transition:padding-left .28s ease}
.cr-job:hover .cr-sum,.cr-job[open] .cr-sum{padding-left:28px}
.cr-sum::-webkit-details-marker{display:none}
.cr-sum::marker{content:""}
.cr-sum:focus-visible{outline:2px solid var(--orange);outline-offset:-3px;border-radius:8px}
.cr-name{font-size:19.5px;font-weight:800;color:var(--blue-deep);letter-spacing:-.01em;
  margin:0;line-height:1.3;transition:color .2s}
.cr-job:hover .cr-name{color:var(--blue)}

/* location and department sit together on one line, so the department is read
   with the role rather than hunted for on the far side of the row */
.cr-loc{display:flex;align-items:center;flex-wrap:wrap;gap:6px 5px;
  font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.5}
.cr-loc>b{color:var(--ink);font-weight:700}
/* blue at rest, warming to the site's amber on hover with the rest of the row */
.cr-dept{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;
  font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;letter-spacing:.02em;color:var(--blue);
  background:rgba(42,74,132,.07);border:1px solid rgba(42,74,132,.30);
  border-radius:100px;padding:5px 14px;margin-left:10px;
  transition:background .25s,border-color .25s,color .25s}
.cr-dept b{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:inherit;transition:color .25s}
.cr-job:hover .cr-dept{color:var(--orange-deep);
  background:rgba(11,99,224,.17);border-color:rgba(11,99,224,.58)}

.cr-toggle{display:inline-block;margin-top:11px;font-size:13.5px;
  font-weight:700;color:var(--blue);transition:color .2s;position:relative}
.cr-toggle::before{content:"+ View details"}
.cr-job[open] .cr-toggle::before{content:"\2212 Hide details"}
.cr-toggle::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.cr-sum:hover .cr-toggle{color:var(--blue-deep)}
.cr-sum:hover .cr-toggle::after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){
  .cr-job,.cr-job::before,.cr-sum,.cr-name,.cr-toggle,.cr-toggle::after,.cr-dept{transition:none}
}

/* The open panel used to begin 4px under the summary row, so the detail ran
   straight into "Hide details" with nothing to separate them. It now sits in
   from the same 28px the open row uses, under a hairline, with real room top
   and bottom. */
.cr-body{padding:26px 26px 38px 28px;border-top:1px solid var(--hair)}
@media(max-width:560px){.cr-body{padding:20px 18px 30px 18px}}
.cr-blurb{margin:0 0 22px;color:var(--blue-deep);font-size:16px;font-weight:600;line-height:1.5}
.cr-cols{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(22px,3.5vw,46px)}
.cr-cols h4{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-deep);font-weight:700;margin:0 0 14px}
.cr-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.cr-cols li{position:relative;padding-left:21px;color:var(--muted);font-size:14.5px;line-height:1.55}
.cr-cols li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
@media(max-width:780px){.cr-cols{grid-template-columns:1fr;gap:26px}}
.cr-apply{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px dashed var(--hair)}
.cr-note{color:var(--muted);font-size:13.5px;line-height:1.5;max-width:40ch}
@media(max-width:560px){.cr-apply .btn{width:100%;justify-content:center}.cr-note{max-width:none}}

/* ── 2. two-column benefits: copy left, square image right ──────────────── */
.cr-why{background:var(--soft-2)}
.cr-two{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:clamp(30px,4.2vw,76px);align-items:stretch}
.cr-copy .sec-title{font-size:clamp(27px,3.2vw,44px);margin:0;line-height:1.1;max-width:18ch}
.cr-hr{display:block;height:1px;max-width:68ch;background:var(--gray);opacity:.7;margin:26px 0 28px}
.cr-hr.short{width:96px;height:3px;border-radius:3px;background:var(--orange);opacity:1;margin:22px auto 26px}
.cr-copy p{color:var(--muted);font-size:16.5px;line-height:1.72;margin:0 0 18px;max-width:68ch}
.cr-copy p:last-child{margin-bottom:0}

.cr-photo{position:relative;border-radius:14px;overflow:hidden;background:var(--soft);min-height:clamp(300px,38vw,560px);
  border:1px solid var(--hair);display:grid;place-items:center}
/* drop images/careers-photo.jpg into the images folder and it shows here.
   Until that file exists the placeholder below stays visible. */
.cr-photo::after{content:"";position:absolute;inset:0;background:url(../images/careers-photo.jpg) center/cover no-repeat}
.cr-ph{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:2;padding:24px}
.cr-ph b{display:block;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--blue-deep);text-transform:none;margin-bottom:8px}
@media(max-width:900px){.cr-two{grid-template-columns:1fr}.cr-photo{min-height:0;aspect-ratio:4/3}}

/* ── 3. white centred CTA with brand watermark ──────────────────────────── */
.cr-cta{background:#fff}
.cr-cta-in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;
  padding:clamp(10px,1.5vw,24px) 0}
.cr-mark{position:absolute;top:50%;transform:translateY(-50%);width:clamp(220px,24vw,400px);
  height:auto;color:var(--soft);pointer-events:none;z-index:0;right:clamp(-40px,2vw,80px)}
.cr-mark-l{right:auto;left:clamp(-40px,2vw,80px);transform:translateY(-50%) scaleX(-1)}
.cr-cta-in>*:not(.cr-mark){position:relative;z-index:1}
/* centred eyebrow gets a rule on both sides so it reads balanced */
.cr-cta-in .eyebrow{justify-content:center}
.cr-cta-in .eyebrow::after{content:"";width:44px;height:2px;background:var(--orange);border-radius:2px}
.cr-cta-in .sec-title{font-size:clamp(27px,3.8vw,48px);margin:0;max-width:22ch;line-height:1.08}
.cr-cta-in p{color:var(--muted);font-size:16.5px;line-height:1.66;margin:0 0 32px;max-width:74ch}

.cr-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px;
  padding-top:32px;border-top:1px solid var(--hair);width:100%;max-width:820px}
.cr-badges span{font-family:"Space Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--hair);background:#fff;border-radius:100px;padding:10px 20px;
  transition:border-color .25s,color .25s,transform .25s}
.cr-badges span:hover{border-color:rgba(11,99,224,.55);color:var(--orange-deep);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.cr-badges span{transition:none}}
@media(max-width:560px){.cr-cta-in .btn{width:100%;justify-content:center}.cr-mark{display:none}}

/* ── 4. closing colour band ─────────────────────────────────────────────── */
.cr-band{background:linear-gradient(125deg,var(--blue-deep),var(--ink-blue));
  padding-top:clamp(40px,4.4vw,58px);padding-bottom:clamp(40px,4.4vw,58px)}
.cr-band-in{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,38px);flex-wrap:wrap}
.cr-band h2{color:#fff;font-weight:800;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.025em;margin:0;text-align:center}
@media(max-width:560px){.cr-band-in .btn{width:100%;justify-content:center}}