/* ============================================================
   NEILL MEDIA CO. — shared stylesheet
   Every colour, font and spacing value lives in :root below.
   Change one value here and it updates across every page.
   ============================================================ */

:root{
  --ink:        #141A1F;
  --ink-2:      #1D262D;
  --ink-3:      #2B3740;
  --paper:      #F2F4F1;
  --paper-2:    #E4E8E3;
  --blue:       #2B5CE6;
  --blue-lift:  #4A75F0;
  --hivis:      #D6F32F;
  --muted:      #6B7780;
  --muted-dk:   #93A0A8;

  --display: "Archivo", system-ui, sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --rhythm: clamp(72px, 11vh, 128px);
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--display); margin:0; line-height:.94; letter-spacing:-.035em; font-weight:800; }
p{ margin:0 0 1.1em; }
a{ color:inherit; }

:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:2px; }
.on-ink :focus-visible{ outline-color:var(--hivis); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
  margin:0 0 20px; display:block;
}
.on-ink .eyebrow{ color:var(--hivis); }

/* ---------- HEADER ---------- */
.masthead{
  position:sticky; top:0; z-index:60;
  background:rgba(20,26,31,.94);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.masthead .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:66px;
}
.mark{
  font-family:var(--display); font-weight:900; font-stretch:112%;
  font-size:16px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--paper); text-decoration:none; line-height:1;
}
.mark span{ color:var(--hivis); }
.mast-nav{ display:none; gap:26px; align-items:center; }
.mast-nav a{
  font-size:14.5px; font-weight:500; color:var(--muted-dk);
  text-decoration:none; transition:color .18s;
}
.mast-nav a:hover,.mast-nav a[aria-current="page"]{ color:var(--paper); }
.mast-cta{
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  background:var(--hivis); color:var(--ink);
  padding:11px 18px; border-radius:2px; text-decoration:none;
  white-space:nowrap; transition:transform .18s;
}
.mast-cta:hover{ transform:translateY(-2px); }
@media (min-width:940px){ .mast-nav{ display:flex; } }

/* ---------- HOMEPAGE HERO ---------- */
.hero{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(64px,12vh,124px) clamp(72px,13vh,132px);
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--hivis) 46%,transparent 92%);
}
.hero h1{
  font-size:clamp(42px,9.2vw,104px);
  font-stretch:106%; font-weight:900;
  max-width:15ch; margin-bottom:34px;
}
.hero h1 em{ font-style:normal; color:var(--hivis); }
.hero-line{ display:block; opacity:0; animation:rise .72s cubic-bezier(.2,.7,.3,1) forwards; }
.hero-line:nth-child(1){ animation-delay:.06s; }
.hero-line:nth-child(2){ animation-delay:.17s; }
.hero-line:nth-child(3){ animation-delay:.28s; }
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.hero-sub{
  font-size:clamp(17px,2.1vw,20.5px); color:var(--muted-dk);
  max-width:52ch; margin-bottom:36px;
}
.hero-sub strong{ color:var(--paper); font-weight:600; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:16px 26px; border-radius:2px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s, background .18s, color .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--hivis); color:var(--ink); }
.btn-ghost{ border-color:rgba(255,255,255,.28); color:var(--paper); background:none; }
.btn-ghost:hover{ border-color:var(--paper); }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:var(--blue-lift); }

.hero-note{
  font-family:var(--mono); font-size:12.5px; color:var(--muted);
  margin:26px 0 0; letter-spacing:.02em;
}

/* ---------- SERVICE PAGE HERO ---------- */
.hero-sm{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(40px,7vh,72px) clamp(52px,9vh,88px);
  position:relative;
}
.hero-sm::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg,var(--blue) 0%,var(--hivis) 46%,transparent 92%);
}
.crumb{
  font-family:var(--mono); font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:0 0 26px;
}
.crumb a{ color:var(--muted-dk); text-decoration:none; }
.crumb a:hover{ color:var(--hivis); }
.crumb span{ color:var(--muted); padding-inline:8px; }
.hero-sm h1{
  font-size:clamp(33px,6.4vw,68px); font-stretch:104%; font-weight:900;
  max-width:19ch; margin-bottom:26px;
}
.lede{
  font-size:clamp(17px,2vw,20px); color:var(--muted-dk);
  max-width:58ch; margin-bottom:34px;
}
.lede strong{ color:var(--paper); font-weight:600; }

/* ---------- SECTION FRAME ---------- */
.band{ padding-block:var(--rhythm); }
.band-tight{ padding-block:clamp(56px,8vh,92px); }
.band-ink{ background:var(--ink); color:var(--paper); }
.band-tint{ background:var(--paper-2); }

.band-head{ max-width:64ch; margin-bottom:clamp(38px,5vw,60px); }
.band-head h2{
  font-size:clamp(31px,5.1vw,54px); font-stretch:103%;
  margin-bottom:20px;
}
.band-head p{ font-size:clamp(16.5px,1.9vw,19px); color:var(--muted); margin:0; }
.band-ink .band-head p{ color:var(--muted-dk); }

.prose{ max-width:62ch; }
.prose p{ margin-bottom:1.15em; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ font-weight:600; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .68s ease, transform .68s cubic-bezier(.2,.7,.3,1); }
.reveal.seen{ opacity:1; transform:none; }

/* ---------- HOMEPAGE: THE CHECK ---------- */
.check-shell{
  background:var(--ink-2);
  border:1px solid rgba(255,255,255,.11);
  border-radius:4px; overflow:hidden;
}
.check-top{
  padding:clamp(22px,3.4vw,34px);
  border-bottom:1px solid rgba(255,255,255,.11);
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end;
  justify-content:space-between;
}
.field{ flex:1 1 260px; min-width:0; }
.field label{
  display:block; font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-dk);
  margin-bottom:9px;
}
.field input{
  width:100%; background:var(--ink); color:var(--paper);
  border:1px solid rgba(255,255,255,.2); border-radius:2px;
  padding:14px 16px; font-family:var(--body); font-size:16.5px;
}
.field input::placeholder{ color:#5C686F; }
.field input:focus{ border-color:var(--hivis); outline:none; }

.tally{ font-family:var(--mono); text-align:right; flex:0 0 auto; }
.tally b{
  display:block; font-family:var(--display); font-weight:900;
  font-size:clamp(38px,7vw,58px); line-height:.85; color:var(--hivis);
  letter-spacing:-.04em;
}
.tally span{
  font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted-dk);
}

.check-list{ list-style:none; margin:0; padding:0; }
.check-item{
  display:grid; grid-template-columns:auto 1fr; gap:4px 16px;
  padding:clamp(19px,2.7vw,25px) clamp(22px,3.4vw,34px);
  border-bottom:1px solid rgba(255,255,255,.08);
  align-items:start;
}
.check-item:last-child{ border-bottom:0; }
.check-num{
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  color:var(--blue-lift); padding-top:4px; grid-row:span 2;
}
.check-q{ font-weight:600; font-size:16.5px; line-height:1.42; }
.check-why{
  grid-column:2; font-size:14.5px; color:var(--muted-dk);
  margin:7px 0 14px; max-width:60ch; line-height:1.55;
}
.opts{ grid-column:2; display:flex; flex-wrap:wrap; gap:9px; }
.opt{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  background:none; color:var(--muted-dk); cursor:pointer;
  border:1px solid rgba(255,255,255,.22); border-radius:2px;
  padding:9px 15px; transition:all .16s;
}
.opt:hover{ border-color:var(--paper); color:var(--paper); }
.opt[aria-pressed="true"][data-v="y"]{ background:var(--hivis); border-color:var(--hivis); color:var(--ink); }
.opt[aria-pressed="true"][data-v="n"]{ background:var(--blue); border-color:var(--blue); color:#fff; }
.opt[aria-pressed="true"][data-v="?"]{ background:var(--ink-3); border-color:var(--muted); color:var(--paper); }

.check-out{
  padding:clamp(24px,3.6vw,36px);
  background:var(--ink-3);
  border-top:1px solid rgba(255,255,255,.13);
}
.check-out h3{ font-size:clamp(21px,3vw,29px); margin-bottom:12px; }
.check-out p{ color:var(--muted-dk); max-width:56ch; font-size:16px; }
.check-out p:last-of-type{ margin-bottom:22px; }
.verdict{ color:var(--hivis); }

/* ---------- SERVICES GRID ---------- */
.svc{ display:grid; gap:1px; background:rgba(20,26,31,.13); border:1px solid rgba(20,26,31,.13); border-radius:3px; overflow:hidden; }
@media (min-width:720px){ .svc{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .svc{ grid-template-columns:repeat(3,1fr); } }
.svc-cell{ background:var(--paper); padding:clamp(26px,3.4vw,36px); text-decoration:none; display:block; transition:background .18s; }
a.svc-cell:hover{ background:var(--paper-2); }
.svc-cell h3{ font-size:21px; letter-spacing:-.02em; margin-bottom:12px; }
.svc-cell p{ font-size:15.5px; color:var(--muted); margin:0 0 16px; line-height:1.58; }
.svc-tag{ font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--blue); }
.svc-cell.is-soon{ background:var(--paper-2); }
.svc-cell.is-soon .svc-tag{ color:var(--muted); }

/* ---------- SYMPTOMS LIST ---------- */
.symptoms{ list-style:none; margin:0; padding:0; display:grid; gap:2px; max-width:70ch; }
.symptoms li{
  padding:18px 0 18px 34px; position:relative;
  border-bottom:1px solid rgba(20,26,31,.13);
  font-size:16.5px; line-height:1.55;
}
.band-ink .symptoms li{ border-bottom-color:rgba(255,255,255,.13); color:var(--muted-dk); }
.symptoms li::before{
  content:"\2715"; position:absolute; left:0; top:18px;
  color:var(--blue); font-size:15px; font-weight:600;
}
.band-ink .symptoms li::before{ color:var(--hivis); }

/* ---------- DELIVERABLES ---------- */
.deliver{ display:grid; gap:clamp(22px,3vw,34px); }
@media (min-width:700px){ .deliver{ grid-template-columns:repeat(2,1fr); } }
.deliver-item{ border-top:2px solid var(--blue); padding-top:20px; }
.deliver-item h3{ font-size:20px; margin-bottom:10px; }
.deliver-item p{ font-size:15.5px; color:var(--muted); margin:0; line-height:1.58; }
.band-ink .deliver-item p{ color:var(--muted-dk); }

/* ---------- TIMELINE ---------- */
.steps{ display:grid; gap:clamp(24px,3.4vw,40px); }
@media (min-width:840px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ border-top:2px solid var(--blue); padding-top:22px; }
.step-n{
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  letter-spacing:.14em; color:var(--blue); display:block; margin-bottom:14px;
}
.step h3{ font-size:23px; margin-bottom:12px; }
.step p{ font-size:15.5px; color:var(--muted); margin:0; }

/* ---------- OFFER ---------- */
.offer{
  background:var(--blue); color:#fff; border-radius:4px;
  padding:clamp(32px,5vw,60px); display:grid;
  gap:clamp(24px,3vw,48px); align-items:center;
}
@media (min-width:920px){ .offer{ grid-template-columns:1.5fr 1fr; } }
.offer .eyebrow{ color:#fff; opacity:.72; }
.offer h2{ font-size:clamp(28px,4.6vw,46px); margin-bottom:18px; }
.offer p{ font-size:16.5px; opacity:.92; max-width:54ch; }
.offer p:last-of-type{ margin-bottom:0; }
.slots{ text-align:left; }
@media (min-width:920px){ .slots{ text-align:right; } }
.slots b{
  font-family:var(--display); font-weight:900; font-stretch:112%;
  font-size:clamp(64px,12vw,120px); line-height:.8; display:block;
  letter-spacing:-.05em;
}
.slots span{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; opacity:.78; display:block; margin-top:14px;
}

/* ---------- PRICING ---------- */
.price-grid{ display:grid; gap:14px; }
@media (min-width:760px){ .price-grid{ grid-template-columns:repeat(2,1fr); } }
.price{
  border:1px solid rgba(20,26,31,.16); border-radius:3px;
  padding:clamp(24px,3vw,32px); background:var(--paper);
  display:flex; flex-direction:column;
}
.price.is-lead{ border-color:var(--ink); border-width:2px; }
.price h3{ font-size:20px; margin-bottom:6px; }
.price .amt{
  font-family:var(--display); font-weight:900; font-size:36px;
  letter-spacing:-.04em; margin:14px 0 4px; display:block;
}
.price .per{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.price ul{ list-style:none; padding:0; margin:20px 0 0; }
.price li{ font-size:15px; color:var(--muted); padding:7px 0 7px 22px; position:relative; line-height:1.5; }
.price li::before{ content:""; position:absolute; left:0; top:14px; width:9px; height:2px; background:var(--blue); }
.price-note{ font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-top:28px; letter-spacing:.02em; }

/* single prominent price on service pages */
.price-hero{
  border:2px solid var(--ink); border-radius:4px; background:var(--paper);
  padding:clamp(28px,4vw,44px); display:grid; gap:clamp(22px,3vw,44px);
}
@media (min-width:860px){ .price-hero{ grid-template-columns:.85fr 1.15fr; } }
.price-hero .amt{
  font-family:var(--display); font-weight:900; font-stretch:108%;
  font-size:clamp(48px,9vw,80px); line-height:.85; letter-spacing:-.05em;
  display:block; margin-bottom:14px;
}
.price-hero .per{ font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.price-hero ul{ list-style:none; margin:0; padding:0; }
.price-hero li{ font-size:16px; color:var(--ink); padding:10px 0 10px 24px; position:relative; border-bottom:1px solid rgba(20,26,31,.11); }
.price-hero li:last-child{ border-bottom:0; }
.price-hero li::before{ content:""; position:absolute; left:0; top:20px; width:11px; height:2px; background:var(--blue); }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:0; max-width:74ch; }
.faq-item{ border-top:1px solid rgba(20,26,31,.16); padding:clamp(22px,3vw,30px) 0; }
.faq-item:last-child{ border-bottom:1px solid rgba(20,26,31,.16); }
.faq-item h3{ font-size:19px; margin-bottom:12px; letter-spacing:-.02em; }
.faq-item p{ font-size:16px; color:var(--muted); margin:0 0 .9em; line-height:1.62; }
.faq-item p:last-child{ margin-bottom:0; }

/* ---------- CROSS LINKS ---------- */
.xlinks{ display:grid; gap:2px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.13); border-radius:3px; overflow:hidden; }
@media (min-width:760px){ .xlinks{ grid-template-columns:repeat(3,1fr); } }
.xlink{ background:var(--ink); padding:clamp(24px,3vw,32px); text-decoration:none; display:block; transition:background .18s; }
.xlink:hover{ background:var(--ink-2); }
.xlink .lbl{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--hivis); display:block; margin-bottom:12px; }
.xlink h3{ font-size:20px; margin-bottom:10px; }
.xlink p{ font-size:15px; color:var(--muted-dk); margin:0; line-height:1.55; }

/* ---------- ABOUT ---------- */
.about{ display:grid; gap:clamp(28px,4vw,64px); }
@media (min-width:900px){ .about{ grid-template-columns:1.15fr .85fr; } }
.about h2{ font-size:clamp(30px,4.8vw,50px); margin-bottom:22px; }
.about p{ color:var(--muted-dk); font-size:17px; max-width:56ch; }
.facts{ list-style:none; margin:0; padding:0; }
.facts li{
  border-top:1px solid rgba(255,255,255,.14);
  padding:16px 0; font-size:15.5px; color:var(--muted-dk);
  display:flex; gap:16px; align-items:baseline;
}
.facts li b{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--hivis); flex:0 0 92px; font-weight:600;
}

/* ---------- CONTACT ---------- */
.contact{ display:grid; gap:clamp(30px,4vw,64px); }
@media (min-width:900px){ .contact{ grid-template-columns:1fr 1fr; } }
.form-grid{ display:grid; gap:16px; }
.form-grid .field label{ color:var(--muted); }
.form-grid .field input,
.form-grid .field textarea,
.form-grid .field select{
  width:100%; background:var(--paper); color:var(--ink);
  border:1px solid rgba(20,26,31,.24); border-radius:2px;
  padding:14px 16px; font-family:var(--body); font-size:16.5px;
}
.form-grid .field textarea{ min-height:118px; resize:vertical; }
.form-grid .field input:focus,
.form-grid .field textarea:focus,
.form-grid .field select:focus{ border-color:var(--blue); outline:none; }
.form-grid .field input::placeholder,
.form-grid .field textarea::placeholder{ color:#96A0A6; }
.form-note{ font-family:var(--mono); font-size:12.5px; color:var(--muted); margin:6px 0 0; }

.direct{ display:grid; gap:2px; }
.direct a{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 0; border-top:1px solid rgba(20,26,31,.16);
  text-decoration:none; transition:padding .18s;
}
.direct a:hover{ padding-left:8px; }
.direct .lbl{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.direct .val{ font-size:18px; font-weight:600; }
.direct .arrow{ color:var(--blue); font-size:19px; }

/* ---------- CTA BAND ---------- */
.cta-band{ text-align:left; max-width:60ch; }
.cta-band h2{ font-size:clamp(30px,5vw,52px); margin-bottom:20px; }
.cta-band p{ font-size:clamp(16.5px,1.9vw,19px); color:var(--muted-dk); margin-bottom:32px; }

/* ---------- FOOTER ---------- */
.foot{ background:var(--ink); color:var(--muted); padding-block:44px; font-size:14px; }
.foot .wrap{ display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; }
.foot a{ color:var(--muted-dk); text-decoration:none; }
.foot a:hover{ color:var(--paper); }
.foot-nav{ display:flex; flex-wrap:wrap; gap:20px; margin-top:22px; font-size:13.5px; }
.ack{ font-size:13.5px; color:var(--muted); max-width:62ch; margin:22px 0 0; line-height:1.6; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }