/* ==========================================================================
   Wellbiz Solutions — shared stylesheet
   Palette pulled from the brand logo: maroon eagle, steel-blue ring,
   black wordmark, brushed-silver plate.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#15171A;           /* near-black, from wordmark */
  --ink-2:#0D0E10;
  --paper:#F1F2F3;         /* brushed-steel white, from plate */
  --paper-2:#E3E5E7;
  --maroon:#7C2B3B;        /* eagle */
  --maroon-bright:#9C3A4D;
  --blue:#2E7DA6;          /* ring */
  --blue-bright:#4FA0C9;
  --light:#F3F4F5;
  --line-on-ink:rgba(243,244,245,0.14);
  --line-on-paper:rgba(21,23,26,0.13);
  --display:'Fraunces', serif;
  --body:'Work Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
body{
  margin:0;
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:16px;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
section{position:relative;}
.on-ink{background:var(--ink);color:var(--light);}
.on-ink .rule{background:var(--line-on-ink);}
.on-paper{background:var(--paper);color:var(--ink);}

.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--maroon);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.on-ink .eyebrow{color:var(--blue-bright);}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:currentColor;
  display:inline-block;
}
.eyebrow.center{justify-content:center;}
.eyebrow.center::before{display:none;}

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;}
.rule{height:1px;background:var(--line-on-paper);border:none;width:100%;}

/* ---------- NAV ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(13,14,16,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-on-ink);
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:12px 28px;
  display:flex;align-items:center;justify-content:space-between;
  color:var(--light);
}
.brand{
  font-family:var(--display);
  font-weight:600;
  font-size:19px;
  letter-spacing:0.01em;
  text-decoration:none;
  color:var(--light);
  display:flex;align-items:center;gap:12px;
}
.brand img{height:38px;width:38px;object-fit:contain;border-radius:50%;background:var(--light);padding:2px;}
nav.links{display:flex;gap:26px;font-size:14.5px;}
nav.links a{text-decoration:none;color:var(--light);opacity:0.78;transition:opacity .2s ease;}
nav.links a:hover, nav.links a:focus-visible{opacity:1;}
nav.links a.active{opacity:1;color:var(--blue-bright);}
nav.links a:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px;}
.nav-cta{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;
  border:1px solid var(--maroon-bright);color:var(--light);
  background:var(--maroon);
  padding:9px 17px;border-radius:2px;text-decoration:none;
  white-space:nowrap;
  transition:background .2s ease;
}
.nav-cta:hover{background:var(--maroon-bright);}
.nav-toggle{display:none;background:none;border:none;color:var(--light);font-family:var(--mono);font-size:13px;cursor:pointer;padding:8px;}
@media (max-width:860px){
  nav.links{
    position:fixed;top:63px;left:0;right:0;
    background:var(--ink-2);
    flex-direction:column;gap:0;
    padding:8px 0;
    border-bottom:1px solid var(--line-on-ink);
    transform:translateY(-130%);
    transition:transform .25s ease;
  }
  nav.links.open{transform:translateY(0);}
  nav.links a{padding:14px 28px;width:100%;opacity:1;}
  .nav-toggle{display:block;}
}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.05em;
  text-decoration:none;
  padding:14px 26px;
  border-radius:2px;
  display:inline-block;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--maroon);color:var(--light);font-weight:500;}
.btn-primary:hover{background:var(--maroon-bright);transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--line-on-ink);color:var(--light);background:transparent;}
.btn-ghost:hover{border-color:var(--blue-bright);color:var(--blue-bright);transform:translateY(-2px);}
.btn-ghost.on-paper-btn{border-color:var(--line-on-paper);color:var(--ink);}
.btn-ghost.on-paper-btn:hover{border-color:var(--maroon);color:var(--maroon);}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{padding:70px 0 56px;}
.page-hero h1{font-size:clamp(32px,4.6vw,52px);color:var(--light);line-height:1.06;}
.page-hero p.lede{font-size:17px;max-width:56ch;color:rgba(243,244,245,0.82);margin-top:16px;}

/* ---------- PHOTO PLACEHOLDER ---------- */
.photo-slot{
  border:1.5px dashed var(--line-on-paper);
  background:repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 10px, var(--paper) 10px, var(--paper) 20px);
  border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  min-height:220px;
  padding:24px;
}
.on-ink .photo-slot{
  border-color:var(--line-on-ink);
  background:repeating-linear-gradient(135deg, #1a1c20, #1a1c20 10px, var(--ink) 10px, var(--ink) 20px);
}
.photo-slot .slot-label{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--maroon);
  opacity:.85;
}
.on-ink .photo-slot .slot-label{color:var(--blue-bright);}
.photo-slot .slot-hint{font-size:12.5px;opacity:.55;margin-top:6px;}

/* ---------- Custom illustration cards (brand-style graphics, not photos) ---------- */
.illus-card{
  background:var(--light);
  border:1px solid var(--line-on-paper);
  border-radius:2px;
  overflow:hidden;
}
.illus-card svg{display:block;width:100%;height:auto;}
.illus-caption{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.04em;
  text-align:center;
  padding:14px 12px;
  color:var(--maroon);
  border-top:1px solid var(--line-on-paper);
}

/* ---------- FOOTER ---------- */
footer.site-footer{
  background:var(--ink-2);
  color:var(--light);
  padding:70px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line-on-ink);
}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.footer-brand img{height:44px;width:44px;object-fit:contain;border-radius:50%;background:var(--light);padding:2px;}
.footer-brand span{font-family:var(--display);font-size:19px;}
.footer-col h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:16px;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:10px;font-size:14.5px;}
.footer-col a{text-decoration:none;opacity:.82;}
.footer-col a:hover{opacity:1;color:var(--blue-bright);}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:22px;
  font-family:var(--mono);font-size:11.5px;
  color:rgba(243,244,245,0.5);
}

/* ---------- Utility layout ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;}
@media (max-width:860px){ .grid-2, .grid-3{grid-template-columns:1fr;} }

.section-pad{padding:90px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(28px,3.4vw,42px);}

/* ---------- Cards ---------- */
.card{
  background:var(--light);
  border:1px solid var(--line-on-paper);
  padding:32px 30px;
  border-radius:2px;
}
.on-ink .card{background:var(--ink-2);border-color:var(--line-on-ink);}

/* Skip link */
.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--maroon);color:var(--light);
  padding:10px 16px;z-index:100;
  font-family:var(--mono);font-size:13px;
  text-decoration:none;
}
.skip-link:focus{left:12px;top:12px;}
