/* Two Little Moons Consulting.
   Palette sampled from the logo: the slate moon, the sage moon, and the paper they sit on. */
:root {
  --ink:       #23303f;
  --ink-soft:  #2b3a4a;
  --slate:     #4a5a6b;
  --muted:     #75828f;
  --sage:      #7d9c86;
  --sage-mid:  #a8c0ac;
  --sage-pale: #dde7de;
  --sage-wash: #eef3ee;
  --paper:     #fbfcfb;
  --band:      #f3f6f3;
  --line:      #e2e8e3;
  --white:     #fff;
  --wrap:      1160px;
  --r:         16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.7 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.14; letter-spacing: -0.028em; margin: 0 0 .55em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 5vw, 3.55rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.55rem); }
p  { margin: 0 0 1.1rem; }
em { font-style: normal; color: var(--sage); }
a  { color: var(--ink-soft); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.45rem, 5vw, 2rem); }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--white); padding: .7rem 1rem; z-index: 60; }
.skip:focus { left: 0; }

/* ───────── header ───────── */
.site {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem clamp(1.45rem, 5vw, 2.6rem);
  background: rgba(251, 252, 251, .9);
  backdrop-filter: saturate(150%) blur(10px);
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.brand img { display: block; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wm-line {
  font-size: 1.62rem; font-weight: 600; letter-spacing: -0.035em; color: var(--ink);
}
.wm-line em { color: var(--sage-mid); font-weight: 600; }
.wm-sub {
  font-size: .62rem; letter-spacing: .42em; text-transform: lowercase;
  color: var(--slate); margin-top: .34rem; padding-left: .12em;
}
.brand.small .wm-line { font-size: 1.1rem; }
.brand.small .wm-sub { font-size: .5rem; letter-spacing: .34em; margin-top: .25rem; }

.site nav { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 2rem); }
.site nav a { text-decoration: none; font-size: .97rem; font-weight: 500; color: var(--slate); }
.site nav a:hover, .site nav a.here { color: var(--sage); }
.site nav a.pill:hover { color: var(--white); }

.pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .82rem 1.6rem; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: .98rem; font-weight: 550; text-decoration: none;
  transition: transform .15s ease, background .15s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill.dark { background: var(--ink); color: var(--white) !important; }
.pill.dark:hover { background: var(--ink-soft); }
.pill.sage { background: var(--sage); color: var(--white) !important; }
.pill.sage:hover { background: #6d8c76; }
.pill.wide { width: 100%; justify-content: center; margin-top: .4rem; }
.arw { font-size: 1.05em; line-height: 1; }

.menu-toggle, .burger { display: none; }

/* ───────── hero ───────── */
.hero { position: relative; overflow: hidden; padding-top: clamp(2rem, 5vw, 3.4rem); }
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; padding-bottom: clamp(6rem, 13vw, 9.5rem);
}
.hero h1 { max-width: 15ch; }
.lede { font-size: 1.1rem; color: var(--slate); max-width: 44ch; margin-bottom: 1.9rem; }

.hero-art { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.6rem); }
.hero-art img { width: min(320px, 62%); height: auto; }

.kicker {
  font-size: .74rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--slate); line-height: 2.1; margin: 0; white-space: nowrap;
}
.kicker .rule { display: block; width: 44px; height: 1px; background: var(--sage-mid); margin-top: .9rem; }
.mobile-only { display: none; }

.waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; display: block; z-index: 0; }
.hero .waves { height: clamp(140px, 19vw, 250px); }
.cta-waves { height: 100%; top: 0; }

/* ───────── pillars ───────── */
.pillars { background: var(--band); padding: clamp(2.6rem, 5vw, 4rem) 0; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.pillar { text-align: center; padding: .4rem clamp(.8rem, 2.5vw, 2.2rem); }
.pillar + .pillar { border-left: 1px solid var(--line); }
.badge {
  width: 66px; height: 66px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--sage-pale); color: var(--sage);
}
.pillar h2 { font-size: 1.16rem; letter-spacing: -0.01em; margin-bottom: .45rem; }
.pillar p { color: var(--slate); font-size: .96rem; margin: 0; }

/* ───────── how we help ───────── */
.help { padding: clamp(3.2rem, 7vw, 5.6rem) 0; }
.help-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1.8rem, 5vw, 4.2rem); align-items: center; }

.shot { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; background: var(--sage-wash); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.shot figcaption {
  position: absolute; left: 0; right: 0; top: 0;
  padding: clamp(1rem, 3vw, 1.7rem) clamp(1rem, 3vw, 1.7rem) clamp(2.2rem, 5vw, 3rem);
  color: var(--ink);
  /* The photo's window blows out exactly where the note sits, so it gets a scrim
     rather than a guess about which corner will be dark enough. */
  background: linear-gradient(to bottom, rgba(255, 255, 255, .88), rgba(255, 255, 255, 0));
}
.hand {
  display: block; font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55;
  font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Apple Chancery",
               "URW Chancery L", "Comic Sans MS", cursive;
}
.shot .rule { display: block; width: 46px; height: 1.5px; background: var(--ink); opacity: .55; margin-top: .7rem; }

.eyebrow {
  font-size: .76rem; font-weight: 650; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sage); margin-bottom: .75rem;
}
.eyebrow.centred { text-align: center; }
.help-copy p { color: var(--slate); }
.ticks { list-style: none; margin: 1.4rem 0 1.9rem; padding: 0; display: grid; gap: .72rem; }
.ticks li { position: relative; padding-left: 2.15rem; color: var(--ink); font-size: .99rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ───────── contact ───────── */
.cta { position: relative; background: var(--band); padding: clamp(3.6rem, 8vw, 5.6rem) 0 clamp(2.6rem, 6vw, 4rem); overflow: hidden; }
.cta-inner { position: relative; z-index: 2; text-align: center; }
.contact { background: var(--white); padding: clamp(3rem, 7vw, 5rem) 0 clamp(3.4rem, 7vw, 5rem); }
.contact-inner { text-align: center; }
.cta h2 { margin-bottom: .5rem; }
.cta-lede { color: var(--slate); max-width: 54ch; margin: 0 auto 1.9rem; }

form {
  max-width: 560px; margin: 0 auto; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  box-shadow: 0 1px 2px rgba(35, 48, 63, .04), 0 22px 46px -30px rgba(35, 48, 63, .4);
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.field { margin-bottom: .95rem; }
label { display: block; font-size: .87rem; font-weight: 550; margin-bottom: .35rem; }
input, select, textarea {
  width: 100%; padding: .72rem .9rem; font: inherit; font-size: .96rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 11px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--sage); background: var(--white);
  box-shadow: 0 0 0 3px rgba(125, 156, 134, .22);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #b4553f; }
textarea { resize: vertical; }
.form-note { margin: .85rem 0 0; font-size: .89rem; color: var(--muted); min-height: 1.2em; }
.form-note.err { color: #a34a35; }
.form-note.ok { color: var(--sage); }
.or { margin: .55rem 0 0; font-size: .89rem; color: var(--muted); text-align: center; }

.cta-mark {
  display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem;
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
}
.cta-mark svg { width: clamp(76px, 8vw, 104px); height: auto; }
.cta-mark .kicker { text-align: left; }
.cta-mark .kicker { line-height: 1.95; }

/* ───────── footer ───────── */
.site-footer { background: var(--white); border-top: 1px solid var(--line); }
.foot { padding: 2.4rem clamp(1.45rem, 5vw, 2rem); display: grid; gap: .5rem; justify-items: start; }
.muted { color: var(--muted); font-size: .92rem; margin: 0; }
.muted.small { font-size: .85rem; }

/* ───────── responsive ─────────
   The reference design does NOT simply stack on a phone. Three things it keeps, and
   that a naive stack would lose: the moon sits BESIDE the heading rather than above it,
   the three pillars stay three across, and the photo keeps the same gutter as the text
   instead of running to the screen edge. */

@media (max-width: 900px) {
  .hero { padding-top: clamp(.9rem, 4vw, 2.2rem); }
  .hero-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: clamp(4rem, 16vw, 6rem); }

  /* Out of the grid and pinned to the top right, so the heading flows beside it and the
     paragraph below runs the full width - which is what the reference does. */
  .hero-art {
    position: absolute; top: clamp(.6rem, 3vw, 2rem); right: 0;
    width: auto; z-index: 1; pointer-events: none;
  }
  .hero-art img { width: clamp(112px, 31vw, 170px); }
  .desk-only { display: none; }
  .mobile-only { display: block; margin-bottom: .85rem; line-height: 1.75; }

  /* Only the kicker and the heading make room for the moon. */
  /* Sized together: the heading takes the width the moon leaves, and the type is set so
     "Practical support" still holds its own line the way the reference does. The moon is
     kept short enough to finish above the paragraph rather than sitting across it. */
  .hero-copy .kicker, .hero h1 { max-width: 64%; }
  .hero h1 { font-size: clamp(1.46rem, 6.6vw, 2.4rem); }
  .lede { font-size: 1.02rem; max-width: none; margin-bottom: 1.5rem; }

  .help-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .row { grid-template-columns: 1fr; }
}

/* Three across, all the way down. They only get narrower. */
@media (max-width: 860px) {
  .pillars { padding: clamp(1.8rem, 6vw, 3rem) 0; }
  .pillar-grid { grid-template-columns: repeat(3, 1fr); }
  .pillar { padding: .2rem clamp(.35rem, 1.8vw, 1rem); }
  .badge { width: clamp(46px, 13vw, 58px); height: clamp(46px, 13vw, 58px); margin-bottom: .8rem; }
  .badge svg { width: 21px; height: 21px; }
  .pillar h2 { font-size: clamp(.88rem, 3.5vw, 1.02rem); line-height: 1.25; margin-bottom: .4rem; }
  .pillar p { font-size: clamp(.78rem, 3vw, .88rem); line-height: 1.5; }
}

@media (max-width: 600px) {
  .help { padding: clamp(2.2rem, 8vw, 3.4rem) 0; }
  .shot img { aspect-ratio: 16 / 10; }
  .help-copy h2 { font-size: clamp(1.55rem, 7vw, 2rem); }
  .cta { padding: clamp(2.6rem, 9vw, 4rem) 0 clamp(2.2rem, 7vw, 3.5rem); }
  .cta h2 { font-size: clamp(1.6rem, 7.4vw, 2.1rem); }
  .cta-mark { flex-direction: column; gap: .7rem; }
  .cta-mark .kicker { text-align: center; }
  .cta-mark .kicker .rule { margin-inline: auto; }
}

/* Hamburger: a checkbox toggle, so the menu needs no JavaScript. */
@media (max-width: 800px) {
  .burger { display: grid; gap: 5px; cursor: pointer; padding: .55rem .2rem; }
  .burger span { display: block; width: 26px; height: 2px; background: var(--ink); border-radius: 2px; }
  .site nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: .4rem clamp(1.45rem, 5vw, 2.6rem) 1.1rem;
    display: none;
  }
  .menu-toggle:checked ~ nav { display: flex; }
  .site nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .site nav a.pill { margin-top: .9rem; justify-content: center; border-bottom: 0; }
  .wm-line { font-size: clamp(1.18rem, 5.4vw, 1.5rem); }
  .wm-sub { font-size: clamp(.48rem, 2vw, .58rem); letter-spacing: .38em; }
  .brand img { width: 52px; height: 52px; }
}