/* ─── Podcast Foundry — main.css ─────────────────────────────────────────── */ /* Tokens loaded via Docs/colors_and_type.css linked in */ /* ── Reset additions ────────────────────────────────────────────────────── */ a { text-decoration: none; color: inherit; } img, video { display: block; max-width: 100%; } button { cursor: pointer; font-family: var(--font-sans); } ul[role=list] { list-style: none; padding: 0; margin: 0; } /* ── Film grain ──────────────────────────────────────────────────────────── */ /* Fixed pseudo-element — never on a scrolling container */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px 256px; background-repeat: repeat; } /* ── Layout utility ──────────────────────────────────────────────────────── */ .section__inner { max-width: 1280px; margin: 0 auto; } .section__eyebrow { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); margin-bottom: 24px; } /* ── Nav — floating pill ─────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 20px 24px 0; pointer-events: none; } .nav__pill { display: flex; align-items: center; gap: 4px; padding: 10px 10px 10px 20px; border-radius: 999px; background: rgba(42, 55, 39, 0.52); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); border: 0.5px solid rgba(245, 242, 235, 0.18); box-shadow: inset 0 1px 0 rgba(245, 242, 235, 0.08); pointer-events: all; transition: background 350ms cubic-bezier(0.16, 1, 0.3, 1), border-color 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 350ms cubic-bezier(0.16, 1, 0.3, 1); } .nav__pill--scrolled { background: rgba(42, 55, 39, 0.76); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border-color: rgba(245, 242, 235, 0.12); box-shadow: inset 0 1px 0 rgba(245, 242, 235, 0.1), 0 4px 24px rgba(42, 55, 39, 0.25); } .nav__logo { display: flex; align-items: center; margin-right: 8px; } .nav__logo img { display: block; } .nav__links { display: flex; align-items: center; gap: 2px; } .nav__links a { font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-medium); color: rgba(245, 242, 235, 0.8); padding: 7px 13px; border-radius: 999px; transition: color 200ms ease, background 200ms ease; } .nav__links a:hover { color: var(--cream); background: rgba(245, 242, 235, 0.08); } .nav__links a.active { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; } /* Inline CTA pill inside the nav */ .nav__links .nav__cta { background: var(--cream); color: var(--forest-dark); padding: 8px 18px; font-weight: var(--fw-semibold); transition: background 200ms ease, transform 150ms ease; } .nav__links .nav__cta:hover, .nav__links .nav__cta.active { background: var(--forest-light); color: var(--cream); text-decoration: none; transform: scale(1.02); } .nav__links .nav__cta.active { transform: none; } /* Hamburger — hidden on desktop */ .nav__mobile-toggle { display: none; position: relative; width: 28px; height: 20px; background: none; border: none; padding: 0; margin-left: 8px; flex-shrink: 0; } .toggle-line { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--cream); border-radius: 2px; transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), top 300ms cubic-bezier(0.16, 1, 0.3, 1), bottom 300ms cubic-bezier(0.16, 1, 0.3, 1); } .toggle-line--top { top: 3px; } .toggle-line--bottom { bottom: 3px; } .nav--open .toggle-line--top { top: 50%; transform: translateY(-50%) rotate(45deg); } .nav--open .toggle-line--bottom { bottom: 50%; transform: translateY(50%) rotate(-45deg); } /* Full-screen mobile overlay */ .nav__overlay { position: fixed; inset: 0; background: rgba(42, 55, 39, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 99; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; visibility: hidden; pointer-events: none; } .nav__overlay.open { visibility: visible; pointer-events: all; } .nav__overlay a { font-family: var(--font-serif); font-size: 42px; font-weight: 700; color: var(--cream); opacity: 0; transform: translateY(20px); transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), transform 400ms cubic-bezier(0.16, 1, 0.3, 1); } .nav__overlay.open a { opacity: 1; transform: translateY(0); } /* ── Pill buttons ────────────────────────────────────────────────────────── */ .btn-pill { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px 14px 28px; border-radius: 999px; font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: none; transition: background 250ms cubic-bezier(0.16, 1, 0.3, 1), transform 150ms cubic-bezier(0.16, 1, 0.3, 1), border-color 250ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-pill:active { transform: scale(0.98); } /* No trailing icon variant (compact) */ .btn-pill--no-icon { padding: 14px 28px; } /* Primary on dark surface — cream button */ .btn-pill--primary-dark { background: var(--cream); color: var(--forest-dark); } .btn-pill--primary-dark:hover { background: rgba(245, 242, 235, 0.88); } /* Primary on cream surface — forest button */ .btn-pill--primary { background: var(--forest); color: var(--cream); } .btn-pill--primary:hover { background: var(--forest-dark); } /* Ghost on dark surface */ .btn-pill--ghost { background: transparent; color: var(--cream); border: 0.5px solid rgba(245, 242, 235, 0.4); padding: 14px 24px; } .btn-pill--ghost:hover { background: rgba(245, 242, 235, 0.08); border-color: rgba(245, 242, 235, 0.65); } /* Ghost on cream surface */ .btn-pill--ghost-forest { background: transparent; color: var(--forest); border: 0.5px solid var(--forest); padding: 14px 24px; } .btn-pill--ghost-forest:hover { background: rgba(61, 79, 58, 0.06); } /* Nested icon disc */ .btn-pill__icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(245, 242, 235, 0.15); flex-shrink: 0; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), background 250ms cubic-bezier(0.16, 1, 0.3, 1); } .btn-pill:hover .btn-pill__icon { transform: translate(2px, -1px); background: rgba(245, 242, 235, 0.28); } /* Forest surface icon disc */ .btn-pill--primary .btn-pill__icon { background: rgba(245, 242, 235, 0.12); } /* ── Scroll reveal ───────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal.revealed { opacity: 1; transform: translateY(0); } /* Stagger siblings */ .reveal:nth-child(2) { transition-delay: 80ms; } .reveal:nth-child(3) { transition-delay: 160ms; } .reveal:nth-child(4) { transition-delay: 240ms; } .reveal:nth-child(5) { transition-delay: 320ms; } /* ── Hero ─────────────────────────────────────────────────────────────────── */ .hero { position: relative; width: 100%; min-height: 100dvh; overflow: hidden; } .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; will-change: transform; } .hero__overlay { position: absolute; inset: 0; background: rgba(42, 55, 39, 0.55); } .hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100dvh; padding: 0 6vw 10vh; } .hero__headline { font-family: var(--font-serif); font-size: clamp(52px, 7vw, 96px); font-weight: 700; line-height: 1.0; letter-spacing: -0.015em; color: var(--cream); margin: 0 0 24px; max-width: 840px; } /* Each word split by JS */ .hero__headline .word { display: inline-block; opacity: 0; transform: translateY(20px); animation: wordReveal 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: var(--delay, 0ms); } @keyframes wordReveal { to { opacity: 1; transform: translateY(0); } } .hero__subhead { font-family: var(--font-sans); font-size: clamp(15px, 1.4vw, 18px); color: rgba(245, 242, 235, 0.78); max-width: 540px; line-height: 1.65; margin: 0 0 40px; opacity: 0; transform: translateY(16px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .hero__subhead.visible { opacity: 1; transform: translateY(0); } .hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; opacity: 0; transform: translateY(12px); transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .hero__ctas.visible { opacity: 1; transform: translateY(0); } /* ── What we do — ruled three-column ────────────────────────────────────── */ .what-we-do { position: relative; z-index: 2; background: var(--cream); padding: 120px 6vw; } .what-we-do__header { margin-bottom: 56px; } .what-we-do__grid { display: grid; grid-template-columns: repeat(3, 1fr); } .what-we-do__col { padding-right: 56px; } .what-we-do__col + .what-we-do__col { padding-right: 56px; padding-left: 56px; border-left: 0.5px solid var(--border); } .what-we-do__col:last-child { padding-right: 0; } .what-we-do__label { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); margin-bottom: 16px; } .what-we-do__text { font-size: 16px; line-height: 1.7; color: var(--charcoal); margin: 0; } /* ── Already recording — dark + photo ───────────────────────────────────── */ .already-recording { position: relative; z-index: 3; background: var(--forest-dark); padding: 140px 6vw; overflow: hidden; } .already-recording__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: 0.20; z-index: 0; } .already-recording__inner { position: relative; z-index: 1; max-width: 760px; } .already-recording .section__eyebrow { color: rgba(245, 242, 235, 0.5); } .already-recording h2 { font-family: var(--font-serif); font-size: clamp(36px, 4vw, 56px); font-weight: 700; color: var(--cream); line-height: 1.1; margin: 0 0 32px; } .already-recording p { color: rgba(245, 242, 235, 0.78); font-size: 17px; line-height: 1.7; margin: 0 0 20px; } .already-recording p:last-of-type { margin-bottom: 40px; } /* ── Selected work ───────────────────────────────────────────────────────── */ .selected-work { position: relative; z-index: 4; background: var(--cream); padding: 140px 6vw; margin-top: -80px; } .selected-work__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; gap: 24px; } .selected-work__intro { font-family: var(--font-serif); font-size: clamp(28px, 3vw, 44px); color: var(--forest-dark); font-weight: 700; line-height: 1.1; margin: 0; } .selected-work__all { font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-semibold); color: var(--forest); letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 6px; border-bottom: 0.5px solid var(--border); padding-bottom: 2px; white-space: nowrap; transition: color 200ms ease, border-color 200ms ease; } .selected-work__all:hover { color: var(--forest-dark); border-color: var(--forest); } .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* Double-bezel card */ .card-shell { background: var(--shell-bg); border: 0.5px solid var(--border-faint); padding: 6px; border-radius: 20px; transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1); } .card-shell:hover { border-color: var(--border); } .card-core { background: var(--cream); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); border-radius: 14px; overflow: hidden; } .work-card__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .work-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .card-shell:hover .work-card__thumb img { transform: scale(1.04); } .work-card__overlay { position: absolute; inset: 0; background: rgba(42, 55, 39, 0); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 24px; transition: background 200ms ease; } .card-shell:hover .work-card__overlay { background: rgba(42, 55, 39, 0.7); } .work-card__overlay-content { opacity: 0; transform: translateY(8px); transition: opacity 200ms ease-out, transform 200ms ease-out; } .card-shell:hover .work-card__overlay-content { opacity: 1; transform: translateY(0); } .work-card__overlay-title { display: block; font-family: var(--font-serif); font-size: 18px; color: var(--cream); margin-bottom: 4px; } .work-card__overlay-type { font-family: var(--font-sans); font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 242, 235, 0.6); } .work-card__body { padding: 20px 24px 24px; } .work-card__body h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--forest-dark); margin: 0 0 6px; } .work-card__body p { font-size: 13px; color: var(--warm-gray); line-height: 1.55; margin: 0; } /* ── Work card play button ───────────────────────────────────────────────── */ .card-shell[data-video] { cursor: pointer; } .work-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(42, 55, 39, 0.5); border: 1px solid rgba(245, 242, 235, 0.55); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 15px; transition: background 200ms, border-color 200ms, transform 250ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 2; pointer-events: none; } .card-shell:hover .work-card__play { background: rgba(42, 55, 39, 0.65); border-color: rgba(245, 242, 235, 0.9); transform: translate(-50%, -50%) scale(1.1); } /* ── Video modal ─────────────────────────────────────────────────────────── */ .video-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1); } .video-modal.is-open { opacity: 1; pointer-events: all; } .video-modal__backdrop { position: absolute; inset: 0; background: rgba(42, 55, 39, 0.96); cursor: pointer; } .video-modal__content { position: relative; width: min(92vw, 960px); z-index: 1; transform: scale(0.95); transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1); } .video-modal.is-open .video-modal__content { transform: scale(1); } .video-modal__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(245, 242, 235, 0.12); border: 0.5px solid rgba(245, 242, 235, 0.2); color: var(--cream); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 200ms, border-color 200ms; } .video-modal__close:hover { background: rgba(245, 242, 235, 0.22); border-color: rgba(245, 242, 235, 0.4); } .video-modal__video { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 12px; background: #000; outline: none; } @media (prefers-reduced-motion: reduce) { .video-modal, .video-modal__content { transition: none; } } /* ── Production stack ────────────────────────────────────────────────────── */ .production-stack { position: relative; z-index: 5; background: var(--cream); padding: 140px 6vw; border-top: 0.5px solid var(--border-faint); } .production-stack__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .production-stack p { font-size: 17px; line-height: 1.72; color: var(--charcoal); margin: 0 0 20px; } .production-stack p:last-child { margin-bottom: 0; } .production-stack__stat { text-align: center; } .stat-number { display: block; font-family: var(--font-serif); font-size: clamp(88px, 12vw, 152px); font-weight: 700; color: var(--forest); line-height: 0.9; letter-spacing: -0.03em; } .stat-label { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm-gray); margin-top: 20px; } /* ── Part of the group ───────────────────────────────────────────────────── */ .group-section { position: relative; z-index: 6; background: var(--cream); padding: 72px 6vw; border-top: 0.5px solid var(--border); } .group-section p { font-size: 15px; color: var(--warm-gray); line-height: 1.65; max-width: 640px; margin: 0 0 16px; } .group-section__links { display: flex; gap: 24px; flex-wrap: wrap; } .group-section__links a { font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-semibold); color: var(--forest); border-bottom: 0.5px solid var(--border); padding-bottom: 2px; transition: color 200ms ease, border-color 200ms ease; } .group-section__links a:hover { color: var(--forest-dark); border-color: var(--forest); } /* ── CTA strip ───────────────────────────────────────────────────────────── */ .cta-strip { position: relative; z-index: 7; background: var(--forest-light); padding: 120px 6vw; text-align: center; overflow: hidden; } .cta-strip__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.18; z-index: 0; } .cta-strip__inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; } .cta-strip__headline { font-family: var(--font-serif); font-size: clamp(36px, 4vw, 56px); font-weight: 700; color: var(--cream); line-height: 1.05; margin: 0 0 40px; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .footer { background: var(--forest-dark); padding: 64px 6vw; border-top: 0.5px solid rgba(245, 242, 235, 0.1); } .footer__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 48px; } .footer__logo img { display: block; } .footer__nav { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 10px; justify-content: center; } .footer__nav a { font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-medium); color: rgba(245, 242, 235, 0.6); transition: color 200ms ease; } .footer__nav a:hover { color: var(--cream); } .footer__right { text-align: right; } .footer__group { font-size: 12px; color: rgba(245, 242, 235, 0.45); margin: 0 0 6px; line-height: 1.5; } .footer__group a { color: rgba(245, 242, 235, 0.65); border-bottom: 0.5px solid rgba(245, 242, 235, 0.2); transition: color 200ms ease; } .footer__group a:hover { color: var(--cream); } .footer__legal { font-size: 11px; color: rgba(245, 242, 235, 0.3); margin: 0; line-height: 1.5; } .footer__legal-links { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 10px; } .footer__legal-link { font-family: var(--font-sans); font-size: 11px; color: rgba(245, 242, 235, 0.3); transition: color 200ms ease; } .footer__legal-link:hover { color: rgba(245, 242, 235, 0.6); } .footer__cookie-btn { font-family: var(--font-sans); font-size: 11px; color: rgba(245, 242, 235, 0.3); background: none; border: none; padding: 0; cursor: pointer; transition: color 200ms ease; } .footer__cookie-btn:hover { color: rgba(245, 242, 235, 0.6); } /* Cookie banner inline privacy link */ .cookie-banner__text a { color: rgba(245, 242, 235, 0.65); border-bottom: 0.5px solid rgba(245, 242, 235, 0.3); transition: border-color 200ms ease; } .cookie-banner__text a:hover { border-color: rgba(245, 242, 235, 0.65); } /* ── Legal pages ─────────────────────────────────────────────────────────── */ .legal-header { background: var(--cream); padding: 180px 6vw 72px; border-bottom: 0.5px solid var(--border-faint); } .legal-header__inner { max-width: 720px; } .legal-header h1 { font-family: var(--font-serif); font-size: clamp(40px, 5vw, 64px); font-weight: 700; color: var(--forest-dark); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 12px; } .legal-meta { font-family: var(--font-sans); font-size: 13px; color: var(--warm-gray); margin: 0; } .legal-body { background: var(--cream); padding: 80px 6vw 140px; } .legal-body__inner { max-width: 720px; } .legal-section { padding-top: 52px; margin-top: 52px; border-top: 0.5px solid var(--border-faint); } .legal-section:first-child { padding-top: 0; margin-top: 0; border-top: none; } .legal-body h2 { font-family: var(--font-serif); font-size: clamp(22px, 2vw, 28px); font-weight: 700; color: var(--forest-dark); line-height: 1.15; margin: 0 0 20px; } .legal-body h3 { font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); margin: 28px 0 10px; } .legal-body p { font-size: 16px; line-height: 1.78; color: var(--charcoal); margin: 0 0 16px; } .legal-body p:last-child { margin-bottom: 0; } .legal-body ul { padding-left: 20px; margin: 0 0 16px; } .legal-body ul li { font-size: 16px; line-height: 1.75; color: var(--charcoal); margin-bottom: 10px; } .legal-body ul li:last-child { margin-bottom: 0; } .legal-body a { color: var(--forest); border-bottom: 0.5px solid rgba(61, 79, 58, 0.35); transition: border-color 200ms ease; } .legal-body a:hover { border-color: var(--forest); } .legal-body strong { font-weight: var(--fw-semibold); } @media (max-width: 768px) { .legal-header { padding: 160px 24px 56px; } .legal-body { padding: 60px 24px 100px; } .footer__legal-links { align-items: flex-start; } } /* ══════════════════════════════════════════════════════════════════════════ */ /* WORK PAGE */ /* ══════════════════════════════════════════════════════════════════════════ */ /* Type-only dark hero (no photo) */ .hero--type { background: var(--forest-dark); min-height: 65vh; } .hero--type .hero__content { min-height: 65vh; padding-bottom: 12vh; } /* Featured project — cream, rises over type hero */ .featured-project { position: relative; z-index: 3; background: var(--cream); padding: 140px 6vw; margin-top: -80px; } .featured-project__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .featured-project h2 { font-family: var(--font-serif); font-size: clamp(36px, 4vw, 56px); font-weight: 700; color: var(--forest-dark); line-height: 1.1; margin: 0 0 24px; } .featured-project p { font-size: 17px; line-height: 1.72; color: var(--charcoal); margin: 0 0 20px; } .featured-project p:last-of-type { margin-bottom: 40px; } .featured-project__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 40px; } .featured-project__stat { padding: 20px 20px 20px 0; border-right: 0.5px solid var(--border-faint); } .featured-project__stat:first-child { padding-left: 0; } .featured-project__stat:last-child { border-right: none; } .featured-project__stat-num { display: block; font-family: var(--font-serif); font-size: clamp(28px, 2.5vw, 40px); font-weight: 700; color: var(--forest-dark); letter-spacing: -0.02em; line-height: 1.0; margin-bottom: 6px; } .featured-project__stat-label { font-size: 12px; font-weight: var(--fw-medium); color: var(--warm-gray); line-height: 1.4; } .featured-project__image { border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; } .featured-project__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Full work grid section */ .work-full-grid { position: relative; z-index: 4; background: var(--cream); padding: 0 6vw 140px; border-top: 0.5px solid var(--border-faint); } .work-full-grid .section__inner { padding-top: 80px; } .work-full-grid .work-grid { grid-template-columns: repeat(3, 1fr); } .work-page-intro { max-width: 640px; font-size: 16px; color: var(--warm-gray); line-height: 1.65; margin: 0 0 56px; } /* Case study block */ .case-study { position: relative; z-index: 5; background: var(--forest-dark); padding: 140px 6vw; overflow: hidden; margin-top: -80px; } .case-study__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.18; z-index: 0; } .case-study__inner { position: relative; z-index: 1; max-width: 760px; } .case-study .section__eyebrow { color: rgba(245, 242, 235, 0.5); } .case-study h2 { font-family: var(--font-serif); font-size: clamp(32px, 3.5vw, 52px); font-weight: 700; color: var(--cream); line-height: 1.1; margin: 0 0 8px; } .case-study__sub { display: block; font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-sans); color: rgba(245, 242, 235, 0.45); margin-bottom: 32px; } .case-study p { font-size: 17px; line-height: 1.7; color: rgba(245, 242, 235, 0.78); margin: 0 0 20px; } .case-study p:last-of-type { margin-bottom: 40px; } /* ══════════════════════════════════════════════════════════════════════════ */ /* SERVICES PAGE */ /* ══════════════════════════════════════════════════════════════════════════ */ /* Cream page header (services, not full-bleed) */ .page-header { position: relative; z-index: 2; background: var(--cream); padding: 200px 6vw 120px; } .page-header__inner { max-width: 760px; } .page-header h1 { font-family: var(--font-serif); font-size: clamp(52px, 7vw, 96px); font-weight: 700; color: var(--forest-dark); line-height: 1.0; letter-spacing: -0.015em; margin: 0 0 24px; max-width: 640px; } .page-header p { font-size: clamp(16px, 1.5vw, 19px); color: var(--warm-gray); line-height: 1.65; margin: 0; max-width: 540px; } /* Pricing section */ .pricing-section { position: relative; z-index: 3; background: var(--cream); padding: 100px 6vw 140px; border-top: 0.5px solid var(--border-faint); } .pricing-intro { font-size: 17px; line-height: 1.7; color: var(--charcoal); max-width: 640px; margin: 0 0 64px; } .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .pricing-card .card-core { display: flex; flex-direction: column; height: 100%; } .pricing-card__body { padding: 28px 28px 0; flex: 1; } .pricing-card__name { display: block; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-sans); color: var(--forest); margin-bottom: 12px; } .pricing-card__desc { font-size: 15px; color: var(--charcoal); line-height: 1.6; margin: 0; } .pricing-card__footer { padding: 20px 28px 28px; border-top: 0.5px solid var(--border-faint); margin-top: 24px; } .pricing-card__price { display: block; font-family: var(--font-serif); font-size: clamp(28px, 2.5vw, 40px); font-weight: 700; color: var(--forest-dark); letter-spacing: -0.02em; line-height: 1.0; margin-bottom: 4px; } .pricing-card__note { font-size: 12px; color: var(--warm-gray); font-family: var(--font-sans); line-height: 1.4; } /* Shoot days (dark section) */ .shoot-days { position: relative; z-index: 4; background: var(--forest-dark); padding: 140px 6vw; overflow: hidden; } .shoot-days__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.18; z-index: 0; } .shoot-days__inner { position: relative; z-index: 1; } .shoot-days .section__eyebrow { color: rgba(245, 242, 235, 0.5); } .shoot-days__intro { font-size: 17px; line-height: 1.7; color: rgba(245, 242, 235, 0.78); max-width: 560px; margin: 0 0 56px; } .shoot-days__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; } .card-shell--dark { background: rgba(245, 242, 235, 0.06); border-color: rgba(245, 242, 235, 0.10); } .card-core--dark { background: var(--forest); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .card-core--dark .pricing-card__name { color: rgba(245, 242, 235, 0.5); } .card-core--dark .pricing-card__desc { color: rgba(245, 242, 235, 0.78); } .card-core--dark .pricing-card__footer { border-color: rgba(245, 242, 235, 0.12); } .card-core--dark .pricing-card__price { color: var(--cream); } .card-core--dark .pricing-card__note { color: rgba(245, 242, 235, 0.5); } /* How it works — rises over shoot days */ .how-it-works { position: relative; z-index: 5; background: var(--cream); padding: 140px 6vw; margin-top: -80px; } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .step { padding-right: 56px; } .step + .step { padding-right: 56px; padding-left: 56px; border-left: 0.5px solid var(--border); } .step:last-child { padding-right: 0; } .step__num { display: block; font-family: var(--font-serif); font-size: 48px; font-weight: 700; color: var(--sage); line-height: 1.0; letter-spacing: -0.02em; margin-bottom: 16px; } .step__label { display: block; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-sans); color: var(--forest); margin-bottom: 12px; } .step__text { font-size: 16px; color: var(--charcoal); line-height: 1.7; margin: 0; } /* ══════════════════════════════════════════════════════════════════════════ */ /* ABOUT PAGE */ /* ══════════════════════════════════════════════════════════════════════════ */ /* Short intro — rises over photo hero */ .about-intro { position: relative; z-index: 2; background: var(--cream); padding: 140px 6vw; margin-top: -80px; } .about-intro p { font-size: 17px; line-height: 1.72; color: var(--charcoal); max-width: 760px; margin: 0 0 20px; } .about-intro p:last-child { margin-bottom: 0; } /* Team section */ .team-section { position: relative; z-index: 3; background: var(--cream); padding: 0 6vw 140px; border-top: 0.5px solid var(--border-faint); } .team-section__inner { padding-top: 80px; } .team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 48px; } .team-card .card-core { padding: 0; overflow: hidden; } .team-card__photo { aspect-ratio: 4 / 3; overflow: hidden; } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); } .team-card:hover .team-card__photo img { transform: scale(1.03); } .team-card__body { padding: 24px 28px 28px; } .team-card__name { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--forest-dark); margin: 0 0 4px; } .team-card__role { display: block; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-sans); color: var(--forest); margin-bottom: 16px; } .team-card__bio { font-size: 15px; color: var(--warm-gray); line-height: 1.65; margin: 0; } .team-note { font-size: 15px; color: var(--warm-gray); line-height: 1.65; max-width: 640px; margin: 0; font-style: italic; } /* How we produce */ .how-we-produce { position: relative; z-index: 4; background: var(--forest-dark); padding: 140px 6vw; overflow: hidden; } .how-we-produce__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.18; z-index: 0; } .how-we-produce__inner { position: relative; z-index: 1; max-width: 760px; } .how-we-produce .section__eyebrow { color: rgba(245, 242, 235, 0.5); } .how-we-produce p { font-size: 17px; line-height: 1.7; color: rgba(245, 242, 235, 0.78); margin: 0 0 20px; } .how-we-produce p:last-child { margin-bottom: 0; } /* Group brands — rises over how-we-produce */ .about-group { position: relative; z-index: 5; background: var(--cream); padding: 140px 6vw; margin-top: -80px; } .brand-list { list-style: none; padding: 0; margin: 0; } .brand-item { display: flex; align-items: baseline; gap: 24px; padding: 24px 0; border-bottom: 0.5px solid var(--border-faint); } .brand-item:first-child { border-top: 0.5px solid var(--border-faint); } .brand-item__name { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--forest-dark); min-width: 220px; flex-shrink: 0; } .brand-item__name a { color: inherit; transition: color 200ms ease; } .brand-item__name a:hover { color: var(--forest); } .brand-item--current .brand-item__name { color: var(--forest); } .brand-item__desc { font-size: 15px; color: var(--warm-gray); line-height: 1.5; } /* ══════════════════════════════════════════════════════════════════════════ */ /* CONTACT PAGE */ /* ══════════════════════════════════════════════════════════════════════════ */ .contact-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; } .contact-left { position: relative; background: var(--forest-dark); padding: 160px 80px 80px 6vw; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .contact-left__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.12; z-index: 0; } .contact-left__inner { position: relative; z-index: 1; max-width: 440px; } .contact-left h1 { font-family: var(--font-serif); font-size: clamp(40px, 4vw, 64px); font-weight: 700; color: var(--cream); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 28px; } .contact-left p { font-size: 17px; line-height: 1.7; color: rgba(245, 242, 235, 0.78); margin: 0 0 20px; } .contact-left p:last-of-type { margin-bottom: 0; } .contact-email { display: inline-block; font-size: 15px; font-weight: var(--fw-medium); font-family: var(--font-sans); color: var(--cream); margin-top: 40px; border-bottom: 0.5px solid rgba(245, 242, 235, 0.3); padding-bottom: 3px; transition: border-color 200ms ease; } .contact-email:hover { border-color: var(--cream); } .contact-founder-note { margin-top: 48px; padding-top: 32px; border-top: 0.5px solid rgba(245, 242, 235, 0.12); } .contact-founder-note p { font-size: 13px; color: rgba(245, 242, 235, 0.4); margin: 0; line-height: 1.6; } .contact-founder-note a { color: rgba(245, 242, 235, 0.65); border-bottom: 0.5px solid rgba(245, 242, 235, 0.25); transition: color 200ms ease; } .contact-founder-note a:hover { color: var(--cream); } .contact-right { background: var(--cream); padding: 160px 6vw 80px 80px; display: flex; flex-direction: column; justify-content: center; } .contact-right__inner { max-width: 480px; } .contact-right__label { display: block; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-sans); color: var(--forest); margin-bottom: 32px; } .contact-email-cta { display: block; font-family: var(--font-sans); font-size: clamp(18px, 2.2vw, 24px); font-weight: var(--fw-semibold); color: var(--forest-dark); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 12px; transition: color 200ms ease; } .contact-email-cta:hover { color: var(--forest); } .contact-email-note { font-family: var(--font-sans); font-size: 14px; color: var(--warm-gray); margin: 0; } .contact-right-divider { border: none; border-top: 0.5px solid var(--border-faint); margin: 52px 0; } .contact-redirect__eyebrow { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); margin-bottom: 16px; } .contact-redirect p { font-size: 16px; line-height: 1.65; color: var(--warm-gray); margin: 0 0 20px; } .contact-redirect__link { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold); color: var(--forest); border-bottom: 0.5px solid rgba(61, 79, 58, 0.35); padding-bottom: 2px; transition: color 200ms ease, border-color 200ms ease; } .contact-redirect__link:hover { color: var(--forest-dark); border-color: var(--forest-dark); } .contact-form { display: flex; flex-direction: column; gap: 20px; } .form-field { display: flex; flex-direction: column; gap: 8px; } .form-field label { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-sans); color: var(--forest); } .form-field input, .form-field textarea { font-family: var(--font-sans); font-size: 16px; color: var(--charcoal); background: var(--cream); border: 0.5px solid var(--border); border-radius: 6px; padding: 14px 16px; width: 100%; outline: none; resize: none; transition: border-color 200ms ease; -webkit-appearance: none; } .form-field input:focus, .form-field textarea:focus { border-color: var(--forest); border-width: 1.5px; padding: 13px 15px; } .form-field textarea { min-height: 140px; } .form-confirm { display: none; padding: 20px 24px; background: rgba(61, 79, 58, 0.06); border: 0.5px solid var(--border-faint); border-radius: 8px; font-size: 16px; color: var(--forest-dark); line-height: 1.5; } .form-confirm.visible { display: block; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .production-stack__inner { grid-template-columns: 1fr; gap: 56px; } .production-stack__stat { text-align: left; } .work-grid { grid-template-columns: repeat(2, 1fr); } .featured-project__inner { grid-template-columns: 1fr; gap: 48px; } .featured-project__image { order: -1; } .pricing-grid { grid-template-columns: repeat(2, 1fr); } .shoot-days__grid { grid-template-columns: 1fr; } .contact-split { grid-template-columns: 1fr; min-height: unset; } .contact-left { padding: 140px 6vw 80px; } .contact-right { padding: 80px 6vw 120px; } .team-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { /* Nav */ .nav__links { display: none; } .nav__mobile-toggle { display: flex; align-items: center; justify-content: center; } .nav__pill { padding: 10px 14px 10px 18px; width: calc(100vw - 40px); justify-content: space-between; } /* Sections */ .what-we-do, .already-recording, .selected-work, .production-stack, .group-section, .cta-strip { padding-left: 24px; padding-right: 24px; } .what-we-do { padding-top: 80px; padding-bottom: 80px; } .already-recording { padding-top: 100px; padding-bottom: 100px; } .selected-work { padding-top: 80px; padding-bottom: 80px; margin-top: 0; } .production-stack { padding-top: 80px; padding-bottom: 80px; } .cta-strip { padding-top: 80px; padding-bottom: 80px; } /* What we do: stacked with top rules */ .what-we-do__grid { grid-template-columns: 1fr; gap: 0; } .what-we-do__col, .what-we-do__col + .what-we-do__col, .what-we-do__col:last-child { padding: 32px 0 0; border-left: none; border-top: 0.5px solid var(--border); } .what-we-do__col:first-child { border-top: none; padding-top: 0; } /* Work grid: single col */ .work-grid { grid-template-columns: 1fr; } /* Selected work header */ .selected-work__header { flex-direction: column; align-items: flex-start; } /* Footer: stacked */ .footer { padding: 48px 24px; } .footer__inner { grid-template-columns: 1fr; gap: 28px; } .footer__right { text-align: left; } .footer__nav { justify-content: flex-start; } /* Work page */ .featured-project { padding: 80px 24px; margin-top: 0; } .featured-project__stats { grid-template-columns: 1fr 1fr; } .work-full-grid { padding: 0 24px 80px; } .case-study { padding: 100px 24px; margin-top: 0; } /* Services page */ .page-header { padding: 160px 24px 80px; } .pricing-section { padding: 60px 24px 80px; } .pricing-grid { grid-template-columns: 1fr; } .shoot-days { padding: 100px 24px; } .how-it-works { padding: 80px 24px; margin-top: 0; } .steps-grid { grid-template-columns: 1fr; } .step, .step + .step { padding: 32px 0 0; border-left: none; border-top: 0.5px solid var(--border); } .step:first-child { border-top: none; padding-top: 0; } /* About page */ .about-intro { padding: 80px 24px; margin-top: 0; } .team-section { padding: 0 24px 80px; } .how-we-produce { padding: 100px 24px; } .about-group { padding: 80px 24px; margin-top: 0; } .brand-item { flex-direction: column; gap: 8px; } .brand-item__name { min-width: unset; } /* Contact page */ .contact-left { padding: 140px 24px 60px; } .contact-right { padding: 60px 24px 100px; } } /* ── Page transitions ────────────────────────────────────────────────────── */ .page-transition { position: fixed; inset: 0; z-index: 10000; background: var(--forest-dark); display: flex; align-items: center; justify-content: center; transform: translateY(100%); pointer-events: none; } .page-transition__logo { display: block; height: 64px; width: auto; opacity: 0; } /* Panel rises up from below, covering the screen */ .page-transition--enter { animation: pt-enter 600ms cubic-bezier(0.76, 0, 0.24, 1) forwards; pointer-events: all; } /* Logo fades in once the panel has fully covered the screen */ .page-transition--enter .page-transition__logo { animation: pt-logo-in 320ms cubic-bezier(0.16, 1, 0.3, 1) 560ms both; } /* Panel exits upward off the top of the screen */ .page-transition--exit { animation: pt-exit 580ms cubic-bezier(0.76, 0, 0.24, 1) forwards; } /* Hide page content on arrival until panel is covering the screen. Set via early script — keeps content invisible before first paint. */ html.pf-arriving .nav, html.pf-arriving .nav__overlay, html.pf-arriving main, html.pf-arriving footer { opacity: 0; } /* Panel covers the screen from first paint — no gap between render and the JS snap. */ html.pf-arriving .page-transition { transform: translateY(0); pointer-events: all; } /* Logo matches its departing-page state from first paint — prevents the opacity flash. */ html.pf-arriving .page-transition__logo { opacity: 0.85; } /* Logo visible and rides out with the panel */ .page-transition--exit .page-transition__logo { opacity: 0.85; animation: none; } @keyframes pt-enter { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes pt-exit { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes pt-logo-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 0.85; transform: translateY(0) scale(1); } } /* ── Cookie consent banner ───────────────────────────────────────────────── */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--forest-dark); border-top: 0.5px solid rgba(245, 242, 235, 0.12); transform: translateY(100%); transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .cookie-banner.is-visible { transform: translateY(0); pointer-events: all; } .cookie-banner.is-hiding { transform: translateY(100%); pointer-events: none; } .cookie-banner__inner { max-width: 1280px; margin: 0 auto; padding: 20px 6vw; display: flex; align-items: center; gap: 40px; } .cookie-banner__text { flex: 1; } .cookie-banner__text p { font-family: var(--font-sans); font-size: 14px; color: rgba(245, 242, 235, 0.65); line-height: 1.6; margin: 0; } .cookie-banner__actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; } .cookie-banner__accept.btn--primary { padding: 11px 16px 11px 22px; font-size: 14px; } .cookie-banner__accept.btn--primary .btn__icon { width: 28px; height: 28px; } .cookie-banner__decline { font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-medium); color: rgba(245, 242, 235, 0.45); background: none; border: none; padding: 0; cursor: pointer; transition: color 200ms ease; } .cookie-banner__decline:hover { color: var(--cream); } @media (max-width: 768px) { .cookie-banner__inner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 24px 32px; } .cookie-banner__actions { width: 100%; } } /* ── Reduced motion ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-delay: 0.01ms !important; } .hero__headline .word, .hero__subhead, .hero__ctas, .reveal { opacity: 1 !important; transform: none !important; } } /* ── 404 ─────────────────────────────────────────────────────────────────── */ .error-404 { min-height: 100dvh; background: var(--forest-dark); display: flex; align-items: center; justify-content: center; padding: 120px 6vw 80px; } .error-404__inner { max-width: 560px; display: flex; flex-direction: column; gap: 24px; } .error-404 .section__eyebrow { color: rgba(245, 242, 235, 0.5); } .error-404 h1 { font-family: var(--font-serif); font-size: clamp(40px, 6vw, 72px); font-weight: 700; color: var(--cream); line-height: 1.05; letter-spacing: -0.02em; margin: 0; } .error-404 p { font-family: var(--font-sans); font-size: 18px; line-height: 1.65; color: rgba(245, 242, 235, 0.65); margin: 0; }