/* ==========================================================================
   Nexora Support — design system
   Palette: cobalt #2563EB · slate #0F172A · light #F1F5F9
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --cobalt:#2563EB;
  --cobalt-dark:#1D4ED8;
  --cobalt-deep:#1E40AF;
  --cobalt-soft:#DBE7FE;
  --cobalt-lift:#93B4FB;

  --slate-950:#0B1220;
  --slate-900:#0F172A;
  --slate-800:#1E293B;
  --slate-700:#334155;
  --slate-600:#475569;
  --slate-500:#64748B;
  --slate-400:#94A3B8;
  --slate-300:#CBD5E1;
  --slate-200:#E2E8F0;
  --slate-100:#F1F5F9;
  --white:#FFFFFF;

  --ink:var(--slate-900);
  --body:var(--slate-600);
  --line:var(--slate-200);
  --surface:var(--white);
  --surface-alt:var(--slate-100);

  --font-display:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Inter","Segoe UI",Helvetica,Arial,sans-serif;

  --container:1200px;
  --gutter:24px;
  --radius:14px;
  --radius-lg:22px;

  --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
  --shadow-md:0 10px 24px -8px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:0 28px 60px -22px rgba(15,23,42,.32),0 8px 20px -12px rgba(15,23,42,.16);
  --shadow-cobalt:0 18px 40px -16px rgba(37,99,235,.5);

  --nav-h:82px;
  --ease:cubic-bezier(.22,.68,.28,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--cobalt);text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.12;
  letter-spacing:-.015em;
  font-weight:600;
}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:12px;top:-100px;z-index:1000;
  background:var(--cobalt);color:#fff;padding:12px 20px;border-radius:0 0 10px 10px;
  font-weight:600;transition:top .2s var(--ease);
}
.skip-link:focus{top:0}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{max-width:840px}
.section{padding:clamp(72px,9vw,124px) 0}
.section-tight{padding:clamp(56px,6vw,86px) 0}
.section-alt{background:var(--surface-alt)}
.grid{display:grid;gap:28px}
@media(min-width:760px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1020px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Type helpers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cobalt);margin:0 0 18px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--cobalt);border-radius:2px}
.eyebrow-center{justify-content:center}
.h2{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.85rem,3.6vw,2.9rem);
  line-height:1.14;
  letter-spacing:-.02em;
  margin:0 0 .5em;
}
.h2 strong{font-weight:700;color:var(--cobalt)}
.h3{font-size:1.3rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .55em}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.68;color:var(--slate-600)}
.muted{color:var(--slate-500)}
.center{text-align:center}
.section-head{max-width:760px;margin:0 0 clamp(40px,5vw,64px)}
.section-head.center{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-display);
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 30px;border-radius:9px;
  background:var(--cobalt);color:#fff;
  border:2px solid var(--cobalt);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
  box-shadow:var(--shadow-cobalt);
  white-space:nowrap;
}
.btn:hover{background:var(--cobalt-dark);border-color:var(--cobalt-dark);transform:translateY(-2px);box-shadow:0 22px 46px -16px rgba(37,99,235,.62)}
.btn:active{transform:translateY(0)}
.btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--slate-300);box-shadow:none}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:var(--shadow-md)}
.btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);box-shadow:none}
.btn-on-dark:hover{background:#fff;border-color:#fff;color:var(--slate-900)}
.btn-sm{padding:12px 22px;font-size:12px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn-row.center{justify-content:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);
  font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cobalt);margin-top:auto;padding-top:22px;
}
.link-arrow svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header{
  position:fixed;inset:0 0 auto;z-index:900;
  height:var(--nav-h);
  background:rgba(11,18,32,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s var(--ease),height .3s var(--ease),box-shadow .3s var(--ease);
}
.site-header.is-stuck{background:rgba(11,18,32,.97);height:70px;box-shadow:0 10px 34px -18px rgba(0,0,0,.8)}
body.nav-open .site-header{background:var(--slate-950)}

.nav{
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:1340px;margin-inline:auto;padding-inline:var(--gutter);
}
.nav-side{display:none;align-items:center;gap:2px;flex:1}
.nav-side-right{justify-content:flex-end}

.nav-link{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);
  font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  padding:12px 13px;border-radius:8px;
  transition:color .2s var(--ease),background .2s var(--ease);
  white-space:nowrap;
}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.07)}
.nav-link.is-active{color:#fff}
.nav-link.is-active::after{
  content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;
  background:var(--cobalt-lift);border-radius:2px;
}
.nav-caret{width:9px;height:9px;opacity:.65;transition:transform .25s var(--ease)}
.nav-item[data-open="true"] .nav-caret{transform:rotate(180deg)}

.nav-item{position:relative}
.nav-menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,10px);
  min-width:274px;padding:10px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav-item[data-open="true"] .nav-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-menu a{
  display:block;padding:11px 14px;border-radius:9px;
  font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--slate-800);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.nav-menu a span{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:400;color:var(--slate-500);margin-top:2px;line-height:1.45}
.nav-menu a:hover{background:var(--slate-100);color:var(--cobalt)}
.nav-menu a:hover span{color:var(--slate-600)}

/* Logo */
.logo{display:inline-flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto;padding:6px 4px}
.logo-row{display:flex;align-items:center;gap:8px}
.logo-mark{
  display:grid;place-items:center;
  width:30px;height:30px;border-radius:8px;
  background:var(--cobalt);color:#fff;
  font-family:var(--font-display);font-size:17px;font-weight:800;line-height:1;
  box-shadow:0 6px 16px -6px rgba(37,99,235,.85);
}
.logo-word{
  font-family:var(--font-display);
  font-size:20px;font-weight:300;letter-spacing:.26em;text-transform:uppercase;
  color:#fff;line-height:1;padding-left:2px;
}
.logo-sub{
  font-family:var(--font-display);
  font-size:8.5px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;
  color:var(--cobalt-lift);line-height:1;padding-left:12px;
}

/* Utility cluster */
.nav-utils{display:flex;align-items:center;gap:6px}
.nav-phone{
  display:none;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:13px;font-weight:700;color:#fff;
  padding:9px 12px;border-radius:8px;transition:background .2s var(--ease)}
.nav-phone:hover{background:rgba(255,255,255,.08)}
.nav-phone svg{width:15px;height:15px;color:var(--cobalt-lift)}
.lang-switch{
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.1em;
  color:#fff;background:var(--cobalt);padding:8px 12px;border-radius:7px;
  transition:background .2s var(--ease)}
.lang-switch:hover{background:var(--cobalt-dark)}

/* Burger */
.burger{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:9px;color:#fff}
.burger:hover{background:rgba(255,255,255,.08)}
.burger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger span+span{margin-top:5px}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.mobile-nav{
  position:fixed;inset:var(--nav-h) 0 0;z-index:880;
  background:var(--slate-950);
  padding:26px var(--gutter) 60px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .38s var(--ease),visibility .38s;
  visibility:hidden;
}
body.nav-open .mobile-nav{transform:translateX(0);visibility:visible}
.mobile-nav details{border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav summary,.mobile-nav .m-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 2px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;
}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary svg{width:12px;height:12px;opacity:.6;transition:transform .25s var(--ease)}
.mobile-nav details[open] summary svg{transform:rotate(180deg)}
.mobile-nav .m-link{border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-nav .m-sub{padding:0 2px 16px}
.mobile-nav .m-sub a{display:block;padding:11px 0 11px 16px;color:var(--slate-400);font-size:14.5px;border-left:2px solid rgba(255,255,255,.14)}
.mobile-nav .m-sub a:hover{color:#fff;border-left-color:var(--cobalt)}
.mobile-foot{margin-top:32px;display:flex;flex-direction:column;gap:14px}

@media(min-width:1140px){
  .nav-side{display:flex}
  .nav-phone{display:inline-flex}
  .burger{display:none}
  .mobile-nav{display:none}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 76px) 0 92px;
  background:var(--slate-950);
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(1100px 620px at 78% 12%,rgba(37,99,235,.42),transparent 62%),
    radial-gradient(760px 560px at 8% 88%,rgba(30,64,175,.4),transparent 66%),
    linear-gradient(165deg,#0B1220 0%,#101C33 48%,#0B1220 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.5;
  background-image:
    linear-gradient(rgba(148,163,184,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.10) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 36%,#000 12%,transparent 74%);
  -webkit-mask-image:radial-gradient(circle at 50% 36%,#000 12%,transparent 74%);
}
.hero-glow{
  position:absolute;z-index:-1;pointer-events:none;
  width:min(560px,70vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.34),transparent 68%);
  filter:blur(26px);
  top:-14%;right:-8%;
  animation:float 15s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-26px,32px,0)}}

.hero-inner{position:relative;max-width:940px;text-align:center;margin-inline:auto}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt-lift);
  padding:9px 18px;border-radius:999px;
  border:1px solid rgba(147,180,251,.34);background:rgba(37,99,235,.14);
  margin-bottom:30px;
}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--cobalt-lift);box-shadow:0 0 0 4px rgba(147,180,251,.22)}
.hero h1{
  font-family:var(--font-display);
  font-weight:200;
  font-size:clamp(2.15rem,5.9vw,4.35rem);
  line-height:1.05;letter-spacing:-.03em;text-transform:uppercase;
  color:#fff;margin:0 0 28px;
}
.hero h1 em{display:block;font-style:normal;font-weight:700;color:var(--cobalt-lift)}
.hero p{color:rgba(226,232,240,.86);font-size:clamp(1.02rem,1.7vw,1.24rem);max-width:660px;margin-inline:auto}
.hero .btn-row{justify-content:center;margin-top:38px}

.hero-wave{position:absolute;left:0;right:0;bottom:0;z-index:-1;display:flex;align-items:flex-end;gap:5px;height:130px;padding:0 4vw;opacity:.28}
.hero-wave i{flex:1;background:linear-gradient(to top,var(--cobalt),rgba(147,180,251,0));border-radius:3px 3px 0 0;animation:eq 2.8s ease-in-out infinite}
@keyframes eq{0%,100%{height:12%}50%{height:78%}}

.hero-stats{
  position:relative;z-index:2;
  margin-top:clamp(56px,7vw,84px);
  display:grid;gap:1px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);overflow:hidden;
}
@media(min-width:660px){.hero-stats{grid-template-columns:repeat(4,1fr)}}
.hero-stat{background:rgba(11,18,32,.6);padding:26px 22px;text-align:center;backdrop-filter:blur(6px)}
.hero-stat b{
  display:block;font-family:var(--font-display);
  font-size:clamp(1.7rem,3.2vw,2.35rem);font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em;
}
.hero-stat span{display:block;margin-top:9px;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-400)}

/* Page hero (inner pages) */
.page-hero{
  position:relative;background:var(--slate-950);color:#fff;
  padding:calc(var(--nav-h) + 78px) 0 78px;overflow:hidden;isolation:isolate;
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(880px 460px at 80% 0%,rgba(37,99,235,.4),transparent 64%),
    linear-gradient(160deg,#0B1220,#12203A 55%,#0B1220);
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.42;
  background-image:linear-gradient(90deg,rgba(148,163,184,.1) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to bottom,#000,transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
}
.page-hero h1{
  font-family:var(--font-display);font-weight:200;text-transform:uppercase;
  font-size:clamp(1.95rem,4.7vw,3.4rem);line-height:1.07;letter-spacing:-.028em;color:#fff;margin:0 0 20px;
}
.page-hero h1 strong{font-weight:700;color:var(--cobalt-lift)}
.page-hero p{color:rgba(226,232,240,.84);max-width:660px;font-size:clamp(1rem,1.5vw,1.16rem)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--slate-400);margin-bottom:22px}
.breadcrumb a{color:var(--slate-400)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{opacity:.5}

/* ==========================================================================
   Cards & components
   ========================================================================== */
.card{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 30px;height:100%;
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--cobalt),var(--cobalt-lift));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--cobalt-soft)}
.card:hover::before{transform:scaleX(1)}
.card p{font-size:15.5px;line-height:1.68}
.card-icon{
  display:grid;place-items:center;width:54px;height:54px;border-radius:14px;
  background:var(--cobalt-soft);color:var(--cobalt);margin-bottom:22px;flex:0 0 auto;
}
.card-icon svg{width:25px;height:25px}
.card-flat{box-shadow:none;background:var(--slate-100);border-color:transparent}
.card-flat:hover{background:var(--white);border-color:var(--cobalt-soft)}

.feature-list{display:grid;gap:13px;margin-top:22px}
.feature-list li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.6;color:var(--slate-600)}
.feature-list li::before{
  content:"";position:absolute;left:0;top:.44em;width:17px;height:17px;border-radius:50%;
  background:var(--cobalt-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.band-dark .feature-list li{color:var(--slate-300)}
.band-dark .feature-list li::before{background-color:rgba(147,180,251,.24)}

/* Split media block */
.split{display:grid;gap:clamp(36px,5vw,68px);align-items:center}
@media(min-width:940px){
  .split{grid-template-columns:1fr 1fr}
  .split-reverse .split-media{order:2}
}
.split-media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(150deg,#12203A,#0B1220);
  min-height:340px;display:grid;place-items:center;padding:38px;
  box-shadow:var(--shadow-lg);
}
.split-media::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(148,163,184,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.09) 1px,transparent 1px);
  background-size:44px 44px;opacity:.6;
}
.split-media svg{position:relative;z-index:1;width:min(100%,330px);height:auto}

/* Numbered process */
.steps{counter-reset:step;display:grid;gap:26px}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding-top:30px}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:.12em;
  color:var(--cobalt);display:block;margin-bottom:14px;
}
.step::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line);
}
.step .bar{position:absolute;top:0;left:0;height:2px;width:0;background:var(--cobalt);transition:width .9s var(--ease) .15s;z-index:1}
.step.in .bar{width:100%}
.step h3{font-size:1.08rem;margin-bottom:.45em}
.step p{font-size:14.8px;line-height:1.65}

/* Dark band */
.band-dark{position:relative;background:var(--slate-950);color:var(--slate-300);overflow:hidden;isolation:isolate}
.band-dark::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(760px 460px at 18% 8%,rgba(37,99,235,.28),transparent 62%),
             radial-gradient(620px 420px at 92% 96%,rgba(30,64,175,.26),transparent 66%);
}
.band-dark h2,.band-dark h3,.band-dark h4,.band-dark .h2,.band-dark .h3{color:#fff}
.band-dark .h2 strong{color:var(--cobalt-lift)}
.band-dark .eyebrow{color:var(--cobalt-lift)}
.band-dark .eyebrow::before{background:var(--cobalt-lift)}
.band-dark .lead{color:rgba(226,232,240,.82)}

.badge-grid{display:grid;gap:16px;margin-top:12px}
@media(min-width:620px){.badge-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.badge-grid{grid-template-columns:repeat(4,1fr)}}
.badge{
  display:flex;flex-direction:column;gap:8px;
  padding:24px 22px;border-radius:var(--radius);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.badge:hover{border-color:rgba(147,180,251,.5);background:rgba(37,99,235,.14);transform:translateY(-4px)}
.badge b{font-family:var(--font-display);font-size:15px;font-weight:700;color:#fff;letter-spacing:.02em}
.badge span{font-size:13.5px;line-height:1.55;color:var(--slate-400)}
.badge .tag{
  align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;background:rgba(147,180,251,.18);color:var(--cobalt-lift);
}

/* Industry tiles */
.tiles{display:grid;gap:18px}
@media(min-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{
  display:flex;align-items:flex-start;gap:16px;
  padding:22px 24px;border-radius:var(--radius);
  background:var(--white);border:1px solid var(--line);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--cobalt-soft)}
.tile svg{width:24px;height:24px;color:var(--cobalt);flex:0 0 auto;margin-top:2px}
.tile b{font-family:var(--font-display);font-size:15.5px;font-weight:700;color:var(--ink);display:block}
.tile span{font-size:13.5px;color:var(--slate-500);display:block;margin-top:3px;line-height:1.5}

/* Quote */
.quote{max-width:860px;margin-inline:auto;text-align:center}
.quote blockquote{
  margin:0 0 26px;font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.3rem,2.7vw,1.95rem);line-height:1.4;letter-spacing:-.015em;color:#fff;
}
.quote figcaption{font-size:14px;color:var(--slate-400)}
.quote figcaption b{display:block;color:#fff;font-family:var(--font-display);font-size:15px;font-weight:700;margin-bottom:2px}

/* CTA band */
.cta-band{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(125deg,var(--cobalt-deep),var(--cobalt) 52%,#3B82F6);
  color:#fff;border-radius:var(--radius-lg);
  padding:clamp(44px,6vw,72px) clamp(28px,5vw,64px);
  box-shadow:var(--shadow-lg);
}
.cta-band::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(circle at 88% 14%,rgba(255,255,255,.28),transparent 46%),
                   radial-gradient(circle at 6% 92%,rgba(255,255,255,.16),transparent 44%);
}
.cta-band .h2{color:#fff;font-weight:300}
.cta-band .h2 strong{color:#fff;font-weight:700}
.cta-band p{color:rgba(255,255,255,.9);max-width:620px}
.cta-band .btn{background:#fff;color:var(--cobalt-deep);border-color:#fff;box-shadow:0 16px 36px -14px rgba(0,0,0,.4)}
.cta-band .btn:hover{background:var(--slate-900);border-color:var(--slate-900);color:#fff}
.cta-band .btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.cta-band .btn-on-dark:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.cta-split{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.cta-split{grid-template-columns:1.35fr .65fr}.cta-split .btn-row{justify-content:flex-end;margin-top:0}}

/* Locations */
.loc-grid{display:grid;gap:24px}
@media(min-width:800px){.loc-grid{grid-template-columns:repeat(2,1fr)}}
.loc{padding:32px 30px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--white);box-shadow:var(--shadow-sm)}
.loc h3{margin-bottom:.35em}
.loc .tagline{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt);margin-bottom:16px}
.loc address{font-style:normal;line-height:1.8;color:var(--slate-600);font-size:15.5px}
.loc a{color:var(--slate-800);font-weight:600}
.loc a:hover{color:var(--cobalt)}

/* Forms */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-md)}
.field{display:block;margin-bottom:20px}
.field span{display:block;font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--slate-800);margin-bottom:8px}
.field span i{color:var(--cobalt);font-style:normal}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--white);border:1.5px solid var(--slate-300);border-radius:10px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(37,99,235,.14);
}
.field-row{display:grid;gap:0 20px}
@media(min-width:640px){.field-row{grid-template-columns:repeat(2,1fr)}}
.form-note{font-size:13px;color:var(--slate-500);margin-top:16px}
.form-status{margin-top:18px;padding:14px 16px;border-radius:10px;background:var(--cobalt-soft);color:var(--cobalt-deep);font-size:14.5px;font-weight:600;display:none}
.form-status.show{display:block}

/* FAQ / accordion */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:1.06rem;font-weight:600;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;width:20px;height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .28s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .faq-body{padding:0 4px 26px;max-width:78ch;font-size:15.5px}

/* Job listings */
.jobs{display:grid;gap:16px}
.job{
  display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;
  padding:24px 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.job:hover{border-color:var(--cobalt-soft);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.job h3{margin:0 0 8px;font-size:1.12rem}
.job-meta{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:6px;background:var(--slate-100);color:var(--slate-600);
}
.pill-accent{background:var(--cobalt-soft);color:var(--cobalt-deep)}

/* News */
.posts{display:grid;gap:26px}
@media(min-width:720px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--white);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.post-thumb{height:170px;background:linear-gradient(140deg,#12203A,#1E40AF);position:relative;display:grid;place-items:center}
.post-thumb::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:34px 34px}
.post-thumb svg{width:46px;height:46px;color:rgba(255,255,255,.6);position:relative;z-index:1}
.post-body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.post time{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);display:block;margin-bottom:10px}
.post h3{font-size:1.15rem;margin-bottom:.5em}
.post p{font-size:15px;line-height:1.65}

/* Stat strip (light) */
.stat-strip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media(min-width:640px){.stat-strip{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.stat-strip{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--white);padding:32px 26px;text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;color:var(--cobalt);line-height:1;letter-spacing:-.025em}
.stat span{display:block;margin-top:10px;font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-500)}

/* Value / benefit list */
.values{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
@media(min-width:760px){.values{grid-template-columns:repeat(2,1fr)}}
.value{background:var(--white);padding:32px 30px}
.value b{display:block;font-family:var(--font-display);font-size:1.08rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.value p{font-size:15.2px;line-height:1.65}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--slate-950);color:var(--slate-400);padding:clamp(60px,7vw,92px) 0 0}
.footer-top{display:grid;gap:44px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:900px){.footer-top{grid-template-columns:1.5fr 2.5fr}}
.footer-brand .logo{align-items:flex-start;padding-left:0}
.footer-brand p{margin-top:20px;font-size:15px;line-height:1.7;max-width:340px}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--slate-300);
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease);
}
.socials a:hover{background:var(--cobalt);border-color:var(--cobalt);color:#fff;transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.footer-cols{display:grid;gap:36px}
@media(min-width:600px){.footer-cols{grid-template-columns:repeat(3,1fr)}}
.footer-cols h4{
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin:0 0 18px;
}
.footer-cols li+li{margin-top:11px}
.footer-cols a{color:var(--slate-400);font-size:15px;transition:color .2s var(--ease)}
.footer-cols a:hover{color:#fff}
.footer-offices{display:grid;gap:34px;padding:44px 0;border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:700px){.footer-offices{grid-template-columns:repeat(2,1fr)}}
.footer-offices h4{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.footer-offices address{font-style:normal;font-size:15px;line-height:1.85}
.footer-offices a{color:var(--slate-300)}
.footer-offices a:hover{color:var(--cobalt-lift)}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  padding:26px 0 30px;font-size:13.5px;
}
.footer-bottom a{color:var(--slate-400)}
.footer-bottom a:hover{color:#fff}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:8px 22px}

/* ==========================================================================
   Motion
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.09s}
.reveal-d2{transition-delay:.18s}
.reveal-d3{transition-delay:.27s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .step .bar{width:100%}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.mobile-nav,.hero-wave,.cta-band,.socials{display:none!important}
  body{color:#000}
  .hero,.page-hero,.band-dark,.site-footer{background:#fff!important;color:#000!important}
  .hero h1,.page-hero h1,.band-dark h2{color:#000!important}
}

/* ==========================================================================
   Careers — job posting & application
   ========================================================================== */
.job-facts{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:40px;
}
@media(min-width:620px){.job-facts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.job-facts{grid-template-columns:repeat(4,1fr)}}
.job-fact{background:var(--white);padding:26px 24px}
.job-fact span{
  display:block;font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--cobalt);margin-bottom:8px;
}
.job-fact b{
  display:block;font-family:var(--font-display);font-size:1.12rem;font-weight:700;
  color:var(--ink);line-height:1.35;letter-spacing:-.01em;
}

.posting-grid{display:grid;gap:26px}
@media(min-width:980px){.posting-grid{grid-template-columns:repeat(2,1fr)}}
.posting{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,3.4vw,40px);box-shadow:var(--shadow-sm);
}
.posting-lang{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-deep);
  background:var(--cobalt-soft);padding:6px 12px;border-radius:6px;margin-bottom:20px;
}
.posting h3{font-size:1.35rem;margin-bottom:.6em}
.posting h4{
  font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--ink);
  margin:1.8em 0 .6em;
}
.posting h4:first-of-type{margin-top:1.2em}
.posting p{font-size:15.6px;line-height:1.72}
.posting ul{display:grid;gap:11px;margin:.4em 0 1.2em}
.posting li{position:relative;padding-left:26px;font-size:15.4px;line-height:1.62;color:var(--slate-600)}
.posting li::before{
  content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--cobalt);
}
.posting .verbatim-note{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--slate-500);
}

/* Blocking notice — must never survive to production */
.notice-block{
  border:2px dashed #B91C1C;background:#FEF2F2;color:#7F1D1D;
  border-radius:var(--radius-lg);padding:clamp(24px,3vw,36px);margin-bottom:32px;
}
.notice-block h3{color:#7F1D1D;font-size:1.15rem;margin-bottom:.5em}
.notice-block p{font-size:15px;line-height:1.65;color:#7F1D1D}
.notice-block code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;
  background:rgba(127,29,29,.1);padding:2px 6px;border-radius:4px;
}
.notice-block ul{margin:.8em 0 0;display:grid;gap:8px}
.notice-block li{padding-left:20px;position:relative;font-size:14.6px}
.notice-block li::before{content:"→";position:absolute;left:0;opacity:.7}

/* Apply form */
.apply-wrap{display:grid;gap:clamp(32px,4vw,56px);align-items:start}
@media(min-width:980px){.apply-wrap{grid-template-columns:.9fr 1.1fr}}
.file-field input[type="file"]{
  padding:11px 14px;background:var(--slate-100);border-style:dashed;cursor:pointer;
}
.file-field input[type="file"]::file-selector-button{
  font:inherit;font-family:var(--font-display);font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--cobalt);color:#fff;border:0;border-radius:7px;
  padding:9px 16px;margin-right:14px;cursor:pointer;
}
.file-field input[type="file"]::file-selector-button:hover{background:var(--cobalt-dark)}
.apply-aside{
  background:var(--slate-950);color:var(--slate-300);border-radius:var(--radius-lg);
  padding:clamp(28px,3.4vw,40px);
}
.apply-aside h3{color:#fff;font-size:1.18rem}
.apply-aside .feature-list li{color:var(--slate-300)}
.apply-aside .feature-list li::before{background-color:rgba(147,180,251,.24)}
.apply-aside .btn{width:100%;margin-top:26px}

/* Informational cross-link band (e.g. job seekers on the B2B contact page) */
.info-band{
  display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;
  background:var(--cobalt-soft);border:1px solid #BFD3FD;border-radius:var(--radius-lg);
  padding:26px 30px;margin-bottom:clamp(40px,5vw,64px);
}
.info-band b{display:block;font-family:var(--font-display);font-size:1.05rem;color:var(--cobalt-deep);margin-bottom:5px}
.info-band p{font-size:15px;color:#1E3A8A;margin:0;max-width:64ch}
.info-band .btn{flex:0 0 auto}

/* NAP block — identical on every page (name / address / phone) */
.nap{
  display:grid;gap:28px;padding:40px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media(min-width:760px){.nap{grid-template-columns:1.2fr 1fr 1fr}}
.nap h4{
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin:0 0 12px;
}
.nap .nap-name{
  font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:#fff;
  display:block;margin-bottom:8px;letter-spacing:-.01em;
}
.nap address{font-style:normal;font-size:15px;line-height:1.8;color:var(--slate-400)}
.nap a{color:var(--slate-300)}
.nap a:hover{color:var(--cobalt-lift)}

/* Google Map embed */
.map-embed{
  margin-top:28px;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);background:var(--slate-100);
}
.map-embed iframe{display:block;width:100%;height:380px;border:0}
.map-note{font-size:12.5px;color:var(--slate-500);margin-top:12px}

/* ==========================================================================
   Candidate onboarding portal (/careers/)
   ========================================================================== */
.portal-wrap{display:grid;gap:clamp(32px,4vw,56px);align-items:start}
@media(min-width:1040px){.portal-wrap{grid-template-columns:1fr 340px}}

/* Progress stepper */
.stepper{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;padding:0;list-style:none}
.stepper li{
  flex:1 1 150px;position:relative;padding:14px 16px 14px 46px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  font-family:var(--font-display);font-size:13.5px;font-weight:600;color:var(--slate-500);
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.stepper li::before{
  content:attr(data-n);position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--slate-200);color:var(--slate-600);
  font-size:11.5px;font-weight:800;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.stepper li[aria-current="step"]{border-color:var(--cobalt);background:var(--cobalt-soft);color:var(--cobalt-deep)}
.stepper li[aria-current="step"]::before{background:var(--cobalt);color:#fff}
.stepper li.done{color:var(--slate-700);border-color:var(--cobalt-soft)}
.stepper li.done::before{background:var(--cobalt);color:#fff;content:"✓"}

/* Step panels */
.pstep{display:none}
.pstep.active{display:block;animation:pstepIn .35s var(--ease)}
@keyframes pstepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.no-js .pstep{display:block;margin-bottom:40px}
.no-js .stepper,.no-js .pstep-nav{display:none}
.pstep h3{font-size:1.3rem;margin-bottom:.35em}
.pstep > p.muted{font-size:15px;margin-bottom:26px}
.pstep-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.pstep-nav .spacer{flex:1}

/* Review list on the confirm step */
.review{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.review div{background:var(--white);padding:14px 18px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.review dt{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--slate-500);margin:0}
.review dd{margin:0;font-size:15px;color:var(--ink);text-align:right;word-break:break-word}
.review dd:empty::after{content:"—";color:var(--slate-400)}

/* Consent checkbox */
.check{display:flex;gap:12px;align-items:flex-start;margin-top:8px}
.check input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--cobalt)}
.check span{font-size:14.5px;line-height:1.6;color:var(--slate-600)}

/* Trust / anti-fraud notice */
.notice-safe{
  border:1px solid #A7D8BE;background:#F0FBF5;border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,34px);
}
.notice-safe h3{color:#14532D;font-size:1.1rem;display:flex;align-items:center;gap:10px}
.notice-safe h3 svg{width:20px;height:20px;flex:0 0 auto;color:#15803D}
.notice-safe p{font-size:14.6px;line-height:1.65;color:#14532D}
.notice-safe ul{display:grid;gap:10px;margin:14px 0 0}
.notice-safe li{position:relative;padding-left:26px;font-size:14.4px;line-height:1.6;color:#166534}
.notice-safe li::before{
  content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:4px;
  background:#15803D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* Sidebar summary card */
.portal-aside{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:20px}
.portal-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow-sm);
}
.portal-card h4{
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--cobalt);margin:0 0 14px;
}
.portal-card p{font-size:14.5px;line-height:1.65}
.portal-card ol{display:grid;gap:12px;counter-reset:pc;margin:0}
.portal-card ol li{
  position:relative;padding-left:30px;font-size:14.4px;line-height:1.55;color:var(--slate-600);
}
.portal-card ol li::before{
  counter-increment:pc;content:counter(pc);
  position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
  background:var(--slate-100);color:var(--slate-600);
  display:grid;place-items:center;font-size:11px;font-weight:800;font-family:var(--font-display);
}
.file-hint{font-size:13px;color:var(--slate-500);margin-top:8px}

/* ==========================================================================
   Assistant modal — profil d'employé temporaire
   ========================================================================== */
.wiz-overlay{
  position:fixed;inset:0;z-index:1200;
  display:grid;place-items:center;
  padding:clamp(12px,3vw,32px);
  background:rgba(11,18,32,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility .3s;
}
.wiz-overlay.open{opacity:1;visibility:visible}
body.wiz-open{overflow:hidden}

.wiz{
  width:min(680px,100%);max-height:min(92vh,880px);
  display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--radius-lg);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65);
  transform:translateY(18px) scale(.985);
  transition:transform .32s var(--ease);
  overflow:hidden;
}
.wiz-overlay.open .wiz{transform:none}

.wiz-head{
  padding:22px clamp(22px,4vw,34px) 0;
  border-bottom:1px solid var(--line);
  background:var(--white);flex:0 0 auto;
}
.wiz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.wiz-count{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt);
}
.wiz-later{
  font-size:13px;font-weight:600;color:var(--slate-500);
  padding:6px 10px;border-radius:7px;
}
.wiz-later:hover{background:var(--slate-100);color:var(--slate-800)}
.wiz-bar{height:4px;background:var(--slate-200);border-radius:3px;overflow:hidden;margin-bottom:18px}
.wiz-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cobalt),var(--cobalt-lift));border-radius:3px;transition:width .45s var(--ease)}
.wiz-head h2{font-size:clamp(1.2rem,2.6vw,1.5rem);margin:0 0 .3em;letter-spacing:-.015em}
.wiz-head p{font-size:14.5px;line-height:1.6;color:var(--slate-500);margin:0 0 20px}

.wiz-body{
  padding:26px clamp(22px,4vw,34px);
  overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch;
}
.wiz-panel{display:none}
.wiz-panel.active{display:block;animation:wizIn .34s var(--ease)}
@keyframes wizIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}

.wiz-foot{
  display:flex;gap:12px;align-items:center;
  padding:18px clamp(22px,4vw,34px);
  border-top:1px solid var(--line);background:var(--slate-100);flex:0 0 auto;
}
.wiz-foot .spacer{flex:1}
.wiz-foot .btn{padding:13px 24px;font-size:12px}

/* Question blocks inside the wizard */
.q{margin-bottom:26px}
.q:last-child{margin-bottom:0}
.q > label > span,.q-label{
  display:block;font-family:var(--font-display);font-size:14.5px;font-weight:700;
  color:var(--ink);margin-bottom:6px;line-height:1.45;
}
.q-hint{font-size:13px;color:var(--slate-500);margin:0 0 10px;line-height:1.55}
.q textarea,.q input,.q select{width:100%;padding:13px 15px;font:inherit;font-size:16px;color:var(--ink);background:var(--white);border:1.5px solid var(--slate-300);border-radius:10px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.q textarea{min-height:104px;resize:vertical}
.q textarea:focus,.q input:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.q .count{font-size:12px;color:var(--slate-400);margin-top:6px;text-align:right}
.q .count.over{color:#B91C1C;font-weight:600}

/* Radio scale (self-assessment) */
.scale{display:flex;flex-wrap:wrap;gap:8px}
.scale label{
  flex:1 1 92px;position:relative;cursor:pointer;
}
.scale input{position:absolute;opacity:0;width:0;height:0}
.scale span{
  display:block;text-align:center;padding:11px 8px;border-radius:9px;
  border:1.5px solid var(--slate-300);background:var(--white);
  font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--slate-600);
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.scale label:hover span{border-color:var(--cobalt-lift)}
.scale input:checked + span{border-color:var(--cobalt);background:var(--cobalt-soft);color:var(--cobalt-deep)}
.scale input:focus-visible + span{outline:3px solid var(--cobalt);outline-offset:2px}

/* Choice cards (single select, bigger tap targets) */
.choices{display:grid;gap:10px}
.choices label{position:relative;cursor:pointer}
.choices input{position:absolute;opacity:0;width:0;height:0}
.choices span{
  display:block;padding:14px 16px;border-radius:11px;
  border:1.5px solid var(--slate-300);background:var(--white);
  font-size:15px;line-height:1.5;color:var(--slate-700);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.choices input:checked + span{border-color:var(--cobalt);background:var(--cobalt-soft);color:var(--cobalt-deep);font-weight:600}
.choices input:focus-visible + span{outline:3px solid var(--cobalt);outline-offset:2px}

/* Welcome hero name */
.welcome-name{
  display:inline-block;
  background:linear-gradient(90deg,var(--cobalt-lift),#fff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.welcome-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-md);text-align:center;
  max-width:560px;margin-inline:auto;
}
.welcome-card .card-icon{margin-inline:auto}
.welcome-card h2{font-size:clamp(1.3rem,3vw,1.7rem)}
.welcome-card p{font-size:15.5px}
.welcome-card .btn{margin-top:8px}
.wiz-done{text-align:center;padding:14px 0}
.wiz-done .card-icon{margin-inline:auto;background:#DCFCE7;color:#15803D}

/* ==========================================================================
   Outil recruteur (interne)
   ========================================================================== */
.rec-grid{display:grid;gap:clamp(24px,3vw,36px);align-items:start}
@media(min-width:1060px){.rec-grid{grid-template-columns:minmax(0,420px) minmax(0,1fr)}}
.rec-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,30px);box-shadow:var(--shadow-sm)}
.rec-panel h2{font-size:1.15rem;margin-bottom:.5em}
.rec-panel .field{margin-bottom:16px}
.tmpl-picker{display:grid;gap:9px;margin-bottom:22px}
.tmpl-picker label{position:relative;cursor:pointer}
.tmpl-picker input{position:absolute;opacity:0;width:0;height:0}
.tmpl-picker span{
  display:block;padding:13px 15px;border-radius:10px;border:1.5px solid var(--slate-300);
  font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--slate-700);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.tmpl-picker span small{display:block;font-family:var(--font-body);font-weight:400;font-size:12.5px;color:var(--slate-500);margin-top:3px}
.tmpl-picker input:checked + span{border-color:var(--cobalt);background:var(--cobalt-soft);color:var(--cobalt-deep)}
.tmpl-picker input:focus-visible + span{outline:3px solid var(--cobalt);outline-offset:2px}

.rec-link{
  display:flex;gap:8px;align-items:center;margin-bottom:18px;
  background:var(--slate-100);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
}
.rec-link code{
  flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;
  color:var(--slate-700);overflow:auto;white-space:nowrap;
}
.rec-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.rec-actions .btn{flex:1 1 150px;padding:13px 18px;font-size:12px}
.copied{
  font-size:13px;font-weight:600;color:#15803D;margin-top:12px;
  opacity:0;transition:opacity .25s var(--ease);
}
.copied.show{opacity:1}

.rec-preview{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.rec-tabs{display:flex;gap:2px;background:var(--slate-100);padding:6px;border-bottom:1px solid var(--line)}
.rec-tabs button{
  flex:1;padding:10px 12px;border-radius:8px;
  font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate-500);
}
.rec-tabs button[aria-selected="true"]{background:var(--white);color:var(--cobalt);box-shadow:var(--shadow-sm)}
.rec-view{display:none;padding:0}
.rec-view.active{display:block}
.rec-view iframe{width:100%;height:620px;border:0;display:block;background:#EEF2F7}
.rec-view textarea{
  width:100%;min-height:520px;border:0;padding:22px;font-size:14px;line-height:1.65;resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--slate-700);
}
.rec-view textarea:focus{outline:none}
.rec-note{font-size:13px;color:var(--slate-500);padding:14px 22px;border-top:1px solid var(--line);background:var(--slate-100);margin:0}

/* ==========================================================================
   Page contrat d'emploi
   ========================================================================== */
.terms{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:34px}
@media(min-width:640px){.terms{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.terms{grid-template-columns:repeat(4,1fr)}}
.term{background:var(--white);padding:24px 22px}
.term span{display:block;font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--cobalt);margin-bottom:8px}
.term b{display:block;font-family:var(--font-display);font-size:1.08rem;font-weight:700;color:var(--ink);line-height:1.35}
.doc{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,42px);box-shadow:var(--shadow-sm);
}
.doc h3{font-size:1.15rem;margin:1.6em 0 .5em}
.doc h3:first-child{margin-top:0}
.doc p,.doc li{font-size:15.4px;line-height:1.7}
.doc ol{counter-reset:d;display:grid;gap:12px;margin:.6em 0 1.4em}
.doc ol li{position:relative;padding-left:30px;color:var(--slate-600)}
.doc ol li::before{
  counter-increment:d;content:counter(d);position:absolute;left:0;top:1px;
  width:21px;height:21px;border-radius:50%;background:var(--cobalt-soft);color:var(--cobalt-deep);
  display:grid;place-items:center;font-size:11px;font-weight:800;font-family:var(--font-display);
}
.doc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}

/* Liste de candidats (outil recruteur) */
.cand-panel{margin-bottom:22px}
.cand-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cand-head h2{margin:0;font-size:1.05rem}
.cand-count{font-size:12.5px;color:var(--slate-500);font-weight:600}
.cand-list{display:grid;gap:8px;max-height:290px;overflow-y:auto;margin-bottom:14px}
.cand-empty{font-size:14px;color:var(--slate-500);padding:16px;background:var(--slate-100);border-radius:10px;margin:0 0 14px}
.cand{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:11px 13px;border-radius:10px;border:1.5px solid var(--line);background:var(--white);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.cand:hover{border-color:var(--cobalt-lift);background:var(--slate-100)}
.cand[aria-current="true"]{border-color:var(--cobalt);background:var(--cobalt-soft)}
.cand-info{flex:1;min-width:0}
.cand-info b{display:block;font-family:var(--font-display);font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.cand-info span{display:block;font-size:12.5px;color:var(--slate-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cand-stage{
  flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border-radius:5px;background:var(--slate-100);color:var(--slate-600);
}
.cand-stage[data-stage="contacte"]{background:var(--cobalt-soft);color:var(--cobalt-deep)}
.cand-stage[data-stage="profil"]{background:#FEF3C7;color:#92400E}
.cand-stage[data-stage="accepte"]{background:#DCFCE7;color:#15803D}
.cand-del{flex:0 0 auto;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--slate-400);font-size:18px;line-height:1}
.cand-del:hover{background:#FEE2E2;color:#B91C1C}
.cand-tools{display:flex;flex-wrap:wrap;gap:8px}
.cand-tools .btn{flex:1 1 auto;padding:11px 14px;font-size:11.5px}

/* Dossier + fiche détaillée du candidat */
.dossier-box{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--slate-900);border-radius:10px;padding:12px 14px;margin-bottom:18px;
}
.dossier-box span{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt-lift)}
.dossier-box code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;font-weight:700;color:#fff;letter-spacing:.06em}

.cand-detail{
  grid-column:1/-1;background:var(--slate-100);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;margin-top:-2px;
}
.cand-detail .await{
  display:flex;align-items:center;gap:9px;font-size:13.5px;color:#92400E;
  background:#FEF3C7;border-radius:8px;padding:10px 13px;margin:0 0 14px;
}
.cand-detail .synced{background:#DCFCE7;color:#15803D}
.qa{display:grid;gap:0}
.qa-row{padding:11px 0;border-bottom:1px solid var(--slate-200)}
.qa-row:last-child{border-bottom:0}
.qa-row dt{
  font-family:var(--font-display);font-size:12.5px;font-weight:700;color:var(--slate-500);
  margin:0 0 4px;line-height:1.45;
}
.qa-row dd{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap}
.qa-row.from-cand dt{color:var(--cobalt)}
.qa-row.empty dd{color:var(--slate-400);font-style:italic}
.cand-toggle{
  flex:0 0 auto;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
  color:var(--slate-400);font-size:13px;transition:transform .2s var(--ease),background .2s var(--ease);
}
.cand-toggle:hover{background:var(--slate-100);color:var(--slate-700)}
.cand-toggle[aria-expanded="true"]{transform:rotate(90deg);color:var(--cobalt)}
.cand-wrap{display:grid;gap:0}

/* ==========================================================================
   Contrat — document imprimable + confort de lecture dans l'assistant
   ========================================================================== */
.contract-print{display:none}

/* Les articles du contrat, dans l'assistant : lecture confortable, pas de scroll */
[data-contract-page] .wiz{width:min(720px,100%)}
[data-contract-page] .wiz-panel p{
  font-size:15px;line-height:1.62;color:var(--slate-700);margin:0 0 11px;
}
[data-contract-page] .wiz-panel p:last-child{margin-bottom:0}
[data-contract-page] .wiz-head h2{font-size:1.22rem}
[data-contract-page] .wiz-body{padding-top:18px;padding-bottom:18px}
[data-contract-page] .wiz{max-height:min(94vh,900px)}
[data-contract-page] .check span{font-size:14px}
[data-contract-page] .terms{margin-bottom:0}

@media print{
  body > *{display:none!important}
  .contract-print{
    display:block!important;
    max-width:none;margin:0;padding:0;
    font-family:Georgia,'Times New Roman',serif;color:#000;font-size:11.5pt;line-height:1.55;
  }
  .contract-print h1{font-size:18pt;margin:0 0 4pt;font-family:inherit;color:#000}
  .contract-print h2{font-size:12.5pt;margin:16pt 0 5pt;font-family:inherit;color:#000;page-break-after:avoid}
  .contract-print p{margin:0 0 8pt;orphans:3;widows:3}
  .contract-print .cp-meta{font-size:10pt;color:#444;margin-bottom:14pt;border-bottom:1px solid #999;padding-bottom:8pt}
  .contract-print .cp-sign{margin-top:20pt;page-break-inside:avoid}
  @page{margin:2cm}
}

/* Page de paie */
.payroll-cta{margin-top:26px}
.payroll-host{font-size:13px;color:var(--slate-500);margin:12px 0 0}
.payroll-host strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;color:var(--ink);background:var(--slate-100);
  padding:3px 8px;border-radius:5px;
}

/* Verrou de la page recruteur */
.lock{
  position:fixed;inset:0;z-index:1300;display:grid;place-items:center;
  background:var(--slate-950);padding:24px;
}
.lock-card{
  width:min(400px,100%);background:var(--white);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,36px);box-shadow:var(--shadow-lg);text-align:center;
}
.lock-card .card-icon{margin-inline:auto}
.lock-card h1{font-size:1.25rem;margin-bottom:.4em}
.lock-card p{font-size:14.5px;color:var(--slate-500);margin-bottom:22px}
.lock-card .field{text-align:left;margin-bottom:16px}
.lock-card .btn{width:100%}
.lock-err{color:#B91C1C;font-size:13.5px;font-weight:600;margin-top:12px;min-height:20px}
.lock-note{font-size:12.5px;color:var(--slate-400);margin-top:18px;line-height:1.55}
body.locked{overflow:hidden}
body.locked .site-header,body.locked main,body.locked .site-footer{filter:blur(6px);pointer-events:none;user-select:none}

/* Envoi réel : état des boutons */
.send-state{font-size:13.5px;font-weight:600;margin-top:12px;min-height:20px}
.send-state.ok{color:#15803D}
.send-state.err{color:#B91C1C}
.send-state.busy{color:var(--slate-500)}

/* Aperçus modifiables */
.rec-view textarea{cursor:text;background:var(--white)}
.rec-view textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--cobalt-soft)}
.rec-view iframe[data-editable]{outline:2px solid var(--cobalt-soft);outline-offset:-2px}
.rec-edited{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 22px;background:#FEF3C7;border-top:1px solid #FDE68A;
}
.rec-edited span{font-size:13.5px;font-weight:600;color:#92400E}
.rec-edited .btn{padding:8px 14px;font-size:11px;flex:0 0 auto}
.rec-tabs button[data-dirty="true"]::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#D97706;margin-left:7px;vertical-align:middle;
}

/* Emplacement de la clé API (repliable) */
.api-slot{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px;background:var(--slate-100)}
.api-slot summary{
  padding:13px 16px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--slate-700);
  display:flex;align-items:center;justify-content:space-between;
}
.api-slot summary::-webkit-details-marker{display:none}
.api-slot summary::after{content:"+";font-size:17px;color:var(--slate-400);line-height:1}
.api-slot[open] summary::after{content:"–"}
.api-slot[open] summary{border-bottom:1px solid var(--line)}
.api-body{padding:16px}
.api-body .field{margin-bottom:12px}
.api-body input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.api-body .cand-tools{margin-bottom:6px}

/* Ligne du mot de passe serveur */
.secret-row{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:13px 15px;border:1px solid var(--line);border-radius:10px;background:var(--white);margin-bottom:12px;
}
.secret-row b{display:block;font-family:var(--font-display);font-size:13.5px;color:var(--ink)}
.secret-row span{display:block;font-size:12.5px;color:var(--slate-500);margin-top:2px}
.secret-new{padding:14px 15px;border:1px solid var(--cobalt-soft);border-radius:10px;background:var(--cobalt-soft);margin-bottom:14px}
.secret-new .rec-link{background:var(--white);margin-bottom:10px}
.secret-new .q-hint{color:var(--cobalt-deep);margin-bottom:10px}

/* ==========================================================================
   Outil recruteur — parcours d'appel
   ========================================================================== */
.call-bar{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  background:linear-gradient(125deg,var(--cobalt-deep),var(--cobalt) 60%,#3B82F6);
  border-radius:var(--radius-lg);padding:clamp(22px,3vw,30px);margin-bottom:26px;
  box-shadow:var(--shadow-lg);
}
.call-bar b{display:block;font-family:var(--font-display);font-size:1.15rem;color:#fff;margin-bottom:4px}
.call-bar span{display:block;font-size:14.5px;color:rgba(255,255,255,.88)}
.call-bar .btn{background:#fff;color:var(--cobalt-deep);border-color:#fff;flex:0 0 auto}
.call-bar .btn:hover{background:var(--slate-900);border-color:var(--slate-900);color:#fff}
.btn-lg{padding:18px 32px;font-size:14px}

/* Gabarits en grandes cibles */
.tmpl-big{gap:11px}
.tmpl-big span{padding:16px 18px;font-size:15px}
.tmpl-big span small{font-size:13px;margin-top:4px}

/* Envoi : deux boutons pleine largeur */
.send-row{display:grid;gap:12px}
@media(min-width:520px){.send-row{grid-template-columns:1fr 1fr}}
.send-row .btn{width:100%}

/* Aperçu replié par défaut — hors du chemin critique */
.peek{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.peek summary{
  cursor:pointer;list-style:none;font-family:var(--font-display);
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt);
  display:flex;align-items:center;gap:8px;
}
.peek summary::-webkit-details-marker{display:none}
.peek summary::before{content:"▸";transition:transform .2s var(--ease)}
.peek[open] summary::before{transform:rotate(90deg)}
.peek-body{padding-top:16px}
.peek-body .rec-view iframe{height:340px}
.peek-body .rec-view textarea{min-height:260px}
.peek-body .rec-tabs{border-radius:10px 10px 0 0}

/* Fiche candidat cliquable = reprise directe de l'appel */
.cand{cursor:pointer}

/* Éditeur de configuration */
.config-slot summary em{
  font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:3px 9px;border-radius:5px;background:#FEF3C7;color:#92400E;margin-left:10px;
}
.config-slot summary em[data-ok]{background:#DCFCE7;color:#15803D}
.cfg-group{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.cfg-group:last-of-type{border-bottom:0}
.cfg-group h4{
  font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cobalt);margin:0 0 10px;
}
.cfg-group .field{margin-bottom:14px}
.cfg-group .field em.q-hint{display:block;font-style:normal;margin:5px 0 0;font-size:12.5px}
.cfg-group textarea{min-height:90px;font-size:14px}
.cfg-group input[data-missing],.cfg-group textarea[data-missing],.cfg-group select[data-missing]{
  border-color:#FCA5A5;background:#FEF2F2;
}
.cfg-how{
  margin-top:20px;padding:16px 18px;background:var(--cobalt-soft);
  border-radius:10px;color:var(--cobalt-deep);
}
.cfg-how b{display:block;font-family:var(--font-display);font-size:13px;margin-bottom:8px}
.cfg-how ol{counter-reset:h;display:grid;gap:7px;margin:0}
.cfg-how li{position:relative;padding-left:26px;font-size:14px;line-height:1.55}
.cfg-how li::before{
  counter-increment:h;content:counter(h);position:absolute;left:0;top:1px;
  width:18px;height:18px;border-radius:50%;background:var(--cobalt);color:#fff;
  display:grid;place-items:center;font-size:10.5px;font-weight:800;
}
.cfg-how code,.config-slot .q-hint code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;background:rgba(37,99,235,.12);padding:1px 5px;border-radius:4px;
}

/* ==========================================================================
   Téléphone — l'essentiel doit être visible sans défiler
   Mesuré sur iPhone 12 mini (375 x 812, ~672 px réellement visibles).
   ========================================================================== */
@media (max-width: 700px){

  /* Les en-têtes mangeaient un écran entier avant le contenu utile. */
  .hero{padding:calc(var(--nav-h) + 28px) 0 40px}
  .page-hero{padding:calc(var(--nav-h) + 26px) 0 34px}
  .page-hero p{font-size:15.5px}
  .breadcrumb{margin-bottom:14px}
  .hero-stats{margin-top:32px}
  .section{padding:52px 0}
  .section-tight{padding:40px 0}
  .section-head{margin-bottom:30px}

  /* Sur un écran étroit, le formulaire passe avant le discours. */
  .contact-first{order:-1}   /* colonne entière, pas seulement la carte */
}

/* --------------------------------------------------------------------------
   Modal + clavier logiciel.
   iOS ne réduit pas les unités vh quand le clavier monte : le modal gardait
   sa hauteur et ses boutons finissaient sous le clavier, hors d'atteinte.
   dvh corrige le cas courant ; le JS (visualViewport) corrige le reste.
   -------------------------------------------------------------------------- */
.wiz-overlay{
  height:100dvh;
  align-items:flex-start;
  padding-top:max(12px, env(safe-area-inset-top));
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}
.wiz{max-height:100%}
@supports not (height: 100dvh){
  .wiz-overlay{height:100%}
}

/* Quand le clavier est ouvert, on récupère chaque pixel. */
body.kb-open .wiz-head{padding-top:12px}
body.kb-open .wiz-head h2{font-size:1.05rem;margin-bottom:.2em}
body.kb-open .wiz-head p{display:none}
body.kb-open .wiz-bar{margin-bottom:12px}
body.kb-open .wiz-body{padding-top:14px;padding-bottom:14px}
body.kb-open .wiz-foot{padding-top:12px;padding-bottom:12px}
body.kb-open .dossier-box{display:none}

/* Cibles tactiles confortables */
@media (max-width: 700px){
  .wiz-foot .btn{flex:1;padding:15px 18px}
  .wiz-foot .spacer{display:none}
  .field input,.field select,.field textarea,
  .q input,.q select,.q textarea{font-size:16px}  /* < 16px : iOS zoome */
}

@media (max-width: 700px){
  /* L'en-tête doit annoncer, pas occuper l'écran. */
  .page-hero h1{font-size:clamp(1.6rem,7vw,2rem);margin-bottom:12px}
  .page-hero p{font-size:15px;line-height:1.55}
  .page-hero{padding:calc(var(--nav-h) + 22px) 0 28px}

  /* Bandeau de renvoi : utile, mais secondaire. */
  .info-band{padding:18px 20px;gap:14px;margin-bottom:26px}
  .info-band b{font-size:.98rem}
  .info-band p{font-size:14px}

  .form-card{padding:24px 20px}
  .form-card .h3{font-size:1.12rem}
}

/* ==========================================================================
   Typographie sur téléphone
   Les lignes en drapeau très inégales donnaient un bord droit en dents de
   scie. On centre là où le bloc est court, et on laisse le navigateur
   équilibrer les coupures.
   ========================================================================== */
@media (max-width: 700px){

  /* En-têtes de page */
  .page-hero .container{text-align:center}
  .page-hero .breadcrumb{justify-content:center}
  .page-hero h1,
  .hero h1{text-wrap:balance}
  .page-hero p,
  .hero p{margin-inline:auto;text-wrap:pretty}

  /* Intertitres de section */
  .section-head{text-align:center;margin-inline:auto}
  .section-head .eyebrow{justify-content:center}
  .section-head .h2{text-wrap:balance}
  .section-head .lead{text-wrap:pretty;margin-inline:auto}

  /* Bandes de renvoi et cartes courtes */
  .info-band{text-align:center;flex-direction:column}
  .info-band p{text-wrap:pretty;margin-inline:auto}
  .info-band .btn{width:100%}

  .card{text-align:center;align-items:center}
  .card .card-icon{margin-inline:auto}
  .card p{text-wrap:pretty}
  .card .link-arrow{justify-content:center}

  .tile{flex-direction:column;text-align:center;align-items:center;gap:10px}
  .stat,.job-fact,.term,.hero-stat{text-align:center}
  .badge{text-align:center;align-items:center}
  .value{text-align:center}
  .value p{text-wrap:pretty}

  .quote blockquote{text-wrap:pretty}
  .cta-band{text-align:center}
  .cta-band p{margin-inline:auto;text-wrap:pretty}
  .cta-band .btn-row{justify-content:center}

  /* Listes à puces : le texte reste aligné à gauche, c'est plus lisible,
     mais le bloc est centré dans sa colonne. */
  .feature-list{max-width:32ch;margin-inline:auto;text-align:left}
  .notice-safe ul{max-width:34ch;margin-inline:auto;text-align:left}

  /* En revanche on NE centre PAS ce qui se lit en continu : le contrat,
     les réponses de la FAQ et les champs de formulaire restent au fer à
     gauche, où l'œil retrouve le début de chaque ligne. */
  .doc,.faq .faq-body,.form-card,.posting,.wiz-body{text-align:left}
  .doc p,.faq .faq-body p,.posting p{text-wrap:pretty}
}

/* ==========================================================================
   Débordement horizontal
   Le tiroir de navigation est rangé hors écran (translateX(100%)) : il
   mesure 375 px à droite du viewport. `overflow-x:hidden` sur body seul ne
   le rogne pas de façon fiable sur iOS — d'où la barre de défilement
   horizontale et la page légèrement décalée. On rogne sur les deux éléments.
   `clip` est préférable à `hidden` : il ne crée pas de conteneur de
   défilement, donc ne casse pas position:sticky.
   ========================================================================== */
html{overflow-x:hidden}
body{overflow-x:hidden}
@supports (overflow: clip){
  html{overflow-x:clip}
  body{overflow-x:clip}
}
/* Le tiroir fermé ne doit rien peser dans la largeur du document. */
.mobile-nav{right:0;max-width:100%}
body:not(.nav-open) .mobile-nav{transform:translateX(105%);pointer-events:none}

/* ==========================================================================
   Modal en plein écran quand le clavier est ouvert
   Sur un iPhone mini, un modal centré avec ses marges ne laissait que 132 px
   de contenu — un seul champ visible. Clavier ouvert, on prend tout l'écran
   et on réduit l'habillage au strict nécessaire.
   ========================================================================== */
body.kb-open .wiz-overlay{padding:0;align-items:stretch}
body.kb-open .wiz{
  width:100%;max-width:none;height:100%;max-height:none;
  border-radius:0;box-shadow:none;
}
body.kb-open .wiz-head{padding:10px 16px 0}
body.kb-open .wiz-bar{display:none}
body.kb-open .wiz-top{margin-bottom:6px}
body.kb-open .wiz-head h2{
  font-size:.95rem;margin:0 0 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.kb-open .wiz-body{padding:12px 16px}
body.kb-open .wiz-foot{padding:10px 16px}
body.kb-open .wiz-foot .btn{padding:13px 16px}
body.kb-open .peek,
body.kb-open .form-note,
body.kb-open .q-hint{display:none}
body.kb-open .field{margin-bottom:12px}
body.kb-open .q{margin-bottom:14px}

/* Clavier ouvert : l'habillage prenait 147 px sur 336. Le titre vient d'être
   lu, le compteur suffit à se repérer — on rend la place au formulaire. */
body.kb-open .wiz-head{padding:8px 16px 0}
body.kb-open .wiz-head h2{display:none}
body.kb-open .wiz-top{margin-bottom:8px}
body.kb-open .wiz-count{font-size:11px}
body.kb-open .wiz-later{font-size:12px;padding:4px 8px}
body.kb-open .wiz-foot{padding:8px 16px}
body.kb-open .wiz-foot .btn{padding:12px 16px;font-size:12px}

/* ==========================================================================
   Téléphone : plus de fenêtre superposée, des sections qui se remplacent
   --------------------------------------------------------------------------
   S'applique aux trois parcours — /careers/, /contrat/ et /recruteur/ — qui
   partagent le même balisage .wiz-overlay.

   Sur un petit écran, une fenêtre superposée se bat avec le clavier : elle est
   en position fixe, donc le navigateur ne peut pas la faire défiler pour
   dégager le champ actif. En la remettant dans le flux, le clavier redevient
   le problème du navigateur, qui sait le régler. Une étape à la fois, la
   suivante prend la place de la précédente.
   ========================================================================== */
@media (max-width: 700px){
  .wiz-overlay{
    position:static;
    display:none;
    height:auto;top:auto;
    padding:0;
    background:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    opacity:1;visibility:visible;
    transition:none;
  }
  .wiz-overlay.open{display:block}

  .wiz{
    width:100%;max-width:none;
    height:auto;max-height:none;
    transform:none;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
  }
  .wiz-body{overflow:visible}

  /* le pied colle en bas de l'écran : le bouton reste sous le pouce */
  .wiz-foot{
    position:sticky;bottom:0;z-index:2;
    border-top:1px solid var(--line);
    background:var(--slate-100);
    padding-bottom:max(12px, env(safe-area-inset-bottom));
  }

  /* la page défile normalement, on ne la bloque plus */
  body.wiz-open{overflow:auto}

  /* le mode « clavier ouvert » n'a plus lieu d'être : c'est le navigateur
     qui gère, et l'habillage complet redevient utile */
  body.kb-open .wiz{height:auto;max-height:none;border-radius:var(--radius-lg)}
  body.kb-open .wiz-overlay{padding:0}
  body.kb-open .wiz-head{padding:22px clamp(22px,4vw,34px) 0}
  body.kb-open .wiz-head h2{display:block;font-size:1.2rem}
  body.kb-open .wiz-bar{display:block}
  body.kb-open .wiz-head p{display:block}
  body.kb-open .peek,
  body.kb-open .form-note,
  body.kb-open .q-hint{display:block}
}

/* Une section à la fois : la carte d'introduction cède la place au parcours
   dès qu'il démarre, puis chaque étape remplace la précédente. */
@media (max-width: 700px){
  body.wiz-open .welcome-card,
  body.wiz-open .call-bar,
  body.wiz-open .cand-panel{display:none}
}