/* Fonts hosted with the site so they always load */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/jost-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); }

/* Gladwater Aviation: Kelp, Cirrus and Windsock lead. Windsock is the accent. Daybreak (yellow) is not used on this site. No teal. */
:root {
  --cirrus: #C7ECF9;
  --kelp: #55663D;
  --kelp-rgb: 85,102,61;
  --kelp-dark: #3a4729;
  --fathom: #044251;
    --windsock: #F05523;
  --white: #ffffff;
  --head: "Jost", "Futura", "Century Gothic", sans-serif;
  --body: "Bricolage Grotesque", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--cirrus);
  background: var(--kelp);
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }
h1, .label {
  font-family: var(--head);
  font-weight: 700;
  text-transform: uppercase; /* Headlines and labels are always all caps */
  letter-spacing: 0.06em;
}

/* Header: one solid Windsock bar holding the logo exactly as supplied (white GLADWATER, Kelp AVIATION). */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--windsock); }
/* Page margins match gladwater.com: one 1080px container, 32px side margins (20px on phones). */
.site-header .header-inner { display: flex; align-items: center; padding-top: 14px; padding-bottom: 14px; }
.brand-plate { display: inline-flex; align-items: center; line-height: 0; }
.brand-plate img { height: 80px; width: auto; display: block; transition: height .25s ease; }
/* Logo shrinks 25% after a short scroll, as on gladwater.com */
html.header-compact .brand-plate img { height: 60px; }

/* Altimeter tape: instrument bezel down the right edge, 0 at the bottom, 8 (thousand ft) at the top. */
.gauge { display: none; /* hidden for now */ position: fixed; right: 18px; top: 112px; bottom: 28px; width: 56px; z-index: 15; pointer-events: none; font-family: var(--head); font-weight: 600; }
.gauge .scale { position: absolute; inset: 0; margin: 0; padding: 14px 0; list-style: none; display: flex; flex-direction: column; justify-content: space-between; background: rgba(var(--kelp-rgb), .9); border: 2px solid var(--cirrus); border-radius: 10px; }
.gauge .scale li { position: relative; height: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: .8rem; letter-spacing: .06em; color: var(--cirrus); }
.gauge .scale li::before { content: ""; position: absolute; left: 0; width: 14px; height: 2px; background: var(--cirrus); }
.gauge .scale li:not(:last-child)::after { /* minor ticks between the thousands */
  content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 2px; background: var(--cirrus); opacity: .6; box-shadow: 0 14px 0 var(--cirrus), 0 28px 0 var(--cirrus); }
.gauge .marker { position: absolute; right: calc(100% + 10px); top: calc(14px + (100% - 28px) * (1 - var(--p, 0))); transform: translateY(-50%); background: var(--windsock); color: var(--white); border-radius: 999px; padding: 3px 12px; font-size: .95rem; line-height: 1.2; white-space: nowrap; transition: top .08s linear; }
.gauge .marker::after { content: ""; position: absolute; left: 100%; top: 50%; width: 14px; height: 3px; background: var(--windsock); transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { .gauge .marker, .brand-plate img { transition: none; } }

.hero {
  position: relative;
  min-height: calc(100vh - 108px);
  min-height: calc(100svh - 108px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--kelp); }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: var(--pos, center); opacity: 0; transition: opacity 1.8s ease-in-out; will-change: opacity, transform; }
.hero-slide.on { opacity: 1; z-index: 1; }
.hero-slide.on, .hero-slide.prev { animation: heroDrift 18s linear forwards; }
@keyframes heroDrift {
  from { transform: scale(1.02) translate3d(0,0,0); }
  to { transform: scale(1.1) translate3d(var(--dx,-1.5%), var(--dy,-1%), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.on, .hero-slide.prev { animation: none; }
}
.label.label-white { color: #FFFFFF; }
.lede-tag { margin-top: 16px; font-weight: 700; }
.ai-rule { --ai-w: 206px; display: flex; justify-content: center; align-items: center; gap: calc(var(--ai-w) * 0.12); margin: calc(32px + var(--ai-w) * 0.1) auto 0; text-shadow: none; /* top row of a six-pack, just below the lede, centered on the page */ }
.content > :not(.ai-rule) { position: relative; z-index: 1; }
.ai-rule .ai { display: block; flex: none; width: var(--ai-w); height: auto; }
.hero::after { /* deep wash so text stays readable over the sun */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgba(var(--kelp-rgb),.28), rgba(var(--kelp-rgb),.28)),
    linear-gradient(90deg, rgba(var(--kelp-rgb),.78) 0%, rgba(var(--kelp-rgb),.5) 45%, rgba(var(--kelp-rgb),0) 75%),
    linear-gradient(0deg, rgba(var(--kelp-rgb),.8) 0%, rgba(var(--kelp-rgb),0) 38%);
}


.content { margin: auto; padding: 24px 32px; width: 100%; max-width: 1080px; }
.label { font-size: .95rem; color: var(--cirrus); margin-bottom: 18px; }
h1 {
  color: var(--cirrus);
  font-size: clamp(2.6rem, 9vw, 6rem);
  line-height: .95;
  letter-spacing: 0.03em;
}
h1 em { display: block; font-style: normal; color: var(--windsock); }
.lede { margin-top: 28px; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--white); max-width: 34rem; }

main { text-shadow: 0 1px 12px rgba(var(--kelp-rgb),.9); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
footer { background: var(--kelp-dark); color: var(--cirrus); border-top: 10px solid var(--cirrus); padding: 48px 0 28px; font-weight: 600; text-shadow: none; }
footer .footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; }
footer .footer-bottom p { margin: 0; font-family: var(--head); text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; line-height: 2; }
footer .fb-left-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
footer .g-mark { display: block; height: 70px; width: auto; flex: none; }
footer .fb-left { color: var(--cirrus); }
footer .fb-right { text-align: right; }
footer .gh { color: var(--windsock); }
footer .fb-link { color: inherit; text-decoration: none; font-weight: 300; transition: color .15s ease; }
footer .fb-link:hover, footer .fb-link:focus-visible { color: var(--windsock); font-weight: 700; }
footer .fb-thin { font-weight: 300; }
footer .fb-bold { font-weight: 700; }
footer .footer-bottom p.fb-legal { flex-basis: 100%; margin-top: 18px; font-size: 11px; line-height: 1.6; opacity: .85; }

@media (max-width: 700px) { footer .fb-right { text-align: left; } footer .g-mark { height: 51px; } }
@media (max-width: 760px) {
  .wrap, .content { padding-left: 20px; padding-right: 20px; }
  .site-header .header-inner { padding-top: 10px; padding-bottom: 10px; }
  .brand-plate img { height: 60px; }
  html.header-compact .brand-plate img { height: 45px; }
  .hero { min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); }
}
@media (max-width: 640px) {
  .ai-rule { --ai-w: calc((100vw - 40px - 16px) / 3); gap: 8px; }
  .gauge { top: auto; bottom: 16px; right: 16px; width: auto; }
  .gauge .scale { display: none; }
  .gauge .marker { position: static; transform: none; display: inline-block; box-shadow: 0 2px 8px rgba(var(--kelp-rgb),.5); }
  .gauge .marker::after { display: none; }
  .hero::after {
    background: linear-gradient(0deg, rgba(var(--kelp-rgb),.9) 0%, rgba(var(--kelp-rgb),.62) 55%, rgba(var(--kelp-rgb),.35) 100%);
  }
}