/* ============================================================
   My Recruitment Pal — cinematic legal-search site
   Montfort-inspired: light ground, steel-blue accents, Century Gothic.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Josefin+Sans:wght@300;400&display=swap");

:root{
  --bg:#FFFFFF; --paper:#FBFCFD; --mist:#EEF2F7;
  --ink:#14233C; --ink-soft:#2C3C56;
  --steel:#2D628C; --steel-dk:#214B6D; --pale:#A9BFD2;
  --muted:#5E6E86;
  --line:rgba(20,35,60,.12); --line-soft:rgba(20,35,60,.07);
  --disp:"Century Gothic","Jost","Josefin Sans","Segoe UI",sans-serif;
  --sans:"Century Gothic","Jost","Segoe UI",sans-serif;
  --wrap:1360px;
  --pad:clamp(24px,5vw,80px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:400;color:var(--ink);background:transparent;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.no-webgl{background:linear-gradient(180deg,#EEF2F7,#FFFFFF 60%)}

/* shader fluid sits behind everything; the photo scene sits above it and fades out on scroll,
   dissolving the hero image into the living fluid (tinted per page). */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-3;display:block}
.bg-image{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  will-change:transform,opacity;transform:scale(1.04);animation:kenburns 46s ease-in-out infinite alternate}
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;display:none}
@keyframes kenburns{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.13) translate(-2%,-1.6%)}}
@media(prefers-reduced-motion:reduce){.bg-image{animation:none}}
.bg-tint{display:none}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--steel);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,.job:focus-visible,.door:focus-visible,.row:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--steel);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- nav ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20}
.nav.solid{position:fixed;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft)}
.nav-inner{display:flex;align-items:center;justify-content:center;gap:24px;padding:26px 0;position:relative}
.brand{display:flex;align-items:center;gap:13px}
.brand-mini{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .4s}
.nav.solid .brand-mini{opacity:1;pointer-events:auto}
.brand svg{width:42px;height:42px;display:block}
.brand .bt{font-family:var(--disp);font-weight:500;letter-spacing:.3em;font-size:19px;
  text-transform:uppercase;color:var(--ink)}
.nav-menu{display:flex;align-items:center;gap:36px}
.nav-menu a{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  opacity:.66;transition:opacity .35s,color .35s;font-weight:400}
.nav-menu a:hover,.nav-menu a.active{opacity:1;color:var(--steel)}
.sound{position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;background:transparent;
  border:1px solid rgba(45,98,140,.35);cursor:pointer;transition:border-color .35s}
.sound:hover{border-color:var(--steel)}
.sound .bars{display:inline-flex;align-items:flex-end;gap:2.5px;height:12px}
.sound i{display:block;width:2px;height:4px;background:var(--steel);transition:height .2s}
.sound.on i{animation:eq 1.1s ease-in-out infinite}
.sound.on i:nth-child(2){animation-delay:.22s}.sound.on i:nth-child(3){animation-delay:.48s}
.sound.on i:nth-child(4){animation-delay:.74s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.sound .lbl{font-size:10px;letter-spacing:.24em;color:var(--steel);text-transform:uppercase}
.burger{display:none}

/* ---------- shared type ---------- */
.eyebrow{font-family:var(--disp);text-transform:uppercase;letter-spacing:.46em;font-size:12px;
  color:var(--steel);font-weight:400;display:flex;align-items:center;gap:18px}
.eyebrow.center{justify-content:center}
.index{font-family:var(--disp);color:var(--steel);letter-spacing:.2em;font-size:13px;
  display:inline-block;margin-bottom:20px}
.title{font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.65rem);line-height:1.42;letter-spacing:.05em;color:var(--ink);
  max-width:18ch}
.title.wide{max-width:22ch}
.lead{font-family:var(--sans);font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.75;color:var(--muted);
  max-width:56ch;font-weight:400}
.hero-sub,.lead,.door p,.quote p,.founder .fq p,.row .rd{text-wrap:pretty}
.big-num{font-family:"Josefin Sans","Jost",sans-serif;font-weight:300;letter-spacing:.02em;
  font-size:clamp(2.4rem,5vw,4rem);color:var(--ink);line-height:1}
.big-num em{font-style:normal;color:var(--steel)}

/* ---------- hero (centred, Montfort layout) ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;position:relative}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:210px;pointer-events:none;z-index:0;
  background:linear-gradient(transparent,rgba(245,248,251,.55))}
.hero .wrap{position:relative;z-index:1}
.hero-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%}
.hero-logo{display:flex;align-items:center;gap:clamp(18px,2.8vw,38px)}
.hero-mark{width:clamp(68px,8.5vw,128px);height:auto}
.hero-div{width:1px;height:clamp(58px,7.5vw,104px);background:var(--pale)}
.hero-word{font-family:var(--disp);text-transform:uppercase;font-weight:400;color:var(--ink);
  letter-spacing:.16em;font-size:clamp(1.35rem,3.7vw,3rem);line-height:1;white-space:nowrap}
.hero-tag{margin-top:30px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.44em;
  font-size:12px;color:#1C3E5C;font-weight:500}
.hero .est{color:#0C1B31;font-weight:600}
.hero .scroll{color:#0C1B31;font-weight:600}
.hero .scroll .sa,.hero .scroll .sa::after{border-color:#0C1B31;background:#0C1B31}
.hero .scroll .sa{opacity:.75}
/* inner-page hero */
.hero-title{font-family:var(--disp);text-transform:uppercase;font-weight:400;letter-spacing:.055em;
  font-size:clamp(1.55rem,4.8vw,3.6rem);line-height:1.28;color:var(--ink);
  width:min(90vw,22ch);margin-top:26px;text-wrap:balance}
.hero-sub{margin-top:26px;color:var(--ink-soft);width:min(88vw,52ch);
  font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.7;font-weight:400}
.nav.has-brand .brand-mini{opacity:1;pointer-events:auto}
/* contact form */
.cform{max-width:640px;margin-top:clamp(30px,4vw,50px);display:flex;flex-direction:column;gap:16px}
.frow{display:flex;gap:16px}
.cform input,.cform textarea{width:100%;background:rgba(255,255,255,.6);border:1px solid var(--line);
  padding:14px 16px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none;transition:border-color .3s}
.cform input:focus,.cform textarea:focus{border-color:var(--steel)}
.cform textarea{resize:vertical}
.cform .btn{align-self:flex-start;margin-top:6px;cursor:pointer;background:var(--steel);color:#fff;border-color:var(--steel)}
@media(max-width:560px){.frow{flex-direction:column}}
@media(max-width:640px){
  .hero-logo{flex-direction:column;gap:18px;max-width:100%}
  .hero-div{width:56px;height:1px}
  .hero-mark{width:clamp(56px,16vw,82px)}
  .hero-word{white-space:normal !important;overflow-wrap:anywhere;font-size:clamp(1.05rem,5.4vw,1.6rem);
    letter-spacing:.05em;max-width:84vw;text-align:center;line-height:1.3}
  .hero-tag{letter-spacing:.24em;font-size:10.5px;max-width:92vw;text-align:center}
  .hero-foot{flex-direction:column;gap:14px;align-items:center;text-align:center}
  .hero .est,.hero .scroll{letter-spacing:.18em;font-size:10.5px}
}
.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:30px 0 40px;border-top:1px solid var(--line)}
.hero-foot .est{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#0C1B31;font-weight:600}
.scroll{display:inline-flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--steel)}
.scroll .sa{position:relative;width:1px;height:36px;background:var(--steel);opacity:.5}
.scroll .sa::after{content:"";position:absolute;bottom:0;left:-2.5px;width:6px;height:6px;
  border-right:1px solid var(--steel);border-bottom:1px solid var(--steel);
  transform:rotate(45deg);animation:slide 2.6s ease-in-out infinite}
@keyframes slide{0%,100%{transform:rotate(45deg) translate(-3px,-3px);opacity:.25}50%{transform:rotate(45deg) translate(0,0);opacity:1}}

/* ---------- section ---------- */
.section{position:relative;padding:clamp(80px,11vw,150px) 0;background:transparent}
.section.paper{background:rgba(255,255,255,.3)}
.section.mist{background:rgba(233,239,247,.36)}
.section.reveal-bg{background:transparent}
.section .head{max-width:var(--wrap);margin:0 auto}
.section-head{margin-bottom:clamp(40px,6vw,80px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:end}
@media(max-width:860px){.split{grid-template-columns:1fr;align-items:start}}

/* stats row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px);
  margin-top:clamp(50px,7vw,90px);perspective:1000px}
.stat .label{color:var(--muted);font-size:.92rem;line-height:1.6;margin-top:16px;max-width:30ch}
.stat.reveal{transform:none}                              /* the flip is the motion (JS-driven) */
.stat .big-num{display:inline-block;perspective:720px}
.stat .big-num span{display:inline-block;transform-origin:50% 0}
@media(max-width:760px){.stats{grid-template-columns:1fr;gap:40px}}

/* numbered list (practice / process) */
.rows{border-top:1px solid var(--line);margin-top:clamp(40px,5vw,64px)}
.row{display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:center;
  padding:30px 4px;border-bottom:1px solid var(--line);transition:padding-left .4s,background .4s}
.row:hover{padding-left:18px;background:rgba(45,98,140,.03)}
.row .rn{font-family:var(--disp);color:var(--steel);letter-spacing:.15em;font-size:14px}
.row .rt{font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1rem,1.6vw,1.4rem);color:var(--ink)}
.row .rd{color:var(--muted);font-size:.95rem;max-width:40ch;justify-self:end;text-align:right}
@media(max-width:760px){.row{grid-template-columns:48px 1fr;gap:14px}.row .rd{grid-column:1/-1;justify-self:start;text-align:left;max-width:100%;margin-top:8px}}

/* fork */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(40px,5vw,64px)}
.door{background:rgba(255,255,255,.58);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  padding:clamp(34px,4vw,60px);display:flex;flex-direction:column;min-height:340px;transition:background .4s}
.door:hover{background:rgba(255,255,255,.8)}
.door .dt{font-family:var(--disp);text-transform:uppercase;letter-spacing:.28em;font-size:11px;color:var(--steel);margin-bottom:22px}
.door h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.35;color:var(--ink);margin-bottom:18px}
.door p{color:var(--muted);line-height:1.7;margin-bottom:26px;max-width:38ch}
.door .go{margin-top:auto;font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;
  font-size:12px;color:var(--ink);display:inline-flex;align-items:center;gap:10px;transition:gap .3s,color .3s}
.door:hover .go{gap:18px;color:var(--steel)}
@media(max-width:760px){.fork{grid-template-columns:1fr}}

/* jobs */
.jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(40px,5vw,60px)}
.job{background:rgba(255,255,255,.58);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  padding:32px 28px;display:flex;flex-direction:column;gap:14px;transition:background .4s}
.job:hover{background:rgba(255,255,255,.8)}
.job .jm{font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;color:var(--steel)}
.job h4{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.12rem;line-height:1.35;color:var(--ink)}
.job .jt{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.job .jt span{font-size:11px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);padding:4px 10px}
.job .jf{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.job .jf .date{color:var(--muted)}.job .jf .apply{color:var(--steel)}
@media(max-width:860px){.jobs-grid{grid-template-columns:1fr}}

/* quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);margin-top:clamp(40px,5vw,70px)}
.quote{border-top:2px solid var(--steel);padding-top:28px}
.quote p{font-family:var(--disp);font-weight:400;font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.6;
  color:var(--ink-soft);letter-spacing:.01em;margin-bottom:24px}
.quote .who{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.quote .who b{color:var(--steel);font-weight:400}
@media(max-width:760px){.quotes{grid-template-columns:1fr}}

/* founder portrait + quote */
.founder{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,70px);align-items:center;margin-top:clamp(30px,5vw,60px)}
.founder .portrait{background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:50%;
  aspect-ratio:1/1;overflow:hidden;max-width:330px;width:100%;margin:0 auto;box-shadow:0 0 0 8px rgba(45,98,140,.05)}
.founder .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;filter:contrast(1.05) saturate(.82) brightness(1.02)}
.founder .fq{border-top:2px solid var(--steel);padding-top:26px}
.founder .fq p{font-family:var(--disp);font-weight:400;font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.55;color:var(--ink-soft);letter-spacing:.01em;margin-bottom:22px}
.founder .who{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.founder .who b{color:var(--steel);font-weight:400}
@media(max-width:760px){.founder{grid-template-columns:1fr;gap:32px}.founder .portrait{max-width:360px}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--disp);text-transform:uppercase;
  letter-spacing:.2em;font-size:12px;padding:16px 30px;border:1px solid var(--steel);color:var(--steel);
  transition:background .35s,color .35s}
.btn:hover{background:var(--steel);color:#fff}
.btn.solid{background:var(--steel);color:#fff}
.btn.solid:hover{background:var(--steel-dk);border-color:var(--steel-dk)}
.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#C9D2E0;padding:clamp(60px,7vw,96px) 0 40px;position:relative}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-lock{display:inline-flex;align-items:center;gap:13px;margin-bottom:20px;text-decoration:none}
.foot-lock svg{width:36px;height:36px;margin-left:-7px}
.fl-word{font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:14px;color:#fff;font-weight:400}
.foot-brand p{color:#8FA0B8;line-height:1.7;max-width:34ch;font-size:.95rem}
.footer h5{font-family:var(--disp);text-transform:uppercase;letter-spacing:.2em;font-size:11px;
  color:#fff;margin-bottom:20px;font-weight:400}
.footer ul{list-style:none}
.footer li{margin-bottom:12px}
.footer li a,.footer li{color:#8FA0B8;font-size:.92rem;transition:color .3s}
.footer li a:hover{color:var(--pale)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:clamp(50px,6vw,80px);padding-top:26px;border-top:1px solid rgba(255,255,255,.1);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8A99AE}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}.foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}}

/* ---------- Lenis smooth scroll ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;
  z-index:9999;transition:opacity .3s;will-change:transform}
.cursor-dot{width:6px;height:6px;background:var(--steel)}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(45,98,140,.45);
  transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),background .35s,border-color .35s,opacity .3s}
.cursor-ring.hover{width:58px;height:58px;background:rgba(45,98,140,.06);border-color:var(--steel)}
html.has-cursor,html.has-cursor *{cursor:none!important}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---------- page transitions (Chrome MPA view transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s ease both}
::view-transition-new(root){animation:vt-in .5s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ---------- reveal on scroll ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.18s}.reveal.d3{transition-delay:.28s}.reveal.d4{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
  .scroll .sa::after,.sound.on i{animation:none}}

/* ---------- mobile nav ---------- */
@media(max-width:900px){
  .brand-mini{opacity:1;pointer-events:auto}
  /* backdrop-filter on the solid nav creates a containing block that traps the fixed menu overlay;
     drop it on mobile (solid bg instead) so the full-screen menu anchors to the viewport */
  .nav.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.96)}
  .sound{position:static;transform:none;right:auto;top:auto;margin-top:14px;height:44px;padding:0 22px}
  .sound .lbl{font-size:12px}
  .nav-menu{position:fixed;inset:0;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    flex-direction:column;justify-content:center;gap:30px;transform:translateX(100%);
    transition:transform .5s cubic-bezier(.6,0,.2,1);z-index:30}
  .nav-menu.open{transform:none}
  .nav-menu a{font-size:15px}
  .burger{display:flex;flex-direction:column;gap:5px;width:30px;height:20px;justify-content:center;
    background:none;border:none;cursor:pointer;z-index:40;position:absolute;right:0;top:50%;transform:translateY(-50%)}
  .burger span{display:block;height:1.5px;background:var(--ink);transition:transform .4s,opacity .3s}
  .burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}