/* ============================================================
   Preiss Heights POA — shared styles
   Design tokens & components from the approved Home design.
   Colors authored in oklch (perceptual). Figtree (headings/UI) + Mulish (body).
   ============================================================ */
:root{
  --cream:        oklch(0.985 0.008 95);
  --cream-2:      oklch(0.965 0.012 95);
  --card:         oklch(1 0 0);
  --ink:          oklch(0.27 0.018 152);
  --ink-soft:     oklch(0.44 0.014 152);
  --muted:        oklch(0.56 0.012 152);
  --line:         oklch(0.90 0.012 120);

  --green:        oklch(0.52 0.10 150);
  --green-deep:   oklch(0.40 0.075 152);
  --green-bright: oklch(0.62 0.115 150);
  --green-wash:   oklch(0.95 0.025 150);

  --accent:       oklch(0.66 0.135 52);
  --accent-deep:  oklch(0.56 0.13 48);
  --accent-wash:  oklch(0.95 0.03 65);

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --shadow: 0 1px 2px rgba(30,50,30,.04), 0 14px 40px -18px rgba(30,60,30,.22);
  --shadow-sm: 0 1px 2px rgba(30,50,30,.05), 0 8px 24px -16px rgba(30,60,30,.20);
  --maxw: 1180px;
  font-size: 17px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Mulish", system-ui, sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.font-display{ font-family:"Figtree", system-ui, sans-serif; line-height:1.08; letter-spacing:-0.02em; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }

/* ---------- top utility bar ---------- */
.util{ background:var(--green-deep); color:oklch(0.92 0.02 150); font-size:.82rem; font-weight:600; }
.util .wrap{ display:flex; align-items:center; gap:22px; height:44px; justify-content:flex-end; }
.util a{ display:inline-flex; align-items:center; gap:8px; opacity:.92; transition:opacity .2s; }
.util a:hover{ opacity:1; }
.util .sep{ width:1px; height:18px; background:oklch(0.55 0.06 150); }
.util .ico{ width:16px; height:16px; }

/* ---------- header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:oklch(0.99 0.008 95 / .88);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand .mark{
  width:42px; height:42px; border-radius:13px; flex:none;
  background:linear-gradient(145deg, var(--green-bright), var(--green-deep));
  display:grid; place-items:center; color:#fff; font-family:"Figtree"; font-weight:900; font-size:1.15rem;
  box-shadow:0 6px 16px -8px var(--green);
}
.brand .name{ font-family:"Figtree"; font-weight:800; font-size:1.02rem; line-height:1.12; letter-spacing:-0.01em; }
.brand .name small{ display:block; font-weight:600; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
nav.main{ display:flex; align-items:center; gap:4px; }
nav.main a{
  font-family:"Figtree"; font-weight:600; font-size:.95rem; color:var(--ink-soft);
  padding:9px 15px; border-radius:999px; transition:.18s; white-space:nowrap;
}
nav.main a:hover{ color:var(--green-deep); background:var(--green-wash); }
nav.main a.active{ color:#fff; background:var(--green); }

/* ---------- mobile nav (CSS-only checkbox hack, no JS) ---------- */
.nav-toggle{ display:none; }
.hamburger{ display:none; cursor:pointer; padding:8px; border-radius:10px; color:var(--green-deep); }
.hamburger svg{ width:26px; height:26px; }
.hamburger:hover{ background:var(--green-wash); }

/* ---------- hero (home) ---------- */
.hero{ position:relative; overflow:hidden; }
.hero .bg{ position:absolute; inset:0; background:url("../assets/aerial2.jpg") center 30% / cover no-repeat; transform:scale(1.04); }
.hero .scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(110deg, oklch(0.30 0.06 152 / .86) 0%, oklch(0.32 0.06 152 / .58) 46%, oklch(0.34 0.05 152 / .18) 100%),
    linear-gradient(0deg, oklch(0.22 0.05 152 / .55), transparent 45%);
}
.hero .wrap{ position:relative; padding-block:118px 128px; }
.hero-inner{ max-width:680px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Figtree"; font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:oklch(0.92 0.03 90); background:oklch(1 0 0 / .12); border:1px solid oklch(1 0 0 / .22);
  padding:7px 15px; border-radius:999px; backdrop-filter:blur(4px); margin-bottom:24px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px oklch(0.66 0.135 52 / .35); }
.hero h1{ color:#fff; font-size:clamp(2.6rem, 5.2vw, 4.3rem); font-weight:800; }
.hero p.lede{ color:oklch(0.96 0.01 95 / .92); font-size:1.18rem; line-height:1.6; margin-top:22px; max-width:560px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

/* ---------- compact page header (interior pages) ---------- */
.page-hero{ background:linear-gradient(135deg, var(--green-deep), var(--green)); color:#fff; }
.page-hero .wrap{ padding-block:64px 58px; }
.page-hero .eyebrow{ color:oklch(0.92 0.03 90); }
.page-hero h1{ color:#fff; font-size:clamp(2.1rem, 4vw, 3.2rem); font-weight:800; }
.page-hero p{ color:oklch(0.95 0.02 150 / .9); font-size:1.12rem; margin-top:14px; max-width:620px; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Figtree"; font-weight:700; font-size:1rem;
  padding:15px 28px; border-radius:999px; cursor:pointer; border:none; transition:.2s;
}
.btn .ico{ width:18px; height:18px; }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 12px 28px -12px oklch(0.56 0.13 48 / .8); }
.btn-primary:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn-ghost{ background:oklch(1 0 0 / .94); color:var(--green-deep); }
.btn-ghost:hover{ background:#fff; transform:translateY(-2px); }
.btn-green{ background:var(--green); color:#fff; box-shadow:0 12px 28px -14px var(--green); }
.btn-green:hover{ background:var(--green-deep); transform:translateY(-2px); }

/* ---------- section scaffolding ---------- */
section{ position:relative; }
.pad{ padding-block:84px; }
.sec-head{ max-width:620px; margin-bottom:46px; }
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Figtree"; font-weight:700; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green); margin-bottom:14px;
}
.page-hero .kicker{ color:oklch(0.92 0.03 90); }
.kicker .bar{ width:26px; height:3px; border-radius:2px; background:var(--accent); }
.sec-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); font-weight:800; }
.sec-head p{ color:var(--ink-soft); font-size:1.08rem; margin-top:14px; }

/* ---------- info cards ---------- */
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px; box-shadow:var(--shadow-sm); }
.card.feature{ display:flex; flex-direction:column; }
.icon-badge{ width:58px; height:58px; border-radius:17px; flex:none; display:grid; place-items:center; margin-bottom:22px; }
.icon-badge.green{ background:var(--green-wash); color:var(--green-deep); }
.icon-badge.accent{ background:var(--accent-wash); color:var(--accent-deep); }
.icon-badge svg{ width:28px; height:28px; }
.card h3{ font-size:1.45rem; font-weight:800; margin-bottom:14px; }
.card p{ color:var(--ink-soft); margin-bottom:14px; font-size:1rem; }
.card p:last-child{ margin-bottom:0; }
.card .hl{ color:var(--ink); font-weight:700; }
.inline-link{ color:var(--green); font-weight:700; border-bottom:2px solid var(--green-wash); transition:.18s; }
.inline-link:hover{ border-color:var(--green); }

/* ---------- contacts ---------- */
.contacts-sec{ background:var(--cream-2); border-block:1px solid var(--line); }
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.contact-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:24px 22px; box-shadow:var(--shadow-sm); transition:.2s; }
.contact-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--green-wash); }
.contact-card.lead{ grid-column:span 2; display:flex; align-items:center; gap:20px; background:linear-gradient(145deg, var(--green-deep), var(--green)); border:none; color:#fff; }
.contact-card.lead .avatar{ background:oklch(1 0 0 / .18); color:#fff; width:64px; height:64px; font-size:1.4rem; }
.contact-card.lead .role{ color:oklch(0.9 0.03 90); }
.contact-card.lead .nm{ color:#fff; font-size:1.45rem; }
.contact-card.lead .ph{ color:#fff; }
.avatar{ width:46px; height:46px; border-radius:14px; flex:none; display:grid; place-items:center; font-family:"Figtree"; font-weight:800; font-size:1.05rem; margin-bottom:16px; }
.avatar.g{ background:var(--green-wash); color:var(--green-deep); }
.avatar.a{ background:var(--accent-wash); color:var(--accent-deep); }
.contact-card .role{ font-family:"Figtree"; font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.contact-card .nm{ font-family:"Figtree"; font-weight:800; font-size:1.15rem; margin:5px 0 8px; }
.contact-card .ph{ display:inline-flex; align-items:center; gap:8px; color:var(--green); font-weight:700; font-size:.98rem; }
.contact-card .ph svg{ width:15px; height:15px; }
.contact-card.lead .ph svg{ opacity:.9; }
.contact-card .ph:hover{ text-decoration:underline; }

/* ---------- location ---------- */
.loc-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:stretch; }
.loc-info{ display:flex; flex-direction:column; gap:18px; }
.loc-item{ display:flex; gap:18px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:24px 26px; box-shadow:var(--shadow-sm); }
.loc-item .icon-badge{ margin-bottom:0; width:50px; height:50px; border-radius:14px; }
.loc-item .icon-badge svg{ width:24px; height:24px; }
.loc-item h4{ font-family:"Figtree"; font-size:1.12rem; font-weight:800; margin-bottom:4px; }
.loc-item p, .loc-item a{ color:var(--ink-soft); font-size:1rem; }
.loc-item a.lk{ color:var(--green); font-weight:700; }
.map-embed{ border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; min-height:340px; box-shadow:var(--shadow-sm); }
.map-embed iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* ---------- park rules list ---------- */
.rules-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.rule{ display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 22px; box-shadow:var(--shadow-sm); }
.rule .tick{ width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; background:var(--green-wash); color:var(--green-deep); margin-top:2px; }
.rule .tick svg{ width:17px; height:17px; }
.rule p{ color:var(--ink-soft); font-size:1rem; }
.rule p strong{ color:var(--ink); font-weight:700; }
.callout{ background:var(--accent-wash); border:1px solid oklch(0.66 0.135 52 / .25); border-radius:var(--r-md); padding:24px 26px; margin-bottom:34px; display:flex; gap:16px; align-items:flex-start; }
.callout .icon-badge{ margin-bottom:0; width:46px; height:46px; border-radius:12px; }
.callout .icon-badge svg{ width:22px; height:22px; }
.callout h4{ font-family:"Figtree"; font-weight:800; font-size:1.1rem; margin-bottom:4px; }
.callout p{ color:var(--ink-soft); }

/* ---------- downloads ---------- */
.dl-group-label{ font-family:"Figtree"; font-weight:800; font-size:1.2rem; margin:34px 0 16px; }
.dl-group-label:first-child{ margin-top:0; }
.dl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dl-item{ display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 22px; box-shadow:var(--shadow-sm); transition:.2s; }
.dl-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--green-wash); }
.dl-item .ficon{ width:48px; height:48px; border-radius:13px; flex:none; display:grid; place-items:center; background:var(--green-wash); color:var(--green-deep); }
.dl-item.doc .ficon{ background:var(--accent-wash); color:var(--accent-deep); }
.dl-item .ficon svg{ width:24px; height:24px; }
.dl-item .meta{ flex:1; min-width:0; }
.dl-item .ttl{ font-family:"Figtree"; font-weight:700; font-size:1.02rem; color:var(--ink); }
.dl-item .typ{ font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.dl-item .go{ color:var(--green); flex:none; }
.dl-item .go svg{ width:22px; height:22px; }

/* ---------- footer ---------- */
footer.site{ background:var(--green-deep); color:oklch(0.9 0.02 150); padding-block:54px 30px; }
footer .top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid oklch(0.5 0.05 150); }
footer .brand .name{ color:#fff; }
footer .brand .name small{ color:oklch(0.8 0.03 150); }
footer .f-nav{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
footer .f-nav a{ font-family:"Figtree"; font-weight:600; font-size:.95rem; padding:8px 14px; border-radius:999px; color:oklch(0.9 0.02 150); transition:.18s; }
footer .f-nav a:hover{ background:oklch(1 0 0 / .1); color:#fff; }
footer .f-contact{ display:flex; gap:14px; align-items:center; }
footer .f-contact a{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.92rem; color:oklch(0.92 0.02 150); }
footer .f-contact a:hover{ color:#fff; }
footer .f-contact .ico{ width:17px; height:17px; }
footer .bottom{ margin-top:24px; font-size:.86rem; color:oklch(0.78 0.03 150); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-card.lead{ grid-column:span 2; }
  .loc-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  :root{ font-size:16px; }
  .hamburger{ display:grid; }
  nav.main{
    position:absolute; top:78px; left:0; right:0; flex-direction:column; align-items:stretch; gap:6px;
    background:var(--cream); border-bottom:1px solid var(--line); padding:14px 28px 20px;
    box-shadow:var(--shadow); display:none;
  }
  .nav-toggle:checked ~ nav.main{ display:flex; }
  nav.main a{ font-size:1.05rem; padding:12px 16px; }
  .info-grid{ grid-template-columns:1fr; }
  .rules-grid{ grid-template-columns:1fr; }
  .dl-grid{ grid-template-columns:1fr; }
  .hero .wrap{ padding-block:80px; }
  .brand .name small{ font-size:.66rem; }
  .util .wrap{ justify-content:center; }
  footer .top{ flex-direction:column; }
}
@media (max-width:520px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-card.lead{ grid-column:span 1; flex-direction:column; align-items:flex-start; }
  .wrap{ padding-inline:20px; }
  .card{ padding:28px; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } html{ scroll-behavior:auto; } }