/* ==========================================================================
   Dixie Aerial — shared design system
   One stylesheet for every page. Edit here, it changes everywhere.
   ========================================================================== */

/* --- 1. TOKENS -----------------------------------------------------------
   Light is the default, which is also what a browser reporting no colour
   preference gets. Dark applies only when the browser actually asks for it.
   Every colour is a token so the two themes stay in step; the [data-theme]
   hooks let a manual switch be added later without touching anything else.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Brand — from the logo: Alabama crimson, banner gold, charcoal ring */
  --crimson:      #a8202f;
  --crimson-lift: #8c1a27;   /* hover darkens on a light ground */
  --amber:        #8a6413;   /* the gold, darkened so it reads on white */
  --amber-soft:   #6f500f;
  --on-amber:     #ffffff;

  /* Surfaces */
  --bg:          #f7f6f4;
  --bg-2:        #ffffff;
  --panel:       #ffffff;
  --panel-2:     #f1efec;
  --line:        rgba(24, 20, 18, .14);
  --line-soft:   rgba(24, 20, 18, .075);
  --hover:       rgba(24, 20, 18, .055);
  --chip-bg:     rgba(24, 20, 18, .05);
  --inset:       #f2f0ed;
  --tile-bg:     #ffffff;
  --modal-bg:    #ffffff;
  --header-bg:   rgba(255, 255, 255, .9);
  --footer-bg:   #f1efec;
  --overlay:     rgba(28, 24, 22, .5);
  --field-bg:    #ffffff;
  --field-focus: #ffffff;
  --btn-border:  rgba(0, 0, 0, .09);
  --panel-blur:  none;

  /* Ink */
  --heading:     #14171a;
  --ink:         #1b1e22;
  --ink-2:       #4b525a;
  --muted:       #646c74;
  --on-accent:   #ffffff;
  --link-hover:  #a8202f;

  /* Signals */
  --ok:   #17794a;
  --warn: #8a5b09;
  --bad:  #b3261e;

  /* Page ground */
  --body-image:
    radial-gradient(1100px 600px at 82% -8%, rgba(168, 32, 47, .07), transparent 60%),
    radial-gradient(900px 520px at 8% 4%, rgba(217, 164, 65, .10), transparent 55%),
    linear-gradient(180deg, #f7f6f4 0%, #fbfaf9 55%, #f5f3f1 100%);

  /* Shape & motion */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --shadow:    0 1px 2px rgba(22, 18, 16, .05), 0 6px 20px rgba(22, 18, 16, .07);
  --shadow-lg: 0 20px 56px rgba(22, 18, 16, .18);
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Rhythm */
  --gap:  1.25rem;
  --pad:  clamp(1.25rem, 3vw, 2rem);
  --wide: 1180px;

  --font-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Dark, when the browser asks — and never when light is forced. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --crimson:      #a8202f;
    --crimson-lift: #c62b3c;
    --amber:        #d9a441;
    --amber-soft:   #f0c877;
    --on-amber:     #1a1206;

    --bg:          #0c0f13;
    --bg-2:        #11161c;
    --panel:       rgba(255, 255, 255, .045);
    --panel-2:     rgba(255, 255, 255, .075);
    --line:        rgba(255, 255, 255, .10);
    --line-soft:   rgba(255, 255, 255, .06);
    --hover:       rgba(255, 255, 255, .14);
    --chip-bg:     rgba(255, 255, 255, .06);
    --inset:       rgba(0, 0, 0, .30);
    --tile-bg:     rgba(14, 18, 23, .9);
    --modal-bg:    rgba(17, 22, 28, .97);
    --header-bg:   rgba(10, 13, 17, .82);
    --footer-bg:   rgba(8, 10, 13, .6);
    --overlay:     rgba(5, 7, 9, .78);
    --field-bg:    rgba(0, 0, 0, .32);
    --field-focus: rgba(0, 0, 0, .45);
    --btn-border:  rgba(255, 255, 255, .14);
  --panel-blur:  blur(10px);
    --panel-blur:  blur(10px);

    --heading:     #ffffff;
    --ink:         #eef1f4;
    --ink-2:       #c3cbd3;
    --muted:       #8d98a3;
    --on-accent:   #ffffff;
    --link-hover:  #ffffff;

    --ok:   #3fbf7f;
    --warn: #e0a33c;
    --bad:  #e06b66;

    --body-image:
      radial-gradient(1100px 600px at 82% -8%, rgba(168, 32, 47, .16), transparent 60%),
      radial-gradient(900px 520px at 8% 4%, rgba(217, 164, 65, .09), transparent 55%),
      linear-gradient(180deg, #0c0f13 0%, #0e1319 55%, #0c0f13 100%);

    --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .35);
    --shadow-lg: 0 24px 70px rgba(0, 0, 0, .55);
  }
}

/* The same values again, for a document that forces dark explicitly. */
:root[data-theme="dark"] {
--crimson:      #a8202f;
  --crimson-lift: #c62b3c;
  --amber:        #d9a441;
  --amber-soft:   #f0c877;
  --on-amber:     #1a1206;

  --bg:          #0c0f13;
  --bg-2:        #11161c;
  --panel:       rgba(255, 255, 255, .045);
  --panel-2:     rgba(255, 255, 255, .075);
  --line:        rgba(255, 255, 255, .10);
  --line-soft:   rgba(255, 255, 255, .06);
  --hover:       rgba(255, 255, 255, .14);
  --chip-bg:     rgba(255, 255, 255, .06);
  --inset:       rgba(0, 0, 0, .30);
  --tile-bg:     rgba(14, 18, 23, .9);
  --modal-bg:    rgba(17, 22, 28, .97);
  --header-bg:   rgba(10, 13, 17, .82);
  --footer-bg:   rgba(8, 10, 13, .6);
  --overlay:     rgba(5, 7, 9, .78);
  --field-bg:    rgba(0, 0, 0, .32);
  --field-focus: rgba(0, 0, 0, .45);
  --btn-border:  rgba(255, 255, 255, .14);

  --heading:     #ffffff;
  --ink:         #eef1f4;
  --ink-2:       #c3cbd3;
  --muted:       #8d98a3;
  --on-accent:   #ffffff;
  --link-hover:  #ffffff;

  --ok:   #3fbf7f;
  --warn: #e0a33c;
  --bad:  #e06b66;

  --body-image:
    radial-gradient(1100px 600px at 82% -8%, rgba(168, 32, 47, .16), transparent 60%),
    radial-gradient(900px 520px at 8% 4%, rgba(217, 164, 65, .09), transparent 55%),
    linear-gradient(180deg, #0c0f13 0%, #0e1319 55%, #0c0f13 100%);

  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .55);
}

/* --- 2. RESET ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--bg);
  background-image: var(--body-image);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; border: 0; }

a { color: var(--amber-soft); text-decoration: none; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: rgba(168, 32, 47, .55); color: #fff; }

/* --- 3. TYPE ------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
  color: var(--heading);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); text-transform: uppercase; letter-spacing: .02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); text-transform: uppercase; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p  { margin: 0 0 1rem; color: var(--ink-2); }
p:last-child { margin-bottom: 0; }

ul, ol { color: var(--ink-2); padding-left: 1.15rem; margin: 0 0 1rem; }
li { margin-bottom: .45rem; }
li::marker { color: var(--crimson-lift); }
strong, b { color: var(--heading); font-weight: 600; }
small { font-size: .85rem; color: var(--muted); }

.eyebrow {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 .75rem;
  display: block;
}
.lede { font-size: clamp(1.02rem, 1.6vw, 1.15rem); color: var(--ink-2); max-width: 68ch; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .lede, .center .section-head p { margin-inline: auto; }

/* --- 4. LAYOUT ----------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--wide));
  margin-inline: auto;
}
.container.narrow { width: min(100% - 2.5rem, 820px); }

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section + .section { padding-top: 0; }
.section-head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section-head p { max-width: 66ch; margin-bottom: 0; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* Like .grid-3, but a row that doesn't fill centres instead of hanging left. */
.card-row { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center; }
.card-row > * { flex: 1 1 300px; max-width: 360px; }
@media (max-width: 700px) { .card-row > * { max-width: none; } }

.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1.05fr .95fr; align-items: center; }
.split.media-first > :first-child { order: -1; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.stack > * + * { margin-top: 1rem; }
.divider { height: 1px; background: var(--line-soft); border: 0; margin: 2.5rem 0; }

/* Legacy layout helpers kept alive for existing markup */
.flex-row { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: flex-start; }
.col, .text-col { flex: 1 1 320px; min-width: 0; }
.media-col { flex: 0 1 320px; min-width: 0; }
.media-col img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow); display: block; }

/* --- 5. SURFACES --------------------------------------------------------- */
.card,
.frosted-portal,
.glass-portal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad);
  box-shadow: var(--shadow);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
}
.glass-portal { width: min(100% - 2.5rem, 820px); margin: 0 auto clamp(2rem, 5vw, 3.5rem); }

.card-hover { transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.card-hover:hover { transform: translateY(-3px); border-color: rgba(217,164,65,.35); background: var(--panel-2); }

.portal-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  margin: 0 auto 1.25rem;
}
.portal-image.portrait { max-height: 560px; width: auto; object-fit: cover; }

/* --- 6. BUTTONS ---------------------------------------------------------- */
.button,
.btn,
.btn-primary,
.nav-btn,
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.5rem;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--on-accent) !important;
  background: var(--crimson);
  border: 1px solid var(--btn-border);
  border-radius: var(--r);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 6px 18px rgba(168,32,47,.3);
}
.button:hover, .btn:hover, .btn-primary:hover, .nav-btn:hover, .contact-btn:hover {
  background: var(--crimson-lift);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(168,32,47,.42);
  color: #fff !important;
}
.button:disabled, .btn:disabled, button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-ghost,
.contact-btn {
  background: transparent;
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink) !important;
}
.btn-ghost:hover, .contact-btn:hover {
  background: var(--panel-2);
  border-color: rgba(217,164,65,.45);
  box-shadow: none;
  color: var(--heading) !important;
}
.btn-amber { background: var(--amber); color: var(--on-amber) !important; box-shadow: 0 6px 18px rgba(217,164,65,.28); }
.btn-amber:hover { background: var(--amber-soft); color: var(--on-amber) !important; box-shadow: 0 10px 26px rgba(217,164,65,.4); }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.messenger-btn { border-color: rgba(0,132,255,.5); }
.messenger-btn:hover { border-color: rgba(0,132,255,.9); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row.center { justify-content: center; }

/* --- 7. HEADER / NAV ----------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  padding: .6rem 0;
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand img { width: 46px; height: 46px; border-radius: 50%; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--heading);
}
.brand-tag { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }

.nav-bar { display: flex; align-items: center; gap: .35rem; }
.nav-link {
  display: inline-block;
  padding: .55rem .8rem;
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.nav-link:hover { color: var(--heading); background: var(--hover); }
.nav-link.active { color: var(--heading); border-bottom-color: var(--crimson); }

.nav-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.nav-actions .nav-link { padding-inline: .5rem; }
.nav-actions .button { padding: .6rem 1.1rem; font-size: .85rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
}

@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; }
  .header-inner { flex-wrap: wrap; }

  .nav-bar,
  .nav-actions {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-header.open .nav-bar,
  .site-header.open .nav-actions { display: flex; }
  .site-header.open .nav-bar { padding-top: .35rem; border-top: 1px solid var(--line-soft); }
  .site-header.open .nav-actions { gap: .65rem; padding: 1rem 0 1.15rem; }

  .nav-link { padding: .8rem .3rem; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
  .nav-actions .nav-link { padding-inline: .3rem; text-align: center; border-bottom: 0; }
  .nav-actions .button { width: 100%; font-size: .95rem; padding: .85rem 1.1rem; }
}

/* --- 8. HERO ------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(78vh, 660px);
  padding: clamp(3rem, 9vw, 6rem) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: right center;
  filter: saturate(.72) brightness(.72) contrast(.95);
  transform: scale(1.03);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,10,13,.35) 0%, rgba(8,10,13,.55) 60%, var(--bg) 100%),
    linear-gradient(90deg, rgba(8,10,13,.97) 0%, rgba(8,10,13,.94) 34%, rgba(8,10,13,.62) 58%, rgba(8,10,13,.42) 100%);
}
@media (max-width: 860px) {
  .hero::after {
    background: linear-gradient(180deg, rgba(8,10,13,.82) 0%, rgba(8,10,13,.9) 55%, var(--bg) 100%);
  }
}
.hero-content { max-width: 46rem; }
.hero h1 { margin-bottom: .35em; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.hero .lede { font-size: clamp(1.05rem, 2vw, 1.28rem); color: #dde3e9; }
.hero .btn-row { margin-top: 1.75rem; }

.page-hero {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.page-hero h1 { margin-bottom: .3em; }
.page-hero .lede { margin-bottom: 0; }

/* --- 9. TRUST BAR / STATS ------------------------------------------------ */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.trust-item { background: var(--tile-bg); padding: 1.35rem 1.25rem; text-align: center; }
.trust-item .trust-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--amber);
  line-height: 1.1;
}
.trust-item .trust-label {
  display: block;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .4rem;
}

/* --- 10. SERVICE CARDS --------------------------------------------------- */
.service-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.6rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--crimson);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.service-card:hover { transform: translateY(-4px); background: var(--panel-2); border-top-color: var(--amber); color: inherit; }
.service-card .icon { display: block; width: 30px; height: 30px; margin-bottom: .55rem; color: var(--crimson-lift); }
.service-card:hover .icon { color: var(--amber); }
.service-card .icon svg { width: 100%; height: 100%; display: block; }
.service-card h3 { margin-bottom: .25rem; color: var(--heading); }
.service-card p { font-size: .94rem; margin: 0; }
.service-card .more { margin-top: auto; padding-top: .9rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); font-family: var(--font-display); }

.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { position: relative; padding-left: 1.7rem; margin-bottom: .6rem; }
.feature-list li::before {
  content: "▲";
  position: absolute; left: 0; top: .18em;
  font-size: .7rem;
  color: var(--crimson-lift);
}

.pill {
  display: inline-block;
  padding: .3rem .75rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(217,164,65,.1);
  border: 1px solid rgba(217,164,65,.3);
  border-radius: 999px;
}
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }

.callout {
  border-left: 3px solid var(--amber);
  background: rgba(217,164,65,.07);
  padding: 1.1rem 1.35rem;
  border-radius: 0 var(--r) var(--r) 0;
  margin: 1.25rem 0;
}
.callout p:last-child { margin-bottom: 0; }

/* --- 11. CTA BAND -------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, rgba(168,32,47,.22), rgba(217,164,65,.12));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.25rem);
  text-align: center;
}
.cta-band h2 { margin-bottom: .4em; }
.cta-band p { max-width: 58ch; margin-inline: auto; }
.cta-band .btn-row { margin-top: 1.5rem; justify-content: center; }

/* --- 12. FOOTER ---------------------------------------------------------- */
.site-footer {
  margin-top: clamp(3rem, 8vw, 6rem);
  border-top: 1px solid var(--line);
  background: var(--footer-bg);
  padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.footer-grid h4 {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: var(--ink-2); font-size: .93rem; }
.footer-links a:hover { color: var(--link-hover); }
.footer-brand img { width: 62px; height: 62px; border-radius: 50%; margin-bottom: .9rem; }
.footer-brand p { font-size: .92rem; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
  font-size: .84rem; color: var(--muted);
}
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--ink); }

/* --- 13. FORMS ----------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="url"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%;
  padding: .8rem .95rem;
  font-family: inherit;
  font-size: .97rem;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), background .2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--amber);
  background: var(--field-focus);
}
input::placeholder, textarea::placeholder { color: #6f7b86; }
textarea { resize: vertical; min-height: 96px; }

select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d98a3' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 1.05rem;
  padding-right: 2.4rem;
}
select option, select optgroup { background: var(--bg-2); color: var(--ink); }

input[type="checkbox"], input[type="radio"] {
  width: 1.05rem; height: 1.05rem;
  accent-color: var(--crimson-lift);
  margin-right: .5rem;
  vertical-align: middle;
  cursor: pointer;
}

label { color: var(--ink-2); }
.field-label,
.form-label {
  display: block;
  margin: 1.1rem 0 .4rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.field-label:first-child, .form-label:first-child { margin-top: 0; }
.field-hint { font-size: .82rem; color: var(--muted); margin-top: .35rem; }

.checkbox-group { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .3rem; }
.checkbox-group label { display: flex; align-items: center; cursor: pointer; font-size: .95rem; }

.date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .date-row { grid-template-columns: 1fr; } }
.date-col { min-width: 0; }

#tentDiscountDiv { display: none; flex-direction: column; }
#status, .status-msg {
  margin-top: 1rem;
  font-size: .93rem;
  color: var(--amber-soft);
  text-align: center;
  min-height: 1.2em;
}

form button[type="submit"], #submitBtn { margin-top: 1.5rem; }

/* --- 14. MEDIA EMBEDS ---------------------------------------------------- */
.video-embed,
.map-container,
.calendar-container {
  position: relative;
  width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--inset);
}
.video-embed { aspect-ratio: 16 / 9; }
.map-container { aspect-ratio: 4 / 3; }
.calendar-container { aspect-ratio: 4 / 3; min-height: 420px; margin-bottom: 1.75rem; }
.video-embed iframe,
.map-container iframe,
.calendar-container iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
@media (max-width: 640px) { .calendar-container { aspect-ratio: 3 / 4; min-height: 360px; } }

/* --- 15. PRICE BLOCKS ---------------------------------------------------- */
.price-breakdown { margin: 1.15rem 0; text-align: left; }
.price-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: .95rem;
  color: var(--ink-2);
}
.price-row:last-child { border-bottom: 0; }
.price-tag {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--amber);
  line-height: 1;
}

/* --- 16. LOADING --------------------------------------------------------- */
#loading-state, #loader {
  display: block;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-2);
}
.spinner {
  display: inline-block;
  width: 34px; height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--crimson-lift);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  vertical-align: middle;
  margin-right: .75rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; font-size: .9rem; color: var(--muted); }
#empty-state-message {
  display: none;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}

/* --- 17. GALLERY CONTROLS ------------------------------------------------ */
.filter-section { margin-bottom: 1.75rem; }
.filter-section h1 { margin-bottom: .5rem; }
.filter-section label { display: block; margin-bottom: .5rem; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

.controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.control-box { padding: 1.25rem; }
.control-box label { display: block; margin-bottom: .55rem; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink) !important; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  align-items: start;      /* cards keep their natural height */
}

/* --- 18. PHOTO CARDS ----------------------------------------------------- */
.photo-card, .video-card, .product-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.photo-card:hover, .video-card:hover, .product-card:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: var(--shadow-lg);
}
.photo-card.selected, .video-card.selected {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), var(--shadow);
}

/* The frame takes the photo's own aspect ratio, so nothing is ever cropped.
   Cards therefore vary in height; .gallery-grid tops them out rather than
   stretching them. */
.image-container {
  position: relative;
  background: var(--inset);
  overflow: hidden;
  line-height: 0;          /* no descender gap under the image */
}
.image-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  cursor: zoom-in;
  transition: filter .3s var(--ease);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* the old hover zoom would have cropped the very thing we stopped cropping */
.image-container:hover img { filter: brightness(1.06); }
.watermark {
  position: absolute;
  inset: auto 0 0 0;
  padding: .45rem .7rem;
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.85);
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  pointer-events: none;
}
.photo-info { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .6rem; }
.photo-info label { display: flex; align-items: center; font-size: .95rem; }
.category-tag {
  align-self: flex-start;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(217,164,65,.1);
  border: 1px solid rgba(217,164,65,.28);
  border-radius: 999px;
  padding: .2rem .6rem;
}
.order-controls { display: flex; flex-direction: column; gap: .55rem; }
.order-controls select, .order-controls input[type="number"] { font-size: .9rem; padding: .55rem .7rem; }
.free-wm-btn {
  width: 100%;
  padding: .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink) !important;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .2s var(--ease);
}
.free-wm-btn:hover { background: var(--hover); }
.digital-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.high-res-img { max-width: 100%; height: auto; border-radius: var(--r); }

/* --- 19. VIDEO CARDS ----------------------------------------------------- */
.video-container {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.video-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The box stays 16:9 because the YouTube/Drive player that replaces it has to
   be, but the still is contained so an off-ratio thumbnail is not cut down. */
.video-thumbnail { width: 100%; height: 100%; object-fit: contain; display: block; }
.play-button, .play-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  display: grid; place-items: center;
  font-size: 1.25rem;
  color: #fff;
  background: rgba(168,32,47,.88);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  pointer-events: none;
  transition: transform .25s var(--ease), background .25s var(--ease);
  padding-left: 3px;
}
.video-container:hover .play-button,
.video-tile:hover .play-overlay { transform: translate(-50%, -50%) scale(1.1); background: var(--crimson-lift); }

.video-info { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .65rem; }
.video-title { font-family: var(--font-display); font-size: 1.02rem; color: var(--heading); line-height: 1.25; word-break: break-word; }
.metadata-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge {
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink-2);
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .18rem .6rem;
}
.price-display { font-family: var(--font-display); font-size: 1.3rem; color: var(--amber); }
.order-controls > label { font-weight: 600; }
.add-to-cart-cb { margin-right: .5rem; }

/* Playlist strips (services) */
.scroll-wrapper { margin-top: 1.25rem; }
.scroll-hint { font-size: .82rem; color: var(--muted); margin-bottom: .6rem; }
.playlist-scroll-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: .25rem .25rem 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--crimson) transparent;
}
.playlist-scroll-row::-webkit-scrollbar { height: 8px; }
.playlist-scroll-row::-webkit-scrollbar-track { background: var(--chip-bg); border-radius: 999px; }
.playlist-scroll-row::-webkit-scrollbar-thumb { background: var(--crimson); border-radius: 999px; }
.video-tile {
  flex: 0 0 264px;
  scroll-snap-align: start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.video-tile:hover { transform: translateY(-3px); border-color: rgba(217,164,65,.4); }
.thumbnail-wrapper { position: relative; aspect-ratio: 16 / 9; background: #000; }
.thumbnail-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-info { padding: .7rem .85rem .9rem; font-size: .88rem; color: var(--ink-2); line-height: 1.35; }

/* Lightbox */
.lightbox-bg {
  display: none;
  position: fixed; inset: 0;
  z-index: 2000;
  background: rgba(5,7,9,.9);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
  padding: 1.25rem;
}
.lightbox-content { position: relative; width: min(100%, 1000px); aspect-ratio: 16 / 9; }
.lightbox-content iframe { width: 100%; height: 100%; border: 0; border-radius: var(--r); }
.close-btn {
  position: absolute;
  top: -2.6rem; right: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1;
  color: #fff;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.close-btn:hover { background: var(--crimson); }

/* --- 20. CART / MODALS --------------------------------------------------- */
.floating-cart-container {
  display: none;
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 1200;
  flex-direction: column;
  gap: .5rem;
  align-items: stretch;
}
.floating-cart-btn, .clear-cart-btn {
  padding: .85rem 1.35rem;
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--crimson);
  border: 1px solid var(--btn-border);
  border-radius: var(--r);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background .2s var(--ease);
}
.floating-cart-btn:hover { background: var(--crimson-lift); }
.clear-cart-btn { background: var(--modal-bg); color: var(--ink); border-color: var(--line); font-size: .82rem; padding: .6rem 1rem; }
.clear-cart-btn:hover { background: rgba(217,83,79,.7); }

.cart-overlay, .modal-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 1400;
  background: var(--overlay);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
/* The store toggles these with inline `display:flex`, so the flex geometry
   lives on the base rule and is ready whenever it is switched on. */
.modal-overlay {
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 4vh, 3rem) 1.25rem;
  overflow-y: auto;
}
.cart-overlay.show { display: block; }
.modal-overlay.show { display: flex; }

.cart-modal, .success-popup, .prompt-popup {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 60px;
  z-index: 1500;
  width: min(100% - 2rem, 520px);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--modal-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem;
}

/* Confirmation modals sit in the middle of the viewport, wherever the reader
   has scrolled to. The page scripts set an inline `top` for these, so the
   override has to win against it. */
.prompt-popup, .success-popup {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-height: min(85vh, 640px);
}
.cart-modal.show, .success-popup.show { display: block; }
.close-modal {
  position: absolute; top: .85rem; right: 1.1rem;
  font-size: 1.7rem; line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.close-modal:hover { color: var(--ink); }

.cart-item-list { margin: 1rem 0; max-height: 34vh; overflow-y: auto; padding-right: .25rem; }
.cart-item, .cart-item-list > div {
  color: var(--ink-2);
}
.cart-item-title { color: var(--heading); font-weight: 600; }

.cart-math-modal { margin: 1.25rem 0; border-top: 1px solid var(--line); padding-top: 1rem; }
.math-row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .95rem; color: var(--ink-2); }
.math-row.grand {
  margin-top: .5rem; padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--heading);
}
.math-row.grand span:last-child { color: var(--amber); }

.license-disclaimer, .crop-disclaimer {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-2);
  background: rgba(168,32,47,.12);
  border: 1px solid rgba(168,32,47,.3);
  border-radius: var(--r-sm);
  padding: .7rem .85rem;
  margin: .85rem 0;
}
.crop-disclaimer { background: var(--chip-bg); border-color: var(--line); color: var(--muted); }

.delivery-toggle {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .95rem 1.05rem;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin: .85rem 0;
  font-size: .93rem;
}
.delivery-toggle label { display: flex; align-items: center; cursor: pointer; }

.success-popup { text-align: center; }
.success-popup h2 { color: var(--ok); }
.success-popup button, .prompt-popup button { margin-top: 1rem; }

.prompt-popup { text-align: center; width: min(100% - 2rem, 420px); }
.prompt-btn {
  display: block; width: 100%;
  margin-top: .65rem;
  padding: .8rem 1rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s var(--ease);
}
.btn-buy-full { background: var(--crimson); color: #fff !important; border-color: rgba(255,255,255,.16); }
.btn-buy-full:hover { background: var(--crimson-lift); }
.btn-coffee { background: var(--amber); color: var(--on-amber) !important; }
.btn-coffee:hover { background: var(--amber-soft); }
.btn-close-subtle { background: transparent; color: var(--muted) !important; }
.btn-close-subtle:hover { background: var(--panel-2); color: var(--ink) !important; }

#paypal-button-container { margin-top: 1.25rem; min-height: 46px; }

/* --- 21. STORE ----------------------------------------------------------- */
.store-container { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.store-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.store-controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.store-controls input, .store-controls select { width: auto; min-width: 165px; padding: .6rem .8rem; font-size: .92rem; }
.store-controls select { padding-right: 2.2rem; }
.nav-btn { padding: .62rem 1.1rem; font-size: .88rem; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.product-card { cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.product-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--inset); }
.product-title-text {
  display: block;
  padding: .9rem 1rem .35rem;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--heading);
}
.product-card > *:last-child { padding-bottom: 1rem; }

.modal-portal {
  position: relative;
  width: min(100%, 560px);
  max-height: 90vh;
  overflow-y: auto;
  margin: auto;
  background: var(--modal-bg);
}
.product-portal { width: min(100%, 940px); }
.modal-portal .close-btn { position: absolute; top: .85rem; right: .85rem; }
.product-modal-content { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
@media (max-width: 760px) { .product-modal-content { grid-template-columns: 1fr; } }
.product-gallery-section img#modal-main-img { width: 100%; border-radius: var(--r); background: var(--inset); }
.thumbnails-container { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.thumbnail-img {
  width: 58px; height: 58px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.thumbnail-img:hover { border-color: var(--amber); }
.product-description { margin-top: 1.25rem; font-size: .92rem; color: var(--ink-2); max-height: 240px; overflow-y: auto; }
.product-description img { display: none; }
.variant-dropdown { margin-bottom: .85rem; }

/* --- 22. CLIENT / ADMIN PORTAL ------------------------------------------- */
#login-view, #signup-view, #forgot-view, #admin-login-view {
  width: min(100% - 2.5rem, 440px);
  margin: clamp(2rem, 6vw, 4rem) auto;
}
#login-view form, #signup-view form, #forgot-view form, #admin-login-view form { display: flex; flex-direction: column; gap: .75rem; }
.dashboard-portal { width: min(100% - 2.5rem, var(--wide)); margin: clamp(2rem, 5vw, 3rem) auto; }

.auth-links { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; font-size: .9rem; }
.auth-links a { color: var(--amber-soft); cursor: pointer; }
.auth-links a:hover { color: var(--link-hover); text-decoration: underline; }

.job-card {
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1rem;
}
.job-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.job-header h3 { margin: 0; }
.badge-paid, .badge-pending, .badge-deposit {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .22rem .65rem; border-radius: 999px; white-space: nowrap;
}
.badge-paid    { color: var(--ok);   background: rgba(63,191,127,.13); border: 1px solid rgba(63,191,127,.35); }
.badge-pending { color: var(--bad);  background: rgba(217,83,79,.13);  border: 1px solid rgba(217,83,79,.35); }
.badge-deposit { color: var(--warn); background: rgba(224,163,60,.13); border: 1px solid rgba(224,163,60,.35); }

.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th, .admin-table td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.admin-table th {
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber); white-space: nowrap;
}
.admin-table td { color: var(--ink-2); }
.admin-table tr:hover td { background: var(--hover); }

.hidden-form {
  display: none;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.35rem;
  margin-bottom: 1.5rem;
}
.hidden-form input, .hidden-form select { margin-bottom: .85rem; }

/* --- 23. PRINT ----------------------------------------------------------- */
.cover-sheet { color: #000; background: #fff; padding: 2rem; }
.cover-table { width: 100%; border-collapse: collapse; }
.cover-table th, .cover-table td { border: 1px solid #999; padding: 6px 8px; text-align: left; }
.print-item { page-break-after: always; text-align: center; }
.crop-container { max-width: 100%; }

@media print {
  .site-header, .site-footer, .floating-cart-container, .cart-modal, .cart-overlay { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --- 24. UTILITY --------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  z-index: 9999;
  padding: .75rem 1.25rem;
  background: var(--crimson); color: #fff;
  border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

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

.show { display: block; }
body.no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- 25. FLIGHT PATH GENERATOR -------------------------------------------
   Sentry CSV -> Google Earth KML. Lives on sentry.html.                    */
.fp-tool { display: grid; gap: 1.25rem; }

.fp-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 200px;
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--inset);
  border: 2px dashed var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.fp-drop:hover,
.fp-drop:focus-within { border-color: rgba(217, 164, 65, .55); background: var(--hover); }
.fp-drop.is-dragging { border-color: var(--amber); background: rgba(217, 164, 65, .08); }
.fp-drop.has-file { border-style: solid; border-color: rgba(63, 191, 127, .5); }
.fp-drop input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.fp-drop-icon { width: 40px; height: 40px; color: var(--muted); }
.fp-drop.has-file .fp-drop-icon { color: var(--ok); }
.fp-drop-title {
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--heading);
}
.fp-drop-hint { font-size: .88rem; color: var(--muted); max-width: 40ch; }
.fp-filename {
  font-size: .9rem; color: var(--ok);
  word-break: break-all; max-width: 100%;
}

.fp-status {
  min-height: 1.4em;
  font-size: .92rem;
  text-align: center;
  color: var(--ink-2);
}
.fp-status.is-error { color: #f08a86; }
.fp-status.is-ok { color: var(--ok); }

.fp-stats {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.fp-stats.is-visible { display: grid; }
.fp-stat { background: var(--tile-bg); padding: 1rem; text-align: center; }
.fp-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.fp-stat span {
  display: block;
  margin-top: .25rem;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}

.fp-steps { counter-reset: fp; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.fp-steps li {
  position: relative;
  padding-left: 3rem;
  margin: 0;
}
.fp-steps li::before {
  counter-increment: fp;
  content: counter(fp);
  position: absolute; left: 0; top: -.1em;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .95rem;
  color: var(--amber);
  background: rgba(217, 164, 65, .1);
  border: 1px solid rgba(217, 164, 65, .3);
  border-radius: 50%;
}
.fp-steps strong { display: block; }

/* Motion clips replacing heavy GIFs (deer recovery) */
.media-col video, .media-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  background: #000;
}

/* --- 26. THEME EXCEPTIONS -------------------------------------------------
   Two kinds of thing sit outside the token system on purpose.
   -------------------------------------------------------------------------- */

/* (a) The hero is a photograph under a dark scrim in BOTH themes, so its
       text stays light-on-dark whatever the rest of the page is doing. */
.hero h1 { color: #fff; }
.hero .eyebrow { color: #f0c877; }
.hero .lede { color: #e4e9ee; }
.hero .btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.4); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }

/* (b) The gallery, store and portal scripts write inline colours into the
       markup they generate, all of them assuming a dark page. Those inline
       styles beat ordinary rules, so they are re-pointed here and then set
       back again in the dark blocks below. */
[style*="color:#ffffff"], [style*="color: #ffffff"],
[style*="color:#fff;"],   [style*="color: #fff;"],
[style*="#eaeaea"]                            { color: var(--ink) !important; }
[style*="rgba(255,255,255,0.2)"],
[style*="rgba(255,255,255,0.3)"]              { border-color: var(--line) !important; }
[style*="background:rgba(255,255,255,0.25)"],
[style*="background: rgba(255,255,255,0.2)"]  { background: var(--panel-2) !important; color: var(--ink) !important; }
[style*="color:#a9cce3"], [style*="color: #a9cce3"] { color: var(--muted) !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [style*="color:#ffffff"],
  :root:not([data-theme="light"]) [style*="color: #ffffff"],
  :root:not([data-theme="light"]) [style*="color:#fff;"],
  :root:not([data-theme="light"]) [style*="color: #fff;"],
  :root:not([data-theme="light"]) [style*="#eaeaea"]      { color: #fff !important; }
  :root:not([data-theme="light"]) [style*="rgba(255,255,255,0.2)"],
  :root:not([data-theme="light"]) [style*="rgba(255,255,255,0.3)"] { border-color: rgba(255,255,255,.2) !important; }
  :root:not([data-theme="light"]) [style*="background:rgba(255,255,255,0.25)"],
  :root:not([data-theme="light"]) [style*="background: rgba(255,255,255,0.2)"] { background: rgba(255,255,255,.22) !important; color: #fff !important; }
  :root:not([data-theme="light"]) [style*="color:#a9cce3"],
  :root:not([data-theme="light"]) [style*="color: #a9cce3"] { color: #a9cce3 !important; }
}
:root[data-theme="dark"] [style*="color:#ffffff"],
:root[data-theme="dark"] [style*="color: #ffffff"],
:root[data-theme="dark"] [style*="#eaeaea"] { color: #fff !important; }

/* --- 27. LIKE / HEART BUTTON ----------------------------------------------
   Injected over the media area of gallery cards by likes.js.
   -------------------------------------------------------------------------- */
.like-btn {
  position: absolute;
  top: .55rem; right: .55rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .6rem .32rem .5rem;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
  background: rgba(12, 15, 19, .58);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.like-btn:hover { background: rgba(12, 15, 19, .78); border-color: rgba(255, 255, 255, .4); }
.like-btn:active { transform: scale(.94); }

.like-btn svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; }
.like-btn.is-liked { color: #ff5a6e; border-color: rgba(255, 90, 110, .55); }
.like-btn.is-liked svg { fill: #ff5a6e; stroke: #ff5a6e; }

/* one small pulse on the like itself, never on load */
@keyframes like-pop { 0% { transform: scale(1); } 42% { transform: scale(1.28); } 100% { transform: scale(1); } }
.like-btn.just-liked svg { animation: like-pop .34s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .like-btn.just-liked svg { animation: none; }
}

/* --- 28. HIT COUNTER ------------------------------------------------------
   Page views in the footer; gallery views beside the gallery controls.
   Hidden until a real number arrives, so nothing shows if the API is off.
   -------------------------------------------------------------------------- */
.hit-counter {
  display: inline-block;
  margin-left: .5rem;
  padding: .12rem .5rem;
  font-size: .74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: baseline;
}
.filter-section .hit-counter,
.control-box .hit-counter {
  margin: .55rem 0 0;
  display: inline-block;
  color: var(--amber);
  background: rgba(217, 164, 65, .1);
  border-color: rgba(217, 164, 65, .3);
}

/* --- 29. ALBUM DOWNLOAD ---------------------------------------------------
   The "download this album as a zip" control, added to the filter panel by
   album-zip.js once an album with watermarked photos is showing.
   -------------------------------------------------------------------------- */
.album-dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-soft);
}
.album-dl-btn { padding: .68rem 1.25rem; font-size: .88rem; }
.album-dl-btn svg { width: 17px; height: 17px; }
.album-dl-btn:disabled { opacity: .6; }

.album-dl-cancel {
  padding: .5rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.album-dl-cancel:hover { background: var(--hover); color: var(--heading); }

.album-dl-status {
  flex: 1 1 260px;
  min-width: 0;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--muted);
}
.album-dl-status.is-ok { color: var(--ok); }
.album-dl-status.is-error { color: var(--bad); }

.album-dl-bar {
  flex: 1 1 100%;
  height: 5px;
  background: var(--chip-bg);
  border-radius: 999px;
  overflow: hidden;
}
.album-dl-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--crimson);
  border-radius: 999px;
  transition: width .25s var(--ease);
}

/* --- 30. FAVORITES SYNC ---------------------------------------------------
   The optional "use these on another device" control under the album picker.
   -------------------------------------------------------------------------- */
.fav-sync {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .88rem;
}
.fav-sync-main { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.fav-sync-who { color: var(--muted); }
.fav-sync-who strong { color: var(--ink); font-weight: 600; }

.fav-sync-link {
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--amber);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.fav-sync-link:hover { color: var(--link-hover); }

.fav-sync-label {
  flex: 1 1 100%;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.fav-sync-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex: 1 1 100%; }
.fav-sync-row input {
  flex: 1 1 220px;
  width: auto;
  min-width: 0;
  padding: .6rem .8rem;
  font-size: .92rem;
}
.fav-sync-send { padding: .6rem 1.1rem; font-size: .84rem; }

.fav-sync-msg { margin-top: .5rem; font-size: .85rem; color: var(--muted); min-height: 1.1em; }
.fav-sync-msg.is-ok { color: var(--ok); }
.fav-sync-msg.is-error { color: var(--bad); }

/* ===========================================================================
   31. REBRAND — Dixie Aerial
   The header sub-line went from one word ("Photography") to three
   ("Media · Aerial · Ground"), which is wider than the name above it. On a
   phone that pushes the lockup into the menu button, so the tracking tightens
   and then the line drops away entirely — the badge and name still identify
   the business, and the nav is more useful than a strapline at that size.
   =========================================================================== */
.brand-tag { white-space: nowrap; }

@media (max-width: 900px) {
  .brand-tag { font-size: .62rem; letter-spacing: .08em; }
}
@media (max-width: 560px) {
  .brand-tag { display: none; }
}

/* The banner artwork, used as a masthead on the home page in place of the old
   stock hero. It carries the name and strapline, so the heading beneath it
   states the offer instead of repeating the brand — one h1, nothing said
   twice. The alt text carries the words baked into the artwork. */
.brand-band {
  margin: 0;
  background: var(--inset);
  line-height: 0;
}
.brand-band img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1600px;
  margin-inline: auto;
}

/* The band is a full-bleed image, so the intro below it does not need the
   usual section padding on top — the artwork already provides the break. */
.intro-after-band { padding-top: clamp(1.75rem, 4vw, 3rem); }

/* The P.I.E. Studio app icon above the page heading. Decorative — the alt is
   empty because the h1 immediately below already names the product, and a
   screen reader should not hear it twice. */
.pie-mark {
  display: block;
  width: 96px; height: 96px;
  margin-bottom: 1rem;
}