/* ============================================================
CAREERS PAGE (careers.html only)
Scoped under .car-* — reuses tokens + existing components.
============================================================ */
/* ---- awards band ----
Soft, because the quote below it is white now — see the rhythm note. The
pills invert with it: they were the tinted thing on white, now they are the
white thing on tint. The old bottom hairline went with the change; the
colour step to the quote band separates the two on its own. */
.car-awards{padding:32px 0;background:var(--bg-soft);position:relative}
.car-awards__inner{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.car-award{display:flex;align-items:center;gap:12px;padding:8px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);transition:transform .2s var(--ease),box-shadow .2s}
.car-award:hover{transform:translateY(-2px);box-shadow:var(--shadow-xs)}
.car-award__rating{display:inline-flex;align-items:center;gap:4px;color:var(--brand-ink);font-weight:700;font-size:14px}
.car-award__star{width:14px;height:14px;fill:var(--gold);color:var(--gold)}
.car-award__label{font-size:13px;font-weight:600;color:var(--muted)}
.car-award__ico{width:16px;height:16px;color:var(--brand)}
/* ---- quote ----
White band, so the box can no longer be white too — it carries the tint
now, which is the inverse of how this section used to read. */
.car-quote{padding:80px 0;background:#fff;position:relative}
.car-quote::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 0%,rgba(109,14,177,.04),transparent);pointer-events:none}
/* Four stacked layers: an oversized quote-mark watermark, a brand wash from
the bottom-right, a warm gold wash from the top-left, and the soft tint
under all of them. The watermark is a background layer rather than a
pseudo-element precisely so the box needs no overflow:hidden — that was
clipping .car-quote__glyph, which overhangs the top edge by design.
Backgrounds are clipped to the border box anyway, so the bleed still
respects the rounded corners. */
.car-quote__box{position:relative;max-width:820px;margin:0 auto;text-align:center;padding:clamp(40px,5vw,60px) clamp(28px,4vw,52px);border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--line-2);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d0eb1' fill-opacity='.07'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") -34px -30px / 200px no-repeat,
radial-gradient(ellipse 70% 80% at 108% 112%,rgba(109,14,177,.13),transparent 62%),
radial-gradient(ellipse 60% 70% at -8% -12%,rgba(207,169,79,.16),transparent 60%),
linear-gradient(150deg,#fbfbfe 0%,#f3f0fa 100%)}
/* gradient hairline riding the top edge. Inset from the corners so it never
runs past the curve — and it fades to transparent at both ends regardless. */
.car-quote__box::after{content:"";position:absolute;top:0;left:8%;right:8%;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(109,14,177,.5) 35%,rgba(207,169,79,.55) 65%,transparent)}
/* z-index lifts it over the box's ::after hairline, which crosses it at y=0 */
.car-quote__glyph{position:absolute;z-index:2;top:-18px;left:50%;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:var(--grad-cta);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px #fff}
.car-quote__glyph .ico{width:22px;height:22px}
.car-quote__box blockquote{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.2vw,26px);line-height:1.5;letter-spacing:-.01em;color:var(--text);margin:16px 0 0}
.car-quote__divider{display:block;width:40px;height:3px;border-radius:999px;background:var(--grad-cta);margin:24px auto 18px}
.car-quote__by{display:inline-flex;align-items:center;gap:12px;font-size:15px;color:var(--muted)}
.car-quote__avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad-soft);color:var(--brand-ink);font-weight:700;font-size:13px;border:2px solid var(--line-2)}
.car-quote__by b{color:var(--text)}
/* ---- work at drc — brand mark panel ----
The section is built around one idea: the DRC triangle, drawn large on a
dark panel in its own purple-to-gold ramp, with a light sweep travelling
across it. The mark is inline SVG rather than the logo file so it can carry
its own gradient, an offset outline echo, and the clipped shine — none of
which an box directly —
same idiom as .car-dei__item-ic, and padding on an inline SVG is not
reliable across browsers. */
.car-work__tick{display:grid;place-items:center;width:21px;height:21px;flex:none;margin-top:1px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#e9d8a6}
.car-work__tick .ico{width:12px;height:12px;stroke-width:3.2}
.car-work__actions{display:flex;flex-wrap:wrap;gap:12px}
.car-work__actions .btn--glass{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px)}
.car-work__actions .btn--glass:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
/* ---- the aperture ---- */
.car-work__aperture{position:relative;display:grid;place-items:center}
/* halo behind the mark, so the clipped photo reads as lit rather than pasted */
.car-work__aperture::before{content:"";position:absolute;z-index:0;top:50%;left:50%;transform:translate(-50%,-50%);width:76%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(122,32,190,.85),transparent 68%);filter:blur(48px)}
.car-work__mark{position:relative;z-index:1;width:100%;max-width:clamp(270px,33vw,420px);height:auto;overflow:visible;
filter:drop-shadow(0 18px 38px rgba(0,0,0,.45));animation:carFloat 7s var(--ease) infinite alternate}
@keyframes carFloat{to{transform:translateY(-9px)}}
/* offset outline of the same mark, peeking out from behind the filled one */
.car-work__echo path{fill:none;stroke:rgba(207,169,79,.4);stroke-width:1;vector-effect:non-scaling-stroke}
/* light sweeping across the mark, clipped to it. Values are user units, which
is what CSS px resolve to inside an SVG — the rect starts left of the
artboard and travels past its right edge. */
.car-work__shine{animation:carShine 5s var(--ease) infinite}
@keyframes carShine{
0%{transform:translateX(-10px);opacity:0}
14%{opacity:1}
66%{opacity:1}
100%{transform:translateX(122px);opacity:0}
}
@media (prefers-reduced-motion:reduce){
.car-work__mark,.car-work__shine{animation:none}
}
/* ---- stats on the panel ----
Four glass cards rather than a plain divided row: on a dark panel a hairline
rule reads as an afterthought, whereas the translucent cards pick up the
washes behind them and give each number its own object to hover.
The numbers count up the first time they scroll into view. */
.car-work__stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px);margin-top:clamp(34px,4.6vw,54px)}
.car-work__stat{position:relative;overflow:hidden;padding:clamp(18px,2.2vw,26px);border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);
transition:transform .28s var(--ease),background .28s,border-color .28s,box-shadow .28s}
/* accent bar wipes across the top edge on hover */
.car-work__stat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#c4b5fd,#e9c877);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.car-work__stat:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:rgba(233,200,119,.42);box-shadow:0 18px 40px -22px rgba(0,0,0,.85)}
.car-work__stat:hover::before{transform:scaleX(1)}
.car-work__stat-ic{display:grid;place-items:center;width:34px;height:34px;margin-bottom:16px;border-radius:11px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#e9c877}
.car-work__stat-ic .ico{width:16px;height:16px}
/* the star glyph in the sprite is a filled path, not a stroked one, so it
needs the opposite of what the global .ico rule sets */
.car-work__stat-ic .ico--solid{fill:currentColor;stroke:none}
.car-work__stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
background:linear-gradient(120deg,#fff 26%,#e9c877 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.car-work__stat-label{display:block;margin-top:10px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62)}
/* the cards arrive one after another rather than as a single block */
@media (min-width:641px){
.car-work__stats .reveal:nth-child(2){transition-delay:.07s}
.car-work__stats .reveal:nth-child(3){transition-delay:.14s}
.car-work__stats .reveal:nth-child(4){transition-delay:.21s}
}
/* ---- dei — editorial split: sticky intro + numbered initiative rows ---- */
.car-dei{padding:clamp(64px,8vw,96px) 0;background:var(--bg-soft);position:relative;overflow:hidden}
.car-dei::before{content:"";position:absolute;top:-14%;right:-6%;width:540px;height:540px;border-radius:50%;background:var(--grad-soft);filter:blur(90px);opacity:.75;pointer-events:none}
.car-dei__inner{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,72px);align-items:start}
.car-dei__intro{position:sticky;top:104px}
.car-dei__intro h2{font-size:clamp(28px,3.6vw,42px);margin:14px 0 18px}
.car-dei__intro p{font-size:16px;line-height:1.75;color:var(--muted)}
.car-dei__list{display:flex;flex-direction:column;gap:14px}
.car-dei__item{position:relative;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:26px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:transform .28s var(--ease),box-shadow .28s,border-color .28s}
.car-dei__item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-cta);transform:scaleY(0);transform-origin:top;transition:transform .38s var(--ease)}
.car-dei__item:hover{transform:translateX(6px);box-shadow:var(--shadow);border-color:var(--line-2)}
.car-dei__item:hover::before{transform:scaleY(1)}
.car-dei__item-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--grad-soft);border:1px solid var(--line);color:var(--brand)}
.car-dei__item-ic .ico{width:23px;height:23px}
.car-dei__item-num{position:absolute;top:18px;right:22px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--faint);opacity:.55}
.car-dei__item h4{font-size:17px;margin-bottom:7px;letter-spacing:-.01em}
.car-dei__item p{font-size:14.5px;line-height:1.68;color:var(--muted)}
/* ---- why work with us (6 pillars) ---- */
.car-why{padding:84px 0;background:#fff}
.car-why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* ---- hover: the card inverts to the brand panel ----
Five earlier versions missed in different directions — four gestures at once
(lift + --shadow + a bar scaling across the top + a cursor-tracked
spotlight); a flat colour warm that read as nothing happening; the icon tile
filling and glowing; a rule drawing around the perimeter; a heading underline
with an arrow. All of them were decoration applied to a white card.
This one swaps the card's surface outright. The fill is the exact ramp
.car-work__panel uses — linear-gradient(135deg,#11061e,#1e0836,#2c0a4f) — so
a hovered pillar is literally a piece of the Work at DRC Systems panel, not
a new dark colour invented for this section. Type inverts with it on the
same values that panel uses for its own copy, the icon tile becomes the
glass chip .car-work__tick is, and the index watermark comes up in brand
gold, which is the one thing it cannot be on white.
Nothing moves: no lift, no shadow, no scale. The card is the same size and
in the same place; only its colour changes.
Two mechanics worth knowing:
· The dark ramp rides on ::before as an opacity fade, because background-
image is not interpolable — set directly on .car-pillar it would snap.
The pseudo also has to restate width/height/transform, since the shared
sheet's version of ::before is a 4px scaleX(0) bar and those would carry.
· The tile's resting fill is a flat rgba rather than --grad-soft for the
same reason: a gradient will not cross-fade to a solid, and at 50px the
snap was the one visible seam in the transition. */
.car-pillar{position:relative;padding:32px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
transition:border-color .32s var(--ease),transform .32s var(--ease)}
.car-pillar::after{content:none}
.car-pillar::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;transform:none;
z-index:0;pointer-events:none;
background:linear-gradient(135deg,#11061e 0%,#1e0836 44%,#2c0a4f 100%);
opacity:0;transition:opacity .32s var(--ease)}
/* a 3px rise and nothing else carrying it — box-shadow:none is an explicit
reset of the shared sheet's --shadow, which would otherwise fire here. The
rise is shallower than that sheet's 4px because the card is going dark at the
same time, and the colour change is already most of the signal. z-index:1
raises the hovered card over its neighbours so it clears them cleanly as it
lifts rather than being painted over by whichever card comes later. */
.car-pillar:hover{transform:translateY(-3px);box-shadow:none;border-color:transparent;z-index:1}
.car-pillar:hover::before{opacity:1}
/* the watermark paints after ::before at the same z-index, so it sits on the
dark panel rather than under it. Gold only works once the surface is dark,
which is why it is a hover-only colour. The fill is swapped as a flat
gradient because the glyph is painted through background-clip:text. */
.car-pillar__wm{position:absolute;bottom:-8px;right:4px;font-family:var(--display);font-weight:700;font-size:clamp(56px,5vw,72px);line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.06;pointer-events:none;user-select:none;z-index:0;letter-spacing:-.03em;transition:opacity .32s var(--ease)}
.car-pillar:hover .car-pillar__wm{background:linear-gradient(#cfa94f,#cfa94f);-webkit-background-clip:text;background-clip:text;opacity:.32}
/* .car-work__tick's glass chip, reached by transition rather than declared */
.car-pillar__ic{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;border-radius:14px;margin-bottom:16px;font-size:24px;background:rgba(109,14,177,.07);border:1px solid var(--line);color:var(--brand);
transition:background .32s var(--ease),border-color .32s,color .32s}
.car-pillar:hover .car-pillar__ic{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.26);color:#fff}
.car-pillar__ic .ico{width:24px;height:24px}
.car-pillar h3{position:relative;z-index:1;font-size:18px;margin-bottom:8px;transition:color .32s var(--ease)}
.car-pillar p{position:relative;z-index:1;font-size:14.5px;line-height:1.65;color:var(--muted);transition:color .32s var(--ease)}
.car-pillar:hover h3{color:#fff}
.car-pillar:hover p{color:rgba(255,255,255,.78)}
/* ============================================================
SECTION BACKGROUND RHYTHM — one source of truth
Every band must differ from the one above it, or two sections read as
a single run-on block. The order down the page is:
video #000
awards soft <- was #fff, tied with .car-quote once that went white
quote #fff (its box carries the tint instead)
work dark (full-bleed brand panel)
dei soft
why #fff
culture soft <- was #fff, tied with .car-why above it
roles #fff <- was soft, tied with .car-fun below it
fun soft
reviews #fff <- was soft, tied with .car-fun above it
footer dark
============================================================ */
/* ---- inclusive culture — immersive image panel (live culture-img-2.webp) ---- */
.car-culture{padding:clamp(64px,8vw,96px) 0;background:var(--bg-soft)}
.car-culture__panel{position:relative;isolation:isolate;display:grid;align-items:center;min-height:clamp(440px,50vw,580px);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.car-culture__media{position:absolute;inset:0;z-index:0}
.car-culture__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease)}
.car-culture__panel:hover .car-culture__media img{transform:scale(1.06)}
.car-culture__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
linear-gradient(100deg,rgba(10,14,30,.94) 0%,rgba(10,14,30,.86) 32%,rgba(10,14,30,.52) 58%,rgba(10,14,30,.16) 100%),
radial-gradient(ellipse 60% 80% at 100% 50%,rgba(109,14,177,.30),transparent 70%)}
.car-culture__copy{position:relative;z-index:2;max-width:640px;padding:clamp(34px,4.6vw,66px)}
.car-culture__copy h2{color:#fff;font-size:clamp(28px,3.6vw,44px);letter-spacing:-.02em;margin-bottom:18px}
.car-culture__copy p{color:rgba(255,255,255,.84);font-size:16px;line-height:1.78}
.car-culture__copy p+p{margin-top:14px}
/* ---- open roles ----
Four passes are worth recording, because each failed differently:
· three columns of rounded cards that lifted, hazed, drew a bar and swept a
gradient pill on the same hover — restless, and the composition was
.car-why__grid's, two sections up;
· a bare hairline list — at container width a row was a title, half a screen
of nothing, then a button;
· that list with a column rule over it — the heavy rule read as a table
header pasted onto the page and the rows still had no body;
· seven cards on a 7/5 asymmetric grid — seven boxes is still seven boxes.
What careers pages that work actually do (Stripe, Notion, and every job
board built since) is one contained panel of divided rows: the openings are
a single object on the page, not seven competing ones. That is what this is.
One panel, hairlines between rows, no grouping and no dividers inside it.
The row body is the reason the earlier lists read as empty — a title alone
on a full-width row has nothing to hold it. Here it carries the vocabulary
the shared careers sheet already defines: .car-role__meta chips for the two
short facts, and the .car-role__qual line under them for the long one.
Hover is one idea in three places: the row warms to --bg-soft, and because
the chips were the tinted things on white they invert to white, while the
CTA fills. Nothing moves except the arrow.
Shared with the rest of the page: the .sec-head block untouched, the
clamp(64px,8vw,96px) band, --radius-lg and --shadow on the panel, the
.car-role__tag / .car-role__qual pattern from css/styles.css, and the CTA
pill filling with --grad-cta exactly as .car-fun__tab.is-active does.
Every property this block inherits from css/styles.css lines ~1410-1435 is
restated here, because that older careers block still ships. */
.car-roles{padding:clamp(64px,8vw,96px) 0;background:#fff}
/* ---- the panel ----
One object. overflow:hidden so the first and last rows highlight inside the
radius rather than squaring off its corners. Resets the shared sheet's
860px flex column — the panel runs the full container width, so it shares
an edge with the heading above it. */
.car-roles__list{display:block;max-width:none;margin:0;
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
box-shadow:var(--shadow);overflow:hidden}
/* ---- the row ----
The index spans the full height on the left, the CTA the full height on the
right, and the body runs between them: title, chips, qualification. */
.car-role{display:grid;
grid-template-columns:clamp(34px,3.4vw,50px) minmax(0,1fr) auto;
grid-template-areas:"no title cta"
"no meta cta"
"no qual cta";
column-gap:clamp(12px,1.6vw,22px);
align-items:start;
padding:clamp(22px,2.4vw,30px) clamp(20px,2.4vw,32px);
background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;
transition:background .22s var(--ease)}
.car-role+.car-role{border-top:1px solid var(--line)}
.car-role:hover,.car-role:focus-within{background:var(--bg-soft);transform:none;box-shadow:none}
.car-role__no{grid-area:no;align-self:start;padding-top:.3em;
font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.16em;
font-variant-numeric:tabular-nums;line-height:1;color:var(--faint);opacity:.6;
transition:color .22s,opacity .22s}
.car-role:hover .car-role__no,.car-role:focus-within .car-role__no{color:var(--brand);opacity:1}
/* the row's weight; nothing else on the row competes with it */
.car-role__title{grid-area:title;margin:0;font-size:clamp(17.5px,1.6vw,21px);font-weight:600;line-height:1.28;letter-spacing:-.015em;color:var(--text);text-wrap:balance}
/* ---- chips ----
.car-role__tag as the shared sheet defines it, restated so the hover
inversion can hang off it: at rest they are the tinted objects on a white
row, so when the row itself goes tinted they go white — the same trade
.car-award makes on the soft awards band. */
.car-role__meta{grid-area:meta;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:11px}
.car-role__tag{display:inline-flex;align-items:center;gap:6px;padding:5px 13px 5px 10px;
font-size:12.5px;font-weight:600;line-height:1.4;color:var(--faint);
background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;
white-space:nowrap;transition:background .22s,border-color .22s,color .22s}
.car-role__tag .ico{width:13px;height:13px;flex:none;color:var(--brand)}
.car-role:hover .car-role__tag,.car-role:focus-within .car-role__tag{background:#fff;border-color:var(--line-2);color:var(--muted)}
/* qualification is prose and the one field whose length varies by sixty
characters, so it takes its own line rather than a chip that would wrap */
.car-role__qual{grid-area:qual;display:flex;align-items:flex-start;gap:8px;margin:11px 0 0;padding:0;
font-size:13.5px;font-weight:400;line-height:1.55;color:var(--muted);max-width:62ch}
.car-role__qual .ico{width:14px;height:14px;flex:none;margin-top:3px;color:var(--gold-ink)}
/* ---- CTA ----
The site's pill, at rest exactly as .car-fun__tab and filling with
--grad-cta exactly as .car-fun__tab.is-active. It answers to the row so the
whole row is one target, and to itself for the keyboard. */
.car-role__btn{grid-area:cta;align-self:center;
display:inline-flex;align-items:center;gap:9px;
padding:10px 22px;border:1px solid var(--line-2);border-radius:999px;
background:#fff;box-shadow:none;
font-size:13.5px;font-weight:600;letter-spacing:-.005em;
color:var(--brand-ink);white-space:nowrap;
transition:color .22s,background .22s,border-color .22s,box-shadow .22s}
.car-role__btn span{display:inline-block;width:auto;height:auto;border:0;border-radius:0;background:none;font-size:14px;line-height:1;transition:transform .22s var(--ease)}
.car-role:hover .car-role__btn,
.car-role__btn:hover,
.car-role__btn:focus-visible{color:#fff;background:var(--grad-cta);border-color:transparent;box-shadow:var(--shadow-sm)}
.car-role:hover .car-role__btn span,.car-role__btn:hover span{transform:translateX(3px)}
.car-role__btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* the chips and the qualification line carry their field name for screen
readers, since sighted readers get it from the icon */
.car-roles .u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* ---- fun moments / gallery ---- */
.car-fun{padding:84px 0;background:var(--bg-soft)}
.car-fun__tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-bottom:36px}
.car-fun__tab{padding:10px 22px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line-2);cursor:pointer;transition:color .2s,background .2s,border-color .2s,box-shadow .2s}
.car-fun__tab:hover{color:var(--brand-ink);border-color:var(--brand)}
.car-fun__tab.is-active{color:#fff;background:var(--grad-cta);border-color:transparent;box-shadow:var(--shadow-sm)}
.car-fun__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.car-fun__panel:not(.is-active){display:none}
.car-fun__panel.is-active{animation:carFade .35s var(--ease) both}
@keyframes carFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* card proportions mirror the live site: .img-gridcol is min-height:430px
(350px on smaller screens) with the thumbnail absolutely filling it. */
.car-fun__card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:auto;min-height:430px;background:var(--grad-soft);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s;cursor:pointer;display:block}
.car-fun__card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.car-fun__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.car-fun__card:hover img{transform:scale(1.06)}
.car-fun__card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,23,42,.85) 8%,transparent 55%);display:flex;align-items:flex-end;padding:20px;z-index:1;pointer-events:none}
.car-fun__card-overlay h4{color:#fff;font-size:16px;font-weight:600;letter-spacing:-.01em}
.car-fun__card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:2;transition:transform .25s var(--ease),background .25s}
.car-fun__card-play svg{width:24px;height:24px;color:#fff;margin-left:3px}
.car-fun__card:hover .car-fun__card-play{transform:translate(-50%,-50%) scale(1.1);background:rgba(255,255,255,.3)}
/* ---- staggered reveal ---- */
@media (min-width:641px){
.car-why__grid .reveal:nth-child(3n+2){transition-delay:.07s}
.car-why__grid .reveal:nth-child(3n+3){transition-delay:.14s}
/* the roster carries no stagger: it is one row per line, so each row already
crosses the observer threshold on its own beat. Delaying them on top of
that just made the section arrive late. */
}
/* ---- careers responsive ---- */
@media (max-width:1080px){
.car-why__grid{grid-template-columns:repeat(2,1fr)}
.car-dei__inner{grid-template-columns:1fr;gap:36px}
.car-dei__intro{position:static}
/* the mark leads on narrow screens, copy follows underneath it */
.car-work__grid{grid-template-columns:1fr;gap:clamp(32px,6vw,48px)}
.car-work__aperture{order:-1}
.car-work__mark{max-width:min(320px,62vw)}
}
@media (max-width:900px){
.car-fun__grid{grid-template-columns:repeat(2,1fr)}
.car-fun__card{min-height:350px}
}
@media (max-width:760px){
.car-work__stats{grid-template-columns:repeat(2,1fr)}
}
/* ---- the roles panel, narrow ----
One step, at the width where a title, three facts and a pill stop sharing a
line: the CTA drops out of the right column and onto its own row under the
qualification, still indented past the index so the row keeps one left edge.
Below 560px the index column narrows and the chips are free to wrap. */
@media (max-width:820px){
.car-role{grid-template-areas:"no title"
"no meta"
"no qual"
"no cta"}
.car-role__btn{justify-self:start;align-self:start;margin-top:16px}
}
@media (max-width:560px){
.car-role{grid-template-columns:28px minmax(0,1fr);column-gap:12px;padding:22px 18px}
.car-role__no{font-size:11.5px;letter-spacing:.12em}
.car-role__title{font-size:17px}
.car-role__qual{font-size:13px}
.car-role__tag{white-space:normal}
}
@media (max-width:640px){
.car-why__grid,.car-fun__grid{grid-template-columns:1fr}
.car-awards__inner{gap:12px}
.car-award{padding:6px 14px}
.car-fun__tabs{gap:4px}
.car-fun__tab{padding:8px 16px;font-size:13px}
.car-dei__item{padding:22px 20px;gap:16px}
.car-dei__item-ic{width:46px;height:46px}
}
@media (max-width:420px){
.car-why__grid{grid-template-columns:1fr}
}
/* With motion reduced both careers hovers keep their whole result — the roles
row still warms, the pillar still inverts — and only the travel goes: the
roles arrow stays put and the invert lands instead of fading. */
@media (prefers-reduced-motion:reduce){
.car-role,.car-role__no,.car-role__tag,.car-role__btn,.car-role__btn span{transition:none}
.car-role:hover .car-role__btn span,.car-role__btn:hover span{transform:none}
.car-pillar,.car-pillar::before,.car-pillar__wm,.car-pillar__ic,.car-pillar h3,.car-pillar p{transition:none}
.car-pillar:hover{transform:none}
}
/* ============================================================
CAREERS — components added for this page
============================================================ */
/* ---- video banner — matched to the live site ----
Same geometry and same embed parameters as careers.drcsystems.com:
.video-wrap is padding-bottom:40% with the iframe at height:100.5%.
Deliberately NOT pointer-events:none — the live player is interactive,
which is what surfaces YouTube's own overlay chrome (title, and the
"Watch on YouTube" link bottom-right). Blocking pointers hid it. */
.car-video{position:relative;background:#000;line-height:0}
/* Height is held between a floor and a ceiling instead of tracking width
outright — 40vw alone collapsed the banner to a sliver on phones and
ballooned it past the fold on ultra-wide screens. */
.car-video__wrap{--vh:clamp(300px,40vw,560px);position:relative;width:100%;max-width:100%;height:var(--vh);overflow:hidden}
/* object-fit does nothing to an iframe, so cover is done by hand: the player
is held at a true 16:9 box scaled to whichever dimension is short, then
centred so the wrapper crops the overflow. No letterbox bars either way. */
.car-video__wrap iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,calc(var(--vh) * 16 / 9));height:max(var(--vh),56.25vw);border:none}
/* ---- employee reviews ---- */
/* white band (see rhythm note) — the card's own .car-review__aside carries the
soft tint, so the panel still separates from the page without a grey band. */
.car-reviews{padding:clamp(64px,8vw,96px) 0;background:#fff}
/* the head is the shared .sec-head now — it was a bespoke copy of the same
720px/centred/46px rule that simply had no .sec-kicker, which left this the
one section on the page opening without the pill */
/* slider: one review per view. The track is one flex row translated by whole
slides; --rv-per / --rv-gap are the single source of truth and the script
reads the rendered geometry rather than duplicating them. The viewport
height animates to the active slide so short reviews leave no dead space. */
.car-reviews__slider{position:relative;max-width:1040px;margin:0 auto}
/* No padding lane here any more. It existed only to stop .car-review's
box-shadow being sliced off by this element's overflow:hidden — the clip is
what hides the off-screen slides, so it clipped the cast too. With the card's
shadow gone there is nothing to protect, and a lane on the sides is a window
the neighbouring slide can peek through, so it is better at zero.
If a shadow is ever put back on .car-review, this needs a padding lane sized
to its real extent with a matching negative margin, and the sides cannot
exceed --rv-gap (24px) or the next card shows. syncHeight() in the slider
script reads whatever padding is here off the computed style, so it follows
automatically. */
.car-reviews__viewport{overflow:hidden;transition:height .5s var(--ease)}
.car-reviews__track{display:flex;align-items:flex-start;--rv-per:1;--rv-gap:24px;gap:var(--rv-gap);transition:transform .55s var(--ease);will-change:transform}
.car-reviews__slider.is-dragging .car-reviews__track{transition:none;cursor:grabbing}
/* the panel: identity rail on the left, quote on the right */
/* no box-shadow: inside the clipping viewport it could only ever be a cast with
its edges sliced off. The hairline plus the tinted .car-review__aside carry
the card on the white band on their own — see the rhythm note above. */
.car-review{position:relative;flex:0 0 calc((100% - (var(--rv-per) - 1) * var(--rv-gap)) / var(--rv-per));display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
/* identity half — a solid brand panel that stretches the full height of the
slide, so it reads as deliberate whether the quote runs 1 or 5 paragraphs.
The two halves meet edge to edge; the card itself carries no inner padding. */
.car-review__aside{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.6vw,46px);background:var(--grad-soft);border-right:1px solid var(--line);color:var(--text)}
.car-review__avatar{display:grid;place-items:center;width:100%;height:auto;min-width:66px;border-radius:50%;background:#fff;border:1px solid var(--line-2);color:var(--brand-ink);font-family:var(--display);font-weight:700;font-size:21px;margin-bottom:20px;box-shadow:var(--shadow-xs)}
.car-review__who{display:block;min-width:0}
.car-review__name{display:block;font-family:var(--display);font-weight:600;font-size:clamp(17px,1.7vw,20px);line-height:1.25;color:var(--text);letter-spacing:-.01em}
.car-review__role{display:block;margin-top:6px;font-size:13px;font-weight:500;color:var(--faint)}
.car-review__rule{display:block;width:40px;height:3px;border-radius:999px;background:var(--grad-cta);margin-top:22px}
/* quote half */
.car-review__body{padding:clamp(30px,4.4vw,38px)}
.car-review__glyph{width:34px;height:34px;color:var(--brand);opacity:.2;margin-bottom:16px}
.car-review__body p{font-size:clamp(14.5px,1.3vw,16px);line-height:1.85;color:var(--muted)}
/* opening paragraph leads the card */
.car-review__body p:first-of-type{color:var(--text);font-size:clamp(15.5px,1.5vw,18px);line-height:1.7}
.car-review__body p+p{margin-top:14px}
/* controls */
.car-reviews__controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px}
.car-reviews__nav{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line-2);color:var(--brand);transition:background .25s,color .25s,border-color .25s,box-shadow .25s,opacity .2s}
.car-reviews__nav:hover:not(:disabled){background:var(--grad-cta);color:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}
.car-reviews__nav:disabled{opacity:.3;cursor:not-allowed}
.car-reviews__nav .ico{width:18px;height:18px}
.car-reviews__nav[data-dir="-1"] .ico{transform:rotate(180deg)}
@media (min-width:641px){
.car-dei__list .reveal:nth-child(2){transition-delay:.08s}
.car-dei__list .reveal:nth-child(3){transition-delay:.16s}
}
@media (max-width:820px){
/* stack: the brand panel becomes a header strip above the quote */
.car-review{grid-template-columns:1fr}
.car-review__aside{flex-direction:row;align-items:center;gap:16px;padding:22px 24px;border-right:0;border-bottom:1px solid var(--line)}
.car-review__avatar{width:52px;height:52px;min-width:52px;font-size:17px;margin-bottom:0}
.car-review__rule{display:none}
.car-review__body{padding:28px 24px}
}
@media (max-width:768px){
/* stack the culture panel: image reads at the top, copy on a vertical scrim */
.car-culture__panel{min-height:0}
.car-culture__scrim{background:linear-gradient(to bottom,rgba(10,14,30,.45) 0%,rgba(10,14,30,.86) 40%,rgba(10,14,30,.96) 100%)}
.car-culture__copy{max-width:none;padding-top:clamp(190px,44vw,280px)}
}
@media (max-width:640px){
}
/* ---- WordPress data-driven additions ----
The static mockup never showed a real photo in the review avatar (always
initials) or a real image inside the "why work with us" icon tile
(always an inline SVG) — these two rules size those elements now that
they can come from an uploaded image. */
.car-review__avatar{overflow:hidden;padding:0}
.car-review__avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.car-pillar__ic img{width:24px;height:24px;object-fit:contain}