/* ========================================================================== Crossover Productions India — main stylesheet Tokens: Crossover brand kit (bronze / cream / espresso, Cormorant Garamond + Jost) ========================================================================== */ /* ---------- Tokens ---------- */ :root { --co-bronze-900: #3d2a1a; --co-bronze-800: #5c3f27; --co-bronze-700: #7a5735; --co-bronze-600: #916941; --co-bronze-500: #a97e50; --co-bronze-400: #c29a6c; --co-bronze-300: #d8b98f; --co-bronze-200: #e8d3b4; --co-bronze-100: #f2e6d3; --co-cream-100: #faf6f0; --co-cream-200: #f4ede2; --co-sand-300: #e9dcc8; --co-charcoal-700: #3a3632; --co-charcoal-800: #262320; --co-espresso-950: #17130f; --font-display: "Cormorant Garamond", "Times New Roman", serif; --font-sans: "Jost", "Century Gothic", "Futura", sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur: 320ms; --dur-slow: 640ms; --dur-theme: 900ms; /* Grid — 12 cols desktop / 6 cols mobile */ --margin: 1rem; --gutter: 0.625rem; --cols: 6; /* Fluid spacing: never below a usable rem floor */ --sp-xs: max(0.5rem, calc(8 / 1440 * 100vw)); --sp-sm: max(0.75rem, calc(16 / 1440 * 100vw)); --sp-md: max(1rem, calc(24 / 1440 * 100vw)); --sp-lg: max(1.5rem, calc(40 / 1440 * 100vw)); --sp-xl: max(2.5rem, calc(64 / 1440 * 100vw)); --sec-sm: max(4rem, calc(96 / 1440 * 100vw)); --sec: max(6rem, calc(176 / 1440 * 100vw)); --sec-lg: max(8rem, calc(256 / 1440 * 100vw)); /* Type scale */ --fs-mega: clamp(3.5rem, 13.5vw, 15rem); --fs-hero: clamp(3rem, 8.4vw, 9.5rem); --fs-display: clamp(2.5rem, 5.6vw, 6.25rem); --fs-statement: clamp(1.75rem, 3.4vw, 3.5rem); --fs-h3: clamp(1.5rem, 2.4vw, 2.5rem); --fs-lead: clamp(1.125rem, 1.35vw, 1.375rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.6875rem; --track-caps: 0.18em; --hud-h: 2.75rem; --vh: 1vh; } @media (min-width: 768px) { :root { --margin: 2.5rem; --gutter: 1.5rem; --cols: 12; } } /* Themes — set on , switched per section while scrolling */ body, body[data-theme="dark"] { --bg: var(--co-espresso-950); --bg-2: #211b16; --bg-3: #2b231d; --fg: var(--co-cream-100); --muted: rgba(250, 246, 240, 0.58); --faint: rgba(250, 246, 240, 0.32); --line: rgba(250, 246, 240, 0.14); --em: var(--co-bronze-400); --accent: var(--co-bronze-400); --accent-hover: var(--co-bronze-300); --btn-bg: var(--co-cream-100); --btn-fg: var(--co-espresso-950); --frame-bg: #211b16; --frame-line: rgba(194, 154, 108, 0.28); } body[data-theme="light"] { --bg: var(--co-cream-100); --bg-2: var(--co-cream-200); --bg-3: var(--co-sand-300); --fg: var(--co-espresso-950); --muted: #6f665c; --faint: rgba(23, 19, 15, 0.38); --line: var(--co-sand-300); --em: var(--co-bronze-600); --accent: var(--co-bronze-600); --accent-hover: var(--co-bronze-700); --btn-bg: var(--co-espresso-950); --btn-fg: var(--co-cream-100); --frame-bg: var(--co-cream-200); --frame-line: rgba(145, 105, 65, 0.3); } body[data-theme="bronze"] { --bg: #6b4a2b; --bg-2: #5c3f27; --bg-3: #7a5735; --fg: var(--co-cream-100); --muted: rgba(250, 246, 240, 0.7); --faint: rgba(250, 246, 240, 0.4); --line: rgba(250, 246, 240, 0.22); --em: var(--co-bronze-200); --accent: var(--co-bronze-200); --accent-hover: var(--co-cream-100); --btn-bg: var(--co-cream-100); --btn-fg: var(--co-bronze-800); --frame-bg: #5c3f27; --frame-line: rgba(232, 211, 180, 0.3); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: clip; } body { margin: 0; min-height: 100vh; background: var(--page-bg, var(--bg)); color: var(--fg); font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color var(--dur-theme) var(--ease); overflow-x: clip; } body.is-locked { overflow: hidden; } img, svg, canvas, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ul, ol { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } em { font-style: italic; } ::selection { background: var(--co-bronze-400); color: var(--co-espresso-950); } :focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } .sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip:focus { position: fixed; top: 1rem; left: 1rem; z-index: 200; background: var(--btn-bg); color: var(--btn-fg); padding: 0.5rem 1rem; } /* ---------- Layout ---------- */ .container { width: 100%; padding-inline: var(--margin); margin-inline: auto; } .grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--sp-lg); } .grid > * { grid-column: 1 / -1; } @media (min-width: 768px) { .col-md-3 { grid-column: span 3; } .col-md-4 { grid-column: span 4; } .col-md-5 { grid-column: span 5; } .col-md-6 { grid-column: span 6; } .col-md-7 { grid-column: span 7; } .col-md-8 { grid-column: span 8; } .col-md-start-7 { grid-column-start: 7; } .col-md-start-8 { grid-column-start: 8; } .col-md-start-7.col-md-6 { grid-column: 7 / span 6; } .col-md-start-7.col-md-5 { grid-column: 7 / span 5; } .col-md-start-8.col-md-5 { grid-column: 8 / span 5; } .col-md-start-8.col-md-4 { grid-column: 8 / span 4; } } @media (min-width: 1024px) { .col-lg-3 { grid-column: span 3; } .col-lg-4 { grid-column: span 4; } .col-lg-5 { grid-column: span 5; } .col-lg-6 { grid-column: span 6; } .col-lg-7 { grid-column: span 7; } .col-lg-8 { grid-column: span 8; } .col-lg-9 { grid-column: span 9; } .col-lg-start-5.col-lg-7 { grid-column: 5 / span 7; } .col-lg-start-6.col-lg-7 { grid-column: 6 / span 7; } .col-lg-start-8.col-lg-5 { grid-column: 8 / span 5; } .col-lg-start-9.col-lg-4 { grid-column: 9 / span 4; } .col-lg-start-10.col-lg-3 { grid-column: 10 / span 3; } } .section { position: relative; padding-block: var(--sec); } .section--tight { padding-block: var(--sec-sm); } .section--flush { padding-block: 0; } .page { position: relative; } /* ---------- Type ---------- */ .display, .mega, .statement, .quote, .title, .case-row__title, .menu__t, .work-card__title, .brief__title, .form__q, .marquee__item, .press__list li, .stat__n, .presence__country, .why__t, .role__step, .index-list__t, .next-case__link .mega { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; } .display em, .title em, .statement em, .brief__title em, .form__q em, .role__step em, .contact__close em, .mega em { display: inline; color: var(--em); font-style: italic; transition: color var(--dur-theme) var(--ease); } .display, .title { font-size: var(--fs-display); line-height: 1; } .display--hero { font-size: var(--fs-hero); line-height: 0.92; max-width: 14ch; } .display--page { font-size: clamp(3rem, 7.2vw, 8rem); line-height: 0.95; margin-top: var(--sp-lg); } .display--center { text-align: center; margin-inline: auto; max-width: 18ch; } .display--footer { font-size: clamp(2.75rem, 6.4vw, 7rem); } .mega { font-size: var(--fs-mega); line-height: 0.86; text-transform: uppercase; letter-spacing: -0.035em; font-weight: 500; } .mega--case { font-size: clamp(3.25rem, 10vw, 11rem); text-transform: none; letter-spacing: -0.03em; margin-block: var(--sp-lg) var(--sp-xl); } .statement { font-size: var(--fs-statement); line-height: 1.12; } .lead { font-size: var(--fs-lead); line-height: 1.55; font-weight: 300; color: var(--fg); max-width: 36rem; } .body-l { font-size: 1.0625rem; line-height: 1.7; color: var(--muted); max-width: 36rem; } .eyebrow { font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--muted); } /* Bracketed scramble label: [ Featured Work ] */ .label { display: inline-flex; align-items: center; gap: 0.35em; font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--fg); white-space: nowrap; } .label__br { color: var(--accent); font-weight: 400; transition: color var(--dur-theme) var(--ease); } /* ---------- Buttons ---------- */ .btn { --h: 2.75rem; display: inline-flex; align-items: center; gap: 0.9rem; height: var(--h); padding-inline: 1.1rem 0.9rem; border-radius: 2px; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; white-space: nowrap; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn__icon { width: 0.75rem; height: 0.75rem; transition: transform var(--dur) var(--ease); } .btn__icon svg { width: 100%; height: 100%; } .btn:hover .btn__icon { transform: translate(2px, -2px); } .btn--solid { background: var(--btn-bg); color: var(--btn-fg); } .btn--solid:hover { background: var(--accent); color: var(--co-espresso-950); } .btn--ghost { border: 1px solid var(--line); color: var(--fg); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--sp-lg); } /* ---------- Tags ---------- */ .tags { display: flex; flex-wrap: wrap; gap: 0.35rem; } .tag { padding: 0.3rem 0.55rem 0.25rem; font-size: 0.625rem; font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; background: var(--bg-3); color: var(--fg); border-radius: 2px; transition: background-color var(--dur-theme) var(--ease); } .tag--accent { background: var(--accent); color: var(--co-espresso-950); } /* ---------- Photo slots & placeholder frames ---------- */ .photo { position: relative; aspect-ratio: var(--ratio, 4/5); overflow: hidden; background: var(--frame-bg); transition: background-color var(--dur-theme) var(--ease); } .photo .pixel, .photo .frame { position: absolute; inset: 0; } .pixel img { width: 100%; height: 100%; object-fit: cover; } .pixel canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; } .frame { display: grid; place-items: center; background: linear-gradient(135deg, rgba(194, 154, 108, 0.1), rgba(23, 19, 15, 0) 60%), var(--frame-bg); border: 1px solid var(--frame-line); transition: background-color var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease); } .frame__mark { width: clamp(1.75rem, 12%, 3.5rem); opacity: 0.22; } body[data-theme="light"] .frame__mark { filter: invert(0.7) sepia(1) saturate(1.5) hue-rotate(-10deg); opacity: 0.35; } .frame__slot { position: absolute; left: 0.75rem; bottom: 0.65rem; font-size: 0.625rem; letter-spacing: 0.08em; color: var(--faint); } .frame__corner { position: absolute; width: 0.75rem; height: 0.75rem; border: 1px solid var(--accent); opacity: 0.6; } .frame__corner--tl { top: 0.6rem; left: 0.6rem; border-right: 0; border-bottom: 0; } .frame__corner--br { right: 0.6rem; bottom: 0.6rem; border-left: 0; border-top: 0; } /* ========================================================================== Global chrome ========================================================================== */ /* Loader */ .loader { position: fixed; inset: 0; z-index: 120; background: var(--co-espresso-950); color: var(--co-cream-100); } .loader__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .loader__meta { position: absolute; left: var(--margin); right: var(--margin); bottom: 1.25rem; display: flex; justify-content: space-between; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; } .loader__meta .label__br { color: var(--co-bronze-400); } .loader.is-done { pointer-events: none; } html:not(.js) .loader { display: none; } /* Page transition canvas */ .transition { position: fixed; inset: 0; z-index: 110; width: 100vw; height: 100vh; pointer-events: none; } /* HUD */ .hud { position: fixed; inset: 0 0 auto; z-index: 70; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 1rem; padding: 1rem var(--margin); pointer-events: none; } .hud > * { pointer-events: auto; } .hud__logo { justify-self: start; margin-top: 0.35rem; } .hud__logo-img { width: clamp(7.5rem, 11vw, 10.5rem); height: auto; } .hud__logo-img--dark { display: none; } body[data-theme="light"] .hud__logo-img--light { display: none; } body[data-theme="light"] .hud__logo-img--dark { display: block; } .hud__bar { display: grid; grid-template-columns: var(--hud-h) 1fr var(--hud-h); align-items: center; width: min(34rem, 44vw); height: var(--hud-h); background: var(--co-espresso-950); color: var(--co-cream-100); border: 1px solid rgba(250, 246, 240, 0.08); border-radius: 2px; } .hud__mark { display: grid; place-items: center; height: 100%; } .hud__mark-canvas { width: 1.4rem; height: 1.4rem; image-rendering: pixelated; } .hud__message { text-align: center; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hud__toggle { display: grid; place-items: center; height: 100%; } .hud__toggle-lines { display: grid; gap: 4px; width: 1rem; } .hud__toggle-lines i { display: block; height: 1px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } body.panel-open .hud__toggle-lines i:nth-child(1) { transform: translateY(5px) rotate(45deg); } body.panel-open .hud__toggle-lines i:nth-child(2) { opacity: 0; } body.panel-open .hud__toggle-lines i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } .hud__side { justify-self: end; display: grid; gap: 0.5rem; width: 13.5rem; } .hud-card { display: flex; align-items: center; gap: 0.75rem; background: var(--co-cream-100); color: var(--co-espresso-950); border-radius: 2px; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; } .hud-card--cta { padding: 0.35rem 0.75rem 0.35rem 0.35rem; transition: background-color var(--dur) var(--ease); } .hud-card--cta:hover { background: var(--co-bronze-300); } .hud-card__thumb { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: var(--co-espresso-950); border-radius: 1px; } .hud-card__thumb img { width: 1.25rem; } .hud-card--drawer { display: block; background: var(--co-espresso-950); color: var(--co-cream-100); border: 1px solid rgba(250, 246, 240, 0.08); } .hud-card__head { width: 100%; display: flex; justify-content: space-between; padding: 0.75rem; font-size: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; } .hud-card__pm i { font-style: normal; display: inline-block; min-width: 0.6em; text-align: center; color: var(--co-bronze-400); } .hud-card__body a { display: flex; gap: 0.75rem; padding: 0.55rem 0.75rem; border-top: 1px solid rgba(250, 246, 240, 0.08); text-transform: none; letter-spacing: 0.02em; font-weight: 400; font-size: 0.8125rem; transition: color var(--dur) var(--ease); } .hud-card__body a:hover { color: var(--co-bronze-300); } .hud-card__body a span { color: var(--co-bronze-400); font-size: var(--fs-label); letter-spacing: var(--track-caps); padding-top: 0.15em; } @media (max-width: 1023px) { .hud { grid-template-columns: auto 1fr; } .hud__bar { justify-self: end; width: auto; grid-template-columns: var(--hud-h) auto var(--hud-h); } .hud__message { display: none; } .hud__side { display: none; } } /* Cursor label */ .cursor-label { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; padding: 0.45rem 0.65rem 0.4rem; background: var(--co-cream-100); color: var(--co-espresso-950); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; white-space: nowrap; border-radius: 2px; opacity: 0; transform: translate3d(-100px, -100px, 0); transition: opacity var(--dur) var(--ease); } .cursor-label.is-visible { opacity: 1; } @media (hover: none) { .cursor-label { display: none; } } /* Bottom information bar */ .bottom-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; transition: border-color var(--dur-theme) var(--ease); } .bottom-bar__muted { color: var(--muted); margin-right: 0.5rem; } .bottom-bar__social { display: flex; gap: 1rem; align-items: center; } .bottom-bar__social a:hover { color: var(--accent); } .bottom-bar__clock { font-variant-numeric: tabular-nums; } @media (max-width: 767px) { .bottom-bar__base, .bottom-bar__clock { display: none; } } /* ========================================================================== Sections ========================================================================== */ /* Hero */ .hero { min-height: calc(var(--vh) * 100); display: flex; padding-block: calc(var(--hud-h) + 4.5rem) 1.25rem; overflow: hidden; } .hero__backdrop, .create__backdrop, .error-404__backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero__backdrop canvas, .create__backdrop canvas, .error-404__backdrop canvas { width: 100%; height: 100%; } .hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-xl); } .hero__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; } .hero__kicker { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); } .hero .display--hero { margin-top: auto; } .hero__foot { align-items: end; } .audiences { display: grid; } .audiences__row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: 0.8rem; border-top: 1px solid var(--line); } .audiences__row:last-child { border-bottom: 1px solid var(--line); } .audiences__k { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); padding-top: 0.2em; } .audiences__v { font-size: var(--fs-small); color: var(--muted); } /* Work intro + case rows */ .work-intro { padding-bottom: var(--sec-sm); } .work-intro__label { display: flex; align-items: end; justify-content: flex-end; } .case-rows { margin-top: var(--sec-sm); border-top: 1px solid var(--line); } .work-intro__more { margin-top: var(--sp-xl); } /* Belief */ .belief { text-align: center; } .belief__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sec-sm); } .belief__tc { font-size: var(--fs-label); letter-spacing: var(--track-caps); font-variant-numeric: tabular-nums; color: var(--muted); } .belief__words { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 2.5rem; margin-top: var(--sp-xl); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--em); } .belief__note { margin: var(--sec-sm) auto 0; max-width: 32rem; color: var(--muted); font-size: var(--fs-small); } /* What we create */ .create { overflow: hidden; } .create .container { position: relative; z-index: 1; } .create__intro { margin-top: var(--sp-xl); } .create__cols { margin-top: var(--sec-sm); row-gap: var(--sp-xl); } .create__head { display: inline-flex; gap: 0.35em; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; margin-bottom: 1rem; } .create__head .label__br { color: var(--accent); } .create__head:hover { color: var(--accent); } .create__list li { font-size: 1.0625rem; line-height: 1.45; } .create__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: var(--sec-sm); padding-top: 1.25rem; border-top: 1px solid var(--line); } .create__tldr { font-family: var(--font-display); font-size: var(--fs-h3); font-style: italic; color: var(--em); } /* Approach teaser */ .approach-teaser__text { display: grid; gap: var(--sp-lg); align-content: end; justify-items: start; } .approach-teaser .label, .clients .label, .presence .label, .page-hero .label, .service .label, .stage .label, .industries .label, .why .label, .gap .label, .founder .label, .role .label, .begin .label { margin-bottom: var(--sp-lg); } .stages-line { display: grid; grid-template-columns: 1fr; margin-top: var(--sec-sm); border-top: 1px solid var(--line); } .stages-line__item a { display: grid; grid-template-columns: 3rem 1fr; gap: 0.25rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); transition: color var(--dur) var(--ease); } .stages-line__n { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--em); grid-row: span 2; } .stages-line__name { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; } .stages-line__t { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--muted); } .stages-line__item a:hover .stages-line__t { color: var(--em); } @media (min-width: 1024px) { .stages-line { grid-template-columns: repeat(5, 1fr); gap: var(--gutter); border-top: 0; } .stages-line__item a { grid-template-columns: 1fr; border-bottom: 0; border-top: 1px solid var(--line); padding-top: 1.25rem; } .stages-line__n { grid-row: auto; font-size: 2.75rem; margin-bottom: 1rem; } } /* Clients marquee + press */ .marquee { margin-top: var(--sec-sm); border-block: 1px solid var(--line); overflow: hidden; } .marquee__track { display: flex; width: max-content; will-change: transform; } .marquee__group { display: flex; flex-shrink: 0; } .marquee__item { padding: 1.75rem clamp(1.5rem, 3vw, 3.5rem); font-size: clamp(1.75rem, 3.6vw, 3.75rem); line-height: 1; white-space: nowrap; border-right: 1px solid var(--line); } .marquee__item:nth-child(even) { font-style: italic; color: var(--em); } .press { margin-top: var(--sec-sm); } .press__list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); } .press__list li { padding: 1.25rem 0; font-size: clamp(1.35rem, 2vw, 2rem); color: var(--em); border-bottom: 1px solid var(--line); text-align: center; } @media (min-width: 768px) { .press__list { grid-template-columns: repeat(3, 1fr); } .press__list li { border-left: 1px solid var(--line); } .press__list li:nth-child(3n+1) { border-left: 0; } } .press--tight { margin-top: var(--sec-sm); } /* Presence */ .presence__grid { align-items: start; } .presence__media { position: relative; padding-bottom: 20%; } .presence__small { position: absolute !important; width: 48%; right: -8%; bottom: 0; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); } .presence__text { display: grid; gap: var(--sp-lg); justify-items: start; } .presence__text .label { margin-bottom: 0; } .presence__list, .presence__cols { width: 100%; border-top: 1px solid var(--line); } .presence__list li, .presence__cols li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line); } .presence__country { font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1; } .presence__tags { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); text-align: right; } .presence__cols { margin-top: var(--sec-sm); } @media (min-width: 768px) { .presence__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); border-top: 0; } .presence__cols li { display: grid; gap: 0.75rem; border-bottom: 0; border-top: 1px solid var(--line); } .presence__cols .presence__tags { text-align: left; } } /* Footer */ .site-footer { padding-block: var(--sec) 1.25rem; } .site-footer__top { align-items: end; padding-bottom: var(--sec-sm); } .site-footer__cta { display: grid; gap: var(--sp-md); justify-items: start; } .site-footer__cta .btn-row { margin-top: 0; } /* Page hero (inner pages) */ .page-hero { padding-top: calc(var(--hud-h) + var(--sec-sm) + 2rem); } .page-hero__aside { display: flex; align-items: flex-end; } .index-list { margin-top: var(--sec-sm); border-top: 1px solid var(--line); } .index-list a { display: grid; grid-template-columns: 3rem 1fr auto; align-items: baseline; padding-block: 1rem; border-bottom: 1px solid var(--line); transition: color var(--dur) var(--ease), padding var(--dur-slow) var(--ease); } .index-list a:hover { color: var(--em); padding-left: 0.5rem; } .index-list__n { font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--em); } .index-list__t { font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.1; } .index-list__arrow { color: var(--muted); } /* Services */ .service__grid { align-items: center; } @media (min-width: 768px) { .service__text { grid-column: 7 / span 6; } .service__grid--flip .service__media { grid-column: 8 / span 5; grid-row: 1; } .service__grid--flip .service__text { grid-column: 1 / span 6; grid-row: 1; } } .service__text { display: grid; gap: var(--sp-lg); } .service__text .label, .service__text .title { margin-bottom: 0; } .two-col-list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); } .two-col-list li { padding-block: 0.7rem; border-bottom: 1px solid var(--line); font-size: 0.9375rem; } @media (min-width: 640px) { .two-col-list { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); } } .industries__grid { display: grid; grid-template-columns: 1fr; margin-top: var(--sec-sm); border-top: 1px solid var(--line); } .industries__grid li { display: flex; gap: 1rem; align-items: baseline; padding-block: 1.1rem; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 2rem); } .industries__grid li span { font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--em); } @media (min-width: 768px) { .industries__grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); } } /* Approach */ .role__partner { display: grid; align-content: end; gap: 1rem; } .rule-list { border-top: 1px solid var(--line); } .rule-list li { padding-block: 0.6rem; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.5rem; font-style: italic; } .rule-list--big li { font-size: clamp(1.5rem, 3vw, 2.5rem); font-style: normal; } .role__steps { display: grid; gap: var(--gutter); margin-top: var(--sec-sm); position: relative; } .role__steps li { display: grid; gap: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--accent); } .role__step { font-size: clamp(1.75rem, 3vw, 3rem); line-height: 1.05; } .role__step em { display: block; } @media (min-width: 768px) { .role__steps { grid-template-columns: repeat(3, 1fr); } } .stage-progress { position: fixed; left: var(--margin); top: 50%; z-index: 40; display: grid; gap: 0.35rem; transform: translateY(-50%); font-size: 0.625rem; letter-spacing: var(--track-caps); opacity: 0; transition: opacity var(--dur-slow) var(--ease); } .stage-progress.is-visible { opacity: 1; } .stage-progress span { display: flex; align-items: center; gap: 0.5rem; color: var(--faint); transition: color var(--dur) var(--ease); } .stage-progress span::before { content: ""; width: 1rem; height: 1px; background: currentColor; transition: width var(--dur-slow) var(--ease); } .stage-progress span.is-active { color: var(--accent); } .stage-progress span.is-active::before { width: 2rem; } @media (max-width: 1279px) { .stage-progress { display: none; } } .stage__grid { align-items: center; } .stage__text { display: grid; gap: var(--sp-lg); } .stage__text .label, .stage__text .title { margin-bottom: 0; } .stage__n { font-family: var(--font-display); font-size: clamp(5rem, 11vw, 11rem); line-height: 0.8; color: var(--em); font-style: italic; } .stage__have { margin-top: var(--sp-md); } .have { display: grid; border-top: 1px solid var(--line); } .have li { display: grid; grid-template-columns: 2.5rem 1fr; padding-block: 0.8rem; border-bottom: 1px solid var(--line); font-size: 0.9375rem; } .have li span { font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--em); padding-top: 0.2em; } .begin__text { display: grid; gap: var(--sp-lg); align-content: end; justify-items: start; } /* About */ .about-intro { margin-top: var(--sec-sm); } .why__cols { display: grid; gap: var(--gutter); margin-top: var(--sec-sm); } .why__cols li { display: grid; gap: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .why__t { font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1; } @media (min-width: 768px) { .why__cols { grid-template-columns: repeat(3, 1fr); } } .gap__lead { margin-top: var(--sp-lg); } .gap__list { display: grid; margin-top: var(--sec-sm); border-top: 1px solid var(--line); } .gap__list li { display: grid; grid-template-columns: 3rem 1fr; padding-block: 1.1rem; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 2rem); } .gap__list li span { font-family: var(--font-sans); font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--em); padding-top: 0.5em; } @media (min-width: 768px) { .gap__list { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); } } .founder__grid { align-items: center; } .founder__text { display: grid; gap: var(--sp-md); } .quote { font-size: clamp(1.75rem, 3vw, 3rem); line-height: 1.15; font-style: italic; } .founder__name { font-family: var(--font-display); font-size: 1.75rem; margin-top: var(--sp-md); } .founder__bio { margin-top: var(--sp-md); } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); margin-top: var(--sec-sm); } .stat { display: grid; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .stat__n { font-size: clamp(3.5rem, 7vw, 7rem); line-height: 0.9; color: var(--em); font-variant-numeric: tabular-nums; } .stat__l { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); } @media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } } /* Work page */ .chapters__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); } .chapters__btn { display: grid; gap: 0.6rem; width: 100%; text-align: left; } .chapters__btn .photo { transition: outline-color var(--dur) var(--ease); outline: 1px solid transparent; outline-offset: 4px; } .chapters__btn.is-active .photo, .chapters__btn:hover .photo { outline-color: var(--accent); } .chapters__n { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); } .chapters__name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; font-style: italic; } @media (min-width: 768px) { .chapters__grid { grid-template-columns: repeat(5, 1fr); } } .filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--sp-xl); } .filter { padding: 0.55rem 0.8rem 0.5rem; border: 1px solid var(--line); border-radius: 2px; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .filter sup { color: var(--accent); margin-left: 0.2em; } .filter:hover { border-color: var(--accent); } .filter.is-active { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); } .work-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-xl) var(--gutter); } .work-card { display: block; } .work-card a { display: grid; gap: 0.9rem; } .work-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .work-card__title { font-size: var(--fs-h3); line-height: 1; transition: color var(--dur) var(--ease); } .work-card__n { font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--muted); } .work-card a:hover .work-card__title { color: var(--accent); } .work-card a:hover .photo img { transform: scale(1.03); } .work-card.is-hidden { display: none; } @media (min-width: 768px) { .work-grid { grid-template-columns: repeat(2, 1fr); } .work-card--wide { grid-column: 1 / -1; } } /* Single case */ .case-hero { padding-top: calc(var(--hud-h) + var(--sec-sm) + 2rem); padding-bottom: var(--sec-sm); } .back { display: inline-flex; gap: 0.35em; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; } .back .label__br { color: var(--accent); } .case-hero__foot { align-items: end; } .case-facts { display: grid; border-top: 1px solid var(--line); } .case-facts > div { display: grid; grid-template-columns: 7rem 1fr; padding-block: 0.7rem; border-bottom: 1px solid var(--line); } .case-facts dt { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); padding-top: 0.2em; } .case-facts dd { font-size: 0.9375rem; } .prose { font-size: var(--fs-lead); line-height: 1.65; } .prose > * + * { margin-top: 1.25em; } .prose h2, .prose h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; margin-top: 2em; } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; } .prose img { width: 100%; } .prose p:first-child { font-family: var(--font-display); font-size: var(--fs-statement); line-height: 1.15; } .gallery { display: grid; grid-template-columns: 1fr; gap: var(--gutter); } @media (min-width: 768px) { .gallery { grid-template-columns: repeat(2, 1fr); } .gallery__item--0 { grid-column: 1 / -1; } .gallery__item--2 { margin-top: 20%; } } .next-case__link { display: grid; gap: var(--sp-lg); } .mega--next { text-transform: none; font-size: clamp(3rem, 10vw, 11rem); letter-spacing: -0.03em; transition: color var(--dur-slow) var(--ease); } .next-case__link:hover .mega--next { color: var(--accent); } /* Contact */ .contact__grid { margin-top: var(--sec-sm); align-items: start; } .contact__aside { display: grid; gap: var(--sp-xl); } .contact-card { display: grid; border-top: 1px solid var(--line); } .contact-card > div { display: grid; grid-template-columns: 6rem 1fr; padding-block: 0.8rem; border-bottom: 1px solid var(--line); } .contact-card dt { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); padding-top: 0.25em; } .contact-card a:hover { color: var(--accent); } .contact__close { margin-top: var(--sec); font-family: var(--font-display); font-size: var(--fs-statement); line-height: 1.12; max-width: 22ch; } /* 404 */ .error-404 { min-height: calc(var(--vh) * 100); overflow: hidden; } .error-404 .container { position: relative; z-index: 1; display: grid; gap: var(--sp-lg); justify-items: start; } /* ========================================================================== Brief form + panel ========================================================================== */ .form { display: grid; gap: var(--sp-lg); } .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form__progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; } .form__progress span { height: 2px; background: var(--line); transition: background-color var(--dur) var(--ease); } .form__progress span.is-done { background: var(--accent); } .form__step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; } .form__step.is-active { display: grid; gap: 1.25rem; animation: co-fade 0.64s var(--ease) both; } .form__q { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; padding: 0; margin-bottom: 0.5rem; } .form__q em { display: block; } .form__note { color: var(--muted); max-width: 28rem; margin-top: 1rem; } .form__error { color: #b0503f; font-size: var(--fs-small); } .form__nav { display: flex; gap: 0.5rem; } .form__nav [hidden] { display: none; } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip span { display: inline-block; padding: 0.7rem 1rem 0.65rem; border: 1px solid var(--line); border-radius: 2px; font-size: 0.8125rem; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .chip span:hover { border-color: var(--accent); } .chip input:checked + span { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); } .chip input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 2px; } .field { display: grid; gap: 0.4rem; } .field-row { display: grid; gap: 1.25rem; } @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } } .field label { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); } .field label small { font-size: inherit; text-transform: none; letter-spacing: 0.02em; font-weight: 400; } .field input, .field textarea { width: 100%; padding: 0.7rem 0; font: inherit; font-size: 1.125rem; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; transition: border-color var(--dur) var(--ease); resize: vertical; } .field input:focus, .field textarea:focus { outline: 0; border-color: var(--accent); } .field .is-invalid { border-color: #b0503f; } .contact__form .form { padding: var(--sp-lg); background: var(--bg-2); border: 1px solid var(--line); } /* ========================================================================== Motion helpers ========================================================================== */ html.js [data-component="text-reveal"], html.js [data-component="fade"] { visibility: hidden; } html.js .is-ready[data-component="text-reveal"], html.js .is-ready[data-component="fade"] { visibility: visible; } .line-mask { overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; } @keyframes co-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html.js [data-component="text-reveal"], html.js [data-component="fade"] { visibility: visible; } } /* WordPress admin bar */ body.admin-bar .hud { top: 32px; } @media (max-width: 782px) { body.admin-bar .hud { top: 46px; } } /* Block editor alignment inside prose */ .prose .alignwide, .prose .alignfull { width: 100%; } .prose .wp-block-gallery { gap: var(--gutter); } .prose figcaption { font-size: var(--fs-small); color: var(--muted); margin-top: 0.5rem; } /* HUD cards invert on cream sections so they never disappear */ body[data-theme="light"] .hud-card--cta { background: var(--co-espresso-950); color: var(--co-cream-100); } body[data-theme="light"] .hud-card--cta:hover { background: var(--co-bronze-700); } body[data-theme="light"] .hud-card__thumb { background: var(--co-bronze-700); } .hud-card--cta, .hud-card__thumb { transition: background-color var(--dur-theme) var(--ease), color var(--dur-theme) var(--ease); } @media (max-width: 639px) { .loader__meta { justify-content: center; } .loader__name { display: none; } } /* ========================================================================== v2 — pixel stage, header panel, case accordion, stacking cards, gallery, video modal, theme dissolve ========================================================================== */ /* Canvases: theme dissolve and pixel stage sit behind the page content */ .theme-canvas, .pixel-stage { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; } #swup { position: relative; z-index: 1; } html.has-pixel-stage .photo.has-media, html.has-pixel-stage .photo.has-media .pixel { background: transparent; } .pixel.is-gl img, .pixel.is-gl video { opacity: 0; } .pixel video { width: 100%; height: 100%; object-fit: cover; } .hero__backdrop--media .pixel, .create__backdrop--media .pixel { position: absolute; inset: 0; } .hero__backdrop--media .pixel img, .create__backdrop--media .pixel img, .hero__backdrop--media .pixel video, .create__backdrop--media .pixel video { width: 100%; height: 100%; object-fit: cover; } /* ---------- Buttons: press + icon swap ---------- */ .btn { transform-origin: center; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 0.45s var(--ease); } .btn:active { transform: scale(0.98); transition-duration: 0.25s; } .btn__icon { position: relative; overflow: hidden; } .btn__icon > span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 0.45s var(--ease); } .btn__icon svg { width: 100%; height: 100%; } .btn__icon-b { transform: translate(-120%, 120%); } .btn:hover .btn__icon { transform: none; } .btn:hover .btn__icon-a { transform: translate(120%, -120%); } .btn:hover .btn__icon-b { transform: none; } .btn--light { background: var(--co-cream-100); color: var(--co-espresso-950); } .btn--light:hover { background: var(--co-bronze-300); color: var(--co-espresso-950); } .btn--block { width: 100%; justify-content: center; } /* ---------- HUD: centre bar + dropdown panel ---------- */ .hud__center { position: relative; justify-self: center; width: min(34rem, 44vw); } .hud__bar { position: relative; width: 100%; } .hud__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--co-bronze-400); transform: scaleX(0); transform-origin: 0 50%; } .hud__panel { --bg: var(--co-espresso-950); --bg-2: #211b16; --bg-3: #2b231d; --fg: var(--co-cream-100); --muted: rgba(250, 246, 240, 0.58); --faint: rgba(250, 246, 240, 0.32); --line: rgba(250, 246, 240, 0.12); --em: var(--co-bronze-400); --accent: var(--co-bronze-400); --btn-bg: var(--co-cream-100); --btn-fg: var(--co-espresso-950); position: absolute; top: 100%; left: 0; right: 0; overflow: hidden; background: var(--bg); color: var(--fg); border: 1px solid rgba(250, 246, 240, 0.08); border-top: 0; border-radius: 0 0 2px 2px; max-height: calc(100vh - var(--hud-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; } .hud__view { padding: 0.25rem 0.75rem 0.75rem; } .hud__view[hidden] { display: none; } .hud__panel:not([style*="height"]) { height: 0; } .panel-nav__item { --line: 0; position: relative; overflow: hidden; } .panel-nav__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-color, rgba(250, 246, 240, 0.12)); transform: scaleX(var(--line)); transform-origin: 0 50%; } .panel-nav__link { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0.25rem; font-size: 1.0625rem; transition: color var(--dur) var(--ease); } .panel-nav__text { display: inline-flex; gap: 0.9rem; align-items: baseline; } .panel-nav__n { font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--co-bronze-400); } .panel-nav__arrow { color: var(--muted); transform: translateX(-6px); opacity: 0; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .panel-nav__link:hover { color: var(--co-bronze-300); } .panel-nav__link:hover .panel-nav__arrow { transform: none; opacity: 1; } .panel-actions { display: grid; gap: 0.4rem; margin-top: 0.75rem; } .panel-actions__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; } .hud__view--form .form { padding-top: 0.75rem; } .hud__view--form .form__q { font-size: 1.75rem; } .hud__view--form .chip span { padding: 0.55rem 0.8rem 0.5rem; } .page-dim { position: fixed; inset: 0; z-index: 65; background: rgba(23, 19, 15, 0.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity 0.55s var(--ease), visibility 0s linear 0.55s; } body.panel-open .page-dim { opacity: 1; visibility: visible; transition: opacity 0.55s var(--ease); } @media (max-width: 1023px) { .hud__center { justify-self: end; width: auto; position: static; } .hud__panel { position: fixed; top: calc(1rem + var(--hud-h)); left: var(--margin); right: var(--margin); } body.admin-bar .hud__panel { top: calc(1rem + var(--hud-h) + 46px); } } /* Side cards: drawers + showreel preview */ .hud-card__body { height: 0; overflow: hidden; } .hud-card__body ol a { display: flex; gap: 0.75rem; padding: 0.55rem 0.75rem; border-top: 1px solid rgba(250, 246, 240, 0.08); text-transform: none; letter-spacing: 0.02em; font-weight: 400; font-size: 0.8125rem; transition: color var(--dur) var(--ease); } .hud-card__body ol a:hover { color: var(--co-bronze-300); } .hud-card__body ol a span { color: var(--co-bronze-400); font-size: var(--fs-label); letter-spacing: var(--track-caps); padding-top: 0.15em; } .reel-preview { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .reel-preview video { width: 100%; height: 100%; object-fit: cover; } .reel-preview__label { position: absolute; left: 0.6rem; bottom: 0.5rem; font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--co-cream-100); } /* ---------- Video modal ---------- */ .video-modal { position: fixed; inset: 0; z-index: 105; display: none; grid-template-rows: 1fr auto; background: var(--co-espresso-950); color: var(--co-cream-100); } .video-modal.is-open { display: grid; } .video-modal__stage { display: grid; place-items: center; overflow: hidden; padding: 4rem var(--margin) 0; } .video-modal__video { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; cursor: pointer; } .video-modal__controls { display: grid; grid-template-columns: auto auto 1fr auto auto auto; align-items: center; gap: 1rem; padding: 1rem var(--margin) 1.25rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; transition: opacity 0.5s var(--ease); } .video-modal.is-idle .video-modal__controls { opacity: 0; } .video-modal.is-idle { cursor: none; } .vm-btn { padding: 0.5rem 0.25rem; font-size: inherit; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; min-width: 4.5rem; text-align: left; } .vm-btn:hover { color: var(--co-bronze-300); } .vm-time { font-variant-numeric: tabular-nums; white-space: nowrap; } .vm-time .label__br { color: var(--co-bronze-400); } .vm-progress { position: relative; height: 1.5rem; } .vm-progress::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(250, 246, 240, 0.2); } .vm-progress__fill { position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; background: var(--co-bronze-400); transform: scaleX(0); transform-origin: 0 50%; } @media (max-width: 639px) { .video-modal__controls { grid-template-columns: auto 1fr auto auto; } .vm-time { display: none; } } /* ---------- Case rows (accordion) ---------- */ .case-row { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; transition: border-color var(--dur-theme) var(--ease); } .case-row__head { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 1rem; align-items: start; padding: 1.25rem var(--margin) 0.75rem; cursor: pointer; outline-offset: -3px; } .case-row__title { font-size: var(--fs-h3); line-height: 1; transition: color var(--dur) var(--ease), transform var(--dur-slow) var(--ease); } .case-row .tags { grid-column: 1; } .pm { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--muted); } .pm__gap { display: inline-block; width: 0; } .pm i { font-style: normal; color: var(--accent); margin-inline: 0.4em; } .pm__minus, .case-row.is-open .pm__plus { display: none; } .case-row.is-open .pm__minus { display: inline; } .case-row__view { grid-column: 2; font-size: var(--fs-label); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity var(--dur) var(--ease); justify-self: end; } .case-row__view.is-visible { opacity: 1; } .case-row__head:hover .case-row__title { color: var(--accent); transform: translateX(0.4rem); } .case-row__body { display: none; padding: 0 var(--margin) 1rem; } .case-row.is-open .case-row__body { display: grid; gap: 1.25rem; align-content: start; } .case-row__excerpt { font-size: 0.9375rem; color: var(--muted); max-width: 30rem; } .case-row__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .case-row__media { overflow: hidden; padding: 0 0 1.25rem; } .case-row__track { display: flex; gap: 0.5rem; width: max-content; padding-inline: var(--margin); will-change: transform; } .case-row__item { display: block; flex: 0 0 auto; height: 7.5rem; } .case-row__item .photo { height: 100%; width: auto; aspect-ratio: var(--ratio); } .case-row.is-open .case-row__item { height: 28.5rem; } .case-row.is-open .case-row__media { cursor: grab; user-select: none; } .case-row.is-dragging .case-row__media { cursor: grabbing; } .case-row.is-dragging .case-row__item { pointer-events: none; } .case-row__item img, .case-row__item video { -webkit-user-drag: none; user-select: none; } /* Mobile: always open, native swipe */ .case-row.is-static .case-row__head { cursor: default; } .case-row.is-static .case-row__media { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .case-row.is-static .case-row__media::-webkit-scrollbar { display: none; } .case-row.is-static .case-row__item { height: min(22rem, 62vh); scroll-snap-align: start; } .case-row.is-static .pm { display: none; } @media (min-width: 1000px) { .case-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); padding-inline: var(--margin); } .case-row__head { grid-column: 1; grid-row: 1; padding: 1.5rem 0 0; grid-template-columns: minmax(0, 1fr) auto auto; align-content: start; } .case-row .tags { grid-column: 2; grid-row: 1; } .pm { grid-column: 3; } .case-row__view { grid-column: 3; grid-row: 2; } .case-row__body { grid-column: 1; grid-row: 2; padding: 1.5rem 0 1.5rem; } .case-row__media { grid-column: 2; grid-row: 1 / span 2; padding: 1.25rem 0; margin-right: calc(var(--margin) * -1); } .case-row__track { padding-inline: 0 var(--margin); } } /* Floating "See all work" */ .sticky-cta { position: fixed; left: 50%; bottom: 1.25rem; z-index: 50; transform: translateX(-50%); visibility: hidden; } .sticky-cta .btn { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } /* ---------- Stacking cards ---------- */ .stack { margin-top: var(--sec-sm); } .stack__container { position: sticky; top: 6rem; } .stack__card { position: relative; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); padding: 1.25rem; margin-bottom: 0.75rem; transition: background-color var(--dur-theme) var(--ease), border-color var(--dur-theme) var(--ease); } .stack__progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; } .stack__head { display: flex; align-items: baseline; gap: 1rem; min-height: 2.5rem; } .stack__n { font-family: var(--font-display); font-style: italic; font-size: 2.25rem; line-height: 1; color: var(--em); } .stack__grid { display: grid; gap: var(--gutter); margin-top: 1rem; } .stack__text { display: grid; gap: 1.25rem; align-content: start; } .stack__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 3.5rem); line-height: 1; } .stack__title em { display: block; color: var(--em); } @media (min-width: 768px) { .stack__card { padding: 1.5rem; height: min(34rem, calc(100vh - 10rem)); margin-bottom: 0; } .stack__grid { grid-template-columns: 7fr 5fr; height: calc(100% - 3.5rem); } .stack__media .photo { height: 100%; aspect-ratio: auto; } } /* ---------- Pinned horizontal gallery ---------- */ .hgallery { position: relative; } .hgallery__pin { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding-block: calc(var(--hud-h) + 3rem) 2rem; overflow: hidden; } .hgallery__head { display: flex; justify-content: space-between; align-items: center; } .hgallery__count { font-size: var(--fs-label); letter-spacing: var(--track-caps); font-variant-numeric: tabular-nums; color: var(--muted); } .hgallery__track { display: flex; align-items: center; gap: var(--gutter); width: max-content; padding-inline: var(--margin); will-change: transform; } .hgallery__intro { width: min(36rem, 80vw); flex: 0 0 auto; padding-right: 4vw; } .hgallery__item { flex: 0 0 auto; } .hgallery__item .photo { height: min(60vh, 34rem); width: auto; aspect-ratio: var(--ratio); } .hgallery__item--0 { align-self: flex-end; } .hgallery__item--2 { align-self: flex-start; } .hgallery__line { height: 1px; background: var(--line); margin-top: 1.5rem; } .hgallery__line span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; } @media (max-width: 767px) { .hgallery__pin { min-height: 0; padding-block: var(--sec-sm); } .hgallery__track { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; margin-top: 1.5rem; } .hgallery__item { scroll-snap-align: start; } .hgallery__item .photo { height: 55vh; } .hgallery__intro { width: 80vw; } } /* ---------- Marquee drag ---------- */ .marquee { cursor: grab; touch-action: pan-y; user-select: none; } .marquee.is-dragging { cursor: grabbing; } /* ---------- 404 puzzle ---------- */ .error-404__puzzle { position: absolute; inset: 0; z-index: 0; cursor: grab; } .error-404__puzzle canvas { width: 100%; height: 100%; } .error-404 .container { pointer-events: none; } .error-404 .container a, .error-404 .container button { pointer-events: auto; } .puzzle-bar { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; width: min(28rem, 100%); } .puzzle-bar__line { height: 1px; background: var(--line); } .puzzle-bar__line span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; } /* ---------- Case hero ---------- */ .case-hero__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .hero__reel { margin-left: auto; } .case-row:not(.is-open) .frame__slot, .case-row:not(.is-open) .frame__corner { display: none; } .case-row:not(.is-open) .frame__mark { width: 1.25rem; } .pixel--plain img, .pixel--plain video { width: 100%; height: 100%; object-fit: cover; } html.has-pixel-stage .photo.has-media:has(.pixel--plain) { background: var(--frame-bg); } /* ---------- HUD glass (as the reference: 60% panel + backdrop blur) ---------- Every header element sits on its own translucent espresso panel so content scrolling underneath never competes with the logo, bar or cards. */ :root { --hud-glass: rgba(23, 19, 15, 0.84); --hud-glass-line: rgba(250, 246, 240, 0.08); } .hud__logo, .hud__bar, .hud-card--drawer { background: var(--hud-glass); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border: 1px solid var(--hud-glass-line); border-radius: 2px; } .hud__logo { display: flex; align-items: center; height: var(--hud-h); margin-top: 0; padding-inline: 0.9rem; transition: background-color var(--dur) var(--ease); } .hud__logo:hover { background: rgba(23, 19, 15, 0.8); } .hud__logo-img { width: auto; height: 1.35rem; } /* The logo always sits on espresso glass, so it is always the light lockup. */ .hud__logo-img--light, body[data-theme="light"] .hud__logo-img--light { display: block; } .hud__logo-img--dark, body[data-theme="light"] .hud__logo-img--dark { display: none; } .hud-card--cta { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } @media (max-width: 1023px) { .hud__logo { padding-inline: 0.7rem; } .hud__logo-img { height: 1.15rem; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hud__logo, .hud__bar, .hud-card--drawer { background: rgba(23, 19, 15, 0.94); } } body.panel-open .hud__bar { background: var(--co-espresso-950); } body[data-theme="light"] { --hud-glass: rgba(23, 19, 15, 0.86); } body[data-theme="bronze"] { --hud-glass: rgba(23, 19, 15, 0.78); } /* Hero scrim over real footage (brand kit .hero-scrim) */ .hero__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(23, 19, 15, 0.78) 0%, rgba(23, 19, 15, 0.25) 45%, rgba(23, 19, 15, 0.35) 100%), linear-gradient(to right, rgba(23, 19, 15, 0.55) 0%, rgba(23, 19, 15, 0) 60%); } /* ---------- Case rows v3 — reference layout ---------- Collapsed: title · tags · ( + ) with thumbnails on the right. Open: description top-right, View Case under the title, and the media becomes a full-width slider below. */ @media (min-width: 1000px) { .case-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--margin); } .case-row__head { grid-column: 1 / span 7; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 2.3fr) auto; align-items: start; gap: 0 1rem; padding: 1.6rem 0 0; } .case-row .tags { grid-column: 2; grid-row: 1; } .pm { grid-column: 3; grid-row: 1; } .case-row__view { display: none; } /* collapsed media: right-hand strip, bleeding off the right edge */ .case-row__media { grid-column: 8 / -1; grid-row: 1; padding: 1.25rem 0; margin-right: calc(var(--margin) * -1); } .case-row__track { padding-inline: 0 var(--margin); margin-left: auto; } .case-row__item { height: 8.5rem; } /* open */ .case-row__body { display: contents; } .case-row__excerpt { display: none; } .case-row__actions { display: none; } .case-row.is-open .case-row__excerpt { display: block; grid-column: 9 / -1; grid-row: 1; padding-top: 1.6rem; max-width: none; font-size: var(--fs-lead); line-height: 1.45; color: var(--fg); } .case-row.is-open .case-row__actions { display: flex; grid-column: 1 / span 5; grid-row: 2; padding-top: 1.75rem; } .case-row.is-open .case-row__media { grid-column: 1 / -1; grid-row: 3; padding: 2.5rem 0 2rem; } .case-row.is-open .case-row__track { margin-left: 0; } .case-row.is-open .case-row__item { height: min(30rem, 62vh); } } .pm__view { display: inline-block; overflow: hidden; max-width: 0; white-space: nowrap; vertical-align: bottom; color: var(--fg); letter-spacing: var(--track-caps); text-transform: uppercase; transition: max-width 0.45s var(--ease); } .case-row.is-hover:not(.is-open) .pm__view { max-width: 4em; margin-left: 0.4em; } .case-row.is-open .pm__view { display: none; } @media (min-width: 1000px) { .case-row .case-row__body, .case-row.is-open .case-row__body { display: contents; padding: 0; } } /* Hero top row: label · kicker on one centred line; showreel button clear of the HUD cards */ .hero__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem 1.25rem; } .hero__top .label, .hero__kicker { line-height: 1; margin: 0; } .hero__kicker { display: inline-flex; align-items: center; gap: 1.25rem; } .hero__kicker::before { content: ""; width: 2rem; height: 1px; background: var(--line); } .hero__reel { margin-left: auto; } @media (min-width: 1024px) { .hero__top { padding-right: calc(13.5rem + 1rem); } } @media (max-width: 767px) { .hero__kicker::before { display: none; } .hero__reel { margin-left: 0; } } /* Contact: portrait left, conversation right */ .contact__grid { align-items: start; row-gap: var(--sp-xl); } .contact__media { display: grid; gap: 0.9rem; } .contact__caption { color: var(--muted); } .contact__main { display: grid; gap: var(--sp-xl); align-content: start; } .contact__main .contact__form .form { padding: var(--sp-lg); background: var(--bg-2); border: 1px solid var(--line); } @media (min-width: 768px) { .contact__media { position: sticky; top: calc(var(--hud-h) + 2.5rem); } } /* ========================================================================== v1.2 — Page heroes, widgets, service pages, pitch deck ========================================================================== */ /* ---------- Full-screen page hero (reference hero_extended) ---------- */ .phero { min-height: calc(var(--vh) * 100); display: flex; padding-block: calc(var(--hud-h) + 4.5rem) 1.25rem; overflow: hidden; color: var(--co-cream-100); } .phero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; min-height: calc(var(--vh) * 100 - var(--hud-h) - 5.75rem); } .phero__center { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: var(--sp-md); padding-block: var(--sp-xl); } .phero__tag { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; } .phero__tag .label__br { color: var(--co-bronze-400); } .display--phero { font-size: clamp(2.75rem, 7.4vw, 8.75rem); line-height: 0.95; letter-spacing: -0.01em; max-width: 14ch; text-wrap: balance; } .phero--case .display--phero { font-size: clamp(3rem, 11vw, 13rem); max-width: none; } .phero__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1.5rem; } .phero__lead { max-width: 26rem; color: rgba(250, 246, 240, 0.82); } .phero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; grid-column: 2; } .phero__foot .phero__lead { grid-column: 1; grid-row: 1; } .phero__scroll { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 0.75rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: rgba(250, 246, 240, 0.7); } .phero__scroll i { position: relative; width: 1px; height: 2.5rem; background: rgba(250, 246, 240, 0.2); overflow: hidden; } .phero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--co-bronze-400); animation: phero-scroll 2.2s var(--ease-io) infinite; } @keyframes phero-scroll { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } } .phero__scrim { background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(23, 19, 15, 0.5) 0%, rgba(23, 19, 15, 0) 100%), linear-gradient(to top, rgba(23, 19, 15, 0.8) 0%, rgba(23, 19, 15, 0.15) 40%, rgba(23, 19, 15, 0.45) 100%); } .phero .hero__kicker { color: rgba(250, 246, 240, 0.7); } .phero .hero__kicker::before { background: rgba(250, 246, 240, 0.25); } @media (max-width: 767px) { .phero__foot { grid-template-columns: 1fr; justify-items: start; } .phero__foot .phero__lead, .phero__actions, .phero__scroll { grid-column: 1; grid-row: auto; justify-self: start; justify-content: flex-start; } .phero__scroll { display: none; } } /* Sections with a footage backdrop (spotlight reveal) */ .section--backdrop { overflow: hidden; } .section--backdrop > .container { position: relative; z-index: 1; } .section--backdrop .create__backdrop--media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(23, 19, 15, 0.7), rgba(23, 19, 15, 0.2)); pointer-events: none; } /* About intro */ .about-intro-sec .label { margin-bottom: var(--sp-lg); } .about-intro__aside { display: flex; align-items: flex-end; } .about-intro__media { margin-top: var(--sp-xl); } /* ---------- Side widgets ---------- */ .hud__side { align-content: start; } .hud__side > * { will-change: transform; } .hud-card--drawer.is-open { border-color: rgba(194, 154, 108, 0.35); } .reel-preview--v { aspect-ratio: 4 / 5; } .reel-preview video { transform-origin: 50% 50%; } .reel-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23, 19, 15, 0.75), rgba(23, 19, 15, 0) 55%); pointer-events: none; } .reel-preview__title { position: absolute; z-index: 1; left: 0.6rem; right: 0.6rem; bottom: 1.8rem; text-align: left; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; text-transform: none; letter-spacing: 0; color: var(--co-cream-100); } .reel-preview__label { z-index: 1; } .deck-thumb { display: block; width: 100%; padding: 0 0.6rem 0.6rem; text-align: left; } .deck-thumb__slide { position: relative; display: grid; align-content: center; aspect-ratio: 16 / 9; padding: 0.7rem; overflow: hidden; background: #f3ece1; } .deck-thumb__slide img { position: relative; z-index: 1; width: 62%; height: auto; } .deck-thumb__arc { position: absolute; right: -18%; top: -10%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, #c9a57e, #8a6443); opacity: 0.9; } .deck-thumb__meta { display: flex; justify-content: space-between; padding-top: 0.55rem; font-size: var(--fs-label); letter-spacing: var(--track-caps); color: rgba(250, 246, 240, 0.7); } .deck-thumb__meta span:last-child { color: var(--co-bronze-300); } .hud-card--next { display: grid; grid-template-columns: 3.25rem 1fr auto; align-items: center; gap: 0.7rem; padding: 0.4rem 0.75rem 0.4rem 0.4rem; background: var(--hud-glass); color: var(--co-cream-100); border: 1px solid var(--hud-glass-line); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); } .hud-card__media { display: block; width: 3.25rem; overflow: hidden; } .hud-card__media .photo { margin: 0; } .hud-card__next-text { display: grid; gap: 0.2rem; min-width: 0; } .hud-card__eyebrow { color: var(--co-bronze-400); } .hud-card__title { font-family: var(--font-display); font-size: 1rem; line-height: 1.1; text-transform: none; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hud-card__arrow { color: var(--co-bronze-400); transition: transform var(--dur) var(--ease); } .hud-card--next:hover .hud-card__arrow { transform: translateX(3px); } button.hud-card { width: 100%; text-align: left; font: inherit; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; } .hud-card__thumb svg { color: var(--co-cream-100); } /* ---------- Work: sticky bottom filter bar ---------- */ .filters--sticky { position: sticky; bottom: 1.25rem; z-index: 5; width: max-content; max-width: 100%; margin: var(--sp-xl) auto 0; padding: 0.35rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: var(--hud-glass); border: 1px solid var(--hud-glass-line); border-radius: 2px; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); } .filters--sticky::-webkit-scrollbar { display: none; } .filters--sticky .filter { color: var(--co-cream-100); border-color: transparent; white-space: nowrap; } .filters--sticky .filter:hover { border-color: rgba(194, 154, 108, 0.5); } .filters--sticky .filter.is-active { background: var(--co-cream-100); color: var(--co-espresso-950); border-color: var(--co-cream-100); } .work .work-grid { margin-top: 0; } /* ---------- Service pages ---------- */ .svc-intro .label { margin-bottom: var(--sp-lg); } .usps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--gutter); margin-top: var(--sp-xl); } .usps__item { display: grid; gap: 0.6rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--line); } .usps__n { font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--accent); } .usps__t { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.05; } .usps__d { color: var(--muted); max-width: 22rem; } .svc-split__grid { align-items: center; row-gap: var(--sp-xl); } .svc-split__text { display: grid; gap: var(--sp-lg); align-content: start; } .svc-split__eyebrow { color: var(--accent); } .svc-list { display: grid; } .svc-list li { display: grid; grid-template-columns: 2.5rem 1fr; padding-block: 0.8rem; border-top: 1px solid var(--line); font-size: var(--fs-lead); } .svc-list li:last-child { border-bottom: 1px solid var(--line); } .svc-list span { font-size: var(--fs-label); letter-spacing: var(--track-caps); color: var(--accent); padding-top: 0.45em; } .svc-reel { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #000; text-align: left; } .svc-reel video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .svc-reel:hover video { transform: scale(1.015); } .svc-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23, 19, 15, 0.8), rgba(23, 19, 15, 0) 50%); } .svc-reel__cap { position: absolute; z-index: 1; left: 1.1rem; bottom: 1.1rem; right: 1.1rem; display: grid; gap: 0.3rem; font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.05; color: var(--co-cream-100); } .svc-reel__cap .eyebrow { font-family: var(--font-sans); color: var(--co-bronze-300); } .svc-reel__play { position: absolute; z-index: 1; top: 1rem; right: 1rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); color: var(--co-cream-100); } .svc-method .label { margin-bottom: var(--sp-lg); } .svc-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--gutter); margin-top: var(--sp-xl); } .svc-stages a { display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line); transition: border-color var(--dur) var(--ease); } .svc-stages a:hover { border-color: var(--fg); } .svc-stages__n { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1; } .svc-stages__t { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; } .svc-stages__d { color: var(--muted); font-size: var(--fs-small); } .service__media > a { display: block; } /* ---------- Pitch deck viewer ---------- */ .deck { position: fixed; inset: 0; z-index: 106; display: none; grid-template-rows: auto 1fr auto; background: #120f0c; color: var(--co-cream-100); } .deck.is-open { display: grid; } .deck__bar, .deck__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--margin); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; } .deck__bar .label { margin: 0; } .deck__count { font-variant-numeric: tabular-nums; } .deck__close { text-align: right; } .deck__stage { position: relative; overflow: hidden; min-height: 0; } .deck__frame { --dk-scale: 0.5; position: absolute; left: 50%; top: 50%; width: 1440px; height: 810px; transform: translate(-50%, -50%) scale(var(--dk-scale)); transform-origin: 50% 50%; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45); } .deck__nav .vm-btn:last-child { text-align: right; } .deck__progress { flex: 1; display: flex; gap: 3px; max-width: 40rem; } .deck__progress i { flex: 1; height: 2px; background: rgba(250, 246, 240, 0.16); transition: background-color 0.4s var(--ease); } .deck__progress i.is-on { background: var(--co-bronze-400); } body.deck-open .hud { visibility: hidden; } /* Slides — authored in px on the deck's 1440×810 canvas */ .dk-s { position: absolute; inset: 0; visibility: hidden; overflow: hidden; padding: 68px 64px 64px; background: #f5eee4; color: #1d1712; font-family: var(--font-display); text-align: left; display: flex; flex-direction: column; } .dk-s.is-active { visibility: visible; } .dk-s--sand { background: #efe0cf; } .dk-s--glow { background: radial-gradient(ellipse at 70% 20%, #f7efe4 0%, #ecdcc6 70%); } .dk-s--bronze { background: radial-gradient(ellipse at 80% 10%, #9a6d45 0%, #6d4a2c 55%, #563820 100%); color: #f5eee4; } .dk-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #9a7b5c; margin: 0 0 22px; } .dk-eyebrow--ink { color: #1d1712; } .dk-s--bronze .dk-eyebrow { color: rgba(245, 238, 228, 0.7); } .dk-eyebrow--light { color: #f5eee4 !important; } .dk-h { font-family: var(--font-display); font-weight: 400; font-size: 58px; line-height: 1.06; letter-spacing: -0.005em; margin: 0; } .dk-h em { font-style: italic; color: #9a6a42; } .dk-s--bronze .dk-h em { color: #f5eee4; } .dk-h--xl { font-size: 72px; } .dk-h--center { text-align: center; font-size: 64px; } .dk-rule { display: block; width: 42px; height: 2px; margin: 22px 0 26px; background: #b88a5e; } .dk-rule--center { margin-inline: auto; } .dk-rule--light { background: #f5eee4; } .dk-p { font-family: var(--font-display); font-size: 19px; line-height: 1.4; color: #4a3f35; max-width: 560px; margin: 0; } .dk-p--l { font-size: 22px; } .dk-s--bronze .dk-p { color: rgba(245, 238, 228, 0.8); } .dk-w25 { max-width: 330px; } .dk-w50 { max-width: 620px; } .dk-w60 { max-width: 760px; } .dk-bottom { margin-top: auto; } .dk-t { display: block; font-size: 30px; line-height: 1.1; } .dk-t em { font-style: italic; color: #9a6a42; } .dk-t--caps { font-size: 34px; letter-spacing: 0.04em; } .dk-abs-tl, .dk-abs-tr, .dk-abs-bl { position: absolute; } .dk-abs-tl { top: 68px; left: 64px; } .dk-abs-tr { top: 68px; right: 64px; } .dk-abs-bl { bottom: 64px; left: 64px; max-width: 420px; font-size: 16px; } p.dk-abs-tr.dk-p { top: 150px; font-size: 16px; } /* split: text left, photo right */ .dk-s--split { flex-direction: row; padding: 0; } .dk-s--split .dk-col { flex: 1; display: flex; flex-direction: column; padding: 68px 64px 64px; min-width: 0; } .dk-media { position: relative; width: 38%; flex: none; overflow: hidden; background: #e6d7c3; } .dk-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .dk-photo--empty { background: #e6d7c3; } /* cover */ .dk-s--cover { justify-content: center; } .dk-cover__arc { position: absolute; right: -6%; top: 50%; width: 48%; aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%); background: linear-gradient(140deg, #d6b48d 0%, #a97e50 55%, #7a5735 100%); } .dk-cover__arc::after { content: ""; position: absolute; inset: 22% -30% 22% 38%; background: #f5eee4; clip-path: polygon(0 50%, 100% 0, 100% 100%); opacity: 0.95; } .dk-cover__shade { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%); pointer-events: none; } .dk-cover__text { position: relative; display: grid; gap: 26px; max-width: 620px; } .dk-cover__logo { width: 560px; height: auto; } .dk-cover__foot { position: absolute; left: 64px; bottom: 50px; margin: 0; } /* positioning audiences */ .dk-aud { margin: auto 0 0; display: grid; } .dk-aud div { display: grid; grid-template-columns: 170px 1fr; padding: 11px 0; border-top: 1px solid #e0d2bf; font-family: var(--font-sans); font-size: 12px; } .dk-aud div:last-child { border-bottom: 1px solid #e0d2bf; } .dk-aud dt { font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #a97e50; } .dk-aud dd { margin: 0; color: #4a3f35; } /* belief */ .dk-s--center { justify-content: center; align-items: center; text-align: center; } .dk-words { margin-top: 6px; letter-spacing: 0.35em; } .dk-corner { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(245, 238, 228, 0.6); } .dk-corner--tl { top: 28px; left: 28px; border-top-width: 1px; border-left-width: 1px; } .dk-corner--tr { top: 28px; right: 28px; border-top-width: 1px; border-right-width: 1px; } .dk-corner--bl { bottom: 28px; left: 28px; border-bottom-width: 1px; border-left-width: 1px; } .dk-corner--br { bottom: 28px; right: 28px; border-bottom-width: 1px; border-right-width: 1px; } /* columns */ .dk-cols { display: grid; gap: 40px; list-style: none; padding: 0; } .dk-cols--3 { grid-template-columns: repeat(3, 1fr); } .dk-cols--5 { grid-template-columns: repeat(5, 1fr); } .dk-cols li { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid #cdb89e; } .dk-cols .dk-eyebrow { margin: 0; } .dk-num { font-size: 44px; line-height: 1; color: #a97e50; } .dk-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 60px; list-style: none; padding: 0; } .dk-grid2 li { display: flex; gap: 22px; padding: 16px 0; border-top: 1px solid #cdb89e; font-size: 20px; } .dk-grid2 li span { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em; color: #a97e50; padding-top: 5px; } .dk-partner { position: absolute; top: 68px; right: 64px; width: 260px; } .dk-partner ul { list-style: none; padding: 0; margin: 0; } .dk-partner li { padding: 9px 0; border-bottom: 1px solid #d8c7b1; font-style: italic; font-size: 19px; color: #6b553f; } .dk-steps { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 26px 0 0; position: relative; border-top: 1px solid #b88a5e; } .dk-steps::after { content: ""; position: absolute; right: -2px; top: -5px; border: 5px solid transparent; border-left: 8px solid #b88a5e; } .dk-steps li { display: grid; gap: 6px; position: relative; } .dk-steps li::before { content: ""; position: absolute; top: -31px; left: 0; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #b88a5e; background: #f5eee4; } .dk-steps .dk-eyebrow { margin: 0; } /* stage pages */ .dk-dashes { display: inline-flex; gap: 4px; margin-right: 10px; vertical-align: middle; } .dk-dashes i { width: 18px; height: 2px; background: #d8c7b1; } .dk-dashes i.is-on { background: #9a6a42; } .dk-have .dk-eyebrow { margin-bottom: 14px; } .dk-have ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; padding: 14px 0 0; border-top: 1px solid #cdb89e; margin: 0; } .dk-have li { display: grid; gap: 6px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.45; color: #4a3f35; } .dk-have li span { font-size: 11px; letter-spacing: 0.2em; color: #a97e50; } /* services */ .dk-s--menu { flex-direction: row; gap: 80px; } .dk-s--menu .dk-col { flex: 0 0 440px; display: flex; flex-direction: column; } .dk-menu { flex: 1; list-style: none; padding: 30px 0 0; margin: 0; display: grid; align-content: start; } .dk-menu li { display: flex; gap: 28px; padding: 20px 0; border-bottom: 1px solid #d3bea4; font-size: 26px; } .dk-menu li span { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em; color: #a97e50; padding-top: 10px; } .dk-items { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; list-style: none; padding: 0; margin-bottom: 0; } .dk-items li { padding: 11px 0; border-top: 1px solid #ddcdb8; font-family: var(--font-sans); font-size: 12.5px; color: #4a3f35; } .dk-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 50px; list-style: none; padding: 0; } .dk-grid3 li { padding: 16px 0; border-top: 1px solid #cdb89e; font-size: 22px; } /* chapters */ .dk-chapters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; list-style: none; padding: 0; margin-bottom: 0; } .dk-chapters li { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #2a221b; color: #f5eee4; } .dk-chapters li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 55%); } .dk-chapters__cap { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 4px; font-size: 17px; line-height: 1.15; } .dk-chapters__cap .dk-eyebrow { margin: 0; font-size: 9px; color: rgba(245, 238, 228, 0.7); } /* clients / press */ .dk-logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; list-style: none; padding: 0; margin-bottom: 0; } .dk-logos li { display: grid; place-items: center; height: 80px; padding: 0 12px; border: 1px solid #cdb89e; text-align: center; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #2b2119; background: rgba(255, 255, 255, 0.25); } .dk-press { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: 0; border-top: 1px solid #cdb89e; } .dk-press li { padding: 26px 0; text-align: center; font-size: 26px; color: #6b553f; border-bottom: 1px solid #cdb89e; } .dk-press li:not(:nth-child(3n)) { border-right: 1px solid #cdb89e; } /* begin */ .dk-s--begin { flex-direction: row; padding: 0; } .dk-s--begin .dk-col { position: relative; z-index: 1; width: 58%; display: flex; flex-direction: column; padding: 68px 64px 64px; background: linear-gradient(to right, #f5eee4 70%, rgba(245, 238, 228, 0)); } .dk-begin__media { position: absolute; inset: 0 0 0 38%; } .dk-begin__close { padding-top: 18px; border-top: 1px solid #cdb89e; font-size: 17px; } /* close */ .dk-s--close { justify-content: flex-start; } .dk-s--close .dk-h { font-size: 64px; } .dk-close__foot .dk-eyebrow { margin: 0 0 10px; } .dk-close__foot a { color: inherit; } .dk-close__cta { margin-top: 22px; } .dk-close__cta .btn { font-size: 11px; background: #f5eee4; color: #1d1712; padding: 14px 22px; } .dk-close__cta .btn:hover { background: #d8b98f; } @media (max-width: 767px) { .deck__bar, .deck__nav { padding: 0.75rem var(--margin); } .deck__progress { display: none; } } .hud-card__media .frame__slot, .hud-card__media .frame__corner { display: none; } .hud-card__media .frame__mark { width: 1rem; }