/* ==========================================================================
   D.Ross Vision
   Royal-blue satin theme — a fixed charmeuse-silk canvas in pure royal blue,
   with dark glass content cards floating over it, warm-gold headings and
   accents, and clean white body copy. Luxury / cinematic / premium.

   Type: Fraunces (display serif) + Instrument Sans, carried over unchanged.
   All page structure and content is untouched — this is a pure visual reskin.
   ========================================================================== */

:root {
  /* deep navy used for text-on-gold, step markers, etc. */
  --black:       #0a0d18;
  --black-soft:  #0c1020;

  /* content cards */
  --card:        rgba(10, 10, 20, 0.75);   /* section / footer glass card    */
  --card-inner:  rgba(30, 32, 56, 0.55);   /* nested panels on top of a card */
  --card-inner-hi: rgba(44, 48, 82, 0.72); /* nested panel, hover            */
  --panel:       var(--card-inner);
  --panel-hi:    var(--card-inner-hi);

  /* accent — warm gold */
  --gold:        #d4a847;
  --gold-bright: #ecc866;
  --gold-deep:   #a07e2e;

  /* shiny metallic gold — a bright highlight band running through #C8A951→#FFD700,
     applied to headings via background-clip: text */
  --gold-metal:  linear-gradient(168deg,
                   #c8a951 0%, #f3d873 22%, #ffd700 42%,
                   #fff3b0 50%, #ffd700 58%, #c8a951 80%, #e6c56a 100%);

  /* ink */
  --text:        #ffffff;
  --muted:       #ffffff;
  --faint:       rgba(255, 255, 255, 0.62);

  /* lines / borders — subtle gold hairlines */
  --line:        rgba(212, 175, 55, 0.20);
  --line-gold:   rgba(212, 175, 55, 0.30);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;

  --shell: 1320px;         /* outer frame that keeps the satin visible at the edges */
  --gutter: clamp(14px, 3.6vw, 44px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* single background image — background2 only, fixed & covering the screen */
  background: #1e3fb0 url("../../background2.webp") center center / cover no-repeat fixed;
}

/* --------------------------------------------------------- satin canvas ---
   TEST: a single background image — background2 only, fixed & covering the
   viewport. No overlay, no colour layer on top. */
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background: transparent;         /* the single image lives on html, below */
}

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

a { color: var(--gold); text-decoration: none; transition: color 0.3s var(--ease); }
a:hover { color: var(--gold-bright); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------------------------------------------------------------- type --- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
  /* shiny metallic gold — gradient clipped to the glyphs */
  color: var(--gold);           /* fallback for browsers without text clipping */
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1 { font-size: clamp(2.35rem, 5.9vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 {
  font-family: var(--font-body);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gold);
}

p { margin: 0 0 1.25em; color: var(--text); }

.lead {
  font-size: clamp(1.03rem, 1.55vw, 1.2rem);
  color: #ffffff;
  max-width: 60ch;
  font-weight: 400;
}

em.gold {
  font-style: italic;
  color: var(--gold);
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------- layout ---
   `main` and the footer are capped and padded so the royal-blue satin always
   frames the content on every edge; each section becomes a floating card. */

.container {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 2;
}

main {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(20px, 3vw, 32px) var(--gutter) 2px;
  position: relative;
  z-index: 2;
}

/* Every top-level section is a dark glass card floating on the satin. */
main > section {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(18px, 2.4vw, 26px);
  padding: clamp(48px, 7vw, 92px) 0;
  background: var(--card);
  border: 1px solid var(--line-gold);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.75);
}

/* Inside a card, the container just supplies inner horizontal padding. */
main > section > .container { max-width: 100%; }

.tone-alt { background: rgba(16, 18, 34, 0.75); }

.eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

.rule {
  width: 54px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border: 0;
  margin: 0 0 26px;
}

.rule.center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

.head { max-width: 730px; margin-bottom: 56px; }
.head.center { margin-inline: auto; text-align: center; }
.head.center .lead { margin-inline: auto; }

/* --------------------------------------------------------------- buttons ---
   Dark glass, gold border, gold text — inverting to a gold fill with deep-navy
   text on hover. */

.btn {
  display: inline-block;
  padding: 15px 38px;
  font-family: var(--font-body);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: rgba(10, 10, 20, 0.55);
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.btn:hover {
  background: var(--gold);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 12px 34px -14px rgba(212, 168, 71, 0.7);
}

/* Primary and quiet buttons share the invert-on-hover behaviour. */
.btn-solid { background: rgba(212, 168, 71, 0.14); }
.btn-solid:hover { background: var(--gold-bright); color: var(--black); }

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

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-row.center { justify-content: center; }

/* ------------------------------------------------- navigation (top bar) ---
   Semi-transparent dark bar, gold logo, gold links. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  isolation: isolate;              /* own blending context for the logo */
  background: rgba(5, 5, 15, 0.92);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line-gold);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 116px !important;   /* bar height is fixed here — it must NOT shrink
                                     when the logo gets smaller. The leftover space
                                     around the 80px logo is deliberate. */
  padding: 8px 0;
}

.brand { display: flex; align-items: center; gap: 13px; color: var(--gold); }
.brand:hover { color: var(--gold-bright); }
/* NOTE: the old `.brand img { width:34px; height:34px }` rule lived here and was
   overriding the banner size via higher specificity — removed. Cap the banner
   logo size instead (nav max 80px; footer handled below at max 80px): */
.logo img, nav img, header img {
  max-height: 80px !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1;
  color: var(--gold);
}

.brand-name span { color: var(--gold-bright); }

/* Banner logo image (replaces the old logo mark + brand text) in the nav bar
   and footer. Transparent PNG, scaled responsively; capped so it never crowds
   the navigation. */
.brand-banner {
  display: block;
  height: auto;
  width: auto;
  max-height: 80px !important;      /* max height in the navigation bar */
  max-width: none !important;       /* no width constraint */
  object-fit: contain;
  flex: none;                       /* never let the flex row shrink it */
  background: transparent;
  mix-blend-mode: normal;           /* logo is already clean-transparent; multiply only darkened it */
  filter: brightness(1) contrast(1.2);   /* enhance the logo colours */
}

/* Make sure no parent (the .brand link / header row) constrains the logo. */
.brand { flex: 0 0 auto; min-width: 0; max-width: none; overflow: visible; }
.header-inner { min-height: 116px !important; }   /* locked bar height, see above */

.site-footer .brand-banner {
  max-height: 80px !important;         /* max height in the footer */
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  background: transparent;
  opacity: 1 !important;               /* fully opaque, never faded */
  mix-blend-mode: normal !important;   /* no blending against the dark footer */
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold-bright);
  transition: width 0.35s var(--ease);
}

.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--gold-bright); }
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { width: 100%; }

.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-gold);
  border-radius: 6px;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  width: 19px; height: 1px;
  background: var(--gold);
  transition: transform 0.3s var(--ease), background 0.2s var(--ease);
}

.nav-toggle span { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.nav-toggle span::before { left: 0; top: -6px; }
.nav-toggle span::after  { left: 0; top: 6px; }

.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero ---
   The lead card: a tall glass panel with a soft gold glow catching the top. */

.hero {
  display: flex;
  align-items: center;
  min-height: 74vh;
  padding: clamp(70px, 9vw, 118px) 0 !important;
  background:
    radial-gradient(940px 520px at 78% 14%, rgba(212, 168, 71, 0.16), transparent 60%),
    radial-gradient(680px 480px at 4% 92%, rgba(212, 168, 71, 0.07), transparent 62%),
    var(--card) !important;
}

.hero-inner { max-width: 880px; }
.hero .container { display: flex; align-items: center; }
.hero h1 { margin-bottom: 28px; }
.hero .lead { margin-bottom: 40px; }

.hero-scroll {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Interior page hero — same glass card, softer gold wash. */
.page-hero {
  padding: clamp(84px, 10vw, 132px) 0 clamp(54px, 6vw, 82px) !important;
  background:
    radial-gradient(780px 420px at 82% 4%, rgba(212, 168, 71, 0.14), transparent 60%),
    var(--card) !important;
}

/* ------------------------------------------------------- nested panels --- */

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  padding: 40px 34px;
  background: var(--card-inner);
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease),
              background 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

/* Gold hairline that wipes in across the panel top on hover. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: width 0.55s var(--ease);
}

.card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  background: var(--card-inner-hi);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.8);
}
.card:hover::before { width: 100%; }

.card h3 { color: var(--gold); margin-bottom: 14px; }
.card p { font-size: 0.95rem; margin-bottom: 20px; }

.card-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: 20px;
}

.card-link { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--gold); }
.card-link:hover { color: var(--gold-bright); }
.card-link::after { content: " \2192"; }

/* --------------------------------------------------------------- feature --- */

.split {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  gap: clamp(38px, 6vw, 82px);
  align-items: center;
}

.split + .split { margin-top: clamp(58px, 8vw, 108px); }
.split.flip > :first-child { order: 2; }

.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  text-align: center;
  background: linear-gradient(135deg, rgba(58, 82, 170, 0.35) 0%, rgba(10, 12, 26, 0.9) 100%);
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  color: var(--faint);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.frame::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(212, 168, 71, 0.28);
  border-radius: 6px;
  pointer-events: none;
}

.frame.portrait { aspect-ratio: 9 / 16; }
.frame.square { aspect-ratio: 1 / 1; }

/* Photo sitting beside a block of copy — capped at 300px and centred in its
   column, so it stays a portrait rather than stretching to fill the grid.
   Below 860px .split collapses to one column and it falls under the text. */
.portrait-shot { display: flex; justify-content: center; }

.portrait-shot img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border: 1px solid var(--line-gold);
  border-radius: 12px;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.9);
}

/* ----------------------------------------------------------------- lists --- */

.ticks { list-style: none; margin: 0 0 30px; padding: 0; }

.ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  color: var(--text);
  font-size: 0.96rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 15px; height: 1px;
  background: var(--gold);
}

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }

.steps li {
  counter-increment: step;
  position: relative;
  margin-left: 17px;
  padding: 0 0 32px 64px;
  border-left: 1px solid var(--line-gold);
}

.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.steps li::before {
  content: "0" counter(step);
  position: absolute;
  left: -18px; top: -4px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--black);
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--gold);
}

.steps h3 { margin-bottom: 8px; }
.steps p { font-size: 0.95rem; margin-bottom: 0; }

/* ---------------------------------------------------------------- banner --- */

.banner { text-align: center; }
.banner {
  background:
    radial-gradient(660px 320px at 50% 0%, rgba(212, 168, 71, 0.16), transparent 66%),
    var(--card);
}

.banner h2 { max-width: 22ch; margin-inline: auto; }
.banner .lead { margin-inline: auto; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }

.pillar {
  padding: 38px 22px;
  background: var(--card-inner);
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.pillar:hover { border-color: var(--gold); background: var(--card-inner-hi); }

.pillar strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 10px;
}

.pillar span { font-size: 0.87rem; color: var(--text); }

/* ------------------------------------------------------------- portfolio --- */

.filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }

.filters button {
  padding: 11px 24px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(10, 10, 20, 0.4);
  border: 1px solid var(--line-gold);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.filters button:hover,
.filters button[aria-pressed="true"] { color: var(--black); border-color: var(--gold); background: var(--gold); }

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Work tiles do not move on hover — no scale, no lift, no transition. */
.work { overflow: hidden; }

/* Tiles keep their own aspect so a row of mixed formats stays tidy rather than
   stretching the short ones to match the tallest. */
.work-grid { align-items: start; }

.work-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  background: rgba(6, 8, 20, 0.7);
}

.work-media.portrait { aspect-ratio: 9 / 16; }

/* No transform or transition here on purpose: the tile must sit perfectly
   still under the cursor. Hover only changes the play button. */
.work-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play-toggle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(6, 8, 20, 0.3);
  border: 0;
  cursor: pointer;
  transition: background 0.35s var(--ease);
}

/* While playing the button stays in place — invisible, but still the click and
   keyboard target for pausing. */
.work-media.is-playing .play-toggle { background: transparent; }
.work-media.is-playing .play-toggle::before,
.work-media.is-playing .play-toggle::after { opacity: 0; }
.work-media.is-playing .play-toggle:hover { background: rgba(6, 8, 20, 0.2); }

/* Gold ring plus triangle, both stacked in the same grid cell. */
.play-toggle::before,
.play-toggle::after {
  content: "";
  grid-area: 1 / 1;
  place-self: center;
  transition: background 0.35s var(--ease), opacity 0.3s var(--ease);
}

.play-toggle::before {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(10, 10, 20, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Positioned above the ring: backdrop-filter makes ::before a stacking
   context, which would otherwise paint the disc over the triangle. */
.play-toggle::after {
  position: relative;
  z-index: 1;
  width: 0; height: 0;
  margin-left: 5px;                 /* optical centring of the triangle */
  border-left: 17px solid var(--gold);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

/* Colour only — no scale, so nothing shifts under the cursor. */
.play-toggle:hover { background: rgba(6, 8, 20, 0.14); }
.play-toggle:hover::before { background: rgba(10, 10, 20, 0.75); border-color: var(--gold-bright); }
.play-toggle:hover::after { border-left-color: var(--gold-bright); }

.work-meta { padding-top: 17px; }
.work-meta span { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.work-meta h3 { margin: 6px 0 4px; color: var(--gold); }
.work-meta p { font-size: 0.89rem; margin: 0; }

/* ------------------------------------------------------------------- faq --- */

.faq { border-bottom: 1px solid var(--line-gold); padding: 28px 0; }
.faq h3 { margin-bottom: 10px; color: var(--gold); }
.faq p { font-size: 0.95rem; margin-bottom: 0; }

/* ------------------------------------------------------------------ form --- */

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.field.full { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.field input, .field select, .field textarea {
  width: 100%;
  padding: 15px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: rgba(6, 8, 20, 0.55);
  border: 1px solid var(--line-gold);
  border-radius: 8px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.field textarea { min-height: 165px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(10, 12, 28, 0.75);
}

.field ::placeholder { color: var(--faint); }
.field select option { color: #0a0d18; }

.note { font-size: 0.82rem; color: var(--faint); }

/* ---------------------------------------------------------- testimonials ---
   The review form and the cards it feeds. Same dark glass and gold hairlines
   as the rest of the site — the only new piece is the star rating, which is a
   plain radio group so it works with a keyboard and posts without JS. */

.review-form { max-width: 760px; margin-inline: auto; }

/* Fieldset carries browser default chrome that would break the card look. */
.stars-field { margin: 0; padding: 0; border: 0; }

.stars-field legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Stars sit reversed in the markup (5 → 1) so `input:checked ~ label` can reach
   every lower star; row-reverse flips them back to 1 → 5 on screen. */
.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 8px; }

/* Off-screen rather than display:none — the radios stay focusable and remain
   part of the form for anyone using a keyboard or screen reader. */
.stars input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.stars label {
  font-size: 1.85rem;
  line-height: 1;
  color: rgba(212, 168, 71, 0.26);
  cursor: pointer;
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}

.stars label:hover,
.stars label:hover ~ label,
.stars input:checked ~ label { color: var(--gold-bright); }

.stars label:hover { transform: translateY(-2px); }
.stars input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }

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

.testimonial { display: flex; flex-direction: column; gap: 20px; margin: 0; }

.testimonial-stars {
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.testimonial blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.68;
  color: var(--text);
}

/* margin-top:auto keeps the attribution on the baseline when the two quotes
   are different lengths. */
.testimonial figcaption { margin-top: auto; }

.testimonial figcaption strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.testimonial figcaption span { font-size: 0.87rem; color: var(--faint); }

/* ---------------------------------------------------------------- social --- */

.social { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 0; padding: 0; }

.social a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 24px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line-gold);
  border-radius: 8px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease), transform 0.3s var(--ease);
}

.social a:hover { color: var(--black); border-color: var(--gold); background: var(--gold); transform: translateY(-2px); }
.social svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* ---------------------------------------------------------------- footer ---
   Matching glass card, floating on the satin like the sections above it. */

.site-footer {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto clamp(20px, 3vw, 30px);
  padding: 0 var(--gutter);
  position: relative;
  z-index: 2;
}

.site-footer > .container {
  padding: clamp(48px, 6vw, 72px) clamp(28px, 4vw, 56px) 34px;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line-gold);
  border-radius: 12px;
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.75);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.15fr;
  gap: 48px;
  margin-bottom: 54px;
}

.footer-grid h4 {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 11px; }
.footer-grid li a { font-size: 0.91rem; color: var(--text); }
.footer-grid li a:hover { color: var(--gold); }
.footer-grid p { font-size: 0.91rem; max-width: 34ch; color: var(--text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--line-gold);
  font-size: 0.77rem;
  color: var(--faint);
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------- scroll reveal --- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

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

@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .site-nav {
    position: fixed;
    inset: 78px 0 auto 0;
    max-height: 0;
    overflow: hidden;
    background: rgba(6, 8, 20, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-gold);
    transition: max-height 0.42s var(--ease);
  }

  .nav-open .site-nav { max-height: 78vh; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 30px 26px; }
  .nav-list li + li { border-top: 1px solid var(--line-gold); }
  .nav-list a { display: block; padding: 18px 0; font-size: 0.78rem; }
  .nav-list a::after { display: none; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .pillars { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero { min-height: 66vh; }
  .hero-scroll { display: none; }
  /* keep the mobile bar ~78px so the dropdown menu (anchored at 78px) aligns */
  .header-inner { min-height: 78px; padding: 6px 0; }
  .brand-banner { max-height: 64px !important; }
  .site-footer .brand-banner { max-height: 60px !important; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .work-grid, .grid-4, .footer-grid { grid-template-columns: 1fr; }
  .btn { display: block; width: 100%; text-align: center; }
  .btn-row { flex-direction: column; }
  .social a { flex: 1 1 100%; justify-content: center; }
  .brand-banner { max-height: 56px !important; max-width: 72vw !important; }
  .site-footer .brand-banner { max-height: 54px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ----------------------------------------------------- inline video ---
   Silent looping clips sitting where a .frame placeholder used to.
   Both source files are 1080x1920 vertical with black letterbox bars baked
   into the frame (528px top and bottom on one, 484px on the other), leaving
   picture areas of 1.25:1 and 1.13:1. object-fit: cover in a 16/9 box scales
   to the width and crops the overflow equally top and bottom, which lands
   inside the picture on both clips and throws the bars away entirely.
   Any box wider than 1.25:1 clears the bars — 16/9 leaves plenty of margin
   and matches the .frame it replaces, so the layout is unchanged. */

.video-card {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  background: #05060f;
  box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.85);
}

.video-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ------------------------------------------------ before/after slider ---
   The video sits underneath filling the box; the photo is layered on top and
   clipped with clip-path, so only the clip edge moves. A transparent native
   range input drives it, which gives pointer, touch and keyboard control
   without reimplementing any of them. */

.ba-slider {
  --pos: 50%;
  position: relative;
  /* Square. 507px is the height the 3/4 box already had at full size, so this
     widens it to match rather than changing how tall it sits in the column. */
  max-width: 507px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(10, 12, 26, 0.9);
  box-shadow: 0 22px 48px -28px rgba(0, 0, 0, 0.85);
  touch-action: pan-y;                 /* vertical swipes still scroll the page */
  user-select: none;
}

.ba-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Photo and video are different shapes, so both are cropped to the same box
   rather than letterboxed — the comparison only reads if the framing matches. */
.ba-before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  z-index: 2;
}

/* Full-size layers, each clipped to one side of the divider. Clipping has to
   happen on these rather than on the label itself, because a clip-path on the
   label would be measured against the label's own box, not the slider's. */
.ba-side {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.ba-side-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-side-after  { clip-path: inset(0 0 0 var(--pos)); }

.ba-label {
  position: absolute;
  top: 14px;
  padding: 6px 12px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(5, 5, 15, 0.72);
  border: 1px solid var(--line-gold);
  border-radius: 100px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

.ba-label-before { left: 14px; }
.ba-label-after  { right: 14px; }

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 4;                          /* above the labels, so they pass behind it */
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg,
              rgba(212, 168, 71, 0.25),
              var(--gold-bright) 22%,
              var(--gold-bright) 78%,
              rgba(212, 168, 71, 0.25));
  pointer-events: none;
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(5, 5, 15, 0.82);
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ba-handle svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The control itself — invisible, but it is what actually receives input. */
.ba-range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
  opacity: 0;
}

.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 52px;
  height: 100vh;                       /* grabbable anywhere down the divider */
  background: #fff;
  cursor: ew-resize;
}

.ba-range::-moz-range-thumb {
  width: 52px;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: #fff;
  cursor: ew-resize;
}

.ba-range:focus-visible { opacity: 0; }
.ba-slider:focus-within { border-color: var(--gold); }

@media (max-width: 620px) {
  .ba-slider { max-width: 320px; }
  .ba-handle { width: 40px; height: 40px; }
  .ba-label { font-size: 0.55rem; padding: 5px 10px; }
}

/* ------------------------------------------------------- nav dropdown ---
   The Pricing menu. Desktop opens on hover or focus; mobile turns it into an
   accordion inside the slide-down panel. Both states share the button and link
   styling so it reads as part of the same navigation. */

.has-drop { position: relative; }

/* Matches .nav-list a exactly — it is a <button> because it opens a menu
   rather than navigating anywhere. */
.drop-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 0 4px;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  line-height: inherit;
  color: var(--gold);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}

.drop-toggle::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold-bright);
  transition: width 0.35s var(--ease);
}

.drop-arrow {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s var(--ease);
}

.drop-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drop-menu a {
  display: block;
  white-space: nowrap;
  color: var(--gold);
}

.drop-menu a::after { display: none; }   /* no underline sweep inside the panel */
.drop-menu a:hover { color: var(--gold-bright); }

/* ------------------------------------------------------ dropdown: desktop */
@media (min-width: 861px) {
  .drop-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    min-width: 216px;
    padding: 8px;
    background: rgba(5, 5, 15, 0.97);
    border: 1px solid var(--line-gold);
    border-radius: 10px;
    box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity 0.32s var(--ease),
                transform 0.32s var(--ease),
                visibility 0.32s var(--ease);
    z-index: 90;
  }

  /* Invisible bridge across the gap, so moving the cursor from the button down
     to the panel does not drop the hover and snap it shut. */
  .has-drop::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 18px;
  }

  /* Open state comes from .is-open alone. Opening on :hover as well would let
     CSS hold the panel open after a click closed it — the cursor is still over
     the button at that point — which is what made it stick. The hover-to-open
     is handled in main.js so both routes drive the same single state. */
  .drop-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .has-drop:hover .drop-toggle,
  .drop-toggle[aria-expanded="true"] { color: var(--gold-bright); }

  .has-drop:hover .drop-toggle::after,
  .drop-toggle[aria-expanded="true"]::after { width: 100%; }

  /* Arrow follows the panel, not the cursor: down when closed, up when open. */
  .drop-toggle[aria-expanded="true"] .drop-arrow {
    transform: translateY(1px) rotate(-135deg);
  }

  .drop-menu a {
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: background 0.28s var(--ease), color 0.28s var(--ease);
  }

  .drop-menu a:hover { background: rgba(212, 168, 71, 0.14); }
}

/* ------------------------------------------------------- dropdown: mobile */
@media (max-width: 860px) {
  .has-drop { position: static; }

  .drop-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 18px 0;
    font-size: 0.78rem;
  }

  .drop-toggle::after { display: none; }

  /* Accordion: height-animated so open and close are both smooth. */
  .drop-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
  }

  .drop-menu.is-open { max-height: 220px; }

  .drop-toggle[aria-expanded="true"] { color: var(--gold-bright); }
  .drop-toggle[aria-expanded="true"] .drop-arrow {
    transform: translateY(1px) rotate(-135deg);
  }

  .drop-menu li + li { border-top: 1px solid var(--line-gold); }

  .drop-menu a {
    padding: 15px 0 15px 20px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.9;
  }
}

/* Seven nav items plus the 358px logo need ~1034px on a full-size bar. Between
   the mobile breakpoint and full desktop there is less room than that, so the
   spacing steps down rather than letting the bar overflow or the two-word
   labels break onto a second line. */
@media (min-width: 861px) {
  .nav-list > li > a,
  .drop-toggle { white-space: nowrap; }
}

@media (min-width: 1061px) and (max-width: 1200px) {
  .header-inner { gap: 14px; }
  .nav-list { gap: 22px; }
  .nav-list a,
  .drop-toggle { font-size: 0.665rem; letter-spacing: 0.13em; }
  .drop-toggle { gap: 7px; }
}

@media (min-width: 861px) and (max-width: 1060px) {
  .header-inner { gap: 12px; }
  .nav-list { gap: 13px; }
  .nav-list a,
  .drop-toggle { font-size: 0.62rem; letter-spacing: 0.09em; }
  .drop-toggle { gap: 6px; }
}

/* Sticky header would otherwise sit over the heading an anchor jumps to. */
#pricing, #retainer, #product { scroll-margin-top: 132px; }

@media (max-width: 860px) {
  #pricing, #retainer, #product { scroll-margin-top: 94px; }
}

/* --------------------------------------------------------------- pricing ---
   Package and retainer cards. These sit on top of the existing .card style
   rather than replacing it, so the dark panel, gold border and hover lift are
   all inherited and the pricing blocks match the rest of the site. */

.price-card { display: flex; flex-direction: column; }

/* Price line: founding figure loud, standard figure quiet beside it. */
.price-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 20px;
}

.price-now {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.95rem, 3.1vw, 2.55rem);
  line-height: 1;
  color: var(--gold);                      /* fallback where text clipping fails */
  background: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.price-label {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}

.price-was { font-size: 0.9rem; color: var(--text); opacity: 0.62; }

.price-includes { margin: 0 0 12px; font-size: 0.98rem; }
.price-includes strong { color: var(--gold-bright); font-weight: 500; }

.price-for {
  margin: 0;
  font-size: 0.89rem;
  font-style: italic;
  color: var(--text);
  opacity: 0.68;
}

/* ------------------------------------------------------------- retainer ---
   Deliberately louder than the pack cards: bigger heading, brighter border,
   the already-hovered panel tone and a larger price figure. */

.retainer-head { max-width: 1040px; }

/* Clearly bigger than the pack headings — roughly 1.4x at desktop widths. */
.retainer-head h2 {
  font-size: clamp(2.35rem, 5.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.retainer-card {
  border-color: rgba(212, 175, 55, 0.55);
  background: var(--card-inner-hi);
  box-shadow: 0 18px 44px -30px rgba(0, 0, 0, 0.85);
}

.retainer-card .price-now { font-size: clamp(2.25rem, 3.7vw, 3.05rem); }

.bonus-title {
  margin: 22px 0 12px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}

.bonus-list { list-style: none; margin: 0; padding: 0; }

.bonus-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 11px;
  font-size: 0.94rem;
  color: var(--text);
}

.bonus-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* Strip closing every pricing section. */
.price-note {
  margin: 34px 0 0;
  padding: 20px 26px;
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  background: rgba(10, 10, 20, 0.45);
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text);
}

.price-note strong {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
}

@media (max-width: 620px) {
  .price-note { padding: 18px 20px; font-size: 0.88rem; }
  .retainer-head h2 { font-size: clamp(1.85rem, 7.8vw, 2.4rem); }
}