:root {
  --green: #16A34A;
  --green-dark: #15803D;
  --green-light: #DCFCE7;
  --green-mist: #F0FDF4;
  --orange: #F97316;
  --orange-dark: #EA580C;
  --ink: #1F2937;
  --grey: #4B5563;
  --grey-light: #9CA3AF;
  --grey-mist: #F3F4F6;
  --line: #E5E7EB;
  --white: #FFFFFF;
  --radius: 16px;
  --max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: flex; flex-direction: column; }
h1, h2, h3 { font-family: "Poppins", "Inter", sans-serif; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--grey); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; width: 100%; }
.accent { color: var(--green); }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--orange); margin-bottom: 10px; display: block; }

/* Header: just the logo, which leads home */
/* Slim top bar; once you scroll down it tightens a little more and picks up a soft shadow */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .3s ease, background .3s ease; }
.site-header .wrap { display: flex; align-items: center; height: 58px; transition: height .3s ease; }
.site-header img { height: 30px; display: block; transition: height .3s ease; }
.site-header.scrolled { background: rgba(255,255,255,.96); box-shadow: 0 4px 16px -10px rgba(31,41,55,.35); }
.site-header.scrolled .wrap { height: 46px; }
.site-header.scrolled img { height: 24px; }

/* Hero with mountains */
.hero { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, var(--green-mist) 0%, var(--grey-mist) 55%, var(--white) 100%); padding-top: 96px; text-align: center; }
.hero.short { flex: 0 0 auto; padding-top: 80px; }
/* Sky scene behind the top of each page: kept to the sides, so nothing sits behind the words */
.hero { overflow: hidden; }
.sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; pointer-events: none; z-index: 1; }
/* Layers, back to front: mountains, then the sky scene (so paragliders and balloons fly in front of the peaks), then the words */
.mountains { position: relative; }
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { max-width: 820px; margin: 0 auto 20px; }
.hero p.lead { font-size: 1.2rem; max-width: 640px; margin: 0 auto; }
/* Provo skyline: keeps its shape at any width, trimming the sides on narrow screens */
.mountains { display: block; width: 100%; height: clamp(170px, 18vw, 340px); object-fit: cover; object-position: center bottom; margin-top: 64px; }

/* Plain word links */
.links { display: flex; justify-content: center; gap: 40px; margin-top: 36px; }
.links a { color: var(--orange); font-weight: 600; font-size: 1.1rem; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color .2s, color .2s; }
.links a:hover { color: var(--orange-dark); border-bottom-color: var(--orange-dark); }

/* Sections */
section.block { padding: 80px 0; }
.tinted { background: var(--grey-mist); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.card p:last-child { margin-bottom: 0; }
.prose { max-width: 720px; margin: 0 auto; }
.prose p { font-size: 1.08rem; }

/* Testimonials */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.quote { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; position: relative; }
.quote::before { content: "\201C"; font-family: Georgia, serif; font-size: 4rem; line-height: 1; color: var(--green); position: absolute; top: 14px; left: 24px; opacity: .35; }
.quote blockquote { margin: 28px 0 20px; font-size: 1.05rem; color: var(--ink); }
.quote .who { font-weight: 600; color: var(--ink); }
.quote .who span { display: block; font-weight: 400; color: var(--grey); font-size: .92rem; }

/* Placeholders for content Blake still needs to supply */
.todo { border: 2px dashed var(--orange); background: #FFF7ED; color: var(--orange-dark); border-radius: 12px; padding: 18px 20px; font-weight: 500; }
.quote.todo::before { color: var(--orange); }
.quote.todo blockquote, .quote.todo .who, .quote.todo .who span { color: var(--orange-dark); }

/* Footer: one quiet line */
.site-footer { padding: 28px 0; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; font-size: .9rem; color: var(--grey-light); }

/* Introductions
   Arrival: the mountains fade and rise into place, then the words follow one by one.
   Between pages: the old page fades away and the new one eases in the same way, only quicker.
   The menu bar stays put throughout. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: fade-out .3s ease both; }
::view-transition-new(root) { animation: none; }

.intro-wait:not(.intro-go) .mountains,
.intro-wait:not(.intro-go) .sky,
.intro-wait:not(.intro-go) .hero .wrap > *,
.intro-wait:not(.intro-go) main > section:not(.hero),
.intro-wait:not(.intro-go) .site-footer { opacity: 0; }

.intro-full .site-header { animation: fade-in 1s ease .1s both; }
.intro-full .hero { animation: fade-in 1.6s ease both; }
.intro-full .mountains { animation: rise 1.8s cubic-bezier(.22, .7, .2, 1) .25s both; }
.intro-full .sky { animation: fade-in 2.2s ease .6s both; }
.intro-full .hero .wrap > * { animation: rise-small 1.1s cubic-bezier(.22, .7, .2, 1) both; }
.intro-full .hero .wrap > :nth-child(1) { animation-delay: 1.15s; }
.intro-full .hero .wrap > :nth-child(2) { animation-delay: 1.4s; }
.intro-full .hero .wrap > :nth-child(3) { animation-delay: 1.65s; }
.intro-full main > section:not(.hero), .intro-full .site-footer { animation: fade-in 1s ease 1.9s both; }

.intro-quick .mountains { animation: rise .9s cubic-bezier(.22, .7, .2, 1) .05s both; }
.intro-quick .sky { animation: fade-in 1s ease .1s both; }
.intro-quick .hero .wrap > * { animation: rise-small .7s cubic-bezier(.22, .7, .2, 1) both; }
.intro-quick .hero .wrap > :nth-child(1) { animation-delay: .2s; }
.intro-quick .hero .wrap > :nth-child(2) { animation-delay: .32s; }
.intro-quick .hero .wrap > :nth-child(3) { animation-delay: .44s; }
.intro-quick main > section:not(.hero), .intro-quick .site-footer { animation: fade-in .6s ease .5s both; }

@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes rise-small { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .intro-wait .mountains, .intro-wait .sky, .intro-wait .hero .wrap > *, .intro-wait main > section, .intro-wait .site-footer { opacity: 1 !important; }
}

@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  section.block { padding: 60px 0; }
  .hero { padding-top: 64px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .site-header .wrap { height: 52px; }
  .site-header img { height: 26px; }
  .site-header.scrolled .wrap { height: 44px; }
  .site-header.scrolled img { height: 22px; }
}
/* Home on computers: the first screen holds the whole scene. The top section fills exactly the height below the
   top bar, and the spacing and text tighten on shorter screens so the full mountain range is always in view. */
@media (min-width: 601px) {
  .hero:not(.short) { min-height: calc(100vh - 59px); min-height: calc(100svh - 59px); padding-top: clamp(24px, 7vh, 96px); }
  .hero:not(.short) h1 { font-size: clamp(2rem, min(5vw, 6.2vh), 3.6rem); margin-bottom: clamp(10px, 2vh, 20px); }
  .hero:not(.short) p.lead { font-size: clamp(1rem, 2.3vh, 1.2rem); }
  .hero:not(.short) .links { margin-top: clamp(14px, 3.5vh, 36px); }
  .hero:not(.short) .mountains { margin-top: clamp(12px, 4vh, 64px); }
}

/* Phones: the words fill the width, so the sky comes as two bands that frame them - one across the top above
   the headline, one floating just above the mountains - and the mountain range is a narrower, taller version. */
.sky-top, .sky-low { display: none; }
.mountains-frame { display: block; position: relative; z-index: 0; }
@media (max-width: 600px) {
  .sky-wide { display: none; }
  .sky-top, .sky-low { display: block; height: auto; object-fit: fill; }
  .sky-top { inset: 0 0 auto 0; }
  .sky-low { top: auto; bottom: calc(100vw * 0.21); }
  .hero, .hero.short { padding-top: calc(100vw * 0.33); }
  .hero h1 { font-size: 2.1rem; margin-bottom: 14px; }
  .hero p.lead { font-size: 1.02rem; line-height: 1.55; }
  .links { margin-top: 24px; }
  .mountains { height: auto; object-fit: fill; margin-top: calc(100vw * 0.22); }
}