/* ============================================================
Libra Intelligence — v2
Structure learned from the references she chose: image-led,
one enormous number per case, tight geometric display type,
a huge low-contrast background artwork, a named method.
Palette stays hers: ink, ivory, champagne. No blue, no glow.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&display=swap');
:root {
/* Apple's dark tokens, measured from apple.com. They land exactly on her
monochrome rule — near-black surfaces, near-white text, no accent hue. */
--ink: #000000; /* body background */
--ink-2: #161617; /* secondary background */
--ink-3: #1d1d1f; /* tertiary — the card grey */
--ivory: #f5f5f7; /* the light section */
--paper: #ffffff;
--champagne: #f5f5f7; /* "accent" is the text colour; there is no second hue */
--bronze: #1d1d1f;
--fg: #f5f5f7; /* never pure white on black */
--fg-2: #86868b; /* secondary */
--fg-3: #6e6e73; /* tertiary */
--on-light: #1d1d1f; /* never pure black on white */
--on-light-2: #6e6e73;
--line: #424245;
--line-2: rgba(255,255,255,0.4);
--line-light: #d2d2d7;
/* One typeface, many weights. Heebo only carries the Hebrew the system
stack cannot, and sits behind it. */
--display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"Helvetica Neue", Helvetica, Arial, "Heebo", sans-serif;
--body: var(--display);
--serif: "Cormorant Garamond", Georgia, serif; /* the wordmark only */
/* Apple's fixed scale — no fluid type. Steps, not clamps. */
--fs-hero: 48px;
--fs-h2: 32px;
--fs-h3: 24px;
--fs-card: 21px;
--fs-huge: 48px;
--fs-lead: 19px;
--fs-body: 17px;
--fs-sm: 14px;
--fs-eyebrow: 12px;
--r: 12px; /* medium cards */
--r-lg: 28px; /* large feature tiles */
--r-btn: 980px; /* capsules */
--gutter: 22px;
--max: 980px; /* the content column */
--prose: 692px; /* the text column */
--ease: cubic-bezier(.4, 0, .6, 1);
--dur: 240ms;
}
@media (min-width: 735px) {
:root {
--fs-hero: 64px; --fs-h2: 40px; --fs-h3: 28px; --fs-card: 24px;
--fs-huge: 64px; --fs-lead: 21px;
}
}
@media (min-width: 1069px) {
:root {
--fs-hero: 80px; --fs-h2: 48px; --fs-h3: 32px; --fs-card: 28px;
--fs-huge: 80px; --fs-lead: 21px;
}
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
margin: 0;
background: var(--ink);
color: var(--fg);
font-family: var(--body);
font-size: var(--fs-body);
line-height: 1.4706;
letter-spacing: -0.022em;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
/* apple.com chapter rhythm: 60px small, 64px medium, 60–82px large,
and 100–150px for a hero or a full-bleed chapter. */
section { padding: 60px 0; position: relative; scroll-margin-top: 84px; }
@media (min-width: 735px) { section { padding: 64px 0; } }
@media (min-width: 1069px) { section { padding: 82px 0; } }
.case { scroll-margin-top: 96px; }
.light { background: var(--ivory); color: var(--on-light); }
.tint { background: var(--ink-3); }
.light .lead, .light p { color: var(--on-light-2); }
/* ---------- Type ---------- */
.eyebrow {
display: block;
font-family: var(--display);
font-size: var(--fs-lead);
font-weight: 600;
letter-spacing: 0.011em;
color: var(--fg-2);
margin: 0 0 0.4em;
}
.light .eyebrow { color: var(--bronze); }
.display { font-family: var(--display); font-size: var(--fs-hero); font-weight: 600; line-height: 1.0835; letter-spacing: -0.003em; }
.h2 { font-family: var(--display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.125; letter-spacing: 0.002em; }
.h3 { font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.1667; letter-spacing: 0.009em; }
.h-card { font-family: var(--display); font-size: var(--fs-card); font-weight: 600; line-height: 1.1905; letter-spacing: 0.011em; }
@media (min-width: 735px) {
.display { line-height: 1.0625; letter-spacing: -0.009em; }
.h2 { line-height: 1.1; letter-spacing: 0; }
.h3 { line-height: 1.1429; letter-spacing: 0.007em; }
.h-card { line-height: 1.1667; letter-spacing: 0.009em; }
}
@media (min-width: 1069px) {
.display { line-height: 1.05; letter-spacing: -0.015em; }
.h2 { line-height: 1.0835; letter-spacing: -0.002em; }
.h3 { line-height: 1.125; letter-spacing: 0.002em; }
.h-card { line-height: 1.1429; letter-spacing: 0.007em; }
}
.lead { font-size: var(--fs-lead); line-height: 1.1905; letter-spacing: 0.011em; color: var(--fg-2); max-width: var(--prose); margin: 0.8em 0 0; font-weight: 400; }
.huge { font-family: var(--display); font-size: var(--fs-huge); font-weight: 600; line-height: 1.05; letter-spacing: -0.015em; display: block; }
/* ---------- Background artwork ---------- */
/* A huge, almost-invisible drawing behind a section — the move the
reference uses on its philosophy page. Never above 0.1 opacity. */
.art {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.art svg { position: absolute; }
.art-scales {
/* Physical inset on purpose: logical properties flip in RTL and the
translate() below does not, which threw the drawing off-canvas. */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(1440px, 150vw);
height: min(960px, 100vw);
opacity: 0.11;
}
.light .art-scales { opacity: 0.13; }
.art-grain {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.35;
mix-blend-mode: overlay;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--display); font-size: 17px; font-weight: 400;
line-height: 1.1765; letter-spacing: -0.022em;
padding: 12px 22px; border-radius: var(--r-btn); min-width: 70px; justify-content: center;
border: 1px solid transparent;
background: var(--fg); color: var(--ink);
cursor: pointer;
transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn-ghost:hover { background: transparent; border-color: var(--fg); }
.light .btn { background: var(--ink); color: var(--fg); }
.light .btn:hover { background: #333; }
.light .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(16,16,16,0.25); }
.light .btn-ghost:hover { border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 17px; }
.arrow-link svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.arrow-link:hover svg { transform: translate(-4px, -4px); }
/* ---------- Nav ---------- */
/* apple.com's global bar: 44px tall, frosted, no keyline of its own */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(22,22,23,0.8);
backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
.nav { background: rgba(22,22,23,0.92); }
}
.nav-in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.nav-mark { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); }
.nav-links a { font-size: 12px; color: rgba(255,255,255,0.8); letter-spacing: -0.01em; transition: color var(--dur) var(--ease); }
.nav-links a:hover { color: var(--fg); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-cta { font-family: var(--display); font-size: 12px; font-weight: 400; padding: 4px 11px; border-radius: var(--r-btn); background: var(--fg); color: var(--ink); transition: background var(--dur) var(--ease); }
.nav-cta:hover { background: var(--fg-2); }
.nav-toggle { display: none; }
/* ---------- Hero ---------- */
/* Hero: eyebrow, headline, intro, two links — centred — then the product,
full-bleed underneath. */
.hero { padding: 80px 0 0; overflow: hidden; text-align: center; }
@media (min-width: 1069px) { .hero { padding: 120px 0 0; } }
.hero .display, .hero .lead { margin-inline: auto; }
.hero .btn-row { justify-content: center; }
.hero-tags { justify-content: center; }
/* the photograph under the hero copy: her three models in a black studio,
edge to edge — the studio black is the page black, so they stand on the
page itself; a soft mask melts the frame's edges into it */
.hero-media {
margin: 48px 0 0;
width: 100%;
aspect-ratio: 6336 / 2688;
overflow: hidden;
background: #000;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 90%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 90%, transparent 100%);
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 734px) { .hero-media { aspect-ratio: 3712 / 4608; margin-top: 32px; } }
.hero .display { max-width: 16ch; }
.hero .display em { font-style: normal; color: var(--champagne); }
.hero .lead { max-width: 54ch; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.hero-tags span {
font-family: var(--display); font-size: 13px; font-weight: 500;
padding: 8px 16px; border-radius: 999px;
border: 1px solid var(--line-2); color: var(--fg-2);
}
/* ---------- Work strip ---------- */
.strip { padding: 0 0 clamp(48px, 7vw, 100px); }
.strip-track {
display: flex; gap: 14px;
padding-inline: var(--gutter);
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-card {
flex: 0 0 auto; width: clamp(170px, 20vw, 268px);
scroll-snap-align: start; position: relative;
border-radius: var(--r); overflow: hidden; background: var(--ink-2);
}
.strip-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 800ms var(--ease); }
.strip-card:hover img { transform: scale(1.05); }
.strip-card b {
position: absolute; inset-block-end: 12px; inset-inline-start: 12px;
font-family: var(--display); font-size: 11px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
text-shadow: 0 1px 14px rgba(0,0,0,0.85);
}
/* ---------- Section head ---------- */
/* Apple centres everything under a headline. A headline on one side with the
intro on the other is the fastest way to stop looking like Apple. */
.head { text-align: center; margin-bottom: 40px; }
.head > div { display: contents; }
.head .lead { margin-inline: auto; margin-block-start: 1.2em; }
.head .eyebrow { margin-inline: auto; }
@media (min-width: 1069px) { .head { margin-bottom: 54px; } }
/* ---------- Case study ---------- */
.case { background: var(--paper); color: var(--on-light); border-radius: var(--r); padding: clamp(16px, 2.2vw, 30px); }
.case-name { font-family: var(--display); font-size: clamp(30px, 3.8vw, 56px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; margin-bottom: clamp(16px, 2vw, 26px); }
/* A before/after pair only reads side by side — it never collapses to one
column, or each square fills the whole screen. The pair is also capped and
centred, so on a wide page it stays a comparison rather than a poster. */
.case-media {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
max-width: 680px;
margin-inline: auto;
}
.case-media-4 { max-width: none; }
.case-media figure { margin: 0; position: relative; }
/* A clamped height instead of a ratio: every image in a row ends up exactly
the same height, and none of them grows without limit on a wide screen. */
.case-media img {
width: 100%;
height: clamp(190px, 24vw, 320px);
object-fit: cover;
border-radius: calc(var(--r) - 2px);
}
.case-media figcaption {
position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
font-family: var(--display); font-size: 11px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
background: rgba(16,16,16,0.6); backdrop-filter: blur(6px);
padding: 7px 14px; border-radius: 999px;
}
.case-body { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 24px 48px; align-items: end; margin-top: clamp(20px, 2.4vw, 34px); }
@media (max-width: 800px) { .case-body { grid-template-columns: 1fr; } }
.case-body p { margin: 0; color: var(--on-light-2); font-size: var(--fs-lead); font-weight: 400; line-height: 1.55; }
/* Grid, not flex-wrap: four metrics must land 4-across or 2x2, never 3+1. */
.case-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px 32px;
margin-top: 28px;
}
@media (max-width: 760px) { .case-metrics { grid-template-columns: repeat(2, 1fr); } }
.metric b { font-family: var(--display); font-size: clamp(36px, 4.4vw, 68px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; display: block; }
.metric span { display: block; font-size: var(--fs-sm); color: var(--on-light-2); margin-top: 4px; }
/* ---------- Method diagram ---------- */
.method-fig { margin: clamp(30px, 4vw, 56px) auto 0; max-width: 900px; }
.method-fig svg { width: 100%; height: auto; }
.pans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 700px) { .pans { grid-template-columns: 1fr; } }
.pan { border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px; background: var(--ink-2); }
.pan .n { font-family: var(--display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.2em; color: var(--champagne); display: block; margin-bottom: 16px; }
.pan p { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--fg-2); font-weight: 400; line-height: 1.55; }
.pan ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.pan li { font-size: var(--fs-sm); color: var(--fg-2); font-weight: 400; padding-inline-start: 16px; position: relative; }
.pan li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--fg-3); }
/* ---------- Old way / our way ---------- */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .versus { grid-template-columns: 1fr; } }
.vs-col { border-radius: var(--r-lg); padding: 40px; border: 0; background: var(--ink-3); }
.vs-col.ours { background: var(--ivory); color: var(--on-light); border-color: var(--ivory); }
.vs-col h3 { margin-bottom: 20px; }
.vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.vs-col li { font-size: var(--fs-body); padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--fg-2); font-weight: 400; }
.vs-col.ours li { border-color: rgba(16,16,16,0.1); color: var(--on-light-2); }
.vs-col li:last-child { border-bottom: 0; }
/* ---------- Services ---------- */
.svc-group + .svc-group { margin-top: clamp(32px, 4vw, 56px); }
.svc-head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.light .svc-head { border-color: var(--line-light); }
.svc-head .n { font-family: var(--display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.2em; color: var(--champagne); }
.light .svc-head .n { color: var(--bronze); }
.svc-grid { display: grid; gap: 12px; }
/* Column counts are chosen so no row is ever left half-empty:
6 items -> 3/2/1, 4 items -> 4/2/1, 3 items -> 3/3/1. */
.svc-grid.of-6 { grid-template-columns: repeat(3, 1fr); }
.svc-grid.of-4 { grid-template-columns: repeat(4, 1fr); }
.svc-grid.of-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) {
.svc-grid.of-6, .svc-grid.of-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.svc-grid.of-6, .svc-grid.of-4, .svc-grid.of-3 { grid-template-columns: 1fr; }
}
/* Apple cards are flat tiles: tertiary fill, generous padding, no border,
no shadow, and nothing happens on hover. */
.svc { background: var(--ink-3); border: 0; border-radius: var(--r-lg); padding: 40px;
display: flex; flex-direction: column; gap: 0.8em; }
.svc p { margin: 0; font-size: var(--fs-body); color: var(--fg-2); line-height: 1.2354; letter-spacing: -0.022em; font-weight: 400; }
.light .svc { background: var(--ivory); }
.light .svc p { color: var(--on-light-2); }
/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }
.step { border: 0; border-radius: var(--r-lg); padding: 40px; background: var(--ink-3); }
.light .step { background: #fff; border-color: var(--line-light); }
.step .n { font-family: var(--display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.2em; color: var(--champagne); display: block; margin-bottom: 20px; }
.light .step .n { color: var(--bronze); }
.step p { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--fg-2); font-weight: 400; line-height: 1.55; }
.light .step p { color: var(--on-light-2); }
/* ---------- Pricing ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier { border: 0; border-radius: var(--r-lg); padding: 40px; display: flex; flex-direction: column; background: var(--ink-3); }
.tier.feature { background: var(--ivory); color: var(--on-light); border-color: var(--ivory); }
.tier-name { font-family: var(--display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 18px; }
.tier.feature .tier-name { color: var(--bronze); }
.tier ul { list-style: none; margin: 20px 0 26px; padding: 0; }
.tier li { font-size: var(--fs-sm); color: var(--fg-2); padding: 9px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.tier.feature li { color: var(--on-light-2); border-color: rgba(16,16,16,0.1); }
.tier .btn { margin-top: auto; justify-content: center; }
/* ---------- FAQ ---------- */
.faq { max-width: 900px; border-top: 1px solid var(--line); }
.light .faq { border-color: var(--line-light); }
.faq details { border-bottom: 1px solid var(--line); }
.light .faq details { border-color: var(--line-light); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 0; font-family: var(--display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--champagne); font-weight: 400; font-size: 28px; line-height: 1; }
.light .faq summary::after { color: var(--bronze); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 22px; color: var(--fg-2); max-width: var(--prose); font-weight: 400; }
.light .faq p { color: var(--on-light-2); }
/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,4vw,72px); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 12px; }
.field input, .field select { width: 100%; font-family: var(--body); font-size: 16px; padding: 16px 18px; background: var(--ink-2); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-btn); }
.field input::placeholder { color: var(--fg-3); }
.field input:focus, .field select:focus { outline: none; border-color: var(--fg); }
.field select option { background: var(--ink-2); color: var(--fg); }
.form-note { font-size: 13px; color: var(--fg-3); margin-top: 14px; }
.direct { display: grid; gap: 12px; margin-top: 30px; }
.direct a { display: flex; align-items: center; gap: 16px; padding: 24px; border: 0; border-radius: var(--r-lg); background: var(--ink-3); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.direct a:hover { background: var(--ink-2); }
.direct b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; }
.direct em { display: block; font-style: normal; font-size: 13px; color: var(--fg-3); }
.direct svg { width: 22px; height: 22px; fill: var(--champagne); flex: 0 0 auto; }
/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding: clamp(48px,6vw,88px) 0 32px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px 28px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot h4 { font-family: var(--display); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 18px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot li a { font-size: var(--fs-sm); color: var(--fg-2); font-weight: 400; }
.foot li a:hover { color: var(--fg); }
.foot-mark { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }
.foot-bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 13px; color: var(--fg-3); }
/* ---------- Floating "leave your details" ---------- */
.wa { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 70; display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--fg); color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 15px; box-shadow: 0 12px 34px rgba(0,0,0,0.5); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.wa:hover { background: #fff; }
.wa svg { width: 19px; height: 19px; fill: currentColor; }
/* ---------- Reveal: enhancement only, never a gate ---------- */
@media (prefers-reduced-motion: no-preference) {
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
}
/* ---------- Mobile ---------- */
@media (max-width: 860px) {
.nav-links { display: none; }
/* The open sheet is read with a thumb, not a cursor: every link is a
full-width row of real type with a 56px target, separated by a hairline. */
.nav-links.open {
display: flex; flex-direction: column; align-items: stretch; gap: 0;
position: absolute; inset-inline: 0; top: 52px;
background: var(--ink); border-bottom: 1px solid var(--line);
padding: 6px var(--gutter) 14px;
max-height: calc(100dvh - 52px); overflow-y: auto; overscroll-behavior: contain;
}
.nav-links.open a {
display: flex; align-items: center; min-height: 56px;
padding: 16px 2px;
font-size: 20px; line-height: 1.25; letter-spacing: -0.015em;
color: var(--fg);
border-block-end: 1px solid var(--line);
-webkit-tap-highlight-color: transparent;
}
.nav-links.open a:last-child { border-block-end: 0; }
.nav-links.open a:active { color: var(--fg-2); }
/* the burger itself gets a full finger target */
.nav-toggle { display: inline-flex; flex-direction: column; gap: 6px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 0; margin-inline-end: -10px; }
.nav-toggle i { display: block; width: 24px; height: 2px; background: var(--fg); }
/* the two controls beside it grow to match */
.nav-cta { font-size: 14px; padding: 9px 16px; }
.wa span { display: none; }
.wa { padding: 16px; }
}
/* ---------- Pricing: real numbers from her own price list ---------- */
.tier .price {
display: block;
font-family: var(--display);
font-size: clamp(34px, 3.6vw, 50px);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1;
margin-top: 14px;
direction: ltr;
text-align: start;
}
.tier .price em {
display: block;
font-style: normal;
font-family: var(--body);
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
color: var(--fg-3);
margin-top: 8px;
direction: rtl;
}
.tier.feature .price em { color: var(--on-light-2); }
.retainer {
margin-top: 12px;
display: grid;
grid-template-columns: minmax(240px, 0.9fr) minmax(0, 2fr);
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
}
@media (max-width: 800px) { .retainer { grid-template-columns: 1fr; } }
.retainer-head { background: var(--fg); color: var(--ink); padding: 32px 26px; }
.retainer-head .tier-name { color: #6B6B6B; }
.retainer-head .h-card { color: var(--ink); }
.retainer-head .price em { color: #545454; }
.retainer-list {
list-style: none;
margin: 0;
padding: 26px;
background: var(--ink-2);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 32px;
align-content: start;
}
@media (max-width: 620px) { .retainer-list { grid-template-columns: 1fr; } }
.retainer-list li {
font-size: var(--fs-sm);
color: var(--fg-2);
font-weight: 400;
padding: 11px 0;
border-bottom: 1px solid var(--line);
}
.addons { margin-top: clamp(32px, 4vw, 56px); }
.addon-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .addon-row { grid-template-columns: repeat(2, 1fr); } }
.addon {
border: 1px solid var(--line);
border-radius: var(--r);
padding: 24px 22px;
background: var(--ink-2);
}
.addon b {
display: block;
font-family: var(--display);
font-size: clamp(26px, 2.6vw, 34px);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1;
direction: ltr;
text-align: start;
}
.addon span { display: block; font-size: 13px; color: var(--fg-3); margin-top: 8px; font-weight: 400; }
/* ---------- Wordmark: the brand book's own serif ---------- */
/* The wordmark is her supplied lockup, not type — LIBRA over INTELLIGENCE.
The ratio is fixed so it never squashes; only the height changes. */
.nav-mark, .foot-mark { display: block; line-height: 0; }
.nav-mark img { height: 22px; width: auto; }
.foot-mark img { height: 46px; width: auto; }
@media (max-width: 620px) {
.nav-mark img { height: 24px; }
.foot-mark img { height: 38px; }
}
/* ---------- Case study chrome ---------- */
.case + .case { margin-top: 14px; }
.case-top {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 20px;
margin-bottom: clamp(14px, 1.8vw, 22px);
}
.case-no, .case-tags {
font-family: var(--display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8a8a8a;
}
.case-tags { margin-inline-start: auto; }
.case-name {
font-family: var(--serif);
font-size: clamp(30px, 4vw, 58px);
font-weight: 500;
letter-spacing: 0.06em;
line-height: 1;
margin: 0;
}
.case-hero { margin: 0; position: relative; }
.case-hero img {
width: 100%;
height: clamp(260px, 40vw, 540px);
object-fit: cover;
border-radius: calc(var(--r) - 2px);
}
/* The campaign name sits under the photograph, not on top of the product. */
.case-hero figcaption {
font-family: var(--serif);
font-size: clamp(19px, 2vw, 28px);
font-weight: 500;
font-style: italic;
letter-spacing: 0.02em;
color: var(--on-light-2);
padding-top: 12px;
text-align: center;
direction: ltr;
}
.case-media-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .case-media-4 { grid-template-columns: 1fr 1fr; } }
.case-media-4 img { height: clamp(220px, 26vw, 400px); }
/* Three across, then one across — both divide evenly, so a row never ends
with a single stranded frame. */
.case-media-3 { max-width: none; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .case-media-3 { grid-template-columns: 1fr; } }
.case-media-3 img { height: clamp(240px, 30vw, 460px); }
/* ---------- Manifesto ---------- */
.manifesto {
background: var(--ivory-soft);
color: var(--on-light);
text-align: center;
padding: clamp(64px, 9vw, 140px) 0;
}
.manifesto blockquote {
margin: 0;
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(26px, 4.2vw, 58px);
line-height: 1.25;
letter-spacing: 0;
direction: ltr;
}
.manifesto .attrib {
display: block;
margin-top: clamp(26px, 3vw, 44px);
font-family: var(--display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #8a8a8a;
direction: ltr;
}
/* ---------- Mobile: equal widths, no ragged edges ---------- */
@media (max-width: 620px) {
/* Apple keeps the pair centred and auto-width even when it wraps. */
.btn-row { justify-content: center; gap: 10px 18px; }
/* Four tags land 2x2 at equal width instead of wrapping ragged. */
.hero-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hero-tags span { text-align: center; }
}
/* ============================================================
Reels — a story row of circles, a feed, and a lightbox
============================================================ */
/* The row is the first thing under the bar, so it opens the page rather than
interrupting it: tight above, a little more below, and a hairline to close it. */
.circles {
padding: clamp(22px, 2.6vw, 34px) 0 clamp(22px, 2.6vw, 34px);
border-bottom: 1px solid var(--line);
}
.circles-track {
display: flex;
gap: clamp(14px, 1.8vw, 26px);
padding-inline: var(--gutter);
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
/* Centred when the row fits, so the page does not open lopsided; `safe`
keeps the first circle reachable once the row is wider than the screen. */
justify-content: safe center;
}
.circles-track::-webkit-scrollbar { display: none; }
.circle {
flex: 0 0 auto;
scroll-snap-align: start;
display: grid;
justify-items: center;
gap: 10px;
width: clamp(76px, 9vw, 104px);
background: none;
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
font: inherit;
}
.circle span.ring {
display: block;
width: 100%;
aspect-ratio: 1;
border-radius: 50%;
padding: 2px;
background: linear-gradient(150deg, #FFFFFF 0%, #6B6B6B 55%, #2A2A2A 100%);
transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.circle:hover span.ring, .circle:focus-visible span.ring { transform: scale(1.05); }
.circle:focus-visible { outline: none; }
.circle:focus-visible span.ring { background: #fff; }
.circle img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--ink);
background: var(--ink-2);
}
.circle b {
font-family: var(--display);
font-size: 12px;
font-weight: 500;
color: var(--fg-2);
text-align: center;
line-height: 1.3;
max-width: 100%;
/* One label wrapping to two lines shifts that circle out of the row.
Every label reserves the same height and truncates instead. */
min-height: 1.3em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.circles-more {
flex: 0 0 auto;
align-self: center;
padding-inline-start: 8px;
}
/* ---------- Reel feed ---------- */
.reels {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(8px, 1.2vw, 16px);
}
@media (max-width: 1000px) { .reels { grid-template-columns: repeat(2, 1fr); } }
.reel {
position: relative;
margin: 0;
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: var(--r);
background: var(--ink-2);
border: 1px solid var(--line);
cursor: pointer;
}
.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel figcaption {
position: absolute;
inset-block-end: 10px;
inset-inline-start: 12px;
font-family: var(--display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 12px rgba(0,0,0,0.85);
}
/* ---------- Lightbox ---------- */
.lb {
position: fixed;
inset: 0;
z-index: 90;
display: none;
place-items: center;
background: rgba(8,8,8,0.94);
backdrop-filter: blur(8px);
padding: 20px;
}
.lb[open], .lb.is-open { display: grid; }
.lb-stage {
position: relative;
width: min(430px, 92vw);
aspect-ratio: 9 / 16;
max-height: 88vh;
border-radius: var(--r);
overflow: hidden;
background: #000;
}
.lb-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.lb-close, .lb-prev, .lb-next {
position: absolute;
z-index: 2;
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.28);
background: rgba(20,20,20,0.65);
color: #fff;
font-size: 20px;
line-height: 1;
cursor: pointer;
display: grid;
place-items: center;
transition: background var(--dur) var(--ease);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.18); }
.lb-close { top: 14px; inset-inline-end: 14px; }
.lb-prev { top: 50%; inset-inline-start: -58px; transform: translateY(-50%); }
.lb-next { top: 50%; inset-inline-end: -58px; transform: translateY(-50%); }
@media (max-width: 620px) {
.lb-prev { inset-inline-start: 10px; }
.lb-next { inset-inline-end: 10px; }
}
.lb-label {
position: absolute;
inset-block-end: 0;
inset-inline: 0;
padding: 40px 18px 16px;
background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
font-family: var(--display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
}
body.lb-lock { overflow: hidden; }
/* ---------- Reels page: a snapping vertical feed ---------- */
.feed {
height: 100dvh;
overflow-y: auto;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
.feed::-webkit-scrollbar { display: none; }
.feed-item {
height: 100dvh;
scroll-snap-align: start;
display: grid;
place-items: center;
position: relative;
}
.feed-item video {
height: min(100dvh - 96px, 90vh);
aspect-ratio: 9 / 16;
width: auto;
max-width: 100%;
object-fit: cover;
border-radius: var(--r);
background: #000;
}
.feed-cap {
position: absolute;
inset-block-end: clamp(24px, 6vh, 60px);
inset-inline-start: 50%;
transform: translateX(-50%);
font-family: var(--display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 14px rgba(0,0,0,0.9);
white-space: nowrap;
}
/* ============================================================
Project viewer — two axes, the way stories behave.
Down = the rest of this project.
Sideways = the next project.
============================================================ */
.pv {
position: fixed;
inset: 0;
z-index: 95;
display: none;
background: #070707;
}
.pv.is-open { display: block; }
body.pv-lock { overflow: hidden; }
/* The rail runs LTR on purpose: RTL horizontal scrolling reports scrollLeft
differently across engines, and snapping becomes unpredictable. The panels
inside stay RTL. */
.pv-rail {
direction: ltr;
display: flex;
height: 100dvh;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
scroll-behavior: smooth;
}
.pv-rail::-webkit-scrollbar { display: none; }
.pv-col {
direction: rtl;
flex: 0 0 100%;
width: 100%;
height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
overflow-y: auto;
overflow-x: hidden;
scroll-snap-type: y mandatory;
scrollbar-width: none;
}
.pv-col::-webkit-scrollbar { display: none; }
.pv-item {
height: 100dvh;
scroll-snap-align: start;
scroll-snap-stop: always;
display: grid;
place-items: center;
padding: 76px 16px 60px;
}
.pv-item img, .pv-item video {
max-width: min(560px, 100%);
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--r);
background: #000;
}
/* ---------- chrome ---------- */
.pv-top {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
z-index: 4;
padding: 14px var(--gutter) 26px;
background: linear-gradient(to bottom, rgba(7,7,7,0.92), transparent);
display: flex;
align-items: center;
gap: 16px;
}
.pv-name {
font-family: var(--display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #fff;
white-space: nowrap;
}
.pv-step {
/* "1 / 15" is a number pair, not Hebrew — it must not mirror. */
direction: ltr;
margin-inline-start: auto;
font-family: var(--display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--fg-3);
white-space: nowrap;
}
.pv-close {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.24);
background: rgba(20,20,20,0.6);
color: #fff;
font-size: 20px;
line-height: 1;
cursor: pointer;
display: grid; place-items: center;
flex: 0 0 auto;
}
.pv-close:hover { background: rgba(255,255,255,0.16); }
/* project bars, one per project, like a stories tray */
.pv-bars { display: flex; gap: 5px; flex: 1 1 auto; min-width: 0; }
.pv-bars i {
flex: 1 1 0;
height: 2px;
background: rgba(255,255,255,0.22);
border-radius: 2px;
transition: background var(--dur) var(--ease);
}
.pv-bars i.on { background: #fff; }
.pv-arrow {
position: absolute;
top: 50%;
z-index: 4;
transform: translateY(-50%);
width: 46px; height: 46px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(20,20,20,0.55);
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: grid; place-items: center;
}
.pv-arrow:hover { background: rgba(255,255,255,0.16); }
.pv-arrow[hidden] { display: none; }
.pv-prev { inset-inline-start: 16px; }
.pv-next { inset-inline-end: 16px; }
@media (max-width: 760px) { .pv-arrow { display: none; } }
.pv-hint {
position: absolute;
inset-block-end: 16px;
inset-inline: 0;
z-index: 4;
text-align: center;
font-family: var(--display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
color: rgba(255,255,255,0.42);
pointer-events: none;
transition: opacity 600ms var(--ease);
}
.pv-hint.gone { opacity: 0; }
/* ---------- The breakdown is a panel over the story, not part of it ---------- */
.pv-unpack {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 10px 20px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.28);
background: rgba(20,20,20,0.55);
color: #fff;
cursor: pointer;
white-space: nowrap;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pv-unpack:hover { background: #fff; color: var(--ink); border-color: #fff; }
.pv-unpack i {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
animation: pulse 1.9s var(--ease) infinite;
}
.pv-unpack[hidden] { display: none; }
@keyframes pulse { 0%,100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }
.pv-map {
position: absolute;
inset: 0;
z-index: 6;
display: none;
place-items: center;
padding: 92px clamp(14px, 3vw, 48px) 56px;
background: rgba(7,7,7,0.97);
backdrop-filter: blur(10px);
}
.pv-map.is-shown { display: grid; animation: panelIn 420ms var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.pv-map .map { justify-self: stretch; margin-inline: auto; }
.pv-map-close {
position: absolute;
inset-block-start: 18px;
inset-inline-start: 18px;
z-index: 3;
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.24);
background: rgba(20,20,20,0.6);
color: #fff;
font-size: 20px;
line-height: 1;
cursor: pointer;
display: grid; place-items: center;
}
.pv-map-close:hover { background: rgba(255,255,255,0.16); }
/* nodes and wires assemble in order, once the panel is open */
.pv-map .node, .pv-map .wire { opacity: 0; transform: translateY(16px); }
.pv-map.is-live .node,
.pv-map.is-live .wire {
animation: nodeIn 620ms var(--ease) forwards;
animation-delay: calc(var(--i, 0) * 190ms);
}
@keyframes nodeIn { to { opacity: 1; transform: none; } }
.pv-map .wire path { stroke-dasharray: 90; stroke-dashoffset: 90; }
.pv-map.is-live .wire path {
animation: drawWire 760ms var(--ease) forwards;
animation-delay: calc(var(--i, 0) * 190ms + 120ms);
}
@keyframes drawWire { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
.pv-map .node, .pv-map .wire { opacity: 1; transform: none; animation: none; }
.pv-map .wire path { stroke-dashoffset: 0; animation: none; }
.pv-map.is-shown { animation: none; }
}
/* ---------- The wires carry something ---------- */
.wire .pulse { fill: #fff; opacity: 0; }
.pv-map.is-live .wire .pulse {
animation: pulseFade 1.9s linear infinite;
animation-delay: calc(var(--i, 0) * 190ms + 700ms);
}
@keyframes pulseFade {
0% { opacity: 0; }
12% { opacity: 0.95; }
85% { opacity: 0.95; }
100% { opacity: 0; }
}
/* the panel pulls back out of the frame you were looking at */
.pv-map.is-shown { animation: unpack 560ms var(--ease); }
@keyframes unpack {
from { opacity: 0; transform: scale(1.07); filter: blur(10px); }
to { opacity: 1; transform: none; filter: none; }
}
/* the canvas grid draws itself in behind the nodes */
.pv-map .map::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.13) 1px, transparent 0) 0 0 / 22px 22px;
opacity: 0;
transform: scale(1.04);
transition: opacity 900ms var(--ease), transform 900ms var(--ease);
pointer-events: none;
}
.pv-map.is-live .map::before { opacity: 1; transform: none; }
/* the node labels type themselves on */
.pv-map .node-label { opacity: 0; transition: opacity 420ms var(--ease); }
.pv-map.is-live .node-label {
opacity: 1;
transition-delay: calc(var(--i, 0) * 190ms + 380ms);
}
@media (prefers-reduced-motion: reduce) {
.pv-map .pulse, .pv-map.is-live .wire .pulse { animation: none; opacity: 0.7; }
.pv-map .map::before { opacity: 1; transform: none; }
.pv-map .node-label { opacity: 1; }
}
/* ============================================================
The drawer — a project is a file, every tab is a stage.
============================================================ */
.drw {
width: 100%;
max-width: 1000px;
margin-inline: auto;
direction: ltr; /* the geometry is computed left-to-right */
display: grid;
gap: 0;
align-content: center;
max-height: 100%;
}
/* the drawer never eats the whole frame — the pull-out strip needs room */
.drw svg { width: 100%; height: auto; display: block; max-height: 62vh; }
.drw .fold {
fill: #0B0B0B;
stroke: rgba(255,255,255,0.5);
stroke-width: 1.4;
stroke-linejoin: round;
transition: fill 240ms var(--ease), stroke 240ms var(--ease);
}
.drw .row { cursor: pointer; }
.drw .row:hover .fold { stroke: #fff; fill: #131313; }
.drw .row.on .fold { stroke: #fff; }
.drw .tabhi { fill: #fff; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }
.drw .hit { fill: transparent; }
/* Each label picks its own direction from its own first letter, so a mixed
line like "stills \00b7 \05db\05d4\05d4" is not re-ordered by the LTR geometry. */
.drw text { font-family: var(--display); pointer-events: none; unicode-bidi: plaintext; }
.drw .n { font-size: 13px; font-weight: 500; fill: rgba(255,255,255,0.72); text-anchor: start; letter-spacing: 0.08em; }
.drw .w { font-size: 15px; font-weight: 500; fill: #fff; text-anchor: end; }
/* on the Hebrew page the tab reads from the right: number first, then the name */
[dir="rtl"] .drw .n { text-anchor: end; }
[dir="rtl"] .drw .w { text-anchor: start; }
.drw .row.hi .n { fill: rgba(0,0,0,0.6); }
.drw .row.hi .w { fill: #0B0B0B; font-weight: 600; }
.drw .plate { fill: #fff; }
.drw .plateT { font-size: 14px; font-weight: 600; fill: #0B0B0B; text-anchor: middle; letter-spacing: 0.08em; }
/* what the drawer hands you when a tab is pulled */
.drw-out {
direction: rtl;
margin-top: clamp(12px, 2vw, 22px);
min-height: 0;
display: none;
}
.drw-out.on { display: block; animation: pull 420ms var(--ease); }
@keyframes pull { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.drw-out h4 {
margin: 0 0 12px;
font-family: var(--display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-3);
display: flex;
gap: 12px;
align-items: baseline;
}
.drw-out h4 b { color: #fff; letter-spacing: 0.16em; }
.drw-out .strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.drw-out .strip::-webkit-scrollbar { display: none; }
.drw-out .strip img { height: clamp(88px, 13vw, 132px); width: auto; flex: 0 0 auto; object-fit: cover; }
.drw-out .strip img.cut {
object-fit: contain;
object-position: bottom;
filter: drop-shadow(0 10px 16px rgba(0,0,0,0.7));
}
.drw-out p { margin: 0; color: var(--fg-2); font-size: 14px; font-weight: 400; line-height: 1.7; max-width: 60ch; }
.drw-out p b { color: #fff; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .drw-out.on { animation: none; } }
/* ---------- The drawer behaves like a drawer ---------- */
/* the folders rise out of the box when it opens, deepest first */
.pv-map .drw .row {
opacity: 0;
transform: translateY(46px);
transform-box: fill-box;
transform-origin: center;
transition: transform 320ms var(--ease), opacity 320ms var(--ease);
}
.pv-map.is-live .drw .row {
animation: liftOut 620ms var(--ease) forwards;
animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes liftOut { to { opacity: 1; transform: none; } }
/* the drawer body and its plate arrive first, then the files climb out of it */
.pv-map .drw svg > .fold,
.pv-map .drw svg > .plate,
.pv-map .drw svg > .plateT { opacity: 0; }
.pv-map.is-live .drw svg > .fold,
.pv-map.is-live .drw svg > .plate,
.pv-map.is-live .drw svg > .plateT {
animation: nodeIn 460ms var(--ease) forwards;
}
/* a tab you point at leans out of the stack; the one you pull comes right out */
.pv-map.is-live .drw .row:hover { transform: translateY(-4px); }
.pv-map.is-live .drw .row.on {
transform: translateY(-16px);
animation: none;
opacity: 1;
}
.drw .row.on .fold { fill: #1A1A1A; stroke: #fff; }
.drw .row.on:not(.hi) .w { fill: #fff; }
@media (prefers-reduced-motion: reduce) {
.pv-map .drw .row { opacity: 1; transform: none; animation: none; }
.pv-map .drw svg > .fold,
.pv-map .drw svg > .plate,
.pv-map .drw svg > .plateT { opacity: 1; animation: none; }
.pv-map.is-live .drw .row:hover,
.pv-map.is-live .drw .row.on { transform: none; }
}
/* ---------- Language switch ---------- */
.nav-lang {
font-family: var(--display);
font-size: 12px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--fg-2);
padding: 9px 12px;
border-radius: var(--r-btn);
border: 1px solid var(--line);
white-space: nowrap;
transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-lang:hover { color: #fff; border-color: var(--line-2); }
/* the language switch is the one thing a bilingual visitor must always find,
so on a phone it grows with the rest of the bar instead of shrinking away */
@media (max-width: 860px) { .nav-lang { padding: 9px 13px; font-size: 14px; } }
/* ---------- Full-bleed chapter media ---------- */
.bleed { padding: 0; }
.bleed figure { margin: 0; }
.bleed img {
width: 100%;
height: min(78vh, 760px);
object-fit: cover;
display: block;
}
@media (max-width: 734px) { .bleed img { height: 62vh; } }
/* ---------- The pinned chapter ---------- */
/* One product holds still while the frames around it change — apple.com's
signature scroll moment, done with position:sticky and no JavaScript. */
/* ---------- Scroll reveal: fade + 20px rise, once, staggered ---------- */
@media (prefers-reduced-motion: no-preference) {
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
}
/* ============================================================
Motion — Apple's numbers, driven by the scroll itself.
Two systems, deliberately kept apart:
· Chapters fade in on the IntersectionObserver above (it has a
safety net, so a chapter can never stay invisible).
· The cinematic beats below are scroll-LINKED in pure CSS. They
sit inside @supports, and everything that carries meaning uses
fill-mode forwards, so an inactive timeline shows the finished
frame rather than an empty one.
============================================================ */
/* --- inside a chapter, children arrive 80ms apart (Apple's stagger) --- */
.js .reveal > * { transition-delay: 0ms; }
.js .reveal > *:nth-child(2) { transition-delay: 80ms; }
.js .reveal > *:nth-child(3) { transition-delay: 160ms; }
.js .reveal > *:nth-child(4) { transition-delay: 240ms; }
.js .reveal > *:nth-child(n+5) { transition-delay: 320ms; }
.js .reveal > * { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal:not(.in) > * { opacity: 0; transform: translateY(20px); }
.js .reveal.in > * { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* the hero film settles out of a slight push-in */
.hero-media img {
animation: filmSettle linear forwards;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@keyframes filmSettle { from { transform: scale(1.12); } to { transform: scale(1); } }
/* the full-bleed chapter drifts as it passes */
.bleed img {
animation: drift linear forwards;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
@keyframes drift {
from { transform: scale(1.16) translateY(-2.2%); }
to { transform: scale(1.16) translateY(2.2%); }
}
}
}
/* Reduce Motion: every state stays, movement becomes a plain cross-fade. */
@media (prefers-reduced-motion: reduce) {
.hero-media img, .bleed img { animation: none !important; transform: none; }
.js .reveal, .js .reveal > *, .js .reveal.in, .js .reveal.in > * {
transform: none !important; transition: opacity 150ms linear !important; transition-delay: 0ms !important;
}
}
/* ---------- Apple's text rhythm, so the eye finds the same beat ---------- */
/* eyebrow to headline .4em · headline to next .8em · paragraph to paragraph .8em */
/* Headlines break where a typesetter would, not where the box ends —
no single word stranded on its own last line. */
.display, .h2, .h3 { text-wrap: balance; }
.lead, .case-text p { text-wrap: pretty; }
.eyebrow + .display, .eyebrow + .h2, .eyebrow + .h3 { margin-block-start: .4em; }
.display + *, .h2 + *, .h3 + * { margin-block-start: .8em; }
.lead + .lead { margin-block-start: .8em; }
/* ============================================================
The Apple pass, section by section.
Everything below overrides the earlier rules on purpose, so the
page reads as chapters: centred head, one big picture, flat tiles.
============================================================ */
/* --- nothing may leak past the edge of the screen --- */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
.hero-media { margin-inline: 0; }
.bleed figure { overflow: hidden; }
.strip { overflow-x: clip; }
/* --- case studies: chapters on black, not white cards --- */
.case { background: transparent; color: inherit; border-radius: 0; padding: 0; }
.case + .case { margin-top: 82px; }
@media (min-width: 1069px) { .case + .case { margin-top: 120px; } }
.case-head { text-align: center; margin-bottom: 40px; }
.case-head .eyebrow { margin-inline: auto; }
.case-head .lead { margin-inline: auto; margin-block-start: 1.2em; }
.case-hero { overflow: hidden; border-radius: var(--r-lg); }
.case-hero img { border-radius: 0; height: clamp(300px, 52vw, 640px); }
.case-hero + .case-media, .case-media + .case-media { margin-top: 12px; }
.case-media img { border-radius: var(--r); }
.case-metrics { text-align: center; margin-top: 54px; }
.metric span { color: var(--fg-2); }
.case-link { text-align: center; margin: 40px 0 0; }
/* --- manifesto: the big statement, in the one typeface --- */
.manifesto { background: var(--paper); color: var(--on-light); text-align: center; padding: clamp(80px, 10vw, 150px) 0; }
.manifesto .eyebrow { color: var(--on-light-2); margin-inline: auto; }
.statement { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.1429; letter-spacing: 0.007em; margin: .4em auto 0; max-width: 900px; }
.statement > span { display: block; }
@media (min-width: 735px) { .statement { font-size: 32px; line-height: 1.125; letter-spacing: 0.004em; } }
@media (min-width: 1069px) { .statement { font-size: 40px; line-height: 1.1; letter-spacing: 0; } }
/* --- method: white tiles on the grey ground, no borders --- */
.light .pan { background: #fff; border: 0; border-radius: var(--r-lg); padding: 40px; }
.light .pan .n { color: var(--on-light-2); }
.light .pan .h3 { color: var(--on-light); }
.light .pan p, .light .pan li { color: var(--on-light-2); }
.light .pan li::before { color: var(--on-light-2); }
.pans { margin-top: 0; }
/* --- pricing: four equal tiles --- */
.tiers { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tiers { grid-template-columns: 1fr; } }
.tier-note { margin: .4em 0 0; font-size: 14px; color: var(--fg-3); font-weight: 400; }
/* --- questions: one centred column --- */
.faq { max-width: var(--prose); margin-inline: auto; }
/* --- contact: the form under the headline, the two doors under the form --- */
.contact-form { max-width: 440px; margin: 0 auto; }
.contact-form .btn { width: 100%; }
.contact-form .form-note { text-align: center; }
.direct { grid-template-columns: 1fr 1fr; max-width: var(--prose); margin: 40px auto 0; }
@media (max-width: 620px) { .direct { grid-template-columns: 1fr; } }
/* ============================================================
Motion, second layer.
============================================================ */
/* the hero arrives on load: each line 80ms after the one before */
@media (prefers-reduced-motion: no-preference) {
.hero .wrap > * { animation: riseIn .8s var(--ease) both; }
.hero .wrap > :nth-child(2) { animation-delay: 80ms; }
.hero .wrap > :nth-child(3) { animation-delay: 160ms; }
.hero .wrap > :nth-child(4) { animation-delay: 240ms; }
.hero .wrap > :nth-child(5) { animation-delay: 320ms; }
@keyframes riseIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}
/* every tile rises on its own as it enters, 70ms after its neighbour */
.js .tile-reveal {
opacity: 0; transform: translateY(20px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
transition-delay: min(calc(var(--i, 0) * 70ms), 420ms);
}
.js .tile-reveal.in { opacity: 1; transform: none; }
/* the manifesto lands one line at a time */
.js .reveal .statement > span { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal:not(.in) .statement > span { opacity: 0; transform: translateY(20px); }
.js .reveal.in .statement > span { opacity: 1; transform: none; }
.js .reveal.in .statement > span:nth-child(2) { transition-delay: 160ms; }
.js .reveal.in .statement > span:nth-child(3) { transition-delay: 320ms; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* the work strip travels sideways as the page moves down */
/* each case cover pans slowly inside its frame */
.case-hero img { animation: pan linear forwards; animation-timeline: view(); animation-range: entry 0% exit 100%; }
@keyframes pan { from { transform: translateY(-5%) scale(1.12); } to { transform: translateY(5%) scale(1.12); } }
}
}
@media (prefers-reduced-motion: reduce) {
.hero .wrap > *, .strip-track, .case-hero img { animation: none !important; transform: none; opacity: 1; }
.js .tile-reveal, .js .reveal .statement > span { transform: none !important; transition: opacity 150ms linear !important; transition-delay: 0ms !important; }
}
/* six frames: three across, then two across — never a row with one left over */
.case-media-6 { max-width: none; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .case-media-6 { grid-template-columns: repeat(2, 1fr); } }
.case-media-6 img { height: clamp(200px, 30vw, 460px); }
/* ============================================================
The pinned chapter: one bottle holds the centre while the other
twenty-eight frames come out from behind it, one by one, and settle
into a mosaic around it. The scroll drives it, in plain script, so
it runs in every browser. Without scripts (or with Reduce Motion) it
is the bottle above a tidy grid — 7 across, then 4 across, both even.
============================================================ */
.pin { padding: 0; background: #000; }
.pin-rail { position: relative; }
.pin-stage { padding: 82px 0; }
.pin-copy { text-align: center; pointer-events: none; }
.pin-copy .eyebrow { margin-inline: auto; }
.pin-hero {
display: block; width: min(380px, 60vw); aspect-ratio: 3 / 4; object-fit: cover;
border-radius: var(--r-lg); margin: 40px auto 0; background: var(--ink-2);
}
.pin-worlds {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
padding: 0 var(--gutter); margin-top: 40px;
}
@media (max-width: 900px) { .pin-worlds { grid-template-columns: repeat(4, 1fr); } }
.pin-frame { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); background: var(--ink-2); }
/* live: the stage holds, and the script places every frame */
.pin-live .pin-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; padding: 0; }
.pin-live .pin-copy { position: absolute; inset-inline: 0; top: 8vh; z-index: 3; will-change: opacity, transform; }
.pin-live .pin-hero {
position: absolute; left: 50%; top: 50%; margin: 0; z-index: 2;
width: min(360px, 52vw); box-shadow: 0 30px 80px rgba(0,0,0,.6); will-change: transform;
}
.pin-live .pin-worlds { display: block; position: absolute; inset: 0; margin: 0; padding: 0; }
.pin-live .pin-frame { position: absolute; aspect-ratio: auto; will-change: transform, opacity; transform-origin: center; }
/* ============================================================
Motion, third layer — the creative one.
============================================================ */
/* the hero arrives out of focus and snaps sharp: blur + rise, staggered */
@media (prefers-reduced-motion: no-preference) {
.hero .wrap > * { animation-name: riseFocus; animation-duration: 1s; }
@keyframes riseFocus {
from { opacity: 0; transform: translateY(22px); filter: blur(14px); }
60% { filter: blur(0); }
to { opacity: 1; transform: none; filter: blur(0); }
}
/* the photograph itself resolves from a soft, slightly larger frame */
.hero-media { animation: filmResolve 1.4s cubic-bezier(.2,.8,.2,1) .25s backwards; transform-origin: 50% 20%; will-change: transform, opacity; }
@keyframes filmResolve {
from { opacity: 0; transform: scale(1.06); filter: blur(18px); }
to { opacity: 1; transform: scale(1); filter: blur(0); }
}
/* the story circles pop in one after another */
.circle { animation: circleIn .7s cubic-bezier(.2,.8,.2,1) both; }
.circle:nth-child(1) { animation-delay: .05s; } .circle:nth-child(2) { animation-delay: .12s; }
.circle:nth-child(3) { animation-delay: .19s; } .circle:nth-child(4) { animation-delay: .26s; }
.circle:nth-child(5) { animation-delay: .33s; } .circle:nth-child(n+6) { animation-delay: .4s; }
@keyframes circleIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
}
/* the case covers unfold from a tighter frame as they arrive (1.1s, no bounce) */
.js .case-hero.unfold {
clip-path: inset(14% 10% round 28px);
transform: scale(1.02);
transition: clip-path 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.js .case-hero.unfold.in { clip-path: inset(0 0 round 28px); transform: none; }
/* the manifesto is read, not shown: words brighten as the scroll passes them */
.statement.scrub .w { display: inline-block; transition: opacity .18s linear; }
/* the two pans of the scale tilt into balance as they land — Libra, literally */
.js .pans .pan.tile-reveal:not(.in) { transform: translateY(20px) rotate(-2.5deg); transform-origin: 100% 100%; }
.js .pans .pan.tile-reveal:nth-child(2):not(.in) { transform: translateY(20px) rotate(2.5deg); transform-origin: 0 100%; }
.js .pans .pan.tile-reveal { transition-duration: 1s; }
/* reels drift at two depths (driven by --px from the scroll loop) */
.reels .reel { transform: translateY(var(--px, 0)); will-change: transform; }
.js .reels .reel.tile-reveal:not(.in) { transform: translateY(calc(var(--px, 0) + 20px)); }
.js .reels .reel.tile-reveal.in { transform: translateY(var(--px, 0)); }
@media (prefers-reduced-motion: reduce) {
.js .case-hero.unfold { clip-path: none; transform: none; transition: none; }
.statement.scrub .w { opacity: 1 !important; }
.reels .reel { transform: none !important; }
.hero-media { transform: none !important; opacity: 1 !important; border-radius: 0 !important; }
}
/* ============================================================
The fourth layer — the studio's own signature, after Seed:
text that decodes out of noise, a ticker that never stops, a
frame that glitches once in a while, film grain over the black,
and labels set in brackets. Monochrome, and all of it optional.
============================================================ */
/* labels in brackets, the way a production studio marks its slates */
.head .eyebrow::before, .case-head .eyebrow::before, .pin-copy .eyebrow::before { content: "[ "; color: var(--fg-3); }
.head .eyebrow::after, .case-head .eyebrow::after, .pin-copy .eyebrow::after { content: " ]"; color: var(--fg-3); }
.light .head .eyebrow::before, .light .head .eyebrow::after { color: var(--on-light-2); }
/* decoding text: the glyphs still settling are dimmer than the settled ones */
.decode .dc { opacity: .55; }
/* the work strip is a ticker now — it runs on its own and pauses under the hand */
.js .strip-track { overflow: visible; padding-inline: 0; width: max-content; gap: 14px; }
@media (prefers-reduced-motion: no-preference) {
.js .strip-track { animation: ticker 46s linear infinite; }
.js .strip:hover .strip-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .strip-track { animation-name: ticker-rtl; }
@keyframes ticker-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
}
/* the scroll cue under the hero */
.scroll-cue {
display: flex; flex-direction: column; align-items: center; gap: 10px;
margin: 26px auto 0; font-family: var(--display); font-size: 12px; letter-spacing: .18em;
text-transform: uppercase; color: var(--fg-3); text-decoration: none;
}
.scroll-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(to bottom, var(--fg-3), transparent); overflow: hidden; position: relative; }
@media (prefers-reduced-motion: no-preference) {
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--fg); animation: cue 1.8s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
}
/* the hero glitches — two slices of itself slip sideways for a few frames, now and then */
.hero-media { position: relative; }
.hero-media .glitch { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.hero-media .glitch.a { animation: glitchA 7s steps(1, end) infinite 2.4s; }
.hero-media .glitch.b { animation: glitchB 9s steps(1, end) infinite 5.1s; }
@keyframes glitchA {
0%, 92% { opacity: 0; }
93% { opacity: 1; clip-path: inset(18% 0 68% 0); transform: translateX(-2.2%); filter: brightness(1.15); }
94.4% { opacity: 1; clip-path: inset(62% 0 22% 0); transform: translateX(1.6%); filter: brightness(.9); }
95.5% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes glitchB {
0%, 95% { opacity: 0; }
95.6% { opacity: 1; clip-path: inset(40% 0 44% 0); transform: translateX(2.6%); filter: contrast(1.2); }
96.6% { opacity: 1; clip-path: inset(8% 0 84% 0); transform: translateX(-1.4%); }
97.4% { opacity: 0; }
100% { opacity: 0; }
}
}
/* film grain over everything, faint, always moving */
@media (prefers-reduced-motion: no-preference) {
body::after {
content: ""; position: fixed; inset: -20%; z-index: 65; pointer-events: none; opacity: .05;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px; mix-blend-mode: screen;
animation: grain .9s steps(5) infinite;
}
@keyframes grain {
0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); }
60% { transform: translate(-1%,-2%); } 80% { transform: translate(3%,1%); } 100% { transform: translate(0,0); }
}
}
/* a frame in a case grid can be a film: same size, same corners, it just moves */
.case-media figure.live { margin: 0; position: relative; }
.case-media figure.live video { width: 100%; height: clamp(190px, 24vw, 320px); object-fit: cover; border-radius: var(--r); display: block; background: var(--ink-2); }
.case-media-4 figure.live video { height: clamp(220px, 26vw, 400px); }
.case-media-6 figure.live video { height: clamp(200px, 30vw, 460px); }
/* a soft light sweeps across the hero every few seconds, like a studio flag passing */
@media (prefers-reduced-motion: no-preference) {
.hero-media::after {
content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
background-size: 220% 100%; animation: sweep 11s cubic-bezier(.4,0,.6,1) infinite 4s;
}
@keyframes sweep {
0% { opacity: 0; background-position: 120% 0; } 8% { opacity: 1; } 22% { opacity: 1; background-position: -20% 0; } 26% { opacity: 0; } 100% { opacity: 0; background-position: -20% 0; }
}
}
/* ============================================================
The models: hot spots over the hero, a chapter of their own,
and a sheet per model.
============================================================ */
/* the three of them are three layers; whichever the pointer is on gets a white contour and comes forward */
.hero-layer { position: absolute; inset: 0; display: block; pointer-events: none; }
.hero-layer:first-of-type { position: relative; }
.hero-layer img { width: 100%; height: 100%; object-fit: cover; display: block;
transition: opacity .4s var(--ease), filter .4s var(--ease), transform .5s cubic-bezier(.2,.8,.2,1); }
.hero-media[data-hover] .hero-layer img { opacity: 1; filter: brightness(.34) saturate(.6) blur(1px); }
.hero-media[data-hover="aurelia"] .layer-aurelia img,
.hero-media[data-hover="angelica"] .layer-angelica img,
.hero-media[data-hover="vanessa"] .layer-vanessa img { opacity: 1; filter: none; transform: translateY(-1.2%) scale(1.012); }
/* the contour: a separately drawn, smooth white line — and a light that runs around it */
@property --sweep { syntax: ""; inherits: false; initial-value: 0deg; }
/* the group stacks the way the photograph was built: Angelica in front */
.layer-aurelia { z-index: 1; }
.layer-vanessa { z-index: 2; }
.layer-angelica { z-index: 3; }
/* the one you pick steps in front of the other two, whole and uncovered */
.hero-media[data-hover="aurelia"] .layer-aurelia,
.hero-media[data-hover="vanessa"] .layer-vanessa,
.hero-media[data-hover="angelica"] .layer-angelica { z-index: 6; }
.hero-line { position: absolute; inset: 0; display: block; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .35s var(--ease); }
.hero-line img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translateY(-1.2%) scale(1.012); }
.hero-line::after { content: ""; position: absolute; inset: 0; }
.hero-media[data-hover="aurelia"] .line-aurelia,
.hero-media[data-hover="angelica"] .line-angelica,
.hero-media[data-hover="vanessa"] .line-vanessa { opacity: 1; z-index: 7; }
/* base ring, soft */
.hero-line img { opacity: .55; filter: drop-shadow(0 0 6px rgba(255,255,255,.55)); }
/* the running light: a second copy of the line, masked by a rotating cone */
.hero-line::after {
background: inherit; opacity: 0;
}
.hero-media[data-hover] .hero-glow { opacity: 1; }
.hero-glow { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); }
.hero-glow img { width: 100%; height: 100%; object-fit: cover; display: block; transform: translateY(-1.2%) scale(1.012);
filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px rgba(255,255,255,.7));
-webkit-mask: conic-gradient(from var(--sweep) at var(--nx, 50%) 45%, transparent 0deg 250deg, #000 320deg, transparent 360deg);
mask: conic-gradient(from var(--sweep) at var(--nx, 50%) 45%, transparent 0deg 250deg, #000 320deg, transparent 360deg);
}
@media (prefers-reduced-motion: no-preference) {
.hero-media[data-hover] .hero-glow img { animation: sweep 2.8s linear infinite; }
@keyframes sweep { from { --sweep: 0deg; } to { --sweep: 360deg; } }
}
.hero-media.can-hover { cursor: pointer; }
.hero-name {
position: absolute; left: var(--nx, 50%); bottom: 12%; transform: translate(-50%, 8px); z-index: 4; pointer-events: none;
font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg);
opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease); text-shadow: 0 2px 18px rgba(0,0,0,.8); white-space: nowrap;
}
.hero-name::before { content: "[ "; color: var(--fg-3); } .hero-name::after { content: " ]"; color: var(--fg-3); }
.hero-media[data-hover] .hero-name { opacity: 1; transform: translate(-50%, 0); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only .hot:focus { position: fixed; inset-inline-start: 16px; top: 70px; width: auto; height: auto; clip: auto; background: var(--fg); color: var(--ink); padding: 10px 16px; border-radius: 999px; z-index: 90; }
/* the chapter: three portraits and one door */
.models-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1000px) { .models-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
.models-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.model-tile img { aspect-ratio: 3 / 4; }
.mt-body { padding: 12px 12px 16px; gap: 3px; }
.mt-body b { font-size: 17px; }
.mt-body small { font-size: 12px; line-height: 1.35; }
.mt-body em { font-size: 12px; margin-top: 4px; }
.model-tile.custom .mt-plus { font-size: 34px; padding-top: 18px; }
.model-tile.custom .mt-body { padding-bottom: 18px; }
.model-tile.custom .eyebrow { font-size: 11px; }
}
.model-tile {
appearance: none; border: 0; padding: 0; margin: 0; text-align: start; cursor: pointer;
background: var(--ink-3); border-radius: var(--r-lg); overflow: hidden; color: var(--fg);
display: flex; flex-direction: column; font-family: var(--display); text-decoration: none;
}
.model-tile img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; display: block; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.model-tile:hover img { transform: scale(1.04); }
.mt-body { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 26px; }
.mt-body b { font-size: var(--fs-h3); font-weight: 600; letter-spacing: 0; }
.mt-body small { font-size: 14px; color: var(--fg-2); line-height: 1.45; }
.mt-body em { font-style: normal; font-size: 14px; font-weight: 600; margin-top: 8px; color: var(--fg); }
.model-tile.custom { background: transparent; border: 1px dashed var(--line); justify-content: center; align-items: center; text-align: center; }
.model-tile.custom .mt-plus { font-size: 64px; font-weight: 200; line-height: 1; color: var(--fg-2); padding-top: 34px; }
.model-tile.custom .mt-body { align-items: center; padding-bottom: 34px; }
.model-tile.custom .eyebrow { margin: 0 0 .2em; font-size: 14px; }
.model-tile.custom .eyebrow::before { content: "[ "; color: var(--fg-3); } .model-tile.custom .eyebrow::after { content: " ]"; color: var(--fg-3); }
.model-tile.custom:hover { border-color: var(--fg-2); }
/* the sheet */
.ms { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
display: none; overflow-y: auto; padding: 40px var(--gutter); }
.ms.open { display: block; }
.ms-panel { max-width: var(--max); margin: 0 auto; background: var(--ink-3); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 40px); position: relative;
transform: translateY(24px); opacity: 0; transition: transform .35s cubic-bezier(.32,.72,0,1), opacity .35s cubic-bezier(.32,.72,0,1); }
.ms.open .ms-panel { transform: none; opacity: 1; }
.ms-close {
position: fixed; inset-block-start: 16px; inset-inline-end: 16px; z-index: 90;
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
background: rgba(20,20,20,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
color: var(--fg); font-size: 24px; line-height: 1; cursor: pointer;
box-shadow: 0 8px 26px rgba(0,0,0,.55);
}
/* .ms-top retired — the sheet opens on a full-bleed portrait now */
@media (max-width: 734px) { .ms-top { grid-template-columns: 1fr; } }
.ms-portrait { margin: 0; border-radius: var(--r); overflow: hidden; }
.ms-portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.ms-copy .eyebrow::before { content: "[ "; color: var(--fg-3); } .ms-copy .eyebrow::after { content: " ]"; color: var(--fg-3); }
.ms-traits { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ms-traits li { font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); }
.ms-copy .btn-row { margin-top: 28px; }
.ms-did { margin: clamp(28px, 4vw, 48px) 0 16px; }
.ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 620px) { .ms-grid { grid-template-columns: repeat(2, 1fr); } }
.ms-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); display: block; background: var(--ink-2); }
body.ms-lock { overflow: hidden; }
/* ============================================================
The fifth layer — scroll craft. Type arrives from behind its
own baseline, the case grids drift by column, the ticker leans
with the scroll, and a hairline rail says which chapter you are
in. All of it optional: without the script the page is static
and complete.
============================================================ */
@media (prefers-reduced-motion: no-preference) {
/* big type arrives from behind its own line, never a plain fade */
.js .wipe { clip-path: inset(-25% 0 106% 0); }
.js .wipe.in { clip-path: inset(-25% 0 -25% 0); transition: clip-path 1.05s cubic-bezier(.2,.8,.2,1); }
/* every frame in a case grid holds its own image, and the columns
travel at three depths while the grid crosses the screen */
.case-media figure { overflow: hidden; border-radius: calc(var(--r) - 2px); }
.case-media figure img { transform: translate3d(0, var(--dy, 0px), 0) scale(1.07); will-change: transform; }
.case-media figure video { transform: translate3d(0, var(--dy, 0px), 0) scale(1.07); }
/* the ticker is driven by the scroll once the script takes it over */
.js .strip-track.velocity { animation: none !important; will-change: transform; }
}
/* the chapter rail — a hairline index of the work section */
.case-rail {
position: fixed; inset-inline-start: 26px; top: 50%; transform: translateY(-50%);
z-index: 45; display: none; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
}
@media (min-width: 1180px) { .js .case-rail { display: grid; gap: 14px; } }
.case-rail.show { opacity: 1; }
.case-rail b {
display: flex; align-items: center; gap: 10px; font-family: var(--display);
font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
transition: color .45s var(--ease);
}
.case-rail i { display: block; width: 18px; height: 1px; background: currentColor; opacity: .55; transition: width .45s var(--ease), opacity .45s var(--ease); }
.case-rail b.on { color: var(--fg); }
.case-rail b.on i { width: 46px; opacity: 1; }
.case-rail span { opacity: 0; transform: translateX(-6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
html[dir="rtl"] .case-rail span { transform: translateX(6px); }
.case-rail b.on span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.case-rail { display: none !important; }
.case-media figure img, .case-media figure video { transform: none !important; }
.js .wipe { clip-path: none !important; }
}
/* ============================================================
Her page: a portrait you fall into, a spec strip, and the
campaigns she actually shot — each one opens that project.
============================================================ */
.ms-panel { padding: 0 !important; overflow: hidden; }
.ms-panel > *:not(.ms-hero):not(.ms-close) { margin-inline: clamp(22px, 3vw, 40px); }
.ms-hero { position: relative; margin: 0; }
.ms-hero img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 18%; display: block; }
.ms-hero figcaption {
position: absolute; inset-inline: 0; inset-block-end: 0; padding: clamp(20px, 3vw, 40px);
background: linear-gradient(to top, rgba(8,8,8,.94) 0%, rgba(8,8,8,.74) 45%, rgba(8,8,8,0) 100%);
}
/* on a wide screen the portrait keeps its own frame and the words sit beside it */
@media (min-width: 760px) {
.ms-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; background: var(--ink-2); }
.ms-hero img { aspect-ratio: 3 / 4; max-height: 66vh; }
.ms-hero figcaption { position: static; background: none; padding: clamp(24px, 3vw, 48px); }
}
.ms-hero .h2 { margin: .1em 0 .2em; }
.ms-hero .lead { margin: 0; max-width: 46ch; }
.ms-hero .eyebrow::before { content: "[ "; color: var(--fg-3); }
.ms-hero .eyebrow::after { content: " ]"; color: var(--fg-3); }
.ms-hero .ms-traits { margin-top: 14px; }
.ms-spec {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0;
border-block: 1px solid var(--line); margin-block: clamp(22px, 3vw, 34px) 0;
}
.ms-spec > div { padding: 18px 10px; text-align: center; border-inline-start: 1px solid var(--line); }
.ms-spec > div:first-child { border-inline-start: 0; }
.ms-spec dt { font-family: var(--display); font-size: clamp(24px, 3vw, 40px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.ms-spec dd { margin: 6px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.ms-work {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 6px;
scrollbar-width: none;
}
.ms-work::-webkit-scrollbar { display: none; }
.ms-camp {
scroll-snap-align: start; display: block; text-align: start; padding: 0; border: 0; cursor: pointer;
background: var(--ink-2); border-radius: var(--r); overflow: hidden; color: inherit; font: inherit;
transition: transform .5s var(--ease), background .5s var(--ease);
}
.ms-camp:hover { transform: translateY(-4px); background: var(--ink); }
.ms-camp-cover { display: block; overflow: hidden; }
.ms-camp-cover img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.ms-camp:hover .ms-camp-cover img { transform: scale(1.06); }
.ms-camp-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.ms-camp-strip img { width: 100%; height: 46px; object-fit: cover; display: block; opacity: .75; }
.ms-camp b { display: block; padding: 14px 16px 0; font-size: 17px; font-weight: 600; }
.ms-camp small { display: block; padding: 4px 16px 16px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.ms-cta { margin-block: clamp(26px, 3vw, 40px) clamp(26px, 3vw, 40px) !important; }
@media (max-width: 620px) {
.ms-spec { grid-template-columns: repeat(2, 1fr); }
.ms-spec > div:nth-child(3) { border-inline-start: 0; }
.ms-spec > div:nth-child(n+3) { border-block-start: 1px solid var(--line); }
.ms-work { grid-auto-columns: minmax(200px, 1fr); }
.ms-camp-cover img { height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
.ms-camp, .ms-camp-cover img { transition: none !important; transform: none !important; }
}
/* what the form says back */
.form-said { margin: 12px 0 0; font-size: 15px; }
.form-said.ok { color: var(--fg); }
.form-said.err { color: var(--fg-2); }
/* the way out of a model's page stays on screen wherever you have scrolled */
@media (max-width: 734px) {
.ms { padding-block-start: 72px; }
.ms-close { inset-block-start: 12px; inset-inline-end: 12px; }
}
/* a film tile shows its own still until the film is ready to run */
.case-media figure.live { background-size: cover; background-position: center; background-color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
.case-media figure.live video { opacity: 0; transition: opacity .45s var(--ease); }
.case-media figure.live.is-ready video { opacity: 1; }
}
/* the reels row and the project viewer, same rule: still first, film after */
.film { background-size: cover; background-position: center; background-color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
.film video { opacity: 0; transition: opacity .45s var(--ease); }
.film.is-ready video { opacity: 1; }
}
/* ============================================================
The brief, asked as questions — the way OFF+BRAND ask them.
A form with two boxes gets a name and a phone number and tells us
nothing. Nine questions asked in plain language, numbered, at
reading size, get a brief — and only the first two are required,
so nobody is stopped at the door. The answers are what let us come
back with a number instead of another question.
============================================================ */
.ask-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px, 3.4vw, 44px); counter-reset: none; }
.ask-q { display: grid; grid-template-columns: 3.2em 1fr; align-items: start; gap: 4px 14px; }
.ask-n {
font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .16em;
color: var(--fg-3); padding-block-start: .55em; direction: ltr; unicode-bidi: isolate;
}
.ask-label {
margin: 0 0 12px;
font-family: var(--display);
font-size: clamp(21px, 2.5vw, 30px);
font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--fg);
}
.ask-label i { font-style: normal; font-size: 13px; font-weight: 400; letter-spacing: .02em; color: var(--fg-3); }
.ask-q input[type="text"], .ask-q input[type="email"], .ask-q input[type="tel"], .ask-q textarea {
width: 100%; background: transparent; color: var(--fg);
border: 0; border-block-end: 1px solid var(--line); border-radius: 0;
padding: 10px 2px; font: inherit; font-size: var(--fs-body);
transition: border-color .25s var(--ease);
}
.ask-q input::placeholder, .ask-q textarea::placeholder { color: var(--fg-3); }
.ask-q input:focus, .ask-q textarea:focus { outline: none; border-block-end-color: var(--fg); }
.ask-q textarea { resize: vertical; line-height: 1.55; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pill span {
display: block; padding: 9px 18px; border-radius: 999px;
border: 1px solid var(--line); color: var(--fg-2);
font-size: 14px; line-height: 1.2; transition: all .2s var(--ease);
}
.pill:hover span { border-color: var(--fg-2); color: var(--fg); }
.pill input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--ink); }
.pill input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
/* The budget, as OFF+BRAND ask it: one track, a stop for each band, and
the chosen one swells and goes solid. The dots sit in a fixed row so the
big one and the small ones share a centre line. It is still radio inputs
underneath, so it works on the keyboard and posts like any other field.
The grid flows with the writing direction, so in Hebrew the first band
is on the right without a single physical property. */
.range {
position: relative;
display: grid;
align-items: center;
justify-items: center;
grid-auto-rows: 54px auto;
grid-auto-flow: column;
row-gap: 12px;
}
.range::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: 0;
height: 54px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
pointer-events: none;
}
.range-stop {
position: relative;
display: grid;
grid-row: 1 / span 2;
grid-template-rows: subgrid;
align-items: center;
justify-items: center;
cursor: pointer;
}
@supports not (grid-template-rows: subgrid) {
.range { grid-auto-flow: column; grid-auto-rows: auto; }
.range-stop { grid-row: auto; grid-template-rows: 54px auto; }
}
.range-stop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.range-stop i {
display: block; width: 12px; height: 12px; border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transition: width .28s var(--ease), height .28s var(--ease), background .28s var(--ease);
}
.range-stop:hover i { background: rgba(255, 255, 255, 0.55); }
.range-stop input:checked ~ i { width: 26px; height: 26px; background: var(--fg); }
.range-stop input:focus-visible ~ i { outline: 2px solid var(--fg); outline-offset: 4px; }
.range-stop span {
font-size: 14px; line-height: 1.25; text-align: center; color: var(--fg-3);
transition: color .28s var(--ease);
/* the bands are number pairs — they read left-to-right even in Hebrew, and
they must never break mid-range */
/* plaintext, not ltr: a pure number band reads left-to-right, but "עד 10K"
starts with a Hebrew word and must keep it in front */
unicode-bidi: plaintext; white-space: nowrap;
}
.range-stop input:checked ~ span { color: var(--fg); }
.range-stop span b { font-weight: inherit; }
.r-short { display: none; }
@media (max-width: 734px) {
.range { grid-auto-rows: 44px auto; row-gap: 9px; }
.range::before { height: 44px; }
@supports not (grid-template-rows: subgrid) { .range-stop { grid-template-rows: 44px auto; } }
.range-stop span { font-size: 12px; }
/* on a phone the bands are abbreviated, so four of them still fit on one line
each — the posted value is unchanged, only the label the eye reads */
.r-full { display: none; }
.r-short { display: inline; }
.range-stop input:checked ~ i { width: 22px; height: 22px; }
}
.ask-send { margin-block-start: clamp(30px, 4vw, 46px); display: inline-flex; align-items: center; gap: 10px; }
.ask-send svg { width: 17px; height: 17px; }
[dir="rtl"] .ask-send svg { transform: scaleX(-1); }
@media (max-width: 734px) {
.ask-q { grid-template-columns: 2.4em 1fr; gap: 2px 10px; }
.ask-label { font-size: 19px; margin-bottom: 10px; }
.pill span { padding: 8px 14px; font-size: 13px; }
}
/* who she is, set at reading size and given room — it is the first thing
after her name, because a booker reads the person before the work */
.ms-bio {
margin: clamp(14px, 2vw, 22px) 0 0;
max-width: 58ch;
font-size: var(--fs-body);
line-height: 1.62;
color: var(--fg-2);
}
.ms-bio:empty { display: none; }
/* ============================================================
Her digitals — the five panels.
The way an agency shows a face, and the way the studios she
picked out do it: left profile, front, the film, back, right
profile, all from one sitting, one light and one outfit that
belongs to her alone. The four stills are white-seamless, so
the strip reads as a band of daylight laid across a black page.
The film sits in the middle and is the only thing that moves.
============================================================ */
.ms-digitals {
display: grid;
grid-template-columns: 1fr 1fr 1.42fr 1fr 1fr;
gap: 2px;
margin-block: clamp(18px, 2.5vw, 30px);
background: #fff;
}
.ms-digitals figure { margin: 0; position: relative; overflow: hidden; background: #fff; }
.ms-digitals img,
.ms-digitals video {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
display: block;
}
.ms-dig-film { background: var(--ink-2); }
.ms-dig-film video { aspect-ratio: 3 / 4; }
/* on a phone the strip keeps its proportions and is dragged, exactly as it
reads on their sites — five panels never fit across 390px without turning
each one into a stamp */
@media (max-width: 900px) {
.ms-digitals {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin-inline: calc(clamp(22px, 3vw, 40px) * -1);
padding-inline: clamp(22px, 3vw, 40px);
background: none;
gap: 2px;
}
.ms-digitals::-webkit-scrollbar { display: none; }
.ms-digitals figure { flex: 0 0 62%; scroll-snap-align: center; }
.ms-dig-film { flex-basis: 78%; }
}
/* nothing moves when she has asked for stillness */
html.a11y-still .ms-dig-film video { display: none; }
html.a11y-still .ms-dig-film { background: var(--ink-2); }
/* ============================================================
The model sheet, at the level of the studios she picked out.
It was a grey card with a small portrait on it. A card is the one
thing she has ruled out, and a 4:5 crop is a thumbnail, not a
presence. Now the portrait opens at the height of the screen and
carries her name at hero scale over it, the way The Clueless
present a face — the page IS the woman, and the chrome gets out
of the way. The panel loses its background so there is no card
left, and the grid underneath is given a rhythm instead of nine
identical squares.
============================================================ */
.ms-panel { background: var(--ink); border-radius: 0; }
/* the portrait takes the screen */
.ms-hero img {
aspect-ratio: auto;
height: min(78svh, 920px);
min-height: 420px;
object-fit: cover;
object-position: 50% 22%;
}
/* her name is read before anything else */
.ms-hero .h2 {
font-size: clamp(44px, 8vw, 92px);
line-height: 0.98;
letter-spacing: -0.03em;
margin: .06em 0 .18em;
}
.ms-hero .lead { max-width: 34ch; }
/* the caption always reads, whatever the portrait is doing under it */
.ms-hero { isolation: isolate; }
.ms-hero::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 0;
height: 62%;
pointer-events: none;
background: linear-gradient(to top,
rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 34%, rgba(0,0,0,0.28) 68%, transparent 100%);
z-index: 0;
}
.ms-hero figcaption { position: relative; z-index: 1; }
/* nine identical squares is a contact sheet, not an editorial. The
first frame is given the weight of a spread and the rest fall in
around it. */
.ms-grid { grid-auto-flow: dense; gap: 8px; }
.ms-grid img { aspect-ratio: 3 / 4; height: auto; }
@media (min-width: 735px) {
.ms-grid { grid-template-columns: repeat(4, 1fr); }
.ms-grid > *:first-child { grid-column: span 2; grid-row: span 2; }
.ms-grid > *:first-child img { aspect-ratio: 1 / 1; }
}
/* the section headings stop announcing themselves */
.ms-did {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-3);
margin-block: clamp(34px, 5vw, 60px) 14px;
}
@media (max-width: 734px) {
.ms-hero img { height: min(70svh, 640px); }
.ms-hero .h2 { font-size: clamp(38px, 12vw, 56px); }
}
/* ============================================================
The picture refuses to scroll.
Six times on the way down #work the chapter photograph stops
flush under the frosted bar and stays there, and the work itself
rides up and closes over it — the frames, then the numbers, then
the one link — every one of them on solid black, so the covering
edge is a hard horizontal wipe with no gradient and no seam. The
photograph is only released when the whole chapter has passed.
Pure CSS. No script, nothing per frame. Every margin between the
covering blocks became padding, because a margin is transparent
and the held picture would show through the gap as a band.
With Reduce Motion, or her עצירת אנימציות switch, the six
chapters render exactly as they did before — the picture keeps
its own position:relative and its own height, and nothing here
hides anything.
============================================================ */
@media (prefers-reduced-motion: no-preference) {
/* each chapter is its own stacking context, so one chapter's sheet
can never paint over its neighbour's picture */
#work .case { position: relative; isolation: isolate; }
/* 52px is the bar's own height (css:206) — flush, so no strip of
sliced type shows between the bar and the held picture.
inset-block-start, so Hebrew and English are one rule. */
#work .case-hero { position: sticky; inset-block-start: 52px; z-index: 0; }
/* it may never be taller than the window, or the bottom of the
picture is cut off for a whole chapter on a short laptop */
#work .case-hero img { max-height: calc(100svh - 76px); }
/* the shutter: the work itself, opaque, riding up over the picture */
#work .case-media,
#work .case-metrics,
#work .case-link { position: relative; z-index: 1; background: var(--ink); }
/* the same gaps as before, as padding — see the note above */
#work .case-hero + .case-media,
#work .case-media + .case-media { margin-top: 0; padding-top: 12px; }
#work .case-metrics { margin-top: 0; padding-top: 54px; }
#work .case-link { margin-top: 0; padding-top: 40px; }
/* stillness gives the chapter back exactly as it was */
html.a11y-still #work .case-hero { position: relative; inset-block-start: auto; }
html.a11y-still #work .case-hero img { max-height: none; }
}
/* ============================================================
Taken from the three studios she picked out.
OFF+BRAND open every case with the client's question, not with a
description of the design — so each chapter now asks the thing the
brand actually walked in with, and the work underneath is the
answer. Phantom hold one object in a dark frame and let the edges
fall away, so the hero gets the same vignette: nothing added to the
picture, only the corners quieted so the three of them carry it.
============================================================ */
.case-ask {
margin: 0 0 .55em;
font-family: var(--display);
font-size: var(--fs-lead);
font-weight: 500;
line-height: 1.32;
letter-spacing: -0.01em;
color: var(--fg);
max-width: 26ch;
text-wrap: balance;
}
.case-head .lead { color: var(--fg-2); }
@media (max-width: 734px) { .case-ask { max-width: none; } }
/* The frame darkens at its edges, so the eye lands on the three of them and
not on the corners. It has to live on ::before: ::after already belongs to
the light sweep at :1671, which holds opacity 0 for most of its eleven-second
cycle and blends on screen — put the vignette there and it is invisible
except for the two seconds the sweep is lit, and the sweep loses its streak.
::before takes no clicks and sits above every layer, so the per-model hover
underneath is untouched. */
.hero-media::before {
content: "";
position: absolute;
inset: 0;
z-index: 9;
pointer-events: none;
background:
radial-gradient(118% 82% at 50% 44%, transparent 40%, rgba(0,0,0,0.30) 72%, rgba(0,0,0,0.66) 100%);
}
html.lb-a11y-contrast .hero-media::before,
html.lb-a11y-bw .hero-media::before { display: none; }
/* ============================================================
The accessibility tool ships its own styles inside js/a11y.js,
so it stays one file you can drop into any page. What stays
here is the one switch the rest of the site reads: when a
visitor asks for stillness, the page stops moving.
============================================================ */
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after {
animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.a11y-still video { display: none; }
html.a11y-still .film, html.a11y-still figure.live { background-size: cover; }
/* Turning animation off has to answer the styles the behaviour file writes by
hand, or the switch stops the transitions and leaves the page mid-flight. */
html.a11y-still .hero-media { transform: none !important; opacity: 1 !important; border-radius: 0 !important; }
html.a11y-still .statement.scrub .w { opacity: 1 !important; }
html.a11y-still .reels .reel { --px: 0px !important; }
html.a11y-still .case-media figure > * { --dy: 0px !important; }
html.a11y-still .strip-track { transform: none !important; }
html.a11y-still .pin-copy, html.a11y-still .pin-frame, html.a11y-still .pin-hero {
opacity: 1 !important; transform: none !important;
}
/* nothing may stay hidden waiting for a reveal that will never animate */
html.a11y-still .reveal, html.a11y-still .tile-reveal,
html.a11y-still .unfold, html.a11y-still .wipe {
opacity: 1 !important; transform: none !important; clip-path: none !important;
}
/* the pages a business is expected to carry */
.legal { padding-block: clamp(90px, 12vw, 150px) clamp(60px, 8vw, 100px); }
.legal .wrap { max-width: 760px; }
.legal h1 { margin: .2em 0 .6em; }
.legal h2.h3 { margin: 2em 0 .5em; }
.legal p, .legal li { color: var(--fg-2); font-size: var(--fs-body); line-height: 1.6; }
.legal .lead { color: var(--fg); }
.legal ul { padding-inline-start: 1.2em; display: grid; gap: 8px; margin: 0 0 1em; }
.legal a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { margin-block-start: 3em; font-size: var(--fs-sm); color: var(--fg-3); }
.legal-back { margin-block-start: 1.5em; }
.foot-legal a { color: var(--fg-3); }
.foot-legal a:hover { color: var(--fg); }