/* ==========================================================================
   Briar and Root Nannies
   Stylesheet · Draft 1 · August 1, 2026

   Built to the brand standards in "3 - Documents/Brand Standards.md".

   CONTRAST RULE, enforced throughout:
   Sage, Seed Gold, and Blush are SHAPES, never WORDS, on a light ground.
   Text is only ever Bark or Deep Teal on light, Shell or white on dark.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette and tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette — sampled from the logo files, brand standards section 2 */
  --bark:       #30272C;
  --deep-teal:  #023E3E;
  --sage:       #8B977C;
  --blush:      #DBB5AE;
  --seed-gold:  #DB9932;
  --shell:      #EFEAE9;
  --panel:      #F8F2EF;
  --white:      #FFFFFF;

  /* Derived, for hairlines and muted type only */
  --bark-70:    rgba(48, 39, 44, 0.70);
  --bark-12:    rgba(48, 39, 44, 0.12);
  --shell-70:   rgba(239, 234, 233, 0.70);
  --shell-20:   rgba(239, 234, 233, 0.20);

  /* Type */
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Rhythm */
  --measure:  68ch;
  --gutter:   clamp(1.25rem, 5vw, 3rem);
  --section:  clamp(4rem, 10vw, 7.5rem);
  --radius:   2px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--shell);
  color: var(--bark);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); color: var(--bark); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); color: var(--deep-teal); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); color: var(--deep-teal); }

p { margin: 0 0 1.25rem; max-width: var(--measure); }

a { color: var(--deep-teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bark); }

strong { font-weight: 700; }

/* The kicker. Brand standards section 5 — this is the detail that makes it
   look designed. Karla Bold, uppercase, letterspaced ~0.14em, Deep Teal. */
.kicker {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep-teal);
  margin: 0 0 1.25rem;
}

.lede { font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.55; color: var(--bark); }

.fine { font-size: 0.875rem; color: var(--bark-70); line-height: 1.55; }

/* Sage rule. A shape, not text — permitted use of Sage on light. */
.rule {
  width: 56px; height: 2px;
  background: var(--sage);
  border: 0; margin: 0 0 1.75rem;
}
.rule--center { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap { width: min(1120px, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - (var(--gutter) * 2)); margin-inline: auto; }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }

/* Removes the top padding so a section reads as a continuation of the one
   above it rather than a new block. Two stacked sections otherwise add their
   padding together, which on About put roughly 8rem between the lede and
   Kate's photo. Added September 12, 2026. */
.section--flush-top { padding-block-start: 0; }

.section--panel { background: var(--panel); }
.section--bark  { background: var(--bark);  color: var(--shell); }
.section--teal  { background: var(--deep-teal); color: var(--shell); }

/* On dark grounds every heading and link reverses to Shell. */
.section--bark h1, .section--bark h2, .section--bark h3,
.section--teal h1, .section--teal h2, .section--teal h3 { color: var(--shell); }

.section--bark .kicker, .section--teal .kicker { color: var(--blush); }
.section--bark .fine,  .section--teal .fine  { color: var(--shell-70); }
.section--bark a, .section--teal a { color: var(--shell); }

.center { text-align: center; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--shell);
  border-bottom: 1px solid var(--bark-12);
  position: sticky; top: 0; z-index: 50;
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1rem;
}

/* The horizontal lockup lives in the header. The monogram lives in the footer.
   Brand standards section 4: never both on the same surface.

   Sized by HEIGHT, not width. The lockup is 1.54:1, so constraining width
   makes an unreasonably tall header band. Height is the dimension that
   actually controls how the header reads. */
/* The header lockup is split into two images so the wordmark can be sized
   independently of the emblem. Requested by Tim, Aug 1. Both are cut from
   "Logo - horizontal - transparent.png" at its natural 103px centre gap,
   so this is the real wordmark, not a font substitution.

   To make the NAME bigger or smaller, change --wordmark-h only.
   To change the emblem, change --emblem-h only. */
.site-header__logo {
  display: flex; align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  text-decoration: none;
}

.site-header__emblem { height: var(--emblem-h); width: auto; }

/* INTERIM WORDMARK, set as live type. Aug 5.
   The name changed to "Briar & Root" and the logo PNGs still read "and",
   so the header is typeset in Playfair Display until the designer returns
   vector files with a properly drawn ampersand.

   Replace this whole block with an <img> of the real wordmark when those
   files land. See the note in 5 - Website/README.md. */
.site-header__name {
  display: flex; flex-direction: column;
  justify-content: center; gap: 0.18em;
}

.site-header__name b {
  font-family: var(--display); font-weight: 400;
  font-size: var(--wordmark-size); line-height: 1;
  color: var(--bark); letter-spacing: 0.005em;
  white-space: nowrap;
}

.site-header__name span {
  font-family: var(--display); font-weight: 400;
  font-size: calc(var(--wordmark-size) * 0.42);
  line-height: 1; color: var(--bark);
  letter-spacing: 0.34em; text-indent: 0.34em;
  text-transform: uppercase;
}

:root {
  --emblem-h:      clamp(52px, 7.5vw, 84px);
  --wordmark-size: clamp(1.5rem, 3.4vw, 2.375rem);
}

@media (max-width: 800px) {
  :root { --emblem-h: 46px; --wordmark-size: 1.3125rem; }
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }

.nav a {
  font-size: 0.9375rem; font-weight: 500;
  color: var(--bark); text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--sage); }
.nav a[aria-current="page"] { border-bottom-color: var(--seed-gold); }

/* The nav "Book a call" button. Do not delete these two rules.
   `.nav a` (0,1,1) outranks `.btn` (0,1,0) on specificity, so without this the
   button rendered Bark text on a Deep Teal fill: about 1.3:1, effectively
   invisible, on every page. Found live on September 1, 2026. */
.nav .btn { color: var(--shell); border-bottom-color: var(--deep-teal); }
.nav .btn:hover { color: var(--shell); border-bottom-color: var(--bark); }

.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 0.5rem; color: var(--bark); font-family: var(--body);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}

@media (max-width: 800px) {
  .nav__toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--shell); padding: 0.5rem var(--gutter) 1.5rem;
    border-bottom: 1px solid var(--bark-12);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { width: 100%; padding-block: 0.75rem; border-bottom: 1px solid var(--bark-12); }
  .nav .btn { margin-top: 1rem; width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--body); font-weight: 700;
  font-size: 0.9375rem; letter-spacing: 0.04em;
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--deep-teal);
  border-radius: var(--radius);
  background: var(--deep-teal); color: var(--shell);
  text-decoration: none; cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.btn:hover { background: var(--bark); border-color: var(--bark); color: var(--shell); }

.btn--ghost { background: transparent; color: var(--deep-teal); }
.btn--ghost:hover { background: var(--deep-teal); color: var(--shell); }

/* On dark grounds the button inverts to Shell fill with Bark text. */
.section--bark .btn, .section--teal .btn {
  background: var(--shell); color: var(--bark); border-color: var(--shell);
}
.section--bark .btn:hover, .section--teal .btn:hover { background: var(--blush); color: var(--bark); border-color: var(--blush); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { background: var(--shell); padding-block: clamp(3.5rem, 9vw, 6.5rem); }

.hero__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 4.5rem); align-items: center;
}

/* The hero carries the EMBLEM ALONE with the tagline set beneath it.
   No wordmark here: the name is already in the header, and having it twice
   on one screen read as repetitive. Changed Aug 1 at Tim's request.

   The tagline is live TYPE, not baked into the image, so it is readable by
   search engines and screen readers and can be restyled without a designer. */
.hero__mark {
  justify-self: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; text-align: center;
}

.hero__emblem { height: clamp(210px, 27vw, 330px); width: auto; }

/* Playfair roman, Deep Teal on light. Sage would fail contrast here.
   Roman rather than italic: "Grounded in trust. Cultivating care." is a
   declarative line, and italic serif softens it in exactly the wrong
   direction. */
.hero__tagline {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.4; color: var(--deep-teal);
  margin: 0; max-width: 24ch;
  position: relative; padding-top: 1rem;
  /* Split the two lines as evenly as the browser can manage. Ignored by
     older browsers, which then fall back to the nowrap rule below. */
  text-wrap: balance;
}

/* The tagline breaks BETWEEN its two sentences and never inside one.
   "Grounded in trust. Cultivating care." was wrapping after "Cultivating"
   and orphaning the word "care." on a line of its own. Each sentence is
   wrapped in a span in index.html, and nowrap keeps each one whole. */
.hero__tagline span { white-space: nowrap; }

/* Short Sage rule above the tagline. A shape, so Sage is allowed. */
.hero__tagline::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 2px; background: var(--sage);
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__mark { order: -1; }
  .hero__emblem { height: clamp(150px, 36vw, 220px); }
}

/* --------------------------------------------------------------------------
   8. The three numbers — brand standards template B
   -------------------------------------------------------------------------- */

.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }

@media (max-width: 760px) { .numbers { grid-template-columns: 1fr; text-align: center; } }

.number__figure {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1;
  color: var(--shell); margin: 0 0 0.5rem;
}

.number p { margin: 0; color: var(--shell-70); }

/* The single gold dot as the full stop. One per surface — brand standards
   section 2: "Seed Gold is the discipline test." */
.dot::after {
  content: ""; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--seed-gold); margin-left: 0.4rem; vertical-align: 0.15em;
}

/* --------------------------------------------------------------------------
   9. Steps — How It Works
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; margin-top: 3rem; }

.step {
  display: grid; grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: 2.25rem;
  border-top: 1px solid var(--bark-12);
}
.step:last-child { border-bottom: 1px solid var(--bark-12); }

/* Step numerals are TYPE on a light ground, so they take Deep Teal, not Sage.
   Sage on Shell is 2.6:1 and fails. The Sage stays as the rule above. */
.step__num {
  font-family: var(--display); font-size: 1.75rem;
  color: var(--deep-teal); line-height: 1.1;
}

.step h3 { margin-bottom: 0.5rem; }
.step p:last-child { margin-bottom: 0; }

.step__price {
  display: inline-block; font-weight: 700; font-size: 0.875rem;
  letter-spacing: 0.06em; color: var(--deep-teal);
  border: 1px solid var(--sage); border-radius: var(--radius);
  padding: 0.2rem 0.6rem; margin-left: 0.5rem; vertical-align: 0.1em;
}

@media (max-width: 620px) {
  .step { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* --------------------------------------------------------------------------
   10. Cards and lists
   -------------------------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }

.card {
  background: var(--panel);
  border: 1px solid var(--bark-12);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.card p:last-child { margin-bottom: 0; }

.list { list-style: none; padding: 0; margin: 0 0 1.5rem; max-width: var(--measure); }

.list li {
  position: relative; padding-left: 1.75rem; margin-bottom: 0.875rem;
}
/* Sage tick as a shape, never as text. */
.list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sage);
}

.list--dark li::before { background: var(--blush); }

.list--minus li::before {
  background: none; border-top: 2px solid var(--bark-70);
  border-radius: 0; width: 12px; height: 0; top: 0.75em;
}

/* --------------------------------------------------------------------------
   11. Price table
   -------------------------------------------------------------------------- */

.price-table { width: 100%; border-collapse: collapse; margin: 2.5rem 0; }

.price-table th, .price-table td {
  text-align: left; padding: 1.125rem 1rem;
  border-bottom: 1px solid var(--bark-12);
}

.price-table th {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--deep-teal);
}

.price-table td:last-child, .price-table th:last-child { text-align: right; white-space: nowrap; }

.price-table .amount { font-family: var(--display); font-size: 1.375rem; color: var(--bark); }

.price-table tr.total td {
  border-bottom: 0; border-top: 2px solid var(--bark);
  font-weight: 700; padding-top: 1.25rem;
}
.price-table tr.total .amount { font-size: 1.75rem; }

@media (max-width: 620px) {
  .price-table th:nth-child(2), .price-table td:nth-child(2) { display: none; }
}

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--bark-12); margin-top: 2.5rem; }

.faq details { border-bottom: 1px solid var(--bark-12); }

.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.375rem 2.5rem 1.375rem 0; position: relative;
  font-family: var(--display); font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--deep-teal);
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%;
  transform: translateY(-50%);
  /* Glyph, on a light ground. Deep Teal, not Sage, for the same reason. */
  font-family: var(--body); font-size: 1.5rem; color: var(--deep-teal); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }

.faq details > *:not(summary) { margin-bottom: 1.375rem; }

/* --------------------------------------------------------------------------
   13. Form
   -------------------------------------------------------------------------- */

.form { max-width: 640px; margin-top: 2.5rem; }

.field { margin-bottom: 1.5rem; }

.field label {
  display: block; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--deep-teal); margin-bottom: 0.5rem;
}

.field input, .field textarea, .field select {
  width: 100%; font-family: var(--body); font-size: 1rem;
  color: var(--bark); background: var(--white);
  border: 1px solid var(--bark-12); border-radius: var(--radius);
  padding: 0.8125rem 0.9375rem;
}

.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--deep-teal); outline-offset: 1px; border-color: var(--deep-teal);
}

.field textarea { min-height: 130px; resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--bark); color: var(--shell); padding-block: clamp(3rem, 7vw, 4.5rem); }

.site-footer__grid {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(1.5rem, 5vw, 3.5rem); align-items: start;
}

/* Monogram signs the page. Emblem introduced it in the header. */
.site-footer__mark { width: 88px; }

.site-footer a { color: var(--shell); }

/* 🔴 DO NOT DELETE THESE TWO RULES. Fixed September 6, 2026.
   .fine is defined globally as var(--bark-70), which is Bark at 70% opacity. The footer
   background is Bark. So the service-area line ("Based in Warsaw, Indiana. Serving families
   in Fort Wayne, South Bend, Indianapolis...") was rendering Bark on Bark and was INVISIBLE
   on all ten pages, live, for weeks. Only the links showed, because .site-footer a above
   colours anchors Shell.
   This is the same failure as the "Book a call" button: the colour was written correctly in
   the stylesheet but the wrong one won after the cascade. Reading the source does not catch
   it. Look at the rendered page. */
.site-footer .fine { color: var(--shell-70); }
.site-footer .fine strong { color: var(--shell); }

/* Contact block: stacked, each line with a decorative inline SVG icon.
   Chosen by Tim Sept 6 2026, replacing two anchors that ran together on one line with their
   underlines almost touching. The SVGs use stroke="currentColor" so they inherit the Shell
   link colour, which means they cannot drift out of step with the palette. */
.site-footer .contact-icons { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.65rem; }
.site-footer .contact-icons span { display: flex; align-items: center; gap: 0.55rem; }
.site-footer .contact-icons svg { flex: none; opacity: 0.85; }

.site-footer nav { display: flex; flex-direction: column; gap: 0.625rem; }
.site-footer nav a { text-decoration: none; font-size: 0.9375rem; }
.site-footer nav a:hover { color: var(--blush); }

.site-footer__legal {
  border-top: 1px solid var(--shell-20);
  margin-top: 2.5rem; padding-top: 1.75rem;
  font-size: 0.8125rem; color: var(--shell-70); line-height: 1.6;
}
.site-footer__legal p { max-width: 78ch; }

@media (max-width: 800px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   15. Placeholder flag
   Marks copy that cannot go live until an open decision is made.
   Deliberately loud. Search the HTML for "TODO" to find every one.
   -------------------------------------------------------------------------- */

.todo {
  display: inline-block;
  background: repeating-linear-gradient(45deg, #FFF3D6, #FFF3D6 8px, #FFE9B8 8px, #FFE9B8 16px);
  color: #6B4A00;
  border: 1px dashed #B8860B;
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  font-family: var(--body); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.02em;
}

.section--bark .todo, .section--teal .todo { color: #6B4A00; }

/* --------------------------------------------------------------------------
   16. Accessibility
   -------------------------------------------------------------------------- */

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--deep-teal); color: var(--shell);
  padding: 0.75rem 1.25rem; z-index: 100; text-decoration: none;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--deep-teal); outline-offset: 2px; }
.section--bark :focus-visible, .section--teal :focus-visible { outline-color: var(--blush); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   17. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-footer, .btn, .nav__toggle { display: none; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}


/* --------------------------------------------------------------------------
   Portrait. Kate's headshot on the About page. Added September 12, 2026.
   Sized by width, capped at 450px, so the photo never outgrows the text
   measure it sits inside. The hairline is Blush used as a shape, not as type,
   which is what the contrast rule at the top of this file allows.
   -------------------------------------------------------------------------- */

.portrait {
  margin: 0 0 2rem;
  max-width: 450px;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--blush);
}

@media (max-width: 640px) {
  .portrait { max-width: 100%; }
}