/* ==========================================================================
   REN Downtown Bookkeeping & Accounting - landing page stylesheet
   Enqueued only on the page-bookkeeping.php template.
   Palette derived from the REN logo: blue, charcoal grey, white.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
.bk {
  --bk-blue:        #1B7EC2;
  --bk-blue-dark:   #145F94;
  --bk-blue-tint:   #EAF3FA;
  --bk-ink:         #3A3A3C;
  --bk-ink-soft:    #6B6E73;
  --bk-line:        #DCDFE3;
  --bk-paper:       #F5F6F8;
  --bk-white:       #FFFFFF;

  --bk-font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --bk-font-body: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;

  --bk-max:   1200px;
  --bk-gut:   clamp(20px, 5vw, 56px);
  --bk-sect:  clamp(56px, 7vw, 88px);
  --bk-radius: 3px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
.bk {
  background: var(--bk-white);
  color: var(--bk-ink);
  font-family: var(--bk-font-body);
  font-size: 19px;
  line-height: 1.65;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

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

.bk a { color: var(--bk-white); text-decoration: none; }
.bk a:hover,
.bk a:focus { color: var(--bk-blue-dark); }
.bk :focus-visible { outline: 2px solid var(--bk-blue); outline-offset: 2px; }
.bk ::selection { background: var(--bk-blue-tint); }

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

.bk h1, .bk h2, .bk h3, .bk h4 {
  font-family: var(--bk-font-head);
  font-weight: 600;
  line-height: 1.15;
  color: var(--bk-ink);
  margin: 0;
}
.bk p, .bk ul, .bk dl { margin: 0; }

.bk__wrap {
  max-width: var(--bk-max);
  margin: 0 auto;
  padding-left: var(--bk-gut);
  padding-right: var(--bk-gut);
}

.bk__section { padding-top: var(--bk-sect); padding-bottom: var(--bk-sect); }
.bk__section--paper {
  background: var(--bk-paper);
  border-top: 1px solid var(--bk-line);
  border-bottom: 1px solid var(--bk-line);
}

/* Eyebrow / kicker */
.bk__kicker {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bk-blue);
  margin: 0 0 18px;
}

.bk__h2 { font-size: clamp(34px, 3.8vw, 48px); margin-bottom: 48px; }
.bk__h2--tight { max-width: 28ch; }
.bk__lede { font-size: 21px; color: var(--bk-ink-soft); }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.bk__btn {
  display: inline-block;
  font-family: var(--bk-font-body);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  padding: 16px 32px;
  border-radius: var(--bk-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bk__btn--primary { background: var(--bk-blue) !important; color: var(--bk-white) !important; }
.bk__btn--primary:hover,
.bk__btn--primary:focus { background: var(--bk-blue-dark) !important; color: var(--bk-white) !important; }
.bk__btn--primary:active { background: #10517F; }

.bk__btn--ghost { background: transparent; color: var(--bk-ink) !important; border-color: var(--bk-line) !important; }
.bk__btn--ghost:hover,
.bk__btn--ghost:focus { border-color: var(--bk-blue) !important; color: var(--bk-blue) !important; }

.bk__btn--sm { font-size: 18px; padding: 14px 28px; }

/* --------------------------------------------------------------------------
   4. Header / nav
   -------------------------------------------------------------------------- */
.bk__header {
  background: var(--bk-white);
  border-bottom: 1px solid var(--bk-line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.bk__nav {
  max-width: var(--bk-max);
  margin: 0 auto;
  padding: 20px var(--bk-gut);
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}
.bk__logo { flex: 0 0 auto; }
.bk__logo img { height: 68px; width: auto; }
.bk__navlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  margin-left: auto;
}
.bk__navlinks a { font-size: 18px; font-weight: 500; color: var(--bk-ink); }
.bk__navlinks a:hover { color: var(--bk-blue); }
.bk__nav .bk__btn { flex: 0 0 auto; font-size: 18px; padding: 13px 26px; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.bk__hero { border-bottom: 1px solid var(--bk-line); }
.bk__hero-inner {
  max-width: var(--bk-max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--bk-gut);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.bk__hero h1 { font-size: clamp(44px, 5.4vw, 68px); margin-bottom: 26px; }
.bk__hero-copy { font-size: 22px; max-width: 52ch; color: var(--bk-ink-soft); margin-bottom: 34px; }
.bk__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }

.bk__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: 17px;
  color: var(--bk-ink-soft);
}
.bk__meta-sep { color: var(--bk-line); }

.bk__portrait { justify-self: center; width: 100%; max-width: 440px; margin: 0; }
.bk__portrait img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--bk-radius); }
.bk__portrait figcaption {
  margin-top: 16px;
  font-size: 17px;
  color: var(--bk-ink-soft);
  border-left: 3px solid var(--bk-blue);
  padding-left: 14px;
}

/* --------------------------------------------------------------------------
   6. Grid plates (hairline-divided cells)
   -------------------------------------------------------------------------- */
.bk__plate {
  display: grid;
  gap: 1px;
  background: var(--bk-line);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  overflow: hidden;
}
/* Column counts are fixed (not auto-fit) so the cells always tile the grid:
   the hairline rules are the container background showing through 1px gaps,
   so a partly-filled row would paint as a bare grey block. */
.bk__plate--2 { grid-template-columns: 1fr; }
.bk__plate--6 { grid-template-columns: 1fr; }
.bk__plate--stats { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 700px) {
  .bk__plate--2 { grid-template-columns: repeat(2, 1fr); }
  .bk__plate--6 { grid-template-columns: repeat(2, 1fr); }
}

/* Six cells, so 3 columns still tiles exactly. */
@media (min-width: 1060px) {
  .bk__plate--6 { grid-template-columns: repeat(3, 1fr); }
}
.bk__plate--joined { border-top: none; border-radius: 0 0 var(--bk-radius) var(--bk-radius); }

.bk__cell { background: var(--bk-white); padding: clamp(28px, 3.5vw, 44px); }
.bk__cell--paper { background: var(--bk-paper); padding: 28px; }
.bk__cell h3 { font-size: 30px; margin-bottom: 18px; }
.bk__cell h4 { font-size: 22px; line-height: 1.25; margin-bottom: 12px; }
.bk__cell p { font-size: 20px; color: var(--bk-ink-soft); }
.bk__cell--paper p { font-size: 18px; line-height: 1.6; }
.bk__cell > p + ul { margin-top: 24px; }

/* Dash list */
.bk__list { list-style: none; padding: 0; display: grid; gap: 12px; font-size: 18px; }
.bk__list li { display: flex; gap: 12px; }
.bk__list li::before { content: "\2014"; color: var(--bk-blue); font-weight: 700; flex: 0 0 auto; }
.bk__list--ink li::before { color: var(--bk-ink); }

/* Stat cells */
.bk__stat { background: var(--bk-white); padding: 26px; }
.bk__stat-num { font-family: var(--bk-font-head); font-size: 34px; color: var(--bk-blue); margin: 0 0 6px; line-height: 1.1; }
.bk__stat p { font-size: 17px; color: var(--bk-ink-soft); line-height: 1.5; }

/* --------------------------------------------------------------------------
   7. About
   -------------------------------------------------------------------------- */
.bk__about-inner {
  max-width: var(--bk-max);
  margin: 0 auto;
  padding: var(--bk-sect) var(--bk-gut);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.bk__about h2 { font-size: clamp(32px, 3.6vw, 44px); margin-bottom: 24px; }
.bk__about p { max-width: 50ch; color: var(--bk-ink-soft); font-size: 21px; }
.bk__about p + p { margin-top: 20px; }

/* --------------------------------------------------------------------------
   8. Ways to work
   -------------------------------------------------------------------------- */
.bk__ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(24px, 3vw, 36px); }
.bk__way {
  border: 1px solid var(--bk-line);
  border-top: 3px solid var(--bk-blue);
  border-radius: var(--bk-radius);
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
}
.bk__way--alt { border-top-color: var(--bk-ink); }
.bk__way-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.bk__way h3 { font-size: 30px; line-height: 1.2; }
.bk__way p { font-size: 20px; color: var(--bk-ink-soft); margin-bottom: 24px; }
.bk__way .bk__list { margin-bottom: 32px; }
.bk__way .bk__btn { margin-top: auto; align-self: flex-start; }

.bk__badge {
  background: var(--bk-blue-tint);
  color: var(--bk-blue-dark);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   9. FAQ
   -------------------------------------------------------------------------- */
.bk__faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(28px, 4vw, 56px); }
.bk__faq h3 { font-size: 24px; line-height: 1.25; margin-bottom: 12px; }
.bk__faq p { color: var(--bk-ink-soft); }

/* --------------------------------------------------------------------------
   10. Contact
   -------------------------------------------------------------------------- */
.bk__contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(36px, 5vw, 72px); }
.bk__contact h2 { margin-bottom: 22px; }
.bk__contact-lede { font-size: 21px; color: var(--bk-ink-soft); max-width: 44ch; margin-bottom: 36px; }

.bk__details { display: grid; gap: 24px; border-top: 1px solid var(--bk-line); padding-top: 28px; }
.bk__details dt {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bk-ink-soft);
  font-weight: 600;
  margin-bottom: 6px;
}
.bk__details dd { margin: 0; font-size: 21px; }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.bk__footer { border-top: 1px solid var(--bk-line); background: var(--bk-paper); }
.bk__footer-inner {
  max-width: var(--bk-max);
  margin: 0 auto;
  padding: 40px var(--bk-gut) 52px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
}
.bk__footer img { height: 52px; width: auto; mix-blend-mode: multiply; }
.bk__footer span { font-size: 17px; color: var(--bk-ink-soft); }
.bk__footer .bk__footer-right { margin-left: auto; }

/* --------------------------------------------------------------------------
   12. Contact Form 7
   The CF7 markup uses .bk-form-* classes set in the form template.
   -------------------------------------------------------------------------- */
.bk__formcard {
  background: var(--bk-paper);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  padding: clamp(26px, 3.5vw, 40px);
}

.bk__formcard .wpcf7-form { display: grid; gap: 20px; }
.bk__formcard .wpcf7-form p { margin: 0; }

.bk-form-field { display: block; }
.bk-form-field > label,
.bk__formcard label.bk-form-label {
  display: block;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--bk-ink);
}

.bk__formcard input[type="text"],
.bk__formcard input[type="email"],
.bk__formcard input[type="tel"],
.bk__formcard select,
.bk__formcard textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--bk-font-body);
  font-size: 19px;
  line-height: 1.4;
  color: var(--bk-ink);
  padding: 14px 16px;
  background: var(--bk-white);
  border: 1px solid var(--bk-line);
  border-radius: var(--bk-radius);
  appearance: none;
}
.bk__formcard textarea { resize: vertical; min-height: 120px; }
.bk__formcard select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236B6E73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.bk__formcard input:focus,
.bk__formcard select:focus,
.bk__formcard textarea:focus {
  outline: 2px solid var(--bk-blue);
  outline-offset: 1px;
  border-color: var(--bk-blue);
}
.bk__formcard ::placeholder { color: #9AA0A6; }

.bk__formcard .wpcf7-submit {
  width: 100%;
  background: var(--bk-blue);
  color: var(--bk-white);
  font-family: var(--bk-font-body);
  font-weight: 600;
  font-size: 19px;
  padding: 16px;
  border: none;
  border-radius: var(--bk-radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.bk__formcard .wpcf7-submit:hover { background: var(--bk-blue-dark); }
.bk__formcard .wpcf7-submit:active { background: #10517F; }

/* CF7 validation + response messaging */
.bk__formcard .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 16px;
  color: #B4231F;
}
.bk__formcard .wpcf7-not-valid { border-color: #B4231F; }
.bk__formcard .wpcf7-response-output {
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--bk-line) !important;
  border-radius: var(--bk-radius);
  font-size: 17px;
  background: var(--bk-white);
}
.bk__formcard form.sent .wpcf7-response-output { border-color: var(--bk-blue) !important; color: var(--bk-blue-dark); }
.bk__formcard form.invalid .wpcf7-response-output,
.bk__formcard form.failed .wpcf7-response-output { border-color: #B4231F !important; color: #B4231F; }
.bk__formcard .wpcf7-spinner { margin: 8px auto 0; }

/* Honeypot / hidden fields must never occupy grid space */
.bk__formcard .bk-form-hp { display: none; }

/* --------------------------------------------------------------------------
   13. Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .bk__navlinks { display: none; }
  .bk__nav { gap: 16px; justify-content: space-between; }
  .bk__nav .bk__btn { margin-left: auto; }
}

@media (max-width: 480px) {
  .bk__plate--stats { grid-template-columns: 1fr; }
  .bk__logo img { height: 54px; }
  .bk__footer img { height: 44px; }
}

@media (max-width: 640px) {
  .bk { font-size: 18px; }
  .bk__hero-copy { font-size: 20px; }
  .bk__cell p, .bk__way p { font-size: 19px; }
  .bk__about p, .bk__contact-lede, .bk__details dd { font-size: 19px; }
  .bk__footer .bk__footer-right { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */
@media print {
  .bk__header { position: static; }
  .bk__actions, .bk__formcard { display: none; }
  .bk { font-size: 12pt; }
}