/* existing styles (kept from your file) */
/* padding-top:0 (was 1em) -- every wrapped section's own .about-section
   already contributes a 1em margin-bottom before the *next* section, so
   this padding-top was adding a second, redundant 1em on top of that for
   every section except the very first (which has no preceding section to
   collapse against) and the last ("Let's break the ice", which uses
   .shatter-cont instead of .about-cols and so never had this padding to
   begin with) -- doubling the gap specifically around sections 2 and 3.
   The true-first section still gets its own explicit, larger top padding
   from ".wrapper > .about-cols:first-child" further down, unaffected by
   this. */
.about-cols { display:flex; justify-content:center; align-items:center; width:100%; gap:1em; padding-top:0; flex-wrap:wrap; opacity:0; }
.about-cols img { max-width:26.5%; min-width:300px !important; filter: drop-shadow(11px 15px 14px #000); }
.about-cols .content-box { max-width:32%; min-width:300px !important; color:white; padding:.22em .15em; margin:0; }
/* ".shatter" ("Let's break the ice") is a ".content-box" too (see
   about.html), but it's never a descendant of ".about-cols" -- it's
   wrapped in ".shatter-cont" instead -- so the rule above never reached
   it, leaving it with none of that .22em/.15em inset the other three
   sections get and sitting flush against the card's edges instead
   (confirmed directly: its header rendered measurably further left than
   "Hi there!"/"My Story"/"Trusted by..."). Matching padding here, scoped
   to ".shatter" specifically so it doesn't also affect ".form-box"
   (also ".content-box", styled entirely separately). */
.shatter.content-box { padding:.22em .15em; }
/* style.css's ".copy p { margin-top: -4.8em; }" (only active at its own
   min-width:875px) is tuned for a specific narrow-essay-under-a-photo
   layout elsewhere on the site (a different page's ".copy", not this
   one) -- on this page's ".about-cols"/".shatter" sections it just pulls
   the paragraph up into (and, at this page's font sizes, well past) its
   own header, at every width from 875px up to where this page's own
   mobile layout takes over (confirmed directly on all four sections:
   "Hi there!", "Trusted by...", "My Story", and "Let's break the ice!").
   Neutralized here for the same range. */
@media screen and (min-width: 875px) {
    .about-cols .copy p,
    .shatter.copy p {
        margin-top: 0;
    }
}
/* style.css's ".multiline, .client-review { font-size:18px !important; }"
   is a fixed size, so as the viewport narrows toward the mobile-stacking
   breakpoint below, the same amount of text wraps into more and more
   lines while the paired image (percentage-width) keeps shrinking --
   the two columns get increasingly mismatched in height the narrower it
   gets. Scaling this text down over that same range keeps it roughly
   proportional to the shrinking image instead. 18px at 1500px+ (matches
   style.css's fixed size, so nothing changes above that) down to 11px at
   750px, just above the point where the layout switches to stacked (see
   below) -- the two endpoints style.css's own !important forced picking
   a selector at least as specific *and* !important to override at all.
   Includes ".shatter" (the "Let's break the ice" card) alongside
   ".about-cols" now -- it has no paired image to stay proportional to,
   but reads oddly if its body text is the only one on the page that
   *doesn't* scale down through this range. min-width:750px keeps this
   from applying once the mobile-stacked layout takes over -- there, the
   columns are stacked instead of side-by-side (or, for ".shatter", just
   narrower), so the text should read at its original, un-shrunk 18px
   again instead of staying stuck at the 750px-wide clamp floor.

   The paired image is ".about-cols img { max-width:26.5%; min-width:300px }"
   -- it stops shrinking once 26.5% of the container drops below 300px,
   which happens around a 1130px-wide container (300 / .265), so from
   1130px down to 750px the image sits flat at 300px while this text kept
   right on shrinking all the way to 750px -- reaching the same 11px floor
   the image effectively reached ~380px of viewport earlier, so anywhere
   in that gap the text still read oversized against an already-bottomed-out
   image. Steepening the ramp to reach its own floor by ~1130px instead
   (endpoints still 11px/18px, same as before) keeps it in step with the
   image's actual shrink range instead of dragging it out further than the
   image does. */
@media screen and (min-width: 750px) {
    .about-cols .multiline,
    .shatter .multiline {
        font-size: clamp(11px, -10.38px + 1.89vw, 18px) !important;
    }
}

/* Section headers ("Hi there!", "Trusted by...", "My Story", "Let's break
   the ice!"), same treatment: Trajan at newSiteTesting's own size (see
   ".form h6" further down, ported from newSiteTesting/premium.css's
   shared section-title rule) as the base, fluidly scaled down across the
   same 750-1500px range and reset to that full size below it. Scoped to
   ".about-cols"/".shatter" specifically (not a bare "h6"), so this
   doesn't also catch ".form h6" (already styled below) or ".top-bar h6"
   (the wordmark, which stays in Allura). */
/* margin-bottom: style.css only gives h6 a bottom margin (.5em, ~50px)
   below its own max-width:875px breakpoint -- above that, the base
   "h6{margin-top:.2em}" rule (no bottom margin at all) is all that's
   left, so these headers sat right up against the paragraph below them
   at any width from 875px up to this rule's own 1500px ceiling
   (confirmed directly). Setting it explicitly here covers that gap and
   keeps spacing consistent through the whole non-mobile range instead of
   depending on style.css's unrelated breakpoint. Started at newSiteTesting's
   own 20px, but that read as too much space here -- 12px instead. */
/* Same steeper-ramp treatment as ".multiline" above, and for the same
   reason -- reach the 19px floor by ~1130px (where the paired image
   bottoms out at its own 300px min-width) instead of dragging it out to
   750px. Endpoints unchanged (19px/27px). */
@media screen and (min-width: 750px) {
    .about-cols h6,
    .shatter h6 {
        font-family: 'trajan-pro-3', serif;
        letter-spacing: .04em;
        font-size: clamp(19px, -5.43px + 2.16vw, 27px) !important;
        margin-bottom: 12px;
    }
}

@media screen and (max-width: 750px) {
    .about-cols h6,
    .shatter h6 {
        font-family: 'trajan-pro-3', serif;
        letter-spacing: .04em;
        font-size: 27px !important;
        margin-bottom: 12px;
    }
}
p { color: white; }
.break-button { margin: 1em 18em 1em 1.4em; }
.about-section {
    display: flex;
    flex-direction: column;
    gap: 1em;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 1.4em;
}
.about-section h6 { color: rgb(250, 248, 236); }
.bottom-bar { margin-top: 3em; }
/* No padding-top (was 1em): every other header's paragraph gets its
   spacing purely from the normal flow (the header's own margin + the
   paragraph's default top margin) -- this extra padding was stacking on
   top of that same flow, giving "Trusted by..." visibly more breathing
   room under its header than "Hi there!", "My Story", or "Let's break the
   ice!" get under theirs. */
.gig-list { text-align:center; font-size:.19em !important; }
.gig-list-header { text-align:center; }
.left-item { transform: translateX(-5em); }
.right-item { transform: translateX(5em); }
@keyframes fade { from{opacity:0} to{opacity:100%} }
@keyframes slide-left { from{transform:translateX(-5em)} to{transform:translateX(0)} }
@keyframes slide-right { from{transform:translateX(5em)} to{transform:translateX(0)} }

/* max-width (not just the fixed 868px width) keeps this off the viewport
   edges and stops it overflowing/getting cut off on the right -- below
   this, width:868px alone had nothing capping it until the max-width:750px
   mobile override further down kicked in, so anywhere from 751px up to
   868px it ran wider than the viewport itself (confirmed directly: cut
   off on the right starting around 867px). 64px (32px each side) mirrors
   that mobile override's own breathing room. */
.shatter-cont { width: 868px; max-width: calc(100% - 64px); height: 485px; display:inline-block; position:relative; margin:auto; }
.shatter { max-width: 100% !important; display:flex; }

/* Canvas / overlay rules */
canvas { position:absolute; backface-visibility:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; }
.shatter-overlay { position:fixed !important; left:0; top:0; width:100vw; height:100vh; pointer-events:none; will-change:transform,opacity; perspective:800px; transform-style:preserve-3d; z-index:99999; }
.shatter-canvas { display:block; pointer-events:none; image-rendering:auto; transform-origin:0 0; border:0; box-sizing:border-box; }
.canvas-fragment { will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin:50% 50%; position:fixed; pointer-events:none; }
.shatter-placeholder { visibility:hidden; }

/* .wrapper { 
    transform: none !important;
    overflow: visible !important;
} */
.top-bar {
    z-index: 90000;
}

/* --- Nav + hamburger, matching newSiteTesting's index.html: Trajan nav
   links with a gold hover-underline, a hamburger that swaps in below
   700px. Scoped here (not in the shared premium.css) since this styling
   is specific to this page's top bar. --- */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1em;
    box-sizing: border-box;
}

.top-bar h6 {
    margin: 0;
    white-space: nowrap;
}

/* Wordmark now links home -- kept looking exactly like the plain text it
   replaced (same color/font, no underline) rather than reading as a
   generic blue link. */
.wordmark-link, .wordmark-link:hover {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

/* margin-top:0 counters style.css's ".top-bar nav { margin-top: -.45em }"
   -- a plain element selector that also matches this <nav class="main-nav">
   and was pulling it 45px up out of the bar (same fix newSiteTesting's
   premium.css already has; this file was missing it). */
.top-bar .main-nav {
    display: flex;
    align-items: center;
    gap: 1.4em;
    margin-top: 0;
    padding-right: 0;
}

.main-nav a {
    font-family: 'trajan-pro-3', serif;
    font-size: .15em;
    letter-spacing: .06em;
    position: relative;
    padding-bottom: .3em;
    color: rgb(250, 248, 236);
    text-decoration: none;
}

.main-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: rgb(201, 169, 104);
    transition: right .3s ease;
}

.main-nav a:hover::after, .main-nav a.nav-current::after {
    right: 0;
}

.main-nav a:hover, .main-nav a.nav-current {
    color: rgb(201, 169, 104);
}

.hamburger {
    display: none;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: rgb(250, 248, 236);
    transition: transform .3s ease, opacity .3s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Fixed px, not em, for the same reason as newSiteTesting: this sits
   directly under body with nothing scaling font-size down, so em here
   would resolve against the page's 100px root instead of a sane nav size. */
.mobile-nav {
    position: fixed;
    top: .8em;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: rgb(11, 11, 11);
    border-bottom: solid rgb(250, 248, 236) 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
    transform: translateY(calc(-100% - .8em));
    pointer-events: none;
    transition: transform .35s ease;
    z-index: 10;
}

.mobile-nav.open {
    transform: translateY(0);
    pointer-events: auto;
}

.mobile-nav a {
    font-family: 'trajan-pro-3', serif;
    font-size: 16px;
    letter-spacing: .04em;
    color: rgb(250, 248, 236);
    text-decoration: none;
}

.mobile-nav a:hover, .mobile-nav a.nav-current {
    color: rgb(201, 169, 104);
}

/* Same fix as newSiteTesting/premium.css: .main-nav's own 1.4em gap
   (140px) between 4 links plus the wordmark needs roughly 1280px of
   top-bar width before they stop touching (confirmed directly: the
   wordmark and "Videos" sit flush with zero gap at 1270px, clear by
   1280px) -- comfortably past phone width, so this page had the same
   "tablet nav never actually fits" gap newSiteTesting did before that
   fix. Widened to match, with the same margin. */
@media screen and (max-width: 1350px) {
    .top-bar .main-nav {
        display: none;
    }
    .hamburger {
        display: flex;
    }
}

@media screen and (max-width: 700px) {
    .top-bar {
        padding: 0 16px 0 .5em;
    }
    .top-bar h6 {
        font-size: 22px;
        max-width: 62vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ">" (not a plain descendant combinator) is deliberate: every wrapped
   section's .about-cols is *also* the first (and only) child of its own
   .about-section, so a plain ".wrapper .about-cols:first-child" matches
   every section, not just the genuinely-first one -- stacking this 2em on
   top of each wrapped section's own 1em gap from .about-section, and
   making sections 2 and 3 sit noticeably further from the one before them
   than section 4 (which uses .shatter-cont, not .about-cols, so it was
   never affected). ">" restricts this to a direct child of .wrapper, i.e.
   only the true first section -- see the mobile version of this same fix
   further down for the full writeup. */
.wrapper > .about-cols:first-child {
    padding-top: 2em;
    /* Unlike every other section, this one isn't wrapped in .about-section,
       so it has no margin-bottom of its own to create the gap before the
       next section -- add the same 1.4em everyone else's wrapper
       contributes, so the gap before section 2 matches every other
       section-to-section gap instead of coming out short. */
    margin-bottom: 1.4em;
}

/* Mobile: stack each image+text pair instead of sitting side by side, and
   let the shatter box size itself to its content instead of the fixed
   desktop 868x485 box (which would overflow a phone-width screen). */
@media screen and (max-width: 750px) {
    /* One gap size, used everywhere on this page: between an image and its
       text box within a section (the flex "gap" below), and between one
       section and the next (each section's own margin-bottom, further
       down) -- nothing else adds any extra top/bottom padding of its own,
       so every visible item ends up the same distance from its neighbors.
       The one deliberate exception is the very first section's top edge,
       which has to clear the fixed .top-bar overlaying it (see below). */
    .about-cols {
        flex-direction: column;
        gap: 1.4em;
        padding-top: 0;
    }
    .about-cols img,
    .about-cols .content-box {
        max-width: 90%;
        min-width: 0 !important;
        width: 90%;
    }
    .left-item,
    .right-item {
        transform: none;
    }
    /* Mobile gets its own, simpler reveal (see about.js): a plain fade +
       rise instead of the desktop fade + big horizontal slide-in, which
       tends to read as janky on a narrow, already-stacked layout. */
    @keyframes fade-up { from { opacity: 0; transform: translateY(1.2em); } to { opacity: 1; transform: translateY(0); } }
    /* .about-section's own .about-cols is always that section's only (and
       therefore first) child, so the pre-existing, non-mobile rule above
       (".wrapper .about-cols:first-child", a descendant selector) actually
       matches *every* section's .about-cols, not just the genuinely-first
       one -- and since it carries higher specificity (class + class +
       pseudo-class) than the plain ".about-cols" rule above, it was
       beating it and leaving every wrapped section with the desktop's 2em
       top padding instead, on top of the 1em gap before it -- the two
       compounding into a noticeably bigger gap above that section's
       picture than everywhere else. Matching its specificity here (and
       resetting to 0, per the single-gap-size rule above) neutralizes it
       for every wrapped section. */
    .about-section > .about-cols:first-child {
        padding-top: 0;
    }
    /* The first section isn't wrapped in .about-section like the rest (see
       about.html), so it needs its own matching bottom spacing to keep the
       same 1em gap before the second section.
       Its top padding is the one deliberate exception to the single-gap
       rule above: .top-bar is a *fixed* 0.8em-tall bar overlaying the top
       of the page, so this has to clear that (with a bit of margin) or the
       picture starts underneath it and gets visibly cut off.
       Note the child combinator (>): every wrapped section's .about-cols
       is *also* the first (and only) child of its own .about-section, so
       plain ".wrapper .about-cols:first-child" matches all of them, not
       just the true first one -- ">" restricts this to a direct child of
       .wrapper, i.e. only the genuinely-first, unwrapped section. */
    .wrapper > .about-cols:first-child {
        padding-top: 1.6em;
        margin-bottom: 1.4em;
    }
    /* The top headshot read oversized on a narrow phone at the same 90%
       used for every other image/text box -- scale it down specifically. */
    .wrapper > .about-cols:first-child img {
        max-width: 72%;
        width: 72%;
    }

    /* Tighten the header-to-paragraph gap under each "Hi there!"/"My Story"/
       etc. heading. Beats style.css's global "h6 { margin: .5em 0; }" (its
       own max-width:875px rule) on specificity alone (.copy h6 vs h6), so
       this only affects the header's bottom margin here on this page's
       mobile view -- top margin comes from ".copy p { margin: 0 2em; }" in
       style.css, which is already 0 and untouched. */
    .copy h6 {
        margin-bottom: 0em;
    }

    /* On desktop the "Trusted by..." section deliberately leads with text
       (alternating with the image-first sections next to it). Stacked on
       mobile that alternation just looks inconsistent, so flip it back to
       image-first like the other sections. */
    .trusted-cols {
        flex-direction: column-reverse;
    }

    .shatter-cont {
        width: 92%;
        height: auto;
    }
    .shatter {
        flex-direction: column;
    }
    /* .call-button (style.css) sets no padding of its own -- on desktop
       the button's wider margins/context leave enough optical breathing
       room around the text regardless, but on this narrow, auto-width
       button the label runs right up against the edges without it. */
    .break-button {
        margin: 1em auto;
        padding: 0 1.2em;
    }

    /* style.css's shared #contact-form rule (margin-top: 2em) resolves
       against body's 100px base font-size (~200px) here, which reads as
       a big gap on a short mobile screen. .top-bar is a fixed 0.8em
       (~80px) bar overlaying the very top of the page, so this can't go
       much below that without the form's top getting hidden under it. */
    #contact-form {
        margin-top: 120px;
        margin-bottom: 2em;
    }
}

/* Gold accent tokens, ported from newSiteTesting/premium.css -- neither
   this page's own CSS nor the root style.css/premium.css it loads define
   these, so the form styling below (which references them) needs its
   own copy. */
:root {
    --gold: rgb(201, 169, 104);
    --gold-soft: rgba(201, 169, 104, 0.5);
}

/* Form header, ported from newSiteTesting/premium.css's shared section-
   title rule -- scoped to just ".form h6" here (not the broader
   ".content-box h6" it's part of there), since this page's other
   headers ("Hi there!", "My Story", etc.) are deliberately still in
   Allura and out of scope for this port. margin matches newSiteTesting
   exactly (no top margin here -- the gap above it comes from
   ".form-box .form"'s own padding-top below, also ported, not from the
   header itself). */
.form h6 {
    font-family: 'trajan-pro-3', serif;
    font-size: 27px;
    letter-spacing: .04em;
    text-shadow: 0 0 18px rgba(201, 169, 104, .3), 0 2px 6px rgba(0, 0, 0, .6);
    margin: 0 0 20px;
}

/* The ".form h6" scoping above assumed this page was still loading its own
   narrower copy of premium.css (pre-move, at newSiteTesting/premium.css)
   whose shared section-title selector was just ".form h6". Now that
   premium.css was moved to root and about.html loads that same file,
   premium.css's actual selector -- ".content-box h6:not(.copy-header),
   .clients h6, .form h6" -- also matches "Hi there!"/"My Story"/"Let's
   break the ice!"/"A Night You'll Never Forget..." (bare h6s inside a
   ".content-box"), zeroing their margin instead of leaving them the base
   "h6{margin-left:.7em}" from style.css. Restore it so they're not flush
   against the card's left edge. ".gig-list-header" ("Trusted by...") is
   unaffected since it already forces its own text-align:center below.
   Scoped to min-width:876px, matching style.css's own "h6{text-align:
   center}" cutoff (max-width:875px) exactly: below that width these
   headers are centered, and a lopsided margin-left with no margin-right
   narrows the block from one side only, throwing centered text off-center
   by half that margin instead of leaving it centered. */
@media screen and (min-width: 876px) {
    .copy h6:not(.copy-header):not(.gig-list-header) {
        margin-left: .7em;
    }
}

/* ".form-box .form" padding, ported from newSiteTesting/premium.css --
   this page was missing it entirely, which is why the header (and every
   field below it) sat flush against ".form"'s own left edge instead of
   framed with breathing room, and had no top gap of its own to clear the
   card's top edge with (30px, matching the "top of container to header"
   convention used everywhere else in the premium-pass styling this was
   ported from). The 26px/14px left/right asymmetry is deliberate on
   desktop -- extra left padding to separate the header/fields from .vid
   sitting right next to them there -- and evens out to a symmetric 20px
   on mobile, where .form stacks above .vid instead (see the media query
   below). */
.form-box .form {
    padding-top: 30px;
    padding-left: 26px;
    padding-right: 14px;
    box-sizing: border-box;
}

@media screen and (max-width: 700px) {
    .form-box .form {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* .front/.back margin, ported from newSiteTesting/style.css (not
   premium.css -- that page's own base style.css already differs from
   this page's root style.css here, byte-for-byte identical everywhere
   else in this whole flip-card block). Root style.css's .front{margin:
   .2em} (20px) is 4x newSiteTesting's .05em (5px) -- with .spinner's
   auto height driven by .front's margin BOX (content+padding+border+
   margin, confirmed directly: forcing .front's margin to 0 dropped
   .spinner's measured height by exactly 40px), that alone was
   responsible for 30px of unwanted extra height cascading up through
   .text-boxes into .form, and from there into .vid (which stretches to
   match .form). Also restores .back's positioning, which root style.css
   drops entirely: without an explicit top/left/right, an absolutely
   positioned element falls back to its normal-flow "static position" --
   below .front, not on top of it, since .back follows .front in the
   markup -- and further left, since .front's own centering comes from
   .spinner's flexbox alignment, which doesn't apply to an out-of-flow
   .back at all. Neither of these ever surfaced visually on the *front*
   face (only .back is affected directly), but .front's inflated margin
   was the actual root cause of the box that .vid stretches to match
   being taller than intended. */
.front {
    margin: .05em;
}

.back {
    top: 0;
    left: 0;
    right: 0;
    margin: .05em auto;
}


/* Ported from newSiteTesting/premium.css: below 463px (Chrome dev tools),
   ".calls-left" ("I'll reach out shortly...") goes from two lines to
   three -- its base 6em left/right margin (root style.css) eats too much
   of the narrow container at this width. 30px keeps it to two lines and
   balances the two lines' widths on actual iPhone screens (375-430px); a
   tighter margin (10px) also stayed at two lines but left the first line
   much longer than the second. Note this is a compromise: it
   re-introduces the three-line wrap below ~344px -- narrower than any
   current iPhone, so not tested for. */
@media screen and (max-width: 463px) {
    .calls-left {
        margin-left: 30px;
        margin-right: 30px;
    }
}

/* .vid / #solos-vid, ported from newSiteTesting/premium.css: this page's
   root style.css instead gives ".vid" a fixed height:5.3em (530px) with
   no relationship to ".form"'s actual height, so once ".form" grew taller
   than that fixed number (adding the header's margin/padding above, plus
   the gold-bordered "Step 1/2" cards, pushed it well past 530px), the
   video was left noticeably shorter than the form next to it -- a gap
   below the video, not above the form -- and vice versa if .form ever
   ends up shorter. Making both track together at runtime instead of
   guessing a fixed number is the actual fix, ported wholesale rather than
   re-deriving it: .vid stretches to definite height via flex
   (".form-box"'s align-items:stretch below), and the iframe -- taken out
   of flow with position:absolute + inset:0 -- fills whatever that
   stretched height turns out to be exactly, with no dependency on load
   timing or JS measurement. Unconditional (not just desktop): mobile's
   own aspect-ratio trick (style.css, padding-bottom:28.5% on this same
   height:auto box) needs this same overlay technique to work at all -- a
   percentage-height iframe as a normal-flow child of a height:auto parent
   doesn't resolve against the padding-created box in the first place. */
.vid {
    position: relative;
    height: auto;
}

.vid iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Desktop only (min-width:701px), matching the max-width:700px boundary
   used above: mobile stacks the video above the form and sizes it with
   its own width:100% + aspect-ratio trick (style.css) instead. */
@media screen and (min-width: 701px) {
    .form-box {
        align-items: stretch;
    }

    .vid {
        /* Taking the iframe out of flow above also took away the
           intrinsic width it used to give .vid as a replaced element (the
           default 300px an iframe gets when unstyled) -- .vid is an
           otherwise-empty div, so without an explicit width here it
           collapses to 0. 300px matches newSiteTesting's own value. */
        width: 300px;
    }
}

/* Mobile: the video is a portrait/vertical recording (matching desktop,
   which sizes .vid to ~300x536 -- a ~9:16 box -- by stretching to match
   .form's height), so style.css's own mobile rule (sized for an older
   landscape video, padding-bottom:28.5%, a short wide box) squashed it
   into a sliver. aspect-ratio replaces that ratio outright (padding-
   bottom zeroed so the two don't stack), sized to match a vertical video
   instead, with a small margin so it doesn't run flush edge-to-edge
   against the card border. */
@media screen and (max-width: 640px) {
    .vid {
        width: 92%;
        margin: 0 auto 4%;
        padding-bottom: 0;
        aspect-ratio: 9 / 16;
    }

    /* style.css's own "#solos-vid{height:119%}" (an ID selector) beats
       ".vid iframe{height:100%}" above on specificity regardless of
       source order -- matching the ID here is the only way to win that
       tie, same as newSiteTesting. */
    #solos-vid {
        height: 100%;
    }
}

/* style.css's ".text-boxes { margin-top: -.7em; }" (-70px at this page's
   100px root) was tuned against the OLD, shorter ".form h6" (no
   margin-bottom of its own) -- with the taller Trajan h6 above (its own
   38px line height plus a 20px margin-bottom), that same -70px pull now
   drags the card up far enough to start *before* the header even ends
   (confirmed directly: the "Step 1 of 2" card's top edge measured 30px
   above the header's bottom edge -- a real overlap, not just a rendering
   artifact). newSiteTesting/premium.css has this identical override for
   the identical reason; it was missed when the form was first ported
   here. */
.text-boxes {
    margin-top: 0;
}

/* --- Form, ported from newSiteTesting/premium.css: thin gold borders
   instead of flat cream fills, so the contact form reads as part of the
   same gold/cream/black system as the rest of the page instead of a
   default HTML form dropped onto it. --- */
.text-entry, select, .time, #date-box, textarea, #first-name, #last-name {
    box-sizing: border-box;
    border: 1px solid var(--gold-soft);
    border-radius: 2px;
}

.text-entry:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
}

/* The two flip faces (name/contact, then time/venue/details) were a plain
   dark box with a barely-visible silver hairline -- the flip itself
   already tells you something changed, but not what you're looking at
   now or how much is left. A gold border ties the card into the rest of
   the page, and a small "Step" label on each face gives the flip a
   reason without needing to rebuild it as a wizard. */
.spinner-bgd {
    border-color: var(--gold-soft);
    border-radius: 4px;
    padding: 16px 14px 14px;
}

/* .front and .spinner-bgd (likewise .back and .spinner-bgd) are two
   classes on the same div, not nested -- ".front .spinner-bgd" is a
   descendant combinator that only matches when the second class is on a
   separate descendant element, so it would silently match nothing here.
   The compound form (no space) targets the single element correctly. */
.front.spinner-bgd::before, .back.spinner-bgd::before {
    display: block;
    font-family: 'trajan-pro-3', serif;
    color: var(--gold);
    letter-spacing: .08em;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
}

.front.spinner-bgd::before {
    content: 'Step 1 of 2 \2014  Your Details';
}

.back.spinner-bgd::before {
    content: 'Step 2 of 2 \2014  Event Info';
}

/* Trajan (already loaded above for the nav) instead of style.css's
   Allura, matching every other button on newSiteTesting's page -- sizes
   here are corrected down from the Allura-era values, since Trajan's
   capital-height and stroke weight read visibly larger at the same
   font-size. Applies to every ".call-button" on this page (including
   "Get in touch!"), not just the form's, so both read as the same
   typographic system. */
.call-button, .first-button {
    font-family: 'trajan-pro-3', serif;
    font-size: .22em;
    letter-spacing: .05em;
    transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
    /* .call-button's own :hover applies a transform (translateY), which
       gives it an independent rendering layer -- style.css's
       backface-visibility:hidden on .front/.back (the flip card faces)
       only reliably hides a *plain* face, not a transformed descendant
       riding along inside one, so a hovered "Let's Connect!" button kept
       showing straight through the back face during/after the flip.
       Desktop: only glitched when the cursor happened to still be over
       the button as the rotation passed 90deg. Mobile: worse, since
       tapping the button triggers :hover with no corresponding
       "unhover" (no real pointer to leave), so it stayed stuck showing
       through permanently. Declaring backface-visibility on the button
       itself (not just its ancestor) hides it independent of the
       button's own hover transform, fixing both. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.call-button:hover, .first-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(201, 169, 104, 0.35);
}

/* Ported from newSiteTesting/premium.css: below 364px (Chrome dev tools),
   "Let's Connect!" no longer fits the button on one line at the .22em
   (22px) size above and wraps to two. .18em (18px) is the largest size
   that still leaves margin to spare. */
@media screen and (max-width: 364px) {
    .call-button {
        font-size: .18em;
    }
}

/* Booking-form flip card, ported from newSiteTesting/premium.css: .back
   (style.css) is position:absolute, so .spinner's layout height is
   always driven by .front alone regardless of flip state. flip()/
   flipBack() (about.js) now measure whichever face is about to become
   visible and resize .spinner to match right before the rotation plays
   -- this transition is what makes that resize animate instead of snap. */
.spinner {
    transition: height .4s ease;
}

/* "I'll reach out shortly..." sits right below the form, and .form-box
   (style.css) never resizes on flip -- so on desktop the taller back
   face (it carries an extra price note the front doesn't) overflows
   straight down past .form-box's still-front-sized height and visually
   overlaps this text. Fading it out for the duration of the flip
   (about.js toggles .form-flipped on .text-boxes from flip()/flipBack())
   is simpler than reserving space for a face that's deliberately not
   supposed to affect layout. Desktop only, matching where .form-box
   actually switches from side-by-side to stacked (style.css's own
   .vid{width:100%} at max-width:640px) -- mobile instead stretches its
   container to fit via syncSpinnerHeightMobile (about.js), so there's no
   overlap there to hide. */
@media screen and (min-width: 701px) {
    .calls-left {
        transition: opacity 1s ease;
    }

    .text-boxes.form-flipped .calls-left {
        opacity: 0;
        /* .calls-left sits right after the form in normal flow, so it's
           still painted *on top of* .back's overflow (an invisible box
           still captures clicks by default) -- that's what would make
           the Submit!/Back buttons underneath unclickable once flipped,
           not the flip or the fade itself. */
        pointer-events: none;
    }
}