/* ============================================================
   The New Patient Generator — thenewpatientgenerator.com
   Clean rebuild of the WordPress homepage. Design tokens are
   sampled from the live site (see npg-site/README.md).
   ============================================================ */

:root {
  --navy: #08203c;          /* section backgrounds, headings */
  --navy-text: #0b233f;     /* body copy */
  --body-blue: #33597e;     /* lighter paragraph tone on white */
  --green: #6baf1e;         /* button base */
  --green-bright: #86cb34;  /* button gradient mid / accents */
  --sage: #a4ccc4;          /* soft teal sections */
  --blueprint: rgba(39, 82, 135, 0.6);
  --white: #ffffff;
  --max: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy-text);
  background: var(--white);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 25px;
}

/* ---------- typography ---------- */

h1.big, h2.big {
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: 0.5px;
  font-size: clamp(34px, 4.6vw, 58px);
  margin-bottom: 28px;
}

.big.mid { font-size: clamp(28px, 3.4vw, 42px); }

.on-dark h1.big, .on-dark h2.big, .section-dark h1.big, .section-dark h2.big { color: var(--white); }

h2.sub, .sub {
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.35;
}

.section-dark h2.sub, .section-sage h2.sub { color: var(--white); }

p { margin-bottom: 1.35em; }
p:last-child { margin-bottom: 0; }

.center { text-align: center; }

/* green brush-stroke behind headings (StrokeLarge/StrokeSmall from the live site) */
.brush {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 0 18px;
}
.brush::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8px; right: -30px;
  bottom: -0.06em;
  height: 0.42em;
  background: url("../img/stroke-large.png") center / 100% 100% no-repeat;
}

/* ---------- header ---------- */

.topbar {
  background: var(--white);
  font-size: 14px;
}
.topbar .wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  padding-top: 10px;
}
.topbar a { color: #1e73be; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .mail-ico { font-size: 20px; line-height: 1; color: var(--navy); }

.site-header { background: var(--white); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}
.site-header .logo img { width: 190px; }
.site-nav { display: flex; gap: 42px; }
.site-nav a {
  font-family: "Quicksand", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
}
.site-nav a:hover { color: var(--green); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white) !important;
  text-decoration: none;
  text-align: center;
  padding: 16px 34px;
  border: none;
  border-radius: 5px;
  background-color: var(--green);
  background-image: linear-gradient(to right, #6baf1e 0%, #86cb34 50%, #6baf1e 100%);
  background-size: 200% 100%;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.btn:hover { background-position: 100% 0; }
.btn.btn-wide { display: block; max-width: 540px; }

/* ---------- sections ---------- */

section { position: relative; overflow: hidden; }
.pad { padding: 70px 0; }
.pad-lg { padding: 110px 0 70px; }

.section-dark { background-color: var(--navy); color: var(--white); }
.section-dark p { color: var(--white); }

.section-sage { background-color: var(--sage); }

/* angled top edge: white wedge overlaying the section's top */
.angle-top::before,
.angle-top-rev::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 90px;
  background: var(--white);
  z-index: 1;
}
.angle-top::before   { clip-path: polygon(0 0, 100% 0, 0 100%); }      /* thick on left */
.angle-top-rev::before { clip-path: polygon(0 0, 100% 0, 100% 100%); } /* thick on right */
.angle-top > .wrap, .angle-top-rev > .wrap { position: relative; z-index: 2; padding-top: 60px; }

/* angled bottom edge: white wedge at the bottom */
.angle-bottom::after,
.angle-bottom-rev::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 90px;
  background: var(--white);
  z-index: 1;
}
.angle-bottom::after    { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.angle-bottom-rev::after { clip-path: polygon(0 0, 0 100%, 100% 100%); }
.angle-bottom > .wrap, .angle-bottom-rev > .wrap { position: relative; z-index: 2; padding-bottom: 60px; }

/* decorative background helpers */
.bg-gears-light { background: url("../img/bg-gears-light.jpg") center / cover no-repeat; }
/* natural-scale so the baked white diagonal stays ~90px tall regardless of section height */
.bg-navy-gears  { background: var(--navy) url("../img/bg-navy-angle.jpg") center top / 100% auto no-repeat; }
.bg-blueprint   { background: var(--navy) url("../img/bg-blueprint-mascot.jpg") center / cover no-repeat; }
.bg-texture-light { background-image: url("../img/texture-gears-light.jpg"); background-position: right center; background-repeat: no-repeat; }

/* ---------- layout helpers ---------- */

.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.cols.top { align-items: start; }
.cols-60-40 { grid-template-columns: 3fr 2fr; }
.cols-40-60 { grid-template-columns: 2fr 3fr; }

@media (max-width: 860px) {
  .cols, .cols-60-40, .cols-40-60 { grid-template-columns: 1fr; gap: 35px; }
  .site-nav { gap: 22px; }
  .site-nav a { font-size: 19px; }
}

/* ---------- components ---------- */

/* responsive video embed */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  margin: 0 auto;
}
.video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-narrow { max-width: 725px; }

/* green-dot bullet lists */
ul.dots { list-style: none; }
ul.dots li {
  position: relative;
  padding-left: 42px;
  margin-bottom: 16px;
  font-weight: 700;
}
ul.dots li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--green-bright);
}
.section-dark ul.dots li { color: var(--white); }

/* checkmark paragraphs */
.checks p { font-weight: 700; }

/* numbered list (sage section) */
ol.steps { padding-left: 26px; }
ol.steps li { margin-bottom: 10px; }

/* the flip counter */
.counter {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 20px 0 12px;
}
.counter span {
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.25;
  color: var(--white);
  background: var(--navy);
  border-radius: 6px;
  padding: 2px 12px;
  box-shadow: inset 0 -0.55em 0 rgba(255,255,255,0.06), 0 2px 3px rgba(0,0,0,0.35);
}
.counter-label {
  font-family: "Quicksand", sans-serif;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--navy);
  text-align: center;
}

/* trusted logos row */
.logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(30px, 7vw, 110px);
  flex-wrap: wrap;
  padding: 25px 0;
}
.logo-row img { width: clamp(150px, 18vw, 235px); }

/* blueprint card */
.card-blueprint {
  background: var(--blueprint);
  border-radius: 15px;
  padding: 30px 35px;
}
.card-sage {
  background: rgba(164, 204, 196, 0.7);
  border-radius: 15px;
  padding: 25px;
}

/* start / stay / refer */
.ssr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.ssr img { width: 150px; margin: 0 auto 18px; }
.ssr h3 {
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  color: var(--white);
  letter-spacing: 1px;
}
@media (max-width: 640px) { .ssr { grid-template-columns: 1fr; } }

/* FAQ accordion */
.faq { max-width: var(--max); }
.faq details {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-bottom: none;
}
.faq details:last-child { border-bottom: 1px solid #e5e5e5; }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: "Quicksand", sans-serif;
  font-size: 19px;
  color: #555;
  padding: 16px 20px 16px 52px;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  position: absolute;
  left: 22px;
  color: #777;
  font-family: "Open Sans", sans-serif;
}
.faq details[open] summary::before { content: "\2212"; }
.faq .a { padding: 4px 24px 20px 52px; background: #fdfdfd; }
.faq table { border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.faq th, .faq td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; vertical-align: top; }
.faq th { background: var(--navy); color: var(--white); }

/* hero mascot artwork — the image carries white padding on its left, so crop
   inside the cell to show the mascot large, like the original */
.hero-art { position: relative; overflow: hidden; }
.hero-art img {
  width: 155%;
  max-width: none;
  margin-left: -55%;
}
@media (max-width: 860px) {
  .hero-art img { width: 100%; margin-left: 0; }
}

/* quote formatting */
.quote { font-style: normal; }
.quote-name { font-weight: 700; font-style: italic; }

/* story italics */
.story p { font-style: italic; }
.story p strong { font-style: normal; }

/* headshot */
.headshot {
  width: 340px;
  max-width: 80%;
  border-radius: 50%;
  margin: 0 auto;
}

/* ---------- subpages ---------- */

.page-band {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 45px 25px;
}
.page-band h1 {
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: 0.5px;
}
.page-band p { color: #cfe0ef; margin: 10px 0 0; font-family: "Quicksand", sans-serif; }

.prose { max-width: 780px; margin: 0 auto; padding: 50px 25px 70px; }
.prose h2 {
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 22px;
  margin: 32px 0 10px;
}
.prose p { color: var(--body-blue); }
.prose ul { margin: 0 0 1.35em 24px; color: var(--body-blue); }
.prose li { margin-bottom: 6px; }

/* contact / simple forms */
.form-card { max-width: 560px; margin: 0 auto; }
.form-card label {
  display: block;
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  color: var(--navy);
  margin: 18px 0 6px;
}
.form-card input, .form-card textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--navy-text);
  border: 1px solid #c9d4dd;
  border-radius: 5px;
  background: #fff;
}
.form-card input:focus, .form-card textarea:focus { outline: 2px solid var(--green-bright); border-color: var(--green-bright); }
.form-card .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-note { text-align: center; font-family: "Quicksand", sans-serif; margin-top: 18px; }

/* footer */
.site-footer {
  background: #0a1626;
  color: var(--white);
  text-align: center;
  padding: 28px 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
}
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a.admin { color: #e0b64f; }
.site-footer .sep { margin: 0 8px; }