/* Sparkler Pages — R.K. Reiman Construction.
 *
 * THIS is the file that carries the look, and it is the reason the plugin exists: the client edits
 * words and images, never spacing or colour, so the design survives being edited.
 *
 * Ingested 2026-08-04 from `sites/RK Reiman/RK-Reiman-Home-Page-Concept.html` (a claude.ai design
 * bundle). The concept authored every rule as an INLINE style on a one-off page; this file is the
 * templatised form of it — the same look expressed as reusable classes, so a second page inherits
 * it instead of copying it. Replaces the generic placeholder design that shipped with the plugin.
 *
 * Namespaced .rk-* throughout because it loads alongside the client's active theme stylesheet.
 *
 * BOX-SIZING IS OURS TO SET, NOT THE THEME'S TO PROVIDE. Caught last time by a real 390px
 * screenshot, not by review: a `width:100%` + padding wrapper computes wider than the viewport
 * without border-box, which is a horizontal scroll on every page on every phone. Most themes
 * normalise it; relying on that means the design breaks on the one client whose theme does not,
 * in the way nobody checks. Scoped to our own subtree so we never reach into the theme's.
 */
.rk-body,
.rk-body *,
.rk-body *::before,
.rk-body *::after {
  box-sizing: border-box;
}

.rk-body {
  /* Palette lifted from the concept: gold on cream, deep slate for the dark bands. */
  --rk-gold: #b9975b;
  --rk-gold-soft: #d8c9a3;
  --rk-gold-deep: #8f6f38;
  --rk-ink: #16211b;
  --rk-ink-soft: #3f4a40;
  --rk-muted: #8b98a0;
  --rk-cream: #f7f3ea;
  --rk-cream-deep: #efe9db;
  --rk-slate: #1f2f3c;
  --rk-slate-deep: #111a23;
  --rk-line: #e2d9c6;
  --rk-radius: 14px;
  --rk-wrap: 1280px;
  --rk-band: clamp(68px, 8vw, 110px);

  /* The two families the concept uses. Cormorant Garamond carries every display line; Jost is the
     workhorse. Both are loaded by templates/page.php — a font that fails to load must degrade to a
     serif/sans of the same weight, never to the other family, or the hierarchy inverts. */
  --rk-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --rk-text: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  margin: 0;
  background: linear-gradient(180deg, #faf8f2 0%, #f7f3ea 55%, #f1eadb 100%);
  color: var(--rk-ink);
  font-family: var(--rk-text);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.rk-wrap { width: 100%; max-width: var(--rk-wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
.rk-wrap--narrow { max-width: 1080px; }
.rk-wrap--wide { max-width: 1400px; }
.rk-sec { padding-block: var(--rk-band); }

/* ── Type ────────────────────────────────────────────────────────────────────────────────────
   Display sizes are fluid so no band needs a mobile variant of its own. The concept's h1 was
   `min(100px, 7vw)`, which on a 390px phone is 27px — smaller than its own body copy. clamp with a
   floor fixes that; every dc export we have shipped broke here first. */
.rk-display { font-family: var(--rk-display); font-weight: 400; line-height: 1.04; margin: 0; text-wrap: balance; }
.rk-h1 { font-family: var(--rk-display); font-weight: 400; font-size: clamp(42px, 7vw, 100px); line-height: 1.04; margin: 0 0 40px; text-wrap: balance; }
.rk-h2 { font-family: var(--rk-display); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; margin: 0 0 18px; text-wrap: balance; }
.rk-h3 { font-family: var(--rk-display); font-weight: 400; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.2; margin: 0 0 10px; }
.rk-lede { font-family: var(--rk-display); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.4; margin: 0; font-weight: 400; }
.rk-body-copy { font-size: 16px; line-height: 1.7; font-weight: 300; color: var(--rk-ink-soft); margin: 24px 0 0; }
.rk-prose { max-width: 68ch; }
.rk-prose p { margin: 0 0 1.1rem; }
.rk-prose h2 { font-family: var(--rk-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); margin: 2.2rem 0 .8rem; }
.rk-prose h3 { font-family: var(--rk-display); font-weight: 400; font-size: 22px; margin: 1.8rem 0 .6rem; }
.rk-prose ul { margin: 0 0 1.1rem; padding-left: 1.1rem; }
.rk-prose li { margin-bottom: .4rem; }

/* The gold letter-spaced label the concept uses everywhere as its structural voice. */
.rk-eyebrow {
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--rk-gold);
  line-height: 2;
  margin: 0;
}
.rk-eyebrow--sub { color: var(--rk-muted); letter-spacing: .28em; }
.rk-kicker { font-size: 12px; letter-spacing: .46em; text-transform: uppercase; color: var(--rk-gold-soft); margin: 0; }

/* A gold rule either side of a line of text — the concept's hero signature. */
.rk-ruled { display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 100%; }
.rk-ruled::before, .rk-ruled::after { content: ''; width: 48px; height: 1px; background: var(--rk-gold); flex: 0 0 auto; }
@media (max-width: 640px) { .rk-ruled::before, .rk-ruled::after { width: 18px; } }

/* ── Links and buttons ───────────────────────────────────────────────────────────────────── */
a { color: var(--rk-gold); text-decoration: none; transition: color .25s ease; }
a:hover { color: #1d3a2a; }

.rk-btn {
  display: inline-block;
  background: linear-gradient(135deg, #c2a163 0%, #b08e50 100%);
  color: #fff;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: 9px;
  white-space: nowrap;
  transition: filter .25s ease, transform .25s ease;
}
.rk-btn:hover { color: #fff; filter: brightness(1.07); transform: translateY(-1px); }

/* The underlined text link that reads as a button in the hero. */
.rk-quiet-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rk-gold);
  padding-bottom: 10px;
}
.rk-quiet-btn:hover { color: var(--rk-gold-soft); }
.rk-quiet-btn span { color: var(--rk-gold); }
.rk-quiet-btn--ink { color: var(--rk-ink); }
.rk-quiet-btn--ink:hover { color: var(--rk-gold-deep); }

.rk-btn:focus-visible, .rk-quiet-btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--rk-gold);
  outline-offset: 3px;
}

/* ── Chrome ──────────────────────────────────────────────────────────────────────────────────
   The concept overlaid its nav on the hero image. Here the nav is real page chrome, so it works on
   an interior page that has no hero: transparent over a hero, solid otherwise. Set by page.php. */
/* The positioning context for the over-hero nav — see templates/page.php. */
.rk-shell { position: relative; }

.rk-head { position: relative; z-index: 20; }
.rk-head__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 30px clamp(20px, 5vw, 72px);
}
/* top:0 is the top of .rk-shell, not of the document — which is the top of the hero photograph
   whatever else the page has stacked above it. */
.rk-head--over {
  position: absolute; inset-inline: 0; top: 0;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.rk-head--over a { color: #fff; }
.rk-head--over a:hover { color: var(--rk-gold-soft); }
.rk-head--solid { background: var(--rk-cream); border-bottom: 1px solid var(--rk-line); }
.rk-head--solid a { color: var(--rk-ink); }
.rk-head--solid a:hover { color: var(--rk-gold-deep); }

/* EXPLICIT COLUMNS, because the brand is first in the DOM now. It had to leave the collapsible
   wrapper — the logo is the one header element that never hides — and a wrapper cannot enclose the two
   navs without enclosing what sits between them. `display: contents` keeps the navs as grid children
   so nothing about the desktop composition changes. */
.rk-head__menu { display: contents; }
.rk-nav        { grid-column: 1; grid-row: 1; }
.rk-brand      { grid-column: 2; grid-row: 1; }
.rk-nav--end   { grid-column: 3; grid-row: 1; }
.rk-burger     { display: none; }

.rk-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.rk-brand__name { font-family: var(--rk-display); font-size: 30px; letter-spacing: .06em; white-space: nowrap; }
.rk-brand__sub { font-size: 11px; letter-spacing: .5em; color: var(--rk-gold-soft); margin-top: 2px; }
.rk-head--solid .rk-brand__sub { color: var(--rk-gold-deep); }

.rk-nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 40px); font-size: 13px; letter-spacing: .22em; }
.rk-nav--end { justify-content: flex-end; }
.rk-nav ul { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.rk-nav a { text-transform: uppercase; }
.rk-phone {
  white-space: nowrap;
  border: 1px solid rgba(216, 201, 163, .8);
  background: rgba(10, 16, 12, .35);
  padding: 11px 22px;
  font-size: 12px;
  letter-spacing: .24em;
  text-shadow: none;
  transition: background-color .25s ease, border-color .25s ease;
}
.rk-phone:hover { background: rgba(10, 16, 12, .6); border-color: var(--rk-gold); }
.rk-head--solid .rk-phone { background: transparent; border-color: var(--rk-gold); }
.rk-head--solid .rk-phone:hover { background: var(--rk-gold); color: #fff; }

.rk-foot {
  background: linear-gradient(90deg, #efe9db 0%, #e5ddc9 100%);
  padding: 34px clamp(20px, 5vw, 48px);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8a9686;
}

/* ── Hero ────────────────────────────────────────────────────────────────────────────────────
   min-height rather than a fixed 100vh: a phone's 100vh moves as the browser chrome hides, which
   makes the whole hero jump mid-scroll. */
/* 100vh and the copy centred at 74%, exactly as the concept has it. The earlier `align-self:end`
   plus bottom padding was close but not the same line — on a 1440x900 screen it sat ~40px low, and
   the whole composition is built around where that headline crosses the driveway.
   `min-height`, not `height`: the band must still grow if the client writes a longer headline. */
.rk-hero { position: relative; height: 100vh; min-height: 600px; background: #101713; color: #fff; overflow: hidden; }
.rk-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rk-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 74%, rgba(10, 16, 12, .45) 0%, rgba(10, 16, 12, .25) 55%, rgba(10, 16, 12, 0) 100%),
    linear-gradient(180deg, rgba(10, 16, 12, .5) 0%, rgba(10, 16, 12, 0) 26%, rgba(10, 16, 12, 0) 70%, rgba(10, 16, 12, .45) 100%);
}
.rk-hero__inner {
  position: absolute;
  left: 50%; top: 74%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* 14px, not 28. The kicker and the headline are ONE thought — the rule-flanked line introduces the
     sentence beneath it — and at 28px they read as two separate blocks that happen to be stacked.
     Tightening the pair also lets the gold rules sit visually against the display type rather than
     floating in their own band. Kept as a gap rather than a margin on either child so the two stay
     tied together whatever else the hero gains. */
  gap: 14px;
  width: 100%;
  max-width: min(1100px, calc(100vw - 32px));
  padding-inline: clamp(16px, 4vw, 48px);
}
.rk-hero__inner .rk-h1 { margin: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 8px 40px rgba(0, 0, 0, .5); }
/* The gap above tightened the WHOLE stack, which pulled the button up with the kicker. Only the
   kicker and the headline are one thought; the call to action is a separate move and wants its air
   back. 14 + 14 restores what it had. */
.rk-hero__inner .rk-quiet-btn { margin-top: 14px; }
.rk-hero__inner .rk-kicker { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }

/* Compact hero for interior pages: same voice, a fifth of the height, no image required. */
.rk-pagehead { background: linear-gradient(165deg, #1f2f3c 0%, #18242f 55%, #111a23 100%); color: #fff; padding-block: clamp(56px, 7vw, 92px); }
.rk-pagehead__inner { display: flex; flex-direction: column; gap: 16px; }
.rk-pagehead .rk-h1 { font-size: clamp(34px, 4.6vw, 62px); margin: 0; }
.rk-pagehead .rk-body-copy { color: #cfd6cf; max-width: 60ch; margin: 6px 0 0; }

/* ── Story: label column beside the copy ─────────────────────────────────────────────────── */
.rk-story__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 5vw, 64px); align-items: start; }

/* ── Image mosaic ────────────────────────────────────────────────────────────────────────────
   Two rows of two, alternating which side is wider — the concept's rhythm. aspect-ratio instead of
   its fixed 520px/440px heights so the crop is the same shape at every width. */
.rk-mosaic { display: grid; gap: clamp(14px, 2vw, 24px); }
.rk-mosaic__row { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: 1.5fr 1fr; height: clamp(240px, 36vw, 520px); }
.rk-mosaic__row--flip { grid-template-columns: 1fr 1.5fr; height: clamp(220px, 31vw, 440px); }
/* ROW HEIGHT, NOT PER-FRAME ASPECT-RATIO. aspect-ratio let each frame compute its own height from
   its own width, so the 1.5fr frame came out visibly taller than the 1fr frame beside it — the
   concept's rows are 520px and 440px with both frames matching. The clamp is the only liberty: a
   fixed 520px is 133% of a phone's width, so it scales down and stops at the concept's value. */
.rk-frame { overflow: hidden; border-radius: var(--rk-radius); height: 100%; background: var(--rk-cream-deep); }
.rk-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.rk-frame:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .rk-frame img, .rk-btn { transition: none; } .rk-frame:hover img { transform: none; } }

/* ── Dark quote band ─────────────────────────────────────────────────────────────────────── */
.rk-quote { background: linear-gradient(165deg, #1f2f3c 0%, #18242f 55%, #111a23 100%); color: #fff; }
.rk-quote__inner { max-width: 900px; margin-inline: auto; text-align: center; }
.rk-quote__stars { color: #c3a468; font-size: 20px; letter-spacing: .14em; margin-bottom: 26px; }
.rk-quote__body { font-family: var(--rk-display); font-style: italic; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.3; margin: 0; color: #efe9dd; text-wrap: balance; }
.rk-quote__by { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #8c9aa6; margin-top: 26px; }

/* ── Feature card + CTA pair (the "next home" band, reusable as any image + copy band) ───── */
.rk-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.rk-card { position: relative; overflow: hidden; border-radius: var(--rk-radius); height: clamp(260px, 26vw, 360px); }
.rk-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.rk-card:hover img { transform: scale(1.04); }
.rk-card__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(18, 35, 44, 0) 40%, rgba(18, 35, 44, .78) 100%); }
.rk-card__label { position: absolute; left: 26px; bottom: 24px; color: #fff; pointer-events: none; }
.rk-card__label .rk-eyebrow { color: var(--rk-gold-soft); font-size: 10px; margin-bottom: 8px; line-height: 1.4; }
.rk-card__title { font-family: var(--rk-display); font-size: clamp(22px, 2.2vw, 30px); }

/* ── Three-up services / capability cards ────────────────────────────────────────────────── */
.rk-grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.rk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.rk-tile { padding: clamp(22px, 2.4vw, 34px); background: rgba(255, 255, 255, .55); border: 1px solid var(--rk-line); border-radius: var(--rk-radius); }
.rk-tile__num { font-family: var(--rk-display); font-size: 30px; color: var(--rk-gold); line-height: 1; margin-bottom: 14px; }
.rk-tile p { margin: 0; color: var(--rk-ink-soft); }

/* ── Numbers band ────────────────────────────────────────────────────────────────────────── */
.rk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 40px); text-align: center; }
.rk-stat__fig { font-family: var(--rk-display); font-size: clamp(38px, 4.4vw, 58px); line-height: 1; color: var(--rk-ink); }
.rk-stat__lab { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--rk-muted); margin-top: 10px; }

/* ── Centred CTA band ────────────────────────────────────────────────────────────────────── */
.rk-cta { background: var(--rk-cream-deep); border-block: 1px solid var(--rk-line); }
.rk-cta__inner { text-align: center; max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.rk-cta__inner .rk-h2 { margin: 0; }
.rk-cta__inner p { margin: 0; color: var(--rk-ink-soft); }

/* ── Contact details ─────────────────────────────────────────────────────────────────────── */
.rk-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.rk-contact__lab { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--rk-gold); margin: 0 0 8px; }
.rk-contact__val { font-family: var(--rk-display); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.35; }

/* ── Mobile. The breakpoints are part of the design, not an afterthought. ─────────────────── */
@media (max-width: 980px) {
  .rk-story__inner, .rk-split { grid-template-columns: 1fr; }
  /* Stacked, so the row can no longer carry the height — each frame takes its own again. */
  .rk-mosaic__row, .rk-mosaic__row--flip { grid-template-columns: 1fr; height: auto; }
  .rk-frame { height: auto; aspect-ratio: 16 / 11; }
  .rk-grid--3, .rk-grid--2, .rk-contact { grid-template-columns: 1fr; }
  .rk-stats { grid-template-columns: repeat(2, 1fr); }

  /* ── The hamburger takes over at tablet ──────────────────────────────────────────────────────
     Two navs either side of a wordmark is a wide-screen composition. Stacking it (what this used to
     do) built a centred pile three rows tall that pushed the hero off a phone screen, and over the
     hero it laid an opaque slab across the photograph the whole design is built on. So: brand left,
     burger right, everything else behind the burger. */
  .rk-head__inner {
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 18px clamp(16px, 5vw, 32px);
    /* The panel hangs off the header, so the header is what it positions against. */
    position: relative;
  }
  .rk-brand { grid-column: 1; align-items: flex-start; text-align: left; }
  .rk-brand__name { font-size: clamp(21px, 5.4vw, 27px); }
  .rk-brand__sub { letter-spacing: .34em; }
  .rk-burger { display: block; grid-column: 2; grid-row: 1; justify-self: end; }

  /* Not `display:none`: the panel animates, and a display swap cannot. Not `hidden` either, for the
     same reason. Closed is zero-height and inert. */
  .rk-head__menu {
    display: block;
    position: absolute; top: 100%; inset-inline: 0;
    background: var(--rk-cream);
    border-bottom: 1px solid var(--rk-line);
    box-shadow: 0 18px 40px rgba(10, 16, 12, .18);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .3s ease, visibility .3s;
  }
  .rk-head--over .rk-head__menu { background: rgba(16, 23, 19, .97); border-bottom-color: rgba(216, 201, 163, .28); }
  .rk-head__inner.is-open .rk-head__menu {
    /* A cap, not a height: the menu is as tall as its items and scrolls only if the client builds a
       menu taller than the phone. 100svh, so an iOS toolbar cannot hide the last item. */
    max-height: min(78svh, 620px); overflow-y: auto; visibility: visible;
  }
  /* One column of full-width rows, both navs merged into it — the desktop halves are a composition,
     not information, and a phone reads a list. */
  .rk-nav, .rk-nav--end {
    display: block; grid-column: 1; grid-row: auto;
    padding: 0; text-align: left;
  }
  .rk-nav ul { display: block; }
  .rk-nav li { border-top: 1px solid var(--rk-line); }
  .rk-head--over .rk-nav li { border-top-color: rgba(216, 201, 163, .18); }
  .rk-nav:first-of-type li:first-child { border-top: 0; }
  /* 46px tall rows: a 13px uppercase link is a small tap target, and this design's letter-spacing
     makes it look bigger than it is. */
  .rk-nav a {
    display: block; padding: 14px clamp(16px, 5vw, 32px); font-size: 13px; min-height: 46px;
  }
  .rk-phone {
    display: block; margin: 14px clamp(16px, 5vw, 32px) 18px; text-align: center; padding: 14px 22px;
  }
  /* Over a hero, the header must stay ON the photograph — going `position: static` (what this used to
     do) is what put the opaque slab above it. */
  .rk-head--over { position: absolute; }
  .rk-foot { justify-content: center; text-align: center; gap: 8px; padding: 26px clamp(16px, 5vw, 32px); }
}

/* The burger itself. Three bars that become a cross — CSS only, no icon font, no second SVG to keep
   in step with a colour change: it inherits currentColor from the header's over/solid mode. */
.rk-burger {
  width: 46px; height: 46px; padding: 0;                /* 46px: the tap target, not the glyph */
  border: 0; background: none; color: inherit; cursor: pointer;
  position: relative;
}
.rk-burger__bars,
.rk-burger__bars::before,
.rk-burger__bars::after {
  position: absolute; left: 12px; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease, top .28s ease;
}
.rk-burger__bars { top: 22px; }
.rk-burger__bars::before { content: ''; top: -7px; left: 0; }
.rk-burger__bars::after  { content: ''; top: 7px;  left: 0; }
.rk-head__inner.is-open .rk-burger__bars { background: transparent; }
.rk-head__inner.is-open .rk-burger__bars::before { top: 0; transform: rotate(45deg); }
.rk-head__inner.is-open .rk-burger__bars::after  { top: 0; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .rk-head__menu, .rk-burger__bars, .rk-burger__bars::before, .rk-burger__bars::after { transition: none; }
}

/* ── Scroll reveal ───────────────────────────────────────────────────────────────────────────
 * The concept fades and lifts each band as it enters the viewport (its `data-fade` divs), and
 * without it the page reads as a static poster rather than the design that was approved.
 *
 * DEFAULT IS VISIBLE. The hidden state is applied by assets/design.js and only after it confirms it
 * can observe — so a blocked script, an old browser or a crawler sees the whole page. The opposite
 * default (hidden in CSS, revealed by JS) is how a design ships an invisible website, and it is the
 * same trap as the concept bundle itself: its own reveal left every band at opacity 0 in a
 * screenshot, which is exactly what made this page look empty when I first captured it.
 */
[data-rk-fade] { transition: opacity .9s ease, transform .9s ease; }
.rk-fade-armed [data-rk-fade] { opacity: 0; transform: translateY(18px); }
.rk-fade-armed [data-rk-fade].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rk-fade-armed [data-rk-fade] { opacity: 1; transform: none; transition: none; }
}

/* THE PHANTOM ADMIN-BAR GAP IS FIXED AT THE SOURCE NOW, so the -32px reclaim that used to live here
   is deleted rather than kept.
   The history: WordPress prints `html{margin-top:32px !important}` from its admin-bar stylesheet, and
   edit mode called show_admin_bar(false) at template_redirect — too late, because the bump callback is
   registered during init, so the rule survived while the bar did not and 32px of empty page sat under
   the toolbar. This CSS cancelled it. The plugin now suppresses the bar with a show_admin_bar FILTER
   (inc/editor.php), which is consulted during init, so the bump is never registered and there is
   nothing to cancel — measured: html margin-top 0px in both edit and view.
   Two offsets that cancel out is one edit away from a 32px bug in either direction, and this rule
   could not tell "no bar, no bump" from "no bar, bump survived": it fired in both, so once the source
   was fixed it started pulling the hero 32px UP, under the toolbar. Removed on purpose — if a bump
   ever comes back, fix the suppression, not the symptom. */