/* ==========================================================================
   XP Manpower Solutions — xpmnp.com
   Design system: "Corridor Dossier"
   Display: Archivo  |  Body: Source Serif 4  |  Data/labels: IBM Plex Mono
   ========================================================================== */

:root{
  /* --- light palette (default) --- */
  --paper:#F5F2EC;
  --surface:#FFFFFF;
  --surface-2:#EFEAE1;
  --ink:#1A1C1F;
  --ink-2:#4E5359;
  --ink-3:#7C828A;
  --line:#DED7CB;
  --line-strong:#C6BCAB;
  --accent:#C96A07;
  --accent-hi:#E07C11;
  --accent-soft:#F9E9D4;
  --deep:#0E3B39;
  --deep-2:#14504D;
  --on-deep:#EFF3F1;
  --on-deep-2:#A9C2BE;
  --ok:#1C6E46;
  --shadow:0 1px 2px rgba(26,28,31,.06), 0 8px 24px -12px rgba(26,28,31,.18);
  --shadow-lg:0 2px 4px rgba(26,28,31,.06), 0 24px 48px -20px rgba(26,28,31,.28);

  --font-display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1180px;
  --gutter:clamp(16px,4.5vw,44px);
  --radius:3px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111418;
    --surface:#191D22;
    --surface-2:#21262C;
    --ink:#ECE8E0;
    --ink-2:#B2B8BE;
    --ink-3:#868D95;
    --line:#2B3138;
    --line-strong:#3C444D;
    --accent:#F0912C;
    --accent-hi:#F8A644;
    --accent-soft:#3B2A14;
    --deep:#0B2C2B;
    --deep-2:#103D3B;
    --on-deep:#E6EDEA;
    --on-deep-2:#8FAEA9;
    --ok:#4BAE7C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#111418;
  --surface:#191D22;
  --surface-2:#21262C;
  --ink:#ECE8E0;
  --ink-2:#B2B8BE;
  --ink-3:#868D95;
  --line:#2B3138;
  --line-strong:#3C444D;
  --accent:#F0912C;
  --accent-hi:#F8A644;
  --accent-soft:#3B2A14;
  --deep:#0B2C2B;
  --deep-2:#103D3B;
  --on-deep:#E6EDEA;
  --on-deep-2:#8FAEA9;
  --ok:#4BAE7C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important;transition-duration:.01ms!important} }

body{
  margin:0;
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{ outline:2px solid var(--accent-hi); outline-offset:2px; border-radius:2px }
[hidden]{display:none!important}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding-block:clamp(48px,7vw,92px) }
.section--tight{ padding-block:clamp(36px,5vw,64px) }
.section--surface{ background:var(--surface); border-block:1px solid var(--line) }
.section--deep{ background:var(--deep); color:var(--on-deep) }
.section--deep .lede,.section--deep p{ color:var(--on-deep-2) }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); text-wrap:balance; margin:0; font-weight:700; letter-spacing:-.018em; line-height:1.1 }
h1{ font-size:clamp(2.1rem,5.2vw,3.5rem); font-weight:800 }
h2{ font-size:clamp(1.6rem,3.4vw,2.35rem) }
h3{ font-size:clamp(1.12rem,1.9vw,1.35rem); line-height:1.25 }
h4{ font-size:1rem; letter-spacing:-.005em }
p{ margin:0 0 1em }
.section--deep h1,.section--deep h2,.section--deep h3{ color:var(--on-deep) }

.eyebrow{
  font-family:var(--font-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin:0 0 .85rem; display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--accent); flex:none }
.section--deep .eyebrow{ color:var(--accent-hi) }
.section--deep .eyebrow::before{ background:var(--accent-hi) }

.lede{ font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--ink-2); max-width:62ch }
.measure{ max-width:66ch }
.section-head{ max-width:70ch; margin-bottom:clamp(28px,4vw,44px) }

.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums }

/* ---------- buttons ---------- */
.btn{
  text-wrap:balance;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.94rem;
  letter-spacing:.005em; padding:.78rem 1.35rem; border-radius:var(--radius);
  border:1.5px solid transparent; text-decoration:none; cursor:pointer;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn--primary{ background:var(--accent); color:#fff; border-color:var(--accent) }
.btn--primary:hover{ background:var(--accent-hi); border-color:var(--accent-hi) }
.btn--dark{ background:var(--deep); color:var(--on-deep); border-color:var(--deep) }
.btn--dark:hover{ background:var(--deep-2); border-color:var(--deep-2) }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong) }
.btn--ghost:hover{ border-color:var(--ink); background:var(--surface) }
.section--deep .btn--ghost{ color:var(--on-deep); border-color:rgba(255,255,255,.28) }
.section--deep .btn--ghost:hover{ border-color:var(--on-deep); background:rgba(255,255,255,.07) }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem }

/* ---------- top bar ---------- */
.topbar{ background:var(--deep); color:var(--on-deep-2); font-family:var(--font-mono); font-size:.73rem; letter-spacing:.04em }
.topbar .wrap{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:center; justify-content:space-between; min-height:36px; padding-block:.4rem }
.topbar a{ color:var(--on-deep); text-decoration:none }
.topbar a:hover{ color:var(--accent-hi) }
.topbar__set{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:60;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:.9rem; min-height:70px }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink) }
.brand__mark{
  display:block; width:42px; height:42px; flex:none; object-fit:contain;
}
.brand__name{ font-family:var(--font-display); font-weight:800; font-size:1rem; line-height:1.15; letter-spacing:-.02em; display:block; white-space:nowrap }
.brand__tag{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); display:block; margin-top:2px; white-space:nowrap }

.nav{ display:flex; align-items:center; gap:.15rem }
.nav a{
  font-family:var(--font-display); font-weight:600; font-size:.88rem; text-decoration:none;
  color:var(--ink-2); padding:.5rem .55rem; border-radius:2px; white-space:nowrap;
}
.nav a:hover{ color:var(--ink); background:var(--surface-2) }
.nav a[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent) }
.header-cta{ display:flex; align-items:center; gap:.5rem }
.header-cta .btn{ padding:.6rem .95rem; font-size:.84rem; white-space:nowrap }

.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-strong); border-radius:2px; color:var(--ink); cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px }

@media (max-width:1040px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,86vw);
    background:var(--surface); border-left:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:calc(76px + env(safe-area-inset-top,0px)) 20px 28px;
    transform:translateX(100%); visibility:hidden;
    transition:transform .22s ease, visibility 0s linear .22s;
    overflow-y:auto; z-index:70;
  }
  .nav[data-open="true"]{ transform:translateX(0); visibility:visible; transition:transform .22s ease, visibility 0s }
  .nav a{ padding:.85rem .4rem; font-size:1rem; border-bottom:1px solid var(--line) }
  .nav a[aria-current="page"]{ box-shadow:inset 3px 0 0 var(--accent) }
  .nav-toggle{ display:inline-flex }
  .header-cta .btn{ display:none }
  .nav__cta{ display:flex; flex-direction:column; gap:.6rem; margin-top:1.2rem }
  .nav__cta .btn{ width:100% }
  .scrim{ position:fixed; inset:0; background:rgba(10,12,14,.5); z-index:65; border:0 }
}
@media (min-width:1041px){ .nav__cta{ display:none } .scrim{ display:none } }

/* ---------- hero ---------- */
.hero{ background:var(--deep); color:var(--on-deep); position:relative; overflow:hidden }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px);
  opacity:.9;
}
.hero .wrap{ position:relative; z-index:1; padding-block:clamp(44px,6.5vw,80px) }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr); gap:clamp(28px,4vw,56px); align-items:center }
@media (max-width:900px){ .hero__grid{ grid-template-columns:1fr } }
.hero h1{ color:var(--on-deep) }
.hero__sub{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--on-deep-2); max-width:56ch; margin-top:1.1rem }
.hero__flags{
  display:flex; align-items:center; gap:.7rem; font-family:var(--font-mono);
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-hi); margin-bottom:1rem;
}
.hero__flags span:nth-child(2){ color:var(--on-deep-2) }
.hero__points{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.55rem }
.hero__points li{ position:relative; padding-left:1.35rem; color:var(--on-deep); font-size:.98rem }
.hero__points li::before{ content:"▸"; position:absolute; left:0; top:0; color:var(--accent-hi); line-height:1.65 }

.demand-card{
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-top:4px solid var(--accent); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:clamp(20px,2.4vw,28px);
}
.demand-card h2{ font-size:1.2rem; margin-bottom:.25rem }
.demand-card .mono-label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3) }
.demand-card p{ font-size:.93rem; color:var(--ink-2); margin:.6rem 0 1.1rem }
.demand-card .btn{ width:100% }
.demand-card .btn + .btn{ margin-top:.55rem }
.demand-card__foot{ margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:.72rem; color:var(--ink-3); line-height:1.6 }

/* ---------- stat strip ---------- */
.stats{ background:var(--surface); border-bottom:1px solid var(--line) }
.stats .wrap{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 }
@media (max-width:760px){ .stats .wrap{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.stat{ padding:clamp(20px,2.6vw,30px) clamp(12px,2vw,24px); border-left:1px solid var(--line) }
.stat:first-child{ border-left:0; padding-left:0 }
@media (max-width:760px){
  .stat:nth-child(odd){ border-left:0; padding-left:0 }
  .stat:nth-child(n+3){ border-top:1px solid var(--line) }
}
.stat__num{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums }
.stat__num span{ color:var(--accent) }
.stat__label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin-top:.6rem; line-height:1.5 }

/* ---------- generic grids ---------- */
.grid{ display:grid; gap:clamp(14px,1.8vw,22px) }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:940px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr } }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(18px,2.2vw,26px); display:flex; flex-direction:column; gap:.5rem;
}
.card h3{ margin:0 }
.card p{ margin:0; color:var(--ink-2); font-size:.95rem }
.card__code{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:.15rem }
.card ul{ margin:.35rem 0 0; padding-left:1.1rem; color:var(--ink-2); font-size:.92rem }
.card li{ margin-bottom:.22rem }
.card--link{ text-decoration:none; transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease }
.card--link:hover{ border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow) }

/* ---------- manifest table (trades) ---------- */
.manifest{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface) }
.manifest__head{
  background:var(--surface-2); border-bottom:1px solid var(--line);
  padding:.85rem clamp(14px,2vw,20px); display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.manifest__head h3{ font-size:1.05rem }
.manifest__head .mono{ font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3) }
.manifest__body{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:860px){ .manifest__body{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px){ .manifest__body{ grid-template-columns:1fr } }
.manifest__row{
  display:flex; align-items:baseline; gap:.7rem; padding:.62rem clamp(14px,2vw,20px);
  border-bottom:1px solid var(--line); border-right:1px solid var(--line); font-size:.93rem;
}
.manifest__row .code{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-3); flex:none; min-width:3.6em; font-variant-numeric:tabular-nums }

/* ---------- process ---------- */
.steps{ list-style:none; counter-reset:step; margin:0; padding:0; display:grid; gap:0 }
.step{
  counter-increment:step; display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2vw,24px); padding:1.15rem 0; border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line) }
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono); font-size:.82rem; font-weight:500; color:var(--accent);
  padding-top:.2rem; letter-spacing:.05em;
}
.step h3{ font-size:1.05rem; margin-bottom:.25rem }
.step p{ margin:0; color:var(--ink-2); font-size:.95rem }
.section--deep .step{ border-color:rgba(255,255,255,.14) }
.section--deep .step p{ color:var(--on-deep-2) }

/* ---------- client roster ---------- */
.roster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface) }
.roster__item{
  padding:.95rem 1.1rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--ink);
  display:flex; align-items:center; gap:.6rem; line-height:1.3;
}
.roster__item .dot{ width:6px; height:6px; flex:none; background:var(--accent); border-radius:50% }
.note{
  font-family:var(--font-mono); font-size:.72rem; line-height:1.7; color:var(--ink-3);
  border-left:2px solid var(--line-strong); padding-left:.9rem; margin-top:1.2rem;
}

/* ---------- placeholder marker ---------- */
.ph{
  font-family:var(--font-mono); font-size:.82em; background:var(--accent-soft);
  color:var(--accent); padding:.1em .42em; border-radius:2px; border:1px dashed var(--accent);
  white-space:nowrap;
}

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  cursor:pointer; list-style:none; padding:1.05rem 2.2rem 1.05rem 0; position:relative;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:1.15rem; color:var(--accent); line-height:1;
}
.faq details[open] summary::after{ content:"–" }
.faq details > div{ padding:0 0 1.15rem; color:var(--ink-2); font-size:.97rem; max-width:72ch }
.faq details > div p:last-child{ margin-bottom:0 }

/* ---------- forms ---------- */
.form-shell{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr); gap:clamp(24px,4vw,52px); align-items:start }
@media (max-width:900px){ .form-shell{ grid-template-columns:1fr } }
form.xp-form{
  background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--accent);
  border-radius:var(--radius); padding:clamp(20px,2.6vw,32px); display:grid; gap:1.05rem;
}
.field{ display:grid; gap:.38rem }
.field--pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem }
@media (max-width:560px){ .field--pair{ grid-template-columns:1fr } }
.field label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2) }
.field label .req{ color:var(--accent) }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:.98rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-strong); border-radius:2px; padding:.7rem .8rem; width:100%;
}
.field textarea{ min-height:120px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); background:var(--surface) }
.field .hint{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-3); line-height:1.6 }
.form-note{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-3); line-height:1.7 }
.form-status{ font-family:var(--font-mono); font-size:.78rem; padding:.7rem .85rem; border-radius:2px; background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent) }

.aside-box{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(18px,2.2vw,26px) }
.aside-box h3{ font-size:1.05rem; margin-bottom:.6rem }
.aside-box ul{ margin:0; padding-left:1.1rem; color:var(--ink-2); font-size:.94rem }
.aside-box li{ margin-bottom:.4rem }
.aside-box + .aside-box{ margin-top:1.1rem }

/* ---------- contact rows ---------- */
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.contact-list li{ display:grid; grid-template-columns:minmax(120px,auto) minmax(0,1fr); gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line) }
.contact-list li:first-child{ border-top:1px solid var(--line) }
.contact-list dt,.contact-list .k{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); padding-top:.25rem }
.contact-list .v{ font-size:.98rem; color:var(--ink) }
.contact-list .v a{ color:var(--accent); text-decoration:none; font-weight:600 }
.contact-list .v a:hover{ text-decoration:underline }

/* ---------- prose blocks ---------- */
.prose h3{ margin-top:1.8rem; margin-bottom:.5rem }
.prose ul{ padding-left:1.15rem; color:var(--ink-2) }
.prose li{ margin-bottom:.4rem }

/* ---------- page masthead ---------- */
.masthead{ background:var(--surface); border-bottom:1px solid var(--line); padding-block:clamp(30px,4.5vw,56px) }
.masthead .lede{ margin-top:.8rem }
.crumbs{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.9rem }
.crumbs a{ color:var(--ink-3); text-decoration:none }
.crumbs a:hover{ color:var(--accent) }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--accent); color:#fff }
.cta-band .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem; padding-block:clamp(30px,4vw,48px) }
.cta-band h2{ color:#fff; max-width:22ch }
.cta-band p{ color:rgba(255,255,255,.88); margin:.5rem 0 0; max-width:48ch }
.cta-band .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.6) }
.cta-band .btn--ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff }
.cta-band .btn--light{ background:#fff; color:var(--accent); border-color:#fff }
.cta-band .btn--light:hover{ background:#FFF6EA }

/* ---------- footer ---------- */
.site-footer{ background:var(--deep); color:var(--on-deep-2); font-size:.92rem }
.site-footer .wrap{ padding-block:clamp(38px,5vw,62px) }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,40px) }
@media (max-width:860px){ .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr } }
.site-footer h4{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-hi); font-weight:500; margin-bottom:.9rem }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem }
.site-footer a{ color:var(--on-deep); text-decoration:none }
.site-footer a:hover{ color:var(--accent-hi) }
.site-footer .brand__name{ color:var(--on-deep) }
.site-footer .brand__tag{ color:var(--on-deep-2) }
.site-footer p{ color:var(--on-deep-2) }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); margin-top:clamp(26px,3.5vw,40px); padding-top:1.2rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.05em; color:var(--on-deep-2);
}

/* ---------- floating whatsapp ---------- */
.wa-float{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:55;
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  background:var(--deep); color:#fff; border:1px solid rgba(255,255,255,.18);
  padding:.7rem 1rem; border-radius:999px; box-shadow:var(--shadow-lg);
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
}
.wa-float:hover{ background:var(--deep-2) }
.wa-float svg{ width:18px; height:18px; flex:none; fill:#4ED07A }
@media (max-width:520px){ .wa-float span{ display:none } .wa-float{ padding:.85rem; border-radius:50% } }

.skip{ position:absolute; left:-9999px }
.skip:focus{ left:12px; top:12px; z-index:200; background:var(--surface); color:var(--ink); padding:.6rem 1rem; border:1px solid var(--accent) }

/* ---------- client logo wall ---------- */
.logo-wall{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);
}
.logo-tile{
  margin:0; padding:1.15rem 1rem 1rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:grid; grid-template-rows:56px auto; gap:.7rem; align-content:start; justify-items:center; text-align:center;
  transition:background-color .16s ease;
}
.logo-tile:hover{ background:var(--surface-2) }
.logo-tile img{
  max-height:56px; max-width:132px; width:auto; height:auto; object-fit:contain;
  align-self:center; filter:saturate(.05) contrast(1.05); opacity:.82; transition:filter .18s ease, opacity .18s ease;
}
.logo-tile:hover img{ filter:none; opacity:1 }
.logo-tile__mono{
  display:none; align-self:center; width:56px; height:56px; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-.02em;
  color:var(--deep); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:2px;
  box-shadow:inset 0 -3px 0 var(--accent);
}
.logo-tile--text .logo-tile__mono{ display:grid }
.logo-tile figcaption{
  font-family:var(--font-display); font-weight:600; font-size:.82rem; line-height:1.35; color:var(--ink-2);
  text-wrap:balance;
}
.logo-tile:hover figcaption{ color:var(--ink) }
:root[data-theme="dark"] .logo-tile img,
:root:not([data-theme="light"]) .logo-tile img{ }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-tile__mono{ color:var(--on-deep); background:var(--surface-2) }
}
:root[data-theme="dark"] .logo-tile__mono{ color:var(--on-deep); background:var(--surface-2) }