/* ===================================================================
   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 everything
           since Tue 10/13/2026 (Mike): 600 for headlines and buttons,
           400 for sentences. Sorts Mill Goudy was the reading face
           before that.
   Sizes   headline (fluid) / section heading 42 / reading 20 /
           interface 18 / small 16. Nothing under 16px.
   Never   all-caps labels, letter-spacing, italics, accent-coloured
           words, numbered boxes, stat rows, gradient glows.
   =================================================================== */

/* Fonts are served with the page (Google Fonts' latin files), so nothing waits on a third party. */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/jost-latin.woff2") format("woff2"); }

: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: var(--font-head);   /* one family; kept so older rules still resolve */

  --fs-h2: clamp(2rem, 3.4vw, 2.625rem);
  --fs-h3: 1.3125rem;
  --fs-read: 1.25rem;
  --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);
  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, "Google Ads Agencies", is 9.71em wide in Jost 600 (Wed 10/14/2026); 10.1cqi leaves 2% slack */
  font-size: clamp(1.75rem, 10.1cqi, 3.875rem);
  line-height: 1.16; letter-spacing: -0.01em;   /* 1.06 let a g on one line touch an f on the next (Mike, Thu 10/8/2026) */
}
.hero h1 .l { display: block; white-space: nowrap; }
.hero .lead { margin-top: 20px; max-width: 34em; font-size: 1.5rem; line-height: 1.55; color: var(--on-teal); }   /* 24px, full cream: easy for older readers (Mike, Sat 10/17/2026) */
.hero .btn--light { display: none; margin-top: 28px; }

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

.clients { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(239, 231, 213, 0.22); }
.clients p { font: 500 1.25rem/1.2 var(--font-head); color: var(--on-teal); 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: 24px; }   /* no line under it since Fri 10/16/2026 (Mike: redundant) */

.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: one column, the form card at the bottom of the page (see .form-slot) */
@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; }
  /* The form card sits at the bottom of the page, in the closing band (moved there by the script after the sticky
     button). The closing band's own button goes while the form is right there. */
  .closing .form-slot:not([hidden]) { margin-top: 28px; }
  .closing .form-slot .form-card h2 { color: var(--teal); }   /* the band's cream heading colour must not reach the card */
  .closing .form-slot:not([hidden]) + .btn { display: none; }
  .form-card .form-intro, .form-foot { font-size: var(--fs-read); }
}
@media (max-width: 640px) {
  :root { --section: 48px; --gutter: 20px; --fs-small: 1.125rem; }   /* reading text keeps 20px and small text goes to 18px on phones (Mike, Fri 10/16/2026: still too small for older readers) */
  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%; }
  .hero .lead { font-size: 1.375rem; }   /* 22px on phones */
  .btn { white-space: normal; padding: 10px 12px; line-height: 1.2; }   /* full-width on phones; "Schedule Your Free Consultation" may take two lines under 375px */
  .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 text under 16px */
  .site-header .container { min-height: 72px; }
  .brand img { height: 52px; }
  .hero { padding-top: 20px; }   /* 24 left the performance-marketing button 1px under the fold at 320px once the lead grew (Fri 10/16/2026) */
  .hero .lead { margin-top: 14px; line-height: 1.35; }
  .hero .btn--light { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sticky-cta { transition: none; } }