/**
 * Holding / "coming soon" page — rendered by [charlies_holding]
 * (class-charlies-holding.php).
 *
 * One full-viewport panel: a blurred background video, a tint over it, and the
 * logo / headline / sign-up form stacked in the middle. Every colour, the blur
 * radius and the logo width arrive as custom properties set inline by PHP from
 * the ACF options, so nothing here needs editing to restyle the page.
 *
 * Tokens (set on .cfc-holding):
 *   --hold-blur          background blur radius
 *   --hold-tint          tint colour   --hold-tint-alpha  its opacity 0–1
 *   --hold-text          text colour   --hold-accent      button colour
 *   --hold-logo-w        logo width (desktop) / --hold-logo-w-m (mobile)
 */

/* ── Full-bleed stage ─────────────────────────────────────────────────────
   The theme wraps page content in a padded container; break out of it with
   the 100vw / negative-margin trick the other page templates use. */
.cfc-holding {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* svh, not vh: on iOS vh is the tallest the viewport ever gets, so a 100vh
       panel sits partly behind the browser's own toolbars until the user
       scrolls. svh is the *small* viewport — the toolbars-visible height —
       which is the one state the page must always fit in. */
    min-height: 100vh;
    min-height: 100svh;

    /* Three rows: the logo at the top, the content taking the space that's
       left and centring inside it, the credit at the bottom. 1fr on the middle
       row is what keeps the content optically centred no matter how tall the
       other two are — and it means neither of them has to be positioned
       absolutely, so nothing can overlap on a short screen. */
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    align-items: center;

    padding: clamp(1.5rem, 3.5vw, 2.25rem) 1.5rem clamp(1.5rem, 3.5vw, 2.25rem);
    overflow: hidden;
    isolation: isolate;      /* keeps the background layers under the content */
    background-color: #0b0809;
    color: var(--hold-text, #fff);
    text-align: center;
}

.cfc-holding,
.cfc-holding * {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    /* Matches the weight of SUBMIT and the line above the form — it was the
       one thing on the page still set at a normal weight. */
    font-weight: 700;
    box-sizing: border-box;
}

/* ── Background ───────────────────────────────────────────────────────────
   The blur is on this wrapper rather than on the video, so the still image
   underneath is softened identically and the cross-fade between them can't
   be seen. A blurred layer samples nothing beyond its own edges, which leaves
   a pale fringe all the way round — scaling it up past the viewport pushes
   that fringe off-screen. 1.15 clears a 60px blur, the maximum the field
   allows. */
.cfc-holding__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(var(--hold-blur, 18px));
    transform: scale(1.15);
    transform-origin: center;
    /* Blur + scale is a big composited layer; promoting it stops the browser
       re-rasterising it on every scroll. */
    will-change: transform;
    pointer-events: none;
}

.cfc-holding__bg--noimage {
    background-color: #0b0809;
}

/* Sized as a container so the cover maths below resolves against this box
   rather than the viewport — the two differ once the wrapper is scaled. */
.cfc-holding__video {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: size;
    pointer-events: none;
}

.cfc-holding__video iframe,
.cfc-holding__video-el {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;

    /* Fallback cover for browsers without container query units. */
    width: 100vw;
    height: 56.25vw;       /* 16:9 from the width */
    min-height: 100vh;
    min-width: 177.78vh;   /* 16:9 from the height — guarantees full cover */

    /* betheme ships a global `iframe { max-width:100% }`, which clamps the
       cover width back to the container and lets the player letterbox inside
       it. Cover REQUIRES overflowing one axis, so both caps have to go. */
    max-width: none;
    max-height: none;
}

/* A <video> can cover on its own; only the iframe needs the ratio maths. */
.cfc-holding__video-el {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
}

@supports (width: 1cqw) {
    .cfc-holding__video iframe {
        /* --cfc-vid-ar is the clip's true width÷height, looked up from Vimeo
           by PHP. It matters most for a portrait mobile cut, which sized as
           16:9 would be pillarboxed by the player. */
        width: max(100cqw, calc(100cqh * var(--cfc-vid-ar, 1.7778)));
        height: max(100cqh, calc(100cqw / var(--cfc-vid-ar, 1.7778)));
        min-width: 0;
        min-height: 0;
    }
}

.cfc-holding__tint {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--hold-tint, #151011);
    opacity: var(--hold-tint-alpha, 0.55);
}

/* A second, softer wash from the bottom. The tint alone is flat; this puts a
   little more weight under the form and the credit line, where the text is
   smallest and the video is at its busiest. */
.cfc-holding__tint::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%);
}

/* ── Content ──────────────────────────────────────────────────────────── */
.cfc-holding__inner {
    grid-row: 2;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cfc-holding__top {
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Never lets the logo row eat into the content's share of a short screen. */
    align-self: start;
}

.cfc-holding__logo {
    width: var(--hold-logo-w, 100px);
    max-width: 45vw;
    height: auto;
    display: block;

    /* White, the same way the site header does it (header.css, .cfc-site-header
       __logo img): the brand SVG is red, and `brightness(0) invert(1)` crushes
       it to black and then flips it to white. Doing it in CSS rather than
       shipping a second white SVG means whatever logo an editor sets — here or
       in the header, which this falls back to — comes out white without anyone
       having to remember to swap the file.
       Then a soft drop shadow, so the mark holds its edges when a light frame
       of the video passes behind it. Order matters: the shadow has to come
       after the inversion or it gets inverted too. */
    filter: brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
}

.cfc-holding__heading {
    margin: 0 0 0.3rem;
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hold-text, #fff);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.cfc-holding__heading-line {
    display: block;
}

/* ── Heading artwork ──────────────────────────────────────────────────────
   Supplied artwork used instead of the heading text. The <h1> keeps its
   wording as the image's alt, so nothing is lost to a screen reader. */
.cfc-holding__heading-img {
    display: block;
    width: var(--hold-head-img-w, 340px);
    /* Whatever width the editor asks for, the artwork can never push the panel
       wider than the screen — this is the guard the field's instructions
       promise. 100% is the content column; 88vw catches a narrow phone where
       the column itself is nearly the full width. */
    max-width: min(100%, 88vw);
    height: auto;
    margin: 0 auto;
    /* Same treatment as the logo: the artwork sits on moving video, and a soft
       shadow holds its edges when a light frame passes behind it. */
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
}

/* With artwork the h1's own text-shadow has nothing to act on, and the block
   spacing wants to come from the image rather than the type's line-height. */
.cfc-holding__heading--img {
    text-shadow: none;
}

/* The sub-heading still follows the artwork, so give it a gap of its own —
   without it the line sits tight against the image's baseline. */
.cfc-holding__heading--img .cfc-holding__heading-line--alt {
    /* Deliberately the same clamp as the logo's margin-bottom, so the gap
       above this line matches the gap between the logo and the artwork and the
       three blocks read as one evenly-spaced stack. Change one, change both. */
    margin-top: clamp(1.25rem, 3vw, 2rem);
    /* Sized off the panel, not off the h1's font-size: with artwork above it
       there is no longer a heading size for `em` to be relative to. */
    font-size: clamp(0.78rem, 1.9vw, 0.95rem);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* The second line is the ask — "GET EARLY ACCESS" — so it is set in bold caps
   to read as a call to action rather than as a second sentence, a step smaller
   than the line above it. The transform is applied here rather than typed into
   the field, so the styling holds whatever case an editor enters. Tracking is
   left at the font's own: opened up it read as a separate label rather than as
   part of the headline block. */
.cfc-holding__heading-line--alt {
    /* Set apart from the line above rather than stacked straight onto it —
       they are two statements, not one wrapped sentence. The artwork variant
       further down sets its own, larger, gap. */
    margin-top: 0.8rem;
    font-weight: 700;
    font-size: 0.82em;
    text-transform: uppercase;
    opacity: 0.95;
}

.cfc-holding__intro {
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
    max-width: 30rem;
    font-size: clamp(0.95rem, 1.6vw, 1.05rem);
    line-height: 1.6;
    color: var(--hold-text, #fff);
    opacity: 0.82;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* ── Form ─────────────────────────────────────────────────────────────── */
.cfc-holding-form {
    /* Sets the heading apart from the form. Lives on the form rather than on
       the heading's margin-bottom so it holds whether or not the optional
       intro line is filled in between them.
       Sized to land on the same ~33px rhythm as the gaps further up the stack
       once the heading's own 0.75rem bottom margin is added to it. */
    margin-top: clamp(0.9rem, 2.2vw, 1.4rem);
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    /* The ONLY thing setting space between fields — see the margin reset on the
       inputs below, which is what makes that true. */
    gap: 0.7rem;
    text-align: left;
}

/* The call-to-action that replaces the form when the page is set to send
   people to a WhatsApp community instead of collecting their details. Same
   width and same distance from the heading as the form it stands in for. */
.cfc-holding-cta {
    margin-top: clamp(0.9rem, 2.2vw, 1.4rem);
    width: 100%;
    max-width: 380px;
}

.cfc-holding-cta__note {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: center;
    color: var(--hold-text, #fff);
    opacity: 0.85;
}

.cfc-holding-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cfc-holding-form__field label {
    display: block;
    /* The form's own text-align is left; the labels opt out of it so they line
       up with the centred agreement line and submit below. The typed value is
       deliberately left alone — text is easier to read while you are typing it
       if it stays put rather than recentring on every keystroke. */
    text-align: center;
    margin-bottom: 0.25rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hold-text, #fff);
    opacity: 0.75;
}

/* The example format under the WhatsApp field. Small and quiet — it is a
   nudge for people who are unsure, not a second label. */
.cfc-holding-form__hint {
    display: block;
    text-align: center;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--hold-text, #fff);
    opacity: 0.65;
}

.cfc-holding--flat .cfc-holding-form__hint {
    opacity: 0.8;
}

/* Labels hidden but not removed.
   The <label> stays in the page and stays tied to its input, so a screen
   reader still announces "Email" — it is simply not painted. Deleting it, or
   using display:none, would leave the field with no accessible name at all and
   nothing to say what belongs in it. */
.cfc-holding-form--nolabels .cfc-holding-form__field label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.cfc-holding-form__optional {
    margin-left: 0.4rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
}

.cfc-holding-form input[type="text"],
.cfc-holding-form input[type="email"],
.cfc-holding-form input[type="tel"] {
    width: 100%;
    /* betheme puts `margin-bottom: 20px` on every text/email/tel input globally
       (be.css), which was landing on top of the flex gap and roughly tripling
       the space between fields. Zero it so the gap above is the single place
       that spacing is decided. */
    margin: 0;
    /* A rule, not a box: only a bottom border, no fill, no radius. The side
       and top padding go with the box — text now sits on the line rather than
       inset from an edge that no longer exists. */
    padding: 0.3rem 0 0.35rem;
    /* 16px, not the smaller size the rest of the page dropped to: iOS Safari
       zooms the whole page in when a focused input is under 16px, and being
       thrown into a zoomed viewport mid-form is worse than a field that is a
       shade larger than its neighbours. The desktop rule below takes it down,
       where no such behaviour exists. */
    font-size: 1rem;
    line-height: 1.35;
    /* Stated outright rather than left to the `.cfc-holding *` rule above:
       betheme targets inputs by attribute selector, which outweighs it. */
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    /* Display only — the value that gets submitted and stored keeps whatever
       case was typed, which matters because the local part of an address is
       technically case-sensitive. */
    text-transform: uppercase;
    /* Sits on the page's centre line with everything else. The trade is that
       the text re-centres as it is typed; at this length that reads as the
       field filling out rather than as the caret jumping. */
    text-align: center;
    /* Enough to open the capitals up without the address breaking into
       separate letters. Roughly matches the tracking on SUBMIT below. */
    letter-spacing: 0.1em;
    color: var(--hold-text, #fff);
    background: transparent;
    /* betheme paints `inset 0 0 2px 2px rgba(0,0,0,0.02)` onto every input
       (be.css). Against white it is invisible; against this red it reads as a
       faint smudge inside the field. */
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 0;
    transition: border-color 0.2s ease;
    appearance: none;
}

.cfc-holding-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* The field looks identical whether it is idle, hovered or focused — asked
   for explicitly.
   These rules exist precisely so that nothing happens: the browser draws its
   own focus ring and betheme paints its own background and inset shadow onto
   any input, so "no state" has to be stated rather than left unsaid. The
   border is deliberately not mentioned, which leaves the resting rule's own
   colour and width in place through every state.

   Note this removes the visible focus indicator: a keyboard user tabbing
   through the page gets no outline marking where they are. The blinking text
   caret is the only thing left saying the field is active, which is why this
   is tolerable on a text input in a way it would not be on a button. */
.cfc-holding-form input:hover,
.cfc-holding-form input:focus,
.cfc-holding-form input:focus-visible,
.cfc-holding-form input:active {
    outline: none;
    box-shadow: none;
    background: transparent;
}

/* Chrome paints autofilled inputs opaque yellow-white, which would knock a
   hole in the glass and turn the white text unreadable. There is no way to
   override the background directly — an enormous inset shadow is the standard
   way to repaint it. */
.cfc-holding-form input:-webkit-autofill,
.cfc-holding-form input:-webkit-autofill:hover,
.cfc-holding-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--hold-text, #fff);
    -webkit-box-shadow: 0 0 0 1000px rgba(40, 30, 32, 0.92) inset;
    caret-color: var(--hold-text, #fff);
}

.cfc-holding-form__field.has-error input {
    border-bottom-color: #ffd7d7;
    border-bottom-width: 2px;
}

/* ── Submit ───────────────────────────────────────────────────────────────
   Plain white text rather than a filled button. It keeps being a real
   <button>, so it is still reachable by keyboard and still submits the form
   without help — only its appearance changed.

   betheme paints a grey background onto every bare <button> on hover
   (be.css `button:hover`), and a rule that doesn't mention `background` lets
   that grey through. So every state below states `background: transparent`
   explicitly, even though it looks redundant. */
.cfc-holding-form__submit,
.cfc-holding-form__submit:link,
.cfc-holding-form__submit:visited {
    display: block;
    width: 100%;
    margin: 0.5rem 0 0;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--hold-text, #fff);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    /* A filled button reads as pressable on its own; bare text needs the
       cursor and a hover to say so. */
    transition: opacity 0.2s ease;
    appearance: none;
}

.cfc-holding-form__submit:hover,
.cfc-holding-form__submit:focus {
    color: var(--hold-text, #fff);
    background: transparent;
    opacity: 0.75;
}

.cfc-holding-form__submit:active {
    color: var(--hold-text, #fff);
    background: transparent;
    opacity: 0.6;
}

.cfc-holding-form__submit:disabled {
    color: var(--hold-text, #fff);
    background: transparent;
    opacity: 0.5;
    cursor: default;
}

.cfc-holding-form__submit:focus-visible {
    outline: 2px solid var(--hold-text, #fff);
    outline-offset: 3px;
}

/* ── Agreement tick box ───────────────────────────────────────────────────
   The label wraps the input so the whole sentence is a click target. */
.cfc-holding-form__consent {
    margin-top: 0.35rem;
}

.cfc-holding-form__consent-label {
    display: flex;
    align-items: flex-start;
    /* Centres the box and its wording as one group, rather than centring the
       text inside a full-width row and leaving the box adrift on the left. */
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.66rem;
    line-height: 1.4;
    color: var(--hold-text, #fff);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    opacity: 0.9;
}

.cfc-holding-form__consent input[type="checkbox"] {
    /* appearance:none to get a box that matches the rest of the page; the real
       input is kept and styled rather than replaced by a span, so it stays
       focusable, tickable by keyboard and readable to assistive tech. */
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 0;
    /* Nudged down to sit on the first line's cap height rather than its box. */
    margin-top: 0.1rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.cfc-holding-form__consent input[type="checkbox"]:checked {
    background: var(--hold-text, #fff);
    border-color: var(--hold-text, #fff);
}

/* The tick itself: two borders of an empty box, rotated. Drawn in the page's
   own colour so it reads as cut out of the white square. */
.cfc-holding-form__consent input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid var(--hold-accent, #ff0006);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.cfc-holding-form__consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--hold-text, #fff);
    outline-offset: 2px;
}

.cfc-holding-form__consent.has-error input[type="checkbox"] {
    border-color: #ffd7d7;
    border-width: 2px;
}

.cfc-holding-form__consent-link,
.cfc-holding-form__consent-link:link,
.cfc-holding-form__consent-link:visited {
    color: var(--hold-text, #fff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cfc-holding-form__consent-link:hover,
.cfc-holding-form__consent-link:focus {
    color: var(--hold-text, #fff);
    text-decoration: underline;
    opacity: 0.85;
}

.cfc-holding-form.is-sent .cfc-holding-form__consent {
    display: none;
}

/* betheme styles every bare <button> globally (be.css `button:hover`), and a
   hover rule that doesn't declare `background` leaves the theme's grey to win.
   Every state below therefore states its own background and colour. */
.cfc-holding-btn,
.cfc-holding-btn:link,
.cfc-holding-btn:visited {
    /* Shared by the form's <button> and the standalone call-to-action <a>, so
       both are the same object in every state. The flex centring and the
       text-decoration reset are what an <a> needs to sit like a button; they
       are no-ops on the <button>. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    margin: 0.35rem 0 0;
    padding: 0.65rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--hold-accent, #ff0006);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.1s ease;
}

.cfc-holding-btn:hover,
.cfc-holding-btn:focus {
    color: #fff;
    background: var(--hold-accent, #ff0006);
    filter: brightness(1.12);
}

.cfc-holding-btn:active {
    color: #fff;
    background: var(--hold-accent, #ff0006);
    transform: translateY(1px);
}

.cfc-holding-btn:disabled {
    color: #fff;
    background: var(--hold-accent, #ff0006);
    opacity: 0.6;
    cursor: default;
}

.cfc-holding-form.is-sending .cfc-holding-form__submit {
    opacity: 0.6;
}

.cfc-holding-form__smallprint {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: center;
    color: var(--hold-text, #fff);
    opacity: 0.6;
}

.cfc-holding-form__status {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
}

/* Empty until the handler answers — no reserved gap before then. */
.cfc-holding-form__status:empty {
    display: none;
}

.cfc-holding-form__status.is-error {
    color: #ff9c9c;
}

.cfc-holding-form__status.is-success {
    color: var(--hold-text, #fff);
    font-size: 1.05rem;
    font-weight: 600;
}

/* ── Success state ────────────────────────────────────────────────────────
   The fields have done their job, so they go and the panel takes their place —
   leaving them there just invites a second sign-up. */
.cfc-holding-form.is-sent .cfc-holding-form__field,
.cfc-holding-form.is-sent .cfc-holding-form__submit,
.cfc-holding-form.is-sent .cfc-holding-form__smallprint {
    display: none;
}

/* The status paragraph stays in the accessibility tree so the result is still
   announced, but the visible job passes to the panel below. Visually hidden
   rather than display:none, which would take it out of the tree entirely and
   silence the announcement. */
.cfc-holding-form.is-sent .cfc-holding-form__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.cfc-holding-form__success {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1.25rem 1rem;
    text-align: center;

    /* The same glass as the fields it replaces, so the panel reads as the form
       having transformed rather than as a new box dropped on top. */
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.cfc-holding-form.is-sent .cfc-holding-form__success {
    display: flex;
    /* `both` holds the from-state before the delay elapses — without it the
       panel would flash at full size for one frame before rising. */
    animation: cfc-hold-rise 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.cfc-holding-form__success-text {
    margin: 0;
    font-size: clamp(0.75rem, 1.7vw, 0.85rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--hold-text, #fff);
    animation: cfc-hold-rise 0.5s 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

/* ── The tick ─────────────────────────────────────────────────────────────
   Two strokes that draw themselves: the ring sweeps round, then the check
   snaps through it, then the whole mark settles with a small overshoot. White
   rather than the brand red — red on a confirmation reads as an error however
   it is drawn. */
.cfc-holding-tick {
    width: 40px;
    height: 40px;
    overflow: visible;   /* the settle scales past the viewBox edges */
    animation: cfc-hold-tick-settle 0.5s 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.cfc-holding-tick__circle,
.cfc-holding-tick__check {
    fill: none;
    stroke: var(--hold-text, #fff);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cfc-holding-tick__circle {
    /* 2πr, r = 23 */
    stroke-dasharray: 145;
    stroke-dashoffset: 145;
    opacity: 0.9;
    animation: cfc-hold-draw 0.6s 0.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.cfc-holding-tick__check {
    /* the two legs of the check, ~12 + ~23 */
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: cfc-hold-draw 0.35s 0.55s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes cfc-hold-rise {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes cfc-hold-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes cfc-hold-tick-settle {
    from { transform: scale(0.8); }
    to   { transform: scale(1); }
}

/* Reduced motion: the confirmation still has to appear — it is the whole
   answer to the form — so the states are kept and only the movement between
   them is dropped. */
@media (prefers-reduced-motion: reduce) {
    .cfc-holding-form.is-sent .cfc-holding-form__success,
    .cfc-holding-form__success-text,
    .cfc-holding-tick {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .cfc-holding-tick__circle,
    .cfc-holding-tick__check {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* ── Bottom links + credit ────────────────────────────────────────────── */
.cfc-holding__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: clamp(1.25rem, 3vw, 2rem) 0 0;
    padding: 0;
    list-style: none;
}

.cfc-holding__links li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cfc-holding__links a,
.cfc-holding__links a:link,
.cfc-holding__links a:visited {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--hold-text, #fff);
    opacity: 0.75;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.cfc-holding__links a:hover,
.cfc-holding__links a:focus {
    color: var(--hold-text, #fff);
    opacity: 1;
    text-decoration: none;
}

.cfc-holding__credit {
    /* The bottom row of the grid — it used to be absolutely positioned, which
       meant the content above had to leave a guessed gap for it. */
    grid-row: 3;
    position: relative;
    align-self: end;
    z-index: 1;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

.cfc-holding__credit a,
.cfc-holding__credit a:link,
.cfc-holding__credit a:visited,
.cfc-holding__credit span {
    color: var(--hold-text, #fff);
    opacity: 0.5;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.cfc-holding__credit a:hover,
.cfc-holding__credit a:focus {
    color: var(--hold-text, #fff);
    opacity: 0.9;
    text-decoration: none;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (min-width: 761px) {
    .cfc-holding-form input[type="text"],
    .cfc-holding-form input[type="email"],
    .cfc-holding-form input[type="tel"] {
        /* Sized so a long address still fits the field end to end. Bold caps
           with 0.1em of tracking are wide, so this is smaller than it looks —
           at 380px the field takes roughly 42 characters, which covers all but
           the longest work addresses. */
        font-size: 0.68rem;
    }
}

@media (max-width: 760px) {
    .cfc-holding {
        padding-bottom: clamp(4rem, 14vw, 5.5rem);
    }

    .cfc-holding__logo {
        width: var(--hold-logo-w-m, 80px);
    }

    .cfc-holding__heading-img {
        width: var(--hold-head-img-w-m, 240px);
    }

    /* A short panel with a tall form gets tight; let it scroll rather than
       clip, and drop the vertical centring that would push the logo off the
       top edge when it does. */
    .cfc-holding__inner {
        max-width: 100%;
    }
}

/* The scale on the background is a static transform, not motion, so it stays;
   what goes is the video itself, which is the moving part. */
@media (prefers-reduced-motion: reduce) {
    .cfc-holding__video {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Flat-colour background

   Set from Holding Page → Background → "A plain colour". The video, the blur
   layer and the tint are all skipped server-side, so this is just a painted
   section — but a solid field of brand red changes what everything sitting on
   it needs, and that is what this block handles.
   ═══════════════════════════════════════════════════════════════════════════ */
.cfc-holding--flat {
    background-color: var(--hold-bg-flat, #ff0006);
}

/* Every shadow on this page existed to hold type off a moving photographic
   background. Over one flat colour there is nothing to separate from, and a
   black blur behind white type on red just reads as dirt. */
.cfc-holding--flat .cfc-holding__logo {
    /* Keeps the whitening, drops only the drop-shadow. */
    filter: brightness(0) invert(1);
}

.cfc-holding--flat .cfc-holding__heading-img {
    filter: none;
}

.cfc-holding--flat .cfc-holding__heading,
.cfc-holding--flat .cfc-holding__heading-line--alt,
.cfc-holding--flat .cfc-holding__intro {
    text-shadow: none;
}

/* White on this red is about 4:1 — fine for the big type, thin for anything
   small. The secondary text is therefore run at a much higher opacity here
   than it is over video, where a dark tint was doing half the work. */
.cfc-holding--flat .cfc-holding-form__field label {
    opacity: 0.92;
}

.cfc-holding--flat .cfc-holding-form__smallprint {
    opacity: 0.85;
}

.cfc-holding--flat .cfc-holding__credit a,
.cfc-holding--flat .cfc-holding__credit a:link,
.cfc-holding--flat .cfc-holding__credit a:visited,
.cfc-holding--flat .cfc-holding__credit span {
    opacity: 0.72;
}

.cfc-holding--flat .cfc-holding__links a,
.cfc-holding--flat .cfc-holding__links a:link,
.cfc-holding--flat .cfc-holding__links a:visited {
    opacity: 0.88;
}

/* The rule was tuned against a dark tint; on red it needs to be firmer to
   read as a field rather than as a stray line. */
.cfc-holding--flat .cfc-holding-form input[type="text"],
.cfc-holding--flat .cfc-holding-form input[type="email"],
.cfc-holding--flat .cfc-holding-form input[type="tel"] {
    border-bottom-color: rgba(255, 255, 255, 0.7);
}

/* ── The button ───────────────────────────────────────────────────────────
   The submit button is painted in --hold-accent, which is this same red: on a
   red field it disappears, leaving floating white text. Inverted, it becomes
   the one white block on the page — which is where the eye should land anyway.
   The label picks up the background colour, so it tracks whatever colour is
   chosen rather than being pinned to red.

   Every state restates background AND color: betheme's global `button:hover`
   repaints any property a more specific rule leaves unspoken. */
.cfc-holding--flat .cfc-holding-btn,
.cfc-holding--flat .cfc-holding-btn:link,
.cfc-holding--flat .cfc-holding-btn:visited {
    background: var(--hold-text, #fff);
    color: var(--hold-bg-flat, #ff0006);
}

.cfc-holding--flat .cfc-holding-btn:hover,
.cfc-holding--flat .cfc-holding-btn:focus {
    background: var(--hold-text, #fff);
    color: var(--hold-bg-flat, #ff0006);
    filter: brightness(0.93);
}

.cfc-holding--flat .cfc-holding-btn:active {
    background: var(--hold-text, #fff);
    color: var(--hold-bg-flat, #ff0006);
}

.cfc-holding--flat .cfc-holding-btn:disabled {
    background: var(--hold-text, #fff);
    color: var(--hold-bg-flat, #ff0006);
    opacity: 0.6;
}

.cfc-holding--flat .cfc-holding-form__consent input[type="checkbox"]:checked::after {
    border-color: var(--hold-bg-flat, #ff0006);
}

.cfc-holding--flat .cfc-holding-form__consent-label {
    opacity: 1;
}

/* Autofill's repaint colour was picked to match the dark tint; on red it would
   be a brown patch. */
.cfc-holding--flat .cfc-holding-form input:-webkit-autofill,
.cfc-holding--flat .cfc-holding-form input:-webkit-autofill:hover,
.cfc-holding--flat .cfc-holding-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--hold-bg-flat, #ff0006) inset;
}

/* The success panel's glass also needs firming up against the flat colour. */
.cfc-holding--flat .cfc-holding-form__success {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(0, 0, 0, 0.12);
}

/* ── Terms pop-up ─────────────────────────────────────────────────────────
   Rendered after the stage, not inside it, so none of the stage's bold,
   centred type reaches the terms. The copy styles come from legal.css
   (.cfc-legal__body), whose colour tokens normally live on .cfc-legal-page
   and are restated here. */
html.cfc-terms-open {
    overflow: hidden;
}

.cfc-terms-dialog {
    --cfc-red: #ff0006;
    --cfc-panel: #f4f4f5;
    --cfc-black: #111111;
    --cfc-line: #ececec;

    box-sizing: border-box;
    width: min(680px, calc(100% - 32px));
    max-width: none;
    max-height: min(820px, calc(100svh - 32px));
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: #2b2b2b;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-align: left;
}

.cfc-terms-dialog *,
.cfc-terms-dialog *::before,
.cfc-terms-dialog *::after {
    box-sizing: border-box;
}

.cfc-terms-dialog::backdrop {
    background: rgba(11, 8, 9, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.cfc-terms-dialog[open] {
    animation: cfc-terms-in 0.2s ease-out;
}

@keyframes cfc-terms-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cfc-terms-dialog[open] { animation: none; }
}

/* The dialog's box is capped by max-height; the panel fills it and hands the
   leftover height to the body, which is the only part that scrolls. */
.cfc-terms-dialog__panel {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.cfc-terms-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem 1.1rem 1.5rem;
    border-bottom: 1px solid #ececec;
}

.cfc-terms-dialog__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: clamp(1.05rem, 4vw, 1.25rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #111;
}

.cfc-terms-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.4rem 1.5rem 1.6rem;
    font-weight: 400;
}

.cfc-terms-dialog__body:focus-visible {
    outline: 2px solid var(--cfc-red);
    outline-offset: -2px;
}

/* legal.css leaves room for the site's sticky header when jumping to a
   heading; there is no header inside a pop-up. */
.cfc-terms-dialog__body h2,
.cfc-terms-dialog__body h3 {
    scroll-margin-top: 0;
}

.cfc-terms-dialog__foot {
    display: flex;
    justify-content: flex-end;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid #ececec;
}

/* Betheme's global `button:hover` repaints anything a rule leaves unsaid, so
   every state states background, colour and border. */
.cfc-terms-dialog__close,
.cfc-terms-dialog__close:hover,
.cfc-terms-dialog__close:focus,
.cfc-terms-dialog__close:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #111;
    cursor: pointer;
    box-shadow: none;
}

.cfc-terms-dialog__close:hover {
    background: #f4f4f5;
}

.cfc-terms-dialog__close svg {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
}

.cfc-terms-dialog__done,
.cfc-terms-dialog__done:hover,
.cfc-terms-dialog__done:focus,
.cfc-terms-dialog__done:active {
    margin: 0;
    padding: 0.8rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: #ff0006;
    color: #fff;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.cfc-terms-dialog__done:hover {
    filter: brightness(0.92);
}

.cfc-terms-dialog__close:focus-visible,
.cfc-terms-dialog__done:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .cfc-terms-dialog__head { padding: 0.9rem 0.75rem 0.9rem 1.1rem; }
    .cfc-terms-dialog__body { padding: 1.15rem 1.1rem 1.3rem; }
    .cfc-terms-dialog__foot { padding: 0.75rem 1.1rem; }
    .cfc-terms-dialog__done { width: 100%; }
}