/* =================================================================== Windborn Studio — static translation of pencil-new.pen Desktop = IlQsZ (1440) · Mobile = SVFyj (402) Sections in this file: 0 Nav · 1 Hero · 2 Wordmark Band =================================================================== */ :root { --paper: #ffffff; --ink: #0a0a0a; --film-black: #090807; --ember: #e8531f; --bone: #f4f0eb; --muted: #6e6e6e; --faint: #9a9a95; --line: #e4e2dc; --border: #dad3c8; --paper-2: #f4f3ef; --text-inverse: #ede6dc; --text-inverse-2: #a89e90; --border-strong: #c9c0b2; --charcoal: #2c2723; --copper: #c47a3a; --maxw: 1440px; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Ensure the `hidden` attribute wins over class-level display rules */ [hidden] { display: none !important; } /* Scroll reveal — sections fade + rise as they enter view. Gated by .js-reveal (set in only when motion is allowed) so content is always visible without JS or under reduced-motion. */ .js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .js-reveal .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: "Inter", system-ui, -apple-system, sans-serif; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; } .site { width: 100%; max-width: var(--maxw); margin: 0 auto; background: var(--paper); } a { text-decoration: none; color: inherit; } .icon { width: 18px; height: 18px; display: block; } /* =================== SECTION 0 — NAV =================== */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 24px 40px; border-bottom: 1px solid var(--line); } .logo { display: flex; align-items: flex-start; gap: 2px; color: var(--ink); transition: opacity 0.18s ease; } .logo:hover { opacity: 0.7; } .logo__word { font-size: 26px; font-weight: 700; letter-spacing: -1px; line-height: 1; } .logo__tm { font-size: 12px; font-weight: 500; line-height: 1.2; } .nav__links { display: flex; align-items: center; gap: 40px; } .nav__links a { font-size: 16px; font-weight: 500; color: var(--ink); transition: color 0.18s ease; } .nav__links a:hover { color: var(--ember); } .menu-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 12px 18px; border: none; border-radius: 999px; background: var(--ink); color: #ffffff; font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.18s ease; } .menu-pill:hover { background: var(--charcoal); } /* =================== MENU OVERLAY (CjYG0 / rb7g5 / zIF5D / qjDCr) =================== */ .menu { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; /* panel slides in from the right (desktop) */ visibility: hidden; pointer-events: none; } .menu.is-open { visibility: visible; pointer-events: auto; } .menu__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.35s ease; } .menu.is-open .menu__backdrop { opacity: 1; } .menu__panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: min(460px, calc(100vw - 32px)); height: calc(100vh - 32px); height: calc(100dvh - 32px); margin: 16px; padding: 36px 40px; background: var(--ink); border-radius: 28px; color: #ffffff; overflow: hidden; transform: translateX(calc(100% + 32px)); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .menu.is-open .menu__panel { transform: translateX(0); } /* Top row — Close */ .menu__top { display: flex; justify-content: flex-end; } .menu__close { display: inline-flex; align-items: center; gap: 11px; padding: 0; border: none; background: none; color: #ffffff; font-family: inherit; font-size: 18px; font-weight: 500; cursor: pointer; } .menu__close svg { width: 23px; height: 23px; display: block; } .menu__close:hover { color: var(--ember); } /* Links */ .menu__links { list-style: none; margin: 0; padding: 0; } .menu__link { display: block; padding: 19px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #ffffff; font-size: 46px; font-weight: 500; line-height: 1; letter-spacing: -1.2px; transition: color 0.18s ease; } .menu__links li:last-child .menu__link { border-bottom: none; } .menu__link:hover, .menu__link:focus-visible { color: var(--ember); } /* Footer — email */ .menu__footer { display: flex; justify-content: flex-end; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); } .menu__mail { display: inline-flex; align-items: center; gap: 8px; color: #ededed; font-size: 13px; font-weight: 500; } .menu__mail svg { width: 15px; height: 15px; display: block; color: #c7c7c7; } .menu__mail:hover { color: var(--ember); } .menu__mail:hover svg { color: var(--ember); } /* Lock background scroll while the menu is open */ body.menu-open { overflow: hidden; } /* =================== SECTION 1 — HERO (ZApLT) =================== */ .hero-c { padding: 90px 0 70px; } .hero-c__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 0 40px; text-align: center; } .hero-c__title { font-size: clamp(38px, 6vw, 64px); font-weight: 600; letter-spacing: -2.5px; line-height: 1.04; color: var(--ink); } .hero-c__line { display: block; } .hero-c__intent { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -1px; } .hero-c__sub { max-width: 660px; font-size: 19px; line-height: 1.55; color: var(--muted); } .btn-start { display: inline-flex; align-items: center; gap: 14px; margin-top: 8px; padding: 10px 10px 10px 26px; border-radius: 999px; background: var(--ink); } .btn-start__label { font-size: 16px; font-weight: 600; color: #ffffff; } .btn-start__arrow { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 999px; background: var(--ember); } .btn-start__arrow svg { width: 18px; height: 18px; color: #ffffff; } .hero-marquee { margin-top: 34px; display: flex; flex-direction: column; gap: 20px; /* space between the two rows */ } /* =================== META STRIP (G5lUR) =================== */ .meta-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 48px; border-top: 1px solid var(--line); } .meta-strip span { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 1.5px; color: var(--muted); } /* =================== SECTION 2 — WORDMARK BAND =================== */ .wordmark { display: flex; align-items: center; justify-content: center; padding: 40px 0; overflow: hidden; } .wordmark__text { font-size: clamp(80px, 13vw, 188px); font-weight: 600; letter-spacing: -10px; line-height: 0.82; color: var(--film-black); text-align: center; white-space: nowrap; } /* =================== SECTION 3 — S01 STUDIO =================== */ .studio { display: grid; grid-template-columns: minmax(0, 1.41fr) minmax(0, 1fr) minmax(0, 1.59fr); column-gap: 40px; row-gap: 56px; padding: 40px 40px 110px; } .studio__index { grid-column: 1; grid-row: 1; font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 1.5px; color: var(--muted); } .studio__statement { grid-column: 2 / 4; grid-row: 1; display: flex; flex-direction: column; } .studio__lead, .studio__emph { font-size: 44px; font-weight: 500; letter-spacing: -1.5px; line-height: 1.14; } .studio__lead { color: var(--faint); } .studio__emph { color: var(--ink); } .studio__center { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; } .studio__body { display: flex; flex-direction: column; gap: 26px; padding: 16px 0; } .studio__b1, .studio__b2 { font-size: 18px; line-height: 1.5; } .studio__b1 { color: var(--ink); } .studio__b2 { color: var(--muted); } .studio__portrait { height: 350px; border-radius: 16px; background-image: url("images/generated-1780489897177.png"); background-size: cover; background-position: center; } .studio__stats { grid-column: 3; grid-row: 2; align-self: end; display: flex; flex-direction: column; gap: 20px; max-width: 427px; } .studio__stats-label { font-size: 17px; color: var(--muted); } .studio__rule { height: 1px; background: var(--line); } .studio__stats-row { display: flex; gap: 36px; } .stat { display: flex; flex-direction: column; gap: 10px; } .stat__value { font-size: 44px; font-weight: 600; letter-spacing: -2px; line-height: 1; color: var(--ink); } .stat__label { font-size: 15px; color: var(--muted); } /* =================== SECTION 4 — S03 LOGO WALL =================== */ .clients { display: flex; flex-direction: column; gap: 64px; padding: 110px 40px; } .clients__head { display: flex; flex-direction: column; gap: 18px; max-width: 665px; } .clients__index { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 1.5px; color: var(--muted); } .clients__title { font-size: 56px; font-weight: 600; letter-spacing: -1.8px; line-height: 1.05; color: var(--ink); max-width: 655px; } .clients__body { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 586px; } .clients__brands { display: flex; flex-direction: column; gap: 8px; max-width: 540px; } .clients__brands-label { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 1.5px; color: var(--muted); } .clients__brands-list { font-size: 19px; font-weight: 500; line-height: 1.4; color: var(--ink); } /* --- marquee (HMbYv) --- */ .marquee { overflow: hidden; width: 100%; } .marquee__track { display: flex; gap: 20px; width: max-content; /* duration is set per-track in logos.js so the SPEED stays constant no matter how many logos are in the list */ animation: logo-marquee var(--marquee-duration, 60s) linear infinite; } .marquee__track--reverse { animation-direction: reverse; } /* scrolls left→right */ .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes logo-marquee { to { transform: translateX(calc(-1 * var(--shift, 50%))); } } .logo-chip { display: inline-flex; align-items: center; gap: 18px; flex-shrink: 0; padding: 34px 44px 34px 40px; border-radius: 24px; background: var(--paper-2); } .logo-chip__mark, .logo-chip__img { width: 44px; height: 44px; display: block; color: var(--ink); flex-shrink: 0; } .logo-chip__img { object-fit: contain; } .logo-chip__name { font-size: 30px; font-weight: 700; letter-spacing: -0.8px; color: var(--ink); white-space: nowrap; } /* Image-only chips (real client logos): every chip is the SAME width, and each logo (margins trimmed in pre-processing) renders at the SAME height, centred, so they read as uniform. Ultra-wide wordmarks cap at the chip width. */ .logo-chip--img { width: 300px; justify-content: center; padding: 30px 24px; } .logo-chip--img .logo-chip__img { width: auto; height: 40px; /* uniform logo height — the key uniformity cue */ max-width: 100%; object-fit: contain; } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* =================== SECTION 5 — TEAM EXPERIENCE =================== */ .team { display: flex; flex-direction: column; gap: 48px; padding: 110px 40px; } .team__header { display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 880fr); align-items: start; } .team__index { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 1.5px; color: var(--muted); } .team__statement { display: flex; flex-direction: column; } .team__lead, .team__emph { font-size: 44px; font-weight: 500; letter-spacing: -1.5px; line-height: 1.14; } .team__lead { color: var(--faint); } .team__emph { color: var(--ink); } .team__showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; } /* --- featured card (G3SOI1) --- */ .featured { position: relative; overflow: hidden; border-radius: 24px; min-height: 660px; } .featured__bg { position: absolute; inset: 0; background: radial-gradient(circle at 80% 12%, #43251a 0%, #0c0b0a 72%); } .featured__bg--photos { background: #0c0b0a; } .featured__shot { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; } .featured__shot.is-active { opacity: 1; } .featured__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 55%); } .featured__content { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 40px; } .featured__badges { display: flex; justify-content: space-between; } .pill-ghost { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 1.5px; color: var(--text-inverse); } .featured__caption { display: flex; flex-direction: column; gap: 14px; } .featured__meta { font-size: 16px; color: var(--text-inverse-2); } .featured__title { font-size: 40px; font-weight: 600; letter-spacing: -1.5px; line-height: 1.05; color: var(--text-inverse); } /* --- right column cards --- */ .team__right { display: flex; flex-direction: column; gap: 28px; min-height: 660px; } .card { border-radius: 24px; background: rgb(245, 244, 240); border: 1px solid var(--line); padding: 32px 36px; } .card--titles { flex: 1; display: flex; flex-direction: column; } .card__label { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 1.5px; color: var(--muted); } .titles { list-style: none; } .titles__row { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line); } .titles__row:last-child { border-bottom: none; } .titles__name { font-size: 24px; font-weight: 500; letter-spacing: -0.4px; color: var(--ink); } .titles__plat { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 1px; color: var(--muted); } .card--platforms { display: flex; flex-direction: column; gap: 16px; } .card__title { font-size: 28px; font-weight: 600; letter-spacing: -0.8px; color: var(--ink); } .card__desc { font-size: 16px; line-height: 1.5; color: var(--muted); } .card__tags { display: flex; flex-wrap: wrap; gap: 10px; } .tag { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px; background: var(--paper); border: 1px solid #d9c3a8; font-size: 14px; font-weight: 500; color: var(--ink); } /* =================== SECTION 6 — CAPABILITIES =================== */ .caps { display: flex; flex-direction: column; gap: 64px; padding: 110px 40px; } .caps__head { display: flex; flex-direction: column; gap: 28px; } .caps__index { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 1.5px; color: var(--muted); } .caps__head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; } .caps__title { font-size: 56px; font-weight: 600; letter-spacing: -1.8px; line-height: 1; color: var(--ink); } .caps__desc { max-width: 424px; font-size: 16px; line-height: 1.5; color: var(--muted); } .caps__divider { height: 1px; background: var(--line); } .caps__body { display: grid; grid-template-columns: minmax(0, 483fr) minmax(0, 793fr); column-gap: 84px; align-items: start; } .caps__left { display: flex; flex-direction: column; gap: 28px; } .caps__image { position: relative; /* slideshow container (#capsImage) */ height: 258px; border-radius: 24px; overflow: hidden; /* clip the crossfading stills to rounded corners */ background: #0c0b0a; } .caps__feature-title { font-size: 48px; font-weight: 600; letter-spacing: -1.5px; line-height: 1; color: var(--ink); } .caps__feature-desc { font-size: 17px; line-height: 1.5; color: var(--muted); } .caps__list { list-style: none; border-bottom: 1px solid var(--line); } .cap-row { display: flex; align-items: center; padding: 24px 0; border-top: 1px solid var(--line); } .cap-row__num { width: 240px; padding-left: 24px; flex-shrink: 0; } .cap-pill { display: inline-flex; align-items: center; padding: 7px 18px; border-radius: 999px; border: 1px solid var(--border-strong); font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 1px; color: var(--ink); } .cap-row__title { font-size: 24px; font-weight: 600; letter-spacing: -0.4px; color: var(--ink); } /* =================== SECTION 7 — ENGAGEMENT =================== */ .eng { display: flex; flex-direction: column; gap: 56px; padding: 110px 40px; } .eng__head { display: flex; flex-direction: column; gap: 28px; } .eng__index { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 1.5px; color: var(--muted); } .eng__head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; } .eng__title { font-size: 56px; font-weight: 600; letter-spacing: -1.8px; line-height: 1; color: var(--ink); } .eng__desc { max-width: 424px; font-size: 16px; line-height: 1.5; color: var(--muted); } .eng__divider { height: 1px; background: var(--line); } .eng__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .eng-card { display: flex; flex-direction: column; min-height: 560px; padding: 36px 32px 40px; border-radius: 16px; border: 1px solid var(--line); } .eng-card--light { background: var(--paper-2); } .eng-card--dark { background: #0e0d0c; border-color: #0e0d0c; } .eng-card__top { display: flex; flex-direction: column; gap: 12px; } .eng-card__name { font-size: 28px; font-weight: 600; letter-spacing: -0.8px; color: var(--ink); } .eng-card__desc { font-size: 16px; line-height: 1.5; color: var(--muted); } .eng-card__div { height: 1px; margin-top: 14px; background: var(--line); } .eng-card__label { margin-top: auto; /* pushes label + divider + list to the bottom */ font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 1.5px; color: var(--charcoal); } .eng-card__list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 22px; } .eng-item { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--muted); } .eng-star { width: 17px; height: 17px; flex-shrink: 0; fill: currentColor; } /* dark card overrides */ .eng-card--dark .eng-card__name { color: var(--paper); } .eng-card--dark .eng-card__desc { color: var(--faint); } .eng-card--dark .eng-card__div { background: rgba(255, 255, 255, 0.12); } .eng-card--dark .eng-card__label { color: var(--faint); } .eng-card--dark .eng-item { color: var(--paper); } .eng-card--dark .eng-star { color: var(--copper); } /* =================== SECTION 8 — FAQ =================== */ .faq { display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 780fr); column-gap: 100px; align-items: start; padding: 64px 40px 40px; } .faq__left { display: flex; flex-direction: column; justify-content: space-between; gap: 60px; min-height: 260px; } .faq__head { display: flex; flex-direction: column; gap: 16px; } .faq__idx { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 1.5px; color: var(--muted); } .faq__title { font-size: 56px; font-weight: 600; letter-spacing: -1.8px; line-height: 1; color: var(--ink); } .faq__ask { display: flex; align-items: center; gap: 28px; } .faq__ask-btn { display: inline-flex; align-items: center; justify-content: center; padding: 18px 30px; border-radius: 999px; border: none; background: var(--ink); color: var(--paper); font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; white-space: nowrap; } .faq__note { max-width: 230px; font-size: 16px; line-height: 1.5; color: var(--muted); } /* --- accordion items --- */ .faq-item { padding: 36px 0; border-top: 1px solid var(--line); } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; width: 100%; padding: 0; background: none; border: none; font-family: inherit; text-align: left; cursor: pointer; } .faq-item__q { font-size: 26px; font-weight: 500; letter-spacing: -0.6px; line-height: 1.15; color: var(--ink); } .faq-item__toggle { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 12px; } .faq-arrow { width: 20px; height: 20px; color: var(--ink); display: block; transition: transform 0.25s ease; } .faq-item.is-open .faq-arrow { transform: rotate(180deg); } /* plus / minus glyph (mobile) — vertical bar hidden when open => minus */ .faq-pm { display: none; position: relative; width: 20px; height: 20px; flex-shrink: 0; } .faq-pm::before, .faq-pm::after { content: ""; position: absolute; background: var(--ink); } .faq-pm::before { left: 0; right: 0; top: 9px; height: 2px; } .faq-pm::after { top: 0; bottom: 0; left: 9px; width: 2px; } .faq-item.is-open .faq-pm::after { display: none; } .faq-item__a { display: none; padding: 20px 92px 0 0; font-size: 18px; line-height: 1.55; color: var(--muted); } .faq-item.is-open .faq-item__a { display: block; } /* =================== SECTION 9 — CONTACT =================== */ .contact { display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 760fr); column-gap: 80px; align-items: start; padding: 110px 40px 120px; } .contact__left { display: flex; flex-direction: column; gap: 28px; } .contact__idx { font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 1.5px; color: var(--muted); } .contact__title { font-size: 58px; font-weight: 600; letter-spacing: -2px; line-height: 1.02; color: var(--ink); } .contact__body { max-width: 440px; font-size: 18px; line-height: 1.55; color: var(--muted); } .contact__form { display: flex; flex-direction: column; gap: 36px; } .contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .field { display: flex; flex-direction: column; gap: 14px; } .field__label { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 1.5px; color: var(--muted); } .field input { border: none; border-bottom: 1px solid var(--line); background: none; padding: 0 0 14px; font-family: inherit; font-size: 19px; color: var(--ink); } .field input::placeholder { color: var(--faint); } .field input:focus { outline: none; border-bottom-color: var(--ink); } .contact__cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 16px 16px 16px 28px; border: none; border-radius: 999px; background: var(--ink); cursor: pointer; } .contact__cta-label { font-family: inherit; font-size: 18px; font-weight: 600; color: var(--paper); } .contact__cta-arrow { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; background: var(--ember); } .contact__cta-arrow svg { width: 18px; height: 18px; color: var(--paper); } .contact__cta[disabled] { opacity: 0.6; cursor: progress; } /* Web3Forms honeypot — must stay invisible to humans */ .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Submit feedback message */ .contact__status { margin-top: -12px; font-size: 15px; line-height: 1.5; font-weight: 500; } .contact__status:empty { display: none; } .contact__status--success { color: #1f7a3d; } .contact__status--error { color: #c0392b; } /* =================== FOOTER =================== */ .footer { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 72px 40px 40px; background: var(--paper); } .footer__wordmark { width: 100%; display: flex; justify-content: center; overflow: hidden; } .footer__mark { font-size: clamp(80px, 12.5vw, 180px); font-weight: 600; letter-spacing: -8px; line-height: 0.82; white-space: nowrap; background: linear-gradient(to bottom, #cdcdcd, rgba(205, 205, 205, 0)); -webkit-background-clip: text; background-clip: text; color: transparent; } .footer__bot { width: 100%; display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid #ede6dc; } .footer__copy { font-size: 14px; color: var(--faint); } .footer__links { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 1.5px; color: var(--muted); } /* =================== MOBILE — SVFyj (402) =================== */ @media (max-width: 767px) { .nav { padding: 18px 20px; } .logo__word { font-size: 24px; } .logo__tm { font-size: 11px; } .nav__links { display: none; } .menu-pill { gap: 8px; padding: 10px 18px 10px 14px; font-size: 15px; } /* --- Menu overlay: near-fullscreen card on phones --- */ .menu { justify-content: stretch; } .menu__panel { width: calc(100vw - 24px); height: calc(100vh - 24px); height: calc(100dvh - 24px); margin: 12px; padding: 24px; /* slide up from the bottom feels more natural full-width */ transform: translateY(calc(100% + 24px)); } .menu.is-open .menu__panel { transform: translateY(0); } .menu__close { gap: 10px; font-size: 17px; } .menu__close svg { width: 22px; height: 22px; } .menu__link { padding: 15px 0; font-size: 36px; letter-spacing: -1px; } .menu__footer { padding-top: 20px; } .menu__mail { gap: 7px; font-size: 12px; } .menu__mail svg { width: 14px; height: 14px; } /* --- Hero (ZApLT) mobile --- */ .hero-c { padding: 48px 0 44px; } .hero-c__inner { gap: 22px; padding: 0 24px; } .hero-c__title { letter-spacing: -1.5px; } .hero-c__sub { font-size: 16px; } .hero-marquee { margin-top: 28px; } /* Scale the logo chips down on phones (applies to both marquees) */ .logo-chip { gap: 12px; padding: 20px 26px; border-radius: 18px; } .logo-chip__mark, .logo-chip__img { width: 30px; height: 30px; } .logo-chip__name { font-size: 21px; } /* Image-only chips: same fixed-width container + bounding box on mobile */ .logo-chip--img { width: 210px; padding: 22px 18px; } .logo-chip--img .logo-chip__img { width: auto; height: 30px; max-width: 100%; } /* --- Meta strip mobile: two items split left & right (3rd hidden) --- */ .meta-strip { gap: 12px; padding: 16px 20px; } /* row + space-between from base */ .meta-strip span { font-size: 11px; letter-spacing: 1px; } .meta-strip span:nth-child(3) { display: none; } /* hide COMMERCIALS · FILMS on mobile */ .wordmark { padding: 28px 0; } .wordmark__text { font-size: clamp(40px, 11.4vw, 52px); letter-spacing: -2.5px; } /* --- S01 Studio: single-column stack --- */ .studio { display: flex; flex-direction: column; gap: 32px; padding: 64px 24px; } .studio__index { font-size: 12px; } .studio__statement { gap: 2px; } .studio__lead, .studio__emph { font-size: 30px; letter-spacing: -1px; } .studio__center { gap: 32px; } .studio__body { gap: 20px; padding: 0; } .studio__b1, .studio__b2 { font-size: 16px; } .studio__portrait { height: 300px; } .studio__stats { align-self: stretch; max-width: none; gap: 18px; } .studio__stats-label { font-size: 16px; } .studio__stats-row { gap: 32px; } .stat { gap: 8px; } .stat__value { font-size: 38px; } .stat__label { font-size: 14px; } /* --- S03 Logo Wall / S04 Clients --- */ .clients { gap: 24px; padding: 64px 24px; } .clients__head { gap: 24px; max-width: none; } .clients__index { font-size: 12px; } .clients__title { font-size: 34px; letter-spacing: -1.2px; max-width: none; } .clients__body { font-size: 16px; max-width: none; } .clients__brands { max-width: none; } .clients__brands-label { font-size: 11px; } .clients__brands-list { font-size: 17px; } .marquee__track { gap: 12px; } .logo-chip { gap: 12px; padding: 18px 22px; border-radius: 16px; } .logo-chip__mark, .logo-chip__img { width: 26px; height: 26px; } .logo-chip__name { font-size: 18px; letter-spacing: -0.5px; } /* --- S03 Team Experience --- */ .team { gap: 28px; padding: 64px 24px; } .team__header { display: flex; flex-direction: column; gap: 28px; } .team__index { font-size: 12px; } .team__statement { gap: 2px; } .team__lead, .team__emph { font-size: 30px; letter-spacing: -1px; } .team__showcase { grid-template-columns: 1fr; gap: 28px; } .featured { min-height: 380px; border-radius: 20px; } .featured__content { padding: 26px; } .pill-ghost { padding: 8px 14px; font-size: 11px; } .featured__caption { gap: 12px; } .featured__meta { font-size: 15px; } .featured__title { font-size: 28px; letter-spacing: -1px; line-height: 1.06; } .team__right { min-height: 0; gap: 28px; } .card { border-radius: 20px; padding: 26px 24px; } .titles__row { padding: 15px 0; } .titles__name { font-size: 19px; letter-spacing: -0.3px; } .titles__plat { font-size: 12px; } .card__title { font-size: 24px; letter-spacing: -0.6px; } .card__desc { font-size: 15px; } /* --- S05 Capabilities --- */ .caps { gap: 28px; padding: 64px 24px; } .caps__head { gap: 16px; } .caps__index { font-size: 12px; } .caps__head-row { flex-direction: column; align-items: stretch; gap: 16px; } .caps__title { font-size: 34px; letter-spacing: -1.2px; } .caps__desc { max-width: none; } .caps__body { grid-template-columns: 1fr; row-gap: 28px; } .caps__left { gap: 28px; } .caps__image { height: 240px; } .caps__feature-title { font-size: 30px; letter-spacing: -1.2px; } .caps__feature-desc { font-size: 16px; } .caps__list { border-bottom: none; } .cap-row { gap: 16px; padding: 20px 0; } .cap-row__num { width: auto; padding-left: 0; } .cap-pill { padding: 6px 15px; font-size: 12px; } .cap-row__title { font-size: 20px; } /* --- S06 Engagement --- */ .eng { gap: 28px; padding: 64px 24px; } .eng__head { gap: 16px; } .eng__index { font-size: 12px; } .eng__head-row { flex-direction: column; align-items: stretch; gap: 16px; } .eng__title { font-size: 34px; letter-spacing: -1.2px; } .eng__desc { max-width: none; } .eng__cards { grid-template-columns: 1fr; gap: 16px; } .eng-card { min-height: 0; padding: 28px 24px; } .eng-card__label { margin-top: 24px; } /* normal gap, not bottom-anchored, on phones */ .eng-card__top { gap: 10px; } .eng-card__name { font-size: 24px; letter-spacing: -0.6px; } .eng-card__desc { font-size: 15px; } .eng-item { font-size: 15px; } .eng-star { width: 15px; height: 15px; } /* --- S07 FAQ --- */ .faq { grid-template-columns: 1fr; row-gap: 28px; padding: 64px 24px; } .faq__left { min-height: 0; justify-content: flex-start; gap: 28px; } .faq__head { gap: 12px; } .faq__idx { font-size: 12px; } .faq__title { font-size: 32px; letter-spacing: -1.2px; line-height: 1.02; } .faq__ask { gap: 16px; } .faq__ask-btn { padding: 14px 24px; font-size: 16px; } .faq__note { max-width: none; font-size: 14px; } .faq-item { padding: 24px 0; } .faq-item__head { gap: 16px; } .faq-item__q { font-size: 20px; letter-spacing: -0.4px; line-height: 1.2; } /* mobile toggle = plain plus/minus, no bordered box */ .faq-item__toggle { width: auto; height: auto; border: none; border-radius: 0; } .faq-arrow { display: none; } .faq-pm { display: block; } .faq-item__a { padding: 14px 0 0 0; font-size: 15px; } /* --- S08 Contact --- */ .contact { grid-template-columns: 1fr; row-gap: 40px; padding: 64px 24px 72px; } .contact__left { gap: 20px; } .contact__idx { font-size: 12px; } .contact__title { font-size: 34px; letter-spacing: -1.4px; line-height: 1.04; } .contact__body { max-width: none; font-size: 16px; } .contact__form { gap: 28px; } .contact__row { grid-template-columns: 1fr; gap: 28px; } .field { gap: 12px; } .field input { padding: 0 0 12px; font-size: 18px; } .contact__cta { padding: 12px 12px 12px 24px; } .contact__cta-label { font-size: 17px; } .contact__cta-arrow { width: 36px; height: 36px; } .contact__cta-arrow svg { width: 16px; height: 16px; } /* --- Footer --- */ .footer { gap: 24px; padding: 56px 24px 40px; } .footer__mark { font-size: clamp(40px, 11.4vw, 46px); letter-spacing: -2.5px; } .footer__bot { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 24px; border-top-color: var(--border); } }