/* ====================================================================
   THE STILL PAGE — keep the design, drop the movement.

   Every pinned stage on index.html lets go and every layer goes back to
   being a section you scroll to. Loaded two ways from index.html:

     - for visitors who have asked their device for reduced motion, and
     - inside <noscript>, for anyone without JavaScript, because the moves
       are all script and a page waiting for a script that never runs is a
       page of invisible layers.

   One copy of these rules, two reasons to want them.
   ==================================================================== */
html { scroll-behavior: auto; }
.lr-in { transform: none !important; transition: none !important; }
.stmt-word { opacity: 1 !important; }

/* Collapses into what it always was: a hero, then a statement,
   stacked, with nothing flying anywhere and no window to look
   through — you just arrive at the next section. */
.zt-section { height: auto !important; }
.zt-section .pin-stage { position: static; height: auto; overflow: visible; display: block; }
/* The turnaround's stage lets go too. It was only the big stage that was
   being unpinned here, so the FAQ kept its full pinned height — four
   screens of empty scroll with a section stuck to the top of them, for
   a move that reduced motion had already switched off. */
.ak-section { height: auto !important; }
.ak-section .pin-stage { position: static; height: auto; overflow: visible; display: block; }
.zt-hero { position: relative; inset: auto; min-height: calc(100svh / var(--pz, 1)); }
.zt-content { position: relative; inset: auto; min-height: calc(100svh / var(--pz, 1)); }
.zt-fly { transform: none !important; opacity: 1 !important; }
.zt-glass { transform: none !important; opacity: 1 !important; }
.zt-backdrop { transform: none !important; filter: none !important; }
.zt-portal {
    position: relative; inset: auto;
    opacity: 1 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    padding: 6rem 0;
}
.zt-portal-inner { position: relative; inset: auto; transform: none !important; opacity: 1 !important; }

/* The panel stops being a reveal and goes back to being a section you
   scroll to. The white word has nothing to do here at all — there is no
   rising edge for it to sit under, and the charcoal one is still in the
   sentence where it belongs. */
.ow-panel {
    position: relative; inset: auto; min-height: calc(100svh / var(--pz, 1));
    opacity: 1 !important;
    clip-path: none !important; -webkit-clip-path: none !important;
}
.ow-photo { transform: none !important; }
.ow-copy  { opacity: 1 !important; transform: none !important; }
.ow-glass { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }

/* Three panels you scroll to, and nothing carried between them. The
   white word, the flying button, the ring and the lit screen are all
   ways of saying "this became that", and none of them can be said
   standing still — so they are not said at all. */
.ow-hold, .ow-travel, .ow-ping, .ow-glow { display: none !important; }

/* And the nine below them go back to being nine sections you scroll
   to. Every layer stops being a layer, every measured position stops
   being measured, and the page is the page it would have been if
   none of this had been written. */
.act {
    position: relative; inset: auto; min-height: calc(100svh / var(--pz, 1));
    opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important; clip-path: none !important; -webkit-clip-path: none !important;
}
/* No stage to fit inside any more, so nothing needs shrinking to fit it. */
.act-in { position: relative; inset: auto; padding: 6rem 0; transform: none !important; }
#act-about { background: var(--c-surface-sunken) !important; }
.ab-bg { opacity: 1 !important; }
.pr-step, .dv-copy, .st-grid, .ak-btn { opacity: 1 !important; }
.pr-rule, .rest-rule { transform: none !important; }

/* The FAQ stays a FAQ: the form below it is a form, not something a
   rule turned into. */
.ak-dark, .ak-flat, .ak-fold, .ng-seam, .pt-shadow, .dv-grain, .pl-rule, .nm-fly { display: none !important; }
/* The numbers live on the leaf that turns. With nothing turning, the
   leaf is just a charcoal section you scroll past. */
.pt-persp { position: relative; inset: auto; visibility: visible !important; perspective: none; }
.pt-leaf, .pt-face.pt-front { position: relative; inset: auto; transform: none !important; clip-path: none !important; -webkit-clip-path: none !important; }
.pt-front > .act-in { position: relative; inset: auto; padding: 6rem 0; }
.pt-back, .pt-shade, .ng-dark { display: none !important; }
.st-grid { transform: none !important; }
/* The rows keep their own rules here — nothing is dealt off them. */
#act-process { -webkit-mask-image: none !important; mask-image: none !important; }
/* Nothing is cut down to three slots here: the rows are still five
   questions with the boxes for the pass you are on sitting under them,
   so neither the shift onto a slot nor the height taken back off the
   bottom of the list has anything to do. Belt and braces — the script
   that sets those two never runs on this stylesheet. */
#ak-list { margin-bottom: 0 !important; }
.ak-body { transform: none !important; }
.ak-box { position: relative; height: auto !important; transform: none !important; pointer-events: auto !important; border-color: var(--c-line) !important; border-radius: 10px !important; margin-top: 10px; }
.ak-fld { opacity: 1 !important; padding: 14px 16px; color: var(--c-on-surface) !important; }
.ak-fld::placeholder { color: var(--c-on-surface-faint); }
select.ak-fld { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233e3a32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
select.ak-fld.is-empty { color: var(--c-on-surface-faint) !important; }
.ak-fld option { background: var(--c-surface); color: var(--c-on-surface); }
.ak-other { color: var(--c-on-surface); padding: 14px 76px 14px 16px; }
.ak-other::placeholder { color: var(--c-on-surface-faint); }
.ak-other-back { color: var(--c-on-surface-muted); border-bottom-color: var(--c-line-strong); }
/* The form is a form from the start here, so the button is live from the
   start too — nothing is going to arrive and hand it the pointer. The
   two passes still happen; they just swap without being animated. */
.ak-btn { pointer-events: auto !important; }
.ak-foot { pointer-events: auto; }
.ak-nav { opacity: 1 !important; pointer-events: auto !important; color: var(--c-on-surface-faint); }
/* Nothing here is squeezed into one screen, so the way back off the
   second pass can have a row of its own rather than sharing the
   message's — and having its own row, it has no reason to step aside
   for it either. */
.ak-nav { position: static; margin-top: 14px; }
.ak-nav.is-hushed { visibility: visible; }
.ak-back { color: var(--c-on-surface-muted); border-bottom-color: var(--c-line-strong); }
.ak-back:hover { color: var(--c-on-surface); border-bottom-color: var(--c-on-surface); }
/* A rule that belongs to the pass you are not on is not a rule with
   nothing written on it — it is not there at all, because here the
   questions are still questions and an empty box under one reads as a
   field that failed to load. */
.ak-row[data-fstep] .ak-box { display: none; }
.ak-row.is-asking .ak-box { display: block; }
/* And the sheet under it is cream rather than charcoal, so the answer
   written on it has to be ink rather than light. */
.ak-sent { position: static; transform: none; }
.ak-sent-rule { background: var(--c-line-strong); }
.ak-sent-head { color: var(--c-on-surface); }
.ak-sent-body { color: var(--c-on-surface-muted); }
.ak-err { color: #a2402c; }
.footer-word { opacity: 1 !important; }
.dv-hold { aspect-ratio: 4 / 5; }
.dv-frame { position: relative; top: auto; height: 100% !important; transform: none !important; border-radius: 14px; }
.dv-frame img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 1 !important; filter: none !important; transform: none !important; }

/* The contact headline waits on top of the questions' headline for the
   turnaround to swap them. Nothing swaps here, so it is not there. */
#ak-head2 { display: none; }