/* ============================================================
   Cline Sites v3 — "Ink & Copper"
   Editorial, type-led. Playfair Display headlines, Figtree body.
   Warm ivory paper, near-black ink, single copper accent.
   ============================================================ */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/playfair-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/playfair-italic-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/figtree-var.woff2') format('woff2');
}

:root {
  --paper: #f7f3ec;
  --paper-2: #efe9de;
  --card: #fffdf8;
  --ink: #191611;
  --ink-soft: #3d3830;
  --muted: #6f6759;
  --line: rgba(25, 22, 17, 0.12);
  --line-strong: rgba(25, 22, 17, 0.22);
  --copper: #a8501f;
  --copper-deep: #8a3f15;
  --copper-tint: #f0ddcd;
  --cream: #f7f3ec;
  --cream-muted: rgba(247, 243, 236, 0.72);
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 4px 14px rgba(25, 22, 17, 0.07);
  --shadow-lg: 0 24px 56px rgba(25, 22, 17, 0.14);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
html, body { overflow-x: clip; }
img { max-width: 100%; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;           /* 17px floor for aging eyes */
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* sticky footer: on short pages, main stretches so the footer
     stays pinned to the bottom of the screen */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
main { flex: 1; }

.container { width: min(1120px, 92vw); margin: 0 auto; }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 600;
}
h2 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
h3 { font-size: 1.3rem; line-height: 1.3; }
p  { max-width: 62ch; }

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

::selection { background: var(--copper-tint); color: var(--ink); }

/* ---------- shared section furniture ---------- */
section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 1.1rem;
  max-width: none;   /* exempt from the p readability cap so it centers correctly */
}
.section-head {
  max-width: 720px;
  margin: 0 auto clamp(2.4rem, 5vw, 3.6rem);
  text-align: center;
}
.section-head p { margin: 1rem auto 0; color: var(--muted); font-size: 1.12rem; }

.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cream);
  background: var(--copper);
  border: 1.5px solid var(--copper);
  border-radius: 10px;
  padding: 0.85em 1.7em;
  text-decoration: none;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.btn:hover { background: var(--copper-deep); border-color: var(--copper-deep); transform: translateY(-2px); }
.btn-large { font-size: 1.08rem; padding: 1em 2em; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.btn-text {
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--copper);
  padding-bottom: 2px;
  transition: color 0.2s;
}
.btn-text:hover { color: var(--copper-deep); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 236, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.logo img { width: 44px; height: 44px; display: block; }

.main-nav { display: flex; align-items: center; gap: 1.9rem; }
.main-nav > a:not(.btn) {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink-soft);
  text-decoration: none;
  position: relative;
}
.main-nav > a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.main-nav > a:not(.btn):hover::after { transform: scaleX(1); }
.nav-phone { font-variant-numeric: tabular-nums; white-space: nowrap; }
.main-nav .btn { padding: 0.6em 1.3em; font-size: 0.95rem; }

/* ---------- hero ---------- */
.hero {
  min-height: calc(100svh - 76px);   /* full screen on load, minus sticky header */
  display: flex;
  align-items: center;
  padding: clamp(3rem, 6vw, 5rem) 0;
}

/* Scituate Light photo at near-full strength behind the hero; a faint
   veil plus an ivory text halo keep the type readable, and the bottom
   third fades into the page color so the hero dissolves into the work
   section with no seam */
.hero-photo {
  background:
    linear-gradient(180deg,
      rgba(247, 243, 236, 0) 0%,
      rgba(247, 243, 236, 0) 60%,
      rgba(247, 243, 236, 0.82) 73%,
      #efe9de 86%,
      #efe9de 100%),
    linear-gradient(180deg,
      rgba(22, 36, 47, 0.48) 0%,
      rgba(22, 36, 47, 0.40) 55%,
      rgba(22, 36, 47, 0) 76%),
    url('img/scituate-light.webp') center 58% / cover no-repeat;
}
/* light type on the dark upper zone; a soft dark shadow instead of a glow */
.hero-photo .eyebrow { color: var(--copper-tint); }
.hero-photo .hero-statement { color: rgba(247, 243, 236, 0.88); }
.hero-photo h1 { color: var(--cream); }
.hero-photo h1 em { color: #d98e57; }
.hero-photo .hero-sub { color: var(--cream); }
.hero-photo .eyebrow, .hero-photo .hero-statement, .hero-photo h1, .hero-photo .hero-sub {
  text-shadow: 0 1px 3px rgba(15, 23, 30, 0.45), 0 2px 22px rgba(15, 23, 30, 0.5);
}
/* the trust bar sits on the light faded zone, so it stays ink */
.trust-bar { border-top-color: rgba(25, 22, 17, 0.18); }
@media (max-width: 760px) {
  .hero-photo {
    background:
      linear-gradient(180deg,
        rgba(247, 243, 236, 0) 0%,
        rgba(247, 243, 236, 0) 62%,
        rgba(247, 243, 236, 0.82) 76%,
        #efe9de 88%,
        #efe9de 100%),
      linear-gradient(180deg,
        rgba(22, 36, 47, 0.56) 0%,
        rgba(22, 36, 47, 0.46) 55%,
        rgba(22, 36, 47, 0) 78%),
      url('img/scituate-light.webp') center 58% / cover no-repeat;
  }
}
.hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }

.hero-statement {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 600;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 auto 1.6rem;
}

.hero h1 {
  font-size: clamp(2.9rem, 7.2vw, 5.4rem);
  font-weight: 650;
  letter-spacing: -0.015em;
  margin-bottom: 1.6rem;
}
.hero h1 em { font-style: italic; color: var(--copper); }

.hero-sub {
  font-size: clamp(1.1rem, 1.9vw, 1.28rem);
  color: var(--ink);
  font-weight: 600;
  max-width: 56ch;
  margin: 0 auto 2.4rem;
}

.hero-ctas { display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 2.8rem; }

.trust-bar {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  max-width: 640px;
  margin: 0 auto;
}
.trust-bar li::before { content: '✓ '; color: var(--copper); font-weight: 800; }

/* ---------- work ---------- */
/* no top border: the hero photo fades seamlessly into this section */
.work { background: var(--paper-2); border-bottom: 1px solid var(--line); }

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  max-width: 960px;
  margin: 0 auto;
}
.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.work-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.work-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  background: #e7e1d5;
  border-bottom: 1px solid var(--line);
}
.work-chrome span { width: 8px; height: 8px; border-radius: 50%; background: rgba(25, 22, 17, 0.18); }

.work-shot { aspect-ratio: 3 / 2; overflow: hidden; }
.work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 0.5s var(--ease-out); }
.work-card:hover .work-shot img { transform: scale(1.03); }

.work-meta { padding: 1.1rem 1.25rem 1.25rem; }
.work-meta h3 { font-size: 1.15rem; margin-bottom: 0.2rem; }
.work-meta p { font-size: 0.92rem; color: var(--muted); }
.work-tag {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-deep);
}

.work-note { margin: 2rem auto 0; color: var(--muted); font-size: 0.98rem; text-align: center; }
/* when the note sits inside the laptop walkthrough, tuck it under the caption */
.mac .work-note { margin: 0.5rem auto 0; }

.work-grid.single { grid-template-columns: min(480px, 100%); justify-content: center; }

/* ---------- scroll-scrubbed laptop walkthrough ---------- */
/* Tall track + sticky stage: scrolling through the track drives the
   video's playhead, so the site tour plays at the visitor's own pace */
.scrub-track { height: 280vh; position: relative; margin: clamp(1rem, 3vw, 2rem) 0; }
.scrub-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mac { width: min(880px, 90vw); }
.mac-screen {
  --bezel: clamp(10px, 1.9vw, 20px);
  position: relative;
  background: #15130f;
  border: 1px solid #2b2822;
  border-radius: clamp(10px, 1.6vw, 18px) clamp(10px, 1.6vw, 18px) 0 0;
  padding: var(--bezel) var(--bezel) calc(var(--bezel) + 2px);
  box-shadow: var(--shadow-lg);
}
.mac-cam {
  position: absolute;
  /* stay vertically centered in the bezel at every screen size */
  top: calc(var(--bezel) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(4px, 0.6vw, 6px);
  height: clamp(4px, 0.6vw, 6px);
  border-radius: 50%;
  background: #3a362e;
}
.mac-screen video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 4px;
  background: #15130f;
}
.mac-base {
  height: clamp(12px, 1.8vw, 19px);
  width: 112%;
  margin-left: -6%;
  background: linear-gradient(180deg, #6e6759 0%, #4e483d 60%, #38332a 100%);
  border-radius: 0 0 clamp(8px, 1.4vw, 14px) clamp(8px, 1.4vw, 14px);
  position: relative;
  box-shadow: 0 10px 26px rgba(25, 22, 17, 0.18);
}
.mac-base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12%;
  height: 45%;
  background: rgba(25, 22, 17, 0.30);
  border-radius: 0 0 8px 8px;
}
.mac-caption {
  margin: 1.3rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: none;
}
.mac-caption strong { color: var(--copper-deep); }
@media (max-width: 640px) {
  .scrub-track { height: 240vh; }
  .mac { width: 94vw; }
  .mac-caption { font-size: 0.88rem; padding: 0 1rem; }
}

/* ---------- process ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  counter-reset: step;
}
.step {
  border-top: 2px solid var(--ink);
  padding-top: 1.3rem;
}
.step-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--copper);
  display: block;
  margin-bottom: 0.6rem;
}
.step h3 { margin-bottom: 0.6rem; }
.step p { font-size: 0.98rem; color: var(--muted); }

.process-clarify {
  margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
  background: var(--copper-tint);
  border-left: 3px solid var(--copper);
  border-radius: 0 12px 12px 0;
  padding: 1.4rem 1.8rem;
  max-width: 820px;
}
.process-clarify p { max-width: none; font-size: 1.02rem; color: var(--ink-soft); }

/* ---------- pricing ---------- */
.pricing { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: stretch;
}
.tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2.1rem 1.9rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tier h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.tier-for { font-size: 0.95rem; color: var(--muted); margin-bottom: 1.2rem; }

.price { font-family: var(--serif); font-size: 2.6rem; font-weight: 650; color: var(--ink); line-height: 1; margin-bottom: 0.3rem; }
.price span { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--muted); }
.price-note { font-size: 0.88rem; color: var(--muted); margin-bottom: 1.4rem; }

.tier ul { list-style: none; margin: 0 0 1.8rem; flex: 1; }
.tier li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.tier li:last-child { border-bottom: 0; }
.tier li::before { content: '✓  '; color: var(--copper); font-weight: 800; }

.tier .btn { text-align: center; }

.tier-featured {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.tier-featured h3, .tier-featured .price { color: var(--cream); }
.tier-featured .tier-for, .tier-featured .price span, .tier-featured .price-note { color: var(--cream-muted); }
.tier-featured li { color: var(--cream-muted); border-color: rgba(247, 243, 236, 0.14); }
.tier-featured li strong { color: var(--cream); }

.tier-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--copper);
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.tiers-note {
  margin: 1.8rem auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.98rem;
}

/* care plans */
.care {
  margin-top: clamp(2.8rem, 6vw, 4rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.8rem, 4vw, 2.6rem);
}
.care-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.care-head h3 { font-size: 1.5rem; }
.care-head p { color: var(--muted); font-size: 0.98rem; }

.care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.care-plan { border-top: 2px solid var(--ink); padding-top: 1rem; }
.care-plan h4 { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin-bottom: 0.1rem; }
.care-price { font-weight: 800; color: var(--copper-deep); margin-bottom: 0.5rem; }
.care-plan p { font-size: 0.94rem; color: var(--muted); }

.guarantee {
  margin: clamp(2.4rem, 5vw, 3.2rem) auto 0;
  padding: 1.5rem 1.9rem;
  border-left: 3px solid var(--copper);
  background: var(--copper-tint);
  border-radius: 0 12px 12px 0;
  max-width: 820px;
}
.guarantee p { max-width: none; font-size: 1.05rem; }

/* ---------- about ---------- */
.about-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2.4rem, 6vw, 5rem); align-items: start; }

.about-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.4rem; }
.portrait { border-radius: 50%; border: 3px solid var(--card); box-shadow: var(--shadow-sm); }
.about-text h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.about-text p { margin-bottom: 1.1rem; color: var(--ink-soft); }

.about-card {
  background: var(--ink);
  color: var(--cream-muted);
  border-radius: 16px;
  padding: 1.9rem;
  box-shadow: var(--shadow-lg);
}
.about-card h3 { color: var(--cream); margin-bottom: 1rem; }
.about-card ul { list-style: none; }
.about-card li { padding: 0.6rem 0; border-bottom: 1px solid rgba(247, 243, 236, 0.14); font-size: 0.98rem; }
.about-card li:last-child { border-bottom: 0; }
.about-card li::before { content: '✓  '; color: var(--copper-tint); font-weight: 800; }
.about-card strong { color: var(--cream); }

/* ---------- faq ---------- */
.faq { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq-grid { max-width: 780px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line-strong); padding: 1.1rem 0; }
.faq summary {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--sans); font-size: 1.5rem; color: var(--copper); transition: transform 0.25s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 0.8rem; color: var(--muted); }

/* ---------- final cta ---------- */
.contact {
  background: var(--ink);
  text-align: center;
}
.contact h2 { color: var(--cream); font-size: clamp(2.2rem, 5vw, 3.4rem); }
.contact h2 em { font-style: italic; color: var(--copper-tint); }
.contact .section-sub { color: var(--cream-muted); font-size: 1.15rem; max-width: 54ch; margin: 1.2rem auto 2.4rem; }
.contact-ctas { display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap; }
.contact .btn-ghost { color: var(--cream); border-color: rgba(247, 243, 236, 0.5); }
.contact .btn-ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.contact-alt { margin: 1.6rem auto 0; color: var(--cream-muted); font-size: 1.02rem; max-width: none; }
.contact-alt a { color: var(--cream); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  border-top: 1px solid rgba(247, 243, 236, 0.1);
  color: var(--cream-muted);
  padding: 44px 0 30px;
  font-size: 0.92rem;
  overflow: hidden;
}
.footer-wordmark {
  font-family: var(--serif);
  font-weight: 650;
  font-size: clamp(3.2rem, 12.5vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: rgba(247, 243, 236, 0.08);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  margin-bottom: 1.8rem;
}
.footer-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(247, 243, 236, 0.12); padding-top: 1.4rem; }
.site-footer a { color: var(--cream-muted); }
.site-footer a:hover { color: var(--cream); }
.footer-towns { margin-top: 0.9rem; font-size: 0.82rem; color: rgba(247, 243, 236, 0.4); max-width: none; }

/* ---------- form pages (demo.html / thanks.html) ---------- */
.form-page {
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6rem);
}
/* faint lighthouse emblem watermark behind the page content */
.form-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('img/logo-emblem.png') center clamp(2rem, 8vw, 5rem) / min(58vw, 560px) no-repeat;
  opacity: 0.15;
  pointer-events: none;
}
.form-page > .container { position: relative; }
.form-wrap { max-width: 640px; margin: 0 auto; }
.form-wrap > p { color: var(--muted); margin: 1rem 0 2.2rem; }

/* two columns: pitch left, form right */
.form-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.form-aside h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: 1rem; }
.form-sub { color: var(--muted); margin-bottom: 2.2rem; }

.next-steps { list-style: none; counter-reset: ns; margin: 0 0 2.2rem; }
.next-steps li {
  counter-increment: ns;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.next-steps li::before {
  content: counter(ns, decimal-leading-zero);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--copper);
  line-height: 1.5;
}
.next-steps strong { display: block; color: var(--ink); }
.next-steps span { grid-column: 2; font-size: 0.95rem; color: var(--muted); }

.form-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}
.form-trust li::before { content: '✓ '; color: var(--copper); font-weight: 800; }

@media (max-width: 880px) {
  .form-layout { grid-template-columns: 1fr; }
}

.demo-form { display: grid; gap: 1.2rem; }
.field { display: block; }
.field span { display: block; font-weight: 700; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.4rem; }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.75em 0.9em;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--copper);
  outline-offset: 1px;
  border-color: var(--copper);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-note { font-size: 0.9rem; color: var(--muted); }

.thanks-wrap { max-width: 680px; margin: 0 auto; text-align: center; padding: clamp(4rem, 10vw, 7rem) 0; position: relative; }
/* lighthouse emblem watermark behind the thank-you message */
.thanks-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('img/logo-emblem.png') center 30% / min(70vw, 460px) no-repeat;
  opacity: 0.25;
  pointer-events: none;
}
.thanks-wrap > * { position: relative; }
.thanks-wrap h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1.2rem; }
.thanks-wrap p { margin: 0 auto 1rem; color: var(--muted); }

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .reveal.in { opacity: 1; transform: none; }

  .rise { animation: rise 0.8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 120ms); }
  @keyframes rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .work-grid, .tiers, .care-grid, .steps { grid-template-columns: 1fr 1fr; }
  .about-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .main-nav > a:not(.btn):not(.nav-phone) { display: none; }
  .main-nav { gap: 0.8rem; }
  .logo { font-size: 1.15rem; }
  .nav-phone { font-size: 0.88rem; }
  .main-nav .btn { font-size: 0.85rem; padding: 0.55em 0.95em; }
  .header-inner { height: 64px; }
  .work-grid, .tiers, .care-grid, .steps { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-ctas .btn { width: 100%; text-align: center; }
  .contact-ctas .btn { width: 100%; }
  .footer-inner { flex-direction: column; text-align: center; }
}