/* ============================================================
   ART3RY — interior pages
   Same identity as the homepage: a dark stage at the top, then a
   precision light sheet underneath. This file implements the page
   factory's existing class contract (.hero, .card, .steps, .faq,
   .article ...) in that language, so 57 generated pages adopt the
   design system without their markup being rewritten.

   Homepage layout lives in site.css. The two are never loaded
   together; they define some of the same class names differently.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Stage (dark) */
  --void:#070B18;
  --void-2:#0D1428;
  --on-void:#F2F5FC;
  --on-void-2:#93A2C4;

  /* Sheet (light) */
  --paper:#F4F6FA;
  --sheet:#FFFFFF;
  --ink:#0B1222;
  --ink-2:#55627E;
  --ink-3:#8290AA;
  --rule:#C9D3E4;

  /* Signal. --red-ink is the only red that passes AA on paper:
     #E63946 reaches just 3.95:1 there, so body text never uses it. */
  --red:#E63946;
  --red-ink:#C1121F;
  --red-hot:#FF5A67;
  --blue:#2C6BE8;
  --blue-hot:#5B9BFF;
  --blue-wash:#EAF0FE;
  --mint:#12C48B;

  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --sh-1:0 1px 2px rgba(11,18,34,.04),0 8px 24px -12px rgba(11,18,34,.12);
  --sh-2:0 2px 6px rgba(11,18,34,.06),0 22px 48px -20px rgba(11,18,34,.22);

  --wrap:1060px;
  --gut:40px;
  --ease:cubic-bezier(.22,.68,.28,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);
  line-height:1.65;font-size:16px;
  /* clip, not hidden: hidden makes body a scroll container, which breaks
     position:sticky in descendants and captures scroll timelines. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--blue-hot);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- Nav: the dark bar every page opens with ---------- */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);
  background:var(--void);border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;z-index:50;
}
.logo{display:flex;align-items:center;gap:9px}
.logo-mark{width:24px;height:24px;flex:none}
.wordmark{
  font-family:var(--sans);font-weight:900;font-size:20px;
  letter-spacing:-.045em;color:#fff;
}
.wordmark em{font-style:normal;color:var(--red-hot)}
/* legacy raster logo, still emitted by older pages */
.logo-img{height:30px;border-radius:4px}
.nav-links{display:flex;gap:24px;font-size:14px;color:var(--on-void-2)}
.nav-links a{transition:color .16s var(--ease)}
.nav-links a:hover{color:#fff}
.nav-cta{
  font-size:13.5px;font-weight:700;color:#fff;background:var(--red);
  padding:9px 16px;border-radius:6px;white-space:nowrap;
  transition:background .16s var(--ease),transform .16s var(--ease);
}
.nav-cta:hover{background:var(--red-hot);transform:translateY(-1px)}

/* ---------- Hero: continues the dark stage, then hands off ---------- */
.hero{
  background:var(--void);color:var(--on-void);
  text-align:center;padding:64px var(--gut) 72px;
  position:relative;isolation:isolate;overflow:clip;
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 60% at 18% 8%,rgba(230,57,70,.20),transparent 62%),
    radial-gradient(50% 64% at 84% 92%,rgba(44,107,232,.26),transparent 66%);
}
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-hot);margin-bottom:16px;
}
.hero .kicker::before{
  content:'';display:inline-block;width:22px;height:1px;
  background:currentColor;vertical-align:middle;margin-right:10px;
}
h1{
  font-size:clamp(30px,4.8vw,50px);font-weight:900;line-height:1.06;
  letter-spacing:-.035em;color:#fff;max-width:16ch;margin:0 auto;
  text-wrap:balance;
}
h1 .b{color:var(--blue-hot)}
.sub{
  font-size:17.5px;color:var(--on-void-2);max-width:620px;
  margin:20px auto 0;line-height:1.62;text-wrap:pretty;
}
.sub strong{color:var(--on-void);font-weight:600}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btn-primary{
  display:inline-block;background:var(--red);color:#fff;font-weight:700;
  font-size:15px;padding:13px 26px;border-radius:7px;
  transition:background .16s var(--ease),transform .16s var(--ease);
}
.btn-primary:hover{background:var(--red-hot);transform:translateY(-1px)}
.btn-secondary{
  display:inline-block;border:1px solid rgba(255,255,255,.22);color:var(--on-void);
  font-weight:600;font-size:15px;padding:13px 24px;border-radius:7px;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.btn-secondary:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}

/* ---------- Sheet sections ---------- */
.section{padding:62px var(--gut);max-width:calc(var(--wrap) + var(--gut) * 2);margin:0 auto}
.section h2{
  font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.025em;
  color:var(--ink);text-align:center;margin-bottom:12px;text-wrap:balance;
}
.section .lead{
  color:var(--ink-2);text-align:center;max-width:640px;
  margin:0 auto 40px;font-size:16.5px;text-wrap:pretty;
}
.section .kicker{text-align:center;color:var(--blue)}

/* ---------- Steps: a real sequence, so the numbers earn their place ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{
  background:var(--sheet);border:1px solid var(--rule);border-radius:8px;
  padding:26px 22px;box-shadow:var(--sh-1);
}
.step .n{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  color:var(--red-ink);margin-bottom:12px;display:block;text-transform:uppercase;
}
.step h3{font-size:17.5px;color:var(--ink);margin-bottom:7px;letter-spacing:-.01em}
.step p{font-size:14.5px;color:var(--ink-2)}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:var(--sheet);border:1px solid var(--rule);border-radius:8px;
  padding:28px 24px;position:relative;overflow:clip;box-shadow:var(--sh-1);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.card::before{
  content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--red),var(--blue));
}
.card .tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin-bottom:12px;display:block;
}
.card h3{font-size:19px;color:var(--ink);margin-bottom:11px;letter-spacing:-.015em}
.card .say{
  font-style:italic;color:var(--ink);background:var(--blue-wash);
  border-left:3px solid var(--blue);padding:11px 13px;border-radius:0 6px 6px 0;
  font-size:14.5px;margin-bottom:13px;
}
.card ul{list-style:none;font-size:14px;color:var(--ink-2)}
.card li{padding:5px 0 5px 20px;position:relative}
.card li::before{
  content:'';position:absolute;left:0;top:13px;
  width:7px;height:7px;border-radius:50%;background:var(--mint);
}

/* ---------- The reassurance panel ---------- */
.safe{
  background:var(--sheet);border:1px solid var(--rule);border-left:3px solid var(--red);
  border-radius:8px;padding:34px 32px;text-align:center;
  max-width:820px;margin:0 auto;box-shadow:var(--sh-1);
}
.safe h2{font-size:clamp(21px,2.6vw,27px);margin-bottom:4px}
.safe p{color:var(--ink-2);max-width:620px;margin:9px auto 0;font-size:16px;text-wrap:pretty}

/* ---------- Proof line ---------- */
.proof{text-align:center;color:var(--ink-2);font-size:15px}
.proof a{color:var(--blue);border-bottom:1px solid rgba(44,107,232,.3)}
.proof a:hover{border-bottom-color:var(--blue)}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto}
.faq .q{
  font-weight:700;color:var(--ink);margin:24px 0 6px;font-size:16.5px;
  padding-top:20px;border-top:1px solid var(--rule);
}
.faq .q:first-child{border-top:0;padding-top:0;margin-top:0}
.faq .a{color:var(--ink-2);font-size:15.5px;text-wrap:pretty}

/* ---------- Long-form article ---------- */
.article{max-width:720px;margin:0 auto;padding:8px var(--gut) 34px}
.article h2{
  font-size:23px;color:var(--ink);margin:36px 0 12px;letter-spacing:-.02em;
  padding-left:13px;border-left:3px solid var(--red);text-align:left;
}
.article p{color:#3A465F;margin:0 0 16px;font-size:17px;line-height:1.72;text-wrap:pretty}
.article a{color:var(--blue);border-bottom:1px solid rgba(44,107,232,.3)}
.article a:hover{border-bottom-color:var(--blue)}

/* ---------- Long-form post (the /blog/growth-for-* set) ----------
   These put h1 and h2 inside the article on the light sheet, so every
   heading here has to out-specify the global dark-hero h1. */
.article-wrap{max-width:720px;margin:0 auto;padding:56px var(--gut) 72px}
.article-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-ink);margin-bottom:12px;
}
.article-kicker.blue{color:var(--blue)}
.article-wrap h1{
  font-size:clamp(28px,4.2vw,42px);font-weight:900;letter-spacing:-.03em;
  line-height:1.1;color:var(--ink);margin:0 0 18px;max-width:none;text-wrap:balance;
}
.article-meta{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3);
  margin-bottom:36px;padding-bottom:22px;border-bottom:1px solid var(--rule);
}
.article-wrap h2{
  font-size:23px;font-weight:800;color:var(--ink);margin:34px 0 12px;
  letter-spacing:-.02em;padding-left:13px;border-left:3px solid var(--red);
}
.article-wrap p{font-size:17px;color:#3A465F;line-height:1.72;margin-bottom:17px;text-wrap:pretty}
.article-wrap ul{padding-left:20px;margin-bottom:17px}
.article-wrap ul li{font-size:17px;color:#3A465F;line-height:1.72;margin-bottom:6px}
.article-wrap a{color:var(--blue);border-bottom:1px solid rgba(44,107,232,.3)}
.article-wrap a:hover{border-bottom-color:var(--blue)}
.pull-quote{
  font-size:18.5px;font-weight:700;color:var(--ink);border-left:3px solid var(--red);
  padding:16px 22px;margin:30px 0;background:#FDF0F1;border-radius:0 8px 8px 0;
}
.pull-quote.blue{border-color:var(--blue);background:var(--blue-wash)}
/* the post CTA reuses the dark .cta-strip below, with its own heading + button */
.cta-strip h3{font-size:22px;font-weight:800;color:#fff;margin-bottom:8px}
.cta-btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;
  font-size:16px;font-weight:700;padding:14px 34px;border-radius:7px;
  transition:background .16s var(--ease),transform .16s var(--ease);
}
.cta-btn:hover{background:var(--red-hot);transform:translateY(-1px)}

/* ---------- Closing CTA ---------- */
.cta-strip{
  background:var(--void);border-radius:10px;padding:46px 38px;text-align:center;
  margin:16px auto 60px;max-width:980px;position:relative;overflow:clip;isolation:isolate;
}
.article-wrap .cta-strip{margin:44px 0 0;max-width:none;padding:38px 30px}
.cta-strip::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(50% 70% at 12% 10%,rgba(230,57,70,.26),transparent 62%),
    radial-gradient(54% 74% at 88% 90%,rgba(44,107,232,.30),transparent 66%);
}
.cta-strip h2{
  color:#fff;font-size:clamp(23px,3.6vw,34px);font-weight:900;
  margin-bottom:11px;letter-spacing:-.03em;text-align:center;text-wrap:balance;
}
.cta-strip p{color:var(--on-void-2);margin-bottom:22px;text-wrap:pretty}
.cta-strip a{
  display:inline-block;background:var(--red);color:#fff;font-weight:800;
  padding:14px 32px;border-radius:7px;
  transition:background .16s var(--ease),transform .16s var(--ease);
}
.cta-strip a:hover{background:var(--red-hot);transform:translateY(-1px)}

/* ---------- Footer ---------- */
footer{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  flex-wrap:wrap;padding:30px var(--gut);
  background:var(--void);color:var(--on-void-2);
}
footer .wordmark{font-size:16px}
.footer-links{display:flex;gap:20px;font-size:13px;flex-wrap:wrap}
.footer-links a{transition:color .16s var(--ease)}
.footer-links a:hover{color:#fff}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .steps,.cards{grid-template-columns:1fr}
}
@media(max-width:768px){
  :root{--gut:22px}
  /* Do NOT hide the nav on a phone. Hiding it strands the visitor on whatever page
     they landed on, with no route to the blog or the services. The homepage solves
     this by wrapping the links to a third row that scrolls sideways; interior pages
     now do the same. */
  nav{flex-wrap:wrap;padding:12px var(--gut) 0}
  .nav-links{
    order:3;width:100%;gap:20px;font-size:13.5px;margin-top:11px;padding:10px 0;
    border-top:1px solid rgba(255,255,255,.1);
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap}
  .hero{padding:48px var(--gut) 56px}
  .section{padding:46px var(--gut)}
  .cta-strip{padding:36px 24px;border-radius:8px}
  footer{flex-direction:column;text-align:center;align-items:center}
}

/* ---------- Motion off ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .card:hover,.btn-primary:hover,.btn-secondary:hover,.nav-cta:hover,.cta-strip a:hover{transform:none}
}

@media print{
  body{background:#fff}
  nav,.cta-strip{display:none}
  .hero{background:#fff;color:#000}
  .hero::before{display:none}
  h1,.section h2{color:#000}
}

/* ---------- Keep reading ----------
   A post that ends at a CTA is a dead end. These are hand-grouped by topic so the
   next click is genuinely the next thing the reader wants. */
.readnext{max-width:720px;margin:44px auto 0;padding:26px 0 0;border-top:1px solid var(--rule)}
.readnext-h{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px}
.readnext ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.readnext li{padding:0}
.readnext a{display:block;padding:13px 14px;border-radius:7px;border:1px solid transparent;
  transition:background .16s var(--ease),border-color .16s var(--ease)}
.readnext a:hover{background:var(--sheet);border-color:var(--rule)}
.readnext b{display:block;font-size:16.5px;font-weight:700;color:var(--ink);
  letter-spacing:-.015em;margin-bottom:3px;line-height:1.3}
.readnext span{display:block;font-size:14px;color:var(--ink-2);line-height:1.5}
@media(max-width:768px){.readnext{margin-top:34px}}