/* ========================================================================== Momentum Link Professionals — site stylesheet Palette, type scale and components carried over from the original design. ========================================================================== */ :root { --cream: #F2EFE8; --cream-panel: #F7F5F0; --rule: #DCD6C9; --rule-strong: #D5CEC0; --ink: #10222F; --ink-deep: #08161F; --blue: #4A9BE8; --blue-light: #7FBCF0; --blue-dark: #1F5F94; --rust: #C2542F; --sand: #8C7F6B; --slate: #4A5A66; --slate-dark: #3C4C58; --slate-body: #2C3E4B; --slate-soft: #6B7A85; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --shell: 1240px; --gutter: 28px; --header-h: 68px; --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-expo: cubic-bezier(.19, 1, .22, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: transparent; /* the cream lives on ; see Page grounds */ color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.is-locked { overflow: hidden; } /* ── Page grounds ───────────────────────────────────────────────────────── The cream stays the constant; each page earns a different texture on top of it, drawn from the same palette and kept far enough back that it reads as paper rather than decoration. Dark sections paint over it as before. It is drawn on one fixed pseudo-element behind the content rather than with background-attachment: fixed, which forces a full repaint on every scroll — this page does enough scroll work already. ------------------------------------------------------------------------ */ :root { /* A fine paper grain, shared by every page. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.19'/%3E%3C/svg%3E"); } html { background-color: var(--cream); } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 160px 160px; } /* Home — the pools of light the hero opens on. */ body[data-page="home"]::before { background-image: var(--grain), radial-gradient(58vw 58vw at 10% 2%, rgba(74, 155, 232, .24), transparent 62%), radial-gradient(52vw 52vw at 94% 74%, rgba(194, 84, 47, .14), transparent 60%), radial-gradient(46vw 46vw at 50% 108%, rgba(140, 127, 107, .16), transparent 62%); background-size: 160px 160px, auto, auto, auto; background-repeat: repeat, no-repeat, no-repeat, no-repeat; } /* Practice — planning paper: a fine grid with a heavier rule every fifth cell, under a light gradient falling from the top. */ body[data-page="practice"]::before { background-image: var(--grain), repeating-linear-gradient(0deg, rgba(16, 34, 47, .04) 0 1px, transparent 1px 27px), repeating-linear-gradient(90deg, rgba(16, 34, 47, .04) 0 1px, transparent 1px 27px), repeating-linear-gradient(0deg, rgba(16, 34, 47, .065) 0 1px, transparent 1px 135px), repeating-linear-gradient(90deg, rgba(16, 34, 47, .065) 0 1px, transparent 1px 135px), linear-gradient(168deg, rgba(74, 155, 232, .22) 0%, rgba(74, 155, 232, .07) 34%, rgba(74, 155, 232, 0) 58%), radial-gradient(54vw 54vw at 94% 92%, rgba(140, 127, 107, .2), transparent 62%); background-size: 160px 160px, auto, auto, auto, auto, auto, auto; background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat; } /* Industries — a drawing-board hatch. */ body[data-page="industries"]::before { background-image: var(--grain), repeating-linear-gradient(45deg, rgba(16, 34, 47, .05) 0 1px, transparent 1px 15px), radial-gradient(54vw 54vw at 4% 8%, rgba(140, 127, 107, .24), transparent 62%), radial-gradient(50vw 50vw at 96% 78%, rgba(74, 155, 232, .17), transparent 62%); background-size: 160px 160px, auto, auto, auto; background-repeat: repeat, repeat, no-repeat, no-repeat; } /* Technology — a schematic dot grid. */ body[data-page="technology"]::before { background-image: var(--grain), radial-gradient(circle, rgba(16, 34, 47, .12) .9px, transparent 1.3px), radial-gradient(60vw 60vw at 92% 2%, rgba(74, 155, 232, .22), transparent 64%), radial-gradient(48vw 48vw at 6% 88%, rgba(140, 127, 107, .18), transparent 62%); background-size: 160px 160px, 26px 26px, auto, auto; background-repeat: repeat, repeat, no-repeat, no-repeat; } /* Contact — a single wash off the dark hero. */ body[data-page="contact"]::before { background-image: var(--grain), radial-gradient(72vw 46vw at 84% 0%, rgba(74, 155, 232, .24), transparent 66%), radial-gradient(48vw 48vw at 2% 90%, rgba(140, 127, 107, .2), transparent 62%), radial-gradient(40vw 40vw at 60% 52%, rgba(194, 84, 47, .09), transparent 60%); background-size: 160px 160px, auto, auto, auto; background-repeat: repeat, no-repeat, no-repeat, no-repeat; } /* The dark bands get depth too, so they are not flat slabs against it. */ .stats { background-image: radial-gradient(70% 160% at 12% 0%, rgba(74, 155, 232, .22), transparent 70%); } .site-footer { background-image: radial-gradient(60% 150% at 88% 0%, rgba(74, 155, 232, .18), transparent 72%); } img { max-width: 100%; display: block; } /* ── Loading state for pictures ─────────────────────────────────────────── Text arrives first; a picture's space should not sit blank while it is on its way. Every image carries a moving sheen until it has decoded, drawn on the image's own background so it shows through the transparent element and is covered the moment the picture paints. The mid grey reads against both the dark card grounds and the light media wells. ------------------------------------------------------------------------ */ @keyframes mlShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .js img:not(.is-loaded) { background-image: linear-gradient( 100deg, rgba(125, 136, 148, 0) 18%, rgba(125, 136, 148, .28) 38%, rgba(125, 136, 148, .28) 46%, rgba(125, 136, 148, 0) 66% ); background-size: 220% 100%; background-repeat: no-repeat; animation: mlShimmer 1.5s linear infinite; } .js img.is-loaded { background-image: none; animation: none; } @media (prefers-reduced-motion: reduce) { /* A steady tint rather than a moving one. */ .js img:not(.is-loaded) { animation: none; background-image: linear-gradient(rgba(125, 136, 148, .22), rgba(125, 136, 148, .22)); background-size: 100% 100%; } } a { color: var(--blue-dark); text-decoration: none; } a:hover { color: var(--rust); } ::selection { background: var(--ink); color: var(--cream); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; } .shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 400; background: var(--blue); color: var(--ink-deep); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 16px; border-radius: 3px; transition: top .2s ease; } .skip-link:focus { top: 12px; color: var(--ink-deep); } /* ── Typographic primitives ───────────────────────────────────────────── */ .eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--sand); margin: 0; } .eyebrow--blue { color: var(--blue-light); } .display { font-family: var(--serif); font-weight: 300; letter-spacing: -.02em; line-height: 1.06; margin: 20px 0 0; } .lede { font-size: 18px; line-height: 1.65; color: var(--slate); max-width: 60ch; margin: 26px 0 0; } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 15px 26px; border: 1px solid transparent; border-radius: 3px; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; } .btn--primary { background: var(--blue); color: var(--ink-deep); } .btn--primary:hover { background: var(--blue-light); color: var(--ink-deep); } .btn--ghost { background: transparent; color: var(--cream); border-color: rgba(242, 239, 232, .36); } .btn--ghost:hover { border-color: var(--cream); color: var(--cream); } .btn--ghost-fill { border-color: rgba(242, 239, 232, .4); } .btn--ghost-fill:hover { background: var(--cream); color: var(--ink); } .btn--dark { background: var(--ink); color: var(--cream); align-self: flex-start; } .btn--dark:hover { background: var(--blue-dark); color: var(--cream); } /* ── Header ───────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(16, 34, 47, .94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(242, 239, 232, .14); } .site-header__inner { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: 12px; } .brand:hover { color: inherit; } /* The lockup is rebuilt from the mark plus live text. Scaled to header height the supplied horizontal SVG renders "PROFESSIONALS" at under 4px, because its sub-line is 11px inside a 130px artboard. */ .brand__mark { display: block; width: 30px; height: 30px; flex: none; } .brand__mark svg { display: block; width: 100%; height: 100%; } .brand__text { display: flex; flex-direction: column; gap: 3px; } .brand__name { font-family: 'Archivo', var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .155em; color: #FFFFFF; line-height: 1; } .brand__tag { font-family: 'Archivo', var(--sans); font-weight: 600; font-size: 8.5px; letter-spacing: .40em; color: #7FB2E4; line-height: 1; } /* The stacked lockup carries the motto, so it needs room to stay readable. */ .site-footer__logo { display: block; width: clamp(280px, 34vw, 380px); } .site-footer__logo svg { display: block; width: 100%; height: auto; } .nav { display: flex; align-items: center; gap: 4px; } .nav__link { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: rgba(242, 239, 232, .6); background: transparent; border: 0; padding: 9px 14px; border-radius: 3px; transition: background .2s ease, color .2s ease; } .nav__link:hover { background: rgba(242, 239, 232, .12); color: var(--cream); } .nav__link[aria-current="page"] { background: rgba(74, 155, 232, .18); color: var(--cream); } .nav__present { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; background: var(--blue); color: var(--ink-deep); border: 0; padding: 9px 14px; border-radius: 3px; cursor: pointer; margin-left: 6px; transition: background .2s ease; } .nav__present:hover { background: var(--blue-light); } .nav-toggle { display: none; width: 42px; height: 38px; background: transparent; border: 1px solid rgba(242, 239, 232, .28); border-radius: 3px; cursor: pointer; padding: 0; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; width: 18px; height: 1.5px; background: var(--cream); transition: transform .3s var(--ease-out), background .2s ease, top .3s var(--ease-out); } .nav-toggle span { top: 50%; left: 50%; margin: -.75px 0 0 -9px; } .nav-toggle span::before { left: 0; top: -6px; } .nav-toggle span::after { left: 0; top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } .progress { height: 2px; background: var(--blue); width: 0; transition: width .12s linear; } /* ── Pinned scroll stage (home hero) ──────────────────────────────────── */ .stage { position: relative; height: 360vh; background: var(--ink-deep); } .stage__pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); min-height: 520px; overflow: hidden; background: var(--ink-deep); } /* The opening frame. Before any scrolling the hero is a single small plate, so the rest of the frame is composed around it — a dimmed, blurred field of the same picture, a soft pool of light behind it, a hairline border and a caption — and all of that clears within the first fraction of the scroll, leaving the original choreography untouched. */ .stage__backdrop { position: absolute; inset: 0; overflow: hidden; opacity: .5; } .stage__backdrop img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); filter: blur(26px) saturate(.6) brightness(.42); } .stage__glow { position: absolute; left: 50%; top: 50%; width: min(120vh, 150vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, rgba(74, 155, 232, .2) 0%, rgba(74, 155, 232, .07) 34%, rgba(8, 22, 31, 0) 68%); } .stage__frame { position: absolute; inset: 26px; border: 1px solid rgba(242, 239, 232, .13); pointer-events: none; } .stage__l1 { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(.3); border-radius: 28px; opacity: 0; box-shadow: 0 42px 90px rgba(0, 0, 0, .58), 0 0 0 1px rgba(242, 239, 232, .16); will-change: transform, border-radius; } /* Sits just under the plate: 50% + half of the plate's 30% height. */ .stage__intro { position: absolute; left: 0; right: 0; top: calc(65% + 26px); text-align: center; padding: 0 var(--gutter); pointer-events: none; } .stage__plate { font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(247, 245, 240, .42); margin: 0 0 10px; } .stage__caption { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(15px, 1.7vw, 20px); line-height: 1.4; color: rgba(247, 245, 240, .74); margin: 0; } .stage__l2 { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); overflow: hidden; will-change: clip-path; } .stage__l2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12) translateY(4%); will-change: transform; } .stage__tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(to top, var(--ink-deep) 2%, rgba(8, 22, 31, .62) 48%, rgba(8, 22, 31, .22) 100%); } .stage__block { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) 8vh; opacity: 0; will-change: transform, opacity; } .stage__inner { max-width: var(--shell); margin: 0 auto; } .stage__kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 22px; } .stage__title { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 6.4vw, 82px); line-height: 1.02; letter-spacing: -.022em; color: var(--cream-panel); margin: 0; max-width: 16ch; text-wrap: balance; } .stage__title--sub { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 24px; max-width: 20ch; } .stage__actions { display: flex; gap: 12px; flex-wrap: wrap; } .stage__meter { position: absolute; top: 26px; right: var(--gutter); display: flex; align-items: center; gap: 10px; pointer-events: none; } .stage__count { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: rgba(247, 245, 240, .6); } .stage__track { width: 64px; height: 1px; background: rgba(247, 245, 240, .24); position: relative; overflow: hidden; } .stage__bar { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; } .stage__cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: rgba(247, 245, 240, .55); pointer-events: none; } /* Without JS (or with reduced motion) the pinned choreography cannot run, so the stage collapses to a single readable hero instead of a blank dark screen. */ .no-js .stage, .stage.is-static { height: auto; } .no-js .stage__pin, .stage.is-static .stage__pin { position: relative; top: 0; height: auto; min-height: 0; } .no-js .stage__l1, .stage.is-static .stage__l1 { transform: translate(-50%, -50%) scale(1); border-radius: 0; opacity: 1; } .no-js .stage__l2, .stage.is-static .stage__l2 { display: none; } .no-js .stage__tint, .stage.is-static .stage__tint { opacity: 1; } .no-js .stage__block, .stage.is-static .stage__block { position: relative; opacity: 1; transform: none; filter: none; padding-top: 24vh; } .no-js .stage__meter, .no-js .stage__cue, .no-js .stage__backdrop, .no-js .stage__glow, .no-js .stage__frame, .no-js .stage__intro, .stage.is-static .stage__meter, .stage.is-static .stage__cue, .stage.is-static .stage__backdrop, .stage.is-static .stage__glow, .stage.is-static .stage__frame, .stage.is-static .stage__intro { display: none; } .no-js .stage__l1, .stage.is-static .stage__l1 { box-shadow: none; } /* ── Stats band ───────────────────────────────────────────────────────── */ .stats { background: var(--ink); border-top: 1px solid rgba(242, 239, 232, .12); } .stats .shell { padding-block: 44px; } /* Chips rather than hairline dividers. The old rules had to be re-stated at every breakpoint and text kept ending up against them; a chip carries its own edges, so nothing can touch a line that is no longer there. */ .stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .stats__item { padding: 30px 26px; border-radius: 14px; background: rgba(242, 239, 232, .055); border: 1px solid rgba(242, 239, 232, .13); transition: background .3s ease, border-color .3s ease; } .stats__item:hover { background: rgba(242, 239, 232, .085); border-color: rgba(242, 239, 232, .22); } .stats__n { font-family: var(--serif); font-size: 46px; font-weight: 300; color: var(--blue); line-height: 1; } .stats__label { font-size: 14.5px; color: rgba(242, 239, 232, .72); margin-top: 12px; line-height: 1.5; } /* ── Editorial two-column section ─────────────────────────────────────── */ .editorial { padding: 104px var(--gutter) 24px; } .editorial__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 56px; align-items: start; } .editorial__title { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -.015em; margin: 18px 0 0; max-width: 20ch; } .editorial__body { display: flex; flex-direction: column; gap: 20px; padding-top: 6px; } .editorial__body p { font-size: 17px; line-height: 1.68; margin: 0; color: var(--slate-body); } .editorial__list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .editorial__list li { position: relative; padding-left: 26px; font-family: var(--mono); font-size: 13px; line-height: 1.5; letter-spacing: .02em; color: var(--slate-dark); } .editorial__list li::before { content: ""; position: absolute; left: 0; top: .52em; width: 7px; height: 7px; border-radius: 2px; background: var(--blue); transform: rotate(45deg); } /* Closing call to action */ .closing { padding: 96px var(--gutter) 112px; border-top: 1px solid var(--rule-strong); text-align: center; } .closing__title { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.12; letter-spacing: -.018em; margin: 18px 0 30px; } .closing .btn--dark { align-self: center; } /* ── Media cards ──────────────────────────────────────────────────────── */ .card-section { padding: 56px var(--gutter) 96px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px; } .card-grid--tech { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .card-grid--items { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 22px; } .card { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); } .card--tech { aspect-ratio: 3 / 2; } .card picture, .card img { position: absolute; inset: 0; width: 100%; height: 100%; } .card img { object-fit: cover; opacity: .94; transition: transform 1.4s var(--ease-out), opacity .6s ease; } .card:hover img, .card:focus-within img { transform: scale(1.07); opacity: 1; } .card--tech:hover img, .card--tech:focus-within img { transform: scale(1.08); } .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(8, 22, 31, .9) 2%, rgba(8, 22, 31, .35) 38%, rgba(8, 22, 31, 0) 68%); } .card--tech::after { background: linear-gradient(to top, rgba(8, 22, 31, .9) 2%, rgba(8, 22, 31, .3) 42%, rgba(8, 22, 31, 0) 72%); } .card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 7px; } .card--tech figcaption { padding: 20px; gap: 6px; } .card__num { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--blue-light); } .card__title { font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.18; color: var(--cream-panel); } .card--tech .card__title { font-size: 20px; line-height: 1.2; } .card__sub { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: rgba(247, 245, 240, .74); } .card--tech .card__sub { font-size: 11px; } /* The blurb slides open on hover, but only once JS has confirmed a fine pointer — on touch it stays permanently visible. */ .card.is-collapsible .card__sub { opacity: 0; max-height: 0; overflow: hidden; transform: translateY(8px); transition: opacity .45s ease, transform .45s var(--ease-out), max-height .45s var(--ease-out); } .card.is-collapsible:hover .card__sub, .card.is-collapsible:focus-within .card__sub { opacity: 1; max-height: 140px; transform: none; } .card--plain figcaption { font-family: var(--mono); font-size: 11.5px; line-height: 1.45; color: var(--cream-panel); letter-spacing: .01em; padding: 16px 18px; } .card--plain::after { background: linear-gradient(to top, rgba(8, 22, 31, .88) 2%, rgba(8, 22, 31, 0) 55%); } /* ── Card deck (technology page) ────────────────────────────────────────── The grid in the markup is the fallback; JS promotes it to a stacked deck that is shuffled one card at a time, and "See all" drops back to the grid. ------------------------------------------------------------------------ */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .deck-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--rule-strong); } .deck-bar[hidden] { display: none; } .deck-count { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sand); margin: 0; } .deck-count b { color: var(--blue-dark); font-weight: 500; } .deck-count [data-deck-title] { color: var(--ink); letter-spacing: .08em; } .deck-actions { display: flex; align-items: center; gap: 8px; } .deck-nav { display: flex; gap: 6px; } .deck-nav[hidden] { display: none; } .deck-btn { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: transparent; color: var(--slate-dark); border: 1px solid var(--rule-strong); padding: 9px 14px; border-radius: 3px; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .deck-btn:hover { border-color: var(--ink); color: var(--ink); } .deck-btn--primary { background: var(--ink); color: var(--cream); border-color: var(--ink); } .deck-btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--cream); } .deck-hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--sand); text-align: center; margin: 22px 0 0; } .deck-hint[hidden] { display: none; } .card-grid.is-deck { display: block; position: relative; max-width: 620px; height: clamp(320px, 42vw, 420px); /* The stack fans below the box, so leave it room before the hint line. */ margin: 8px auto 92px; cursor: pointer; touch-action: pan-y; outline-offset: 8px; } .card-grid.is-deck .card { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 5px; box-shadow: 0 22px 44px rgba(8, 22, 31, .3); transition: transform .6s var(--ease-expo), opacity .45s ease; will-change: transform, opacity; } /* Only the face-up card carries its caption; the rest read as edges. */ .card-grid.is-deck .card figcaption { transition: opacity .4s ease; } .card-grid.is-deck .card:not(.is-front) figcaption { opacity: 0; } .card-grid.is-deck .card:not(.is-front) img { transform: none; } .card-grid.is-deck .card.is-front figcaption { opacity: 1; } .card-grid.is-deck .card.is-front .card__sub { max-height: none; opacity: 1; transform: none; } /* The spread reaches past the deck box, so the section clips rather than letting a wide fan push the page sideways. */ [data-deck-section] { overflow-x: clip; } /* A manual move just flicks the top card away to the right. */ .card-grid.is-deck .card.is-leaving { transform: translate3d(116%, -6%, 0) rotate(12deg) scale(.94) !important; opacity: 0 !important; transition: transform .26s cubic-bezier(.4,.05,.6,1), opacity .26s ease !important; } /* Nothing is "behind" mid-riffle — every fanned card shows its face. */ .card-grid.is-deck.is-shuffling .card figcaption { opacity: 0; } /* Hovering nudges the top card up so the deck reads as interactive. */ .card-grid.is-deck:hover .card.is-front { transform: var(--front-hover); } /* ── Full-bleed feature band ──────────────────────────────────────────── */ .band { position: relative; overflow: hidden; background: var(--ink); } .band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; animation: mlDriftSlow 42s ease-in-out infinite; } .band--contact .band__bg { opacity: .4; animation-duration: 46s; } .band__veil { position: absolute; inset: 0; background: linear-gradient(105deg, var(--ink) 12%, rgba(16, 34, 47, .55) 70%); } .band--contact .band__veil { background: linear-gradient(100deg, var(--ink) 20%, rgba(16, 34, 47, .6)); } .band__inner { position: relative; padding: 112px var(--gutter); } .band__copy { max-width: 52ch; } .band__title { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 4vw, 50px); line-height: 1.1; letter-spacing: -.018em; color: var(--cream-panel); margin: 18px 0 20px; } .band__text { font-size: 17px; line-height: 1.66; color: rgba(247, 245, 240, .8); margin: 0 0 30px; } /* ── Sector panels (expanding rail) ───────────────────────────────────── */ .panels-section { padding: 96px var(--gutter); } .panels { display: flex; gap: 4px; height: clamp(400px, 58vh, 560px); overflow: hidden; } .panel { position: relative; display: block; overflow: hidden; background: var(--ink-deep); cursor: pointer; min-width: 56px; flex: 1; transition: flex .95s var(--ease-expo); } .panel.is-open { flex: 3.4; } .panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); opacity: .55; transition: transform 1.4s var(--ease-expo), opacity .8s ease; } .panel.is-open img { transform: scale(1.04); opacity: 1; } .panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(8, 22, 31, .94) 6%, rgba(8, 22, 31, .15) 58%); } .panel__rail { position: absolute; left: 20px; bottom: 22px; z-index: 2; pointer-events: none; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(247, 245, 240, .86); /* Turns about its own centre — pivoting from a corner throws the rotated label clear of the panel, where overflow clips all but its last letters. */ transition: opacity .45s ease, transform .55s var(--ease-expo); } .panel.is-open .panel__rail { opacity: 0; transform: rotate(196deg); } .panel__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px; pointer-events: none; opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .7s var(--ease-expo); } .panel.is-open .panel__body { opacity: 1; transform: none; } /* The caption lives inside an , so its parts are spans — they need to be blocks for their stacking margins to apply. */ .panel__count, .panel__name, .panel__blurb { display: block; } .panel__count { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-light); white-space: nowrap; } .panel__name { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; color: var(--cream-panel); line-height: 1.12; margin-top: 10px; white-space: nowrap; } .panel__blurb { font-size: 15px; line-height: 1.55; color: rgba(247, 245, 240, .78); margin: 12px 0 0; max-width: 42ch; } .panels-hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--sand); margin-top: 14px; } .panels-hint__touch { display: none; } /* ── Interior page heads ──────────────────────────────────────────────── */ .page-head { padding: 88px var(--gutter) 56px; } .page-head .display { font-size: clamp(34px, 5.2vw, 62px); max-width: 19ch; } /* ── Practice as a process ──────────────────────────────────────────────── A sticky road-map rail on the left tracks progress through the six steps; each step's content expands out of its point on the way in and collapses back to it on the way out. ------------------------------------------------------------------------ */ .process { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 60px; padding-bottom: 104px; } /* Pinned mode: the section is tall enough to give each step a slice of scrolling, but the steps themselves never move — one sits centred at a time and scrolling only decides which one is projected. Applied by JS (`is-pinned`), so without it — or under reduced motion — the steps stay a plain readable column. */ .process.is-pinned { display: block; height: calc(6 * 88vh); padding-bottom: 0; } .process.is-pinned .process__pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 60px; align-items: center; overflow: hidden; } .process.is-pinned .process__rail { position: static; height: 100%; } .process.is-pinned .process__stage { position: relative; height: 100%; } .process.is-pinned .step { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; } .process.is-pinned .step.is-active { pointer-events: auto; } .process.is-pinned .step__inner { width: 100%; max-height: 100%; } .process__rail { /* One continuous timeline: round, cropped stills threaded onto a line that runs the height of the viewport. */ position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); align-self: start; display: flex; align-items: center; } .process__points { list-style: none; margin: 0; padding: 0; position: relative; flex: 1; height: 82%; display: flex; flex-direction: column; justify-content: space-between; } /* The thread, drawn between the first and last node and filled as you travel. */ .process__track { position: absolute; left: 26.5px; /* centred on the 56px node slot */ top: 28px; bottom: 28px; width: 3px; border-radius: 2px; background: #CFC6B4; } .process__fill { position: absolute; left: 0; top: 0; width: 3px; height: 100%; border-radius: 2px; background: var(--blue-dark); transform: scaleY(0); transform-origin: top; transition: transform .18s linear; } .process__item { display: flex; } .process__point { display: flex; align-items: center; gap: 14px; color: var(--sand); transition: color .35s ease; } .process__point:hover { color: var(--ink); } /* A fixed 56px slot keeps every node centred on the thread, whatever size the picture inside it is currently drawn at. */ .process__thumb { position: relative; z-index: 2; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--cream); box-shadow: 0 0 0 4px var(--cream), inset 0 0 0 1px rgba(16, 34, 47, .18); transform: scale(.72); transition: transform .7s var(--ease-expo), box-shadow .5s ease; } .process__thumb img { width: 100%; height: 100%; object-fit: cover; /* round crop */ opacity: .55; filter: saturate(.65); transition: opacity .5s ease, filter .6s ease, transform 1.2s var(--ease-expo); } .process__item.is-done .process__thumb img { opacity: .7; filter: saturate(.85); } .process__item.is-current .process__thumb { transform: scale(1.2); box-shadow: 0 0 0 4px var(--cream), 0 0 0 5px var(--blue-dark); } .process__item.is-current .process__thumb img { opacity: 1; filter: none; } .process__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .process__num { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; transition: color .35s ease; } .process__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity .45s ease, transform .55s var(--ease-expo); } .process__item.is-current .process__point { color: var(--ink); } .process__item.is-current .process__num { color: var(--blue-dark); } .process__item.is-current .process__label { opacity: 1; transform: none; } .process__steps, .process__stage { display: flex; flex-direction: column; gap: 96px; } .step { scroll-margin-top: calc(var(--header-h) + 40px); } .step__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; background: var(--cream-panel); border: 1px solid var(--rule); padding: clamp(22px, 2.4vw, 34px); /* Growth starts at the rail edge, so the panel unfolds out of its point. */ transform-origin: left center; } .step__media { aspect-ratio: var(--media-ratio, 16 / 9); overflow: hidden; background: var(--rule); } .step__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); } .step:hover .step__media img { transform: scale(1.05); } .step__copy { display: flex; flex-direction: column; gap: 13px; } .step__num { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-dark); margin: 0; } .step__title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.7vw, 34px); line-height: 1.14; letter-spacing: -.012em; margin: 0; } .step__body { font-size: 16.5px; line-height: 1.68; color: var(--slate-dark); margin: 0; } .step__deliverable { font-family: var(--mono); font-size: 11px; color: var(--sand); letter-spacing: .06em; margin: 4px 0 0; } /* Collapsed toward the rail until the step is the one being read. */ /* Collapsed to a point on its own node, so opening projects the panel out of that circle — and passing folds it back into it. The origin is set from the node's live position by initProcess(). */ .js .step__inner { opacity: 0; transform: scale(.12); transition: opacity .55s ease, transform .9s var(--ease-expo); } .js .step.is-active .step__inner { opacity: 1; transform: none; } @media (min-width: 900px) { .step__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 34px; align-items: center; } .step__media { aspect-ratio: var(--media-ratio, 4 / 3); } /* A panoramic still gets the whole width instead of being cut to fit a column — the panel has the room, so the picture stays whole. */ .step__inner--wide { grid-template-columns: minmax(0, 1fr); gap: 26px; } } @media (max-width: 900px) { /* The same thread, laid on its side under the header. */ .process { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 72px; } .process__rail { top: var(--header-h); height: auto; padding: 14px 0 12px; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); background: var(--cream); border-bottom: 1px solid var(--rule-strong); z-index: 20; } .process__points { height: auto; flex-direction: row; justify-content: space-between; } .process__track { left: calc(var(--gutter) + 22px); right: calc(var(--gutter) + 22px); /* 14px rail padding + half of the 44px node = the nodes' centre line. */ top: 35px; bottom: auto; width: auto; height: 3px; } .process__fill { width: 100%; height: 3px; transform: scaleX(0); transform-origin: left; } .process__item { flex: none; } .process__point { flex-direction: column; gap: 6px; } .process__thumb { width: 44px; height: 44px; box-shadow: 0 0 0 4px var(--cream), inset 0 0 0 1px rgba(16, 34, 47, .18); } .process__item.is-current .process__thumb { transform: scale(1.16); } .process__meta { align-items: center; } .process__num { font-size: 9px; } .process__label { display: none; } .process__steps, .process__stage { gap: 56px; } .js .step__inner { transform: scale(.16); } /* Pinned on a phone: the thread sits across the top of the pinned area and the panel fills what is left, still without a scrollbar of its own. */ .process.is-pinned { height: calc(6 * 84vh); } .process.is-pinned .process__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 14px; align-items: stretch; } .process.is-pinned .process__rail { position: static; height: auto; margin: 0; padding-inline: 0; background: none; border-bottom: 0; } .process.is-pinned .process__track { left: 22px; right: 22px; } .process.is-pinned .step__inner { padding: 18px; gap: 16px; } /* Capped so the panel still fits the pinned area; at these ratios nothing actually crops on a phone. */ .process.is-pinned .step__media { aspect-ratio: var(--media-ratio, 2 / 1); max-height: 30vh; } .process.is-pinned .step__body { font-size: 15px; line-height: 1.55; } .process.is-pinned .step__title { font-size: clamp(21px, 5.6vw, 26px); } } /* ── Sector sections (industries page) ────────────────────────────────── */ .sector { padding: 0 var(--gutter) 72px; scroll-margin-top: calc(var(--header-h) + 20px); } .sector__head { border-top: 1px solid var(--rule-strong); padding-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 36px; align-items: start; } .sector__count { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-dark); } .sector__name { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.016em; margin: 14px 0 16px; } .sector__blurb { font-size: 16.5px; line-height: 1.66; color: var(--slate-dark); margin: 0; max-width: 46ch; } .sector__lead { aspect-ratio: 16 / 10; overflow: hidden; background: var(--rule); } .sector__lead img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); } .sector__lead:hover img { transform: scale(1.06); } /* ── Contact ──────────────────────────────────────────────────────────── */ .contact-hero .band__inner { padding: 96px var(--gutter) 88px; } .contact-hero .display { color: var(--cream-panel); max-width: 17ch; } .contact-hero .lede { color: rgba(247, 245, 240, .8); max-width: 56ch; } .contact-grid { padding: 72px var(--gutter) 104px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px; align-items: start; } .contact-list { display: flex; flex-direction: column; gap: 28px; } .contact-item { border-top: 1px solid var(--rule-strong); padding-top: 16px; } .contact-item__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); } .contact-item__value { font-family: var(--serif); font-size: 24px; font-weight: 400; margin-top: 8px; line-height: 1.3; display: inline-block; color: var(--ink); } .contact-item__value:hover { color: var(--blue-dark); } .contact-item__note { font-size: 14.5px; color: var(--slate); margin-top: 6px; line-height: 1.5; } .form-card { background: var(--cream-panel); border: 1px solid var(--rule); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 18px; } .form-card__title { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0; line-height: 1.2; } .form-fields { display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate-soft); } .field input, .field textarea { font-family: var(--sans); font-size: 15px; padding: 11px 13px; border: 1px solid var(--rule-strong); background: #fff; border-radius: 2px; color: var(--ink); width: 100%; } .field textarea { resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--blue-dark); box-shadow: 0 0 0 3px rgba(31, 95, 148, .12); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--rust); } .field__error { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--rust); } .field__error:empty { display: none; } .form-status { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; letter-spacing: .02em; margin: 0; } .form-status:empty { display: none; } .form-status[data-state="ok"] { color: var(--blue-dark); } .form-status[data-state="error"] { color: var(--rust); } /* ── Footer ───────────────────────────────────────────────────────────── */ .site-footer { background: var(--ink); color: rgba(242, 239, 232, .62); } .site-footer__grid { max-width: var(--shell); margin: 0 auto; padding: 56px var(--gutter) 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; } .site-footer__col { display: flex; flex-direction: column; gap: 9px; } .site-footer__brand { font-family: var(--serif); font-size: 20px; color: var(--cream); } .site-footer__blurb { font-size: 14px; line-height: 1.55; max-width: 34ch; } .site-footer__head { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 239, 232, .4); } .site-footer a, .site-footer span:not(.site-footer__brand):not(.site-footer__head) { font-size: 14.5px; } .site-footer a { color: rgba(242, 239, 232, .72); } .site-footer a:hover { color: var(--blue-light); } .site-footer__meta { border-top: 1px solid rgba(242, 239, 232, .12); } .site-footer__meta div { max-width: var(--shell); margin: 0 auto; padding: 18px var(--gutter); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: rgba(242, 239, 232, .38); } /* ── Header call to action ────────────────────────────────────────────── */ .nav__cta { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; background: transparent; color: var(--cream); border: 1px solid rgba(242, 239, 232, .4); padding: 9px 14px; border-radius: 3px; cursor: pointer; margin-left: 6px; transition: background .2s ease, color .2s ease, border-color .2s ease; } .nav__cta:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); } /* ── About: beliefs and the name ──────────────────────────────────────── */ .beliefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px; } .belief { background: var(--cream-panel); border: 1px solid var(--rule); padding: clamp(24px, 2.6vw, 36px); } .belief__title { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.2; margin: 0 0 12px; } .belief__text { font-size: 16px; line-height: 1.65; color: var(--slate-dark); margin: 0; } .nameparts { display: flex; flex-direction: column; gap: 20px; margin-top: 6px; } .namepart { border-top: 1px solid rgba(242, 239, 232, .22); padding-top: 14px; } .namepart__word { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--cream-panel); margin: 0 0 4px; } .namepart__meaning { font-size: 16px; line-height: 1.6; color: rgba(247, 245, 240, .78); margin: 0; max-width: 52ch; } /* The light lockup, for cream sections. */ .logo-block { display: block; width: clamp(260px, 30vw, 340px); margin: 0 auto 26px; } .logo-block--left { margin: 0 0 30px; } .logo-block svg { display: block; width: 100%; height: auto; } /* ── Get in touch modal ───────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vw, 40px); } .modal[hidden] { display: none; } .modal__scrim { position: absolute; inset: 0; background: rgba(8, 22, 31, .72); backdrop-filter: blur(4px); } .modal__panel { position: relative; z-index: 1; width: min(940px, 100%); max-height: 100%; overflow-y: auto; background: var(--cream); border: 1px solid var(--rule-strong); border-radius: 4px; box-shadow: 0 40px 90px rgba(8, 22, 31, .45); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); } .modal__media { position: relative; overflow: hidden; background: var(--ink); } .modal__media img { width: 100%; height: 100%; object-fit: cover; } .modal__body { padding: clamp(22px, 3vw, 38px); } .modal__title { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.1; letter-spacing: -.018em; margin: 16px 0 12px; } .modal__text { font-size: 16px; line-height: 1.6; color: var(--slate); margin: 0 0 18px; } .modal__direct { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--mono); font-size: 12.5px; margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--rule-strong); } .modal__panel .form-card { background: none; border: 0; padding: 0; gap: 14px; } .modal__panel .form-card__title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); } .modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; background: rgba(242, 239, 232, .92); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; transition: background .2s ease, color .2s ease; } .modal__close:hover { background: var(--rust); color: var(--cream); border-color: var(--rust); } @media (max-width: 760px) { /* No room for the picture beside the form — it caps and sits above it. */ .modal__panel { grid-template-columns: minmax(0, 1fr); } .modal__media { max-height: 26vh; } } /* ── Presentation overlay ─────────────────────────────────────────────── */ .pres { position: fixed; inset: 0; z-index: 300; background: var(--ink-deep); overflow: hidden; } .pres[hidden] { display: none; } .pres__slide { position: absolute; inset: 0; opacity: 0; z-index: 1; will-change: clip-path; } .pres__slide.is-prev { opacity: 1; z-index: 2; } .pres__slide.is-active { opacity: 1; z-index: 3; } .pres__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pres__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 22, 31, .96) 22%, rgba(8, 22, 31, .6) 52%, rgba(8, 22, 31, .28) 78%, rgba(8, 22, 31, .55) 100%); } .pres__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(28px, 5vw, 72px) clamp(28px, 6vw, 86px) clamp(56px, 7vw, 96px); z-index: 6; pointer-events: none; } .pres__num { font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 20px; } .pres__title { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 6.4vw, 88px); line-height: 1; letter-spacing: -.025em; color: var(--cream-panel); max-width: 15ch; text-wrap: balance; } .pres__sub { font-family: var(--mono); font-size: clamp(12px, 1.3vw, 15px); line-height: 1.6; color: rgba(247, 245, 240, .8); max-width: 52ch; margin-top: 22px; } .pres__brand { position: absolute; top: 26px; left: 28px; z-index: 8; display: flex; align-items: center; gap: 10px; pointer-events: none; } .pres__brand-mark { display: block; width: 26px; height: 26px; } .pres__brand-mark svg { display: block; width: 100%; height: 100%; } .pres__brand-name { font-family: 'Archivo', var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .16em; color: rgba(247, 245, 240, .92); } .pres__controls { position: absolute; top: 24px; right: 26px; z-index: 8; display: flex; gap: 8px; } .pres__btn { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; background: rgba(247, 245, 240, .1); color: var(--cream-panel); border: 1px solid rgba(247, 245, 240, .24); padding: 9px 15px; border-radius: 3px; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .pres__btn:hover { background: rgba(247, 245, 240, .22); } .pres__btn--close:hover { background: var(--rust); border-color: var(--rust); } .pres__ticks { position: absolute; left: clamp(28px, 6vw, 86px); right: clamp(28px, 6vw, 86px); bottom: 26px; z-index: 8; display: flex; gap: 5px; } .pres__tick { flex: 1; height: 22px; background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: flex-end; } .pres__tick span { display: block; width: 100%; height: 2px; background: rgba(247, 245, 240, .22); position: relative; overflow: hidden; } .pres__tick i { position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; } .pres__edge { position: absolute; top: 0; bottom: 80px; width: 14%; z-index: 7; background: none; border: 0; } .pres__edge--prev { left: 0; cursor: w-resize; } .pres__edge--next { right: 0; cursor: e-resize; } /* ── Scroll reveal ────────────────────────────────────────────────────── */ .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* ── Keyframes ────────────────────────────────────────────────────────── */ @keyframes mlDriftSlow { 0% { transform: scale(1.08) translate3d(0, 0, 0); } 50% { transform: scale(1.02) translate3d(1.4%, .8%, 0); } 100% { transform: scale(1.08) translate3d(0, 0, 0); } } @keyframes mlUp { from { opacity: 0; transform: translateY(38px); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes mlKenA { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.17) translate3d(-2%, -1.4%, 0); } } @keyframes mlKenB { from { transform: scale(1.16) translate3d(1.6%, 1%, 0); } to { transform: scale(1.02) translate3d(0, 0, 0); } } @keyframes mlTick { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes mlWipe0 { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } } @keyframes mlWipe1 { from { clip-path: circle(0% at 50% 55%); } to { clip-path: circle(85% at 50% 55%); } } @keyframes mlWipe2 { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes mlWipe3 { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes mlWipe4 { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { :root { --gutter: 20px; } .site-header__inner { position: relative; } .nav-toggle { display: block; } .nav { position: absolute; top: 100%; /* The header inner is already full width here — pulling the panel out by the gutter pushed it past the viewport and produced a sideways scroll whenever the menu was open. */ left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px var(--gutter) 20px; background: rgba(16, 34, 47, .98); border-bottom: 1px solid rgba(242, 239, 232, .14); max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .nav[hidden] { display: none; } .nav__link { padding: 13px 12px; font-size: 12px; } .nav__present { margin-left: 0; margin-top: 8px; padding: 13px 12px; font-size: 12px; } .nav__cta { margin-left: 0; margin-top: 6px; padding: 13px 12px; font-size: 12px; text-align: center; } .stage { height: 280vh; } .editorial { padding-top: 72px; } .editorial__grid { gap: 32px; } .band__inner { padding: 80px var(--gutter); } .page-head { padding-top: 64px; } .panels-section { padding: 64px var(--gutter); } /* Same accordion, rotated: the row becomes a column and the panels trade width for height. Every timing, ratio and counter-scale is unchanged — only the axis and the spine label's orientation differ. */ .panels { flex-direction: column; height: clamp(520px, 82vh, 680px); } .panel { min-width: 0; min-height: 58px; } .panel__rail { /* A short, wide strip reads horizontally — no spine needed. */ writing-mode: horizontal-tb; left: 20px; right: 20px; top: 50%; bottom: auto; transform: translateY(-50%); transform-origin: 0 50%; } .panel.is-open .panel__rail { opacity: 0; transform: translateY(-50%) rotate(-9deg) translateX(-10px); } .panel__body { padding: 22px; } .panel__name, .panel__count { white-space: normal; } .panels-hint__pointer { display: none; } .panels-hint__touch { display: inline; } .contact-grid { padding-top: 48px; gap: 36px; } .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pres__edge { bottom: 120px; width: 20%; } .pres__controls { top: 18px; right: 18px; } .pres__brand { top: 20px; left: 18px; } } @media (max-width: 560px) { .stats__grid { grid-template-columns: minmax(0, 1fr); } .stage__pin { min-height: 460px; } .card-grid, .card-grid--tech, .card-grid--items { grid-template-columns: 1fr; } .practice-row { grid-template-columns: 1fr; } .site-footer__grid { padding-top: 40px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js [data-reveal] { opacity: 1; transform: none; } } @media print { .site-header, .site-footer, .pres, .stage__cue { display: none !important; } body { background: #fff; color: #000; } }