/* ============================================================
   DEFERRED CSS - everything below the fold.
   Loaded once, cached (see _headers), reused by every page.
   Splitting it out is what makes page-to-page navigation feel
   instant: the second page never re-downloads this.

   Generated by build.py from src/css/. Edit there.
   ============================================================ */
/* ============================================================
   STATS STRIP
   ============================================================ */
.stats{background:var(--deep);color:#fff;padding-block:clamp(34px,4vw,46px)}
.stats-grid{display:grid;gap:26px 20px;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){ .stats-grid{grid-template-columns:repeat(4,1fr)} }
.stat b{display:block;font-family:Montserrat,"Montserrat fb",sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:700}
.stat span{display:block;font-size:13.5px;color:rgba(255,255,255,.62);margin-top:4px}

/* ============================================================
   SERVICE AREA
   ============================================================ */
.zone-grid{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:1fr}
@media (min-width:640px){ .zone-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .zone-grid{grid-template-columns:repeat(4,1fr)} }
.zone{padding:clamp(24px,2.6vw,30px)}
.zone h3{
  font-size:clamp(17px,1.5vw,19.5px);font-weight:700;
  color:var(--pine-ink);margin-bottom:10px;
}
.zone p{color:var(--slate);font-size:15.2px;line-height:1.7}

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:1fr}
@media (min-width:620px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .svc-grid{grid-template-columns:repeat(4,1fr)} }
.svc{
  position:relative;padding:clamp(24px,2.6vw,30px);overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s;
}
.svc::after{ /* corner glow on hover */
  content:"";position:absolute;top:-40%;right:-40%;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,147,142,.13),transparent 70%);
  opacity:0;transition:opacity .35s;
}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:rgba(0,122,120,.22)}
.svc:hover::after{opacity:1}
.svc-ico{
  width:50px;height:50px;border-radius:var(--r-sm);
  background:var(--pine);color:#fff;
  display:grid;place-items:center;margin-bottom:20px;
  transition:transform .35s var(--ease),background .3s;
}
.svc:hover .svc-ico{transform:rotate(-7deg) scale(1.06);background:var(--teal)}
.svc-ico svg{width:24px;height:24px}
.svc h3{font-size:18.5px;font-weight:700;margin-bottom:9px}
.svc p{font-size:14.8px;color:var(--slate)}
/* The badge is absolutely positioned, so on a card WITH an icon it sits in
   the gap beside it. On a card without one there is no gap, and it landed on
   top of the heading. Cards without an icon get top room reserved for it.  */
.svc-tag{
  position:absolute;top:18px;right:18px;
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--teal-ink);background:var(--mist);padding:4px 10px;border-radius:var(--r-pill);
}
.svc-tag.inline{position:static;display:inline-block;margin-bottom:14px}

/* ============================================================
   METHOD (tabbed checklist)
   ============================================================ */
.method{background:var(--mist)}
.method-shell{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:1fr}
@media (min-width:900px){ .method-shell{grid-template-columns:260px 1fr;align-items:start} }

.tabs{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;
  /* fade the right edge so the horizontal scroll is discoverable on phones */
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
  mask-image:linear-gradient(90deg,#000 88%,transparent);
}
.tabs::-webkit-scrollbar{display:none}
@media (min-width:900px){
  .tabs{flex-direction:column;overflow:visible;-webkit-mask-image:none;mask-image:none}
}
.tab{
  flex:none;display:flex;align-items:center;gap:10px;
  padding:13px 17px;min-height:48px;
  border:1px solid transparent;border-radius:var(--r-sm);
  background:rgba(255,255,255,.55);color:var(--slate);
  font-size:14.5px;font-weight:600;font-family:Montserrat,"Montserrat fb",sans-serif;
  cursor:pointer;text-align:left;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,transform .15s var(--ease);
}
.tab:hover{background:#fff;color:var(--ink)}
.tab[aria-selected="true"]{background:var(--pine);color:#fff;border-color:var(--pine);box-shadow:var(--shadow-s)}
.tab svg{width:18px;height:18px;flex:none;opacity:.85}
@media (min-width:900px){ .tab{width:100%} .tab[aria-selected="true"]{transform:translateX(4px)} }

.panel{padding:clamp(24px,3vw,36px)}
.panel[hidden]{display:none}
.panel h3{font-size:clamp(20px,2vw,25px);font-weight:700;margin-bottom:8px}
.panel > p{color:var(--slate);font-size:15px;margin-bottom:22px}
.panel ul{display:grid;gap:2px;grid-template-columns:1fr}
@media (min-width:600px){ .panel ul{grid-template-columns:repeat(2,1fr);gap:2px 26px} }
.panel li{
  display:flex;align-items:flex-start;gap:12px;
  padding:11px 0;font-size:15px;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(6px);
  animation:rise .45s var(--ease) forwards;
}
@keyframes rise{to{opacity:1;transform:none}}
.panel li svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--teal)}
.panel li:nth-child(1){animation-delay:.03s} .panel li:nth-child(2){animation-delay:.09s}
.panel li:nth-child(3){animation-delay:.15s} .panel li:nth-child(4){animation-delay:.21s}
.panel li:nth-child(5){animation-delay:.27s} .panel li:nth-child(6){animation-delay:.33s}
.panel li:nth-child(7){animation-delay:.39s} .panel li:nth-child(8){animation-delay:.45s}
.panel-note{
  margin-top:24px;padding:15px 18px;border-radius:var(--r-sm);
  background:var(--mist);font-size:14px;color:var(--pine-ink);font-weight:500;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{display:grid;gap:clamp(36px,5vw,64px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){ .about-grid{grid-template-columns:.92fr 1.08fr} }
/* --tag-h is the room the bottom tag needs: its own box (a number plus one
   or two lines of caption, with padding) and the 22px it sits off the edge. */
.about-art{
  --tag-h:104px;
  position:relative;aspect-ratio:4/5;max-height:520px;border-radius:var(--r-lg);overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 8%, #10938E 0%, transparent 55%),
    linear-gradient(155deg,var(--pine) 0%,var(--deep) 100%);
  display:grid;place-items:center;padding:30px;
  /* The tag is absolutely positioned across the bottom, so the mark has to
     be centred in the space ABOVE it, not in the whole panel. The extra
     bottom padding is that reserved strip.                               */
  padding-bottom:calc(30px + var(--tag-h,104px));
}
/* A percentage max-height resolves against the PADDING box, which ignores
   the strip reserved above, so it is expressed in absolute terms instead:
   the panel is at most 520px tall, minus the tag strip and the padding.  */
.about-art .mark-img{
  opacity:.16;position:relative;z-index:1;
  width:auto;max-width:min(66%,260px);
  max-height:calc(520px - var(--tag-h,104px) - 60px);
  object-fit:contain;
  filter:brightness(0) invert(1);   /* teal artwork -> white on the dark panel */
}
.about-art .quad{position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.035) 38px 39px),
  repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.035) 38px 39px);}
.about-art .tag{
  position:absolute;left:22px;bottom:22px;right:22px;
  background:rgba(255,255,255,.96);border-radius:var(--r);padding:16px 19px;
  box-shadow:var(--shadow-m);
}
.about-art .tag b{display:block;font-family:Montserrat,"Montserrat fb",sans-serif;font-size:26px;font-weight:800;color:var(--pine);line-height:1}
.about-art .tag span{font-size:13px;color:var(--slate);font-weight:500}
.about h2{font-size:clamp(26px,3.2vw,38px);font-weight:700;margin:18px 0 18px}
.about p{color:var(--slate);margin-bottom:16px;max-width:56ch}
.points{display:grid;gap:13px;margin-top:28px}
.points li{display:flex;gap:13px;align-items:flex-start;font-size:15.2px;font-weight:500}
.points svg{width:21px;height:21px;flex:none;margin-top:2px;color:var(--teal)}

/* ============================================================
   REVIEW
   ============================================================ */
.review{background:var(--pine);color:#fff;position:relative;overflow:hidden}
.review::before{
  content:"";position:absolute;right:-8%;top:-30%;width:min(70vw,640px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(0,229,217,.16),transparent 62%);filter:blur(50px);
}
.review-grid{position:relative;display:grid;gap:clamp(30px,4vw,54px);grid-template-columns:1fr}
@media (min-width:900px){ .review-grid{grid-template-columns:1.35fr .65fr;align-items:center} }
.quote-mark{font-family:Montserrat,"Montserrat fb",serif;font-size:72px;line-height:.75;color:var(--spark);opacity:.5}
.review blockquote{margin:26px 0 0}
.review blockquote p{
  font-family:Montserrat,"Montserrat fb",sans-serif;font-weight:600;
  font-size:clamp(21px,2.9vw,34px);line-height:1.32;letter-spacing:-.015em;
  margin:14px 0 26px;text-wrap:balance;
}
.review cite{display:block;font-style:normal}
.review cite b{display:block;font-size:15.5px;font-weight:700}
.review cite span{font-size:13.5px;color:rgba(255,255,255,.72)}
.stars{color:var(--spark);letter-spacing:3px;font-size:15px}
.ask-card{
  background:rgba(255,255,255,.07);border:1px solid var(--line-dk);
  border-radius:var(--r-lg);padding:clamp(24px,2.6vw,30px);
}
.ask-card h3{font-size:19px;font-weight:700;margin-bottom:10px}
.ask-card p{font-size:14.5px;color:rgba(255,255,255,.7);margin-bottom:20px}
/* secondary link under the review button, points at the QR page */
.ask-alt{display:inline-block;margin-top:14px;font-size:14px;
  color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px}
.ask-alt:hover{color:#fff}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr}
@media (min-width:900px){ .faq-grid{grid-template-columns:.8fr 1.2fr;align-items:start} }
.faq details{
  border-bottom:1px solid var(--line);
  padding:4px 0;
}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 0;cursor:pointer;list-style:none;
  font-family:Montserrat,"Montserrat fb",sans-serif;font-size:16.5px;font-weight:600;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--pine)}
.faq summary .ico{
  position:relative;width:26px;height:26px;flex:none;border-radius:50%;
  border:1.5px solid var(--line);transition:background .25s,border-color .25s,transform .3s var(--ease);
}
.faq summary .ico::before,.faq summary .ico::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--pine);border-radius:2px;
  transform:translate(-50%,-50%);transition:opacity .2s,background .25s;
}
.faq summary .ico::before{width:11px;height:1.8px}
.faq summary .ico::after{width:1.8px;height:11px}
.faq details[open] summary{color:var(--pine)}
.faq details[open] summary .ico{background:var(--pine);border-color:var(--pine);transform:rotate(180deg)}
.faq details[open] summary .ico::before{background:#fff}
.faq details[open] summary .ico::after{opacity:0}
.faq .ans{padding:0 0 22px;color:var(--slate);font-size:15.2px;max-width:62ch}
.faq details[open] .ans{animation:rise .35s var(--ease) both}

/* ============================================================
   APP TEASER
   ============================================================ */
.app{
  background:
    radial-gradient(90% 70% at 88% 6%, rgba(0,229,217,.16), transparent 58%),
    linear-gradient(165deg, #1C2D37 0%, var(--deep) 62%);
  color:#fff;position:relative;overflow:hidden;
}
.app::after{ /* faint grid, echoes the about panel */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,255,255,.022) 46px 47px),
    repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.022) 46px 47px);
}
.app-grid{
  position:relative;z-index:1;display:grid;gap:clamp(44px,5vw,72px);
  grid-template-columns:1fr;align-items:center;
}
@media (min-width:920px){ .app-grid{grid-template-columns:1.06fr .94fr} }
.app h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;margin:18px 0 16px}
.app h2 .glow{
  background:linear-gradient(95deg,var(--spark),#CCFAF7);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.app .lead{font-size:clamp(16px,1.4vw,18px);color:rgba(255,255,255,.72);max-width:50ch}

.app-feats{display:grid;gap:18px;margin:34px 0 34px}
@media (min-width:560px){ .app-feats{grid-template-columns:1fr 1fr;gap:20px 26px} }
.feat{display:flex;gap:14px;align-items:flex-start}
.feat-ico{
  width:38px;height:38px;flex:none;border-radius:11px;
  background:rgba(0,229,217,.13);border:1px solid rgba(0,229,217,.26);
  color:var(--spark);display:grid;place-items:center;
}
.feat-ico svg{width:18px;height:18px}
.feat b{display:block;font-family:Montserrat,"Montserrat fb",sans-serif;font-size:15.5px;font-weight:700;margin-bottom:3px}
.feat span{font-size:14px;color:rgba(255,255,255,.62);line-height:1.5}

/* waitlist */
.wait{
  background:rgba(255,255,255,.06);border:1px solid var(--line-dk);
  border-radius:var(--r-lg);padding:clamp(20px,2.4vw,26px);max-width:520px;
}
.wait b{display:block;font-family:Montserrat,"Montserrat fb",sans-serif;font-size:16px;font-weight:700;margin-bottom:14px}
.wait-row{display:flex;gap:10px;flex-wrap:wrap}
.wait-row input{
  flex:1 1 200px;min-width:0;min-height:48px;padding:12px 15px;
  border-radius:var(--r-sm);border:1.5px solid var(--line-dk);
  background:rgba(0,0,0,.22);color:#fff;font-size:15px;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.wait-row input::placeholder{color:rgba(255,255,255,.42)}
.wait-row input:focus{
  outline:none;border-color:var(--spark);background:rgba(0,0,0,.34);
  box-shadow:0 0 0 4px rgba(0,229,217,.14);
}
.wait-row .btn{flex:0 0 auto}
.wait small{display:block;margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.45)}
.wait .form-msg{background:rgba(0,229,217,.14);color:#CCFAF7;margin-bottom:14px}
.wait .form-msg.bad{background:rgba(255,120,110,.16);color:#FFC9C4}
.wait[data-sent="1"] .wait-row,.wait[data-sent="1"] small,.wait[data-sent="1"] > b{display:none}

/* phone mockup, pure CSS */
.phone-wrap{display:grid;place-items:center;position:relative}
.phone-wrap::before{ /* halo */
  content:"";position:absolute;width:min(90%,420px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,217,.22),transparent 62%);filter:blur(46px);
}
.phone{
  position:relative;width:min(100%,278px);aspect-ratio:9/18.6;
  border-radius:38px;padding:9px;
  background:linear-gradient(160deg,#49575F,#111B21);
  box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.09);
  animation:bob 7s ease-in-out infinite;
}
.phone-screen{
  height:100%;border-radius:30px;background:var(--paper);color:var(--ink);
  padding:14px 14px 0;display:flex;flex-direction:column;gap:11px;overflow:hidden;position:relative;
}
.ph-bar{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:700;color:var(--slate)}
.ph-bar i{display:block;width:44px;height:15px;border-radius:99px;background:#111B21;margin-inline:auto}
.ph-head b{display:block;font-family:Montserrat,"Montserrat fb",sans-serif;font-size:16px;font-weight:800;letter-spacing:-.02em}
.ph-head span{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.ph-card{background:var(--pine);color:#fff;border-radius:14px;padding:12px 13px}
.ph-card .r1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ph-card .t{font-family:Montserrat,"Montserrat fb",sans-serif;font-size:15px;font-weight:700}
.ph-card .p{
  font-size:9px;font-weight:800;letter-spacing:.04em;padding:4px 8px;border-radius:99px;
  background:var(--spark);color:var(--deep);white-space:nowrap;
}
.ph-card .a{font-size:11px;color:rgba(255,255,255,.66);margin-top:5px}
.ph-list{display:flex;flex-direction:column;gap:7px}
.ph-task{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;font-size:11.5px;font-weight:600;
}
.ph-task i{
  width:15px;height:15px;flex:none;border-radius:50%;border:1.5px solid var(--line);
  position:relative;background:#fff;
}
.ph-task.done i{background:var(--pine);border-color:var(--pine)}
.ph-task.done i::after{
  content:"";position:absolute;left:4.6px;top:2.2px;width:3.6px;height:7px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(42deg);
}
.ph-task.live i{border-color:var(--teal);border-right-color:transparent;animation:spin 1s linear infinite}
.ph-task.live{border-color:rgba(16,147,142,.4)}
@keyframes spin{to{transform:rotate(360deg)}}
.ph-foot{margin-top:auto;padding:11px 0 14px}
.ph-prog{height:5px;border-radius:99px;background:var(--mist);overflow:hidden;margin-bottom:7px}
.ph-prog i{
  display:block;height:100%;width:62%;border-radius:99px;
  background:linear-gradient(90deg,var(--teal),var(--pine));
}
.ph-foot span{font-size:10.5px;font-weight:600;color:var(--slate)}
.ph-nav{
  display:flex;justify-content:center;gap:24px;padding:9px 0 12px;
  border-top:1px solid var(--line);
}
.ph-nav i{width:16px;height:16px;border-radius:5px;background:var(--line);display:block}
.ph-nav i.on{background:var(--pine)}

/* floating "bientôt" chip on the phone */
.soon-chip{
  position:absolute;z-index:3;left:-16px;top:-15px;
  background:#fff;color:var(--pine);border-radius:var(--r-pill);
  padding:9px 15px;box-shadow:var(--shadow-l);
  font-size:12.5px;font-weight:800;white-space:nowrap;
  display:flex;align-items:center;gap:8px;
  animation:bob 5.5s ease-in-out infinite .6s;
}
.soon-chip::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(16,147,142,.55);animation:ping 2.2s ease-out infinite;
}
@keyframes ping{70%,100%{box-shadow:0 0 0 11px rgba(16,147,142,0)}}
@media (max-width:420px){ .soon-chip{left:50%;top:-15px;transform:translateX(-50%)} }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;gap:clamp(32px,4vw,56px);grid-template-columns:1fr}
@media (min-width:900px){ .contact-grid{grid-template-columns:.92fr 1.08fr;align-items:start} }
.ch{
  display:flex;align-items:center;gap:15px;
  padding:15px;margin-bottom:11px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card);
  transition:border-color .2s,transform .18s var(--ease),box-shadow .2s;
}
.ch:hover{border-color:rgba(0,122,120,.3);transform:translateX(4px);box-shadow:var(--shadow-s)}
.ch-ico{width:42px;height:42px;flex:none;border-radius:11px;background:var(--mist);color:var(--pine);display:grid;place-items:center}
.ch-ico svg{width:19px;height:19px}
/* WhatsApp keeps its own green rather than the brand teal: it is the one
   row people scan for by colour, and the glyph is only recognisable in it.
   #1FA855 on this tint is 3.6:1, above the 3:1 that a graphic needs. The
   label beside it stays in the normal text colours, so nothing depends on
   this green to be readable. */
.ch-ico.ch-wa{background:rgba(37,211,102,.14);color:#1FA855}
.ch:hover .ch-ico.ch-wa{background:rgba(37,211,102,.2)}
.ch small{display:block;font-size:12.5px;color:var(--slate);font-weight:500}
.ch b{font-size:15.3px;font-weight:600;overflow-wrap:anywhere}

.form{
  padding:clamp(24px,3vw,34px);border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-m);
  display:grid;gap:16px;
}
.f2{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:560px){ .f2{grid-template-columns:1fr 1fr} }
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.field .req{color:var(--teal)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;min-height:48px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);font-size:15.5px;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--pine);background:#fff;
  box-shadow:0 0 0 4px rgba(0,122,120,.1);
}
.field input::placeholder,.field textarea::placeholder{color:#6B757B}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-note{font-size:12.8px;color:var(--slate);text-align:center}
.form-msg{
  padding:14px 17px;border-radius:var(--r-sm);font-size:14.5px;font-weight:500;
  background:var(--mist);color:var(--pine-ink);
}
.form-msg.bad{background:#FDECEC;color:#A3261F}
.form[data-sent="1"] > :not(.form-msg):not(.form-cv){display:none}

/* The jobs form only: the second step, sending the CV, is a link the
   candidate taps rather than an automatic jump. A phone refuses to open a
   mailto: that does not come from a real gesture, so this button IS the
   mechanism, not a fallback. Kept in flow after the success message. */
.form-cv{width:100%;margin-top:14px}
.btn[aria-busy="true"]{opacity:.65;pointer-events:none}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--deep);color:#fff;padding-block:clamp(48px,6vw,70px) 0;position:relative;overflow:hidden}
.ftr-ghost{
  position:absolute;right:-4%;bottom:-24%;width:min(46vw,380px);height:auto;
  opacity:.05;pointer-events:none;
  filter:brightness(0) invert(1);   /* teal artwork -> white on the dark footer */
}
.ftr-grid{
  position:relative;display:grid;gap:36px 28px;
  grid-template-columns:1fr;padding-bottom:40px;
}
@media (min-width:700px){ .ftr-grid{grid-template-columns:1.6fr 1fr 1fr} }
.ftr p{font-size:14.3px;color:rgba(255,255,255,.62);max-width:40ch;margin-top:18px}
.ftr h3{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66);margin-bottom:16px}
.ftr li{margin-bottom:11px}
.ftr li a{font-size:14.6px;color:rgba(255,255,255,.82);transition:color .2s}
.ftr li a:hover{color:var(--spark)}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:11px;
  background:rgba(255,255,255,.08);color:#fff;
  transition:background .2s,transform .18s var(--ease),color .2s;
}
.socials a:hover{background:var(--spark);color:var(--deep);transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.ftr-bot{
  position:relative;border-top:1px solid var(--line-dk);
  padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  font-size:13px;color:rgba(255,255,255,.66);
}
@media (max-width:760px){ .ftr-bot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))} }

/* ============================================================
   MOBILE STICKY CTA
   ============================================================ */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:none;gap:10px;
  padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom,0px));
  background:rgba(244,250,250,.93);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .32s var(--ease);
}
.mbar.show{transform:none}
.mbar .btn{flex:1;min-height:46px;padding-inline:14px}
@media (max-width:760px){ .mbar{display:flex} }

/* ---------- print ---------- */
@media print{
  .hdr,.mbar,.drawer,.hero-vis,.form,.socials{display:none !important}
  body{background:#fff}
  section{padding-block:18px}
}

/* ============================================================
   FAQ PAGE
   The dedicated /faq page stacks one .faq block per theme. The
   per-page FAQ sections keep using .faq-grid, which is unchanged.
   ============================================================ */
.faq-group{margin-bottom:clamp(38px,5vw,58px)}
.faq-group:last-child{margin-bottom:0}
.faq-group>h2{
  font-size:clamp(21px,2.2vw,27px);font-weight:700;
  margin:0 0 20px;padding-bottom:14px;
  border-bottom:1px solid var(--line);
}

/* ============================================================
   NUMBERED STEPS (jobs page)
   The two-step application needs to read as a sequence, not as a
   bullet list: the candidate has to know a second action follows
   the submit, or they close the tab thinking they are done.
   ============================================================ */
.steps{counter-reset:step;display:grid;gap:16px;margin:0 0 26px;padding:0;list-style:none}
.steps li{
  counter-increment:step;position:relative;
  padding-left:44px;
}
.steps li::before{
  content:counter(step);
  position:absolute;left:0;top:0;
  width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;background:var(--pine);color:#fff;
  font-family:Montserrat,"Montserrat fb",sans-serif;
  font-size:14px;font-weight:700;
}
.steps b{display:block;font-size:15.5px;margin-bottom:3px}
.steps span{display:block;font-size:14.6px;color:var(--slate);line-height:1.55}