/* Matea operator recruitment — desktop art direction and mobile scroll stability. */

html,
body{
  overflow-x:clip!important;
}

.site-header{
  -webkit-backdrop-filter:blur(20px);
  backface-visibility:hidden;
  transform:translateZ(0);
}

@media(max-width:980px){
  body{
    padding-top:84px;
    overscroll-behavior-y:none;
  }

  .site-header{
    position:fixed!important;
    inset:0 0 auto 0;
    width:100%;
    contain:layout paint;
    will-change:transform;
  }

  .nav-panel{
    height:100svh!important;
    min-height:100svh!important;
  }
}

@media(max-width:680px){
  body{padding-top:74px}
}

@media(min-width:981px){
  :root{
    --shell:min(1480px,calc(100% - 96px));
    --desktop-section-space:clamp(112px,8.5vw,154px);
    --desktop-card-radius:34px;
    --desktop-soft-shadow:0 28px 90px rgba(37,17,26,.10);
    --desktop-dark-shadow:0 34px 110px rgba(0,0,0,.30);
  }

  html{
    scroll-padding-top:108px;
    scrollbar-gutter:stable;
  }

  body{
    background:#090709;
  }

  .site-header{
    background:rgba(10,7,9,.94);
    border-bottom-color:rgba(213,177,111,.18);
  }

  .nav-shell{
    min-height:96px;
    gap:32px;
  }

  .brand{gap:15px}
  .brand-mark{
    width:52px;
    height:52px;
    font-size:29px;
  }
  .brand-copy b{font-size:29px}
  .brand-copy small{
    margin-top:6px;
    font-size:9.5px;
    letter-spacing:.18em;
  }

  .nav-actions{gap:14px}
  .nav-cta{
    min-height:54px;
    padding-inline:28px;
    font-size:14px;
  }
  .menu-toggle{
    width:54px;
    height:54px;
  }

  .button{
    min-height:60px;
    padding-inline:31px;
    font-size:14px;
  }

  main>section{
    padding:var(--desktop-section-space) 0;
  }

  .eyebrow,
  .kicker{
    gap:17px;
    font-size:12px;
    letter-spacing:.18em;
  }
  .eyebrow:before,
  .kicker:before{
    width:48px;
  }

  .section-head{
    grid-template-columns:minmax(0,1.15fr) minmax(320px,.48fr);
    gap:clamp(64px,7vw,120px);
    align-items:end;
    margin-bottom:56px;
  }

  .section-head h2,
  .section-head-wide h2,
  .fit-copy h2,
  .faq-heading h2,
  .apply-copy h2,
  .schedule-section-head h2,
  .start-head h2{
    font-size:clamp(58px,5.1vw,84px);
    line-height:.98;
    letter-spacing:-.046em;
  }

  .section-head>p,
  .section-head-wide>p,
  .fit-copy>p,
  .faq-heading>p,
  .apply-copy>p,
  .schedule-section-head>p,
  .start-head>p{
    font-size:16px;
    line-height:1.75;
  }

  /* Hero: editorial title on the left, commercial proof and actions on the right. */
  .hero{
    min-height:calc(100svh - 96px);
    padding:clamp(92px,7.5vw,126px) 0 clamp(104px,8vw,138px);
    align-items:center;
    background:
      radial-gradient(circle at 84% 24%,rgba(108,28,57,.31),transparent 35%),
      radial-gradient(circle at 12% 90%,rgba(213,177,111,.09),transparent 31%),
      linear-gradient(180deg,#120d11 0%,#090708 100%);
  }

  .hero:before{
    right:-2vw;
    top:51%;
    font-size:min(39vw,660px);
    color:rgba(213,177,111,.031);
  }

  .hero-inner{
    width:var(--shell);
  }

  .hero h1{
    max-width:1160px;
    margin:30px 0 0;
    font-size:clamp(80px,7.2vw,124px);
    line-height:.90;
    letter-spacing:-.058em;
  }

  .hero h1 span{
    max-width:1040px;
    margin-top:18px;
    font-size:.60em;
    line-height:1.02;
  }

  .hero-lead{
    max-width:820px;
    margin-top:34px;
    font-size:18px;
    line-height:1.7;
  }

  .hero-actions{
    margin-top:36px;
    gap:14px;
  }

  .hero-actions .button{
    min-width:220px;
  }

  /* Key terms: each proof point has enough scale to read as a product promise. */
  .quick-terms{
    padding:96px 0 126px;
    background:
      radial-gradient(circle at 10% 0%,rgba(213,177,111,.12),transparent 31%),
      radial-gradient(circle at 88% 100%,rgba(104,30,56,.12),transparent 31%),
      linear-gradient(180deg,#0b080a 0%,#120d11 100%);
  }

  .quick-terms-label{
    margin-bottom:25px;
    font-size:11px;
    letter-spacing:.18em;
  }

  .quick-terms-grid{
    gap:18px;
  }

  .quick-term{
    min-height:205px;
    padding:31px 30px 28px;
    border-radius:30px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:
      radial-gradient(circle at 100% 0%,rgba(213,177,111,.08),transparent 35%),
      linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.025));
  }

  .quick-term:before{
    left:30px;
    right:30px;
  }

  .quick-term strong,
  .quick-term--long strong{
    max-width:100%;
    font-size:clamp(35px,3.2vw,50px);
    line-height:.98;
    letter-spacing:-.048em;
    white-space:normal;
  }

  .quick-term span{
    margin-top:22px;
    font-size:10.5px;
    letter-spacing:.10em;
  }

  .quick-terms .conversion-cta{
    width:min(100%,1040px)!important;
    max-width:1040px!important;
    margin-top:34px!important;
    padding:34px 44px!important;
    border-radius:30px!important;
  }

  .quick-terms .conversion-cta-copy strong{
    font-size:clamp(31px,2.9vw,42px)!important;
  }

  .quick-terms .conversion-cta-copy span{
    margin-top:10px!important;
    font-size:13px!important;
  }

  .quick-terms .conversion-cta .button{
    width:min(100%,390px)!important;
    max-width:390px!important;
    min-height:62px!important;
  }

  /* Why Matea */
  .difference{
    padding-top:clamp(126px,9vw,168px)!important;
    padding-bottom:clamp(130px,9.5vw,176px)!important;
  }

  .difference .section-head-wide{
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(330px,.48fr);
    column-gap:clamp(70px,8vw,132px);
    row-gap:22px;
    align-items:end;
    margin-bottom:64px;
  }

  .difference .section-head-wide .kicker{
    grid-column:1/-1;
  }

  .difference .section-head-wide h2{
    grid-column:1/2;
    margin-top:0;
  }

  .difference .section-head-wide>p{
    grid-column:2/3;
    max-width:430px;
    margin:0 0 8px;
    font-size:17px;
    line-height:1.72;
  }

  .contrast-stage{
    grid-template-columns:minmax(0,1fr) 78px minmax(0,1.08fr);
  }

  .contrast-panel{
    padding:40px 42px;
    border-radius:38px;
  }

  .contrast-panel-old{margin-right:-16px}
  .contrast-panel-matea{margin-left:-16px}

  .contrast-panel header{
    gap:26px;
    padding-bottom:29px;
  }

  .contrast-panel header span{
    font-size:11px;
    letter-spacing:.15em;
  }

  .contrast-panel header b{
    max-width:380px;
    font-size:clamp(34px,3vw,43px);
    line-height:1.02;
  }

  .contrast-panel li{
    grid-template-columns:34px minmax(0,1fr);
    gap:15px;
    padding:18px 0;
    font-size:16px;
    line-height:1.5;
  }

  .contrast-panel i{
    width:31px;
    height:31px;
  }

  .contrast-arrow{
    width:58px;
    height:58px;
    font-size:25px;
  }

  .comparison-closing{
    max-width:1080px;
    margin-top:64px;
    font-size:clamp(46px,4.5vw,66px);
    line-height:1.07;
  }

  .difference .conversion-cta,
  .conditions .conversion-cta{
    max-width:1120px;
    margin-top:44px;
    padding:28px 32px;
    border-radius:28px;
  }

  .conversion-cta-copy strong{
    font-size:clamp(28px,2.5vw,38px);
  }

  .conversion-cta-copy span{
    margin-top:9px;
    font-size:13px;
  }

  .conversion-cta .button{
    min-width:226px;
    min-height:58px;
  }

  /* Working system */
  .system{
    padding-top:clamp(128px,9vw,168px)!important;
    padding-bottom:clamp(132px,9.5vw,176px)!important;
    background:
      radial-gradient(circle at 86% 16%,rgba(104,30,56,.20),transparent 33%),
      radial-gradient(circle at 8% 88%,rgba(213,177,111,.06),transparent 28%),
      linear-gradient(180deg,#130e12,#080607);
  }

  .system .section-head{
    grid-template-columns:minmax(0,1.18fr) minmax(330px,.46fr);
    gap:clamp(70px,8vw,130px);
    margin-bottom:64px;
  }

  .system .section-head h2{
    max-width:900px;
  }

  .value-grid{
    gap:20px;
  }

  .value-grid article{
    min-height:300px;
    padding:36px;
    border-radius:32px;
    background:
      linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.022));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  }

  .value-grid article>span{
    font-size:11px;
    letter-spacing:.16em;
  }

  .value-grid h3{
    margin:auto 0 18px;
    font-size:clamp(31px,2.8vw,42px);
    line-height:1.03;
  }

  .value-grid p{
    max-width:360px;
    font-size:14px;
    line-height:1.72;
  }

  /* Pay */
  .conditions{
    padding-top:clamp(128px,9vw,166px)!important;
    padding-bottom:clamp(128px,9vw,166px)!important;
  }

  .income-layout{
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);
    gap:20px;
  }

  .income-main{
    min-height:500px;
    padding:43px 44px;
    border-radius:38px;
    box-shadow:var(--desktop-soft-shadow);
  }

  .income-main>span{
    font-size:11px;
    letter-spacing:.16em;
  }

  .income-main strong{
    font-size:clamp(112px,10vw,164px);
    line-height:.82;
  }

  .income-main p{
    max-width:520px;
    margin-top:26px;
    font-size:clamp(29px,2.6vw,40px);
    line-height:1.08;
  }

  .income-main small{
    max-width:480px;
    margin-top:18px;
    font-size:12px;
    line-height:1.65;
  }

  .income-facts{
    grid-template-columns:1fr!important;
    gap:20px;
  }

  .income-facts article{
    min-height:240px;
    padding:34px;
    border-radius:30px;
    justify-content:flex-start;
    box-shadow:0 22px 70px rgba(42,19,29,.06);
  }

  .income-facts span{
    font-size:10px;
    letter-spacing:.15em;
  }

  .income-facts strong{
    margin-top:auto;
    padding-top:36px;
    font-size:clamp(35px,3.25vw,49px);
    line-height:1;
  }

  .income-facts p{
    max-width:430px;
    margin-top:13px;
    font-size:13px;
    line-height:1.65;
  }

  /* Schedule */
  .schedule-standalone{
    padding:clamp(124px,8.8vw,164px) 0!important;
  }

  .schedule-section-head{
    grid-template-columns:minmax(0,1.08fr) minmax(320px,.44fr);
    gap:clamp(68px,7vw,118px);
    margin-bottom:58px;
  }

  .schedule-meta{
    gap:20px;
    margin-bottom:20px;
  }

  .schedule-meta article{
    min-height:210px;
    padding:34px;
    border-radius:32px;
    box-shadow:0 22px 72px rgba(42,19,29,.065);
  }

  .schedule-meta span{
    font-size:11px;
    letter-spacing:.15em;
  }

  .schedule-meta strong{
    margin-top:38px;
    font-size:clamp(40px,3.8vw,56px);
  }

  .schedule-meta p{
    margin-top:14px;
    font-size:13px;
  }

  .schedule-shifts{
    padding:38px;
    border-radius:36px;
    box-shadow:0 26px 82px rgba(42,19,29,.07);
  }

  .schedule-subtitle{
    font-size:11px;
    letter-spacing:.16em;
  }

  .schedule-standalone .shift-grid{
    gap:18px;
    margin-top:24px;
  }

  .schedule-standalone .shift-grid div{
    min-height:170px;
    padding:29px;
    border-radius:28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  .schedule-standalone .shift-grid span{
    font-size:32px;
  }

  .schedule-standalone .shift-grid b{
    margin-top:15px;
    font-size:18px;
  }

  /* Starting terms */
  .start-standalone{
    padding:clamp(126px,9vw,170px) 0!important;
  }

  .start-head{
    grid-template-columns:minmax(0,1.12fr) minmax(320px,.44fr);
    gap:clamp(68px,7.5vw,122px);
    margin-bottom:58px;
  }

  .start-standalone .work-rules{
    gap:18px;
  }

  .start-standalone .work-rules article{
    min-height:260px;
    padding:32px;
    border-radius:31px;
  }

  .start-standalone .work-rules article:before{
    left:32px;
    right:32px;
  }

  .start-standalone .work-rules article>span{
    font-size:10px;
    letter-spacing:.16em;
  }

  .start-standalone .work-rules strong{
    margin-top:auto;
    padding-top:44px;
    font-size:clamp(29px,2.6vw,40px);
  }

  .start-standalone .work-rules p{
    margin-top:14px;
    font-size:12.5px;
    line-height:1.65;
  }

  /* Candidate fit */
  .fit{
    padding-top:clamp(126px,9vw,170px)!important;
    padding-bottom:clamp(130px,9.5vw,176px)!important;
  }

  .fit-layout{
    grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
    gap:clamp(72px,8vw,132px);
  }

  .fit-copy{
    top:130px;
  }

  .fit-copy h2{
    max-width:720px;
  }

  .fit-copy>p{
    max-width:620px;
    margin-top:34px;
    font-size:16px;
  }

  .fit-copy .button{
    margin-top:36px;
    min-width:230px;
  }

  .fit-cards{
    gap:20px;
  }

  .fit-card{
    padding:34px 36px;
    border-radius:32px;
  }

  .fit-label{
    margin-bottom:23px;
    font-size:11px;
    letter-spacing:.15em;
  }

  .fit-card li{
    padding:20px 0 20px 42px;
    font-size:15px;
    line-height:1.62;
  }

  .fit-card li:before{
    top:19px;
    width:25px;
    height:25px;
    font-size:11px;
  }

  /* Hiring process */
  .selection{
    padding-top:clamp(118px,8.4vw,156px)!important;
    padding-bottom:clamp(122px,8.8vw,162px)!important;
  }

  .selection-steps{
    gap:16px;
    border:0;
    border-radius:0;
    overflow:visible;
    background:transparent;
  }

  .selection-steps li{
    min-height:270px;
    padding:30px;
    border:1px solid var(--line)!important;
    border-radius:28px;
    background:#fff;
    box-shadow:0 20px 62px rgba(42,19,29,.055);
  }

  .selection-steps>li>span{
    font-size:10px;
    letter-spacing:.15em;
  }

  .selection-steps h3{
    margin:74px 0 14px;
    font-size:clamp(26px,2.2vw,34px);
    line-height:1.04;
  }

  .selection-steps p{
    font-size:12.5px;
    line-height:1.65;
  }

  /* Application */
  .apply{
    padding-top:clamp(128px,9vw,172px)!important;
    padding-bottom:clamp(132px,9.5vw,180px)!important;
  }

  .apply-grid{
    grid-template-columns:minmax(0,.82fr) minmax(610px,1.18fr);
    gap:clamp(72px,8vw,132px);
  }

  .apply-copy{
    top:130px;
  }

  .apply-copy h2{
    max-width:720px;
  }

  .apply-copy>p{
    max-width:620px;
    margin-top:32px;
    font-size:16px;
  }

  .form-card{
    padding:42px;
    border-radius:38px;
    box-shadow:var(--desktop-dark-shadow);
  }

  .form-progress{
    margin-bottom:28px;
  }

  .form-progress span{
    width:40px;
    height:40px;
    font-size:11px;
  }

  .form-step-head{
    margin-bottom:28px;
  }

  .form-step-head>span{
    font-size:9px;
    letter-spacing:.15em;
  }

  .form-step-head h3{
    margin-top:10px;
    font-size:clamp(37px,3.2vw,49px);
  }

  .field-grid{
    gap:19px;
  }

  .field>span,
  .fieldset legend{
    margin-bottom:9px;
    font-size:11px;
  }

  .field input,
  .field select{
    height:60px;
    padding:0 18px;
    border-radius:17px;
    font-size:14px;
  }

  .field textarea{
    min-height:150px;
    padding:17px 18px;
    border-radius:17px;
    font-size:14px;
  }

  .choice-grid{
    gap:12px;
  }

  .choice span{
    min-height:58px;
    border-radius:17px;
    font-size:12px;
  }

  .check{
    gap:13px;
    margin-top:18px;
    font-size:12px;
    line-height:1.62;
  }

  .check input{
    width:21px;
    height:21px;
  }

  .check-emphasis{
    padding:18px;
    border-radius:18px;
  }

  .form-next,
  .form-nav{
    margin-top:28px;
  }

  /* FAQ and footer */
  .faq{
    padding-top:clamp(126px,9vw,168px)!important;
    padding-bottom:clamp(126px,9vw,168px)!important;
  }

  .faq-grid{
    grid-template-columns:minmax(0,.68fr) minmax(600px,1.32fr);
    gap:clamp(74px,8vw,132px);
  }

  .faq-heading{
    top:130px;
  }

  .faq-list summary{
    padding:30px 58px 30px 0;
    font-size:clamp(25px,2.1vw,32px);
    line-height:1.22;
  }

  .faq-list summary:after{
    top:27px;
    width:36px;
    height:36px;
    font-size:17px;
  }

  .faq-list details p{
    max-width:850px;
    padding:0 58px 30px 0;
    font-size:14px;
    line-height:1.78;
  }

  .site-footer{
    padding:36px 0 calc(36px + env(safe-area-inset-bottom));
  }

  .footer-mark{
    width:42px;
    height:42px;
    flex-basis:42px;
    font-size:23px;
  }

  .footer-name b{font-size:18px}
  .footer-name small{font-size:9px}
  .footer-note{margin-left:57px;font-size:10px}
  .footer-links a,
  .footer-links button{font-size:11px}
}

@media(min-width:1200px){
  .hero-inner{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:28px;
    row-gap:28px;
    align-items:end;
  }

  .hero .eyebrow{
    grid-column:1/-1;
  }

  .hero h1{
    grid-column:1/10;
    grid-row:2/4;
    margin:0;
  }

  .hero-lead{
    grid-column:10/-1;
    grid-row:2;
    max-width:380px;
    margin:0 0 4px;
    font-size:16px;
    line-height:1.72;
  }

  .hero-actions{
    grid-column:10/-1;
    grid-row:3;
    display:grid;
    grid-template-columns:1fr;
    margin:0;
  }

  .hero-actions .button{
    width:100%;
  }
}

@media(min-width:981px) and (max-width:1199px){
  :root{--shell:calc(100% - 72px)}

  .hero h1{
    max-width:980px;
    font-size:clamp(76px,8.3vw,100px);
  }

  .hero-lead{max-width:760px}

  .section-head h2,
  .section-head-wide h2,
  .fit-copy h2,
  .faq-heading h2,
  .apply-copy h2,
  .schedule-section-head h2,
  .start-head h2{
    font-size:clamp(54px,6.2vw,70px);
  }

  .fit-layout,
  .apply-grid{
    gap:58px;
  }
}