/* ==========================================================================
   Rob Winger DJ — site.css
   Phase 1 design system. Built 2026-08-28 from STYLE-GUIDE.md.

   Mobile-first. No frameworks, no build step. One file, loaded by every page.
   Later phases ADD component blocks to section 8 — they do not re-decide
   sections 1-3. If a value here disagrees with STYLE-GUIDE.md, the guide wins.

   1. Tokens
   2. Reset
   3. Base elements
   4. Layout primitives
   5. Buttons and links
   6. Header
   7. Footer
   8. Components
   9. Utilities
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {

  /* --- Colour: the decided Phase 1 set (STYLE-GUIDE.md §2) -----------------
     Every value below is drawn from the logo or the client portal theme.
     Do not add hues. Red appears exactly once on the site: the tie in the
     logo. No button, link, heading, border or icon may use red. */

  --ground:         #0B1017;  /* page background — near-black, blue bias   */
  --surface:        #121A24;  /* cards, panels, option tiles               */
  --surface-raised: #1A2531;  /* hover states, nested panels               */
  --line:           #24313F;  /* borders, dividers, input outlines         */
  --text:           #EDF2F7;  /* body and headings                         */
  --muted:          #93A4B8;  /* secondary text, captions, labels          */
  --primary:        #1090F0;  /* links, active nav, focus rings            */
  --primary-hover:  #3AA8FF;  /* link and control hover                    */
  --cta:            #00C0FF;  /* primary buttons — the logo's brightest blue */
  --cta-text:       #062033;  /* text on a --cta button, deliberately inverted */
  --deep:           #014F87;  /* header, footer, section bands — portal main bar */
  --deep-soft:      #61A5C2;  /* muted UI, disabled states — portal sub bar */

  /* --- Colour: derived ----------------------------------------------------
     Not in the guide's table. Each is a transform of a token above, needed
     because --line is invisible over a photographic hero. Added here rather
     than hard-coded at the point of use. */

  --line-over-image: rgba(237, 242, 247, 0.32); /* --text at 32% */
  --deep-hairline:   rgba(237, 242, 247, 0.12); /* header/footer edge */
  --cta-glow:        rgba(0, 192, 255, 0.22);
  --scrim:           rgba(6, 12, 20, 0.72);     /* hero image overlay */

  /* --- Type ---------------------------------------------------------------
     Archivo for headings (tight, wide, confident at hero size), Inter for
     body. Both from Google Fonts; both have a real fallback stack so the
     page is readable before the webfont lands. */

  --font-display: "Archivo", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale. Each step is clamped: the mobile value never drops below
     the floor, the desktop value never exceeds the ceiling. */
  --text-xs:   0.8125rem;                        /* 13px — labels, legal    */
  --text-sm:   0.9375rem;                        /* 15px — captions         */
  --text-base: 1rem;                             /* 16px — body             */
  --text-lg:   clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);  /* lead       */
  --text-xl:   clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);    /* h4         */
  --text-2xl:  clamp(1.375rem, 1.24rem + 0.7vw, 1.625rem);    /* h3         */
  --text-3xl:  clamp(1.625rem, 1.4rem + 1.2vw, 2.125rem);     /* h2         */
  --text-4xl:  clamp(2rem, 1.6rem + 2vw, 2.75rem);            /* h1         */
  --text-hero: clamp(2.25rem, 1.5rem + 3.6vw, 3.75rem);       /* hero h1    */

  --leading-tight: 1.12;
  --leading-snug:  1.3;
  --leading-body:  1.65;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;   /* eyebrows and small caps */

  --weight-body:    400;
  --weight-medium:  500;
  --weight-strong:  600;
  --weight-display: 700;

  /* --- Space --------------------------------------------------------------
     One scale, used for everything. --space-7 and up are section rhythm. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* Section rhythm: tighter on a phone, generous on a desktop. */
  --section-y: clamp(var(--space-8), 6vw, var(--space-11));
  --section-y-lg: clamp(var(--space-9), 9vw, var(--space-12));

  /* --- Measure and containers --------------------------------------------- */
  --container:      72rem;   /* 1152px — default page width                 */
  --container-narrow: 46rem; /*  736px — long-form copy                     */
  --gutter: clamp(var(--space-4), 4vw, var(--space-6));
  --measure: 68ch;           /* max line length for readable prose          */

  /* --- Shape and depth ----------------------------------------------------- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);

  /* --- Header ------------------------------------------------------------
     The logo slot is FIXED HEIGHT, FLEXIBLE WIDTH. A horizontal lockup is
     being designed; when it arrives it replaces the square badge and the
     text wordmark, and only --logo-h needs revisiting. Nothing in the
     header is sized off the logo's width. */
  --logo-h: 38px;            /* slot height, mobile                          */
  --header-h: 62px;          /* mobile bar height                            */
  --z-header: 1000;
  --z-nav-panel: 999;

  /* --- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 180ms;
}

@media (min-width: 48em) {   /* 768px */
  :root {
    --logo-h: 46px;
    --header-h: 76px;
  }
}

/* ==========================================================================
   2. RESET
   The old styles.css opened its reset with a comment followed directly by a
   brace, which selects nothing — that is why much of the current site falls
   through to Times New Roman. This one is deliberate.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] { list-style: none; }

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; }

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

/* ==========================================================================
   3. BASE ELEMENTS
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  background-color: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); font-weight: var(--weight-strong); }

p { text-wrap: pretty; }

p + p,
p + ul,
p + ol { margin-top: var(--space-4); }

h2 + p,
h3 + p,
h4 + p { margin-top: var(--space-3); }

strong, b { font-weight: var(--weight-strong); }

small { font-size: var(--text-sm); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--space-8);
}

::selection {
  background: var(--cta);
  color: var(--cta-text);
}

/* One focus treatment for the whole site. */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

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

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--tight { padding-block: clamp(var(--space-7), 4.5vw, var(--space-9)); }

/* Section grounds. Alternate sparingly — a page that alternates every
   section reads as stripes rather than rhythm. */
.section--surface { background-color: var(--surface); }
.section--band {
  background-color: var(--deep);
  color: var(--text);
}
.section--band a { color: #FFFFFF; }

/* Vertical rhythm inside a section: children get an even gap, no margin
   collapsing to reason about. */
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--space-4); }
.stack--sm > * + * { margin-top: var(--space-2); }
.stack--lg > * + * { margin-top: var(--space-6); }
.stack--xl > * + * { margin-top: var(--space-8); }

.prose { max-width: var(--measure); }
.prose--center { margin-inline: auto; }

/* Responsive grid. Cards choose their own minimum and the grid does the
   rest — no breakpoints needed for the common cases. */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* Exactly four items: step 1 -> 2 -> 4 rather than letting auto-fit strand a
   lone card on its own row. Used by the Phase 2 services grid. */
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 36em) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* Quotes: force a clean 2-up. Four review cards at the default 17rem minimum
   fit THREE across in the 72rem container and strand the fourth alone on a
   second row. A 24rem minimum yields two columns at full width, which also
   reads far better for 50-word quotations than four narrow ones. */
.grid--quotes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--tight { gap: var(--space-4); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.cluster--center { justify-content: center; }

/* Section heading block: eyebrow, title, optional lead. */
.section-head { margin-bottom: var(--space-7); }
.section-head--center {
  text-align: center;
  margin-inline: auto;
  max-width: 44rem;
}
.section-head p {
  color: var(--muted);
  font-size: var(--text-lg);
  margin-top: var(--space-3);
}

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--deep-soft);
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   5. BUTTONS AND LINKS

   Hierarchy comes from brightness and weight, never from a second hue —
   the same way the logo's own gradient works.

   Never place two .btn--primary in the same viewport. The brightness cue
   only works if it is rare.
   ========================================================================== */

a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--speed) var(--ease);
}
a:hover { color: var(--primary-hover); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;              /* comfortable tap target */
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

.btn:active { transform: translateY(1px); }

/* Primary — the brightest thing on the page. One per viewport. */
.btn--primary {
  background-color: var(--cta);
  color: var(--cta-text);
  box-shadow: 0 0 0 0 var(--cta-glow);
}
.btn--primary:hover {
  background-color: #33CDFF;
  color: var(--cta-text);
  box-shadow: 0 6px 24px var(--cta-glow);
}

/* Secondary — transparent, hairline border, --text label. */
.btn--secondary {
  background-color: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn--secondary:hover {
  background-color: var(--surface-raised);
  border-color: var(--deep-soft);
  color: var(--text);
}

/* Over a photograph, --line disappears. This variant is for the hero. */
.btn--on-image {
  background-color: transparent;
  border-color: var(--line-over-image);
  color: var(--text);
  backdrop-filter: blur(2px);
}
.btn--on-image:hover {
  background-color: rgba(237, 242, 247, 0.12);
  border-color: var(--text);
  color: var(--text);
}

.btn--block { width: 100%; }

.btn[aria-disabled="true"],
.btn:disabled {
  background-color: transparent;
  border-color: var(--line);
  color: var(--deep-soft);
  pointer-events: none;
}

/* A link that reads as an action without carrying button weight. */
.link-arrow {
  font-family: var(--font-display);
  font-weight: var(--weight-strong);
  text-decoration: none;
}
.link-arrow::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.4em;
  transition: transform var(--speed) var(--ease);
}
.link-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   6. HEADER

   Markup pattern — copy verbatim into every new page. Change two things
   only: the `aria-current="page"` attribute, and nothing else.

   The logo slot is fixed-height / flexible-width by design. The badge is a
   placeholder for a horizontal lockup now being designed. When that art
   lands: replace the <img> src, delete .site-logo__word, and check --logo-h.
   No layout rule depends on the logo's width.
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-3) var(--space-5);
  background: var(--cta);
  color: var(--cta-text);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-strong);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--speed) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--cta-text); }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--deep);
  border-bottom: 1px solid var(--deep-hairline);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

/* --- Logo slot: FIXED HEIGHT, FLEXIBLE WIDTH --------------------------- */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--logo-h);       /* the fixed dimension */
  width: auto;                 /* the flexible one    */
  flex: 0 0 auto;
  text-decoration: none;
  color: #FFFFFF;
}
.site-logo:hover { color: #FFFFFF; }

.site-logo img {
  height: 100%;                /* fills the slot height, any aspect ratio */
  width: auto;
  flex: 0 0 auto;
}

.site-logo__word {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  white-space: nowrap;
}

/* --- Nav toggle: mobile only ------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform var(--speed) var(--ease),
              opacity var(--speed) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Nav ---------------------------------------------------------------
   Mobile: a panel below the bar, toggled by the button. If JavaScript never
   runs, .site-nav has no [hidden] applied by the script and the links stay
   visible stacked — the header degrades, it does not trap. */
/* Mobile: the menu takes the viewport below the header rather than dropping
   over the page.

   The first attempt was a drop-down panel. It failed twice over: it covered
   the hero headline with no signal that it was a temporary layer, and four
   links in a half-height slab looked like wasted space. Both symptoms come
   from a panel that is neither compact nor committed.

   It is also a dead end. The nav carries four links today and reaches ten or
   more by Phase 8 (packages, wedding, karaoke, karaoke series, private
   parties, corporate, add-ons, reviews, FAQ, venues, about, gallery). A
   drop-down sized for four does not survive that; a full-height panel does,
   and scrolls when the list finally outgrows the screen.

   Fixed, not absolute: the menu must not scroll away with the page. */
.site-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));  /* excludes mobile browser chrome */
  z-index: var(--z-nav-panel);
  background-color: var(--ground);
  border-top: 1px solid var(--deep-hairline);
  overflow-y: auto;
  overscroll-behavior: contain;            /* no scroll chaining to the page */
  -webkit-overflow-scrolling: touch;
}

/* Progressive enhancement: the panel is only collapsible once the script
   has marked the document. With JavaScript off, .js is never added and the
   links stay visible and reachable — the header degrades, it never traps. */
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }

/* Set by the script while the menu is open, so the page behind it cannot be
   scrolled by a stray drag. */
.nav-open, .nav-open body { overflow: hidden; }

/* Column that fills the panel, so the foot can sit at the bottom when the
   link list is short and flow naturally once it is long. */
.site-nav__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-2) var(--gutter) var(--space-6);
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Pushed to the bottom of the panel by the auto margin. The primary button
   here does not break the one-per-viewport rule: while the menu is open the
   hero and its buttons are not on screen. */
.site-nav__foot {
  margin-top: auto;
  padding-top: var(--space-7);
}
.site-nav__foot p {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
}
.site-nav__foot a:not(.btn) {
  color: var(--muted);
  text-decoration: none;
}
.site-nav__foot a:not(.btn):hover { color: var(--text); }

/* Hairlines between items. In a full-height panel the rows can breathe, and
   the rules are what keep breathing room reading as structure. */
.site-nav__list li + li { border-top: 1px solid var(--line); }

.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--space-3) 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}
.site-nav__list a:hover { color: var(--cta); }

.site-nav__list a[aria-current="page"] {
  color: var(--cta);
  font-weight: var(--weight-display);
}

@media (min-width: 56em) {   /* 896px — the nav fits on one line */
  .nav-toggle { display: none; }

  .site-nav,
  .js .site-nav {
    display: block;
    position: static;
    height: auto;
    background: none;
    border: 0;
    overflow: visible;
    box-shadow: none;
  }

  .site-nav__list li + li { border-top: 0; }

  .site-nav__inner {
    display: block;
    min-height: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .site-nav__foot { display: none; }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .site-nav__list a {
    position: relative;
    display: block;
    min-height: 0;
    padding: var(--space-2) 0;
    color: #FFFFFF;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    letter-spacing: normal;
  }

  /* Active state as an underline rather than colour alone, so it survives
     being read by someone who cannot distinguish the blues. */
  .site-nav__list a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--cta);
    border-radius: 2px;
  }
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--deep);
  border-top: 1px solid var(--deep-hairline);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--text-sm);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}

@media (min-width: 44em) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); }
}

.site-footer h2 {
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: var(--space-3);
}

.site-footer a {
  color: #FFFFFF;
  text-decoration: none;
}
.site-footer a:hover { color: var(--cta); text-decoration: underline; }

.site-footer__list li + li { margin-top: var(--space-2); }

.site-footer__brand p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 32ch;
  margin-top: var(--space-3);
}

.site-footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--deep-hairline);
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--text-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
}

/* ==========================================================================
   8. COMPONENTS
   Later phases add here.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------
   Declare each page's hero image as a MODIFIER CLASS in this file, e.g.
   .hero--home below. Do not set --hero-image in an inline style attribute:
   a relative url() inside a custom property resolves against the stylesheet
   that substitutes it, not the HTML document, so the path silently 404s.
   Paths here are relative to this file (assets/css/). */
.hero {
  position: relative;
  padding-block: clamp(var(--space-9), 12vw, var(--space-12));
  background-color: var(--ground);
  background-image: linear-gradient(var(--scrim), var(--scrim)), var(--hero-image, none);
  background-size: cover;
  background-position: center;
  text-align: center;
}

/* Home page hero. Phase 2 replaces this photo. */
.hero--home { --hero-image: url("../img/hero-home.jpg"); }

.hero h1 {
  font-size: var(--text-hero);
  max-width: 20ch;
  margin-inline: auto;
}

.hero__lead {
  font-size: var(--text-lg);
  color: rgba(237, 242, 247, 0.88);
  max-width: 52ch;
  margin: var(--space-5) auto 0;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

@media (min-width: 34em) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
  }
}

/* --- Card --------------------------------------------------------------- */
.card {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}

.card h3 { font-size: var(--text-xl); }
.card p { color: var(--muted); margin-top: var(--space-3); }

/* Only cards that are themselves a link should lift on hover. */
a.card,
.card--interactive { text-decoration: none; color: inherit; display: block; }
a.card:hover,
.card--interactive:hover {
  background-color: var(--surface-raised);
  border-color: var(--deep-soft);
  transform: translateY(-2px);
}

/* --- Credibility / stat row --------------------------------------------- */
.proof {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  text-align: center;
}

/* Keep the labels on a shared baseline when one value wraps to two lines
   ("Fewer than 1 in 100" does at most widths). Subgrid lets every item share
   the row track, so a taller value pushes the whole row rather than leaving
   its own label hanging lower than its neighbours. Without subgrid support
   the row simply falls back to the ragged-but-readable default. */
@supports (grid-template-rows: subgrid) {
  .proof > * {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}
.proof__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-display);
  line-height: 1.05;
  color: var(--text);
}
.proof__label {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
}
.section--band .proof__label { color: rgba(255, 255, 255, 0.82); }

/* --- Pill / tag ---------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}

/* --- Call-to-action panel ------------------------------------------------ */
.cta-panel {
  background: linear-gradient(160deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 5vw, var(--space-9));
  text-align: center;
}

/* --- Quote / testimonial -------------------------------------------------
   Phase 2 section 6. A figure, not a card: the citation is a real
   <figcaption> so the attribution is programmatically tied to the quote
   rather than being a visually adjacent paragraph. */
.quote {
  background-color: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.quote__text { margin: 0; }
.quote__text p {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text);
}
/* Typographic quotation marks, not glyphs in the markup — screen readers
   should not announce them, and the text stays copy-pasteable. */
.quote__text p::before { content: "\201C"; }
.quote__text p::after  { content: "\201D"; }

.quote__cite {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-style: normal;
  color: var(--text);
}
.quote__cite span {
  display: block;
  margin-top: var(--space-1);
  font-weight: var(--weight-body);
  color: var(--muted);
}

/* --- Photo strip ---------------------------------------------------------
   Phase 2 section 8. Fixed-ratio tiles so a mixed bag of portrait and
   landscape exports still lines up, and so the row reserves its height
   before the images decode. */
.photo-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/* The strip holds FIVE images (2026-09-02). auto-fit alone fits only four
   across at every laptop width, which strands the fifth alone on a second
   row beside three empty columns — it reads as unfinished. Pinning five
   columns above 60rem puts the whole set in one row on any desktop, and
   below that the auto-fit rule above takes over again and wraps to 3 + 2,
   then 2 + 2 + 1, then single file on a phone.

   IF THE COUNT CHANGES, CHANGE THIS NUMBER OR DELETE THIS BLOCK. It is
   hard-coded to five on purpose; a sixth image would want repeat(3, 1fr)
   here, and four wants no rule at all. */
@media (min-width: 60rem) {
  .photo-strip { grid-template-columns: repeat(5, 1fr); }
}

.photo-strip img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

/* --- Build placeholder ---------------------------------------------------
   Marks a section that is structurally finished but waiting on content.
   Deliberately conspicuous: this must never survive to launch unnoticed.
   Phase 10 checks that no .placeholder remains anywhere on the site. */
.placeholder {
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  color: var(--muted);
}

.placeholder__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--deep-soft);
  margin-bottom: var(--space-3);
}

/* --- Third-party form panel ----------------------------------------------
   Phase 2b. DJ Intelligence embeds arrive inside an iframe served from
   djintelligence.com, so this site's tokens, Archivo/Inter and the dark
   palette cannot reach their contents and must not be fought. The panel
   makes the seam deliberate: a light surface the widget sits inside, rather
   than a bright rectangle stranded on a dark page. Do NOT try to restyle
   what is inside the iframe. See DJI-INTEGRATIONS.md.

   min-height is a floor, not a height: each DJI script resizes its own
   iframe once it loads. It exists so a failed script leaves a panel rather
   than the 150px default box. */
.form-panel {
  background-color: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-3), 2.5vw, var(--space-5));
  box-shadow: var(--shadow);
  color: #16202B;
}

.form-panel iframe {
  display: block;
  width: 100%;
  min-height: 26rem;
  border: 0;
}

/* The DJI stylesheets set their own link colours inside the iframe; this
   only catches any stray markup we put in the panel ourselves. */
.form-panel a { color: #014F87; }

/* --- Numbered step -------------------------------------------------------
   A .card with a numeral badge. Used for "how it works" rows where the
   order is the content. The numeral is decorative-adjacent: it is read out,
   which is correct here, because the sequence is the point. */
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background-color: var(--deep);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-sm);
  line-height: 1;
}

/* --- Spec list -----------------------------------------------------------
   Phase 3. Two shapes, one component:

   .spec-list            name + description rows, divided. The add-on
                         catalogue and the popular builds.
   .spec-list--compact   a plain list of inclusions, no dividers, marker
                         dots. What is in a base package.

   Inside a .card the rows inherit the card's muted body colour; the <strong>
   lifts the name back to full contrast so a list scans by name. */
.spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.spec-list li {
  padding-block: var(--space-3);
  color: var(--muted);
}

.spec-list li + li { border-top: 1px solid var(--line); }

.spec-list strong {
  display: block;
  color: var(--text);
  font-weight: var(--weight-strong);
}

.spec-list span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}

.spec-list--compact li {
  padding-block: var(--space-2);
  padding-left: var(--space-5);
  position: relative;
  border-top: 0;
  font-size: var(--text-sm);
}

.spec-list--compact li + li { border-top: 0; }

.spec-list--compact li::before {
  content: "";
  position: absolute;
  left: var(--space-2);
  top: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--deep-soft);
}

.card > .spec-list { margin-top: var(--space-5); }

/* ==========================================================================
   9. UTILITIES
   ========================================================================== */

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

.text-center { text-align: center; }
.text-muted  { color: var(--muted); }
.text-lead   { font-size: var(--text-lg); color: var(--muted); }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: var(--space-5); }
.mt-7 { margin-top: var(--space-7); }
.no-underline { text-decoration: none; }

[hidden] { display: none !important; }