Overview…
--------------------------------------------------------------------- */
.lum-subnav{position:sticky;top:var(--lum-bar-h,64px);z-index:40;
background:color-mix(in srgb,var(--bg) 88%,transparent);
backdrop-filter:blur(14px) saturate(1.1);
border-bottom:1px solid var(--border)}
.lum-subnav-in{max-width:1080px;margin:0 auto;padding:0 var(--space-6);
display:flex;gap:var(--space-6);overflow-x:auto;scrollbar-width:none}
.lum-subnav-in::-webkit-scrollbar{display:none}
.lum-subnav a{position:relative;flex:none;padding:14px 0;text-decoration:none;
font-size:var(--text-sm);color:var(--text-2);white-space:nowrap;
transition:color var(--dur-fast) var(--ease-out)}
.lum-subnav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
background:var(--accent);transform:scaleX(0);transform-origin:left;
transition:transform var(--dur-base) var(--ease-bounce)}
.lum-subnav a.is-here{color:var(--text)}
.lum-subnav a.is-here::after{transform:scaleX(1)}
/* Hover is drawn ONLY on real pointers. On touch, a tapped link keeps
:hover until you tap elsewhere — in a sticky row that reads as two
sections lit at once, which is a bug report waiting to happen. */
@media (hover:hover){
.lum-subnav a:hover{color:var(--text)}
.lum-subnav a:hover::after{transform:scaleX(1);opacity:.4}
}
@media (max-width:767.98px){
/* say the row scrolls, by fading toward the edge it drags to */
.lum-subnav-in{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
padding-right:var(--space-8)}
}
/* 1b · ATTENTION PIN — for the destination people walk past.
A map-pin dot that drops onto a nav item, three times, then rests.
Use it on ONE item, and only when analytics or a review says the item
is being missed. Two pins is a Christmas tree. */
.lum-pin{position:relative}
/* ::before, not ::after — an element has exactly one of each, and every
nav family in this system already spends ::after on its underline. A pin
drawn on ::after silently eats the marker of whatever it is pinned to. */
.lum-pin::before{content:"";position:absolute;right:-13px;top:calc(50% - 9px);
width:7px;height:7px;border-radius:50%;background:var(--accent);
box-shadow:0 0 0 0 var(--accent-glow);
animation:lum-pin-drop 2.4s var(--ease-bounce) 3 both;animation-delay:1.1s}
@keyframes lum-pin-drop{
0%{transform:translateY(-9px) scale(.4);opacity:0}
14%{transform:translateY(0) scale(1);opacity:1}
26%{transform:translateY(-3px) scale(1)}
34%{transform:translateY(0) scale(1)}
34.1%{box-shadow:0 0 0 0 var(--accent-glow)}
60%{box-shadow:0 0 0 9px transparent}
100%{transform:none;opacity:1;box-shadow:0 0 0 0 transparent}}
/* ---------------------------------------------------------------------
2 · TYPESETTING — where a line is allowed to break
Display type set by the browser breaks in the wrong places: it orphans
the last word, and it splits a phrase down the middle of the accent
emphasis. These four utilities are how you take the decision back.
--------------------------------------------------------------------- */
/* the emphasised phrase gets its own line — "Two sentences.
One idea." */
.lum-hd-stack em{display:block;font-style:italic;color:var(--accent)}
/* this heading is short enough to hold one line on a real screen — hold it */
@media (min-width:900px){.lum-hd-one{white-space:nowrap;max-width:none}}
/* a break that only exists once there's room for it */
.lum-hd-br{display:none}
@media (min-width:768px){.lum-hd-br{display:inline}}
/* body copy: never orphan the last word (pretty), headings: even lines */
.sec-sub,.lum-ctapanel-sub,.lum-feature-body,.lum-teaser-body{text-wrap:pretty}
.sec-title,.lum-hero-title,.lum-feature-title,.lum-ctapanel-title,
.lum-teaser-title,.lum-era-title,.lum-cap-title,.lum-hd-stack em{text-wrap:balance}
/* the top-of-page heading block. A sub-page opens with a statement, not
with a hero — this is the block that carries it, and its display size is
one notch above a section head because it is the page's own name. */
.lum-pagehead{padding:var(--space-16) 0 var(--space-12)}
.lum-pagehead .sec-head{margin-bottom:0;max-width:720px}
.lum-pagehead .sec-title{font-size:var(--text-4xl)}
@media (max-width:767.98px){
.lum-pagehead{padding:var(--space-12) 0 var(--space-10)}
.lum-pagehead .sec-title{font-size:var(--text-3xl)}
}
/* --- 2b · HEADINGS ON A PHONE (v2.6.4) ---------------------------------
Measured, not guessed. A probe that ranges every WORD of every heading
and buckets them by line top found 22 single-word hangs across eight
pages at 390px — "Through / anything.", "years actually / built.". You
cannot see this by eye on a desktop and you cannot see it in a spec.
Two rules fixed 21 of the 22:
1. balance above, on every display heading rather than only the four
v2.6.3 covered. It picks the break that makes the lines most alike,
which is the break a typesetter would pick.
2. one size step down below 480px. balance can only choose among breaks
that fit; a heading whose longest WORD is wider than the column has
no good break available and must be set smaller. Page heads go fluid
instead of stepping, so they stay the biggest thing on the screen.
KNOW THIS ABOUT balance: it minimises the WIDEST line, which is not
always the nicest split. It chose "Reactive, / planned, capital." over
"Reactive, planned, / capital." because the second is wider. When it
picks the wider-but-worse one, set that break by hand — .lum-hd-br-xs. */
@media (max-width:479.98px){
.sec-title,.lum-ctapanel-title{font-size:var(--text-2xl);line-height:1.12}
.lum-feature-title{font-size:var(--text-2xl)}
/* the page head stays the page head — fluid, not stepped */
.lum-pagehead .sec-title,.lum-hero-title{
font-size:clamp(1.9rem,9.2vw,2.5rem);line-height:1.08}
}
/* the mirror of .lum-hd-br: a break that exists ONLY on small phones.
NB both need a literal space after the tag — a
swallows the
whitespace around it, so when it is display:none the words either side
fuse ("garage.Four"). Write `word.
word`. */
.lum-hd-br-xs{display:none}
@media (max-width:479.98px){.lum-hd-br-xs{display:inline}}
/* ---------------------------------------------------------------------
3 · INLINE-GLYPH CARD — the icon sits beside the title, not above it
The stacked glyph-over-title card is the single most recognisable
"an AI made this" layout on the web right now. Putting them on one row
costs nothing, saves a line of vertical space per card, and reads as a
decision. The body copy still spans the full width underneath.
--------------------------------------------------------------------- */
.lum-cap{background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-lg);padding:var(--space-6);
display:grid;grid-template-columns:auto 1fr;column-gap:0;row-gap:var(--space-3);
align-items:center;
transition:transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.lum-cap:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--border-2)}
/* the gap rides on the glyph, not the grid — otherwise a card with no
glyph indents its title 12px past its own body copy */
.lum-cap-glyph{grid-column:1;grid-row:1;width:32px;height:32px;color:var(--accent);
margin:0 var(--space-3) 0 0;
transition:transform var(--dur-base) var(--ease-bounce)}
.lum-cap:hover .lum-cap-glyph{transform:rotate(-8deg) scale(1.12)} /* the two-motion rule */
.lum-cap-title{grid-column:2;grid-row:1;align-self:center;
font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);
line-height:var(--leading-snug)}
.lum-cap>p,.lum-cap-body{grid-column:1/-1;grid-row:2;margin:0;color:var(--text-2)}
.lum-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
gap:var(--space-5)}
/* ---------------------------------------------------------------------
4 · ROTATING QUOTEBAND — .lum-quoteband--rotating
One testimonial at a time, on a clock you can see. The band locks its
own height to the tallest quote in the set at init, so nothing reflows
mid-rotation — the thing that makes most rotators feel cheap. The rail
is the clock: the change is announced, not sprung on you. Driver in
pages/lumina.js reads its content from a JS array (data-quotes).
--------------------------------------------------------------------- */
.lum-quoteband--rotating{position:relative;overflow:hidden}
.lum-quoteband--rotating blockquote,
.lum-quoteband--rotating .lum-quoteband-metric,
.lum-quoteband--rotating .lum-quoteband-label{
transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
will-change:opacity,transform}
.lum-quoteband--rotating .lum-quoteband-metric{transition-delay:50ms}
.lum-quoteband--rotating .lum-quoteband-label{transition-delay:90ms}
/* PRIVATE STATE, deliberately not .is-in / .is-out — see the house rule
at the top of this pack. Leaving travels one way; arriving comes from
the other, so the set reads as a strip moving past a window. */
.lum-quoteband--rotating.q-out blockquote,
.lum-quoteband--rotating.q-out .lum-quoteband-metric,
.lum-quoteband--rotating.q-out .lum-quoteband-label{
opacity:0;transform:translate(calc(var(--q-dx,9px) * var(--q-sign,1)),
calc(var(--q-dy,-13px) * var(--q-sign,1)))}
.lum-quoteband--rotating.q-from blockquote,
.lum-quoteband--rotating.q-from .lum-quoteband-metric,
.lum-quoteband--rotating.q-from .lum-quoteband-label{
opacity:0;transform:translate(calc(var(--q-dx,9px) * var(--q-sign,1) * -1),
calc(var(--q-dy,-13px) * var(--q-sign,1) * -1));
transition:none}
/* THE TIMER IS THE PICKER (v2.6.4, from the arshelps.com mobile review).
v2.6.3 shipped dots plus a full-width rail pinned to the bottom of the
band. On a phone that put the picker at x=0 while the quote, the metric
and the attribution all sat at the wrap's padding — the one element that
didn't line up with anything. Worse, the rail and the dots said the same
thing twice: one counted time, the other counted position.
One control now says both. A bar per quote: finished bars are full, the
live one fills over the dwell, the rest wait. It lives INSIDE
.lum-quoteband-proof, under the attribution, so it inherits the column's
left edge and can never drift from it again. It is also the same visual
language as the sub-nav underline and the button sweep — a thin accent
line filling from the left is now this system's way of saying "time". */
.lum-quoteband-segs{display:flex;gap:6px;padding-top:var(--space-3);margin:0}
.lum-quoteband-segs button{position:relative;flex:1 1 0;max-width:56px;height:22px;
padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* 22px tall, 2px drawn: the bar is thin, the target is a thumb */
.lum-quoteband-segs button::before,.lum-quoteband-segs button::after{content:"";
position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:1px}
.lum-quoteband-segs button::before{background:color-mix(in srgb,currentColor 16%,transparent)}
.lum-quoteband-segs button::after{background:var(--accent);transform-origin:left center;
transform:scaleX(var(--p,0));will-change:transform}
.lum-quoteband-segs button.is-past{--p:1}
.lum-quoteband-segs button:hover::before{background:color-mix(in srgb,currentColor 30%,transparent)}
.lum-quoteband-segs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
border-radius:2px}
/* DOTS — the variant, not the default. Past about six quotes the bars get
too short to read as a progress fill; that is the case dots still win.
Same markup, same driver, `--dots` on the band. */
.lum-quoteband-segs--dots{gap:7px}
.lum-quoteband-segs--dots button{flex:none;width:7px;height:22px;max-width:none}
.lum-quoteband-segs--dots button::before{left:0;right:0;height:7px;margin-top:-3.5px;
border-radius:50%;background:color-mix(in srgb,currentColor 26%,transparent)}
.lum-quoteband-segs--dots button::after{height:7px;margin-top:-3.5px;border-radius:50%;
transform:none;opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.lum-quoteband-segs--dots button.is-on::after{opacity:1}
.lum-quoteband-segs--dots button.is-past::after{opacity:0}
/* CHEVRONS — desktop only, and only while the pointer is over the band.
Parked in the gutter beside the 1080px wrap where there is dead space
anyway; clamped inward with max() so they never leave the viewport on a
narrow desktop window. Hidden entirely on touch, where the swipe below
is the better gesture and a floating button is just an obstacle. */
.lum-quoteband-arrow{position:absolute;top:50%;z-index:2;width:42px;height:42px;
margin-top:-21px;display:none;place-items:center;border-radius:50%;cursor:pointer;
border:1px solid color-mix(in srgb,currentColor 22%,transparent);
background:color-mix(in srgb,var(--bg) 80%,transparent);color:inherit;
opacity:0;transform:scale(.9);
transition:opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-bounce),
border-color var(--dur-fast),color var(--dur-fast)}
.lum-quoteband-arrow svg{width:18px;height:18px}
/* parked in the gutter OUTSIDE the 1080px wrap. There has to actually be a
gutter: 1080 wrap + 2×24 padding + 2×60 for the buttons = 1248. Below
that the max() fallback used to clamp them inward and they sat on top of
the quote. A control that overlaps the content it controls is worse than
no control, and the bars, the swipe and the arrow keys already cover it. */
.lum-quoteband-arrow--prev{left:calc((100% - 1080px) / 2 - 60px)}
.lum-quoteband-arrow--next{right:calc((100% - 1080px) / 2 - 60px)}
.lum-quoteband-arrow:hover{border-color:var(--accent);color:var(--accent)}
.lum-quoteband-arrow:active{transform:scale(.94)}
/* a keyboard user gets them unconditionally — hover is not a focus state */
.lum-quoteband-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
opacity:1;transform:none}
@media (hover:hover) and (min-width:1248px){
.lum-quoteband-arrow{display:grid}
.lum-quoteband--rotating:hover .lum-quoteband-arrow{opacity:1;transform:none}
}
/* touch: the band swipes. pan-y keeps the page scrolling normally through it,
so a vertical flick is never stolen by the carousel. */
.lum-quoteband--rotating{touch-action:pan-y}
@media (max-width:767.98px){
.lum-quoteband-segs{padding-top:var(--space-2)}
}
/* ---------------------------------------------------------------------
4b · THE TALL FOOTER — .lum-footer--tall
The one-row footer above is right for a product page with four links.
A services business has more to say down there, and the moment it does,
three stacked lines of small type is what you get by default — which is
what arshelps.com had, and it read as a dumping ground.
This is the masthead version: who you are, where to go, and how to reach
a person, as three columns that collapse to one. The rules that matter
are the mobile ones, because a footer is the part of a site people
actually meet on a phone:
· the nav goes to TWO columns, not one long ladder. Seven links stacked
is a scroll; seven links in two columns is a glance.
· a contact detail spelled two ways collapses to one. On a desktop
"1.800.ARS.JAVA" over "1.800.277.5282" is helpful. On a phone the tap
IS the number, so the digits are noise — swap them for a line that
says what the tap does. That is what .lum-wide-only / .lum-narrow-only
are for, and the footer is where they earn their keep.
--------------------------------------------------------------------- */
.lum-footer--tall .wrap{display:block}
.lum-foot{display:grid;grid-template-columns:1.4fr 1fr 1.3fr;gap:var(--space-10);
align-items:start}
.lum-foot-col h4{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;
color:var(--text-3);font-weight:500;margin-bottom:var(--space-4)}
.lum-foot-blurb{color:var(--text-2);font-size:var(--text-sm);max-width:34ch;
margin-top:var(--space-4);text-wrap:pretty}
.lum-foot-nav{display:flex;flex-direction:column;gap:var(--space-2)}
.lum-foot-nav a{position:relative;width:fit-content;color:var(--text-2);
text-decoration:none;font-size:var(--text-sm);
transition:color var(--dur-fast) var(--ease-out)}
.lum-foot-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
background:var(--accent);transform:scaleX(0);transform-origin:left;
transition:transform var(--dur-base) var(--ease-bounce)}
.lum-foot-nav a:hover{color:var(--text)}
@media (hover:hover){.lum-foot-nav a:hover::after{transform:scaleX(1)}}
/* reach: every line does something. the phone dials, the address opens a
map, the email goes wherever you send it. a footer contact block that is
just text is a screenshot of a contact block. */
.lum-foot-reach{display:flex;flex-direction:column;gap:var(--space-3)}
.lum-foot-reach a{display:inline-flex;align-items:center;gap:10px;width:fit-content;
font-family:var(--font-display);font-weight:650;font-size:var(--text-lg);
color:var(--text);text-decoration:none;
transition:color var(--dur-fast) var(--ease-out)}
.lum-foot-reach a:hover{color:var(--accent)}
.lum-foot-reach a svg{width:15px;height:15px;flex:none;color:var(--accent);
transition:transform var(--dur-base) var(--ease-bounce)}
.lum-foot-reach a:hover svg{transform:translateX(2px)}
.lum-foot-reach small{display:block;font-size:var(--text-xs);color:var(--text-3);
line-height:1.5}
.lum-foot-base{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-8);
margin-top:var(--space-12);padding-top:var(--space-6);
border-top:1px solid var(--border);color:var(--text-3);font-size:var(--text-xs)}
@media (max-width:767.98px){
.lum-foot{grid-template-columns:1fr;gap:var(--space-10)}
/* two columns, not a seven-rung ladder */
.lum-foot-nav{display:grid;grid-template-columns:1fr 1fr;
column-gap:var(--space-6);row-gap:var(--space-2)}
.lum-foot-base{margin-top:var(--space-10)}
}
/* WIDE-ONLY / NARROW-ONLY — one fact, two spellings, one shown.
!important is deliberate and this is the case utilities exist for: these
have to beat whatever component rule set the element's display. In the
build this came from, `.ars-foot-reach small{display:block}` (0,1,1)
silently out-ranked the hiding rule (0,1,0) and both spellings showed on
the phone. A utility that loses to a component rule is not a utility. */
.lum-wide-only{display:none!important}
@media (min-width:768px){
.lum-wide-only{display:revert!important}
.lum-narrow-only{display:none!important}
}
/* ---------------------------------------------------------------------
5 · PEEK — a card that rides the pointer through a dense list
A long roster is a wall of names. Hovering a row should show you what
the row IS without making you click. The card lerps toward the cursor
rather than sticking to it — it follows you, it doesn't stalk you.
Sibling of the filmstrip's riding chevron chip (v2.6.1).
Pointer devices only; transform-only, so it never touches layout.
--------------------------------------------------------------------- */
.lum-peek-host{position:relative}
.lum-peek{position:fixed;left:0;top:0;z-index:70;margin:0;width:232px;
pointer-events:none;opacity:0;
transform:translate3d(var(--px,0),var(--py,0),0) scale(.94);
transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
background:var(--surface);border:1px solid var(--border-2);
border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.lum-peek.pk-live{opacity:1;transform:translate3d(var(--px,0),var(--py,0),0) scale(1)}
.lum-peek img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.lum-peek.no-media img{display:none}
.lum-peek figcaption{padding:var(--space-3) var(--space-4) var(--space-4)}
.lum-peek figcaption b{display:block;font-family:var(--font-display);font-weight:700;
font-size:var(--text-base)}
.lum-peek figcaption span{display:block;margin-top:3px;font-size:var(--text-xs);
color:var(--text-2);line-height:1.45}
@media (hover:none){.lum-peek{display:none}}
/* ---------------------------------------------------------------------
6 · TIMELINE — the line draws itself as you read down it
Scroll-driven, so it is tied to the reader's position rather than to a
clock: the line is exactly as far along as they are. Pure CSS via
animation-timeline: view() — zero JS, zero scroll listeners, and it
degrades to a static line where the feature is missing.
--------------------------------------------------------------------- */
.lum-timeline{position:relative;display:grid;gap:var(--space-10);
padding-left:var(--space-8);max-width:720px;margin:0 auto}
.lum-timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;
background:linear-gradient(180deg,transparent,var(--border-2) 12%,var(--border-2) 88%,transparent)}
.lum-era{position:relative}
.lum-era::before{content:"";position:absolute;left:calc(-1 * var(--space-8) + 2px);top:9px;
width:9px;height:9px;border-radius:50%;background:var(--accent);
box-shadow:0 0 0 4px var(--bg),0 0 14px var(--accent-glow)}
.lum-era-marker{font-size:var(--text-xs);letter-spacing:var(--tracking-eyebrow,.2em);
text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-2)}
.lum-era-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-2xl);
letter-spacing:var(--tracking-display);line-height:var(--leading-snug);
margin-bottom:var(--space-3)}
.lum-era p{color:var(--text-2);line-height:var(--leading-body);margin:0}
@supports (animation-timeline: view()){
.lum-timeline::before{transform-origin:top center;
animation:lum-draw linear both;animation-timeline:view();
animation-range:entry 30% exit 70%}
@keyframes lum-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
/* ---------------------------------------------------------------------
7 · TRACK — a scroll-driven progress rail on a card
"This took 18 days" is a number. A track that fills as the card comes
up the screen is the same fact, felt. Set --n (the number of steps) on
the card; each step declares its own --k. Registered custom property,
so --day can actually be animated rather than snapping.
--------------------------------------------------------------------- */
@property --day{syntax:'
';inherits:true;initial-value:0}
.lum-track{--day:0}
.lum-track-rail{position:relative;height:3px;border-radius:2px;
background:color-mix(in srgb,var(--border) 80%,transparent);overflow:hidden}
.lum-track-fill{position:absolute;inset:0;transform-origin:left;
transform:scaleX(calc(var(--day) / var(--n,1)));background:var(--accent)}
.lum-track-ticks{display:flex;justify-content:space-between;margin-top:6px;
font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;
/* --text-2, not --text-3: the ticks carry the actual numbers, so they are
information rather than a label. Measured 4.6:1 light / 6.2:1 dark. */
color:var(--text-2)}
/* each step lights as the fill passes it — a step is "on" once --day
reaches its --k, and the clamp gives it a soft edge rather than a flip */
.lum-track-steps li{--on:clamp(0,calc((var(--day) - var(--k) + 1) * 2),1);
position:relative;overflow:hidden;isolation:isolate;list-style:none;
color:color-mix(in srgb,var(--text-2),var(--bg) calc(var(--on) * 100%))}
.lum-track-steps li::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
background:var(--text);opacity:var(--on);z-index:-1}
@supports (animation-timeline: view()){
.lum-track{animation:lum-count linear both;animation-timeline:view();
animation-range:entry 22% cover 62%}
@keyframes lum-count{from{--day:0}to{--day:var(--n)}}
}
/* ---------------------------------------------------------------------
8 · BOARD — a live operations board
For service-industry clients, the most persuasive thing on the page is
watching the work get done. The board plays one shift in a few seconds:
rows advance along their tracks and close, on their own clock, only
while on screen. It is a dark panel in BOTH themes on purpose — an
operations screen is a dark screen, and the constant reads as hardware
rather than as a theme bug.
PROMOTED, AND IT MATTERS: the board carries a full-panel radial
gradient. Unpromoted, that gradient re-rasterised on every scroll
frame — 1-5% dropped frames, versus 0-0.8% promoted. Third time this
exact lesson has cost us a session. Gradient on a moving layer? Promote
the layer.
--------------------------------------------------------------------- */
.lum-board{--board-bg:#04101F;--board-ink:#F1F5FB;--board-dim:#9DB2D0;
background:var(--board-bg);color:var(--board-ink);
border:1px solid rgba(157,178,208,.18);border-radius:var(--radius-xl);
padding:var(--space-8);position:relative;overflow:hidden;
transform:translateZ(0);will-change:transform}
.lum-board::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 90% at 12% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%)}
.lum-board-head{display:flex;justify-content:space-between;align-items:baseline;
gap:var(--space-4);margin-bottom:var(--space-6);position:relative}
.lum-board-title{display:flex;align-items:center;gap:8px;font-size:var(--text-xs);
letter-spacing:.18em;text-transform:uppercase;color:var(--board-dim)}
.lum-board-title i{width:6px;height:6px;border-radius:50%;background:var(--accent);
animation:lum-pulse 2.6s var(--ease-out) infinite;will-change:transform,opacity}
.lum-board-clock{font-family:var(--font-display);font-weight:800;
font-size:var(--text-3xl);line-height:1;font-variant-numeric:tabular-nums}
.lum-board-clock small{font-size:var(--text-xs);font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--board-dim);margin-left:6px}
.lum-board-rows{display:grid;gap:var(--space-3);position:relative}
.lum-board-row{display:grid;grid-template-columns:minmax(150px,1fr) 2fr 118px;
align-items:center;gap:var(--space-4);padding:var(--space-3) 0;
border-top:1px solid rgba(157,178,208,.12)}
.lum-board-label b{display:block;font-family:var(--font-display);font-weight:700;
font-size:var(--text-base)}
.lum-board-label small{display:block;font-size:var(--text-xs);color:var(--board-dim);
letter-spacing:.04em;margin-top:2px}
.lum-board-track{position:relative;height:22px;container-type:inline-size}
.lum-board-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
background:rgba(157,178,208,.22)}
.lum-board-unit{position:absolute;top:50%;left:0;width:26px;height:14px;
margin:-7px 0 0 -2px;border-radius:3px;background:var(--accent);
will-change:transform;transition:background var(--dur-base) var(--ease-out)}
.lum-board-unit::after{content:"";position:absolute;right:-1px;top:3px;
width:6px;height:6px;border-radius:50%;background:var(--board-bg)}
.lum-board-row.is-done .lum-board-unit{background:var(--ok)}
.lum-board-row.is-done .lum-board-unit::after{background:var(--board-ink)}
.lum-board-status{display:flex;align-items:center;gap:7px;font-size:var(--text-xs);
letter-spacing:.14em;text-transform:uppercase;color:var(--board-dim)}
.lum-board-status::before{content:"";width:7px;height:7px;border-radius:50%;
background:currentColor;flex:none}
.lum-board-row.is-done .lum-board-status{color:var(--ok)}
@media (max-width:767.98px){
.lum-board{padding:var(--space-5)}
.lum-board-row{grid-template-columns:1fr auto;gap:var(--space-2) var(--space-3)}
.lum-board-track{grid-column:1/-1;order:3}
}
/* 8b · LIVE PULSE — the "this is happening now" dot. Shared by the board,
the hours chip, and anything that claims to be live. */
.lum-live{display:inline-flex;align-items:center;gap:6px}
.lum-live i{width:6px;height:6px;border-radius:50%;background:var(--accent);
animation:lum-pulse 2.6s var(--ease-out) infinite}
@keyframes lum-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
/* ---------------------------------------------------------------------
9 · HOURS — the site knows what time it is where the client is
Not a decoration: a visitor at 9pm on a Sunday needs to know whether
anyone will answer. Published hours live in the driver's config; the
chip says which side of them you're standing on right now, in the
CLIENT's timezone, not the visitor's.
Status colours, never the accent — this is state, per the colour law.
--------------------------------------------------------------------- */
.lum-hours{display:inline-flex;align-items:center;gap:7px;
font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;
color:var(--text-3)}
.lum-hours i{width:6px;height:6px;border-radius:50%;background:var(--text-3);flex:none}
.lum-hours.is-open{color:var(--ok)}
.lum-hours.is-open i{background:var(--ok);animation:lum-pulse 2.6s var(--ease-out) infinite}
.lum-hours.is-closed{color:var(--warn)}
.lum-hours.is-closed i{background:var(--warn)}
/* ---------------------------------------------------------------------
10 · WIPE — the page transition cut from the brand's own geometry
Most page transitions are a crossfade, which is to say nothing. This
one is a panel that sweeps across at an angle YOU set from the client's
mark — the diagonal in their logo, the rake of their wordmark — so the
transition is only theirs. Set --wipe-angle in the skin; that single
line is the whole per-client surface.
Three beats: COVER (the panel arrives and covers), HOLD (the new page
is swapped in behind it, invisibly), REVEAL (the panel leaves the other
side). The direction follows the nav order, so going forward wipes one
way and going back wipes the other — that's what makes it read as
space rather than as an effect.
THE TRAP, and it cost us three rounds: the incoming page must NOT also
run its own entrance animation. It is already revealed — by the wipe.
Left in, you get a perfect wipe followed by a second fade, which reads
as a glitch. The .lum-nointro class below is the fix, and it goes on
the PAGE ELEMENT, not its children: the fade we hunted for two hours
was on the container while every child reported opacity 1.
--------------------------------------------------------------------- */
.lum-wipe{position:fixed;z-index:90;pointer-events:none;
top:-60vh;left:-60vw;width:220vw;height:220vh;
transform-origin:50% 50%;will-change:transform;
background:linear-gradient(90deg,
var(--accent) 0 33.33%,
var(--wipe-mid,var(--bg)) 33.33% 66.66%,
var(--wipe-far,var(--text)) 66.66% 100%)}
html.lum-wiping{overflow:hidden}
/* the page arriving under a wipe has already made its entrance */
.lum-nointro{animation:none!important}
@media (prefers-reduced-motion:reduce){
.lum-wipe{display:none}
}
/* --- reduced motion: every new animation in this pack, stilled --- */
@media (prefers-reduced-motion:reduce){
.lum-pin::before{animation:none;opacity:1;box-shadow:none}
.lum-live i,.lum-board-title i,.lum-hours.is-open i{animation:none;opacity:.9}
.lum-timeline::before{animation:none!important;transform:none}
.lum-track{animation:none!important;--day:var(--n)}
.lum-quoteband--rotating blockquote,
.lum-quoteband--rotating .lum-quoteband-metric,
.lum-quoteband--rotating .lum-quoteband-label{
transition:none;opacity:1!important;transform:none!important}
.lum-quoteband-segs button::after{transition:none}
.lum-quoteband-arrow{transition:none}
.lum-peek{transition:none}
.lum-cap:hover,.lum-cap:hover .lum-cap-glyph{transform:none}
.lum-subnav a::after{transition:none}
}
/* =====================================================================
LUMINA PROOF PAGES — shared page glue (v2.6.0)
Only chrome that composes shipped pieces: page rhythm, the round
theme toggle, and small layout wrappers. NO new component patterns —
if a page needs one, that's a Phase-5 finding and it goes to canon.
===================================================================== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.section{padding:var(--space-16) 0}
.section--tight{padding:var(--space-10) 0}
.sec-head{max-width:640px;margin-bottom:var(--space-10)}
.sec-title{font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);
line-height:var(--leading-tight);letter-spacing:var(--tracking-display)}
.sec-title em{font-style:italic;color:var(--accent)}
.sec-sub{color:var(--text-2);line-height:var(--leading-body);margin-top:var(--space-3)}
.toggle{flex:none;width:42px;height:42px;padding:0;display:grid;place-items:center;
border:1px solid var(--border-2);background:var(--surface);color:var(--text);
border-radius:var(--radius-pill);cursor:pointer;font-size:17px;line-height:1;
transition:transform var(--dur-base) var(--ease-bounce),background var(--dur-fast)}
.toggle:hover{transform:rotate(-14deg) scale(1.08);background:var(--surface-2)}
.toggle:active{transform:scale(.88)}
.toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.toggle,.toggle:hover,.toggle:active{transition:none;transform:none}}
/* simple nav links for the proof pages (flyout mega-nav is a showcase demo) */
.nav-simple{display:flex;gap:2px;margin-left:var(--space-2)}
.nav-simple a{color:var(--text-2);text-decoration:none;font-size:var(--text-sm);
padding:8px 12px;border-radius:var(--radius-sm);
transition:background var(--dur-fast),color var(--dur-fast)}
.nav-simple a:hover{background:var(--surface-2);color:var(--text)}
@media (max-width:767.98px){.nav-simple{display:none}}
/* =====================================================================
REWINDYOURTIME.COM — CLIENT SKIN · v2.0 · 2026-09-09
Loads AFTER lumina-tokens / colors-type / canonical / page glue.
THE BRIEF (Wind, 2026-09-09): classy vintage meeting modern posh. The
feeling of being in the hands of a masterful Hollywood documentarian,
not a vintage shop. The audience is older, wealthy, New Jersey. So:
· one theme, no toggle. Warm magazine paper for reading, true-black
cinema bands for the moments that should feel like a screening.
· bigger, calmer type. 17.5px body, 1.7 leading, darker secondary ink.
· no pills, no card borders. Hairlines, air, and photography do the
structuring. Text never touches an edge because there are no edges.
· movement everywhere, all of it slow: Ken Burns on every photograph
(the ARS-corrected linear drift), video in the big moments, a path
that draws itself as you scroll, numbers that count, quotes that turn.
· not one em dash anywhere. The build fails if it finds one.
Brand colours are CVP's own: true black and the mint sampled from the
play-triangle mark (#B4F7DD -> #6FDCB6 -> #4B9E96; #7ECCC5 on chrome).
===================================================================== */
:root{
--mint-50:#EAFBF4; --mint-100:#D2F7E8; --mint-200:#B4F7DD; --mint-300:#8FEBCB;
--mint-400:#6FDCB6; --mint-500:#7ECCC5; --mint-600:#4B9E96; --mint-700:#2F7A73;
--mint-800:#1D5A55; --mint-900:#0F3B38;
--mark-a:#C6FBE6; --mark-b:#7FE4C2; --mark-c:#3E8F87;
--font-display:'Fraunces',Georgia,'Times New Roman',serif;
--font-sans:'InterVar','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--tracking-display:-.012em;
--leading-tight:1.04;
--leading-body:1.7;
/* type scale, lifted one step for the audience */
--text-base:1.09375rem; /* 17.5 */
--text-lg:1.25rem; /* 20 */
--text-xl:1.5rem; /* 24 */
--text-2xl:1.875rem; /* 30 */
--text-3xl:2.625rem; /* 42 */
--text-4xl:3.5rem;
--text-5xl:4.75rem;
/* the mint has two jobs and no single value clears both: --accent is TEXT
mint (dark on paper, light on black); --accent-fill is the BUTTON plane,
the same #7ECCC5 with near-black ink in both worlds. That button is the
brand signature and never changes with the surface. */
--accent-fill:#7ECCC5;
--accent-ink:#04100E;
--accent-contrast:#04100E;
/* the motion dial (Lumina Motion II). Calm for this audience. */
--m:.7; --t:1.15;
--dur-fast:calc(120ms*var(--t)); --dur-base:calc(220ms*var(--t)); --dur-slow:calc(420ms*var(--t));
}
/* ===================== PAPER (the page) ===================== */
:root,[data-theme="light"]{
--bg:#F6F2EA; /* warm magazine stock, never #fff */
--surface:#FDFBF7;
--surface-2:#EFE9DE;
--surface-3:#E4DCCE;
--border:rgba(18,26,24,.11);
--border-2:rgba(18,26,24,.20);
--text:#121A18;
--text-2:#414F4C; /* darker than canon: older eyes */
--text-3:#5E6D69;
--accent:#1F6D66; /* text mint on paper, 5.6:1 */
--accent-50:#E7F3F1;
--accent-200:#9FD3CD;
--accent-600:#1A5B55;
--accent-700:#154A45;
--accent-glow:rgba(31,109,102,.18);
--glow:radial-gradient(60% 60% at 50% 0%,var(--accent-glow),transparent 70%);
--shadow-md:0 8px 26px rgba(30,34,30,.10);
--shadow-lg:0 26px 60px rgba(30,34,30,.14);
color-scheme:light;
}
/* ===================== CINEMA (the bands) ===================== */
[data-theme="dark"]{
--bg:#050807;
--surface:#0C1110;
--surface-2:#141B1A;
--surface-3:#1D2725;
--border:rgba(126,204,197,.12);
--border-2:rgba(126,204,197,.24);
--text:#F3F7F5;
--text-2:#B6C3BF;
--text-3:#8C9B97;
--accent:#7ECCC5;
--accent-50:var(--mint-50);
--accent-200:var(--mint-200);
--accent-600:var(--mint-600);
--accent-700:var(--mint-700);
--accent-glow:rgba(126,204,197,.30);
--glow:radial-gradient(60% 60% at 50% 0%,var(--accent-glow),transparent 70%);
--shadow-md:0 10px 30px rgba(0,0,0,.6);
--shadow-lg:0 30px 70px rgba(0,0,0,.7);
color-scheme:dark;
}
/* a band is a section that carries its own theme; it paints its own ground */
.band{background:var(--bg);color:var(--text)}
/* =====================================================================
TYPE
===================================================================== */
html{font-size:100%}
body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-body);
background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;
font-feature-settings:"cv11" 1}
h1,h2,h3,.lum-hero-title,.sec-title,.lum-feature-title,.lum-ctapanel-title,
.lum-quoteband blockquote,.lum-stat-num,.ryt-fig{font-family:var(--font-display);
font-optical-sizing:auto;letter-spacing:var(--tracking-display);font-weight:520}
.lum-hero-title{font-weight:500}
.sec-title{font-size:clamp(2rem,3.6vw,var(--text-3xl));line-height:1.06;font-weight:500;
text-wrap:balance}
.sec-title em,.lum-hero-title em,.ryt-h em{font-style:italic;font-weight:400;color:var(--accent)}
h3{font-size:var(--text-xl);line-height:1.2;font-weight:540}
.sec-head{max-width:720px;margin-bottom:var(--space-12)}
.sec-sub{font-size:var(--text-lg);color:var(--text-2);max-width:56ch;margin-top:var(--space-4)}
.ryt-prose p{color:var(--text-2);max-width:60ch}
.ryt-prose p+p{margin-top:var(--space-5)}
.ryt-prose strong{color:var(--text);font-weight:600}
.ryt-lede{font-family:var(--font-display);font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.5;
color:var(--text);max-width:44ch;font-weight:400}
.ryt-lede em{font-style:italic;color:var(--accent)}
.ryt-note{font-size:var(--text-sm);color:var(--text-3);line-height:1.6}
.muted{color:var(--text-2)}
/* EYEBROW: no pill. A short mint rule and tracked small caps. */
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:12px;border:0;background:none;
padding:0;margin:0 0 var(--space-5);font-family:var(--font-sans);font-size:.78rem;
font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
border-radius:0}
.eyebrow::before,.kicker::before{content:"";width:28px;height:1.5px;background:var(--accent);
transform-origin:left center;transform:scaleX(0);
transition:transform calc(var(--dur-slow)*1.4) var(--ease-out) .12s}
.is-in .eyebrow::before,.is-in .kicker::before,.eyebrow.is-in::before,
.ryt-hero .eyebrow::before,.ryt-pagehead .eyebrow::before{transform:none}
.eyebrow .dot{display:none}
.kicker{margin-bottom:var(--space-3)}
.kicker::before{width:18px}
/* buttons ride the mint plane, always */
.btn{font-weight:600;letter-spacing:.005em;font-size:var(--text-base);padding:14px 22px;
border-radius:var(--radius-pill);transition:transform var(--dur-base) var(--ease-out),
background var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-base)}
.btn-primary{background:var(--accent-fill);color:var(--accent-ink);border-color:transparent}
.btn-primary:hover{background:var(--mint-300);color:var(--accent-ink);transform:translateY(-2px);
box-shadow:0 10px 24px -8px rgba(126,204,197,.6)}
.btn-ghost{border:1px solid var(--border-2);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--text);transform:translateY(-2px)}
[data-theme="dark"] .btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
[data-theme="dark"] .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.lum-link{color:var(--accent);text-decoration:none;background:
linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;
transition:background-size var(--dur-base) var(--ease-out)}
.lum-link:hover{background-size:100% 1px}
/* stagger: children of a revealed block arrive one after another */
.lum-reveal>[style*="--i"]{transition-delay:calc(var(--i)*90ms*var(--t))}
.ryt-stagger>*{opacity:0;transform:translateY(14px);
transition:opacity calc(var(--dur-slow)*1.5) var(--ease-out),transform calc(var(--dur-slow)*1.5) var(--ease-out)}
.ryt-stagger.is-in>*{opacity:1;transform:none}
.ryt-stagger.is-in>*:nth-child(1){transition-delay:0ms}
.ryt-stagger.is-in>*:nth-child(2){transition-delay:calc(90ms*var(--t))}
.ryt-stagger.is-in>*:nth-child(3){transition-delay:calc(180ms*var(--t))}
.ryt-stagger.is-in>*:nth-child(4){transition-delay:calc(270ms*var(--t))}
.ryt-stagger.is-in>*:nth-child(5){transition-delay:calc(360ms*var(--t))}
.ryt-stagger.is-in>*:nth-child(6){transition-delay:calc(450ms*var(--t))}
.ryt-stagger.is-in>*:nth-child(7){transition-delay:calc(540ms*var(--t))}
/* =====================================================================
CHROME — bar, lockup, nav, mobile nav. No theme toggle.
===================================================================== */
.bar{background:color-mix(in srgb,var(--bg) 82%,transparent);
backdrop-filter:saturate(1.3) blur(16px);border-bottom:1px solid transparent;
transition:background var(--dur-base),border-color var(--dur-base)}
.bar.scrolled{border-bottom-color:var(--border);
background:color-mix(in srgb,var(--bg) 94%,transparent)}
/* over the cinema hero the bar is glass on black */
html.on-dark .bar{background:rgba(5,8,7,.56);color:#fff}
html.on-dark .bar.scrolled{background:rgba(5,8,7,.78);border-bottom-color:rgba(255,255,255,.08)}
html.on-dark .nav-simple a{color:rgba(255,255,255,.88)}
html.on-dark .nav-simple a:hover{color:#fff;background:rgba(255,255,255,.08)}
html.on-dark .nav-simple a.is-here{color:var(--mint-500)}
html.on-dark .bar .ryt-wordmark{color:#fff}
html.on-dark .bar .ryt-wordmark i{color:var(--mint-500)}
html.on-dark .bar .ryt-tagline{color:rgba(255,255,255,.66)}
html.on-dark .bar .ryt-tagline i{color:var(--mint-500)}
html.on-dark .bar .ryt-burger{border-color:rgba(255,255,255,.3)}
html.on-dark .bar .ryt-burger span{background:#fff}
.bar-in{display:flex;align-items:center;gap:var(--space-5);width:100%;min-height:64px}
.bar-in .btn{white-space:nowrap;padding:11px 18px;font-size:var(--text-sm)}
.ryt-brand{display:flex;align-items:center;gap:12px;text-decoration:none;
color:var(--text);margin-right:auto;cursor:pointer}
.ryt-mark{width:32px;height:31px;flex:none;display:block;
transition:transform calc(var(--dur-slow)*1.2) var(--ease-bounce)}
.ryt-brand:hover .ryt-mark{transform:translateX(3px) scale(1.06)}
.ryt-brand-type{display:flex;flex-direction:column;gap:2px;line-height:1}
.ryt-wordmark{font-family:var(--font-sans);font-weight:600;font-size:15.5px;
letter-spacing:.06em;color:var(--text);white-space:nowrap}
.ryt-wordmark i{font-style:normal;color:var(--accent)}
.ryt-tagline{font-family:var(--font-display);font-style:italic;font-size:13px;
color:var(--text-2);white-space:nowrap}
.ryt-tagline i{font-style:italic;color:var(--accent)}
.ryt-tagline a{color:inherit;text-decoration:none}
.ryt-tagline a:hover{text-decoration:underline}
.nav-simple{gap:2px;margin-left:0}
.nav-simple a{font-size:15px;font-weight:500;color:var(--text-2);padding:9px 13px;
border-radius:var(--radius-pill);white-space:nowrap;position:relative}
.nav-simple a:hover{color:var(--text);background:var(--surface-2)}
.nav-simple a.is-here{color:var(--accent);background:transparent}
.nav-simple a.is-here::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;
height:1.5px;background:currentColor;border-radius:1px}
/* route sweep (from the ARS motion kit): a mint hairline crosses the bar on navigation */
.bar::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
background:linear-gradient(90deg,transparent,var(--mint-500),transparent);
transform:translateX(-100%);opacity:0;pointer-events:none}
.bar.is-sweeping::after{animation:ryt-sweep .9s var(--ease-out)}
@keyframes ryt-sweep{0%{transform:translateX(-100%);opacity:1}100%{transform:translateX(100%);opacity:0}}
/* Native links retain the approved CTA design and keyboard affordances. */
a.btn,a.ryt-svc{text-decoration:none}
a.ryt-svc{display:block}
.ryt-skip{position:fixed;top:12px;left:16px;z-index:9999;padding:12px 20px;background:#fff;color:#142d29;border-radius:12px;transform:translateY(-160%)}
.ryt-skip:focus{transform:none}
:focus-visible{outline:3px solid #267265;outline-offset:5px}
[tabindex="-1"]:focus{outline:none}
.ryt-form-status{margin-top:20px;padding:16px 20px;border-left:3px solid #267265;background:#edf5f0;color:#173e33;border-radius:0 10px 10px 0}
.ryt-form-status.is-error{background:#fff1eb;border-color:#9c3d21;color:#71311d}
.ryt-form-status[hidden]{display:none}
.formgrid button:disabled{cursor:wait;opacity:.65}
.ryt-utility{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:24px;padding-block:64px;max-width:900px}
.ryt-utility h1{font-size:clamp(2.8rem,7vw,5rem);line-height:1.05}
.ryt-utility p{font-size:1.15rem;max-width:46ch;line-height:1.7}
main>.page{display:none}
main>.page.is-live{display:block;animation:ryt-page-in calc(var(--dur-slow)*1.4) var(--ease-out) both}
@keyframes ryt-page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ryt-burger{display:none;width:42px;height:42px;border:1px solid var(--border-2);
border-radius:var(--radius-pill);background:transparent;cursor:pointer;
align-items:center;justify-content:center;flex-direction:column;gap:5px;flex:none}
.ryt-burger span{display:block;width:16px;height:1.5px;background:var(--text);border-radius:2px;
transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast)}
.ryt-burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.ryt-burger.is-open span:nth-child(2){opacity:0}
.ryt-burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.ryt-mobnav{position:fixed;inset:0;z-index:240;display:none;flex-direction:column;
justify-content:safe center;padding:96px var(--space-8) var(--space-10);gap:4px;
background:#050807;color:#fff}
.ryt-mobnav.is-open{display:flex}
.ryt-mobnav a{padding:14px 0;color:#fff;text-decoration:none;font-family:var(--font-display);
font-size:clamp(1.6rem,7vw,2.2rem);font-weight:450;line-height:1.1;
border-bottom:1px solid rgba(255,255,255,.1)}
.ryt-mobnav a.is-here{color:var(--mint-500)}
.ryt-mobnav .ryt-mob-cvp{font-family:var(--font-sans);font-size:var(--text-sm);
color:rgba(255,255,255,.6);border:0;padding-top:var(--space-6)}
.ryt-mobnav .btn{margin-top:var(--space-6);align-self:flex-start}
@media(max-width:1080px){
.ryt-burger{display:flex;position:relative;z-index:250}
.nav-simple{display:none}
.bar-in>.btn-primary{display:none}
html.menu-open .bar{background:transparent;border-color:transparent}
html.menu-open .ryt-burger{border-color:rgba(255,255,255,.35)}
html.menu-open .ryt-burger span{background:#fff}
html.menu-open .ryt-brand{position:relative;z-index:250}
html.menu-open .ryt-wordmark,html.menu-open .ryt-tagline{color:#fff}
}
@media(max-width:560px){.ryt-tagline{display:none}}
/* =====================================================================
MEDIA — Ken Burns corrected (ARS), the house grade, honest fallbacks
===================================================================== */
/* the house grade: every photograph, whatever its source, gets the same
slightly quiet, slightly warm treatment so stock reads as one shoot */
.lum-media>img,.ryt-video video{filter:saturate(.9) contrast(1.03) brightness(.98)}
.lum-media{background:linear-gradient(135deg,var(--surface-2),var(--surface-3));border:0;
border-radius:var(--radius-md)}
.lum-media--bleed{border-radius:0}
.lum-media.is-error{border:0;background:
radial-gradient(80% 80% at 30% 20%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),
linear-gradient(135deg,var(--surface-2),var(--surface))}
.lum-media-fallback{color:var(--text-3);gap:var(--space-1)}
.lum-media-fallback .fi{color:var(--accent);opacity:.9;font-size:26px}
.lum-media.is-loading{background:
linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%) 0 0/300% 100%;
animation:ryt-shim 1.4s linear infinite}
@keyframes ryt-shim{to{background-position:-300% 0}}
.lum-media>svg.ryt-slot{width:100%;height:100%;display:block}
.ryt-slot-tag{position:absolute;left:12px;bottom:12px;z-index:3;font-size:10px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(6px);
padding:5px 9px;border-radius:var(--radius-pill);border:1px solid var(--border-2)}
/* KEN BURNS, CORRECTED (lifted from the ARS build).
Canon: 9s on an expo-out, which lunges then crawls, and will-change on
every frame forever. Here: 3s LINEAR to 1.06 (2%/s, constant velocity,
which is what a Ken Burns move IS), a 2.6s gentle return so the turn is
continuous, promotion only on hover, and the effect stands down while
the page is scrolling so a stationary cursor cannot start six drifts. */
.lum-media--kenburns>img,.lum-media--kenburns>svg{will-change:auto;
transition:transform 2.6s cubic-bezier(.4,0,.25,1),filter 2.6s cubic-bezier(.4,0,.25,1)}
.lum-media--kenburns:hover>img,.lum-media--kenburns:hover>svg,
.lum-figure:hover .lum-media--kenburns>img,.ryt-svc:hover .lum-media--kenburns>img,
.ryt-tile:hover .lum-media--kenburns>img{
will-change:transform;transition:transform 3s linear,filter 3s linear;
transform:scale(1.06) translate(var(--kb-x,1.1%),var(--kb-y,-.7%));
filter:saturate(1) contrast(1.03)}
html.is-scrolling .lum-media--kenburns>img{transform:none;transition:none}
/* ambient drift: frames marked --drift move on their own, slowly, while in view */
.lum-media--drift>img{animation:ryt-drift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes ryt-drift{from{transform:scale(1.04) translate(-.8%,.5%)}to{transform:scale(1.1) translate(.9%,-.7%)}}
/* =====================================================================
VIDEO — background film in the big moments
Autoplays muted, inline, looping; pauses when out of view (JS); poster
first, so the frame is never black; under reduced-motion the poster IS
the frame. Every video is a swap slot: CVP shoots the real ones.
===================================================================== */
.ryt-video{position:absolute;inset:0;overflow:hidden;background:#000}
.ryt-video video,.ryt-video img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 45%}
.ryt-video video{opacity:0;transition:opacity 1.6s ease}
.ryt-video.is-playing video{opacity:1}
.ryt-grain{position:absolute;inset:0;pointer-events:none;opacity:.42;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E")}
.ryt-scrim{position:absolute;inset:0;pointer-events:none}
.ryt-scrim--hero{background:
linear-gradient(to top,rgba(0,0,0,.96) 0%,rgba(0,0,0,.78) 24%,rgba(0,0,0,.34) 58%,rgba(0,0,0,.42) 100%),
radial-gradient(110% 80% at 18% 88%,rgba(0,0,0,.7),transparent 66%)}
.ryt-scrim--band{background:
linear-gradient(90deg,rgba(5,8,7,.92) 0%,rgba(5,8,7,.78) 42%,rgba(5,8,7,.42) 100%)}
.ryt-scrim--soft{background:linear-gradient(to top,rgba(5,8,7,.9),rgba(5,8,7,.5) 55%,rgba(5,8,7,.62))}
.ryt-vidtag{position:absolute;right:18px;bottom:16px;z-index:4;font-size:10px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);
border:1px solid rgba(255,255,255,.22);padding:5px 9px;border-radius:var(--radius-pill);
backdrop-filter:blur(6px)}
/* =====================================================================
HERO — the screening room
===================================================================== */
.ryt-hero{position:relative;min-height:clamp(620px,92vh,900px);display:flex;align-items:flex-end;
color:#fff;isolation:isolate;overflow:hidden;background:#050807}
.ryt-hero .ryt-video{z-index:0}
.ryt-hero .ryt-scrim{z-index:1}
.ryt-hero .ryt-grain{z-index:2}
.ryt-hero-copy{position:relative;z-index:3;width:100%;padding-bottom:clamp(64px,9vh,120px)}
.ryt-hero .eyebrow{color:var(--mint-500)}
.ryt-hero .eyebrow::before{background:var(--mint-500)}
.ryt-hero .lum-hero-title{font-size:clamp(3rem,7.2vw,5.6rem);line-height:.98;max-width:14ch;
color:#fff;text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.45);margin:0}
.ryt-hero .lum-hero-title em{color:var(--mint-200)}
.ryt-hero .lum-hero-sub{max-width:44ch;margin-top:var(--space-6);color:rgba(255,255,255,.86);
font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.6}
.ryt-hero .lum-hero-cta{margin-top:var(--space-8)}
.ryt-hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;
border-top:1px solid rgba(255,255,255,.12)}
.ryt-hero-foot .wrap{display:flex;justify-content:space-between;align-items:center;
padding-top:14px;padding-bottom:14px;font-size:.78rem;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.6)}
.ryt-hero-foot b{color:var(--mint-500);font-weight:600}
.ryt-scrollcue{display:inline-flex;align-items:center;gap:10px}
.ryt-scrollcue i{display:block;width:1px;height:28px;background:rgba(255,255,255,.4);
overflow:hidden;position:relative}
.ryt-scrollcue i::after{content:"";position:absolute;inset:0;background:var(--mint-500);
transform:translateY(-100%);animation:ryt-cue 2.4s ease-in-out infinite}
@keyframes ryt-cue{40%,100%{transform:translateY(100%)}}
/* hero words rise one at a time */
.ryt-hero .w{display:inline-block;opacity:0;transform:translateY(.35em);
transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.ryt-hero.is-in .w{opacity:1;transform:none}
@media(max-width:767.98px){.ryt-hero{min-height:82vh}.ryt-hero-foot .wrap span:last-child{display:none}}
/* interior page heads: paper, big serif, a photograph beside when there is one */
.ryt-pagehead{position:relative;padding:clamp(120px,16vh,176px) 0 var(--space-16);overflow:hidden}
.ryt-pagehead::after{content:"";position:absolute;left:50%;bottom:0;width:min(1080px,92vw);
transform:translateX(-50%);height:1px;background:var(--border)}
.ryt-pagehead h1{font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:1.02;max-width:17ch;
font-weight:500;text-wrap:balance}
.ryt-pagehead p{font-size:var(--text-lg);color:var(--text-2);max-width:56ch;margin-top:var(--space-6)}
.ryt-pagehead--photo{padding-bottom:var(--space-12)}
.ryt-pagehead-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:end}
.ryt-pagehead-grid .lum-media{aspect-ratio:4/3;border-radius:var(--radius-lg)}
@media(max-width:900px){.ryt-pagehead-grid{grid-template-columns:1fr}
.ryt-pagehead-grid .lum-media{aspect-ratio:16/10}}
/* cinema page head (contact, the studio): full-bleed photo or film, copy on it */
.ryt-cinehead{position:relative;min-height:clamp(480px,64vh,680px);display:flex;align-items:flex-end;
color:#fff;isolation:isolate;overflow:hidden;background:#050807}
.ryt-cinehead .ryt-video,.ryt-cinehead>.lum-media{position:absolute;inset:0;z-index:0;border-radius:0}
.ryt-cinehead>.lum-media img{filter:saturate(.9) contrast(1.02)}
.ryt-cinehead .ryt-scrim{z-index:1}.ryt-cinehead .ryt-grain{z-index:2}
.ryt-cinehead .wrap{position:relative;z-index:3;padding-bottom:clamp(40px,6vh,72px);padding-top:120px}
.ryt-cinehead h1{font-size:clamp(2.6rem,5.4vw,4.2rem);line-height:1.02;max-width:16ch;color:#fff;
font-weight:500;text-wrap:balance}
.ryt-cinehead p{color:rgba(255,255,255,.84);font-size:var(--text-lg);max-width:52ch;margin-top:var(--space-5)}
.ryt-cinehead .eyebrow{color:var(--mint-500)}.ryt-cinehead .eyebrow::before{background:var(--mint-500)}
/* =====================================================================
SERVICES — an editorial grid, not cards. Photograph, kicker, title, a
line. Hairlines above each item; the gutters are the structure.
===================================================================== */
.ryt-svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-12) var(--space-10)}
@media(max-width:1000px){.ryt-svcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10) var(--space-8)}}
@media(max-width:600px){.ryt-svcs{grid-template-columns:1fr}}
.ryt-svc{appearance:none;background:none;border:0;padding:0;text-align:left;color:inherit;
font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.ryt-svc .lum-media{aspect-ratio:4/3}
.ryt-svc-body{display:flex;flex-direction:column;gap:6px;padding-top:var(--space-4);
border-top:1px solid var(--border);min-width:0}
.ryt-svc .kicker{margin-bottom:2px}
.ryt-svc h3{font-size:var(--text-2xl);line-height:1.12;font-weight:500;overflow-wrap:anywhere;
transition:color var(--dur-base)}
.ryt-svc:hover h3{color:var(--accent)}
.ryt-svc p{color:var(--text-2);line-height:1.6}
.ryt-more{display:inline-flex;align-items:center;gap:8px;margin-top:var(--space-2);
font-size:var(--text-sm);font-weight:600;color:var(--accent)}
.ryt-more svg{width:15px;height:15px;transition:transform var(--dur-base) var(--ease-out)}
.ryt-svc:hover .ryt-more svg,.ryt-tile:hover .ryt-more svg{transform:translateX(5px)}
/* the legacy item is set apart by a mint rule instead of a border */
.ryt-svc--feature .ryt-svc-body{border-top:2px solid var(--accent)}
/* =====================================================================
THE STAT STRIP — numbers that count, then breathe
===================================================================== */
.lum-statband{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:var(--space-8);
padding:var(--space-10) 0;border-block:1px solid var(--border);background:none}
.lum-stat{padding:0 var(--space-4) 0 0;border:0;background:none}
.lum-stat-num{font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:1;font-weight:400;
font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.lum-stat-num em{font-style:italic;color:var(--accent)}
.lum-stat-label{font-size:var(--text-base);color:var(--text-2);margin-top:var(--space-3);text-wrap:balance}
.lum-stat{position:relative}
.lum-stat::before{content:"";display:block;width:24px;height:1.5px;background:var(--accent);
margin-bottom:var(--space-5);transform-origin:left;transform:scaleX(0);
transition:transform 1.2s var(--ease-out)}
.is-in .lum-stat::before{transform:none}
/* =====================================================================
LEGACY FEATURE BAND (home) — cinema band with the film behind it
===================================================================== */
.ryt-legacyband{position:relative;isolation:isolate;overflow:hidden;color:#fff;
padding:clamp(96px,14vh,160px) 0}
.ryt-legacyband .ryt-video{z-index:0}.ryt-legacyband .ryt-scrim{z-index:1}.ryt-legacyband .ryt-grain{z-index:2}
.ryt-legacyband .wrap{position:relative;z-index:3}
.ryt-legacyband .eyebrow{color:var(--mint-500)}.ryt-legacyband .eyebrow::before{background:var(--mint-500)}
.ryt-legacyband h2{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.02;max-width:15ch;color:#fff;font-weight:500}
.ryt-legacyband h2 em{color:var(--mint-200)}
.ryt-legacyband .ryt-lede{color:rgba(255,255,255,.92);margin-top:var(--space-6)}
.ryt-legacyband .ryt-prose p{color:rgba(255,255,255,.76)}
.ryt-legacy-copy{max-width:640px}
.ryt-tags{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:var(--space-7);
font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.ryt-tags span::before{content:"·";margin-right:10px;color:var(--mint-500)}
.ryt-tags span:first-child::before{display:none}
/* =====================================================================
TESTIMONIAL STRIP — the rotating quoteband, dressed for paper
===================================================================== */
.lum-quoteband{background:none;border-block:0;padding:0}
.ryt-quotes{padding:clamp(72px,10vh,120px) 0;border-block:1px solid var(--border)}
.lum-quoteband .wrap{grid-template-columns:minmax(0,7.5fr) minmax(0,4.5fr);gap:clamp(32px,5vw,80px);align-items:start}
.lum-quoteband blockquote{font-size:clamp(1.5rem,2.5vw,2.15rem);line-height:1.3;font-weight:400;
letter-spacing:-.01em;color:var(--text);text-wrap:pretty}
.lum-quoteband-proof{padding-inline-start:var(--space-8);border-inline-start:1px solid var(--border)}
.lum-quoteband-metric{font-size:clamp(3rem,5.5vw,4.6rem);font-weight:400;line-height:1}
.lum-quoteband-metric em{color:var(--accent)}
.lum-quoteband-label{font-size:var(--text-base);color:var(--text-2);margin-top:var(--space-2)}
.lum-quoteband-segs{padding-top:var(--space-6)}
.lum-quoteband-arrow{appearance:none;border:1px solid var(--border-2);background:transparent;color:var(--text);
width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
transition:all var(--dur-fast)}
.lum-quoteband-arrow:hover{background:var(--accent-fill);color:var(--accent-ink);border-color:transparent}
.ryt-quote-arrows{display:flex;gap:8px;margin-top:var(--space-6)}
.ryt-qmark{display:block;font-family:var(--font-display);font-size:5rem;line-height:.5;
color:var(--accent);opacity:.35;margin-bottom:var(--space-6)}
@media(max-width:820px){.lum-quoteband .wrap{grid-template-columns:1fr}
.lum-quoteband-proof{padding-inline-start:0;border:0;padding-top:var(--space-6);border-top:1px solid var(--border)}}
/* =====================================================================
THE PATH — How It Works, drawn as you scroll
A vertical line draws down the page (stroke-dashoffset from scroll
progress, set as a CSS var by JS). Seven stations hang off it, sides
alternating on desktop. Station icons draw their strokes on arrival.
Reduced motion: the path is fully drawn from the start.
===================================================================== */
.ryt-path{position:relative;padding:var(--space-8) 0 var(--space-4)}
.ryt-path-svg{position:absolute;top:0;bottom:0;left:50%;width:120px;transform:translateX(-50%);
height:100%;overflow:visible;pointer-events:none}
.ryt-path-svg .rail{fill:none;stroke:var(--border-2);stroke-width:1.5;stroke-dasharray:2 7}
.ryt-path-svg .ink{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--p,0));
/* pathLength=1 on the element makes offset a fraction */
transition:stroke-dashoffset .35s linear}
.ryt-station{position:relative;display:grid;grid-template-columns:1fr 120px 1fr;
gap:0;align-items:center;padding:var(--space-10) 0}
.ryt-station-copy{grid-column:1;grid-row:1;padding-right:clamp(24px,4vw,56px);text-align:right}
.ryt-station:nth-of-type(even) .ryt-station-copy{grid-column:3;padding-right:0;
padding-left:clamp(24px,4vw,56px);text-align:left}
.ryt-station-copy .kicker{justify-content:inherit}
.ryt-station:nth-of-type(odd) .ryt-station-copy .kicker{flex-direction:row-reverse}
.ryt-station h3{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.1;font-weight:500;margin-bottom:var(--space-3)}
.ryt-station p{color:var(--text-2);max-width:40ch;margin-inline:auto 0}
.ryt-station:nth-of-type(even) p{margin-inline:0 auto}
.ryt-station-node{grid-column:2;grid-row:1;display:grid;place-items:center;position:relative;z-index:2}
.ryt-node{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
background:var(--bg);border:1.5px solid var(--border-2);color:var(--accent);
transition:border-color var(--dur-slow),box-shadow var(--dur-slow),transform var(--dur-slow) var(--ease-bounce)}
.ryt-node svg{width:34px;height:34px}
.ryt-node svg *{stroke-dasharray:120;stroke-dashoffset:120;
transition:stroke-dashoffset 1.4s var(--ease-out) .2s}
.ryt-station.is-in .ryt-node svg *{stroke-dashoffset:0}
.ryt-station.is-in .ryt-node{border-color:var(--accent);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 10%,transparent)}
.ryt-station:hover .ryt-node{transform:scale(1.08)}
.ryt-station-num{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;
background:var(--accent-fill);color:var(--accent-ink);font-size:11px;font-weight:700;
display:grid;place-items:center;font-variant-numeric:tabular-nums}
/* the return: a wide closing station */
.ryt-station--end{grid-template-columns:1fr;text-align:center;padding-top:var(--space-12)}
.ryt-station--end .ryt-station-copy{grid-column:1;grid-row:auto;text-align:center;padding:0}
.ryt-station--end p{margin-inline:auto}
.ryt-station--end .ryt-node{margin:0 auto var(--space-6)}
@media(max-width:820px){
.ryt-path-svg{left:36px;transform:none;width:72px}
.ryt-station{grid-template-columns:72px 1fr;padding:var(--space-8) 0}
.ryt-station-copy,.ryt-station:nth-of-type(even) .ryt-station-copy{grid-column:2;text-align:left;
padding:0 0 0 var(--space-5)}
.ryt-station:nth-of-type(odd) .ryt-station-copy .kicker{flex-direction:row}
.ryt-station p,.ryt-station:nth-of-type(even) p{margin-inline:0}
.ryt-station-node{grid-column:1;grid-row:1}
.ryt-node{width:56px;height:56px}.ryt-node svg{width:26px;height:26px}
.ryt-station--end{grid-template-columns:1fr;text-align:left}
.ryt-station--end .ryt-station-copy{padding-left:0}
.ryt-station--end .ryt-node{margin:0 0 var(--space-5)}
}
/* the practical part: a plain definition list, no cards */
.ryt-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
gap:var(--space-10) var(--space-12)}
.ryt-fact h3{font-size:var(--text-xl);margin-bottom:var(--space-3);display:flex;align-items:center;gap:12px}
.ryt-fact h3 svg{width:26px;height:26px;color:var(--accent);flex:none}
.ryt-fact p{color:var(--text-2)}
/* =====================================================================
PACKAGES — open columns, hairlines, air. No borders anywhere.
===================================================================== */
.ryt-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,64px);
border-top:1px solid var(--border)}
@media(max-width:900px){.ryt-tiers{grid-template-columns:1fr;gap:var(--space-4)}}
.ryt-tier{display:flex;flex-direction:column;padding:var(--space-8) 0 var(--space-6);min-width:0;
position:relative}
.ryt-tier::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
background:var(--accent);transform-origin:left;transform:scaleX(0);
transition:transform 1.2s var(--ease-out) .2s}
.ryt-tier--hero::before,.is-in .ryt-tier--hero::before{transform:none}
.ryt-tier-name{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ryt-tier-flag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--text-3);margin-left:12px}
.ryt-fig{font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:1;margin:var(--space-5) 0 6px;font-weight:400;
font-variant-numeric:tabular-nums}
.ryt-tier-note{color:var(--text-3);font-size:var(--text-sm)}
.ryt-tier ul{list-style:none;margin:var(--space-7) 0 var(--space-8);display:grid;gap:var(--space-4);padding:0}
.ryt-tier li{position:relative;padding-left:30px;color:var(--text-2);line-height:1.6}
.ryt-tier li::before{content:"";position:absolute;left:0;top:.55em;width:16px;height:1.5px;
background:var(--accent);opacity:.8}
.ryt-tier .btn{margin-top:auto;align-self:flex-start}
@media(max-width:900px){.ryt-tier{border-top:1px solid var(--border)}.ryt-tiers{border-top:0}}
.ryt-rates{margin-top:var(--space-12);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
gap:var(--space-8) var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--border)}
.ryt-rate-k{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.ryt-rate-k b{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;
font-variant-numeric:tabular-nums}
.ryt-rate-k span{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ryt-rate p{margin-top:var(--space-3);color:var(--text-2)}
/* the three movements of a legacy film: open columns with roman numerals */
.ryt-moves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-10) clamp(28px,4vw,64px)}
@media(max-width:900px){.ryt-moves{grid-template-columns:1fr}}
.ryt-move{padding-top:var(--space-6);border-top:1px solid var(--border)}
.ryt-move .num{font-family:var(--font-display);font-size:var(--text-xl);color:var(--accent);font-weight:400;
display:block;margin-bottom:var(--space-5);letter-spacing:.08em}
.ryt-move h3{font-size:var(--text-2xl);font-weight:500;margin-bottom:var(--space-4)}
.ryt-move p{color:var(--text-2)}
/* signed note: paper on paper, a single mint hairline down the left */
.ryt-signed{position:relative;padding:var(--space-4) 0 var(--space-4) clamp(24px,4vw,48px);
border-left:2px solid var(--accent);max-width:760px}
.ryt-signed p{font-family:var(--font-display);font-size:clamp(1.2rem,1.8vw,1.45rem);line-height:1.6;
color:var(--text);font-weight:400}
.ryt-signed p+p{margin-top:var(--space-5)}
.ryt-sig{margin-top:var(--space-8);display:flex;align-items:center;gap:var(--space-4)}
.ryt-sig-name{font-family:var(--font-display);font-style:italic;font-size:var(--text-2xl);color:var(--accent)}
.ryt-sig-role{font-size:var(--text-sm);color:var(--text-3)}
/* =====================================================================
FAQ
===================================================================== */
.lum-faq{max-width:840px}
.lum-faq-q{font-family:var(--font-display);font-size:var(--text-xl);font-weight:450;line-height:1.3;
padding:var(--space-6) 0}
.lum-faq-a p{font-size:var(--text-base);color:var(--text-2);max-width:66ch}
.lum-faq-item.is-open .lum-faq-q{color:var(--accent)}
/* =====================================================================
FORMATS — a slow film strip of chips (Breathe), and the plain list
===================================================================== */
.ryt-marquee{overflow:hidden;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
padding:var(--space-4) 0}
.ryt-marquee-track{display:flex;gap:12px;width:max-content;
animation:ryt-marquee 70s linear infinite}
.ryt-marquee:hover .ryt-marquee-track{animation-play-state:paused}
@keyframes ryt-marquee{to{transform:translateX(-50%)}}
.ryt-chip{font-size:var(--text-base);font-weight:500;color:var(--text-2);padding:10px 18px;
border-radius:var(--radius-pill);border:1px solid var(--border);white-space:nowrap;
transition:color var(--dur-fast),border-color var(--dur-fast)}
.ryt-chip:hover{color:var(--accent);border-color:var(--accent)}
/* =====================================================================
SPLIT — copy beside a photograph, the workhorse
===================================================================== */
.ryt-split{display:grid;gap:clamp(32px,6vw,88px);grid-template-columns:1fr 1fr;align-items:center}
.ryt-split--wide{grid-template-columns:1.1fr .9fr}
@media(max-width:900px){.ryt-split,.ryt-split--wide{grid-template-columns:1fr}}
.ryt-split .kicker{margin-bottom:var(--space-3)}
.ryt-split h2,.ryt-split .ryt-h{font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.06;font-weight:500;
margin-bottom:var(--space-6);font-family:var(--font-display);text-wrap:balance}
.lum-figcap{font-size:var(--text-sm);color:var(--text-3);margin-top:var(--space-3)}
.ryt-photostack{position:relative}
.ryt-photostack .lum-media+.lum-media{position:absolute;width:44%;right:-6%;bottom:-10%;
box-shadow:var(--shadow-lg);border:6px solid var(--bg)}
/* =====================================================================
THE STUDIO (CVP page)
===================================================================== */
.ryt-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:var(--space-8)}
.ryt-era{padding-top:var(--space-5);border-top:1px solid var(--border)}
.ryt-era .yr{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:400;line-height:1;color:var(--accent)}
.ryt-era h3{font-size:var(--text-xl);margin:var(--space-4) 0 var(--space-2)}
.ryt-era p{color:var(--text-2);font-size:var(--text-base)}
.ryt-roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--space-5) var(--space-8);
padding-top:var(--space-6);border-top:1px solid var(--border)}
.ryt-person{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) 0}
.ryt-person b{font-family:var(--font-display);font-size:var(--text-xl);font-weight:450}
.ryt-person span{font-size:var(--text-sm);color:var(--text-3)}
.ryt-clients{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--font-display);
font-size:var(--text-xl);color:var(--text-2);font-weight:400;line-height:1.4}
.ryt-clients span::before{content:"·";margin-right:14px;color:var(--accent)}
.ryt-clients span:first-child::before{display:none}
.ryt-reel{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:#000;
cursor:pointer;isolation:isolate}
.ryt-reel img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;
transition:transform 3s linear,opacity var(--dur-slow)}
.ryt-reel:hover img{transform:scale(1.04);opacity:1}
.ryt-reel iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ryt-play{position:absolute;inset:0;display:grid;place-items:center;z-index:2}
.ryt-play span{width:84px;height:84px;border-radius:50%;background:var(--accent-fill);
display:grid;place-items:center;color:var(--accent-ink);box-shadow:0 14px 40px rgba(0,0,0,.4);
transition:transform var(--dur-base) var(--ease-bounce)}
.ryt-reel:hover .ryt-play span{transform:scale(1.08)}
.ryt-play svg{width:30px;height:30px;margin-left:4px}
/* =====================================================================
CONTACT — the map, the hours, the form
===================================================================== */
.ryt-contactgrid{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:.9fr 1.1fr;align-items:start}
@media(max-width:900px){.ryt-contactgrid{grid-template-columns:1fr}}
.ryt-infoblock+.ryt-infoblock{margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--border)}
.ryt-infoblock h3{font-family:var(--font-sans);font-size:.78rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-4)}
.ryt-inforow{display:flex;justify-content:space-between;gap:var(--space-6);padding:10px 0;
color:var(--text-2);border-bottom:1px dashed var(--border)}
.ryt-inforow:last-child{border-bottom:0}
.ryt-inforow b{color:var(--text);font-weight:600}
.ryt-infoblock address{font-style:normal;color:var(--text-2);line-height:1.8;font-size:var(--text-lg)}
.ryt-infoblock address a{color:var(--accent);text-decoration:none}
.ryt-infoblock address a:hover{text-decoration:underline}
.ryt-map{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;
background:var(--surface-2);isolation:isolate}
.ryt-map>img{display:block;width:100%;height:100%;object-fit:cover}
.ryt-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
filter:saturate(.7) contrast(1.02)}
.ryt-map-pin{position:absolute;left:var(--space-5);bottom:var(--space-5);z-index:2;
background:var(--surface);color:var(--text);padding:12px 16px;border-radius:var(--radius-md);
box-shadow:var(--shadow-md);font-size:var(--text-sm);line-height:1.5;display:flex;gap:10px;align-items:flex-start}
.ryt-map-pin svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:2px}
.ryt-map-pin a{color:var(--accent);text-decoration:none;font-weight:600}
.formcard{background:none;border:0;padding:0;box-shadow:none}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5) var(--space-6)}
@media(max-width:600px){.formgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.lbl-f{font-size:var(--text-sm);font-weight:600;color:var(--text)}
.inp{font:inherit;font-size:var(--text-base);color:var(--text);background:var(--surface);
border:1px solid var(--border-2);border-radius:var(--radius-md);padding:14px 16px;width:100%;
transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
textarea.inp{resize:vertical;min-height:140px}
.help{font-size:var(--text-sm);color:var(--text-3)}
.msg{margin-top:var(--space-5);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);
background:var(--accent-50);color:var(--accent-700);font-weight:500}
/* =====================================================================
CTA PANEL — quiet, no blob
===================================================================== */
.lum-ctapanel{background:none;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
border-radius:0;padding:clamp(56px,8vh,96px) 0;text-align:left;box-shadow:none}
.lum-ctapanel-blob{display:none}
.lum-ctapanel-title{font-size:clamp(2rem,3.8vw,3rem);line-height:1.04;font-weight:500;max-width:18ch;text-wrap:balance}
.lum-ctapanel-sub{font-size:var(--text-lg);color:var(--text-2);max-width:52ch;margin-top:var(--space-5)}
.lum-ctapanel .lum-hero-cta{margin-top:var(--space-8)}
.ryt-cta-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-10);align-items:end}
@media(max-width:820px){.ryt-cta-grid{grid-template-columns:1fr}}
/* =====================================================================
FOOTER
===================================================================== */
.lum-footer{border-top:1px solid var(--border);background:var(--bg);padding:var(--space-16) 0 var(--space-10)}
.lum-footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--space-10)}
@media(max-width:820px){.lum-footer .wrap{grid-template-columns:1fr}}
.lum-footer-brand .ryt-brand{margin-right:0}
.lum-footer-nav{display:flex;flex-direction:column;gap:10px}
.lum-footer-nav a{color:var(--text-2);text-decoration:none;font-size:var(--text-base)}
.lum-footer-nav a:hover{color:var(--accent)}
.ryt-foot-h{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
margin-bottom:var(--space-4)}
.ryt-social{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.ryt-social a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border-2);
border-radius:50%;color:var(--text-2);transition:all var(--dur-fast)}
.ryt-social a:hover{color:var(--accent-ink);background:var(--accent-fill);border-color:transparent}
.ryt-social svg{width:17px;height:17px}
.lum-footer-fine{grid-column:1/-1;margin-top:var(--space-8);padding-top:var(--space-6);
border-top:1px solid var(--border);color:var(--text-3);font-size:var(--text-sm);
display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.lum-footer-fine a{color:var(--text-2);text-decoration:none}
.lum-footer-fine a:hover{color:var(--accent)}
/* =====================================================================
UTILITIES + REDUCED MOTION
===================================================================== */
.section{padding:clamp(72px,10vh,120px) 0}
.section--tight{padding:var(--space-12) 0}
.wrap{max-width:1180px;padding:0 clamp(20px,4vw,40px)}
.ryt-anchor{scroll-margin-top:96px}
.ryt-right{text-align:right}
@media (prefers-reduced-motion:reduce){
.ryt-hero .w,.ryt-stagger>*{opacity:1;transform:none;transition:none}
.eyebrow::before,.kicker::before,.lum-stat::before,.ryt-tier::before{transform:none;transition:none}
.ryt-path-svg .ink{stroke-dashoffset:0;transition:none}
.ryt-node svg *{stroke-dashoffset:0;transition:none}
.ryt-marquee-track{animation:none;flex-wrap:wrap;width:auto}
.ryt-marquee{mask:none}
.lum-media--drift>img{animation:none}
.ryt-scrollcue i::after{animation:none}
.bar.is-sweeping::after{animation:none}
main>.page.is-live{animation:none}
.lum-media--kenburns:hover>img{transform:none}
.ryt-video video{display:none}
}
/* =====================================================================
v2.0 PATCH ROUND 1 (after the first sweep)
===================================================================== */
/* the bar floats over the page so cinema heroes run under it */
.bar{position:fixed;top:0;left:0;right:0;z-index:200}
/* hero copy clears the foot strip; film tag moves to the top right */
.ryt-hero-copy{padding-bottom:clamp(120px,15vh,176px)}
.ryt-hero .ryt-vidtag,.ryt-cinehead .ryt-vidtag{bottom:auto;top:84px}
.ryt-legacyband .ryt-vidtag{bottom:16px}
/* a poster that fails to load must not draw a broken-image glyph */
.ryt-video img{color:transparent;font-size:0}
.ryt-video img.is-broken{visibility:hidden}
/* stats: left-aligned under their rules */
.lum-stat{text-align:left;align-items:flex-start}
/* legacy band tags: room above, bar separators that survive a wrap */
.ryt-tags{margin-top:var(--space-8);gap:10px 0}
.ryt-tags span{padding-right:18px}
.ryt-tags span::before{content:"";display:inline-block;width:1px;height:10px;
background:var(--mint-500);margin:0 18px 0 0;vertical-align:-1px;opacity:.7}
.ryt-tags span:first-child::before{display:none}
/* quote arrows: inline, always visible, under the quote */
.lum-quoteband-arrow{position:static;opacity:1;transform:none;display:grid}
.lum-quoteband--rotating .lum-quoteband-arrow{opacity:1;transform:none}
.lum-quoteband-metric{word-break:normal;overflow-wrap:anywhere}
/* footer: the lockup and address are sans, not the canon serif */
.lum-footer-brand{font-family:var(--font-sans);font-size:inherit}
.lum-footer-brand address{font-family:var(--font-sans)!important;font-size:var(--text-base)!important}
.lum-footer .ryt-tagline a,.lum-footer .ryt-tagline a i{color:var(--accent);text-decoration:none}
.lum-footer .ryt-tagline a:hover i{text-decoration:underline}
.lum-footer .ryt-tagline{white-space:normal}
.ryt-node{position:relative}
.ryt-station--end .ryt-station-copy .kicker{flex-direction:row;justify-content:center}
.ryt-tier-flag{display:block;margin:6px 0 0}
.ryt-tier ul{margin-top:var(--space-6)!important;padding-top:var(--space-2)}
a.btn,a.btn:visited{text-decoration:none}
.lum-footer .ryt-tagline a,.lum-footer .ryt-tagline a:visited{color:var(--accent);text-decoration:none}
.lum-footer .ryt-wordmark{color:var(--text)}
/* ghost buttons on cinema surfaces are always white */
.ryt-hero .btn-ghost,.ryt-cinehead .btn-ghost,.ryt-legacyband .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}
.ryt-hero .btn-ghost:hover,.ryt-cinehead .btn-ghost:hover,.ryt-legacyband .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
@media(max-width:767.98px){
.ryt-hero-copy{padding-top:120px;padding-bottom:104px}
.ryt-hero .lum-hero-title{font-size:clamp(2.6rem,12vw,3.4rem)}
.ryt-hero-foot .wrap span:not(.ryt-scrollcue){display:none}
.ryt-hero .ryt-vidtag,.ryt-cinehead .ryt-vidtag{top:auto;bottom:64px;right:12px}
.ryt-cinehead .wrap{padding-top:140px}
.ryt-pagehead{padding-top:120px}
}
/* =====================================================================
v2.1 — Wind's round 3 (2026-09-09)
===================================================================== */
/* --- NAV: the rule rides ABOVE the word, like ARS. Hover = 40% preview,
current page = solid. No pill, no fill. --- */
.nav-simple a{padding:14px 13px 10px;border-radius:0;background:none!important}
.nav-simple a::after{display:none}
.nav-simple a::before{content:"";position:absolute;left:13px;right:13px;top:6px;height:2px;
border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;
opacity:1;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast)}
@media (hover:hover){
.nav-simple a:hover{color:var(--text)}
.nav-simple a:hover:not(.is-here)::before{transform:scaleX(1);opacity:.45}
}
.nav-simple a:focus-visible:not(.is-here)::before{transform:scaleX(1);opacity:.45}
.nav-simple a.is-here::before{transform:scaleX(1);opacity:1}
.nav-simple a.is-here{color:var(--text);font-weight:500}
html.on-dark .bar .nav-simple a.is-here{color:#fff}
html.on-dark .bar .nav-simple a::before{background:var(--mint-500)}
/* --- BUTTONS: rounded, not pill --- */
.btn,.bar-in .btn,.lum-quoteband-arrow{border-radius:14px}
.ryt-burger{border-radius:12px}
/* --- PARALLAX: figures drift against the copy, heroes track at 22% --- */
[data-para]{translate:0 var(--para-y,0);will-change:translate}
.ryt-hero .ryt-video,.ryt-cinehead .ryt-video,.ryt-cinehead>.lum-media,.ryt-legacyband .ryt-video{
inset:-12% 0 -12%}
/* --- THE WIPE: an arrow shoots through the centre, the screen splits ---
Two black half-planes close from the centre line as the mint arrow (the
RYT mark at its tip) crosses; the page swaps under full cover; the halves
part top/bottom to reveal the new page. All WAAPI transforms, no layout. */
.ryt-wipe{position:fixed;inset:0;z-index:300;pointer-events:none;display:none;contain:strict;overflow:hidden}
html.ryt-wiping .ryt-wipe{display:block}
html.ryt-wiping main>.page.is-live{animation:none}
html.ryt-wiping .lum-reveal{transition:none}
html.ryt-wiping .bar.is-sweeping::after{animation:none}
.ryt-wipe-half{position:absolute;left:0;right:0;height:50.5%;background:#050807;will-change:transform}
.ryt-wipe-half--top{top:0;transform-origin:50% 100%;transform:scaleY(0)}
.ryt-wipe-half--bot{bottom:0;transform-origin:50% 0;transform:scaleY(0)}
.ryt-wipe-line{position:absolute;left:0;top:50%;height:2px;width:100%;margin-top:-1px;
background:linear-gradient(90deg,transparent,var(--mint-500) 30%,var(--mint-200));
transform:translateX(-110%);will-change:transform;box-shadow:0 0 18px rgba(126,204,197,.6)}
.ryt-wipe-mark{position:absolute;top:50%;left:0;width:64px;height:62px;margin:-31px 0 0 -8px;
transform:translateX(-120px);will-change:transform;
filter:drop-shadow(0 0 22px rgba(126,204,197,.7))}
.ryt-wipe-seam{position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;
background:var(--mint-500);opacity:0}
/* --- CONTACT: the form beside an illustration, not empty space --- */
.ryt-formgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,96px);align-items:start}
@media(max-width:900px){.ryt-formgrid{grid-template-columns:1fr}}
.ryt-illo{position:sticky;top:96px}
.ryt-illo svg{width:100%;height:auto;display:block;margin-top:var(--space-8)}
.ryt-illo svg .s{fill:none;stroke:var(--mint-500);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease-out)}
.ryt-illo svg .s2{stroke:rgba(126,204,197,.38);stroke-width:1.2}
.ryt-illo svg .f{fill:rgba(126,204,197,.12)}
.is-in .ryt-illo svg .s,.ryt-illo.is-in svg .s{stroke-dashoffset:0}
.ryt-illo svg .s:nth-of-type(2){transition-delay:.25s}.ryt-illo svg .s:nth-of-type(3){transition-delay:.5s}
.ryt-illo svg .s:nth-of-type(4){transition-delay:.75s}.ryt-illo svg .s:nth-of-type(5){transition-delay:1s}
.ryt-illo svg .s:nth-of-type(6){transition-delay:1.2s}.ryt-illo svg .s:nth-of-type(7){transition-delay:1.4s}
.ryt-illo svg .s:nth-of-type(8){transition-delay:1.6s}
.ryt-illo svg .dot{fill:var(--mint-500);animation:ryt-travel 6s linear infinite;offset-path:path("M60 110 C 180 110 200 220 320 220 S 470 300 560 300");offset-rotate:0deg}
@keyframes ryt-travel{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
.ryt-form-lede{margin-bottom:var(--space-8)}
.formgrid{gap:var(--space-6) var(--space-6)}
.inp{border-radius:12px;padding:16px 18px}
.ryt-form-foot{grid-column:1/-1;display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap;padding-top:var(--space-2)}
/* --- FOOTER: everything left-justified; the mark breaks the left edge --- */
.lum-footer{position:relative;overflow:hidden}
.lum-footer .wrap{grid-template-columns:1.4fr 1fr 1fr;position:relative}
.lum-footer-brand{position:relative}
.ryt-foot-mark{position:absolute;left:calc(-1 * clamp(20px,4vw,40px) - 56px);top:-22px;width:150px;height:144px;
opacity:.92;pointer-events:none}
@media(max-width:820px){.ryt-foot-mark{left:-56px;width:110px;height:106px;top:-10px}}
.lum-footer-brand .ryt-brand{display:block}
.lum-footer-brand .ryt-brand .ryt-mark{display:none}
.lum-footer-brand .ryt-brand-type{padding-left:0}
.lum-footer .ryt-wordmark{font-size:17px}
.lum-footer .ryt-tagline{font-size:15px;margin-top:4px}
.lum-footer-brand address{margin-top:var(--space-6)}
/* --- QUOTE: the mark was clipped; the block needs air --- */
.lum-quoteband--rotating{overflow:visible}
.ryt-qmark{line-height:1;height:.62em;overflow:visible;font-size:4.4rem;margin-bottom:var(--space-4)}
.ryt-quotes{padding:clamp(80px,11vh,136px) 0}
.ryt-quotes+.section,.section+.ryt-quotes{border-top:0}
/* --- ABOUT: the phone block reads as one full-width statement --- */
.ryt-phoneblock{display:grid;grid-template-columns:1fr auto;gap:var(--space-10);align-items:center;
padding:clamp(48px,7vh,80px) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
@media(max-width:820px){.ryt-phoneblock{grid-template-columns:1fr}}
.ryt-bignum{font-family:var(--font-display);font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:400;
color:var(--text);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;
border-bottom:2px solid var(--accent);padding-bottom:6px;transition:color var(--dur-base)}
.ryt-bignum:hover{color:var(--accent)}
/* --- MOBILE PASS --- */
@media(max-width:767.98px){
.ryt-hero-foot .wrap{flex-direction:column;align-items:flex-start;gap:8px;padding-top:12px;padding-bottom:12px}
.ryt-hero-foot .ryt-scrollcue{display:none}
.ryt-hero-copy{padding-bottom:clamp(120px,18vh,160px)}
.ryt-hero .lum-hero-title{font-size:clamp(2.6rem,12vw,3.6rem)}
.ryt-hero .lum-hero-cta .btn,.lum-ctapanel .btn{width:100%;justify-content:center;text-align:center}
.lum-hero-cta{flex-direction:column;align-items:stretch}
.ryt-cta-grid .lum-hero-cta{justify-content:stretch!important}
.ryt-legacyband{padding:clamp(72px,12vh,120px) 0}
.ryt-tags{gap:8px 0}.ryt-tags span{display:block;padding:0}.ryt-tags span::before{display:none}
.lum-quoteband blockquote{font-size:1.35rem}
.lum-quoteband-metric{font-size:2.8rem}
.ryt-pagehead{padding-top:104px}
.ryt-pagehead h1,.ryt-cinehead h1{font-size:clamp(2.1rem,9vw,2.8rem)}
.sec-title{font-size:clamp(1.7rem,7.5vw,2.2rem)}
.ryt-tiers{gap:var(--space-2)}
.ryt-tier{padding:var(--space-7) 0 var(--space-4)}
.ryt-tier .btn{align-self:stretch;justify-content:center}
.ryt-rates{grid-template-columns:1fr}
.ryt-station h3{font-size:1.5rem}
.ryt-photostack .lum-media+.lum-media{display:none}
.ryt-map{aspect-ratio:1/1}
.lum-footer .wrap{gap:var(--space-8)}
.ryt-illo{position:static}
.ryt-illo svg{max-width:360px;margin:var(--space-4) auto 0}
.ryt-svc h3{font-size:1.6rem}
.section{padding:clamp(56px,9vh,80px) 0}
.ryt-marquee-track{animation-duration:48s}
.ryt-wipe-mark{width:44px;height:43px;margin-top:-21px}
}
@media(max-width:420px){
.ryt-wordmark{font-size:14px}
.ryt-tagline{display:none}
}
/* footer lockup v2.1b: the mark straddles the left edge of the content column,
half outside the wrap; every line of text starts on one left edge */
.ryt-brand--foot{cursor:default;margin:0}
.lum-footer-brand{padding-left:84px}
.ryt-foot-mark{left:-64px;top:-14px;width:124px;height:119px;opacity:1}
@media(max-width:820px){.lum-footer-brand{padding-left:72px}.ryt-foot-mark{left:-48px;width:104px;height:100px;top:-8px}}
.lum-footer a.ryt-wordmark,.lum-footer a.ryt-wordmark:visited{color:var(--text);text-decoration:none}
.lum-footer .ryt-brand .ryt-tagline a,.lum-footer .ryt-brand .ryt-tagline a:visited{color:var(--accent);text-decoration:none;font-style:italic}
.lum-footer .ryt-brand .ryt-tagline a:hover{text-decoration:underline}
.ryt-quote-arrows{margin-top:var(--space-8)}
/* --- v2.1b: THE WIPE IS THE ONLY REVEAL (the ARS lesson, learned twice) ---
Two things were fading the page in AFTER the panel had gone:
(a) removing html.ryt-wiping flipped the page's `animation` from none back
to ryt-page-in, which started the keyframe FRESH: a whole-page fade and
rise right after the reveal. The marker now lives on the page element
and outlives the wipe; it is only cleared on the next navigation.
(b) reveal-state classes (.is-in on stations, staggers, hero words, the
eyebrow rules, the tier rule) were being set under cover but with their
transitions live, so they played out once the halves parted. Under a
wipe every transition on the incoming page is off; the elements land in
their final state under cover and nothing moves when the cover lifts.
Below-the-fold elements keep their normal scroll reveal. */
main>.page.is-live.ryt-nointro{animation:none}
html.ryt-wiping main>.page *,html.ryt-wiping main>.page *::before,html.ryt-wiping main>.page *::after{
transition:none!important;animation-play-state:paused!important}
html.ryt-wiping .ryt-video video{animation:none}
/* --- v2.1c: generic self-drawing illustration (the contact-form pattern, made reusable) ---
Strokes draw in order on arrival; .f are soft fills; .dot rides an offset-path. */
.ryt-draw svg{width:100%;height:auto;display:block}
.ryt-draw svg .s{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease-out)}
.ryt-draw svg .s2{stroke:color-mix(in srgb,var(--accent) 40%,transparent);stroke-width:1.2}
.ryt-draw svg .f{fill:color-mix(in srgb,var(--accent) 10%,transparent)}
.ryt-draw svg .dot{fill:var(--accent)}
.ryt-draw.is-in svg .s,.is-in .ryt-draw svg .s{stroke-dashoffset:0}
.ryt-draw svg .s:nth-of-type(2){transition-delay:.2s}.ryt-draw svg .s:nth-of-type(3){transition-delay:.4s}
.ryt-draw svg .s:nth-of-type(4){transition-delay:.6s}.ryt-draw svg .s:nth-of-type(5){transition-delay:.8s}
.ryt-draw svg .s:nth-of-type(6){transition-delay:1s}.ryt-draw svg .s:nth-of-type(7){transition-delay:1.2s}
.ryt-draw svg .s:nth-of-type(8){transition-delay:1.4s}.ryt-draw svg .s:nth-of-type(9){transition-delay:1.6s}
.ryt-draw svg .s:nth-of-type(10){transition-delay:1.8s}
.ryt-pagehead-grid .ryt-draw{align-self:center;padding:0 clamp(0px,3vw,32px)}
/* the services head: a reel unspooling into frames; the frames flicker like a projector */
.ryt-draw .frame{fill:color-mix(in srgb,var(--accent) 14%,transparent);animation:ryt-flicker 2.4s steps(1) infinite}
.ryt-draw .frame:nth-of-type(2){animation-delay:.6s}.ryt-draw .frame:nth-of-type(3){animation-delay:1.2s}.ryt-draw .frame:nth-of-type(4){animation-delay:1.8s}
@keyframes ryt-flicker{0%,70%{opacity:.35}75%,95%{opacity:1}100%{opacity:.35}}
.ryt-draw .spin{transform-origin:var(--cx) var(--cy);animation:ryt-spin 18s linear infinite}
@keyframes ryt-spin{to{transform:rotate(360deg)}}
/* the how-it-works head: a shoebox, and what rises out of it floats */
.ryt-draw .float{animation:ryt-float 5s ease-in-out infinite alternate}
.ryt-draw .float:nth-of-type(2){animation-delay:-1.6s}.ryt-draw .float:nth-of-type(3){animation-delay:-3.2s}
@keyframes ryt-float{from{transform:translateY(0)}to{transform:translateY(-7px)}}
/* the studio timeline: a drawn rail with sprocket holes running under the eras */
.ryt-timeline{position:relative;padding-top:var(--space-10)}
.ryt-rail{position:absolute;left:0;right:0;top:0;width:100%;height:28px;overflow:visible}
.ryt-rail .s{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease-out)}
.is-in .ryt-rail .s{stroke-dashoffset:0}
.ryt-rail .hole{fill:none;stroke:color-mix(in srgb,var(--accent) 45%,transparent);stroke-width:1;opacity:0;transition:opacity .6s var(--ease-out)}
.is-in .ryt-rail .hole{opacity:1}
.ryt-era{position:relative}
.ryt-era::before{content:"";position:absolute;left:0;top:-8px;width:10px;height:10px;border-radius:50%;
background:var(--bg);border:1.5px solid var(--accent);transform:scale(0);transition:transform .6s var(--ease-bounce) 1.2s}
.is-in .ryt-era::before{transform:none}
.ryt-era{border-top:0}
@media (prefers-reduced-motion:reduce){.ryt-draw .frame,.ryt-draw .spin,.ryt-draw .float{animation:none}
.ryt-draw svg .s,.ryt-rail .s{stroke-dashoffset:0;transition:none}.ryt-era::before{transform:none}.ryt-rail .hole{opacity:1}}
/* --- v2.1d footer lockup: small mark, vertically centred on the two-line lockup,
hanging just outside the column edge on wide screens (never cropped), inline
on narrow ones; same hover as the header mark; both link home --- */
.lum-footer{overflow:visible}
.lum-footer-brand{padding-left:0}
.ryt-brand--foot{position:relative;display:flex;align-items:center;gap:14px;margin:0}
.ryt-foot-mark{position:absolute;left:-68px;top:50%;width:52px;height:50px;margin:-25px 0 0;
opacity:1;pointer-events:auto;display:block;transition:none}
.ryt-foot-mark .ryt-mark{width:52px;height:50px;transition:transform calc(var(--dur-slow)*1.2) var(--ease-bounce)}
.ryt-brand--foot:hover .ryt-mark{transform:translateX(3px) scale(1.06)}
.ryt-foot-mark:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.lum-footer .ryt-brand-type{gap:3px}
@media(max-width:1080px){
.ryt-foot-mark{position:static;margin:0;width:44px;height:42px}
.ryt-foot-mark .ryt-mark{width:44px;height:42px}
}
@media(max-width:820px){.lum-footer-brand{padding-left:0}}
.lum-footer-brand .ryt-brand--foot{display:flex}
.lum-footer-brand .ryt-brand .ryt-foot-mark .ryt-mark{display:block}
/* Keep the final footer layout responsive after the later desktop overrides. */
.lum-footer-nav{margin-left:0;min-width:0}
@media(max-width:820px){
.lum-footer .wrap{grid-template-columns:minmax(0,1fr)}
.lum-footer .ryt-brand-type{min-width:0}
.lum-footer .ryt-wordmark{font-size:clamp(13px,4vw,17px)}
}