/* ============================================================
   Rancho Murieta guide — foundation stylesheet
   Palette drawn from the place itself: oak bark, summer grass,
   lake slate. Adjust the tokens below and the whole page follows.
   ============================================================ */

:root{
  --ink:      #1B2420;   /* oak-shadow near-black */
  --oak:      #46523F;   /* live oak canopy */
  --gold:     #A9854E;   /* dry foothill grass */
  --lake:     #3F6577;   /* Chesbro / Calero slate */
  --paper:    #EFEDE5;   /* page */
  --paper-2:  #E4E1D6;   /* recessed panels */
  --rule:     rgba(27,36,32,.16);

  --display: "Newsreader", Georgia, serif;
  --body:    "Karla", system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 34rem;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,iframe{ max-width:100%; }

/* a default for every link that isn't otherwise styled — without this,
   any <a> outside a specifically-styled component (nav, cards, buttons)
   falls back to the browser's plain blue, which doesn't happen often but
   is jarring when it does */
a{
  color:var(--lake);
  text-decoration:underline;
  text-decoration-color:rgba(63,101,119,.35);
  text-underline-offset:.15em;
}
a:hover{ text-decoration-color:currentColor; }
.section-dark a{ color:var(--gold); text-decoration-color:rgba(169,133,78,.4); }

/* ---------- accessibility ---------- */
.skip{
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1rem; z-index:100;
}
.skip:focus{ left:1rem; top:1rem; }

:focus-visible{
  outline:2px solid var(--lake);
  outline-offset:3px;
}

/* ---------- layout ---------- */
.wrap{
  max-width:68rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap-narrow{ max-width:44rem; }

.section{ padding-block:clamp(3.5rem, 9vw, 7rem); }

.section-dark{
  background:var(--ink);
  color:var(--paper);
}
.section-dark .eyebrow{ color:var(--gold); }

/* ---------- header ---------- */
.topbar{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  align-items:baseline;
  justify-content:space-between;
  padding:1.125rem var(--gutter);
  border-bottom:1px solid var(--rule);
}

.wordmark{
  font-family:var(--display);
  font-size:1.0625rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.wordmark span{
  font-style:italic;
  font-weight:300;
  color:var(--oak);
}
@media (max-width:32rem){ .wordmark span{ display:none; } }

.topnav{ display:flex; gap:1.25rem; }
.topnav a{
  font-size:.8125rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--oak);
  text-decoration:none;
  padding-block:.25rem;
  border-bottom:1px solid transparent;
}
.topnav a:hover{ border-bottom-color:var(--gold); color:var(--ink); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(3.5rem, 10vw, 7.5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
  background:var(--paper-2);
}

.hero-inner{
  position:relative;
  max-width:52rem;
  margin-inline:auto;
}

/* real footage behind the hero text instead of flat SVG art — an
   independent drone flight over two of the lakes, not tied to any
   business. Muted/looping, with a gradient dark enough that the text
   reads regardless of what's bright in a given frame. */
.hero-video{
  display:flex;
  align-items:center;
  min-height:clamp(26rem, 62vw, 38rem);
  background:var(--ink);
  color:var(--paper);
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-video::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(27,36,32,.58) 0%, rgba(27,36,32,.4) 45%, rgba(27,36,32,.8) 100%);
}
.hero-video .hero-inner{ z-index:2; }
/* the plain --gold token reads too dark against bright sky/water in the
   footage behind it — a lighter tint plus a stronger shadow keeps it
   readable regardless of what's bright in a given frame */
.hero-video .eyebrow{ color:#E8CD8F; text-shadow:0 1px 6px rgba(0,0,0,.65); }
.hero-video h1{ text-shadow:0 2px 14px rgba(0,0,0,.5); }
.hero-video .lede{ color:var(--paper); text-shadow:0 1px 5px rgba(0,0,0,.45); }
/* .btn-quiet is transparent with dark ink text — invisible against
   footage; same fix as the photo-moment buttons */
.hero-video .btn-quiet{ background:transparent; color:var(--paper); border-color:var(--paper); }
.hero-video .btn-quiet:hover{ background:var(--paper); color:var(--ink); }
/* no motion for anyone who's asked for less of it — the poster frame
   (a still from the same clip) stands in as a plain background instead */
@media (prefers-reduced-motion: reduce){
  .hero-bg{ display:none; }
  .hero-video{
    background-image:url('images/hero-drone-poster.jpg');
    background-size:cover;
    background-position:center;
  }
}

.eyebrow{
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--oak);
  margin:0 0 1.25rem;
}

h1{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.25rem, 1.4rem + 4vw, 4.25rem);
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0 0 1.5rem;
}
@media (max-width:38rem){
  h1 br{ display:none; }
}

.lede{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(1.125rem, 1rem + .6vw, 1.375rem);
  line-height:1.55;
  max-width:var(--measure);
  margin:0 0 2rem;
}

/* ---------- buttons ---------- */
.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin:0; }

.btn{
  display:inline-block;
  font-family:var(--body);
  font-weight:600;
  font-size:.875rem;
  letter-spacing:.04em;
  padding:.8125rem 1.5rem;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.btn:hover{ background:var(--lake); border-color:var(--lake); }

.btn-quiet{
  background:transparent;
  color:var(--ink);
}
.btn-quiet:hover{ background:var(--ink); color:var(--paper); }

/* ---------- typography in sections ---------- */
h2{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0 0 1.25rem;
}

h3{
  font-family:var(--body);
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--oak);
  margin:0 0 .5rem;
}
.section-dark h3{ color:var(--gold); }

.body-text{
  max-width:var(--measure);
  margin:0 0 2.5rem;
}
/* the two follow-up paragraphs continue directly under the Transportation
   feature-row's left-aligned text column now, so they stay left-aligned
   too (not centered) at a slightly wider measure than the 34rem default —
   that felt pinched for this much text */
#transportation .body-text{ max-width:46rem; }
/* inside a .center block, a max-width paragraph still hugs the left edge
   of its container by default (max-width isn't the same as being
   centered) — its text reads centered but the box itself sits off to one
   side, so the button below it looks misaligned even though both are
   "centered" independently */
.center .body-text{ margin-inline:auto; }

/* ---------- form ---------- */
.form{ max-width:32rem; }

.field{ margin-bottom:1.375rem; }

.field label{
  display:block;
  font-size:.8125rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--oak);
  margin-bottom:.4375rem;
}

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--body);
  font-size:1rem;
  color:var(--ink);
  padding:.75rem .875rem;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:2px;
}
.field textarea{ resize:vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--lake);
}

/* honeypot: hidden from people, visible to bots */
.hp{ position:absolute; left:-9999px; }

/* ---------- footer nav: a next step, not a dead end ---------- */
.foot-nav{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  padding-block:2.5rem;
  border-top:1px solid var(--rule);
}
.foot-nav-item{
  display:block;
  text-decoration:none;
  color:inherit;
  flex:1 1 12rem;
}
.foot-nav-item .foot-nav-label{
  display:block;
  font-size:.6875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--oak);
  margin-bottom:.25rem;
}
.foot-nav-item .foot-nav-title{
  font-family:var(--display);
  font-size:1.25rem;
  color:var(--ink);
}
.foot-nav-item:hover .foot-nav-title{ color:var(--lake); }

/* ---------- footer ---------- */
.footer{
  border-top:1px solid var(--rule);
  padding-block:2.5rem 3rem;
}
.foot-name{
  font-family:var(--display);
  font-size:1.25rem;
  margin:0 0 .375rem;
}
.foot-meta{
  font-size:.8125rem;
  color:var(--oak);
  margin:0 0 .25rem;
}

/* marks content that still needs real information.
   Always dark text — its tan highlight is light regardless of what
   section it sits in, same reasoning as .entry below. */
.tbd{
  background:rgba(169,133,78,.22);
  color:var(--ink);
  padding:0 .25em;
}

/* ---------- utility ---------- */
.center{ text-align:center; }

/* ---------- sub-page headers ---------- */
.subhero{
  background:var(--paper-2);
  padding:clamp(2.5rem, 7vw, 4.5rem) var(--gutter) clamp(2rem, 5vw, 3rem);
}
.subhero .wrap{ max-width:52rem; }

.subhero-photo{
  position:relative;
  background-size:cover;
  background-position:center;
  padding:clamp(3.5rem, 10vw, 6.5rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
  color:var(--paper);
}
.subhero-photo::before{
  content:"";
  position:absolute; inset:0;
  /* dark enough at the top that light-sky photos don't wash out the
     eyebrow/heading, regardless of what the photo happens to look like */
  background:linear-gradient(180deg, rgba(27,36,32,.68) 0%, rgba(27,36,32,.5) 32%, rgba(27,36,32,.85) 100%);
}
.subhero-photo .wrap{ position:relative; max-width:52rem; }
/* same fix as the homepage hero: the plain --gold token reads too dark
   against a bright photo behind it */
.subhero-photo .eyebrow{ color:#E8CD8F; text-shadow:0 1px 6px rgba(0,0,0,.65); }
.subhero-photo h1{ text-shadow:0 2px 10px rgba(0,0,0,.4); }
.subhero-photo .lede{ color:var(--paper); text-shadow:0 1px 4px rgba(0,0,0,.4); }

/* ---------- in-page jump links ---------- */
.jumplinks{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.5rem;
  padding:1.125rem var(--gutter);
  border-bottom:1px solid var(--rule);
  background:var(--paper);
}
.jumplinks a{
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--oak);
  text-decoration:none;
}
.jumplinks a:hover{ color:var(--ink); text-decoration:underline; }

/* ---------- sub-section headings within a long page ----------
   A quiet uppercase label, matching .eyebrow/h3 — not a second
   headline. A list of contractor categories doesn't need the big
   display serif treatment; that's for actual moments in the guide. */
.subhead{
  font-family:var(--body);
  font-weight:600;
  font-size:.8125rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--oak);
  margin:2.5rem 0 1rem;
  padding-top:2rem;
  border-top:1px solid var(--rule);
}
.subhead:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.section-dark .subhead{ color:var(--gold); border-top-color:rgba(239,237,229,.16); }

/* ---------- directory / listing cards ---------- */
.directory{
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(15.5rem, 1fr));
  margin-bottom:2rem;
}
/* a .directory grid right under a .feature-row reads as cramped — the
   feature-row's own gap isn't a substitute for real space before the next
   block starts */
.feature-row + .directory{ margin-top:clamp(2rem, 5vw, 3rem); }
.entry{
  background:var(--paper-2);
  padding:1.25rem 1.375rem;
  border-radius:2px;
}
.entry h3{
  font-family:var(--body);
  font-weight:600;
  font-size:.9375rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  margin:0 0 .3rem;
}
.entry .addr{
  font-size:.8125rem;
  color:var(--oak);
  margin:0 0 .5rem;
}
/* every address links out to Google Maps — stays oak like plain address
   text always was, doesn't take on the sitewide link-blue */
.entry .addr a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(169,133,78,.35);
  text-underline-offset:.15em;
}
.entry .addr a:hover{ text-decoration-color:currentColor; }
.entry p{
  /* explicit, not inherited — an .entry card is always a light panel,
     even inside a .section-dark, so its text must always stay dark */
  color:var(--ink);
  margin:0 0 .5rem;
  font-size:.9375rem;
}
.entry p:last-child{ margin-bottom:0; }
.entry a{ color:var(--lake); text-decoration:none; }
.entry a:hover{ text-decoration:underline; }

/* phone/hours/meta lines: a quieter, smaller treatment so they read as
   a label rather than another sentence of body copy */
.entry .meta{
  font-size:.8125rem;
  color:var(--oak);
  margin:0 0 .5rem;
}
.entry .meta:last-child{ margin-bottom:0; }
.entry .meta a{ color:var(--oak); }
/* a small phone glyph in front of every tel: link — applies everywhere
   automatically, no markup changes needed per entry */
.entry .meta a[href^="tel:"]{ display:inline-flex; align-items:center; gap:.3em; }
.entry .meta a[href^="tel:"]::before{
  content:"";
  width:.8em; height:.8em; flex:none;
  background:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2346523F' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* map-pin icon for "View on map" links — lake-blue rather than the
   default meta oak, since it's pointing at water/geography specifically */
.map-link{
  display:inline-flex;
  align-items:center;
  gap:.35em;
  color:var(--lake) !important;
}
.map-link::before{
  content:"";
  width:.8em; height:.8em; flex:none;
  background:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233F6577' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center/contain;
}

.entry-photo{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:2px;
  display:block;
  margin-bottom:.875rem;
}

/* ---------- pull quote ---------- */
.pull-quote{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:1.1875rem;
  line-height:1.5;
  color:var(--oak);
  border-left:3px solid var(--gold);
  padding-left:1.125rem;
  margin:0 0 1.5rem;
  max-width:var(--measure);
}

/* ---------- FAQ ---------- */
.faq-item{
  border-bottom:1px solid var(--rule);
  padding-block:1.25rem;
}
.faq-item summary{
  font-family:var(--body);
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  color:var(--ink);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item[open] summary{ color:var(--lake); }
.faq-item p{
  margin:.75rem 0 0;
  max-width:var(--measure);
}
.faq-item p a{
  color:var(--lake);
  text-decoration:underline;
  text-decoration-color:rgba(63,101,119,.35);
  text-underline-offset:.15em;
}
.faq-item p a:hover{ text-decoration-color:currentColor; }
/* dark-ink summary text and the rule between items both vanish on
   .section-dark's near-black background — same fix pattern as .step-num
   and .more-link above */
.section-dark .faq-item{ border-bottom-color:rgba(239,237,229,.16); }
.section-dark .faq-item summary{ color:var(--paper); }
.section-dark .faq-item[open] summary{ color:var(--gold); }
.section-dark .faq-item p a{
  color:var(--gold);
  text-decoration-color:rgba(169,133,78,.4);
}

/* ---------- CTA banner ----------
   No border-top of its own — the page footer immediately below
   already has one, and the two close together read as a stray
   double rule. The banner's background/padding is separation enough. */
.cta-banner{
  padding-block:clamp(3rem, 7vw, 4.5rem);
}
.cta-banner p{ margin-bottom:1.75rem; }

/* ---------- feature row: big alternating photo + text ----------
   No padding-block of its own — it always sits inside a .section,
   which already provides top/bottom breathing room. Adding both
   stacked into large, obviously-empty gaps between rows. */
.feature-row{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:clamp(2rem, 6vw, 4.5rem);
}
.feature-row.reverse{ grid-template-columns:1fr 1.1fr; }
.feature-row.reverse .feature-media{ order:2; }
@media (max-width:46rem){
  .feature-row, .feature-row.reverse{ grid-template-columns:1fr; }
  .feature-row.reverse .feature-media{ order:0; }
}
.feature-media img,
.feature-media video{
  width:100%;
  aspect-ratio:5/4;
  object-fit:cover;
  border-radius:2px;
  display:block;
}
/* .feature-media divs with a video also carry a background-image
   (inline, matching the video's own poster) — invisible in normal use
   since the video sits on top, but it's what shows once the video is
   hidden below */
@media (prefers-reduced-motion: reduce){
  .feature-media video{ display:none; }
  .feature-media{
    aspect-ratio:5/4;
    border-radius:2px;
    background-size:cover;
    background-position:center;
  }
}
.feature-text .step-num{
  font-family:var(--body);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--oak);
  margin:0 0 .875rem;
}
/* oak-on-ink is two dark greens on top of each other — unreadable */
.section-dark .step-num{ color:var(--gold); }
.feature-text h2{ margin-bottom:1.125rem; }
.feature-text p{
  font-size:1.0625rem;
  max-width:30rem;
  margin:0 0 1.25rem;
}
/* an actual button, not styled text — easy to mistake for a plain link
   otherwise, and "click here to keep reading" deserves to look clickable */
.more-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--body);
  font-weight:600;
  font-size:.875rem;
  letter-spacing:.02em;
  padding:.6875rem 1.25rem;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  border-radius:2px;
  text-decoration:none;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.more-link:hover{ background:var(--ink); color:var(--paper); }
/* ink-on-ink is unreadable inside a dark section */
.section-dark .more-link{ color:var(--paper); border-color:var(--paper); }
.section-dark .more-link:hover{ background:var(--paper); color:var(--ink); }

/* ---------- photo moment: full-bleed dramatic photo section ---------- */
.photo-moment{
  position:relative;
  min-height:clamp(24rem, 60vw, 34rem);
  display:flex;
  align-items:flex-end;
  background-size:cover;
  background-position:center;
  color:var(--paper);
}
.photo-moment::before{
  content:"";
  position:absolute; inset:0;
  /* a tint across the whole photo, not just the bottom — a bright spot
     anywhere in the image (a carnival light, a sunny sky) can otherwise
     sit right behind the headline and wash it out */
  background:linear-gradient(180deg, rgba(27,36,32,.42) 0%, rgba(27,36,32,.32) 30%, rgba(27,36,32,.92) 100%);
}
.photo-moment .wrap{
  position:relative;
  max-width:42rem;
  padding-block:clamp(2.5rem, 7vw, 4rem);
}
.photo-moment .eyebrow{ color:var(--gold); text-shadow:0 1px 4px rgba(0,0,0,.5); }
.photo-moment h2{ color:var(--paper); text-shadow:0 2px 12px rgba(0,0,0,.5); }
.photo-moment p{ color:var(--paper); max-width:var(--measure); text-shadow:0 1px 4px rgba(0,0,0,.45); }
.photo-moment .cta-row{ margin-top:.5rem; text-shadow:none; }
/* the default dark-on-light .btn would nearly vanish against this photo —
   flip to a light button + an outlined one that reads on any photo */
.photo-moment .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.photo-moment .btn:hover{ background:var(--gold); border-color:var(--gold); }
.photo-moment .btn-quiet{ background:transparent; color:var(--paper); border-color:var(--paper); }
.photo-moment .btn-quiet:hover{ background:var(--paper); color:var(--ink); }

/* ---------- overview map: a real map (OpenStreetMap data, restyled to
   the site's palette), not a hand-drawn diagram ---------- */
.overview-map{
  border-radius:4px;
  overflow:hidden;
  max-width:62rem;
  margin-inline:auto;
}
.overview-map img{
  width:100%;
  display:block;
}
.map-credit{
  max-width:62rem;
  margin:.625rem auto 0;
  font-size:.75rem;
  color:var(--oak);
  text-align:center;
}
.map-credit a{ color:var(--oak); }
/* this section is just a heading and a compact landscape map — the
   standard section padding below it reads as a lot of dead air */
#overview{ padding-bottom:clamp(2rem, 4vw, 3rem); }

/* ---------- lede-style intro paragraph (no box) ---------- */
.intro-text{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(1.1875rem, 1.05rem + .5vw, 1.5rem);
  line-height:1.55;
  max-width:42rem;
  /* whatever comes right after (a feature-row, a card grid) needs real
     air under this — zero bottom margin let the directory cards on
     moving-in.html read as crowding right up against it */
  margin:0 0 clamp(2rem, 5vw, 3rem);
}