/* =========================================================
   PIONEER PIX — Paper & Ink design system (Direction A)
   ========================================================= */
:root{
  --paper:#f7f4ef;
  --paper-2:#efeae1;
  --card:#ffffff;
  --ink:#15171c;
  --ink-2:#3a3c42;
  --muted:#6b6e76;
  --line:#e4ddcf;
  --line-soft:#ece6da;
  --blue:#2f6bd8;
  --blue-ink:#21509f;
  --blue-bright:#487de7;
  --navy:#0e1730;
  --navy-2:#16213f;
  /* spectrum */
  --s-red:#e81416; --s-orange:#ffa500; --s-yellow:#faeb36;
  --s-green:#79c314; --s-blue:#487de7; --s-indigo:#4b369d; --s-violet:#70369d;
  --sans:'Archivo',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --spectral:'Spectral',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px);}
.spectrum-rule{height:3px;background:linear-gradient(90deg,
  var(--s-red) 0 14.28%, var(--s-orange) 14.28% 28.56%, var(--s-yellow) 28.56% 42.84%,
  var(--s-green) 42.84% 57.12%, var(--s-blue) 57.12% 71.4%, var(--s-indigo) 71.4% 85.68%,
  var(--s-violet) 85.68% 100%);}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);}
.eyebrow.ink{color:var(--muted);}

/* ---------- buttons ---------- */
.btn{font-family:var(--sans);font-weight:600;font-size:14.5px;padding:14px 26px;border-radius:var(--btn-radius,44px);
  border:1.5px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  letter-spacing:.01em;white-space:nowrap;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;line-height:1;}
.btn .arr{transition:transform .18s ease;}
.btn:hover .arr{transform:translateX(3px);}
.btn.primary{background:var(--blue);color:#fff;}
.btn.primary:hover{background:var(--blue-ink);}
.btn.dark{background:var(--ink);color:#fff;}
.btn.dark:hover{background:#000;}
.btn.ghost{background:transparent;border-color:rgba(21,23,28,.22);color:var(--ink);}
.btn.ghost:hover{border-color:var(--ink);}
.btn.ghost-l{background:transparent;border-color:rgba(255,255,255,.3);color:#fff;}
.btn.ghost-l:hover{border-color:#fff;}
.btn.sm{padding:10px 18px;font-size:13px;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,244,239,.86);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:78px;}
.site-header .logo{height:38px;width:auto;}
.nav{display:flex;align-items:center;gap:30px;}
/* desktop layout for the link group — declared here (not inline) so the
   max-width:900px rule below can actually hide it on phones/tablets */
.nav .links-wrap{display:flex;align-items:center;gap:30px;}
.nav a.link{font-size:14.5px;color:var(--ink-2);position:relative;padding:4px 0;font-weight:500;}
.nav a.link:hover{color:var(--ink);}
.nav a.link.active{color:var(--ink);}
.nav a.link.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--blue);}
.nav .menu-btn{display:none;}
.header-spectrum{height:2px;}

/* ---------- generic section ---------- */
section{position:relative;}
.pad{padding:clamp(64px,8vw,108px) 0;}
.pad-sm{padding:clamp(44px,5vw,70px) 0;}
.alt{background:var(--paper-2);}
.navy-sec{background:var(--navy);color:#f4f1ea;}
.navy-sec .eyebrow{color:#8fb0f5;}
.navy-sec h2,.navy-sec h3{color:#fff;}
.navy-sec p{color:#c2c8d8;}

.sec-eyebrow-row{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.sec-eyebrow-row .tick{width:34px;height:3px;border-radius:3px;background:var(--blue);}

h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.08;}
.h-display{font-size:clamp(40px,5.4vw,68px);}
.h-2{font-size:clamp(30px,3.6vw,46px);}
.h-3{font-size:clamp(23px,2.4vw,30px);}
.lede{font-family:var(--spectral);font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-2);}
p.body{font-family:var(--spectral);font-size:16.5px;line-height:1.65;color:var(--ink-2);}
em.accent{font-style:italic;color:var(--blue);}

/* ---------- photo / image-slot framing ---------- */
image-slot,.photo{display:block;}
.photo{position:relative;background:
   repeating-linear-gradient(135deg, rgba(21,23,28,.045) 0 1.5px, transparent 1.5px 13px), #ece7df;
   border-radius:16px;overflow:hidden;}
.photo::after{content:attr(data-cap);position:absolute;inset:0;display:grid;place-items:center;
   font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a59f93;}
.shadow-soft{box-shadow:0 30px 60px -30px rgba(21,23,28,.4);}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#cfd5e4;}
.site-footer .top-rule{height:3px;}
.site-footer .inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:64px 0 30px;}
.site-footer .brand img{height:34px;margin-bottom:18px;}
.site-footer .brand p{font-family:var(--spectral);font-size:15px;line-height:1.6;color:#aab2c6;max-width:34ch;}
.site-footer h6{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8fb0f5;margin-bottom:16px;}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
.site-footer ul a{font-size:14.5px;color:#cfd5e4;}
.site-footer ul a:hover{color:#fff;}
.site-footer .contact a{display:block;font-size:15px;margin-bottom:10px;color:#fff;}
.site-footer .contact .big{font-family:var(--serif);font-size:24px;}
.site-footer .legal{display:flex;justify-content:space-between;align-items:center;gap:20px;
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:12.5px;color:#7f88a0;flex-wrap:wrap;}
.site-footer .socials{display:flex;gap:12px;}
.site-footer .socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;color:#cfd5e4;transition:.18s;}
.site-footer .socials a:hover{background:#fff;color:var(--navy);border-color:#fff;}

/* ---- footer variant: single horizontal band ---- */
.site-footer.band .band-inner{display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:54px 0 28px;text-align:center;}
.site-footer.band .band-logo{height:34px;width:auto;}
.site-footer.band .band-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;}
.site-footer.band .band-nav a{font-size:14.5px;color:#cfd5e4;font-weight:500;letter-spacing:.01em;}
.site-footer.band .band-nav a:hover{color:#fff;}
.site-footer.band .band-contact{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-size:21px;color:#fff;}
.site-footer.band .band-contact span{color:#4b5878;font-size:15px;}
.site-footer.band .band-contact a:hover{color:#8fb0f5;}
.site-footer.band .legal{justify-content:center;text-align:center;}
.site-footer.band .band-areas{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:#7f88a0;}
.site-footer.band .band-areas a{color:#9aa3b8;padding:0 14px;border-right:1px solid rgba(255,255,255,.14);}
.site-footer.band .band-areas a:last-child{border-right:0;}
.site-footer.band .band-areas a:hover{color:#fff;}
.site-footer.band .band-areas .lbl{padding-right:14px;color:#5f6884;border-right:1px solid rgba(255,255,255,.14);}
@media(max-width:560px){
  .site-footer.band .band-contact{flex-direction:column;gap:6px;}
  .site-footer.band .band-contact span{display:none;}
}

/* ---------- chips / tags ---------- */
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:7px 14px;border-radius:var(--chip-radius,40px);
  border:1px solid var(--line);color:var(--ink-2);background:#fff;white-space:nowrap;}
.chip.dot{display:inline-flex;align-items:center;gap:8px;}
.chip .d{width:8px;height:8px;border-radius:50%;}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:.2s ease;}
a.card:hover,.card.hov:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(21,23,28,.45);}

/* ---------- check list ---------- */
.checks{list-style:none;display:flex;flex-direction:column;gap:16px;}
.checks li{display:flex;gap:14px;align-items:flex-start;}
.checks .ck{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--blue);
  display:grid;place-items:center;margin-top:1px;}
.checks .ck svg{width:13px;height:13px;}
.checks .tx b{display:block;font-family:var(--spectral);font-size:16.5px;font-weight:600;margin-bottom:2px;}
.checks .tx span{font-size:14.5px;color:var(--muted);line-height:1.5;}

/* ---------- reveal animation ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
  .reveal.in{opacity:1;transform:none;}
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .site-footer .inner{grid-template-columns:1fr 1fr;}
  .nav .links-wrap{position:fixed;inset:78px 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:4px;padding:14px clamp(20px,4vw,48px) 22px;display:none;}
  .nav .links-wrap.open{display:flex;}
  .nav .links-wrap a.link{padding:10px 0;font-size:17px;width:100%;}
  .nav{gap:14px;}
  .nav .menu-btn{display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);
    border-radius:10px;background:#fff;cursor:pointer;}
}
@media(max-width:620px){
  .site-footer .inner{grid-template-columns:1fr;gap:30px;}
}

/* ---- before / after reveal slider (shared) ---- */
.ba{position:relative;overflow:hidden;border-radius:18px;--pos:50%;user-select:none;touch-action:none;background:#ece7df;}
.ba .ba-layer{position:absolute;inset:0;}
.ba .ba-layer image-slot{width:100%;height:100%;display:block;}
.ba .ba-after{clip-path:inset(0 0 0 var(--pos));}
.ba .ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 0 1px rgba(21,23,28,.12);z-index:3;outline:none;cursor:ew-resize;}
.ba .ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 6px 20px -5px rgba(21,23,28,.5);display:grid;place-items:center;cursor:ew-resize;color:var(--ink);}
.ba .ba-handle:focus-visible .ba-grip{box-shadow:0 0 0 3px var(--blue);}
.ba .ba-grip svg{width:19px;height:19px;}
.ba .ba-tag{position:absolute;bottom:12px;font-family:var(--mono,'JetBrains Mono',monospace);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(21,23,28,.6);padding:5px 10px;border-radius:30px;z-index:2;pointer-events:none;}
.ba .ba-l{left:12px;}
.ba .ba-r{right:12px;}
/* inside a service card the card supplies the radius + divider */
.svc .ba{border-radius:0;}