/* Everyday About Page — static build (pass 1)
Sizing: 1rem = 10 design px at a 1920px-wide viewport, so every Figma
value converts by dividing by 10 and the layout scales with the window. */
:root {
--black: #0d0d0d;
--white: #ffffff;
--blue: #2828f9;
--lilac: #dabef1;
--lavender: #d9daff;
--violet: #7000ff;
--grey-50: #f1f1f1;
--grey-300: #afafaf;
--grey-400: #a2a2a2;
--grey-700: #444444;
--proxima: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
/* Adobe kit weights for Neue Haas Grotesk Display: 26 XThin It = 200, 45 Light = 400,
55 Roman = 500, 65 Medium = 600, 75 Bold = 700, 96 Black It = 900 */
--nhgd: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
--nhgt: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
--benton: "benton-modern-display", Georgia, "Times New Roman", serif;
}
html { font-size: calc(100vw / 192); }
/* Below 1024px the page switches to the compact layout at the end of this file:
1rem = 10px on a 390px phone, growing to 14px on wide tablets. */
@media (max-width: 1023px) { html { font-size: clamp(10px, calc(100vw / 39), 14px); } }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--black); color: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.abs { position: absolute; }
/* ---------- Shared type styles (Figma text styles) ---------- */
.t-body-xl { font-family: var(--proxima); font-weight: 400; font-size: 2.4rem; line-height: 3.2rem; }
.t-body-l { font-family: var(--proxima); font-weight: 400; font-size: 2.2rem; line-height: 3.2rem; }
.t-body-m { font-family: var(--proxima); font-weight: 400; font-size: 1.8rem; line-height: 3.2rem; }
.t-body-s { font-family: var(--proxima); font-weight: 400; font-size: 1.6rem; line-height: 2.4rem; }
.t-sub-l { font-family: var(--nhgd); font-weight: 500; font-size: 6.4rem; line-height: 8rem; }
.t-sub-m { font-family: var(--nhgd); font-weight: 500; font-size: 4.8rem; line-height: 5.4rem; }
.t-eyebrow { font-family: var(--nhgd); font-weight: 600; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: .14em; text-transform: uppercase; }
.t-display-i { font-family: var(--benton); font-weight: 600; font-style: italic; font-size: 11.249rem; line-height: 10.2rem; }
.t-count { font-family: var(--nhgd); font-weight: 400; font-size: 2.1475rem; line-height: 2.5rem; letter-spacing: .02em; color: var(--grey-300); }
.t-btn-l { font-family: var(--proxima); font-weight: 600; font-size: 1.8rem; line-height: 2.2rem; letter-spacing: .06em; }
.t-btn-m { font-family: var(--proxima); font-weight: 600; font-size: 1.6rem; line-height: 2rem; letter-spacing: .06em; }
.t-btn-s { font-family: var(--proxima); font-weight: 600; font-size: 1.4rem; line-height: 1.8rem; letter-spacing: .06em; }
/* Pill / tag ("Filled Square") */
.pill {
display: inline-flex; align-items: center; height: 4.6rem; padding: 0 1.8rem; border-radius: .3rem;
font-family: var(--nhgd); font-weight: 600; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: .06em;
text-transform: uppercase; white-space: nowrap; color: var(--white);
}
.pill--blue { background: var(--blue); }
.pill--black { background: var(--black); }
.pill--lavender { background: var(--lavender); color: var(--black); }
.pill--violet { background: var(--violet); }
.pill--graphite { background: #303030; }
/* A pill placed by its centre point with a rotation */
.pill-at { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) skewX(var(--k, 0deg)); }
/* ---------- Buttons (design system: Primary / Secondary) ----------
Sizes: Small 48px, Large 54px. "on-dark" = the Figma "Background color=Dark" variants. */
.btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; cursor: pointer;
font-family: var(--proxima); font-weight: 600; font-size: 1.6rem; line-height: 2rem; letter-spacing: .06em; text-transform: uppercase;
background: var(--b-bg); color: var(--b-fg); border: 1.8px solid var(--b-bd);
transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn--sm { height: 4.8rem; padding: 0 4rem; }
.btn--lg { height: 5.4rem; padding: 0 4.8rem; }
.btn--primary { border-radius: 9rem; --b-bg: var(--black); --b-fg: var(--white); --b-bd: transparent; }
.btn--primary:hover { --b-bg: var(--blue); --b-fg: var(--white); }
.btn--primary:focus-visible { outline: none; --b-bg: #2121d0; --b-fg: var(--white); }
.btn--primary[aria-disabled="true"] { --b-bg: #f8f8f8; --b-fg: var(--grey-300); pointer-events: none; }
.on-dark .btn--primary, .btn--primary.on-dark { --b-bg: var(--white); --b-fg: var(--black); }
.on-dark .btn--primary:hover, .btn--primary.on-dark:hover { --b-bg: var(--blue); --b-fg: var(--white); }
.on-dark .btn--primary:focus-visible, .btn--primary.on-dark:focus-visible { --b-bg: #2121d0; --b-fg: #b9bcff; }
.on-dark .btn--primary[aria-disabled="true"], .btn--primary.on-dark[aria-disabled="true"] { --b-bg: #6d6d6d; --b-fg: var(--grey-300); }
.btn--secondary { border-radius: 7rem; --b-bg: transparent; --b-fg: var(--black); --b-bd: var(--black); }
.btn--secondary:hover { --b-bg: var(--black); --b-fg: var(--white); --b-bd: var(--black); }
.btn--secondary:focus-visible { outline: none; --b-bg: #6d6d6d; --b-fg: var(--white); --b-bd: #6d6d6d; }
.btn--secondary[aria-disabled="true"] { --b-fg: var(--grey-300); --b-bd: var(--grey-300); pointer-events: none; }
.on-dark .btn--secondary, .btn--secondary.on-dark { --b-bg: transparent; --b-fg: var(--white); --b-bd: var(--grey-300); }
.on-dark .btn--secondary:hover, .btn--secondary.on-dark:hover { --b-bg: var(--white); --b-fg: var(--black); --b-bd: var(--white); }
.on-dark .btn--secondary:focus-visible, .btn--secondary.on-dark:focus-visible { --b-bg: #6d6d6d; --b-fg: var(--white); --b-bd: #6d6d6d; }
.on-dark .btn--secondary[aria-disabled="true"], .btn--secondary.on-dark[aria-disabled="true"] { --b-fg: var(--grey-300); --b-bd: #6d6d6d; }
/* ---------- Floating navigation ---------- */
.menu { position: fixed; z-index: 50; top: 2.4rem; left: 50%; width: 64rem; transform: translateX(-50%);
/* Default: dark bar, used over light backgrounds */
--m-bg: rgba(13, 13, 13, .88); --m-panel: rgba(13, 13, 13, .92); --m-fg: var(--white); --m-line: #1f1f1f; --m-hover: #1a1a1a;
--m-badge: var(--lilac); --m-outline: #333; --m-dots: var(--grey-300);
color: var(--m-fg); transition: color .4s ease; }
/* Light bar, used over dark backgrounds */
.menu.is-light { --m-bg: rgba(241, 241, 241, .8); --m-panel: rgba(241, 241, 241, .86); --m-fg: var(--black); --m-line: rgba(13, 13, 13, .06); --m-hover: rgba(13, 13, 13, .04);
--m-badge: var(--black); --m-outline: rgba(13, 13, 13, .14); --m-dots: #8a8a8a; }
.menu__bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 6.4rem; padding: 0 1.6rem 0 1.2rem;
background: var(--m-bg); -webkit-backdrop-filter: blur(2.4rem) saturate(1.4); backdrop-filter: blur(2.4rem) saturate(1.4); border-radius: 1.2rem; transition: border-radius .35s ease, background-color .4s ease; }
.menu.is-open .menu__bar { border-radius: 1.2rem 1.2rem 0 0; }
.menu__logo { display: block; width: 4.4rem; height: 4rem; color: var(--m-badge); transition: color .4s ease; }
.menu__badge { width: 100%; height: 100%; }
.menu__label { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--nhgd); font-weight: 600; font-size: 1.3rem; line-height: 1.6rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.menu__toggle { width: 4rem; height: 4rem; display: grid; place-items: center; }
.menu__toggle svg { width: 3.2rem; height: 3.2rem; stroke: currentColor; stroke-width: 3; stroke-linecap: round; fill: none; overflow: visible; }
.menu__toggle path { transition: transform .35s cubic-bezier(.65, 0, .35, 1), opacity .25s ease; transform-origin: 20px 20px; }
.menu.is-open .l1 { transform: translateY(11.25px); }
.menu.is-open .l3 { transform: translateY(-11.25px); }
.menu.is-open .l2 { opacity: 0; transform: scaleX(.2); }
.menu__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.65, 0, .35, 1); }
.menu.is-open .menu__panel { grid-template-rows: 1fr; }
.menu__inner { overflow: hidden; background: var(--m-panel); transition: background-color .4s ease; -webkit-backdrop-filter: blur(2.4rem) saturate(1.4); backdrop-filter: blur(2.4rem) saturate(1.4); border-radius: 0 0 1.2rem 1.2rem; }
.menu__links { list-style: none; border-top: 1px solid var(--m-line); }
.menu__links a { display: flex; align-items: center; justify-content: space-between; height: 6rem; padding: 0 2.4rem; border-bottom: 1px solid var(--m-line);
font-family: var(--proxima); font-size: 1.8rem; transition: background .25s ease; }
.menu__links a span { position: relative; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.menu__links a span::before { content: ""; position: absolute; left: -2rem; top: 50%; width: .8rem; height: .8rem; margin-top: -.4rem; background: var(--lilac); transform: scale(0); transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.menu__links a:hover { background: var(--m-hover); }
.menu__links a:hover span { transform: translateX(2rem); }
.menu__links a:hover span::before { transform: scale(1); }
.menu__dots { width: 1.4rem; height: 1.4rem; background:
radial-gradient(circle, var(--m-dots) 1.2px, transparent 1.6px) 0 0 / .7rem .7rem; opacity: .7; }
.menu.is-light .menu__links a span::before { background: var(--blue); }
.menu.is-light .menu__btn--outline:hover { background: rgba(13, 13, 13, .04); }
.menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: 1.6rem; }
.menu__btn { display: flex; align-items: center; justify-content: center; height: 5.2rem; border-radius: .6rem;
font-family: var(--proxima); font-weight: 600; font-size: 1.4rem; line-height: 1.8rem; letter-spacing: .06em; text-transform: uppercase;
background: var(--lilac); color: var(--black); transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.menu__btn:hover { background: var(--white); }
.menu__btn--outline { grid-column: 1 / -1; background: transparent; color: var(--m-fg); border: 1px solid var(--m-outline); }
.menu__btn--outline:hover { background: var(--m-hover); }
.menu-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(13, 13, 13, .35); -webkit-backdrop-filter: blur(.6rem); backdrop-filter: blur(.6rem); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.menu-open .menu-scrim { opacity: 1; pointer-events: auto; }
/* ---------- 1. Header / hero ---------- */
.hero {
position: relative; z-index: 3; height: 113.5rem; overflow: hidden;
background: var(--lilac) url(assets/hero-bg.webp) center / 100% 100% no-repeat;
border-radius: 0 0 8rem 8rem; color: var(--blue);
}
.hero__headline {
position: absolute; left: 98.636rem; top: 34.95rem; transform: translate(-50%, -50%);
white-space: nowrap; text-align: center; font-size: 27.8516rem; line-height: 26.8522rem; color: var(--blue);
}
.hl-work { font-family: var(--benton); font-weight: 300; font-style: italic; }
.hl-culture { font-family: var(--benton); font-weight: 700; font-style: normal; }
.hl-star { font-family: var(--nhgd); font-weight: 600; font-style: normal; }
.hl-visio { font-family: var(--nhgd); font-weight: 200; font-style: italic; }
.hl-n { font-family: var(--nhgd); font-weight: 200; font-style: italic; } /* matches the rest of "Vision" */
.sticker { position: absolute; }
.hero__intro { position: absolute; left: 51.226rem; top: 59.8rem; width: 111.5742rem; color: var(--blue); }
/* ---------- 2. Intro ---------- */
.intro {
position: relative; z-index: 1; height: 126.6rem; margin-top: -.9rem;
}
.intro__logo { left: 12.4rem; top: 28.3rem; width: 36.4rem; height: 7.8rem; }
.intro__squiggle { left: 82rem; top: 41.4rem; width: 17.9rem; height: 4.1rem; overflow: visible; }
.intro__est { left: 85.6rem; top: 48.1rem; width: 35.2rem; font-family: var(--nhgt); font-weight: 700; font-size: 1.4rem; line-height: 3.6rem; letter-spacing: .4rem; text-transform: uppercase; }
.intro__copy { left: 85.6rem; top: 53.8rem; width: 83.4rem; }
/* ---------- 3. Pillars ---------- */
.pillars {
position: relative; z-index: 2; width: 174.1rem; height: 91.4rem; margin: -2.6rem 0 0 8.9rem;
background: var(--grey-50); border-radius: 2.4rem; overflow: hidden; color: var(--black);
}
.pillars::after { /* Figma "Noise" effect, approximated */
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
.pillars__shape { left: .1rem; top: 6.5rem; width: 146.2rem; height: 85.3rem; }
.pillar { position: absolute; display: flex; align-items: center; white-space: nowrap; }
.pillar i { width: 1.2rem; height: 1.2rem; background: var(--blue); flex: none; }
.pillars__copy { left: 10.6rem; top: 75.6rem; width: 56.3rem; color: #434343; }
/* ---------- 4. We love what we do ---------- */
.culture { position: relative; z-index: 1; height: 158.5rem; margin-top: 6rem; background: var(--black); overflow-x: clip; overflow-y: visible; }
.culture__line { overflow: visible; }
.culture__line { left: 0; top: 7.3rem; width: 192rem; height: 151.6rem; }
.culture__photos { position: absolute; left: 0; top: 0; width: 192rem; height: 158.5rem; }
.culture__photo { position: absolute; border-radius: 1.2rem; overflow: hidden; }
.culture__photo img { width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; object-fit: cover; }
.culture__label { left: 48.8rem; top: 38.9rem; width: 24.5rem; }
.culture__label img { width: 2.2rem; height: 2.2rem; }
.culture__label p { margin-top: 8.8rem; font-family: var(--nhgt); font-weight: 500; font-size: 1.6rem; line-height: 3rem; letter-spacing: .3rem; text-transform: uppercase; }
/* ---------- 5. The Craft ---------- */
/* The Craft is a card stacked over the culture section: the blue line runs behind its top edge */
.craft { position: relative; z-index: 2; height: 113.7rem; margin-top: -20rem; padding-top: 1px; }
/* The outlined card is the section surface: no backing panel above it */
.craft__box { position: absolute; left: 7.1rem; top: 5.8rem; width: 179.2rem; border-radius: 2rem; background: var(--black); box-shadow: 0 -2rem 6rem rgba(0, 0, 0, .6); }
.craft__head { position: relative; height: 22rem; border: 1px solid var(--grey-700); border-bottom: 0; border-radius: 2rem 2rem 0 0; background: var(--black); }
.craft__eyebrow { left: 3.3rem; top: 4.4rem; }
.craft__title { left: 3.3rem; top: 8.2rem; width: 71.9rem; font-family: var(--nhgd); font-weight: 500; font-size: 4.8rem; line-height: 5.4rem; }
.craft__lede { left: 132.2rem; top: 10.4rem; width: 43.7rem; }
.craft__grid { position: relative; height: 76.5rem; margin-top: -.1rem; }
.card { position: absolute; top: 0; width: 44.875rem; height: 76.5rem; border: 1px solid var(--grey-700); background: var(--black); }
.card:nth-child(1) { left: 0; border-bottom-left-radius: 2rem; } .card:nth-child(2) { left: 44.775rem; } .card:nth-child(3) { left: 89.55rem; } .card:nth-child(4) { left: 134.325rem; border-bottom-right-radius: 2rem; }
.card__bar { height: 5.7rem; border-bottom: 1px solid var(--grey-700); display: flex; align-items: center; justify-content: space-between; padding: 0 3.2rem; }
.card__num { display: flex; align-items: center; gap: 1.2rem; color: var(--grey-400); }
.card__dots { width: 2.1rem; height: 2.1rem; color: var(--white); }
.card__dots .dots { opacity: .2; transition: opacity .4s ease; }
.card__dots { transition: color .4s ease; }
.card__art { position: relative; height: 41.2rem; overflow: hidden; }
.card:nth-child(1) .card__text { border-bottom-left-radius: 2rem; }
.card:nth-child(4) .card__text { border-bottom-right-radius: 2rem; }
.card__art img { position: absolute; left: 0; top: 0; height: 41.2rem; width: auto; }
.card__art .art-color { opacity: 0; }
.card__text { position: relative; height: 29.4rem; background-image: linear-gradient(to right, var(--grey-700) 40%, transparent 40%); background-size: 1rem 1px; background-repeat: repeat-x; }
.card__title { left: 3.2rem; top: 3.3rem; width: 38.3rem; font-family: var(--nhgd); font-weight: 500; font-size: 3.2rem; line-height: 3.8rem; white-space: pre-line; }
.card__copy { left: 3.2rem; top: 13.3rem; width: 38.3rem; }
/* ---------- 6. Awards ---------- */
.awards { position: relative; height: 104.3rem; margin-top: 21.5rem; padding: 9.8rem 6.4rem; background: var(--black); }
.awards__head { position: relative; height: 13.5rem; border-bottom: 1px solid var(--grey-700); }
.awards__count { left: 33.9rem; top: 1.2rem; }
.awards__lede { left: 94.6rem; top: 1.9rem; width: 84.6rem; color: var(--grey-400); }
.awards__list { margin-top: 6.4rem; width: 175.4rem; display: flex; flex-direction: column; gap: 1rem; }
.award { display: flex; align-items: center; gap: 20rem; height: 7.2rem; padding: 2.4rem 0; border-bottom: 1px solid var(--grey-700); opacity: .5; }
.award.is-active { border-color: var(--grey-300); opacity: 1; }
.award__name { width: 30rem; font-weight: 700; }
.award__meta { display: flex; align-items: center; gap: 10rem; color: var(--grey-400); }
.award__meta span:first-child { width: 30rem; }
.award__meta span:last-child { padding: 0 1.2rem; }
.award { cursor: default; }
.award__drawer { display: none; }
/* Desktop hover preview: follows the cursor along the row (positioned by main.js) */
.awards__media { left: 129.7rem; top: 35.5rem; width: 29.9rem; height: 45.2rem; z-index: 5; pointer-events: none; opacity: 0; scale: .9; transition: opacity .35s ease, scale .6s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.awards__media.is-on { opacity: 1; scale: 1; }
.awards__media.is-placed { left: 0; top: 0; }
.awards__media video, .awards__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.awards__media video { display: none; } .awards__media.is-video video { display: block; } .awards__media.is-video img { display: none; }
.award { transition: opacity .45s ease, border-color .45s ease; }
/* Row hover (after the reference): the hovered row lights up white and steps forward, the rest fall back */
@media (hover: hover) and (min-width: 1024px) {
.award__name, .award__meta { transform-origin: 0 50%; transition: transform .55s cubic-bezier(.22, 1, .36, 1), color .45s ease; }
.awards__list.has-active .award:not(.is-active) { opacity: .28; }
.award.is-active .award__name { color: var(--white); transform: translateX(1.6rem) scale(1.08); }
.award.is-active .award__meta { color: var(--grey-300); transform: translateX(1.6rem); }
/* the hovered line opens up (neighbours ease apart) and its divider draws across in white */
.award { position: relative; transition: opacity .45s ease, border-color .45s ease, margin .55s cubic-bezier(.22, 1, .36, 1); }
.award::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--white);
transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.award.is-active { margin: 1.2rem 0; }
.award.is-active::after { transform: scaleX(1); }
.award:not(.is-active)::after { transform-origin: 100% 50%; transition-duration: .45s; }
}
/* ---------- 7. Clients + testimonial ---------- */
.testimonial {
position: relative; height: 99.5rem; margin-top: 21.6rem; overflow: hidden;
/* Placeholder until the shader background lands in pass 4 */
background: radial-gradient(60rem 45rem at 12rem 52rem, rgba(48, 40, 241, .55), rgba(32, 15, 128, .25) 45%, transparent 70%), var(--black);
}
.testimonial__logos { left: 6.4rem; top: 6.2rem; width: 77.3rem; height: 3.7rem; }
.client { position: absolute; opacity: .34; transition: opacity .3s ease; }
.client img { width: 100%; height: 100%; }
.client.is-active, .client:hover { opacity: 1; }
.testimonial__name { left: 6.4rem; top: 38.9rem; }
.testimonial__role { left: 6.4rem; top: 46.9rem; width: 24rem; }
.testimonial__quote { left: 73.5rem; top: 38.9rem; width: 100rem; }
.testimonial__track { left: 6.5rem; top: 79.9rem; width: 20.9rem; height: 1px; background: var(--grey-700); }
.testimonial__track i { position: absolute; left: 0; top: 0; width: 5.7rem; height: 1px; background: #e1e1e1; }
/* ---------- 8. Leadership ---------- */
.leaders { position: relative; height: 206.1rem; background: var(--black); }
.leaders__e { left: 24.07rem; top: 14.3rem; width: 31.8rem; height: 41.2rem; }
.leaders__title { left: 72.8rem; top: 19.9rem; width: 84.7rem; }
.leaders__count { left: 124.2rem; top: 19.9rem; } /* sits right after the word, like the Awards count */
.leaders__lede { left: 71.7rem; top: 33.7rem; width: 84.6rem; color: var(--grey-400); }
.leaders__grid { position: absolute; left: 9rem; top: 62.7rem; display: flex; flex-direction: column; gap: 8rem; }
.leaders__row { display: flex; gap: 2.4rem; }
.leader { width: 41.7rem; display: flex; flex-direction: column; gap: 3.2rem; }
.leader__photo { position: relative; width: 41.7rem; height: 52.1rem; overflow: hidden; }
.leader__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leader__photo .photo-color { opacity: 0; }
.leader__name { display: block; }
.leader__role { display: block; font-weight: 700; }
/* ---------- 9. Offices ---------- */
.offices {
position: relative; z-index: 2; height: 151.9rem; margin-top: -2rem; overflow: hidden; color: var(--black);
background: var(--grey-50) url(assets/offices-bg.webp) center / 100% 100% no-repeat; border-radius: 8rem;
}
.offices__title { left: 13rem; top: 21.6rem; width: 65.8rem; }
.offices__right { left: 86rem; top: 21.6rem; width: 93rem; }
.offices__locs { display: flex; gap: 20rem; height: 28rem; margin-top: 7.2rem; }
.loc { display: flex; flex-direction: column; justify-content: flex-start; gap: 1.6rem; }
/* Sticker gives a small wiggle on hover */
@keyframes loc-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -7deg; } 50% { rotate: 5deg; } 75% { rotate: -3deg; } }
.loc > img { transform-origin: 50% 60%; }
.loc:hover > img, .loc.is-open > img { animation: loc-wiggle .7s cubic-bezier(.36, .07, .19, .97); }
.loc__name { display: flex; flex-direction: column; gap: 1.6rem; align-items: flex-start; }
.loc__city { font-family: var(--benton); font-weight: 600; font-style: italic; font-size: 4.8rem; line-height: 4rem; white-space: nowrap; }
.loc__time { display: inline-flex; align-items: center; height: 2.8rem; padding: .4rem 1.6rem; background: var(--white); font-family: var(--proxima); font-weight: 700; font-size: 1.4rem; line-height: 2.4rem; }
.loc__link { display: inline-flex; align-items: center; gap: 1.9rem; }
.loc__link img { width: 1.6rem; height: 1.6rem; }
.offices__track { left: -67.3rem; top: 75.9rem; height: 58.4rem; display: flex; align-items: center; gap: 4.3rem; }
.office-photo { flex: none; border-radius: 1.6rem; overflow: hidden; background: var(--white); }
.office-photo img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- 10. Fresh posts ---------- */
.posts { position: relative; height: 81.4rem; display: flex; justify-content: space-between; padding: 15rem 13rem; }
.posts__left { width: 58.7rem; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.posts__title { margin: 0; } /* uses .t-display-i, same as the Awards heading */
.btn-outline { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; height: 5.4rem; padding: 0 4.8rem; border: 1.8px solid var(--grey-300); border-radius: 7rem; }
.posts__grid { display: grid; grid-template-columns: 41.2rem 41.2rem; column-gap: 4.3262rem; row-gap: 7rem; }
.post { height: 22.2rem; display: flex; flex-direction: column; gap: 4.4rem; }
.post__head { position: relative; height: 5.6rem; border-top: 1px solid var(--grey-300); display: flex; flex-direction: column; justify-content: flex-end; }
.post__bar { position: absolute; left: 0; top: -.25rem; width: 22.7rem; height: .4rem; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) { .post:hover .post__bar { transform: scaleX(1); } }
.post:active .post__bar { transform: scaleX(1); }
.post__title { font-family: var(--nhgd); font-weight: 700; font-size: 2.4rem; line-height: 3.2rem; }
.post__body { display: flex; flex-direction: column; gap: 3.2rem; }
.post__text { height: 7.7512rem; }
.post__link { display: inline-flex; align-items: center; gap: 1.9rem; }
.post__link img { width: 1.6rem; height: 1.6rem; }
/* ---------- 11. Footer ---------- */
.footer { position: relative; height: 123.4rem; background: var(--black); overflow: hidden; }
.footer__logo { left: 5.7rem; top: 8rem; width: 18.5rem; height: 4.3rem; }
.footer__sub { left: 5.7rem; top: 27.7rem; width: 49.1rem; font-family: var(--nhgd); font-weight: 600; font-size: 1.4026rem; line-height: 1.6rem; letter-spacing: .14em; text-transform: uppercase; }
.footer__field { left: 5.7rem; top: 31.6rem; width: 49.1rem; display: flex; align-items: center; justify-content: space-between; padding-bottom: .8rem; border-bottom: 1px solid var(--grey-300); font-family: var(--proxima); font-size: 1.8034rem; line-height: 3.2rem; color: var(--grey-300); }
.footer__field img { width: 1.6rem; height: 1.6rem; }
.footer__label { font-family: var(--nhgd); font-weight: 600; font-size: 1.4026rem; line-height: 1.6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-300); }
.footer__links { display: flex; flex-direction: column; font-family: var(--nhgd); font-weight: 400; font-size: 4.2079rem; line-height: 4.8rem; letter-spacing: .02em; }
.footer__links a + a { margin-top: 1.05rem; }
.footer__top { left: 170.2rem; top: 41.7rem; display: flex; align-items: center; gap: 1rem; font-family: var(--proxima); font-weight: 700; font-size: 2.4045rem; line-height: 3.2rem; }
.footer__top img { width: 1.4rem; height: 1.4rem; }
.footer__rule { left: 5.7rem; top: 54.6rem; width: 179.1rem; height: 1px; background: #838383; }
.footer__legal { top: 56.7rem; font-family: var(--proxima); font-size: 1.8034rem; line-height: 3.2rem; color: var(--grey-300); }
.footer__bottom { left: 0; top: 67.9rem; width: 192rem; height: 55.5rem; overflow-x: clip; overflow-y: visible; }
.footer__innovate { left: 1.6rem; top: 2.9rem; font-family: var(--nhgd); font-weight: 900; font-style: italic; font-size: 41.2256rem; line-height: 44.7rem; text-transform: uppercase; color: rgba(138, 166, 255, .1); white-space: nowrap; }
.footer__stickers { left: -1rem; top: 12.7rem; width: 192.4rem; height: 42.8rem; }
.footer__strip { left: .8rem; top: .1rem; width: 191.6rem; height: 7.2rem; }
/* =====================================================================
Compact layout: tablets and phones (below 1024px)
No mobile design exists yet, so this adapts the desktop design:
same type, colour and assets; sections flow instead of using
fixed Figma coordinates.
===================================================================== */
@media (max-width: 1023px) {
.abs { position: static; }
/* Floating navigation */
.menu { top: 1.2rem; width: calc(100% - 2.4rem); max-width: 56rem; }
.menu__bar { height: 5.6rem; }
.menu__logo { width: 3.8rem; height: 3.4rem; }
.menu__label { font-size: 1.1rem; }
.menu__links a { height: 5.4rem; font-size: 1.7rem; }
/* We love what we do (small screens): the tags finish the sentence
"we love what we do but also...", then the photos run as a strip */
.culture { height: auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1rem .8rem; padding: 6rem 2rem 16rem; }
.culture .culture__label { position: relative; left: auto; top: auto; width: 100%; margin-bottom: 1.2rem; transform: translateY(-6.5rem); }
.culture .pill-at { position: relative; left: auto !important; top: auto !important; transform: rotate(var(--t, 0deg)); }
.culture .pill { height: 3.4rem; padding: 0 1.2rem; font-size: 1.2rem; }
.culture .pill-drag { display: contents; }
.culture .pill-drag:nth-of-type(3n+1) .pill-at { --t: -3deg; }
.culture .pill-drag:nth-of-type(3n+2) .pill-at { --t: 2deg; }
.culture .pill-drag:nth-of-type(3n) .pill-at { --t: -1deg; }
.culture__photos { position: relative; order: 2; width: calc(100% + 4rem); height: 24rem; margin: 5rem -2rem 0; padding-left: 2rem;
display: flex; align-items: center; gap: 1.2rem; transform: none; }
.culture__photo { position: relative; left: auto !important; top: auto !important; flex: none; width: auto !important; height: 20rem !important; }
.culture__photo:nth-child(even) { height: 24rem !important; }
.culture__photo img { width: auto; height: 100%; margin: 0; }
.craft { margin-top: -10rem; padding-top: 0; }
/* Awards: tap a row to open its media under the text */
.award { cursor: pointer; }
.award__drawer { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows .5s cubic-bezier(.65, 0, .35, 1); }
.award.is-open .award__drawer { grid-template-rows: 1fr; }
.award__drawer-inner { overflow: hidden; }
.award__drawer-inner img, .award__drawer-inner video { width: 70%; max-width: 32rem; height: auto; margin-top: 1.6rem; }
.awards__media { display: none; }
.award, .award.is-active { opacity: 1; border-color: var(--grey-700); }
.award .award__name { color: var(--grey-300); transition: color .3s ease; }
.award.is-open .award__name { color: var(--white); }
/* Hero */
.hero { height: 84rem; border-radius: 0 0 4rem 4rem; background-size: cover; }
.hero__headline { top: 22rem; left: 50%; font-size: 11rem; line-height: 11rem; }
.sticker { transform: scale(.45); transform-origin: 0 0; }
.hs1 { left: 80% !important; top: 12rem !important; }
.hs2 { left: 4% !important; top: 30rem !important; }
.hs3 { left: 46% !important; top: 29rem !important; }
.hero__intro { position: absolute; left: 2rem; right: 2rem; top: 40rem; width: auto; font-size: 3rem; line-height: 3.8rem; }
.hero__intro br { display: none; }
.pill { height: 3rem; padding: 0 1rem; font-size: 1.1rem; line-height: 1.4rem; }
.hp1 { left: 74% !important; top: 36rem !important; }
.hp2 { left: 74% !important; top: 76.5rem !important; }
.hp3 { left: 80% !important; top: 68rem !important; }
.hp4 { left: 22% !important; top: 35rem !important; }
.hp5 { left: 38% !important; top: 78rem !important; }
.hp6 { left: 18% !important; top: 72rem !important; }
/* Intro */
.intro { height: auto; padding: 12rem 2rem 14rem; margin-top: 0; background-size: cover; background-position: 30% top; }
.intro__logo { width: 18.2rem; height: 3.9rem; }
.intro__squiggle { display: none; }
.intro__est { width: auto; margin-top: 4rem; font-size: 1.2rem; line-height: 2.4rem; }
.intro__copy { width: auto; margin-top: .8rem; font-size: 1.8rem; line-height: 2.8rem; }
/* Pillars */
.pillars { width: auto; height: 64rem; margin: -4rem 1.6rem 0; border-radius: 2rem; }
.pillars__shape { position: absolute; left: -17%; top: 50%; width: 118%; height: auto; transform: translateY(-58%); }
.pillar { font-size: 1.5rem; line-height: 2.4rem; }
.pillar i { width: 1rem; height: 1rem; }
.pillar:nth-of-type(1) { left: 2rem !important; top: 6rem !important; }
.pillar:nth-of-type(2) { left: 42% !important; top: 17rem !important; }
.pillar:nth-of-type(3) { left: 14% !important; top: 28rem !important; }
.pillar:nth-of-type(4) { left: 46% !important; top: 39rem !important; }
.pillars__copy { position: absolute; left: 2rem; right: 2rem; top: auto; bottom: 3rem; width: auto; font-size: 1.6rem; line-height: 2.6rem; }
/* We love what we do */
.culture { margin-top: 3rem; }
.culture__line { z-index: 0; }
.culture__line { position: absolute; left: -46rem; top: 12.5rem; width: 130rem; height: auto; }
.culture__label { position: absolute; left: 2rem; top: 3rem; width: 20rem; }
.culture__label p { margin-top: 1.2rem; font-size: 1.2rem; line-height: 2rem; letter-spacing: .2rem; }
/* The Craft */
.craft { height: auto; padding-left: 1.6rem; padding-right: 1.6rem; }
.craft__box { position: static; width: auto; }
.craft__head { height: auto; padding: 3rem 2rem; border-bottom: 1px solid var(--grey-700); }
.craft__title { width: auto; margin-top: 1.2rem; font-size: 3rem; line-height: 3.6rem; }
.craft__lede { width: auto; margin-top: 2rem; font-size: 1.6rem; line-height: 2.6rem; }
.craft__grid { height: auto; margin-top: -1px; display: grid; grid-template-columns: 1fr; }
.card { position: relative; left: auto !important; width: auto; height: auto; margin-top: -1px; border-radius: 0 !important; }
.card:last-child, .card:last-child .card__text { border-radius: 0 0 2rem 2rem !important; }
.card__bar { padding: 0 2rem; }
.card__art { height: 30rem; }
.card__art img, .card__art .art-svg { left: 50%; height: 30rem; transform: translateX(-50%); }
.card__text { height: auto; padding: 3rem 2rem 4rem; }
.card__title { width: auto; font-size: 2.6rem; line-height: 3.2rem; }
.card__copy { width: auto; margin-top: 2.4rem; font-size: 1.6rem; line-height: 2.6rem; }
/* Awards */
.awards { height: auto; margin-top: 8rem; padding: 6rem 2rem; }
.awards__head { height: auto; padding-bottom: 2.4rem; }
.awards__head .t-display-i, .t-display-i { font-size: 6rem; line-height: 6rem; }
.awards__count, .leaders__count { position: absolute; left: auto; top: 0; font-size: 1.4rem; }
.awards__count { left: 20rem; }
.awards__lede { width: auto; margin-top: 2rem; font-size: 1.6rem; line-height: 2.6rem; }
.awards__list { width: auto; margin-top: 2rem; gap: 0; }
.award { height: auto; flex-wrap: wrap; gap: .4rem 2rem; padding: 1.8rem 0; font-size: 1.8rem; line-height: 2.6rem; }
.award__name { width: 100%; }
.award__meta { gap: 2rem; font-size: 1.6rem; }
.award__meta span:first-child { width: auto; }
.award__meta span:last-child { padding: 0; }
/* Testimonial */
.testimonial { height: auto; margin-top: 6rem; padding: 6rem 2rem 8rem; display: flex; flex-direction: column;
background: radial-gradient(40rem 30rem at 0 70%, rgba(48, 40, 241, .5), rgba(32, 15, 128, .2) 45%, transparent 70%), var(--black); }
.testimonial__logos { position: static; width: 100%; max-width: 52rem; height: auto; display: flex; align-items: center; flex-wrap: nowrap; gap: 2.4rem; order: 1; }
/* each logo grows in proportion to its width so all three share one height and fit one row */
.client { position: static; width: auto !important; height: auto !important; flex: 1 1 0; min-width: 0; }
.client:nth-child(1) { flex-grow: 4.83; } .client:nth-child(2) { flex-grow: 8.29; } .client:nth-child(3) { flex-grow: 4.15; }
.client img { width: 100%; height: auto; }
.testimonial__quote { order: 2; width: auto; margin-top: 6rem; font-size: 2.6rem; line-height: 3.2rem; }
.testimonial__name { order: 3; margin-top: 4rem; font-size: 1.8rem; line-height: 2.6rem; }
.testimonial__role { order: 4; width: auto; font-size: 1.6rem; line-height: 2.4rem; color: var(--grey-300); }
.testimonial__track { order: 5; position: relative; left: 0; top: auto; margin-top: 4rem; }
/* Leadership */
.leaders { height: auto; padding: 8rem 2rem 6rem; }
.leaders__e { position: static; display: block; width: 20rem; max-width: 50%; height: auto; margin: 0 auto 4rem; }
.leaders__title { position: static; width: auto; font-size: 4.4rem; line-height: 4.6rem; }
.leaders .leaders__count { position: static; display: block; margin-top: .8rem; }
.leaders__lede { width: auto; margin-top: 2.4rem; font-size: 1.6rem; line-height: 2.6rem; }
.leaders__grid { position: static; margin-top: 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem 1.2rem; }
.leaders__row { display: contents; }
.leader { width: auto; gap: 1.2rem; }
.leader__photo { width: 100%; height: auto; aspect-ratio: 417 / 521; }
.leader p { font-size: 1.5rem; line-height: 2.2rem; }
/* Offices */
.offices { height: auto; padding: 8rem 2rem 6rem; border-radius: 4rem; background-size: cover; }
.offices__title { width: auto; font-size: 3.6rem; line-height: 4.4rem; }
.offices__right { width: auto; margin-top: 2.4rem; }
.offices__right .t-sub-m { font-size: 2.2rem; line-height: 3rem; }
.offices__locs { height: auto; flex-wrap: wrap; gap: 4rem 6rem; margin-top: 4rem; }
.loc > img { transform: scale(.7); transform-origin: 0 0; margin-bottom: -2.8rem !important; }
.loc__city { font-size: 3rem; line-height: 3rem; }
.loc__link { font-size: 1.5rem; }
.offices__track { position: relative; left: -4rem; top: auto; height: 30rem; margin-top: 5rem; gap: 1.6rem; }
.office-photo { border-radius: 1rem; }
.office-photo:nth-child(4n+1), .office-photo:nth-child(4n) { width: 24rem !important; height: 25rem !important; }
.office-photo:nth-child(4n+2) { width: 24rem !important; height: 30rem !important; }
.office-photo:nth-child(4n+3) { width: 30rem !important; height: 20.5rem !important; }
/* Fresh posts */
.posts { height: auto; flex-direction: column; justify-content: flex-start; padding: 8rem 2rem; }
.posts__left { display: contents; }
.posts__title { order: 1; }
.posts__grid { order: 2; margin-top: 4rem; grid-template-columns: 1fr; row-gap: 6.4rem; }
.posts__btn { order: 3; align-self: flex-start; margin-top: 5rem; }
.post { height: auto; gap: 2.4rem; }
.post__head { height: auto; padding-top: 2rem; }
.post__text { height: auto; }
/* Footer */
.footer { height: auto; padding: 6rem 2rem 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; align-items: start; }
.footer > * { grid-column: 1 / -1; }
.footer__logo { grid-row: 1; width: 14.8rem; height: 3.44rem; }
.footer__sub { grid-row: 2; width: auto; margin-top: 5rem; }
.footer__field { grid-row: 3; width: auto; margin-top: 1.6rem; }
.footer .footer__label { position: static; margin-top: 5rem; grid-row: 4; }
.footer .footer__label:nth-of-type(2) { grid-column: 1; }
.footer .footer__label:nth-of-type(3) { grid-column: 2; }
.footer__links { grid-row: 5; margin-top: 1.6rem; font-size: 2.8rem; line-height: 3.6rem; }
.footer__links:nth-of-type(1) { grid-column: 1; }
.footer__links:nth-of-type(2) { grid-column: 2; }
.footer__links a { position: static !important; }
.footer__links a + a { margin-top: 0; }
.footer__top { grid-row: 6; justify-self: end; margin-top: 5rem; font-size: 1.8rem; }
.footer__rule { grid-row: 7; width: 100%; margin-top: 3rem; }
.footer__legal { display: block; margin-top: 1.6rem; font-size: 1.4rem; line-height: 2.2rem; }
.footer a.footer__legal:nth-of-type(2) { grid-row: 8; margin-top: 2.4rem; }
.footer a.footer__legal:nth-of-type(3) { grid-row: 9; }
.footer a.footer__legal:nth-of-type(4) { grid-row: 10; }
.footer__bottom { grid-row: 11; position: relative; left: 0; top: 0; width: auto; height: 22rem; margin: 4rem -2rem 0; }
.footer__strip { display: none; }
.footer__innovate { position: absolute; left: 1rem; top: 0; font-size: 13rem; line-height: 14rem; }
.footer__stickers { position: absolute; left: -25%; top: auto; bottom: 0; width: 150%; height: auto; }
}
/* Two-column grids on tablets */
@media (min-width: 640px) and (max-width: 1023px) {
.craft__grid { grid-template-columns: 1fr 1fr; }
.card:nth-child(odd) { margin-right: -1px; }
.card:last-child, .card:last-child .card__text { border-radius: 0 0 2rem 0 !important; }
.card:nth-child(3), .card:nth-child(3) .card__text { border-radius: 0 0 0 2rem !important; }
.posts__grid { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
.leaders__grid { grid-template-columns: 1fr 1fr 1fr; }
.hero { height: 90rem; }
}
/* ---------- Motion (pass 2) ---------- */
/* Hide content until motion.js has set start states (4s safety fallback in ) */
.js:not(.motion-ready) #smooth-content, .js:not(.motion-ready) .menu { visibility: hidden; }
/* Pop/rise run on separate properties so the Figma transforms stay intact */
.pill-at, .sticker, .loc > img { scale: var(--s, 1); rotate: calc(var(--pr, 0deg) + var(--fr, 0deg) + var(--hr, 0deg)); }
/* Hero floaters: gentle bob (--fx/--fy) plus scroll parallax (--py), on top of their Figma placement */
.hero .pill-at, .hero .sticker { translate: calc(var(--fx, 0px) + var(--mx, 0px)) calc(var(--fy, 0px) + var(--py, 0px) + var(--dy, 0px) + var(--my, 0px)); }
.pill-drag .sticker { left: 0; top: 0; }
.card__art img { translate: 0 var(--ry, 0px); }
.rl { padding-bottom: .08em; margin-bottom: -.08em; } /* line masks: keep descenders */
.dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 20; border-radius: inherit; }
#smooth-content > section, #smooth-content > header { will-change: transform; }
/* ---------- Pass 3: section signatures ---------- */
/* Curtain: one full-screen panel that covers the page on load and carries off the top */
.curtain { position: fixed; inset: 0; z-index: 100; pointer-events: none; display: none; background: var(--black); animation: curtain-fallback 0s 7s forwards; will-change: transform; }
@keyframes curtain-fallback { to { visibility: hidden; } }
.js .curtain { display: block; }
@media (prefers-reduced-motion: reduce) { .curtain { display: none !important; } }
/* Hero marquee: three copies of the headline; motion.js slides the track and wraps it */
.hero__headline { left: 0 !important; right: 0; transform: translateY(-50%) !important; text-align: left; pointer-events: none; }
.hero__track { display: inline-flex; will-change: transform; }
.hero__copy { display: inline-block; padding-right: .45em; }
.hero__copy .char { display: inline-block; will-change: transform; }
/* Draggable pills: a zero-size wrapper carries the position and the drag; the pill inside keeps its Figma tilt */
.pill-drag { position: absolute; width: 0; height: 0; }
@media (hover: hover) and (min-width: 1024px) {
.hero .pill-drag .pill-at, .hero .pill-drag .sticker { cursor: grab; transition: box-shadow .3s ease, filter .3s ease; }
.hero .pill-drag.is-dragging .pill-at { cursor: grabbing; box-shadow: 0 1.6rem 3rem rgba(13, 13, 13, .25); }
.hero .pill-drag.is-dragging .sticker { cursor: grabbing; filter: drop-shadow(0 1.6rem 2rem rgba(13, 13, 13, .25)); }
}
/* How we work: the shape leans toward the cursor */
.pillars__lean { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
/* Craft: illustration crossfades from white to lilac on hover (or when centred on touch screens) */
.card__art img { transition: opacity .6s ease; }
/* Hover state is the live SVG version of the colour illustration (parts animated in motion.js) */
.card__art .art-svg { position: absolute; left: 0; top: 0; height: 41.2rem; width: calc(41.2rem * var(--ar, 1)); overflow: visible; opacity: 0; transition: opacity .6s ease; }
@media (hover: hover) { .card:hover .art-svg { opacity: 1; } .card:hover .art-white { opacity: 0 !important; } }
.card.is-color .art-svg { opacity: 1; } .card.is-color .art-white { opacity: 0 !important; }
/* Footer stickers: each sticker is its own group so it can pop in */
/* Testimonial progress: one segment per testimonial, the active one fills over 7s */
.testimonial__track i { width: 0; }
.testimonial__body { will-change: transform, opacity; }
/* Offices carousel: hovering pauses it and eases the photo in */
.office-photo img { transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) { .office-photo:hover img { transform: scale(1.06); } }
.offices__track { will-change: transform; }
/* Leadership: cards open a profile */
.leader__photo { cursor: pointer; }
.leader__photo .photo-color { transition: opacity .5s ease; }
@media (hover: hover) { .leader:hover .photo-color { opacity: 1; } }
.lmodal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; }
.lmodal.is-open { display: flex; }
.lmodal__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(.8rem); -webkit-backdrop-filter: blur(.8rem); }
.lmodal__panel { position: relative; display: flex; gap: 6.4rem; width: 128rem; max-width: calc(100vw - 6.4rem); padding: 4rem; background: var(--black); border: 1px solid var(--grey-700); border-radius: 2rem; color: var(--white); }
.lmodal__photo { position: relative; flex: none; width: 48rem; aspect-ratio: 417 / 521; overflow: hidden; border-radius: 1.2rem; }
.lmodal__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lmodal__info { display: flex; flex-direction: column; justify-content: flex-end; gap: 2.4rem; padding-bottom: 1.2rem; }
.lmodal__name { font-family: var(--nhgd); font-weight: 500; font-size: 4.8rem; line-height: 5.4rem; }
.lmodal__role { font-family: var(--nhgt); font-weight: 700; font-size: 1.4rem; line-height: 2.4rem; letter-spacing: .3rem; text-transform: uppercase; color: var(--grey-300); }
.lmodal__bio { max-width: 56rem; color: var(--grey-300); }
.lmodal__link { display: inline-flex; align-items: center; gap: 1.2rem; align-self: flex-start; margin-top: 1.6rem; }
.lmodal__link img { width: 1.6rem; height: 1.6rem; filter: invert(1); }
.lmodal__close { position: absolute; top: 2.4rem; right: 2.4rem; width: 4.8rem; height: 4.8rem; border-radius: 50%; border: 1px solid var(--grey-700); color: var(--white); font-size: 2.4rem; line-height: 1; cursor: pointer; transition: background .3s ease; }
.lmodal__close:hover { background: #1a1a1a; }
@media (max-width: 1023px) {
.lmodal { align-items: flex-end; }
.lmodal__panel { flex-direction: column; gap: 2.4rem; width: 100%; max-width: none; max-height: 92vh; overflow-y: auto; padding: 2rem 2rem 4rem; border-radius: 2rem 2rem 0 0; }
.lmodal__photo { width: 100%; max-width: 32rem; }
.lmodal__name { font-size: 3.2rem; line-height: 3.8rem; }
.lmodal__close { top: 1.6rem; right: 1.6rem; background: var(--black); z-index: 2; }
}
/* Craft micro-interactions: dots turn lilac and a fine moving grain plays over the art on hover */
.card__grain { position: absolute; inset: -50%; pointer-events: none; opacity: 0; transition: opacity .5s ease; mix-blend-mode: screen;
background-image: url("data:image/svg+xml;utf8,");
background-size: 20rem 20rem; animation: grain 0.8s steps(6) infinite; animation-play-state: paused; }
@keyframes grain { 0% { transform: translate(0, 0); } 17% { transform: translate(-6%, 4%); } 33% { transform: translate(5%, -7%); } 50% { transform: translate(-3%, 8%); } 67% { transform: translate(7%, 2%); } 83% { transform: translate(-8%, -4%); } 100% { transform: translate(0, 0); } }
@media (hover: hover) {
.card:hover .card__dots { color: var(--lilac); } .card:hover .card__dots .dots { opacity: 1; }
.card:hover .card__grain { opacity: .22; animation-play-state: running; }
}
.card.is-color .card__dots { color: var(--lilac); } .card.is-color .card__dots .dots { opacity: 1; }
.card.is-color .card__grain { opacity: .22; animation-play-state: running; }
.card.is-color .art-svg { transition: none; }
@media (prefers-reduced-motion: reduce) { .card__grain { animation: none; } }
/* Footer stickers fall in and pile up (physics in motion.js) */
.footer__stickers { overflow: visible; }
.footer__stickers .fs { will-change: transform; }
.footer__bottom.is-physics { cursor: default; }
/* We love what we do: photos react to the cursor */
.culture__photo { box-shadow: 0 2rem 4rem rgba(0, 0, 0, .35); }
/* Culture tags float and drag like the header pills */
.culture .pill-at { translate: calc(var(--fx, 0px) + var(--mx, 0px)) calc(var(--fy, 0px) + var(--dy, 0px) + var(--my, 0px)); }
.culture__photo { translate: var(--mx, 0px) var(--my, 0px); }
@media (hover: hover) and (min-width: 1024px) {
.culture__photo { cursor: grab; transition: box-shadow .4s ease; }
.culture__photo.is-dragging { cursor: grabbing; box-shadow: 0 3.2rem 6rem rgba(0, 0, 0, .55); }
.culture .pill-drag .pill-at { cursor: grab; transition: box-shadow .3s ease; }
.culture .pill-drag.is-dragging .pill-at { cursor: grabbing; box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, .45); }
.culture__photos { perspective: 120rem; }
}
@media (max-width: 1023px) { .card__art .art-svg { left: 50%; height: 30rem; width: calc(30rem * var(--ar, 1)); transform: translateX(-50%); } }
/* ---------- WebGL layers ---------- */
canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.testimonial.has-gl { background: transparent; overflow: visible; overflow-x: clip; }
/* neighbours let the testimonial light bleed through behind their content */
.awards, .leaders { background: transparent; z-index: 1; }
/* the shader canvas extends past the section and fades out at an angle, so it bleeds softly into Awards and Leadership */
canvas.gl--testi { z-index: -1; left: 0; top: -14rem; width: 100%; height: calc(100% + 28rem);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); }
.testimonial > :not(.gl) { z-index: 1; }
.gl-e { position: relative; } .gl-e.abs { position: absolute; }
.gl-e > img { display: block; width: 100%; height: auto; }
.gl-e > img.is-gl { opacity: 0; }
.gl--photo { z-index: 2; }
.leader__photo.has-liquid .photo-color { opacity: 0 !important; }
@media (max-width: 1023px) {
.testimonial > :not(.gl) { position: relative; left: auto; top: auto; }
.gl-e.leaders__e { position: relative; left: auto; top: auto; }
}
/* About Everyday: new relief artwork. The dark version is the background; on desktop a liquid reveal of the
metallic version follows the cursor (webgl.js). */
/* Artwork sits inset from the edges and fades into the black on the left, right and bottom (and slightly at the top) */
.intro__art { translate: 0 var(--py, 0px); will-change: transform; position: absolute; left: 6%; width: 88%; top: 9.3rem; aspect-ratio: 3344 / 1882; pointer-events: none;
-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 62%, transparent);
mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 62%, transparent);
-webkit-mask-composite: source-in; mask-composite: intersect; }
canvas.gl--metal { inset: 0; width: 100%; height: 100%; }
/* Resting relief: darker, softer, lower contrast and a touch desaturated, like rough unpolished cast metal,
so the polished reveal reads as a different material */
.intro__art::before { content: ""; position: absolute; inset: 0; background: url(assets/intro-base.webp) center / 100% 100% no-repeat;
filter: contrast(.9) brightness(.5) saturate(.55); }
@media (max-width: 1023px) { .intro__art { left: -30%; width: 160%; top: 10rem; } }
.intro > .dim { background: var(--black); }
/* Slightly rounded corners on the awards preview and leadership portraits */
.awards__media, .award__drawer-inner img, .award__drawer-inner video { border-radius: 1.2rem; overflow: hidden; }
.leader__photo, .lmodal__photo { border-radius: 1.2rem; overflow: hidden; }