/* Layouts F and G. Preview pages only; index.html never loads this.
Both keep exactly what Nina said to keep: the main film, Start, Reset, and
the six agent videos. Everything else is open.
Loaded after styles.css and handoff-room.css, so these rules win. */
/* =====================================================================
F — the film is the hero
Nina: "I don't think the video works... do we replace a video? Do we remove
it and make it just background?" and "we probably need one more comparison
where the hero is the actual video... with some overlays that maybe
disappear." So the Atlanta drone footage is gone and the Handoff Room film
takes the hero, full bleed, with the claim over it. The overlay clears on
the first press so nothing sits on top of the film while it runs.
AEO note, since she raised it: the h1 and the lede are real text in the
document, not baked into the video, so a crawler and an answer engine read
the same words a visitor does. Nothing about this layout hides the copy.
===================================================================== */
#handoff-room.fstage{padding-top:0}
.fbleed{position:relative;background:#05070D}
#handoff-room.fstage .fbleed .filmwrap{max-width:none;margin:0}
#handoff-room.fstage .fbleed .vslot{border-radius:0;border:0;aspect-ratio:auto;
width:100%;height:calc(100vh - var(--navh, 69px));height:calc(100dvh - var(--navh, 69px))}
#handoff-room.fstage .fbleed .vslot video{object-fit:cover;width:100%;height:100%}
#handoff-room.fstage .fbleed .offs{max-width:1100px;margin:0 auto;padding:22px 24px 0}
/* the overlay that disappears */
#handoff-room .vslot .fov{position:absolute;inset:0;z-index:6;display:flex;
flex-direction:column;justify-content:center;gap:0;
padding:0 clamp(24px,6vw,84px);
background:linear-gradient(90deg,rgba(5,7,13,.9) 0%,rgba(5,7,13,.62) 48%,rgba(5,7,13,.25) 100%);
transition:opacity .6s ease, visibility .6s}
#handoff-room .vslot.started .fov,
#handoff-room .vslot.playing .fov{opacity:0;visibility:hidden;pointer-events:none}
.fov-kick{font-family:var(--fm);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
color:#7FE9EC;margin:0 0 14px}
#handoff-room .vslot .fov h1{font-family:var(--fd);font-weight:800;color:#fff;
font-size:clamp(30px,5vw,54px);line-height:1.05;max-width:17ch;margin:0}
.fov-lead{font-size:16.5px;line-height:1.6;color:#D8E0EC;max-width:46ch;margin:18px 0 0}
.fov-btns{display:flex;flex-wrap:wrap;gap:11px;margin:26px 0 0}
.fov-go{appearance:none;border:0;cursor:pointer;font-family:inherit;position:relative;
background:var(--orange-cta);color:#fff;font-weight:700;font-size:16px;
padding:15px 26px;border-radius:11px;animation:fglow 2.4s ease-in-out infinite}
.fov-go::after{content:"";position:absolute;inset:-4px;border-radius:15px;
border:2px solid rgba(244,122,40,.85);opacity:0;pointer-events:none;
animation:fring 2.4s cubic-bezier(.3,.7,.4,1) infinite}
.fov-go:hover{background:#96430F}
.fov-reset{appearance:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:15px;
color:#C7D2E2;background:transparent;border:1px solid rgba(255,255,255,.3);
padding:14px 20px;border-radius:11px}
.fov-reset:hover{border-color:rgba(255,255,255,.65);color:#fff}
@keyframes fglow{0%,100%{box-shadow:0 6px 20px rgba(244,122,40,.3)}
50%{box-shadow:0 0 28px 5px rgba(244,122,40,.48),0 6px 24px rgba(244,122,40,.42)}}
@keyframes fring{0%{transform:scale(1);opacity:.8}72%,100%{transform:scale(1.2);opacity:0}}
@media (prefers-reduced-motion:reduce){
.fov-go,.fov-go::after{animation:none}
.fov-go{box-shadow:0 0 20px 3px rgba(244,122,40,.38)}
}
/* the stages and caption sit under the film, where the page turns light again */
#handoff-room.fstage > .hr-wrap{padding-top:26px}
/* =====================================================================
G — the console
Not a landing page with a demo in it. A working surface: the stages and
controls on the left, the film and the six agents in the middle, the notes
and the approval on the right, all on one dark panel. The marketing copy
moves BELOW it, which is the opposite order to every other layout here.
AEO note: the copy is still on the page, still a real h1 and paragraph, just
not first. Search engines read the document, not the scroll position.
===================================================================== */
#handoff-room.console{background:#070B14;color:#E7ECF4;padding:0}
#handoff-room.console .hr-wrap{max-width:1440px;padding:0 22px}
#handoff-room.console .steps{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
#handoff-room.console .step{color:#93A3BC;border-color:rgba(255,255,255,.12)}
#handoff-room.console .step.on{background:rgba(244,122,40,.16);color:#FFB37A}
#handoff-room.console .step.past{color:#6FD8A6}
#handoff-room.console .say{color:#8FA0B8}
#handoff-room.console .hr-btn.hr-ghost{border-color:rgba(255,255,255,.28);color:#D6DEEA}
#handoff-room.console .mgrid{gap:18px}
#handoff-room.console .gate{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.14)}
#handoff-room.console .gate .gtx{color:#C7D3E4}
#handoff-room.console .notes,.console .list{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.14)}
#handoff-room.console .notes h3,.console .list h3{color:#E7ECF4}
#handoff-room.console .nt{border-color:rgba(255,255,255,.08);color:#C2CEDF}
#handoff-room.console .row{border-color:rgba(255,255,255,.1);color:#C2CEDF}
#handoff-room.console .off .nm{color:#E7ECF4}
#handoff-room.console .off .out{color:#8FA0B8}
#handoff-room.console .win{background:#000}
/* three columns on a wide screen: controls, the room, the record.
The grid goes on .hr-wrap, not on the room. The room's real structure is
#handoff-room > .hr-wrap > (.steps, .bar, .say, .mgrid > .stack + .stack),
so gridding the room put the columns on the wrong element and the film came
out 290px wide in a 772px track. display:contents on .mgrid lifts the two
stacks into .hr-wrap's grid, where they land in columns 2 and 3. */
@media(min-width:1280px){
#handoff-room.console{padding:26px 0 34px}
#handoff-room.console > .hr-wrap{display:grid;
grid-template-columns:220px minmax(0,1fr) 300px;
grid-template-rows:auto auto auto 1fr;
gap:0 24px;align-items:start;max-width:1600px}
#handoff-room.console > .hr-wrap > .steps{grid-column:1;grid-row:1;flex-direction:column;margin:0}
#handoff-room.console > .hr-wrap > .bar{grid-column:1;grid-row:2;flex-direction:column;
align-items:stretch;margin:14px 0 0}
#handoff-room.console > .hr-wrap > .bar .hr-btn{width:100%}
#handoff-room.console > .hr-wrap > .say{grid-column:1;grid-row:3;margin:10px 0 0}
#handoff-room.console .step{flex:1 1 auto;text-align:left;border-right:none;
border-bottom:1px solid rgba(255,255,255,.12);font-size:11.5px}
#handoff-room.console .step:last-child{border-bottom:none}
#handoff-room.console .mgrid{display:contents}
#handoff-room.console .mgrid > .stack:first-child{grid-column:2;grid-row:1/span 4;min-width:0;margin:0}
#handoff-room.console .mgrid > .stack:last-child{grid-column:3;grid-row:1/span 4;min-width:0;margin:0}
}
/* the copy, below the console */
.gcopy{background:var(--white);padding:56px 0 52px;border-top:1px solid var(--border)}
.gcopy .eyebrow{color:var(--orange-text);margin:0 0 14px}
.gcopy h1{font-family:var(--font-display);font-weight:700;color:var(--text);
font-size:clamp(28px,4vw,42px);line-height:1.12;margin:0;max-width:20ch}
.gcopy .sub{font-size:16.5px;line-height:1.65;color:var(--muted);max-width:52ch;margin:16px 0 0}
/* The console tiles are narrower than the page ones, so the sign's 19px name
ran past its own card. Scaled to the tile it actually sits in. */
#handoff-room.console .off .sname{font-size:clamp(12px,1vw,15px);line-height:1.1;word-break:break-word}
#handoff-room.console .off .srole{font-size:7.5px}
#handoff-room.console .off .stat{font-size:7.5px;padding:3px 7px}
/* The checklist kept its white panel on a dark surface: the room sets it with
an id selector, which beats a class. */
#handoff-room.console .list{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
#handoff-room.console .list h3{color:#E7ECF4;border-color:rgba(255,255,255,.12)}
#handoff-room.console .row b,#handoff-room.console .row .tt{color:#E7ECF4}
#handoff-room.console .row .st{color:#8FA0B8}
#handoff-room.console .notes .empty,#handoff-room.console .list .empty{color:#8FA0B8}
#handoff-room.console .bk{border-color:rgba(255,255,255,.3)}
/* ---------------- G, the services section reads as one ----------------
Nina: "there should be something distinct where it says three ways to work
with each other to make sure we know it's a new section" and "I don't think
we should say three ways we should work together... either how we work
together or services we provide."
Measured cause: .gcopy and .offers were both rgb(255,255,255) with no border
between them, so two white blocks butted together with nothing to mark the
change. The site's own convention for an alternating section is --soft, so
this uses that rather than inventing a new surface, plus a rule and an
eyebrow. */
#handoff-room.console ~ .offers,
.gcopy + .offers{background:var(--soft);border-top:1px solid var(--border);
padding:60px 0 64px}
.gcopy + .offers .kicker .eyebrow{color:var(--orange-text);margin:0 0 10px}
.gcopy + .offers .kicker h2{margin:0}
.gcopy + .offers .offer-card{background:var(--white)}
/* a hairline of brand colour at the seam, so the change of subject is visible
before a word is read */
.gcopy + .offers{box-shadow:inset 0 3px 0 0 var(--orange)}
/* ---------------- G, three lanes of work, not three things to buy -------
Nina: "I don't think we should have assessment implementation and then
retainer there... there's the AI enablement part, AI implementation part,
and then there's one more thing."
The three engagements are how you buy. The lanes are what we do, which is
what her conference audience is actually shopping for. Colours follow the
matching capability cards on services.html: training is orange there,
builds blue, policy and governance green. Scoped to this section so the
shared .offer-card rules in styles.css stay untouched for index and the
other layouts. */
.gcopy + .offers .offer-card.enablement{border-left-color:var(--teal)}
.gcopy + .offers .offer-card.build{border-left-color:var(--orange)}
.gcopy + .offers .offer-card.operations{border-left-color:var(--green)}
/* ---------------- G below the console breakpoint ----------------------
Measured fault: the room's own rule at min-width:980px splits .mgrid into
1.3fr / .8fr, so between 980 and 1280 the film shared its row with the
notes column. The film went 724px wide at 768, DOWN to 643px at 1100, then
back up. Wider viewport, smaller film.
Any move from one column to two costs the film width, so the dip cannot be
removed, only placed. Below 1280 this keeps a single centred column capped
near the console's own film width, which makes the whole band read as one
stack and leaves roughly 50px between the widest stacked film and the
console's 668px at 1280, instead of a 567px cliff. */
@media (max-width:1279.98px){
#handoff-room.console > .hr-wrap{max-width:760px}
#handoff-room.console .mgrid{grid-template-columns:1fr;gap:18px}
}
/* =======================================================================
ONE STAGE, FULL WIDTH. Nina, 2026-08-23: "I like the hero banner all the
way across", "yes I want the approval at the top... once they finish
their work it goes back up to the top for approval."
The two rails are gone. They cost the film 568px on desktop and forced a
second layout below 1280 that behaved differently from the phone. One
column at every width means one design, and it removes the breakpoint
cliff entirely rather than minimising it.
==================================================================== */
#handoff-room.console > .hr-wrap{max-width:1180px}
#handoff-room.console .mgrid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:1280px){
/* neutralise the console grid: the wrap is a plain block again, so the
grid-column assignments on .steps, .bar, .say and the stacks are inert */
#handoff-room.console > .hr-wrap{display:block;max-width:1180px}
#handoff-room.console .mgrid{display:grid;grid-template-columns:1fr}
#handoff-room.console > .hr-wrap > .steps{flex-direction:row}
#handoff-room.console > .hr-wrap > .bar{flex-direction:row;align-items:center;margin:14px 0 0}
#handoff-room.console > .hr-wrap > .bar .hr-btn{width:auto}
#handoff-room.console .step{flex:1 1 0;text-align:center;border-bottom:none;
border-right:1px solid rgba(255,255,255,.12)}
#handoff-room.console .step:last-child{border-right:none}
/* the stacks still carried grid-column:2 and :3 from the console block, so
with one explicit column they landed in implicit columns sized by content
and the film came out 450px wide. Same specificity as the rules that set
them, so these have to name :first-child and :last-child too. */
#handoff-room.console .mgrid > .stack:first-child,
#handoff-room.console .mgrid > .stack:last-child{grid-column:auto;grid-row:auto;min-width:0}
}
/* =======================================================================
THE FILM BREAKS OUT OF THE COLUMN. Nina, 2026-08-25: comparing this page
to the Services and Library rooms, which run edge to edge: "if you click
on services, it's full screen... if you click on home, I thought we did
full screen there too, but it's not... at least the video part needs to
be straight across full screen."
"Full width" in 2026-08-23 above meant full width OF THE 1180PX COLUMN,
which still read as boxed next to the rooms. This is the actual room
pattern applied to the film: break just the first stack (the film, its
wires, and the office tiles it draws them to) out to the viewport edge,
the way a full-bleed photo breaks out of a text column. The steps, the
"say" line, and the notes/list column stay in the padded .hr-wrap either
side of it, so only the film itself goes edge to edge.
==================================================================== */
#handoff-room.console .mgrid > .stack:first-child{
width:100vw; max-width:100vw;
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
/* ---------------- the stage before you press it ------------------------
Nina, 2026-08-23: "maybe you can still see the video as if it's supposed
to start but have there be an overlay that makes it look semi-transparent
... once you start it, you see the full video exactly how it's supposed
to be shown."
So the boardroom shows through, dimmed by a SCRIM THAT IS ITS OWN
ELEMENT. It is never a filter or an opacity on the video, because a
filter would alter an approved clip's appearance, which is the one thing
this branch must not do. On .playing the scrim goes to zero and the video
is untouched. */
#handoff-room .vslot .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
transition:opacity .45s ease;
background:radial-gradient(120% 90% at 50% 45%,rgba(5,8,15,.62),rgba(5,8,15,.86))}
#handoff-room .vslot.playing .scrim{opacity:0}
#handoff-room .vslot .hr-mark .d2{font-size:14px;line-height:1.6;color:#C3CFE0;
margin:10px 0 0;text-wrap:pretty}
#handoff-room .vslot .hr-mark .ov-acts{margin:18px 0 0}
#handoff-room .vslot .hr-mark{max-width:46ch}
/* the working state swaps to its own two lines, so the idle body and the
button have to go with the idle title */
#handoff-room .vslot.working .hr-mark .d2,
#handoff-room .vslot.working .hr-mark .ov-acts{display:none}
/* Reset means nothing until something has run */
#handoff-room .bar{visibility:hidden}
#handoff-room.hr-started .bar{visibility:visible}
/* ---------------- the stage after the work is done --------------------
Nina, 2026-08-23: "once they finish their work it goes back up to the top
for approval... a button as an overlay that turns to approve and the
screen shows something different, like everything that's been done, like
a checklist... then click approve and then it goes to the end card."
Four states of one stage: idle, playing, done, sent. Only .playing leaves
the film uncovered. */
#handoff-room .vslot .gate,
#handoff-room .vslot .ov-end{display:none;position:relative;z-index:2;
width:100%;max-width:620px;padding:26px 24px;text-align:left}
#handoff-room .vslot.done .gate,
#handoff-room .vslot.sent .ov-end{display:block}
#handoff-room .vslot.done .hr-mark,
#handoff-room .vslot.sent .hr-mark{display:none}
/* content decides the height in these two states. aspect-ratio has to go to
auto rather than a height being set, because the slot carries 16/9 and a
height on it makes the RATIO derive the width. */
#handoff-room .vslot.done,
#handoff-room .vslot.sent{aspect-ratio:auto;min-height:340px;padding:26px 0}
#handoff-room .vslot .gate .lb,
#handoff-room .vslot .ov-end .lb{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;
text-transform:uppercase;color:#6FD8A6;display:block;margin:0 0 8px}
#handoff-room .vslot .gate h3,
#handoff-room .vslot .ov-end h3{font-family:var(--fd);font-weight:700;font-size:20px;
color:#EAF0F8;margin:0 0 8px}
#handoff-room .vslot .gate > p,
#handoff-room .vslot .ov-end p{font-size:13.5px;line-height:1.6;color:#A9B7CC;margin:0 0 16px}
/* the checklist: what each AI agent did, and the decision behind it */
#handoff-room .vslot .checks{display:grid;gap:7px;margin:0 0 18px}
#handoff-room .vslot .ck{display:flex;gap:10px;align-items:flex-start}
#handoff-room .vslot .ck .tick{flex:none;width:15px;height:15px;margin-top:2px;border-radius:3px;
background:rgba(29,184,122,.16);border:1px solid rgba(111,216,166,.55);position:relative}
#handoff-room .vslot .ck .tick::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
border:solid #6FD8A6;border-width:0 1.6px 1.6px 0;transform:rotate(43deg)}
#handoff-room .vslot .ck .cx{display:flex;flex-direction:column;line-height:1.35}
#handoff-room .vslot .ck b{font-size:13px;color:#E7ECF4;font-weight:600}
#handoff-room .vslot .ck i{font-style:normal;font-family:var(--fm);font-size:10px;color:#8FA0B8;
letter-spacing:.02em}
#handoff-room .vslot .acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#handoff-room .vslot .acts .hold{font-family:var(--fm);font-size:10px;color:#8FA0B8;
display:flex;align-items:center;gap:6px;flex-basis:100%}
@media (max-width:560px){
#handoff-room .vslot.done,#handoff-room .vslot.sent{padding:18px 0}
#handoff-room .vslot .gate,#handoff-room .vslot .ov-end{padding:18px 16px}
#handoff-room .vslot .gate h3,#handoff-room .vslot .ov-end h3{font-size:17px}
}
/* The scrim is tuned for three lines over a picture. The done and sent states
carry a heading, a paragraph, six checklist rows and two buttons, and at
.62-.86 alpha the boardroom was reading straight through the type. The film
is over by then, so it goes nearly solid and the panel gets its own surface. */
#handoff-room .vslot.done .scrim,
#handoff-room .vslot.sent .scrim{background:rgba(5,8,15,.95)}
#handoff-room .vslot .gate,
#handoff-room .vslot .ov-end{background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.13);border-radius:8px}
/* ---------------- the services section, set like the rest of the page ----
Nina, 2026-08-23: "I think that needs to be formatted like the rest of the
page to bring that in."
Measured difference: everything above it (the eyebrow, the h1, the body)
is left-aligned against the wrap, and this one block was centred, so it
read as a different template dropped into the page. Same alignment and
the same left edge now. */
.gcopy + .offers .kicker{text-align:left;margin-bottom:28px}
.gcopy + .offers .kicker p{max-width:60ch}
/* ---------------- the idle stage on a phone ---------------------------
Nina, 2026-08-23: "make sure that on the mobile device the text fits in
the space correctly."
Measured: the slot is 16/9, so at 390px it is 195px tall and at 320px it
is 155px. The title, the body and the button do not fit in that, and the
slot clips (overflow:hidden), so the text was being cut off the top and
bottom on small phones.
Only the IDLE state is freed. .playing keeps a true 16/9 so the film is
never cropped. aspect-ratio goes to auto rather than a height being set,
because a height on a 16/9 box makes the ratio derive the WIDTH. */
@media (max-width:600px){
#handoff-room .vslot:not(.playing):not(.done):not(.sent){
aspect-ratio:auto;min-height:56vw;padding:26px 4px}
#handoff-room .vslot .hr-mark{max-width:none;padding:0 6px}
#handoff-room .vslot .hr-mark .d2{font-size:13.5px}
}
/* ---------------- the wires belong behind the stage --------------------
Nina, 2026-08-23, from her phone: "it looks like some things are
overlapping."
.wires is z-index 1 and positioned; .vslot had no z-index, so once the
stage grew tall for the checklist the assignment lines painted straight
over the panel and its buttons. The stage gets a stacking level above
them. They still draw, they just sit behind where they belong. */
#handoff-room .filmwrap .vslot{z-index:2}
/* the sticky nav was covering the top of the panel when it scrolled itself
into view, so the heading arrived already cut off */
#handoff-room .filmwrap{scroll-margin-top:88px}
/* ---------------- the lanes as curled sticky notes ---------------------
Nina picked study 2 and said "i dont need the actual shelf", so the paper
comes across and the wooden board does not.
What makes it read as paper rather than a card, taken from the Reading
Room: fibre grain, directional light across the sheet instead of a flat
fill, and a corner that has genuinely vacated its space rather than a
drawn triangle. The corner is two triangles in one square. The outer one
is the hole the corner left, filled with the section behind it. The inner
one is the flap folded back, underside up, brightest along the fold. */
.gcopy + .offers .wrap > .offer-card{
display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
gap:11px;min-height:206px;margin:0;position:relative;border:none;border-radius:0;
padding:26px 24px 30px;color:#2A2318;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(158deg,#FDF6E6 0%,#F6EBD3 44%,#EADBBB 79%,#DDCCA6 100%);
background-size:140px 140px, auto;
box-shadow:
0 1px 0 rgba(255,246,224,.7) inset, 0 -2px 6px rgba(60,42,20,.14) inset,
0 16px 24px -12px rgba(40,30,12,.44), 0 4px 8px -3px rgba(40,30,12,.3);
transition:transform .18s ease, box-shadow .18s ease}
/* each note sits a little differently, the way three notes actually would */
.gcopy + .offers .offer-card.enablement{transform:rotate(-.7deg)}
.gcopy + .offers .offer-card.build{transform:rotate(.5deg)}
.gcopy + .offers .offer-card.operations{transform:rotate(-.35deg)}
/* the hole the corner left */
.gcopy + .offers .wrap > .offer-card::before{
content:"";position:absolute;right:0;bottom:0;width:56px;height:56px;
clip-path:polygon(100% 0,100% 100%,0 100%);
background:var(--soft)}
/* the flap, folded back and catching the light along the fold */
.gcopy + .offers .wrap > .offer-card::after{
content:"";position:absolute;right:0;bottom:0;width:56px;height:56px;
clip-path:polygon(0 0,100% 0,0 100%);
background:linear-gradient(135deg,#FFF9EA 0%,#EFE2C0 34%,#CDB88A 72%,#9A8354 100%);
box-shadow:-9px -9px 15px rgba(40,30,12,.34)}
.gcopy + .offers .wrap > .offer-card:hover{transform:rotate(0deg) translateY(-5px);
box-shadow:0 1px 0 rgba(255,246,224,.7) inset, 0 -2px 6px rgba(60,42,20,.14) inset,
0 26px 32px -12px rgba(40,30,12,.5), 0 6px 10px -3px rgba(40,30,12,.34)}
/* the lane, written on the note rather than a chip stuck to it */
.gcopy + .offers .offer-card h3{color:#231C11;margin:0}
.gcopy + .offers .offer-card p{color:#4A3D28;max-width:none}
.gcopy + .offers .offer-card .go{margin-top:auto;background:#241D12}
.gcopy + .offers .offer-card.enablement h3{border-bottom:3px solid var(--teal)}
.gcopy + .offers .offer-card.build h3{border-bottom:3px solid var(--orange)}
.gcopy + .offers .offer-card.operations h3{border-bottom:3px solid var(--green)}
.gcopy + .offers .offer-card h3{display:inline-block;padding-bottom:3px}
.gcopy + .offers .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 34px;
align-items:stretch}
.gcopy + .offers .kicker{grid-column:1/-1}
@media (max-width:900px){
.gcopy + .offers .wrap{grid-template-columns:1fr;gap:26px}
.gcopy + .offers .wrap > .offer-card{min-height:0}
}