/* ==========================================================================
   Tidy Time — tidytimehelps.com
   Single stylesheet, no build step, no external requests.
   Palette sampled directly from the watercolor logo.
   ========================================================================== */

:root {
  /* Sampled from logo */
  --cream:      #FBF9F4;
  --cream-2:    #F4EFE4;
  --cream-3:    #EBE3D3;
  --sage:       #7C8F5B;
  --sage-dark:  #5C6C41;
  --sage-light: #A3B486;
  --teal:       #7FA3A3;
  --teal-dark:  #5A8383;
  --tan:        #D8C9AC;
  --ink:        #332D26;
  /* Darkened from the logo's mid-brown to clear WCAG AA (7.4:1 on cream).
     The primary audience is 45-70; low-contrast grey body text is the single
     most common readability failure on service sites aimed at this group. */
  --ink-soft:   #574E43;
  --white:      #FFFFFF;

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --measure: 68ch;
  --shell: 1120px;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(62, 54, 45, .06), 0 4px 12px rgba(62, 54, 45, .05);
  --shadow-md: 0 2px 4px rgba(62, 54, 45, .06), 0 12px 32px rgba(62, 54, 45, .09);
}

/* --------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  /* 18px base, rising to 19px on wide screens. Deliberately larger than the
     15-16px web default: this audience reads on phones, often without
     reading glasses to hand. */
  font-size: 1.125rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1100px) { body { font-size: 1.1875rem; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-dark); text-underline-offset: 3px; }
a:hover { color: var(--sage-dark); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.35rem); }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
p  { margin: 0 0 1.15em; max-width: var(--measure); }

.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-dark);
  margin: 0 0 .9rem;
}
.lede { font-size: 1.2rem; color: var(--ink-soft); line-height: 1.65; }

/* ------------------------------------------------------------- Utility -- */
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--tint { background: var(--cream-2); }
.section--sage { background: var(--sage-dark); color: var(--cream); }
.section--sage h2, .section--sage h3 { color: var(--cream); }
.center { text-align: center; }
.center p { margin-inline: auto; }
.narrow { max-width: 720px; margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--sage-dark); color: var(--white);
  padding: .7rem 1.1rem; border-radius: 0 0 8px 8px; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; color: var(--white); }

:focus-visible {
  outline: 3px solid var(--teal-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- Buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
  /* min-height 52px — comfortably above the 44px WCAG target size, sized for
     thumbs rather than mouse cursors. */
  min-height: 52px;
  padding: .8rem 1.75rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--sage-dark); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #4E5C37; color: var(--white); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--tan); }
.btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--sage); }
.btn--onsage { background: var(--cream); color: var(--sage-dark); }
.btn--onsage:hover { background: var(--white); color: var(--sage-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.center .btn-row { justify-content: center; }

/* -------------------------------------------------------------- Header -- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 249, 244, .92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--cream-3);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 0;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--serif); font-size: 1.32rem; color: var(--sage-dark); }
.brand__tag { font-size: .7rem; letter-spacing: .07em; color: var(--ink-soft); }

.nav-toggle {
  display: none; background: var(--white); border: 1.5px solid var(--tan);
  border-radius: 10px; padding: .7rem 1rem; cursor: pointer; color: var(--ink);
  font-size: 1.05rem; font-weight: 600; min-height: 50px;
  align-items: center; gap: .5rem;
}
.site-nav ul {
  list-style: none; display: flex; align-items: center; gap: .2rem; margin: 0; padding: 0;
}
.site-nav a {
  display: flex; align-items: center; min-height: 44px;
  padding: .5rem .8rem; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 500;
}
.site-nav a:hover { background: var(--cream-2); color: var(--sage-dark); }
.site-nav a[aria-current="page"] { color: var(--sage-dark); background: var(--cream-2); font-weight: 600; }

/* `.site-nav a` (0,1,1) out-specifies `.btn--primary` (0,1,0), so without
   these rules the header CTA inherits dark ink on dark green — about 1.7:1,
   effectively unreadable. Restate the button colours at nav specificity.
   The [aria-current] rule needs overriding too: on the contact page the CTA
   is the current page and would otherwise turn cream-on-cream. */
.site-nav a.btn--primary,
.site-nav a.btn--primary[aria-current="page"] {
  color: var(--white);
  background: var(--sage-dark);
  margin-left: .5rem;
}
.site-nav a.btn--primary:hover { background: #4E5C37; color: var(--white); }

/* The nav collapses early (1160px, not the usual 768px) because seven links at
   18px simply do not fit on a tablet without shrinking or wrapping. Better to
   show a large, obvious Menu button than tiny or two-line links. */
@media (max-width: 1160px) {
  .nav-toggle { display: inline-flex; }
  .brand__tag { display: none; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-bottom: 1px solid var(--cream-3);
    box-shadow: var(--shadow-md); padding: .75rem 0 1.35rem;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: .1rem;
    width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
  .site-nav a {
    min-height: 56px; padding: .9rem 1rem; font-size: 1.15rem;
    border-bottom: 1px solid var(--cream-2);
  }
  .site-nav li:last-child a { border-bottom: 0; }
  .site-nav .btn { margin: .8rem 0 0; width: 100%; }
}

/* On phones, stack calls-to-action full width — a wide target is far easier
   to hit one-handed than two buttons sharing a row. */
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* ---------------------------------------------------------------- Hero -- */
.hero {
  position: relative;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(127, 163, 163, .18), transparent 62%),
    radial-gradient(760px 400px at 6% 108%, rgba(124, 143, 91, .16), transparent 60%),
    var(--cream);
  overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.hero__mark {
  justify-self: center;
  width: min(100%, 380px);
  filter: drop-shadow(0 18px 40px rgba(62, 54, 45, .12));
}
.hero__trust {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--cream-3);
  font-size: 1rem; color: var(--ink-soft);
}
.hero__trust span { display: flex; align-items: center; gap: .5rem; }
.hero__trust span::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--sage); flex: none;
}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__mark { order: -1; width: min(100%, 260px); }
}

/* --------------------------------------------------------------- Cards -- */
.grid { display: grid; gap: 1.4rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Contact page: form beside a sidebar, stacking to one column on tablets down.
   Explicit media query rather than auto-fit, because the two columns are
   deliberately unequal and must collapse in a fixed order (form first). */
.grid--form { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .grid--form { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--cream-3);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  width: 44px; height: 44px; margin-bottom: 1rem;
  display: grid; place-items: center;
  border-radius: 12px; background: var(--cream-2);
  color: var(--sage-dark);
}
.card__icon svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------- Steps -- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: step; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start;
  background: var(--white); border: 1px solid var(--cream-3);
  border-radius: var(--radius); padding: 1.5rem 1.6rem;
}
.step__num {
  counter-increment: step;
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--sage-dark); color: var(--cream);
  font-family: var(--serif); font-size: 1.15rem;
}
.step__num::before { content: counter(step); }
.step h3 { margin-bottom: .3em; }
.step p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- Checklist -- */
.ticks { list-style: none; margin: 0 0 1.15em; padding: 0; display: grid; gap: .6rem; max-width: var(--measure); }
.ticks li { display: grid; grid-template-columns: 1.35rem 1fr; gap: .7rem; align-items: start; }
.ticks li::before {
  content: ""; margin-top: .48em;
  width: 1.35rem; height: .55rem;
  border-left: 2.5px solid var(--sage); border-bottom: 2.5px solid var(--sage);
  transform: rotate(-45deg) scale(.62); transform-origin: center;
}
.section--sage .ticks li::before { border-color: var(--sage-light); }

/* ---------------------------------------------------------- Pull quote -- */
.quote {
  border-left: 3px solid var(--tan);
  padding: .4rem 0 .4rem 1.6rem;
  font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.45; color: var(--ink); max-width: 40ch;
}

/* ----------------------------------------------------------- Area list -- */
.areas { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem .9rem; }
.areas li {
  padding: .55rem .85rem; background: var(--white);
  border: 1px solid var(--cream-3); border-radius: 8px; font-size: .95rem;
}

/* ----------------------------------------------------------------- FAQ -- */
.faq { display: grid; gap: .8rem; max-width: 820px; }
.faq details {
  background: var(--white); border: 1px solid var(--cream-3);
  border-radius: var(--radius); padding: .35rem 1.4rem;
}
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.25rem 1.15rem 0;
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.35;
  min-height: 56px; display: flex; align-items: center; position: relative;
}
.faq summary:hover { color: var(--sage-dark); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .2rem; top: 1.5rem;
  width: .6rem; height: .6rem;
  border-right: 2px solid var(--sage); border-bottom: 2px solid var(--sage);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > *:not(summary) { padding-bottom: .4rem; }

/* ---------------------------------------------------------------- Form -- */
.form-wrap {
  background: var(--white); border: 1px solid var(--cream-3);
  border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .4rem; }
.field .hint { display: block; font-weight: 400; color: var(--ink-soft); font-size: .87rem; margin-top: .15rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--cream-3);
  border-radius: 10px; padding: .75rem .9rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal); background: var(--white);
}
.field textarea { min-height: 150px; resize: vertical; }
.field--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 620px) { .field--2 { grid-template-columns: 1fr; } }
/* When one field in a pair has a hint line and its neighbor doesn't, the
   input boxes drift out of alignment. Flex each field and push the control
   to the bottom so the boxes always sit on the same line. */
.field--2 .field { display: flex; flex-direction: column; }
.field--2 .field input,
.field--2 .field select { margin-top: auto; }

/* File inputs */
.field input[type="file"] { padding: .55rem .6rem; background: var(--white); }
.field input[type="file"]::file-selector-button {
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--ink);
  background: var(--cream-2); border: 1px solid var(--tan); border-radius: 8px;
  padding: .45rem .9rem; margin-right: .8rem; cursor: pointer;
}
.form-error { font-size: .95rem; font-weight: 600; color: #8F2D2D; }
.form-note { font-size: .9rem; color: var(--ink-soft); }
/* Fine print (privacy notes): deliberately quieter than body text, but kept
   at ~4.6:1 contrast so it stays legible for older eyes. */
.fine-print { font-size: .875rem; color: #857A6C; }

/* --------------------------------------------------------------- CTA -- */
.cta-band { text-align: center; }
.cta-band p { margin-inline: auto; }

/* -------------------------------------------------------------- Footer -- */
.site-footer {
  background: var(--cream-2);
  border-top: 1px solid var(--cream-3);
  padding: 3.25rem 0 2rem;
  font-size: 1.05rem;
}
/* Footer links get a generous tap height, but the brand lockup keeps its own
   layout — hence the :not() rather than a blanket rule. */
.site-footer ul a { display: inline-flex; align-items: center; min-height: 42px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.25rem; }
.site-footer h4 {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sage-dark); margin-bottom: .85rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--sage-dark); text-decoration: underline; }
.site-footer p { color: var(--ink-soft); }
.site-footer__base {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cream-3);
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
  color: var(--ink-soft); font-size: .88rem;
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ------------------------------------------------------------ Page top -- */
.page-head {
  padding: clamp(2.75rem, 6vw, 4.25rem) 0 clamp(1.75rem, 4vw, 2.75rem);
  background:
    radial-gradient(700px 340px at 88% -20%, rgba(127, 163, 163, .16), transparent 60%),
    var(--cream);
}
.page-head p { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; }

/* --------------------------------------------------------- Soft reveal -- */
/* Scoped to .js so that with JavaScript disabled — or if main.js fails to
   load — every section renders at full opacity instead of vanishing.
   Search crawlers and no-JS visitors must never see a blank page. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }