/* ===================================================================
   Lighthouse Growth Consulting: paid search landing pages
   Shared by ppc/index.html and search/index.html (built by
   tools/build_landing_pages.py; edit the script, not the pages)

   BRAND SYSTEM (matched to lighthousegrowth.co, Mon 9/28/2026)
   Colour  cream #EFE7D5 and teal #095859. Nothing else. The button is
           teal on cream, or cream on teal.
   Type    Jost (free Futura, same as the pitch decks) for headlines,
           buttons, labels and small print. Sorts Mill Goudy for
           anything you read in sentences, as on the main site.
   Sizes   headline (fluid) / section heading 42 / reading 21 /
           interface 18 / small 16. Nothing under 16px.
   Never   all-caps labels, letter-spacing, italics, accent-coloured
           words, numbered boxes, stat rows, gradient glows.
   =================================================================== */

:root {
  --cream: #EFE7D5;
  --paper: #F8F4EA;
  --teal: #095859;
  --teal-deep: #073F40;
  --ink: #0B3B3C;
  --ink-soft: #3A5E5F;
  --line: rgba(9, 88, 89, 0.18);
  --on-teal: #EFE7D5;
  --on-teal-soft: rgba(239, 231, 213, 0.84);
  --error: #A8402C;

  --font-head: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --font-read: 'Sorts Mill Goudy', Georgia, serif;

  --fs-h2: clamp(2rem, 3.4vw, 2.625rem);
  --fs-h3: 1.3125rem;
  --fs-read: 1.3125rem;
  --fs-ui: 1.125rem;
  --fs-small: 1rem;

  --container: 1200px;
  --gutter: 32px;
  --section: 64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font: 400 var(--fs-read)/1.6 var(--font-read);
  font-variant-numeric: lining-nums;   /* Goudy defaults to old-style figures; "19" read as "ıg" */
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; color: var(--teal); }
h2 { font-size: var(--fs-h2); line-height: 1.15; margin-bottom: 16px; text-wrap: balance; }
h3 { font-size: var(--fs-h3); line-height: 1.3; margin-bottom: 6px; }
p + p { margin-top: 16px; }
p, li { text-wrap: pretty; }          /* no single word left alone on the last line */
h3, .byline span, .form-intro, .faq summary { text-wrap: balance; }
.nowrap { white-space: nowrap; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px; white-space: nowrap; flex: none;
  font: 600 var(--fs-ui)/1 var(--font-head);
  text-decoration: none; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--teal); color: var(--cream);
  transition: background 0.15s ease;
}
.btn:hover { background: var(--teal-deep); }
.btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--light { background: var(--cream); color: var(--teal); }
.btn--light:hover { background: #fff; }
.btn--light:focus-visible { outline-color: var(--cream); }
.btn--block { width: 100%; }

/* Header */
.site-header { background: var(--cream); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 116px; }
.brand img { height: 96px; width: auto; }
.site-header .contact { font: 500 var(--fs-small)/1 var(--font-head); color: var(--teal); text-decoration: none; }
.site-header .contact:hover { text-decoration: underline; }

/* Hero: headline column beside the form, both top-aligned */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--teal); color: var(--on-teal-soft);
  padding: 48px 0 64px;
}
.hero::before {           /* the lighthouse from the main site, faint, behind the copy */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 40px; bottom: -30px; right: max(-40px, calc(50% - 780px)); width: 300px;
  background: url("../assets/brand/lighthouse-mark-sm.png") no-repeat right bottom / contain;
  opacity: 0.08;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(420px, 38%, 470px);
  column-gap: clamp(48px, 5.5vw, 88px);
  align-items: start;
}
.hero-copy { container-type: inline-size; padding-top: 4px; }
.hero h1 {
  color: var(--on-teal);
  /* longest line, "turn into customers.", is 8.97em wide in Jost 600 */
  font-size: clamp(1.75rem, 10.6cqi, 3.875rem);
  line-height: 1.06; letter-spacing: -0.01em;
}
.hero h1 .l { display: block; white-space: nowrap; }
.hero .lead { margin-top: 24px; max-width: 34em; color: var(--on-teal-soft); }
.hero .btn--light { display: none; margin-top: 28px; }

.byline { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.byline img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(239, 231, 213, 0.5); }
.byline strong { display: block; font: 600 var(--fs-ui)/1.3 var(--font-head); color: var(--on-teal); }
.byline span { display: block; font: 400 var(--fs-small)/1.45 var(--font-head); color: var(--on-teal-soft); }

.clients { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(239, 231, 213, 0.22); }
.clients p { font: 500 var(--fs-small)/1 var(--font-head); color: var(--on-teal-soft); margin-bottom: 22px; }
.clients ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; align-items: center; justify-items: center; }
.clients img { height: 36px; width: auto; max-width: 100%; object-fit: contain; opacity: 0.92; }
.clients img.tall { height: 50px; }
.clients img[alt^="H&"] { height: 42px; }
.clients img.wide { height: 28px; }

/* Form */
.form-card {
  container-type: inline-size; position: relative; margin-top: 8px;
  background: var(--paper); color: var(--ink);
  border-radius: 4px; padding: 32px 32px 26px;
  box-shadow: 0 28px 56px -28px rgba(0, 0, 0, 0.55);
}
.form-card h2 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 4px; }
.form-card .form-intro { font-size: 1.125rem; line-height: 1.5; color: var(--ink-soft); margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@container (max-width: 340px) { .field-row { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field label { display: block; font: 500 var(--fs-small)/1.3 var(--font-head); color: var(--teal); margin-bottom: 6px; }
.field label .opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; height: 50px; padding: 0 14px;
  font: 400 var(--fs-ui)/1.3 var(--font-head); color: var(--ink);
  background: #fff; border: 1px solid #6F8F90; border-radius: 3px;   /* 3.5:1, meets WCAG 1.4.11 */
}
.field textarea { height: auto; min-height: 76px; padding: 12px 14px; resize: none; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23095859' stroke-width='2'/></svg>") no-repeat right 14px center;
}
.field select:invalid { color: var(--ink-soft); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(9, 88, 89, 0.2); }
.field.is-invalid input, .field.is-invalid select { border-color: var(--error); }
.field .error { display: none; font: 400 var(--fs-small)/1.35 var(--font-head); color: var(--error); margin-top: 6px; }
.field.is-invalid .error { display: block; }
.form-card .btn { margin-top: 6px; }
.form-foot { margin-top: 12px; text-align: center; font-size: 1.125rem; line-height: 1.4; color: var(--ink-soft); }
.form-notice { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 3px; background: var(--cream); font: 400 var(--fs-small)/1.4 var(--font-head); color: var(--teal); }
.form-notice.is-visible { display: block; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Reading sections */
.section { padding: var(--section) 0; }
.section + .section { border-top: 1px solid var(--line); }
.reading { max-width: 700px; margin: 0 auto; }
.problems { list-style: none; margin-top: 24px; }
.problems li { padding: 20px 0; border-top: 1px solid var(--line); }
.problems li:last-child { border-bottom: 1px solid var(--line); }
.steps { list-style: none; counter-reset: step; margin-top: 0; }
.steps li { counter-increment: step; position: relative; padding: 8px 0 8px 36px; }
.steps li::before { content: counter(step) "."; position: absolute; left: 0; top: 8px; font: 600 var(--fs-h3)/1.6 var(--font-head); color: var(--teal); }
.section .btn { margin-top: 28px; }

.founder { background: var(--paper); }
.founder .container > .reading { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: center; }
.founder .portrait img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; object-position: center 22%; }
.founder .more a { color: var(--teal); text-underline-offset: 4px; }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative; padding: 18px 48px 18px 0;
  font: 600 var(--fs-h3)/1.35 var(--font-head); color: var(--teal);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(45deg); transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details p { padding: 0 0 20px; }

.closing { background: var(--teal); color: var(--on-teal-soft); padding: 64px 0; }
.closing .btn { margin-top: 24px; }
.closing h2 { color: var(--on-teal); margin-bottom: 10px; }

.site-footer { padding: 32px 0 40px; font: 400 var(--fs-small)/1.5 var(--font-head); color: var(--teal); }
.site-footer .container { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; }
.site-footer p + p { margin-top: 6px; }
.site-footer .badge img { height: 64px; width: auto; }

/* Sticky button on phones */
.sticky-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--teal);
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.4);
  transform: translateY(110%); transition: transform 0.25s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }

/* Below 960px the form moves under the headline column */
@media (max-width: 959px) {
  :root { --section: 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .hero-copy, .form-card { max-width: 640px; }
  .hero::before { display: none; }
  .hero .btn--light { display: inline-flex; }
  .form-card { margin-top: 0; }

}
@media (max-width: 640px) {
  :root { --section: 48px; --gutter: 20px; --fs-read: 1.1875rem; }
  body { padding-bottom: 84px; }
  .site-header .container { min-height: 96px; }
  .brand img { height: 76px; }
  .site-header .contact { display: none; }
  .hero { padding: 40px 0 48px; }
  .hero .btn--light { width: 100%; }
  .clients ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 16px; }
  .clients li { flex: 0 0 calc((100% - 32px) / 3); display: flex; justify-content: center; }
  .clients img { height: 30px; }
  .clients img.tall { height: 42px; }
  .clients img[alt^="H&"] { height: 36px; }
  .clients img.wide { height: 19px; }
  .form-card { padding: 28px 20px 22px; }
  .closing { padding: 48px 0; }
  .closing .btn, .section .btn { width: 100%; }
  .founder .container > .reading { grid-template-columns: 1fr; gap: 24px; }
  .founder .portrait img { width: 160px; height: 160px; }
  .site-footer .container { flex-direction: column; align-items: flex-start; }
  .site-footer .dot { display: none; }
  .site-footer .item { display: block; }
  .sticky-cta { display: block; }
}
@media (max-width: 360px) {   /* small phones: keep the hero button above the fold without shrinking text */
  .site-header .container { min-height: 80px; }
  .brand img { height: 60px; }
  .hero { padding-top: 32px; }
  .hero .lead { margin-top: 18px; }
  .hero .btn--light { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sticky-cta { transition: none; } }