/* Vision Oil and Gas: one stylesheet for the whole site.
   Mobile-first. Colors are tokens on :root; change them here, not in the pages.
   Look: bright and open. Light surfaces for most of the page (paper, white, a pale sky band),
   navy for text, the contact band and the footer, and amber in small doses. */

:root {
  /* Light surfaces */
  --paper: #f7f5f0;        /* page background, warm off-white */
  --white: #ffffff;        /* cards, header, form fields */
  --sky-50: #e6eef4;       /* every second section: a pale "Kentucky sky" tint */
  --paper-2: #efebe2;      /* illustration panels */

  /* Brand */
  --navy: #14304a;         /* headings, primary buttons, contact band */
  --navy-deep: #0e2234;    /* footer */
  --amber: #e8942a;        /* fills only on light backgrounds (rules, icons, buttons with navy text). Never text on light. */
  --amber-hover: #f0a84a;
  --rust: #a4470f;         /* links, eyebrow labels and small accents on light backgrounds */
  --rust-dark: #7d3408;

  /* Text and lines */
  --ink: #1b2a39;          /* body text */
  --slate: #4a5664;        /* secondary copy, captions */
  --muted-floor: #6b7785;  /* the lightest text allowed on white */
  --line: #d6d0c3;         /* warm hairlines */
  --line-cool: #cbd6e0;    /* cool hairlines (header, sky band) */

  /* On navy */
  --text-on-dark: #f1f4f7;
  --muted-on-dark: #b9c6d3;
  --line-dark: rgba(214, 226, 240, 0.16);

  --font-head: "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: 16px;
  --maxw: 1160px;
  --radius: 6px;
  --radius-lg: 10px;
  --section-y: clamp(56px, 9vw, 112px);
  --shadow-card: 0 1px 2px rgba(20, 48, 74, 0.05), 0 10px 28px -16px rgba(20, 48, 74, 0.22);

  --header-h: 70px;        /* sticky header height; anchors scroll to just below it */

  color-scheme: light;
}

@media (min-width: 768px) { :root { --gutter: 28px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--navy);
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.25rem, 6.4vw, 3.6rem); }
h2 { font-size: clamp(1.85rem, 4.4vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.55rem); font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li + li { margin-top: 0.35em; }
a { color: var(--rust); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--rust-dark); }
strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
  border-radius: 2px;
}
.cta-band :focus-visible, .site-footer :focus-visible { outline-color: var(--amber); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: max(var(--gutter), env(safe-area-inset-left)); top: -100px; z-index: 100;
  background: var(--navy); color: var(--white);
  padding: 10px 16px; font-weight: 600; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; color: var(--white); }

.container {
  width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}

/* Illustration panels: line drawings on the contour background (no photos) */
.art-panel {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2) url("/assets/img/topo-light.svg") center / cover no-repeat;
  padding: 24px;
}
.art-panel svg { width: 100%; max-width: 380px; height: auto; }
.art-line { stroke: var(--navy); stroke-width: 2.2; }
.art-contour { stroke: var(--navy); stroke-width: 1.2; opacity: 0.25; }
.art-sun { fill: var(--amber); opacity: 0.9; }
.grid-2-wide > .art-panel { align-self: start; }
@media (min-width: 1000px) { .grid-2-wide > .art-panel { min-height: 360px; } }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line-cool);
  box-shadow: 0 1px 0 rgba(20, 48, 74, 0.03), 0 6px 18px -14px rgba(20, 48, 74, 0.35);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(8px); }
}
.site-header { padding-top: env(safe-area-inset-top); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }

/* Logo: the Valley Sunrise symbol (assets/img/brand/) plus the HTML wordmark.
   The footer uses the reverse symbol; colors of the wordmark follow the lockup (navy + rust, white + amber on navy). */
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; min-height: 40px; }
.brand:hover { color: var(--navy); }
.brand-mark { width: 54px; height: auto; flex: none; display: block; }
@media (min-width: 600px) { .brand-mark { width: 62px; } }
.brand-text { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-head); text-transform: uppercase; }
.brand-name { font-size: 1.55rem; font-weight: 700; letter-spacing: 0.06em; }
.brand-sub { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.22em; color: var(--rust); margin-top: 3px; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--navy);
  border: 1px solid var(--line-cool); border-radius: var(--radius);
  font: 600 1.05rem/1 var(--font-head); letter-spacing: 0.02em;
  padding: 10px 12px; min-height: 44px; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--navy); }
.nav-toggle-bars { position: relative; width: 20px; height: 2px; background: currentColor; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform 0.2s ease; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Without JS the toggle is hidden and the menu is always shown. */
html:not(.js) .nav-toggle { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li + li { margin-top: 0; }
.site-nav a {
  display: block;
  color: var(--navy);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  padding: 12px 0;
}
.site-nav a:hover { color: var(--rust); }
.site-nav a[aria-current="page"] { color: var(--rust); }

@media (max-width: 959.98px) {
  html:not(.js) .header-inner { flex-wrap: wrap; padding-bottom: 8px; }
  html:not(.js) .site-nav { width: 100%; }
  html:not(.js) .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
  html.js .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line-cool);
    padding: 8px var(--gutter) 20px;
    box-shadow: 0 18px 30px -10px rgba(20, 48, 74, 0.25);
  }
  html.js .site-nav[hidden] { display: none; }
  html.js .site-nav li { border-bottom: 1px solid var(--line-cool); }
  .site-nav .nav-cta { margin-top: 16px; text-align: center; }
  html.js .site-nav li:last-child { border-bottom: 0; }
}
@media (min-width: 960px) {
  .nav-toggle, html:not(.js) .nav-toggle { display: none; }
  .site-nav, html.js .site-nav[hidden] { display: block; }
  .site-nav ul { display: flex; align-items: center; gap: 28px; }
  .site-nav a { font-size: 1.1rem; padding: 8px 0; border-bottom: 3px solid transparent; }
  .site-nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--amber); }
  .site-nav .nav-cta a { border: 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font: 700 1.12rem/1 var(--font-head);
  letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary, .site-nav .nav-cta a.btn-primary { background: var(--navy); color: var(--white); padding: 12px 22px; }
.btn-primary:hover, .site-nav .nav-cta a.btn-primary:hover { background: var(--navy-deep); color: var(--white); }
.btn-ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-ghost:hover { border-color: var(--rust); color: var(--rust); background: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row .btn { flex: 1 1 220px; }
@media (min-width: 600px) { .btn-row .btn { flex: 0 0 auto; } }

/* ---------- Eyebrow / lede ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 0.95rem/1.2 var(--font-head);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--amber); flex: none; border-radius: 2px; }
.lede { font-size: clamp(1.1rem, 2.3vw, 1.25rem); color: var(--slate); max-width: 60ch; }
.muted { color: var(--slate); }
.nowrap { white-space: nowrap; } /* keeps a hyphenated name like Tri-State on one line */

/* ---------- Hero (home): split layout, daylight scene ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--sky-50) 0%, #f1f3f2 45%, var(--paper) 100%);
  padding: clamp(36px, 7vw, 80px) 0 clamp(40px, 6vw, 72px);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/assets/img/topo-light.svg") left top / cover no-repeat;
  opacity: 0.55;
}
.hero-inner { display: grid; gap: 32px; align-items: center; }
.hero h1 { max-width: 14ch; font-size: clamp(2.4rem, 7vw, 3.75rem); line-height: 1.03; }
.hero h1 span { color: var(--rust); display: inline-block; }
.hero .btn-row { margin-top: 28px; }
.hero-art {
  position: relative; margin: 0;
  border-radius: 4px 48px 4px 4px;
  overflow: hidden;
  background: var(--sky-50);
  border-bottom: 6px solid var(--amber);
  box-shadow: 0 22px 44px -26px rgba(20, 48, 74, 0.45);
  aspect-ratio: 640 / 440;
}
.hero-photo { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; }
  .hero-art { border-radius: 4px 64px 4px 4px; }
}

/* Trust strip under the hero */
.trust { background: var(--white); border-top: 1px solid var(--line-cool); border-bottom: 1px solid var(--line); }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trust-list li { margin: 0; padding: 18px 12px 18px 16px; border-left: 3px solid var(--amber); display: flex; flex-direction: column; gap: 4px; }
.trust-list li:nth-child(n+3) { border-top: 1px solid var(--line); }
.trust-label { font: 600 0.82rem/1.2 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.trust-value { font: 700 1.12rem/1.25 var(--font-head); color: var(--navy); }
@media (min-width: 900px) {
  .trust-list { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .trust-list li { padding: 24px 20px; }
  .trust-list li:nth-child(n+3) { border-top: 0; }
  .trust-value { font-size: 1.25rem; }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-50) 0%, var(--white) 85%);
  padding: clamp(44px, 8vw, 88px) 0 clamp(36px, 6vw, 64px);
  border-bottom: 4px solid var(--amber);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/assets/img/topo-light.svg") right center / cover no-repeat;
  opacity: 0.8;
}
.page-hero h1 { font-size: clamp(2.3rem, 7vw, 3.75rem); max-width: 22ch; }

/* Photo in the interior page hero: text left, photo right from 900px; photo under the text on phones */
.page-hero-inner { display: grid; gap: 28px; align-items: center; }
.page-hero-art {
  position: relative; margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: 4px 32px 4px 4px;
  overflow: hidden;
  background: var(--sky-50);
  border-bottom: 5px solid var(--amber);
  box-shadow: 0 22px 44px -26px rgba(20, 48, 74, 0.45);
}
.page-hero-art img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .page-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .page-hero-art { border-radius: 4px 48px 4px 4px; }
  .page-hero.has-photo h1 { font-size: clamp(2.3rem, 4.4vw, 3.4rem); }
}

/* ---------- Sections ---------- */
.section { padding: var(--section-y) 0; }
.section-paper { background: var(--paper); }
.section-sky { background: var(--sky-50); }
.section-white { background: var(--white); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 5vw, 48px); }
.section-head p { font-size: 1.12rem; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }

.topo-light { position: relative; isolation: isolate; }
.topo-light::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/img/topo-light.svg") center / cover no-repeat; opacity: 0.6; }

/* ---------- Grids / cards ---------- */
.grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2-wide { grid-template-columns: 1.2fr 0.8fr; gap: 48px; } }

.card {
  background: var(--white);
  border: 1px solid #e2ddd2;
  border-radius: var(--radius-lg);
  --card-pad: clamp(22px, 4vw, 34px);
  padding: var(--card-pad);
  box-shadow: var(--shadow-card);
}
.section-sky .card { border-color: var(--line-cool); }
.section-white .card { background: var(--paper); box-shadow: none; border-color: var(--line); }
.card h3 { margin-bottom: 0.4em; }
.card > :last-child { margin-bottom: 0; }

/* Photo as the top media of a card: full bleed under the amber top rule */
.card.has-media { overflow: hidden; }
.card-media {
  width: calc(100% + 2 * var(--card-pad));
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 22px;
  background: var(--sky-50);
}
.service .card-media { margin-bottom: 16px; }

.pillar { position: relative; border-top: 4px solid var(--amber); display: flex; flex-direction: column; }
.pillar-icon { width: 64px; height: 64px; color: var(--navy); margin-bottom: 16px; }
.pillar h3 { font-size: clamp(1.6rem, 3.6vw, 2rem); font-weight: 700; }
.pillar ul { padding-left: 0; list-style: none; margin-top: 4px; }
.pillar li { padding-left: 22px; position: relative; }
.pillar li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 10px; height: 3px; border-radius: 2px; background: var(--amber); }
.pillar .card-link { margin-top: auto; padding-top: 12px; }

.card-link { font: 700 1.1rem/1.2 var(--font-head); letter-spacing: 0.01em; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; color: var(--rust); }
.card-link:hover { color: var(--rust-dark); text-decoration: underline; }
.card-link::after { content: "\2192"; transition: transform 0.15s ease; }
.card-link:hover::after { transform: translateX(3px); }

/* Service cards */
.service { display: flex; flex-direction: column; gap: 6px; }
.service-num { font: 700 1rem/1 var(--font-head); color: var(--rust); letter-spacing: 0.12em; }
.service ul { color: var(--slate); margin-bottom: 0.5em; }
.service-primary { border-top: 4px solid var(--amber); }
.service-primary h3 { font-size: clamp(1.45rem, 3.2vw, 1.75rem); }
.svc-group { display: flex; margin-bottom: 18px; }
.grid + .svc-group { margin-top: clamp(32px, 5vw, 48px); }

/* Definition-style fact list */
.facts { display: grid; gap: 0; margin: 0; }
.facts div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts div:first-child { border-top: 1px solid var(--line); }
.section-sky .facts div { border-color: var(--line-cool); }
.facts dt { font: 600 0.92rem/1.2 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.facts dd { margin: 0; font-size: 1.1rem; color: var(--ink); }
@media (min-width: 600px) { .facts div { grid-template-columns: 200px 1fr; gap: 16px; align-items: baseline; } }

/* Audience routes on home */
.route { display: flex; flex-direction: column; }
.route p { color: var(--slate); }
.route .card-link { margin-top: auto; }

/* Where we work panel */
.area-panel { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 900px) { .area-panel { grid-template-columns: 1fr 1fr; gap: 48px; } }
.map-figure { margin: 0; background: var(--white); border: 1px solid var(--line-cool); border-radius: var(--radius-lg); padding: 12px 12px 10px; box-shadow: var(--shadow-card); }
.map-figure figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.92rem; color: var(--ink); margin-top: 6px; padding: 0 4px; }
.map-figure .key { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: none; }
.map-figure .key-basin { background: rgba(232, 148, 42, 0.3); border: 1px solid rgba(232, 148, 42, 0.75); }
.map-figure .key-ky { background: rgba(232, 148, 42, 0.85); }
.map-figure .key-item { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; }
.map-figure .map-note { flex-basis: 100%; color: var(--slate); font-size: 0.85rem; }
.region-map { width: 100%; height: auto; }
.map-states path { fill: #eef3f7; stroke: #7f98b0; stroke-width: 1.3; stroke-linejoin: round; }
.map-state-labels text { fill: #536273; font: 600 15px var(--font-head); letter-spacing: 0.22em; text-anchor: middle; }
.map-region-labels text { fill: var(--navy); font: 700 18px var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; text-anchor: middle; paint-order: stroke; stroke: rgba(255, 255, 255, 0.8); stroke-width: 3px; stroke-linejoin: round; }
.map-region-labels text.map-specialty { font-size: 20px; stroke: rgba(255, 246, 230, 0.75); }
.map-city-ring { fill: none; stroke: var(--navy); stroke-width: 2; }
.map-city-dot { fill: var(--amber); stroke: var(--navy); stroke-width: 1.5; }
.map-city text { fill: var(--navy); font: 600 17px var(--font-body); paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; }
@media (max-width: 599.98px) {
  /* The map scales down to about half size on phones, so its labels are drawn larger here
     (this block must come after the base label rules above, or their font shorthand wins).
     KENTUCKY moves into the open east of the state so it clears the larger "Owensboro". */
  .map-state-labels text { font-size: 27px; letter-spacing: 0.12em; }
  .map-state-labels text:nth-child(3) { transform: translate(22px, 46px); }
  .map-region-labels text { font-size: 27px; letter-spacing: 0.02em; }
  .map-region-labels text.map-specialty { font-size: 29px; }
  .map-city text { font-size: 28px; }
  .map-figure { padding: 8px 6px 10px; }
}

/* Numbered topics for operations */
.topic { padding: clamp(28px, 5vw, 44px) 0; border-top: 1px solid var(--line); display: grid; gap: 12px 40px; }
.topic:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .topic { grid-template-columns: 280px 1fr; } }
.topic h2 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); }
.topic-num { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem/1 var(--font-head); color: var(--rust); letter-spacing: 0.14em; margin-bottom: 10px; }
.topic-num::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--amber); }
.topic-body { max-width: 68ch; }
.topic-body ul { padding-left: 1.1em; }
.topic-body .facts { margin: 4px 0 1.2em; }

/* CTA band: the one navy section */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(120deg, #1a3a58, var(--navy) 55%);
  border-top: 4px solid var(--amber);
  color: var(--text-on-dark);
}
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/img/topo-dark.svg") center / cover no-repeat; opacity: 0.55; }
.cta-band h2 { color: var(--white); }
.cta-inner { display: grid; gap: 24px; align-items: center; }
.cta-inner h2 { margin-bottom: 0.3em; }
.cta-inner p { color: var(--muted-on-dark); margin: 0; max-width: 56ch; }
.cta-inner p a { color: var(--text-on-dark); text-decoration: underline; }
.cta-inner p a:hover { color: var(--amber); }
.cta-band .btn-primary { background: var(--amber); color: var(--navy); }
.cta-band .btn-primary:hover { background: var(--amber-hover); color: var(--navy); }
.cta-band .btn-ghost { border-color: rgba(241, 244, 247, 0.6); color: var(--text-on-dark); }
.cta-band .btn-ghost:hover { border-color: var(--amber); color: var(--amber); background: transparent; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1fr auto; } }

/* ---------- Forms ---------- */
.contact-layout { display: grid; gap: 40px; }
@media (min-width: 960px) { .contact-layout { grid-template-columns: 0.8fr 1.2fr; gap: 64px; } }
.form-card { background: var(--white); color: var(--ink); border: 1px solid #e2ddd2; border-top: 4px solid var(--amber); border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow-card); }
.form-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field .req { color: var(--rust); font-weight: 600; }
.field .hint { display: block; font-size: 0.92rem; color: var(--slate); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%;
  font: inherit; color: var(--ink);
  background: var(--white);
  border: 1.5px solid #8a95a1;
  border-radius: var(--radius);
  padding: 11px 12px;
  min-height: 48px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--rust); outline-offset: 1px; border-color: var(--navy); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #b3261e; }
/* When the browser scrolls to a field (empty required field on Send), leave room for its label
   above it, under the sticky header. */
.field input, .field textarea { scroll-margin-top: 40px; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.choice-row { display: grid; gap: 10px; }
@media (min-width: 520px) { .choice-row { grid-template-columns: 1fr 1fr; } }
.choice { display: flex; align-items: center; gap: 10px; line-height: 1.25; border: 1.5px solid #8a95a1; border-radius: var(--radius); padding: 10px 12px; min-height: 48px; cursor: pointer; font-weight: 500; }
.choice:has(input:checked) { border-color: var(--rust); background: #fbf1e9; }
.choice:has(input:focus-visible) { outline: 3px solid var(--rust); outline-offset: 2px; }
.field label.choice { display: flex; margin-bottom: 0; font-weight: 500; }
.choice input { width: 20px; height: 20px; accent-color: var(--rust); margin: 0; flex: none; }
.choice input:focus-visible { outline: none; }
/* Honeypot: hidden with display:none (never off-screen) and no label, so autofill and password managers skip it. */
.hp { display: none !important; }
.form-note { font-size: 0.95rem; color: var(--slate); background: var(--paper); border-left: 4px solid var(--amber); padding: 12px 14px; margin: 0 0 22px; border-radius: 0 var(--radius) var(--radius) 0; }
.form-note strong { color: var(--ink); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.form-result { margin-top: 20px; border: 2px solid var(--rust); border-radius: var(--radius); padding: 16px 18px; background: #fbf1e9; color: var(--ink); }
.form-result[hidden] { display: none; }
.form-result h3 { font-size: 1.4rem; margin-bottom: 0.3em; }
.form-result p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); font-size: 0.98rem; color: var(--muted-on-dark); }
.site-footer .brand, .site-footer .brand:hover { color: var(--text-on-dark); }
.site-footer .brand-sub { color: var(--amber); }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 { font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-dark); margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: 6px; }
.site-footer a { color: var(--text-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--amber); text-decoration: underline; }
.footer-blurb { max-width: 40ch; margin-top: 14px; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 0.92rem; }
.footer-bottom p { margin: 0; }
.footer-credit a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- About: at-a-glance card ---------- */
.glance { align-self: start; }
.glance h2 { font-size: clamp(1.4rem, 3vw, 1.7rem); margin-bottom: 0.6em; }
.glance .facts div { padding: 12px 0; }
@media (min-width: 600px) { .glance .facts div { grid-template-columns: 130px 1fr; } }

/* ---------- About: photo credits ---------- */
.credits { background: var(--paper); padding: clamp(40px, 6vw, 64px) 0; font-size: 0.95rem; }
.credits h2 { font-size: clamp(1.4rem, 3vw, 1.7rem); }
.credits .muted { max-width: 70ch; }
.credit-list { padding-left: 1.1em; max-width: 80ch; color: var(--slate); }
.credit-list strong { color: var(--ink); }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; align-content: center; }
.notfound .code { font: 700 clamp(5rem, 22vw, 10rem)/0.9 var(--font-head); color: var(--navy); margin: 0 0 16px; display: inline-block; border-bottom: 8px solid var(--amber); padding-bottom: 6px; }


/* ---------- Phones and tablets ----------
   Layout and tap-target adjustments below 960px (where the menu button shows). The desktop
   look (960px and up, mouse or touch) is not touched by these blocks. */

/* Compact sticky header on phones and on short landscape screens. */
@media (max-width: 599.98px) { :root { --header-h: 62px; } }
@media (max-height: 520px) and (orientation: landscape) and (max-width: 959.98px) {
  :root { --header-h: 56px; }
  .brand-mark { width: 52px; }
}

@media (max-width: 959.98px) {
  /* Mobile menu: an overlay panel under the sticky header. It scrolls on its own when the
     screen is short (landscape), the page behind it does not scroll, and a scrim marks it as
     an overlay (tapping the scrim closes it; see site.js). */
  html.js .site-nav {
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
    overflow-y: auto; overscroll-behavior: contain;
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 18px 30px -10px rgba(20, 48, 74, 0.25), 0 0 0 100vmax rgba(14, 34, 52, 0.32);
    clip-path: inset(0 -100vmax -100vmax -100vmax);
  }
  /* Lock scrolling on the root only. Setting overflow on body as well would make body its own
     scroll container, and the sticky header (and the menu under it) would then stick to body
     and scroll off the top of the screen when the menu is opened part-way down a page. */
  html.nav-open { overflow: hidden; }
  /* While the menu is open a tap on the scrim only closes it; it never also follows a link below. */
  html.nav-open main, html.nav-open .site-footer { pointer-events: none; }
  .site-nav a { min-height: 52px; display: flex; align-items: center; }
  html.js .site-nav .nav-cta { border-bottom: 0; }
  .site-nav .nav-cta a { justify-content: center; }
}

@media (max-width: 959.98px) {
  /* Logo link: a full 48px tap target (the lockup itself keeps its size). */
  .brand { min-height: 48px; }

  /* Card links ("See services ->"): a 48px tall row. */
  .card-link { min-height: 48px; }
  .pillar .card-link { padding-top: 4px; }

  /* Footer: each link is a 44px row, 8px apart. The company links sit in two columns
     on small screens so the list stays short. */
  .site-footer li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .site-footer .footer-grid ul { display: grid; gap: 8px 24px; }
  .site-footer .footer-grid li + li { margin-top: 0; }

  /* Links inside running text stay inline (line height unchanged); an invisible box
     centered on the link makes its tap area 44px tall without moving any text. */
  main p a:not(.btn), main dd a, main li a:not(.btn):not(.card-link), .footer-credit a {
    position: relative;
    white-space: nowrap; /* all of these are a few words; one line keeps the tap box whole */
  }
  main p a:not(.btn)::after, main dd a::after, main li a:not(.btn):not(.card-link)::after, .footer-credit a::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; transform: translateY(-50%);
  }
  .footer-bottom { row-gap: 14px; }

  /* Photo credits: more room between lines so a link's tap area does not run into the link
     on the line below. */
  .credit-list { line-height: 2.2; }
  .credit-list li + li { margin-top: 0.7em; }
  .credit-list a + a { margin-left: 2px; }
}

@media (max-width: 959.98px) {
  /* Text floor on phones and tablets: 14px for real text (the "Oil and Gas" under VISION is
     part of the logo lockup and keeps its 12.8px). */
  .trust-label { font-size: 0.875rem; }
  .map-figure .map-note { font-size: 0.875rem; }

  /* Headings: even line lengths, so no heading ends on a single orphaned word. */
  h1, h2, h3 { text-wrap: balance; }
}

@media (max-width: 399.98px) {
  /* Narrow phones: links in running text wrap onto neighbouring lines here. A little more line
     height keeps each link's 44px tap box clear of the link on the next line, and a 2px gap
     keeps two links on one line 8px apart. */
  .facts dd:has(a) { line-height: 2.5; } /* only values with a link; plain values keep body spacing */
  .credit-list { line-height: 2.4; }
  .credit-list li + li { margin-top: 0.5em; }
}

@media (max-width: 719.98px) {
  .site-footer .footer-grid nav ul { grid-template-columns: repeat(2, max-content); }
}

@media (max-width: 599.98px) {
  /* Home hero: tighter rhythm so the headline, intro and primary button fit the first
     screen and the photo starts on it. */
  .hero { padding: 24px 0 32px; }
  .hero-inner { gap: 24px; }
  /* Eyebrow letter-spacing just tight enough that the line fits on one line from 390px up;
     below that it tightens again (see the 389px block) to fit from 360px up. Narrower screens
     wrap it, and the markup keeps each separator dot with the segment after it, so a line
     never ends on a dot. */
  .hero .eyebrow { font-size: 0.875rem; letter-spacing: 0.06em; gap: 8px; margin-bottom: 12px; }
  .hero .eyebrow::before { width: 20px; }
  .hero h1 { font-size: clamp(2.15rem, 9.6vw, 2.5rem); margin-bottom: 0.4em; }
  .hero .lede { font-size: 1.0625rem; line-height: 1.55; margin-bottom: 0; }
  .hero .btn-row { margin-top: 20px; gap: 10px; }
  .hero-art { aspect-ratio: 16 / 10; border-radius: 4px 36px 4px 4px; }

  /* Interior page heroes: same tightening, shorter photo. */
  .page-hero { padding: 32px 0 28px; }
  .page-hero-inner { gap: 22px; }
  .page-hero h1 { font-size: clamp(2.15rem, 9.6vw, 2.5rem); }
  .page-hero .lede { margin-bottom: 0; }
  .notfound .btn-row { margin-top: 18px; }
  .page-hero-art { aspect-ratio: 16 / 10; border-radius: 4px 28px 4px 4px; }

  /* Trust strip: one column, label above value, full width. */
  .trust-list { grid-template-columns: minmax(0, 1fr); }
  .trust-list li { padding: 14px 4px 14px 16px; gap: 2px; }
  .trust-list li + li { border-top: 1px solid var(--line); }

  /* Contact form: full-width Send and result buttons. */
  .form-actions .btn, .form-result .btn { width: 100%; }
  .form-card { padding: 22px 18px; }
}

@media (max-width: 389.98px) {
  .hero .eyebrow { letter-spacing: 0.02em; gap: 6px; }
  .hero .eyebrow::before { width: 16px; }
}

/* Two-column contact form on tablets and landscape phones: the "Optional" hint under the
   Company label would push that input below the Name input next to it; line the inputs up. */
@media (min-width: 640px) and (max-width: 959.98px) {
  .form-grid { align-items: end; }
}

/* Tablets (720-959px): the three-card grids are two columns there; let the third card span
   the full row instead of leaving a gap. */
@media (min-width: 720px) and (max-width: 959.98px) {
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .hero-art { aspect-ratio: 16 / 9; }
  .page-hero-art { aspect-ratio: 16 / 8; }
  /* The map stacks under the text here; keep it to a readable size instead of full width,
     centered in the column. KENTUCKY moves into the open east of the state so it clears
     "Owensboro". */
  .map-figure { max-width: 640px; margin-inline: auto; }
  .map-state-labels text { font-size: 17px; }
  .map-state-labels text:nth-child(3) { transform: translate(30px, 30px); }
}

/* Landscape phones (up to the largest iPhones, 932px wide): text and photo side by side so
   the photo is not taller than the screen. */
@media (min-width: 600px) and (max-width: 959.98px) and (max-height: 520px) and (orientation: landscape) {
  .hero { padding: 16px 0 28px; }
  /* Photo top lines up with the text instead of centering against the taller text column. */
  .hero-inner, .page-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; align-items: start; }
  .hero h1, .page-hero h1, .page-hero.has-photo h1 { font-size: 2.1rem; }
  .hero h1 { margin-bottom: 0.35em; }
  .hero .lede, .page-hero .lede { font-size: 1.0625rem; line-height: 1.5; }
  .hero .lede { font-size: 1rem; line-height: 1.45; } /* first button comes up onto the first screen */
  .hero .eyebrow { font-size: 0.875rem; letter-spacing: 0.06em; gap: 8px; margin-bottom: 10px; }
  .hero .eyebrow::before { width: 20px; }
  .hero .btn-row { margin-top: 16px; }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .hero-art, .page-hero-art { aspect-ratio: 4 / 5; max-height: calc(100vh - var(--header-h) - 40px); width: 100%; }
  .page-hero { padding: 28px 0; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
/* Smooth scrolling for in-page links. site.js adds .smooth-scroll only after the page and its
   fonts have loaded, so the browser's first jump to a #target is instant (see settleScroll). */
@media (prefers-reduced-motion: no-preference) { html.smooth-scroll { scroll-behavior: smooth; } }

/* ---------- Print ---------- */
@media print {
  .site-header, .nav-toggle, .cta-band, .hero-art, .page-hero-art, .card-media { display: none; }
  body { background: #fff; color: #000; }
}