/* ============================================================
   LakeLights — landing page styles
   Mobile-first. No frameworks, no build step.
   Principle: luxury through restraint and precision. Hairlines,
   2px corners, one warm accent, very little movement.

   Contents
   01. Design tokens
   02. Reset & base
   03. Layout helpers
   04. Buttons
   05. Header
   06. Hero
   07. Image frames
   08. Sections & headings
   08b. Proof line
   08c. Offer
   09. Service cards
   10. Work gallery
   11. Value props
   12. How it works
   13. Form
   14. Footer
   15. Reveal animation
   16. Larger screens
   ============================================================ */


/* 01. DESIGN TOKENS -----------------------------------------
   Change the brand colors here and they update everywhere.   */
:root {
  /* Brand palette */
  --forest-deep: #16241C;               /* header, hero, dark sections, footer */
  --forest:      #22352A;               /* secondary dark: proof line, dark frames */
  --cream:       #F4EFE4;               /* light sections */
  --cream-card:  #FAF6EE;               /* cards and inputs, one step lighter than cream */
  --ink:         #1E211B;               /* headings and body text on cream */
  --brass:       #C2A15B;               /* primary accent: buttons, eyebrows on dark */
  --brass-line:  rgba(194,161,91,0.22); /* every hairline rule and divider */

  /* Derived tones (keep these in step with the palette above) */
  --brass-hover: #B08F4A;               /* primary button hover: slightly deeper brass */
  --brass-text:  #7A5F24;               /* brass for TEXT on cream; plain --brass is too light there (2.1:1), this is 5.3:1 */
  --ink-soft:    #4A4E44;               /* secondary text on cream (7.4:1) */
  --ink-mute:    #6F7367;               /* hints and fine print on cream (4.6:1) */
  --on-dark:     #F4EFE4;               /* headings on forest */
  --on-dark-soft:#C9C6B8;               /* body text on forest (9.4:1) */
  --error:       #8A3B2E;               /* form validation only; the one place red appears */

  /* Very faint film grain for dark sections only (~4% opacity) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");

  /* Type */
  --display: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shape & depth */
  --radius: 2px;                        /* every card, image, input and button */
  --ease: cubic-bezier(.2, .6, .2, 1);

  /* Rhythm */
  --gutter: 20px;
  --section-y: 76px;
  --maxw: 1160px;
}


/* 02. RESET & BASE ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* keeps anchored sections clear of the sticky header */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  /* high optical size: sharper contrast and tighter spacing at display sizes */
  font-optical-sizing: auto;
}
h1, h2 { font-variation-settings: "opsz" 144; }
h3 { font-weight: 450; letter-spacing: 0; }

p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

/* Visible, on-brand focus ring for keyboard users */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.section--cream :focus-visible,
.form :focus-visible { outline-color: var(--brass-text); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--forest-deep);
  color: var(--on-dark);
  padding: 12px 18px;
  font-size: 14px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* 03. LAYOUT HELPERS ---------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 680px; }


/* 04. BUTTONS ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .03em;
  text-decoration: none;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--brass {
  background: var(--brass);
  color: var(--forest-deep);
}
.btn--brass:hover {
  background: var(--brass-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 36, 28, .18);
}

.btn--ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(244, 239, 228, .34);
}
.btn--ghost:hover {
  border-color: var(--brass);
  color: var(--brass);
}

.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--block { width: 100%; padding-block: 17px; font-size: 16px; }


/* 05. HEADER ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(22, 36, 28, .94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--brass-line);
  transition: box-shadow .25s ease;
  padding-top: env(safe-area-inset-top, 0px);
}
/* .is-scrolled is toggled in script.js */
.site-header.is-scrolled { box-shadow: 0 8px 28px rgba(22, 36, 28, .22); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--on-dark);
}
.brand__mark {
  width: 22px; height: 22px;
  color: var(--brass);
  flex: none;
}
.brand__mark svg { width: 100%; height: 100%; }
.brand__name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--on-dark-soft);
  font-size: 14px;
  padding: 8px;
  border-radius: var(--radius);
  transition: color .18s ease;
}
.header-phone:hover { color: var(--brass); }
.header-phone__icon { width: 17px; height: 17px; flex: none; }
/* Phone number text is hidden on the smallest screens — the icon stays tappable */
.header-phone__text { display: none; }


/* 06. HERO -------------------------------------------------
   Phones: the photo sits in its own block above the copy, so the
   house is never behind text. From 900px up the copy moves on top
   of the photo, held to the left where the picture is darkest.   */
.hero {
  position: relative;
  background: var(--forest-deep) var(--grain);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Scoped with .hero so these win over the generic .ph rules below. */
.hero .hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: 0;
  background: var(--forest);
}

/* Which part of the photo stays in frame. "left" keeps the house on
   the right of the picture when the frame is wider than it is tall. */
.hero .ph__img { object-position: left center; }

/* Fades the bottom of the photo into the green panel underneath. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(22, 36, 28, 0) 62%,
      rgba(22, 36, 28, .30) 82%,
      rgba(22, 36, 28, .68) 100%),
    linear-gradient(to top,
      rgba(22, 36, 28, .94) 0%,
      rgba(22, 36, 28, .45) 14%,
      rgba(22, 36, 28, 0) 38%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 36px;
  padding-bottom: 60px;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--brass);
  margin-bottom: 20px;
}
.eyebrow--dark { color: var(--brass-text); }

.hero__title {
  color: var(--on-dark);
  font-size: clamp(2.6rem, 8.6vw, 4.9rem);
  font-weight: 350;
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 12em;
  margin-bottom: 24px;
  /* a faint warm glow, like light spilling off a strand; see §15 for its slow breathe */
  text-shadow: 0 0 70px rgba(194, 161, 91, .14);
}

.hero__sub {
  color: var(--on-dark-soft);
  font-size: 17px;
  max-width: 46ch;
  margin-bottom: 34px;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 38px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--on-dark-soft);
}
.hero__trust li { display: flex; align-items: center; gap: 10px; }
.hero__trust li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brass);
  flex: none;
}


/* 07. IMAGE FRAMES ------------------------------------------
   .ph is a fixed-ratio frame. Drop an <img class="ph__img">
   inside and it fills the frame, cropped to fit.              */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--forest);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Only shown in an empty slot (no <img> inside) */
.ph__label {
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  pointer-events: none;
}

.ph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Once a real image is dropped in, hide the placeholder label */
.ph:has(.ph__img) .ph__label { display: none; }

/* Fixed aspect ratios so the layout never jumps when photos land */
.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--16x9 { aspect-ratio: 16 / 9; }

/* Framing override for a portrait photo in a landscape tile */
.ph__img--top { object-position: center top; }


/* 08. SECTIONS & HEADINGS ----------------------------------- */
.section {
  padding-block: var(--section-y);
}
.section--cream { background: var(--cream); }
.section--deep {
  background: var(--forest-deep) var(--grain);
  color: var(--on-dark-soft);
}
.section--deep h2, .section--deep h3 { color: var(--on-dark); }

/* Two cream sections in a row get a hairline between them */
.section--cream + .section--cream { border-top: 1px solid var(--brass-line); }

.section__head {
  max-width: 680px;
  margin-bottom: 48px;
}
.section__title {
  font-size: clamp(2.2rem, 6.8vw, 3.6rem);
}
.section__lede {
  font-size: 17px;
  margin-bottom: 0;
}
.section--deep .section__lede { color: var(--on-dark-soft); }


/* 08b. PROOF LINE -------------------------------------------
   One editorial sentence in the display face. No numerals.   */
.proof {
  background: var(--forest) var(--grain);
  border-top: 1px solid var(--brass-line);
  border-bottom: 1px solid var(--brass-line);
  padding-block: 72px;
}

.proof__line {
  font-family: var(--display);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  font-size: clamp(1.55rem, 4.4vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--on-dark);
  text-align: center;
  max-width: 30ch;
  margin: 0 auto;
  text-wrap: balance;
}


/* 08c. OFFER ------------------------------------------------- */
.offer__grid {
  display: grid;
  gap: 40px;
}

.offer__pitch p { font-size: 16px; }
.offer__pitch .btn { margin-top: 10px; }

.offer__price {
  font-weight: 500;
  color: var(--ink);
}

/* Itemised so the homeowner can see exactly where the money goes */
.offer__list {
  display: grid;
  border-top: 1px solid var(--brass-line);
}
.offer__list li {
  position: relative;
  padding: 15px 0 15px 34px;
  border-bottom: 1px solid var(--brass-line);
  font-size: 15px;
  color: var(--ink);
}
/* drawn tick, no icon file needed */
.offer__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 22px;
  width: 12px;
  height: 6px;
  border-left: 1px solid var(--brass-text);
  border-bottom: 1px solid var(--brass-text);
  transform: rotate(-45deg);
}


/* 09. SERVICE CARDS ----------------------------------------- */
.cards {
  display: grid;
  gap: 16px;
}

.card {
  background: var(--cream-card);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius);
  padding: 36px 28px 34px;
  transition: border-color .18s ease;
}
.card:hover { border-color: rgba(194, 161, 91, .55); }

.card__title {
  font-size: 1.6rem;
  line-height: 1.15;
  margin-bottom: .55em;
}
.card__body { font-size: 15px; margin-bottom: 0; }


/* 10. WORK GALLERY ------------------------------------------ */
.gallery {
  display: grid;
  gap: 36px;
}

.shot { margin: 0; }

.section--deep .ph {
  outline: 1px solid var(--brass-line);
  outline-offset: -1px;
}
/* One consistent grade across every photo so they read as a set:
   a touch of warmth and a slight contrast lift. */
.gallery .ph__img {
  filter: sepia(.08) saturate(1.05) contrast(1.06) brightness(1.01);
}

.shot__caption {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--on-dark-soft);
}


/* 11. VALUE PROPS ------------------------------------------- */
.values {
  display: grid;
  gap: 8px;
}

.value {
  padding: 26px 0;
  border-top: 1px solid var(--brass-line);
}
.value:first-child { border-top: 0; padding-top: 0; }

.value__title {
  font-size: 1.45rem;
  margin-bottom: .4em;
}
.value__body { font-size: 15px; margin-bottom: 0; }


/* 12. HOW IT WORKS ------------------------------------------ */
.steps {
  display: grid;
  gap: 36px;
}

.step {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--brass-line);
}

.step__num {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15em;
  color: var(--brass);
  margin-bottom: 14px;
}

.step__title { font-size: 1.6rem; margin-bottom: .35em; }
.step__body  { font-size: 15px; margin-bottom: 0; color: var(--on-dark-soft); }


/* 13. FORM -------------------------------------------------- */
.quote { scroll-margin-top: 80px; }

.form {
  display: grid;
  gap: 20px;
  background: var(--cream-card);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius);
  padding: 30px 22px;
}

/* Honeypot field: moved off-screen rather than display:none, so bots still see it */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__row {
  display: grid;
  gap: 20px;
}

.field { display: grid; gap: 8px; }

.label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
}
.req { color: var(--brass-text); }
.optional { font-weight: 400; color: var(--ink-mute); }

.input {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;               /* 16px avoids iOS zoom-on-focus */
  color: var(--ink);
  background: #FFFDF9;
  border: 1px solid rgba(122, 95, 36, .28);
  border-radius: var(--radius);
  padding: 13px 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder { color: var(--ink-mute); opacity: .8; }
.input:focus {
  outline: none;
  border-color: var(--brass-text);
  box-shadow: 0 0 0 3px rgba(194, 161, 91, .22);
}
.input--area { resize: vertical; min-height: 110px; line-height: 1.6; }

/* Invalid state, set by script.js */
.input[aria-invalid="true"] { border-color: var(--error); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(138, 59, 46, .14); }

.hint  { font-size: 13px; color: var(--ink-mute); margin: 0; }
.error { font-size: 13px; color: var(--error); margin: 0; }

.form__fineprint {
  font-size: 13px;
  color: var(--ink-mute);
  text-align: center;
  margin: -4px 0 0;
}

.form__status { font-size: 14px; color: var(--error); margin: 0; }

/* Success state */
.success {
  text-align: center;
  background: var(--cream-card);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius);
  padding: 48px 24px;
}
.success__mark {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  color: var(--brass-text);
  margin-bottom: 16px;
}
.success__mark svg { width: 100%; height: 100%; }
.success__title { font-size: 1.9rem; margin-bottom: .4em; }
.success__body  { font-size: 15px; margin-bottom: 0; }
.success__body a { color: var(--brass-text); font-weight: 500; }


/* 14. FOOTER ------------------------------------------------ */
.site-footer {
  background: var(--forest-deep) var(--grain);
  color: var(--on-dark-soft);
  padding-top: 52px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  font-size: 14px;
}

.site-footer__inner {
  display: grid;
  gap: 22px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--brass-line);
}

/* Matches the header wordmark */
.site-footer__name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 8px;
}
.site-footer__area { margin: 0; }

.site-footer__contact { display: grid; gap: 6px; }
.site-footer__contact a { text-decoration: none; transition: color .18s ease; }
.site-footer__contact a:hover { color: var(--brass); }

.site-footer__legal {
  margin: 20px 0 0;
  font-size: 13px;
  color: rgba(201, 198, 184, .75);
}


/* 15. MOTION ------------------------------------------------
   .reveal starts a few pixels down and transparent; script.js
   adds .is-visible as it scrolls into view. Short, no bounce.   */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* The hero glow breathes very slowly; most people won't notice it */
@keyframes glow {
  0%, 100% { text-shadow: 0 0 70px rgba(194, 161, 91, .10); }
  50%      { text-shadow: 0 0 80px rgba(194, 161, 91, .18); }
}
.hero__title { animation: glow 9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__title { animation: none; }
  .btn:hover { transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* 16. LARGER SCREENS ---------------------------------------- */
@media (min-width: 480px) {
  .hero__cta { flex-direction: row; flex-wrap: wrap; }
  .header-phone__text { display: inline; }
}

@media (min-width: 700px) {
  :root { --gutter: 32px; --section-y: 104px; }

  .site-header__inner { min-height: 72px; }
  .brand__name, .site-footer__name { font-size: 19px; }

  .hero .hero__media { aspect-ratio: 2 / 1; }
  .hero__inner { padding-top: 48px; padding-bottom: 72px; }
  .hero__sub { font-size: 18px; }

  .proof { padding-block: 96px; }

  .cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .card { padding: 44px 34px 40px; }

  .gallery { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  .values { grid-template-columns: repeat(2, 1fr); gap: 4px 56px; }
  .value:nth-child(2) { border-top: 0; padding-top: 0; }

  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }

  .form { padding: 40px 36px; }
  .form__row { grid-template-columns: 1fr 1fr; }

  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .site-footer__contact { justify-items: end; text-align: right; }
}

/* From here up the copy sits on top of the photograph. The house is
   on the right of the picture, so the copy is held to the left and
   the scrim washes only that side. */
@media (min-width: 900px) {
  .hero {
    flex-direction: row;
    align-items: flex-end;
    min-height: min(88vh, 800px);
  }
  .hero .hero__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  .offer__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }

  .hero__inner { padding-top: 150px; padding-bottom: 100px; }
  /* two clean lines, kept clear of the house on the right of the photo */
  .hero__title { font-size: clamp(3.4rem, 5.6vw, 4.4rem); max-width: 8.6em; }
  .hero__sub { max-width: 40ch; }

  .hero__scrim {
    background:
      linear-gradient(to right,
        rgba(22, 36, 28, .94) 0%,
        rgba(22, 36, 28, .86) 30%,
        rgba(22, 36, 28, .42) 46%,
        rgba(22, 36, 28, .08) 62%,
        rgba(22, 36, 28, .12) 78%,
        rgba(22, 36, 28, .50) 90%,
        rgba(22, 36, 28, .82) 100%),
      linear-gradient(to top,
        rgba(22, 36, 28, .50) 0%,
        rgba(22, 36, 28, .16) 55%,
        rgba(22, 36, 28, .26) 100%);
  }
}

@media (min-width: 1024px) {
  :root { --section-y: 128px; }

  .cards { grid-template-columns: repeat(4, 1fr); }
  .card { padding: 44px 28px 40px; }
  /* four photos read better as a 2x2 block than a squeezed single row */
  .gallery { gap: 44px 36px; }
  .section__head { margin-bottom: 64px; }
  .hero__inner { padding-top: 176px; padding-bottom: 116px; }
}