/* Flash TV Ads - site styles.
   Light pages, dark banner header taken from the supplied header artwork. */

:root {
  --bg: #ffffff;
  --bg-2: #f7f5f1;
  --line: #e4dfd5;
  --text: #26221c;
  --muted: #6b655c;
  --heading: #17140f;
  --gold-lt: #e8c976;
  --gold: #d9b45b;
  --gold-dk: #8a6a15;
  --dark: #1a1d24;
  --dark-line: #2f343d;
  --wrap: 1120px;
  --radius: 10px;
  --head-h: 92px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--gold-dk); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }
.wrap.narrow { margin: 0 auto; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: #201907; padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

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

/* ---------- header (dark banner) ---------- */

/* The artwork sits inside the same centred column as the page content, so the
   logo lines up with the headings below it. The bar behind it is tiled with a
   single column lifted from the artwork's own edge - both of the artwork's
   edges were made identical to that column, so the join is invisible at any
   window width and no part of the logo is cropped or faded. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background-color: var(--dark);
  background-image: url("/assets/header-edge.png");
  background-repeat: repeat-x;
  background-position: left top;
  background-size: auto var(--head-h);
  border-bottom: 1px solid var(--dark-line);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  min-height: var(--head-h);
}

.brand { display: block; flex: 0 0 auto; line-height: 0; }
.brand img {
  display: block;
  height: var(--head-h);
  width: auto;
  max-width: 58vw;
  object-fit: contain;
  object-position: left center;
}

.site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-nav a { color: #e9e6df; font-size: 15px; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.site-nav a:hover { color: #fff; }
.site-nav a.active { color: var(--gold); }
.site-nav a.btn { color: #201907; text-shadow: none; }

.menu-toggle {
  display: none;
  background: rgba(255,255,255,.08); color: #f2efe9;
  border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
  padding: 9px 14px; font-size: 15px; cursor: pointer;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: linear-gradient(160deg, var(--gold-lt), var(--gold) 55%, #a8801f);
  color: #201907;
  font-weight: 700;
  padding: 13px 26px;
  border: 0; border-radius: var(--radius);
  cursor: pointer; font-size: 16px; text-decoration: none;
}
.btn:hover, .btn:focus { filter: brightness(1.05); text-decoration: none; }
.btn-sm { padding: 9px 17px; font-size: 14px; }
.btn-ghost {
  background: transparent; color: var(--gold-dk);
  border: 1px solid var(--gold-dk);
}
.btn-ghost:hover { background: rgba(184,145,47,.10); }

.link-arrow { font-weight: 600; }
.link-arrow::after { content: " \2192"; }

/* ---------- sections ---------- */

.hero {
  padding: 74px 0 62px;
  background:
    radial-gradient(900px 420px at 50% -20%, rgba(217,180,91,.22), transparent 72%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.hero h1 { max-width: 17ch; }

.page-head {
  padding: 54px 0 38px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

.band { padding: 58px 0; }
.band.alt {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

h1, h2, h3 { color: var(--heading); line-height: 1.2; margin: 0 0 16px; }
h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.01em; }
h2 { font-size: clamp(23px, 3vw, 30px); margin-top: 8px; }
h3 { font-size: 19px; }
.legal h2 { margin-top: 38px; font-size: 21px; }

p { margin: 0 0 16px; }
.lead { font-size: 19px; color: #45403a; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; color: var(--gold-dk); font-weight: 700; margin-bottom: 10px;
}

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 9px; }

/* ---------- cards ---------- */

.cards { display: grid; gap: 20px; margin: 26px 0 8px; }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 1px 2px rgba(23,20,15,.05);
}
.card p:last-child { margin-bottom: 0; }
.card h3 { border-bottom: 2px solid var(--gold); display: inline-block; padding-bottom: 4px; }

.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.chips li {
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 18px; margin: 0;
}

.steps { counter-reset: step; list-style: none; padding: 0; max-width: 800px; }
.steps li { position: relative; padding-left: 52px; margin-bottom: 18px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-lt), #a8801f);
  color: #201907; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

ul.plain { list-style: none; padding: 0; }
ul.plain li { margin-bottom: 8px; }
ul.big li { margin-bottom: 18px; }
ul.big .lbl {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--muted); margin-bottom: 2px;
}
ul.big a { font-size: 19px; }

table.info { width: 100%; border-collapse: collapse; margin: 8px 0 24px; }
table.info th, table.info td {
  text-align: left; vertical-align: top;
  padding: 11px 12px; border-bottom: 1px solid var(--line);
}
table.info th { width: 40%; color: var(--muted); font-weight: 500; }

/* ---------- contact ---------- */

.contact-grid {
  display: grid; gap: 44px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
.contact-side {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  box-shadow: 0 1px 2px rgba(23,20,15,.05);
}

.form label {
  display: block; margin: 18px 0 6px;
  font-size: 14px; color: #4a453e; font-weight: 600;
}
.form input[type=text], .form input[type=tel], .form input[type=email],
.form select, .form textarea {
  width: 100%;
  background: #fff; color: var(--text);
  border: 1px solid #cfc9bd; border-radius: 8px;
  padding: 12px 13px; font: inherit; font-size: 16px;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--gold-dk); outline-offset: 1px; border-color: var(--gold-dk);
}
.form textarea { resize: vertical; }
.form .btn { margin-top: 24px; }
.req { color: #b3261e; }

.consent {
  margin-top: 12px; padding: 14px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
}
.check { display: flex; gap: 11px; align-items: flex-start; margin: 0; }
.check input { margin-top: 4px; flex: 0 0 auto; width: 17px; height: 17px; }
.check span { font-size: 13.5px; line-height: 1.55; color: #524c44; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-status { margin-top: 14px; font-size: 15px; min-height: 1.2em; }
.form-status.ok { color: #1f7a37; font-weight: 600; }
.form-status.err { color: #b3261e; font-weight: 600; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 48px 0 26px;
  font-size: 15px;
}
.footer-grid {
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.site-footer h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); margin-bottom: 12px; font-weight: 700;
}
.site-footer img.footer-logo { width: 190px; margin-bottom: 10px; }
.footer-legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.footer-legal p { color: var(--muted); font-size: 13.5px; margin: 0; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 940px) {
  :root { --head-h: 76px; }
  .menu-toggle { display: block; }
  .header-inner { flex-wrap: wrap; justify-content: flex-end; }
  .site-nav {
    display: none;
    width: 100%; order: 3;
    flex-direction: column; align-items: flex-start;
    gap: 2px; padding: 6px 0 14px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 11px 0; width: 100%; }
  .site-nav a.btn { width: auto; margin-top: 10px; }
  /* when the menu is open the bar grows, keep the logo at the top of it */
  .header-inner { align-items: flex-start; padding-top: 0; }
  .brand img { max-width: 56vw; }
}

@media (max-width: 620px) {
  :root { --head-h: 64px; }
  .hero { padding: 46px 0 40px; }
  .band { padding: 42px 0; }
}

@media print {
  .site-header, .site-footer, .cta-row { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- the header logo animation ----------
   The clip sits in the header logo's own slot, exactly 1:1 over the still, and
   plays once. Its backplate was graded to the bar's colour and its left and
   right edge columns were made identical to the bar tile, so it blends in
   rather than reading as a video rectangle. When it ends it fades out and the
   still underneath takes over. No overlay, nothing to dismiss.
   Without JavaScript, or with reduced motion, only the still is ever shown. */

.brand { position: relative; }

.brand-anim {
  display: none;
  position: absolute;
  left: 0; top: 0;
  height: var(--head-h);
  width: auto;
  max-width: 58vw;
  pointer-events: none;
}

html.logo-anim .brand-anim { display: block; }

.brand-anim.is-done {
  opacity: 0;
  transition: opacity 420ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html.logo-anim:not(.logo-anim-forced) .brand-anim { display: none; }
}