/* Sunshine State Canning & Bottling — core stylesheet */

:root {
  --black: #0b0b0c;
  --black-soft: #141416;
  --black-line: #24242a;
  --white: #ffffff;
  --off-white: #f6f5f2;
  --grey: #8a8a93;
  --grey-light: #c9c9d1;
  --gold: #c9a227;
  --gold-bright: #e2be4a;
  --gold-dim: rgba(201, 162, 39, 0.16);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1160px;
  --gutter: 24px;
  --radius: 2px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--gold-bright); text-decoration: none; }
a:hover { color: var(--white); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.45rem; }

p { margin: 0 0 1.1em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}

.lede {
  font-size: 1.2rem;
  color: var(--grey-light);
  max-width: 62ch;
}

.muted { color: var(--grey); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 15px 30px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--black); }

.btn-ghost {
  background: transparent;
  color: var(--gold-bright);
}
.btn-ghost:hover { background: var(--gold); color: var(--black); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 12, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--black-line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

.logo { display: flex; align-items: center; gap: 12px; color: var(--white); }
.logo:hover { color: var(--white); }
.logo-mark {
  width: 46px;
  height: 46px;
  flex: none;
  display: block;
  /* The crest carries its own white disc, so it needs no border or ground. */
  border-radius: 50%;
}
.logo-text { line-height: 1.15; }
.logo-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.logo-text span {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey);
}

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  color: var(--grey-light);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current="page"] { color: var(--gold-bright); }
.nav-links a.btn[aria-current="page"] { background: var(--gold-bright); border-color: var(--gold-bright); }
.nav-links .btn { color: var(--black); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--black-line);
  color: var(--white);
  padding: 9px 12px;
  cursor: pointer;
  border-radius: var(--radius);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 130px 0 110px;
  border-bottom: 1px solid var(--black-line);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 420px at 78% 8%, rgba(201, 162, 39, 0.13), transparent 62%),
    linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--gold); }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin-top: 4.5rem;
  background: var(--black-line);
  border: 1px solid var(--black-line);
}
.hero-stats div { background: var(--black); padding: 24px 22px; }
.hero-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.hero-stats span { font-size: 0.8rem; color: var(--grey); letter-spacing: 0.03em; }

/* ---------- Sections ---------- */

.section { padding: 100px 0; border-bottom: 1px solid var(--black-line); }
.section-light { background: var(--off-white); color: var(--black); }
.section-light .lede { color: #4a4a52; }
.section-light .muted { color: #6a6a74; }
.section-light h2, .section-light h3 { color: var(--black); }
.section-light a:not(.btn) { color: #7d6310; }
.section-light .eyebrow,
.section-light .card .num { color: #7d6310; }

.section-head { max-width: 70ch; margin-bottom: 3.5rem; }

/* ---------- Cards ---------- */

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  border: 1px solid var(--black-line);
  padding: 32px 28px;
  background: var(--black-soft);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--gold); transform: translateY(-3px); }
.card h3 { margin-bottom: 0.6rem; }
.card p:last-child { margin-bottom: 0; }
.card .num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--gold);
  letter-spacing: 0.18em;
  display: block;
  margin-bottom: 1.2rem;
}

.section-light .card { background: var(--white); border-color: #e2e0da; }
.section-light .card:hover { border-color: var(--gold); }

/* ---------- Lists ---------- */

.check { list-style: none; margin: 0; padding: 0; }
.check li {
  position: relative;
  padding: 11px 0 11px 30px;
  border-bottom: 1px solid var(--black-line);
  font-size: 0.97rem;
}
.check li::before {
  content: "";
  position: absolute;
  left: 0; top: 19px;
  width: 9px; height: 9px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.section-light .check li { border-bottom-color: #e2e0da; }

/* ---------- Split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ---------- CTA band ---------- */

.cta-band {
  background: linear-gradient(135deg, #15130c 0%, var(--black) 60%);
  border-top: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim);
  padding: 90px 0;
  text-align: center;
}
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lede { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Forms ---------- */

.form-shell {
  border: 1px solid var(--black-line);
  background: var(--black-soft);
  padding: 36px 32px;
}
.section-light .form-shell { background: var(--white); border-color: #e2e0da; }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 8px;
}
.section-light .field label { color: #6a6a74; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--black);
  border: 1px solid var(--black-line);
  color: var(--off-white);
  font-family: inherit;
  font-size: 0.95rem;
  border-radius: var(--radius);
}
.section-light .field input,
.section-light .field select,
.section-light .field textarea {
  background: var(--off-white);
  border-color: #d8d5cd;
  color: var(--black);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-color: var(--gold);
}
/* Mouse focus keeps the quieter treatment. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.form-note { font-size: 0.82rem; color: var(--grey); margin-top: 14px; }

.form-success {
  display: none;
  border: 1px solid var(--gold);
  background: var(--gold-dim);
  padding: 20px 22px;
  margin-bottom: 24px;
}
.form-success.is-visible { display: block; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--black);
  padding: 70px 0 34px;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--black-line);
}
.footer-grid h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: var(--grey-light); }
.footer-grid a:hover { color: var(--gold-bright); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 26px;
  color: var(--grey);
  font-size: 0.82rem;
}

/* ---------- Page header (inner pages) ---------- */

.page-head {
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--black-line);
  background: radial-gradient(620px 340px at 88% 0%, rgba(201, 162, 39, 0.1), transparent 65%);
}

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  margin-left: 8px;
  vertical-align: middle;
}

/* Gold on white fails contrast — darken the badge inside light sections. */
.section-light .badge {
  color: #7d6310;
  border-color: #cdbb85;
}

/* ---------- Responsive ---------- */

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .section { padding: 72px 0; }
  .hero { padding: 90px 0 76px; }

  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 78px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--black);
    border-bottom: 1px solid var(--black-line);
    padding: 10px 24px 24px;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--black-line);
  }
  .nav-links .btn { text-align: center; margin-top: 16px; border-bottom: 1px solid var(--gold); }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  body { font-size: 16px; }
}

/* ==========================================================================
   Photography
   Shot temperatures vary across the set (cool filler, warm bottling line,
   monochrome conveyor), so every image is pulled slightly toward the brand's
   neutral before it lands on the page. Overlays keep type legible on top.
   ========================================================================== */

.media {
  position: relative;
  overflow: hidden;
  background: var(--black-soft);
  border: 1px solid var(--black-line);
}
.section-light .media { border-color: #e2e0da; background: #e9e7e1; }

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.72) contrast(1.06);
}

/* Aspect ratios — each box keeps its shape as the column narrows. */
.media-tall    { aspect-ratio: 3 / 4; }
.media-square  { aspect-ratio: 1 / 1; }
.media-wide    { aspect-ratio: 16 / 9; }
.media-banner  { aspect-ratio: 21 / 9; }

@media (max-width: 880px) {
  .media-tall { aspect-ratio: 4 / 3; }
}

/* Caption strip — names what the reader is looking at. */
.media figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 20px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  color: var(--off-white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

figure.media { margin: 0; }

/* --------------------------------------------------------------------------
   Hero with photographic ground
   -------------------------------------------------------------------------- */

.hero-photo { background: var(--black); }

.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center right;
  filter: saturate(0.55) contrast(1.05) brightness(0.82);
}

/* Gradient stack: solid at the headline, clearing toward the photo on the right. */
.hero-photo::after {
  background:
    linear-gradient(100deg, var(--black) 8%, rgba(11, 11, 12, 0.93) 36%, rgba(11, 11, 12, 0.55) 68%, rgba(11, 11, 12, 0.4) 100%),
    radial-gradient(760px 420px at 78% 8%, rgba(201, 162, 39, 0.16), transparent 62%),
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.6));
}

@media (max-width: 880px) {
  /* On a phone the headline covers the full width, so darken the whole frame. */
  .hero-photo::after {
    background:
      linear-gradient(180deg, rgba(11, 11, 12, 0.9) 0%, rgba(11, 11, 12, 0.82) 55%, rgba(11, 11, 12, 0.95) 100%),
      radial-gradient(600px 340px at 70% 10%, rgba(201, 162, 39, 0.16), transparent 62%);
  }
}

/* --------------------------------------------------------------------------
   Page head with photographic ground (inner pages)
   -------------------------------------------------------------------------- */

.page-head-photo {
  position: relative;
  overflow: hidden;
  background: var(--black);
}
.page-head-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  filter: saturate(0.5) contrast(1.05) brightness(0.72);
}
.page-head-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, var(--black) 10%, rgba(11, 11, 12, 0.9) 42%, rgba(11, 11, 12, 0.62) 100%),
    radial-gradient(620px 340px at 88% 0%, rgba(201, 162, 39, 0.12), transparent 65%);
}
.page-head-photo .wrap { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Full-bleed band
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  height: 340px;
  overflow: hidden;
  border-top: 1px solid var(--black-line);
  border-bottom: 1px solid var(--black-line);
  display: grid;
  place-items: center;
}
.band img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.5) contrast(1.05) brightness(0.66);
}
.band-text {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px;
  max-width: 30ch;
}
.band-text p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  color: var(--white);
  margin: 0;
  text-wrap: balance;
}
.band-text em { font-style: normal; color: var(--gold-bright); }

@media (max-width: 560px) { .band { height: 260px; } }

/* --------------------------------------------------------------------------
   Media + text split
   -------------------------------------------------------------------------- */

.split-media { align-items: center; }

@media (max-width: 880px) {
  /* Photo leads on narrow screens regardless of source order. */
  .split-media .media { order: -1; }
}

/* Optional-field marker inside a form label. */
.optional {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: #9a9aa4;
  font-size: 0.92em;
}
.section-light .optional { color: #5f5f68; }

/* External links carry a mark so it's clear they leave the site. */
.ext::after {
  content: " \2197";
  font-size: 0.85em;
  display: inline-block;
  vertical-align: baseline;
}

/* Named-partner panel. */
.partner {
  border: 1px solid var(--gold-dim);
  background: linear-gradient(135deg, #15130c 0%, var(--black-soft) 65%);
  padding: 30px 28px;
}
.partner h3 { margin-bottom: 0.4rem; }
.partner .partner-role {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}
.section-light .partner {
  background: var(--white);
  border-color: var(--gold);
}
.section-light .partner .partner-role { color: var(--gold-deep); }

/* Submission failure. Mirrors .form-success but in a warning tone, and only
   appears when a post actually fails. */
.form-error {
  display: none;
  border: 1px solid #a8603a;
  background: rgba(168, 96, 58, 0.14);
  padding: 20px 22px;
  margin-bottom: 24px;
}
.form-error.is-visible { display: block; }
.form-error a { color: var(--gold-bright); }
.section-light .form-error { background: #fdf1ea; border-color: #d9a383; }
.section-light .form-error a { color: #7d6310; }

/* Legal links in the footer's bottom bar. */
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { color: var(--grey-light); }
.footer-legal a:hover { color: var(--gold-bright); }

/* ---------- Focus visibility ----------
   Every interactive element gets a ring that is visible on both the dark and
   light grounds. Keyboard users only, so mouse clicks stay clean. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}
.section-light a:focus-visible,
.section-light button:focus-visible {
  outline-color: #7d6310;
}

/* Skip link — first tab stop, so keyboard users can jump past the nav. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--black);
  padding: 12px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip-link:focus {
  left: 0;
  color: var(--black);
}

/* Available to screen readers, invisible on screen. Used for section headings
   that the visual design does not call for but the heading order needs. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reduced motion ----------
   Smooth scrolling and transitions are comfort, not function. Anyone who has
   asked their system to reduce motion gets instant, static behaviour. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Tap target size (WCAG 2.2 AA, 2.5.8) ----------
   Footer links are standalone, not inline in a sentence, so the 24px minimum
   applies to them. Padding lifts them over the line without changing layout. */
.footer-grid li a,
.footer-legal a {
  display: inline-block;
  padding-block: 4px;
}
.footer-grid li { margin-bottom: 5px; }