/* ==========================================================================
   Lemmer Web Consulting — SPLIT-FIELD HERO (S28, 2026-08-01).
   Loaded AFTER styles.css, only by index.php. styles.css is locked —
   every override lives here.

   Built to Chris's annotated drawing. Four layers, in his own outline order:
     (1) header bar (untouched, styles.css)
     (2) .hero-motion__field  — an OPAQUE ink field over the video's left 38%
     (3) .hero-motion__scrim  — a glass wash over the video right of the seam
     (4) .hero-panel          — the text panel STRADDLING the seam, 11%->59%
   The founder card is not in this hero — that drawing removed it; founder
   photos live on the About page.

   EXTRACTED FROM motion.css, 2026-08-29, with the branches RESOLVED: this
   file is one hero and one hero only. Nothing here is switched by a URL
   parameter and nothing is overridden by a body class. The rival sidebar hero
   had its own hero-sidebar.css, DELETED 2026-08-30 — this is now the only
   hero stylesheet the site loads. The scroll-reveal lives in reveal.css.
   ========================================================================== */

.hero-motion {
  position: relative;
  overflow: hidden;
  background: var(--ink);              /* ink paint before/if the video loads */
  display: flex;
  align-items: center;
  /* near full viewport under the ~67px sticky header, like the old site */
  min-height: calc(100vh - 67px);
  min-height: calc(100svh - 67px);
}

/* PROTECTED — DO NOT "FIX" THIS CROP.
   The footage has a baked-in VEED watermark at the top-right of the source
   frame (x 1024-1259 / y 20-68 of 1280x720, static across the 82s loop).
   A near-opaque gradient still left it faintly recoverable on contrast-boosted
   displays, so it is CROPPED instead: the video box extends 15% above the
   hero, and object-fit:cover then scales/crops so the top of the source
   — watermark included — sits above the visible hero: the hero's top edge
   maps to >= 13.0% of source height at ANY viewport aspect (worst case is the
   height-driven cover scale, where the crop contributes nothing and 15/115 of
   the box = 13.04% of the source; width-driven scales only push it deeper),
   while the watermark bottom sits at 9.4% — covered with margin everywhere,
   verified empirically up to 2.56:1. Applies identically to the poster.
   When Chris re-exports clean footage: revert to inset:0; width/height:100%. */
.hero-motion__video {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 115%;
  object-fit: cover;
  z-index: 0;
}

/* ---- (3) THE GLASS WASH OVER THE VIDEO FIELD ---- */
/* The wash starts at the seam, so this element runs from 37% to the right edge
   (the extra 1% tucks UNDER the opaque field so no sub-pixel sliver of raw
   footage can show at the seam) and carries no mask — Chris's drawing washes
   the video field evenly top to bottom. Insetting it also shrinks the blurred
   area by ~38%.

   WASH STRENGTH: the earlier flat .5 was tuned when the video was the WHOLE
   hero. Next to an opaque ink field it read as a bright grey slab — nothing
   like the drawing, where the two halves sit within a stop of each other and
   the photo half is plainly the darker, quieter surface. Graded .58 at the top
   -> .70 at the bottom (the drawing's video field is lightest at the top-right
   and deepest at the bottom), which lands the brightest frame's video field
   around rgb(72,73,72) instead of rgb(140,140,138). Footage still reads: 26-42%
   of it comes through outside the panel.
   Watermark masking is NOT this layer's job — the video-box crop above covers
   that at every aspect. This div sits above the <video> whether it plays or
   shows its poster, so reduced-motion / pre-play gets the identical treatment
   — which is also why the poster jpg stays a RAW frame grab: baking the veil
   into it would double-grade those paths.
   DARKNESS DIAL, if the wash wants moving wholesale (judge at video t=46s,
   the brightest frame — a dark open flatters):
     lighter  .46 / .51 / .58
     shipped  .58 / .63 / .70
     darker   .70 / .75 / .82 */
.hero-motion__scrim {
  position: absolute;
  inset: 0 0 0 37%;
  background:
    linear-gradient(180deg,
      rgba(26, 25, 22, .58) 0%,
      rgba(26, 25, 22, .63) 45%,
      rgba(26, 25, 22, .70) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1;
}

/* ---- (2) THE LEFT FIELD ---- */
/* Chris's green outline: left edge -> 38% of the viewport, full hero height,
   OPAQUE — the footage must not read through it at all. Not a flat fill: a
   soft internal grade, lighter toward the upper-left and deepest at the
   bottom-left, plus a wide low-alpha paper highlight in the top-left corner.
   Base layer is fully opaque ink, so nothing behind it survives.
   GRADE DEPTH is measured, not guessed: sampling the reference, its field runs
   avg 46 at the top-left to avg 44 at the bottom-left — a whisper, not a fade.
   The first build fell 53 -> 24 and read as a black wedge next to the photo.
   These stops sample 51 -> 33: still clearly deeper at the bottom the way Chris
   described it, but the field now holds one value the way the drawing does.
   It is an OVERLAY on the full-bleed video, never a resize of the video box —
   .hero-motion__video's crop is what hides the baked-in VEED watermark and
   must not be repositioned. Its right edge IS the seam: a hard element edge,
   crisp by construction, no feather. */
.hero-motion__field {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background:
    radial-gradient(125% 85% at 10% 6%,
      rgba(244, 242, 236, .05) 0%,
      rgba(244, 242, 236, .014) 45%,
      rgba(244, 242, 236, 0) 70%),
    linear-gradient(162deg,
      #322f29 0%,
      #2b2822 40%,
      #272421 75%,
      #242220 100%);
  z-index: 1;
}

.hero-motion > .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ---- (4) THE STRADDLING PANEL ---- */
/* Chris's red outline: 11% -> 59% of the VIEWPORT (not of .container — the
   proportions have to hold at every width, so the hero's container is
   un-maxed below and the panel is placed in viewport percentages). That puts
   27vw of it over the field and 21vw over the video: 56% / 44%, straddling the
   38% seam. ONE background value across the whole panel — do not split it at
   the seam; the point of the composition is that the same translucent material
   reads as "lifted panel" over the field and as "muted video" over the video.
   ALPHA .70 so the footage is visibly present through the right-hand third.
   Worst case (pure-white footage — and t=46s of this clip really does contain
   pure white) the backdrop there is the scrim at .58-.69 across the panel's
   span, and .70 ink over that composites to rgb(55,54,51) or darker -> paper
   #f4f2ec 10.8:1, hero-sub #e7e2d6 9.35:1, both clear of the goal's 8.9:1 bar.
   Anything below .66 fails that bar at the panel's top edge, so .70 is the
   floor plus a cushion, not a free dial. Over the opaque field it is darker still.
   NO backdrop-filter here: the scrim below already blurs the footage 8px, so a
   second blurred surface would buy an imperceptible double-blur and a second
   full-size backdrop-filter layer on weak GPUs. One blurred surface, the scrim.
   Radius 14px + paper hairline + lift shadow = the system's card treatment.
   HEIGHT: in the drawing the panel is nearly as tall as the hero (top gap ~3%
   of hero height, bottom ~10%) with a lot of quiet space above and below the
   type. Our copy block is denser than the reference site's, so padding alone
   cannot get there without absurd internal margins — min-height carries it, in
   vh so the proportion holds as the viewport grows, and the content is
   flex-centered inside. */
/* LEFT-MARGIN DIALS - the panel drifts right as the viewport widens, then STOPS.
   clamp(floor, rate, cap):
     cap  340px - the stop point. Lower = stops sooner / panel stays left,
                  higher = keeps drifting right on wide screens.
     rate 13vw  - how fast it grows. The cap engages at cap / 0.13 px of
                  viewport, so 340px stops at 2615px. (300 -> 2308px,
                  400 -> 3077px, 500 -> 3846px.)
     floor 108px - a safety net for a lowered rate; it does not govern today
                  (13vw > 11% at every width). 108px == the old 11% at 981px,
                  the narrowest width this rule still applies to.
   THE FLOOR MUST STAY IN px, NOT %. In CSS clamp(MIN,VAL,MAX) resolves as
   max(MIN, min(VAL, MAX)) - the MINIMUM OUTRANKS THE MAXIMUM. A % floor keeps
   growing with the viewport and overtakes the cap: 11% passes 340px at 3091px
   of viewport, after which the margin grows again forever and the cap is dead.
   Measured, not theorised: at 3840px the % floor gave 422px, not 340px.
   Deliberately NOT an @media step: a rule like calc(15vw + (100vw - 1600px)*.3)
   above some width ACCELERATES and never stops - the opposite of grow-then-stop.
   clamp says floor/rate/ceiling in one property, with no breakpoint. */
.hero-motion .hero-panel {
  margin-left: clamp(108px, 13vw, 340px);
  width: clamp(700px, 60%, 980px);
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(26, 25, 22, .70);
  border: 1px solid rgba(244, 242, 236, .16);
  border-radius: 14px;
  padding: 56px 52px;
  box-shadow: 0 32px 80px -32px rgba(0, 0, 0, .6);
}
/* The hero's own container is un-maxed so the panel's 11%/48% are viewport
   percentages. Asymmetric padding biases the (flex-centered) block upward, so
   the gap under the panel is a little larger than the gap above it — the
   vertical inset in the drawing. */
.hero-motion > .container.hero {
  display: block;
  max-width: none;
  padding: 64px 0 96px;
}
/* The panel is wider than the old grid column, so the two measure caps that
   were tuned for that column now leave a ragged right edge. Copy unchanged —
   only the wrap width. */
.hero-motion .hero-sub { max-width: 600px; }
.hero-motion .hero-offer { max-width: 600px; }

/* ---- Mobile / narrow: the split is a desktop composition ---- */
/* <=980px there is no seam: the field goes full-width and the panel goes
   full-width inside container margins. The field drops to a translucent wash
   there (it is the whole screen now — opaque would delete the video from the
   phone entirely, which is the one thing the motion variant exists to show).
   Scrim goes back to full-bleed so the wash is even.
   NOTE the breakpoint: styles.css breaks the hero grid at 960px, this file at
   980px. That 20px gap is inherited from motion.css, not a typo — preserved so
   the extraction renders identically to what it was extracted from. */
@media (max-width: 980px) {
  .hero-motion__scrim { inset: 0; }
  .hero-motion__field {
    width: 100%;
    background: linear-gradient(180deg,
      rgba(26, 25, 22, .30) 0%,
      rgba(26, 25, 22, .42) 55%,
      rgba(16, 15, 14, .55) 100%);
  }
  .hero-motion > .container.hero {
    max-width: 1200px;
    padding: 48px 28px 56px;
  }
  .hero-motion .hero-panel {
    margin-left: 0;
    width: auto;
    min-height: 0;
    display: block;
    background: rgba(26, 25, 22, .84);
  }
}
@media (max-width: 640px) {
  .hero-motion .hero-panel { padding: 30px 24px; }
  .hero-motion > .container.hero { padding-left: 20px; padding-right: 20px; }
}

/* ---- Hero type flipped to paper tones for AA contrast on the dark scrim ---- */
.hero-motion .h-display { color: var(--paper); }
.hero-motion .eyebrow { color: var(--paper); }
.hero-motion .eyebrow .dot { background: var(--accent-warm); }

/* Eyebrow sized up on Chris's note ("larger, not obnoxious"): 13px global ->
   15px, hero-scoped so every other section's kicker is untouched.
   SANE RANGE 14-17px — nudge this number, nothing else.
   Tracking is pulled .12em -> .10em IN THIS RULE to pay for the extra width.
   The string is long: at 15px/.12em the one-line floor is a 1361px viewport,
   which puts 1366-wide laptops into a two-line kicker. At .10em the floor is
   1320px, so they stay on one line. It wraps above 17px, or below ~1320px
   (it already wrapped below 1216px at the old 13px). */
.hero-motion .eyebrow { font-size: 15px; letter-spacing: .10em; }

.hero-motion .hero-sub,
.hero-motion .hero-offer { color: #e7e2d6; }
.hero-motion .hero-offer strong { color: #fff; }
.hero-motion .btn--outline { color: var(--paper); border-color: var(--paper); }
.hero-motion .btn--outline:hover { background: var(--paper); color: var(--ink); }