/* ========================================================= Azman — Creative Director Portfolio Theme: #0f0f0f + Orange Perf rules: - No filter/backdrop-filter. Glows = radial gradients. - Only transform/opacity animate. JS writes CSS vars. - Hover-only effects gated by @media (hover:hover). - Mobile drops tilt, cursor, magnetic, pinned horizontal scroll. ========================================================= */ /* loader lettering: only the glyphs the loader uses are downloaded (text=) */ @import url("https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Noto+Nastaliq+Urdu&family=Shrikhand&family=Kalam:wght@700&family=Pacifico&family=Rock+Salt&family=Knewave&family=Gulzar&family=Gloria+Hallelujah&family=Amita:wght@700&family=Sedgwick+Ave+Display&family=Permanent+Marker&display=swap&text=%20ABCHIMNSZabchimnoyz%D8%A2%D8%A7%D8%B2%D9%85%D9%86%D9%88%DA%BA%DB%81%DB%8C%E0%A4%81%E0%A4%82%E0%A4%85%E0%A4%9C%E0%A4%A8%E0%A4%AE%E0%A4%B9%E0%A4%BC%E0%A4%BE%E0%A5%82%E0%A5%88"); :root { --bg: #fbfcf8; --bg-2: #f1f2ed; --bg-3: #e7e9e2; --line: rgba(15, 15, 15, 0.1); --line-strong: rgba(15, 15, 15, 0.18); --text: #0f0f0f; --muted: #62645f; --orange: #ff6a00; --orange-2: #ff8a2a; --orange-dark: #c24e00; --orange-deep: #8f3800; --font-display: "Poppins", "Inter", system-ui, sans-serif; --font-body: "Poppins", "Inter", system-ui, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; --font-poppins: "Poppins", var(--font-display); --radius: 18px; --radius-sm: 12px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --container: 1200px; --nav-h: 76px; --cream: #f2eee5; } @font-face { font-family: "Poppins"; src: url("Fonts/Poppins/Poppins-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("Fonts/Poppins/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("Fonts/Poppins/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("Fonts/Poppins/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } strong, b { font-weight: 600; } /* cap native bold at semibold, nothing on this site goes heavier */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); } html { scrollbar-width: none; } html::-webkit-scrollbar { width: 0; height: 0; display: none; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 400; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } html, body { width: 100%; max-width: 100%; } body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } body.has-cursor .cursor, body.has-cursor .cursor-ring { opacity: 1; } body.has-cursor.cursor-dock-hidden .cursor, body.has-cursor.cursor-dock-hidden .cursor-ring { opacity: 0 !important; visibility: hidden; } body.has-cursor.cursor-dock-hidden, body.has-cursor.cursor-dock-hidden #bookingDock, body.has-cursor.cursor-dock-hidden #bookingDock * { cursor: auto !important; } .cursor, .cursor-ring { transition: opacity .28s ease, visibility .28s ease, transform .25s cubic-bezier(.22,1,.36,1); } body.menu-open { overflow: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; } ul, ol { list-style: none; } button { font: inherit; border: 0; background: none; color: inherit; cursor: pointer; } .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; } .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; } @media (max-width: 600px) { .container { width: calc(100% - 36px); } } /* ---------- Loader ---------- */ .loader { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: grid; place-content: center; gap: 24px; transition: opacity 0.5s var(--ease), visibility 0.5s; } .loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .loader--shared { color: #0f0f0f; background: #EEFE41; padding: 28px 34px; display: flex; flex-direction: column; justify-content: center; place-content: normal; } .loader--shared.is-done { transform: translate3d(0, -100%, 0); opacity: 1; visibility: hidden; transition: transform .8s cubic-bezier(.76,0,.24,1), visibility 0s linear .8s; } .loader[aria-hidden="true"] { display: none !important; } .loader__word-wrap { overflow: hidden; width: 100%; margin: auto; text-align: center; } .loader__words { --lw: clamp(48px, 10vw, 150px); display: block; min-height: 1em; color: #0f0f0f; text-align: center; font-size: var(--lw); font-weight: 400; line-height: 1.35; letter-spacing: 0; white-space: nowrap; } /* "I am Azman" in six languages, twice each, every time in a different hand; ends on the brand line */ .loader__words.loader-word--0 { font-family: "Caveat Brush", cursive; font-size: calc(var(--lw) * 1.25); } .loader__words.loader-word--1 { font-family: "Noto Nastaliq Urdu", serif; font-size: var(--lw); line-height: 2.1; } .loader__words.loader-word--2 { font-family: "Shrikhand", cursive; font-size: calc(var(--lw) * 0.95); } .loader__words.loader-word--3 { font-family: "Kalam", cursive; font-weight: 700; font-size: calc(var(--lw) * 1.05); line-height: 1.6; } .loader__words.loader-word--4 { font-family: "Pacifico", cursive; font-size: calc(var(--lw) * 0.95); line-height: 1.6; } .loader__words.loader-word--5 { font-family: "Rock Salt", cursive; font-size: calc(var(--lw) * 0.8); line-height: 1.7; } .loader__words.loader-word--6 { font-family: "Knewave", cursive; font-size: calc(var(--lw) * 0.95); } .loader__words.loader-word--7 { font-family: "Gulzar", serif; font-size: var(--lw); line-height: 1.9; } .loader__words.loader-word--8 { font-family: "Gloria Hallelujah", cursive; font-size: var(--lw); line-height: 1.6; } .loader__words.loader-word--9 { font-family: "Amita", cursive; font-weight: 700; font-size: calc(var(--lw) * 1.05); line-height: 1.7; } .loader__words.loader-word--10 { font-family: "Sedgwick Ave Display", cursive; font-size: calc(var(--lw) * 1.2); } .loader__words.loader-word--11 { font-family: "Permanent Marker", cursive; font-size: min(calc(var(--lw) * 1.1), 10.4vw); } .loader__words--logo { line-height: 0; } .loader__logo { display: block; width: auto; height: calc(var(--lw) * 1.9); max-width: 100%; margin: 0 auto; object-fit: contain; } .loader__counter { position: absolute; left: 28px; bottom: 14px; width: 3.5ch; color: #0f0f0f; font: 300 clamp(64px, 12vw, 170px)/.8 var(--font-body); letter-spacing: -.08em; white-space: nowrap; } .loader__counter { overflow: hidden; } .loader__counter.counter-step { animation: counterStep .42s cubic-bezier(.16,1,.3,1); } @keyframes counterStep { 0% { opacity: .35; transform: translate3d(0,18%,0); } 48% { opacity: .85; transform: translate3d(0,3%,0); } 78%, 100% { opacity: 1; transform: translate3d(0,0,0); } } @media (max-width: 600px) { .loader--shared { padding: 22px 18px; } .loader__words { --lw: clamp(34px, 10.5vw, 68px); } .loader__logo { height: calc(var(--lw) * 2.4); } .loader__counter { left: 18px; } } .loader__mark { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; } .loader__mark img { width: 84px; height: 84px; object-fit: contain; } .loader__fallback { display: none; font-family: var(--font-display); font-weight: 600; font-size: 32px; color: var(--orange); } .loader__bar { width: 160px; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; } .loader__bar span { display: block; height: 100%; width: 100%; background: var(--orange); transform-origin: left; transform: scaleX(0); animation: load 0.9s var(--ease) forwards; } @keyframes load { to { transform: scaleX(1); } } /* ---------- Scroll progress ---------- */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: linear-gradient(90deg, var(--orange-2), var(--orange)); transform-origin: left; transform: scaleX(var(--p, 0)); will-change: transform; pointer-events: none; } /* ---------- Cursor (desktop only) ---------- */ .cursor, .cursor-ring { display: none; } body.has-cursor .cursor, body.has-cursor .cursor-ring { display: block; } .cursor { position: fixed; top: 0; left: 0; z-index: 9000; width: 32px; height: 32px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; will-change: transform; transition: transform .25s cubic-bezier(.22,1,.36,1); } .cursor, .cursor-ring { transition: opacity .35s ease, transform .25s cubic-bezier(.22,1,.36,1); } body.cursor-page-exit .cursor, body.cursor-page-exit .cursor-ring { opacity: 0; } body.cursor-page-enter .cursor, body.cursor-page-enter .cursor-ring { opacity: 0; } body:not(.cursor-page-enter) .cursor, body:not(.cursor-page-enter) .cursor-ring { opacity: 1; } .cursor-ring { position: fixed; top: 0; left: 0; z-index: 8999; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; pointer-events: none; will-change: transform; transition: background-color .3s; } .cursor-ring.is-hover { background: transparent; border-color: transparent; } /* ---------- Background ---------- */ .bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .bg__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; -webkit-mask-image: radial-gradient(ellipse at 50% 20%, black 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 20%, black 20%, transparent 75%); display: none; } .bg__glow { display: none; position: absolute; border-radius: 50%; will-change: transform; transform: translate3d(0, var(--py, 0px), 0); } .bg__glow--1 { width: 70vw; height: 70vw; top: -25vw; right: -25vw; background: radial-gradient(circle, rgba(255,106,0,0.26) 0%, rgba(255,106,0,0.09) 30%, transparent 65%); } .bg__glow--2 { width: 60vw; height: 60vw; bottom: -25vw; left: -20vw; background: radial-gradient(circle, rgba(255,106,0,0.14) 0%, rgba(255,106,0,0.05) 30%, transparent 65%); } @media (max-width: 900px) { .bg__grid { background-size: 56px 56px; } .bg__glow--1 { width: 120vw; height: 120vw; top: -60vw; right: -50vw; } } /* ---------- Typography ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 20px; } .eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,106,0,0.18); } .h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 24px; text-wrap: balance; } .h2--xl { font-size: clamp(34px, 5.2vw, 68px); } .h2 em { color: var(--orange); } .h2 .serif { font-size: 1.08em; } .section { position: relative; padding: clamp(72px, 12vw, 150px) 0; } .section__head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 80px); } .section__head--split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; } .section__note { color: var(--muted); max-width: 320px; font-size: 15px; } @media (max-width: 800px) { .section__head--split { flex-direction: column; align-items: flex-start; gap: 12px; } } /* ---------- Reveal ---------- */ .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* Split-text (heading words) */ [data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; } [data-split] .w > span { display: inline-block; transform: translate3d(0, 110%, 0); transition: transform 0.9s var(--ease); transition-delay: calc(var(--i) * 45ms); will-change: transform; } [data-split].is-visible .w > span { transform: none; will-change: auto; } [data-parallax] { will-change: transform; } /* ========================================================= BUTTONS (3D) ========================================================= */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; font-family: var(--font-display); font-weight: 600; font-size: 15px; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .btn__face { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; width: 100%; border-radius: inherit; transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease); } .btn__swap { overflow: hidden; } .btn__ticker-face { position: relative; display: block !important; overflow: hidden; white-space: nowrap; } .btn__ticker { position: absolute; top: 50%; left: 0; display: flex; flex: none; width: max-content; gap: 0; line-height: 1; white-space: nowrap; animation: ticker 6s linear infinite; will-change: transform; } .btn__ticker > span { display: block; flex: 0 0 auto; width: max-content; padding: 0; margin: 0; } @keyframes ticker { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(-50%, -50%, 0); } } .nav > .btn { width: 190px; height: 56px; border: 1.5px solid var(--text); border-radius: 999px; background: #101010; overflow: visible; box-shadow: 0 7px 0 rgba(255,255,255,.28), 0 15px 26px rgba(0,0,0,.35); transition: transform .3s var(--ease); } .nav > .btn .btn__face { min-height: 56px; padding: 0 16px; overflow: hidden; border: 1.5px solid var(--text); border-radius: inherit; background: #101010; color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transform: translateY(-7px); font-size: 17px; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; } @media (hover: hover) { .nav > .btn:hover { background: #101010; border-color: var(--orange); transform: scale(1.04); box-shadow: 0 7px 0 var(--orange-deep), 0 18px 32px rgba(0,0,0,.4); } .nav > .btn:hover .btn__face { color: var(--orange); border-color: var(--orange); background: #101010; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 22px rgba(255,106,0,.18); transform: translateY(-9px); } } @media (hover: hover) { .nav > .btn:hover { background: #101010; border-color: var(--orange); } .nav > .btn:hover .btn__face { color: var(--orange); } } .footer__cta > .btn { width: 260px; height: 62px; border: 1.5px solid var(--text); border-radius: 999px; background: #101010; overflow: visible; flex: 0 0 auto; align-self: flex-start; margin-left: 0; transition: transform .3s var(--ease); box-shadow: 0 7px 0 rgba(255,255,255,.28), 0 15px 26px rgba(0,0,0,.35); } .footer__cta > .btn .btn__face { min-height: 62px; padding: 0 20px; overflow: hidden; border: 1.5px solid var(--text); border-radius: inherit; background: #101010; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transform: translateY(-7px); font-size: 16px; letter-spacing: .03em; display: flex; align-items: center; justify-content: center; } .footer__cta > .btn:hover { transform: translateX(-300px) scale(1.04); border-color: var(--orange); box-shadow: 0 7px 0 var(--orange-deep), 0 18px 32px rgba(0,0,0,.4); } .footer__cta > .btn:hover .btn__face { color: var(--orange); border-color: var(--orange); background: #101010; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 22px rgba(255,106,0,.18); transform: translateY(-9px); } @media (max-width: 800px) { .footer__cta > .btn { width: 240px; } } .btn__label-stack { display: flex; flex-direction: column; height: 1.2em; line-height: 1.2; transform: translateY(0); transition: transform .4s cubic-bezier(.65,0,.35,1); } .btn__label-stack > span { display: block; height: 1.2em; white-space: nowrap; } @media (hover: hover) { .btn:hover .btn__label-stack { transform: translateY(-100%); } .btn:hover .btn__face { transform: scale(1.025); } } .btn--3d { background: var(--orange-deep); } .btn--3d .btn__face { background: linear-gradient(180deg, var(--orange-2) 0%, var(--orange) 55%, var(--orange-dark) 100%); color: #120800; transform: translateY(-7px); box-shadow: 0 7px 0 var(--orange-deep), 0 12px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.35); } @media (hover: hover) { .btn--3d:hover .btn__face { transform: translateY(-9px); box-shadow: 0 9px 0 var(--orange-deep), 0 18px 34px rgba(0,0,0,0.5), 0 0 40px rgba(255,106,0,0.3), inset 0 1px 0 rgba(255,255,255,0.4); } } .btn--3d:active .btn__face { transform: translateY(-2px); box-shadow: 0 2px 0 var(--orange-deep), 0 4px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.3); } .btn--ghost { background: transparent; } .btn--ghost .btn__face { border: 1px solid var(--line-strong); background: rgba(255,255,255,0.04); color: var(--text); transition: border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.15s; } @media (hover: hover) { .btn--ghost:hover .btn__face { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 30px rgba(255,106,0,0.18); } } .btn--ghost:active .btn__face { transform: scale(0.97); } .btn--sm .btn__face { padding: 11px 20px; font-size: 13px; } .btn--lg .btn__face { padding: 20px 36px; font-size: 16px; } .btn--full { width: 100%; } @media (max-width: 600px) { .btn--lg .btn__face { padding: 18px 26px; font-size: 15px; } } /* Mobile sticky CTA */ .sticky-cta { display: none; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 90; transform: translate3d(0, 120%, 0); transition: transform 0.5s var(--ease); } .sticky-cta.is-visible { transform: none; } @media (max-width: 900px) { .sticky-cta { display: inline-flex; } .sticky-cta .btn__face { padding: 16px; font-size: 15px; } } /* ========================================================= NAV ========================================================= */ .nav { position: fixed; top: 0; left: 50%; right: auto; z-index: 100; display: flex; align-items: center; justify-content: space-between; min-height: 64px; width: 100%; max-width: 1600px; transform: translate3d(-50%, var(--nav-hide-y, 0%), 0); margin: 20px 0 0; padding: 10px 48px; border: 1.5px solid rgba(255,255,255,.9); border-radius: 60px; background: rgba(251,252,248,.72); background-image: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.18) 42%, rgba(255,106,0,.035)); backdrop-filter: blur(6px) saturate(1.45); -webkit-backdrop-filter: blur(6px) saturate(1.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(15,15,15,.12), 0 8px 28px rgba(15,15,15,.08); transition: transform .55s var(--ease); will-change: width, max-width, padding, margin-top, border-radius, background-color, border-color, box-shadow, transform; } .nav::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: calc(var(--glass-progress, 0) * .9); background: radial-gradient(ellipse at 0% 0%, rgba(255,255,255,.78), transparent 24%), radial-gradient(ellipse at 100% 0%, rgba(255,255,255,.5), transparent 22%), radial-gradient(ellipse at 100% 100%, rgba(255,255,255,.42), transparent 24%); background-size: 160% 160%; background-position: calc(var(--glass-progress, 0) * 18%) calc(var(--glass-progress, 0) * 12%); mix-blend-mode: screen; animation: glassCorners 7s ease-in-out infinite alternate; } .nav > * { position: relative; z-index: 1; } @keyframes glassCorners { from { filter: blur(0); transform: scale(1); } to { filter: blur(1.5px); transform: scale(1.008); } } .nav.is-scrolled { padding: 10px 24px 10px 28px; background: rgba(251,252,248,.72); border-color: rgba(255,255,255,.72); color: #0f0f0f; } .nav.is-hidden { --nav-hide-y: -180%; } .nav__logo { display: flex; align-items: center; gap: 12px; position: relative; z-index: 3; } .nav__model-logo { display: flex; align-items: center; justify-content: center; width: auto; height: 26px; overflow: visible; flex: 0 0 auto; background: transparent; border: 0; } .nav__logo img { height: 26px; width: auto; object-fit: contain; pointer-events: none; background: transparent; } .nav__collapsed-logo { cursor: pointer; } .nav__collapsed-logo { opacity: 1; pointer-events: auto; transition: none; } .nav__logo-fallback { display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--orange-2), var(--orange-dark)); color: #120800; font-family: var(--font-display); font-weight: 600; font-size: 15px; } .nav__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; } .nav__links { display: flex; gap: 36px; } .nav__links a { position: relative; font-size: 17px; color: #0f0f0f; font-weight: 400; transition: color 0.3s; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav__links a:hover, .nav__links a.is-active { color: #0f0f0f; } .nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); } .nav__burger { display: none; flex-direction: column; gap: 6px; width: 44px; height: 44px; padding: 10px; justify-content: center; position: relative; z-index: 3; } .nav__burger span { display: block; height: 2px; background: var(--text); transition: transform 0.3s; } .nav__burger.is-open span:first-child { transform: translateY(4px) rotate(45deg); } .nav__burger.is-open span:last-child { transform: translateY(-4px) rotate(-45deg); } @media (max-width: 900px) { :root { --nav-h: 64px; } .nav { padding: 12px 18px; } .nav.is-scrolled { padding: 10px 18px; } .nav__logo img { height: 26px; width: auto; } .nav__logo-fallback { width: 36px; height: 36px; } .nav__links { position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: center; gap: 28px; padding: 40px; background: #101010; transform: translate3d(0, -100%, 0); transition: transform 0.5s var(--ease); will-change: transform; z-index: 2; } .nav__links.is-open { transform: none; } .nav__links a { font-size: 28px; font-family: var(--font-display); font-weight: 600; color: var(--text); } .nav > .btn { display: none; } .nav__burger { display: flex; } } /* ========================================================= HERO ========================================================= */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + 48px) 0 96px; overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 5vw, 80px); align-items: center; position: relative; z-index: 2; } .hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 5.6vw, 82px); line-height: 1.0; letter-spacing: -0.04em; margin-bottom: 26px; } .hero__title .serif { color: var(--orange); font-size: 1.1em; } .hero__title .outline { color: var(--bg); paint-order: stroke fill; -webkit-text-stroke: 4px var(--text); } .hero__sub { font-size: clamp(15px, 1.4vw, 19px); color: var(--muted); max-width: 560px; margin-bottom: 34px; } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; } .hero__meta { display: flex; gap: 28px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; flex-wrap: wrap; } .hero__meta strong { font-family: var(--font-display); color: var(--text); font-size: 18px; margin-right: 6px; } /* Portrait */ .hero__visual { position: relative; transform: translate3d(0, var(--py, 0px), 0); } .portrait { position: relative; border-radius: 24px; overflow: visible; aspect-ratio: 3 / 4; max-width: 440px; margin-left: auto; } .portrait img, .portrait picture { width: 100%; height: 100%; } .portrait img { object-fit: cover; border-radius: 24px; box-shadow: 0 50px 100px rgba(0,0,0,0.6); } .portrait::after { content: ""; position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(180deg, transparent 50%, rgba(15,15,15,0.55)); pointer-events: none; } .portrait__frame { position: absolute; inset: -14px; border: 1px solid rgba(255,106,0,0.35); border-radius: 32px; pointer-events: none; transform: translate3d(12px, 12px, 0); } .portrait__tag { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(160deg, #262626, #171717); border: 1px solid var(--line-strong); box-shadow: 0 24px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1); z-index: 2; animation: floaty 7s ease-in-out infinite; will-change: transform; } .portrait__tag--1 { left: -40px; top: 12%; } .portrait__tag--2 { right: -28px; bottom: 14%; animation-duration: 9s; animation-direction: reverse; } .portrait__tag--accent { background: linear-gradient(160deg, var(--orange-2), var(--orange-dark)); border-color: rgba(255,200,150,0.4); } .portrait__tag--accent .portrait__tag-label { color: rgba(18,8,0,0.7); } .portrait__tag--accent .portrait__tag-value { color: #120800; } .portrait__tag-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .portrait__tag-value { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.03em; } @keyframes floaty { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-12px,0); } } .hero__stamp { position: absolute; width: 140px; height: 140px; left: -20px; bottom: -30px; animation: spin 18s linear infinite; will-change: transform; } .hero__stamp svg { width: 100%; height: 100%; } .hero__stamp text { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.22em; fill: var(--orange); } @keyframes spin { to { transform: rotate(360deg); } } .hero__scroll { position: absolute; bottom: 24px; left: 50%; margin-left: -20px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .hero__scroll-line { width: 1px; height: 48px; background: linear-gradient(var(--orange), transparent); transform-origin: top; animation: scrollLine 2s ease-in-out infinite; } @keyframes scrollLine { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------- Hero Video ---------- */ .hero-video { position: relative; z-index: 1; width: 100%; margin-top: 10px; padding: 0 0 clamp(64px, 9vw, 120px); } .hero-video .container { width: calc(100% - 40px); max-width: none; } .hero-video__frame { position: relative; width: 100%; min-height: clamp(260px, 52vw, 680px); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 0 0 32px 32px; background: var(--bg-2); } .hero-video__media { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover; } .hero-video__label { position: absolute; left: 20px; bottom: 18px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(15,15,15,.72); color: #fff; font: 600 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; } .hero-video__label span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,106,0,.18); } @media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } .hero__visual { order: -1; } .portrait { max-width: 320px; margin: 0 auto; } .hero__content { text-align: center; } .hero__sub { margin-left: auto; margin-right: auto; } .hero__cta, .hero__meta { justify-content: center; } .hero__stamp { display: none; } } @media (max-width: 600px) { .hero { padding: calc(var(--nav-h) + 28px) 0 72px; } .hero__title { font-size: clamp(36px, 10.5vw, 48px); } .portrait { max-width: 260px; } .portrait__tag { padding: 10px 14px; } .portrait__tag--1 { left: -22px; } .portrait__tag--2 { right: -16px; } .portrait__tag-value { font-size: 20px; } .portrait__frame { inset: -10px; } .hero__meta { gap: 18px; } .hero__scroll { display: none; } .hero__orb { width: 140vw; height: 140vw; right: -40vw; margin-top: -70vw; } } /* ========================================================= MARQUEE ========================================================= */ .marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); overflow: hidden; padding: 18px 0; } .marquee__track { display: flex; gap: 40px; width: max-content; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: 0.02em; white-space: nowrap; will-change: transform; transform: translate3d(var(--x, 0px), 0, 0); } .marquee__track i { color: var(--orange); font-style: normal; } @media (max-width: 600px) { .marquee__track { font-size: 16px; gap: 28px; } } /* ========================================================= STATEMENT (scroll-linked words) ========================================================= */ .statement { padding: clamp(80px, 14vw, 180px) 0; } .statement__text { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.6vw, 48px); line-height: 1.25; letter-spacing: -0.02em; max-width: 1000px; } .statement__text .w { color: rgba(244,242,238,0.18); transition: color 0.35s var(--ease); } .statement__text .w.is-on { color: var(--text); } .statement__text .w.is-on.hl { color: var(--orange); } /* ========================================================= SELECTED WORK — pinned horizontal scroll (desktop), native swipe carousel (mobile) ========================================================= */ .work { position: relative; padding-top: clamp(72px, 12vw, 150px); } .work__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; } @media (max-width: 800px) { .work__head { flex-direction: column; align-items: flex-start; gap: 16px; } } .work__sticky { position: relative; } .work__track { display: flex; gap: 20px; will-change: transform; transform: translate3d(var(--tx, 0px), 0, 0); padding-left: max(24px, calc((100vw - var(--container)) / 2)); padding-right: 24px; } @media (min-width: 901px) { .work__track { position: sticky; top: 15vh; } } .case { position: relative; flex: 0 0 auto; width: min(560px, 78vw); height: min(560px, 68vh); border-radius: 28px; overflow: hidden; border: 1px solid rgba(15,15,15,.12); background: #fff; color: #0f0f0f; transition: border-color 0.4s, box-shadow 0.4s; display: block; } @media (hover: hover) { .case:hover { border-color: rgba(255,106,0,0.5); box-shadow: 0 50px 90px rgba(0,0,0,0.6); } .case:hover .case__media { transform: scale(1.05); } .case:hover .case__glyph { transform: rotate(10deg) scale(1.1); color: var(--orange); } .case:hover .case__link { color: var(--orange); border-color: var(--orange); transform: translateX(4px); } } .case__media { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 0.9s var(--ease); will-change: transform; } .case--a .case__media { background: radial-gradient(circle at 30% 30%, rgba(255,106,0,0.55), transparent 55%), linear-gradient(160deg, #2a1608, #0f0f0f); } .case--b .case__media { background: radial-gradient(circle at 70% 20%, rgba(255,138,42,0.5), transparent 55%), linear-gradient(160deg, #1c1c1c, #0f0f0f); } .case--c .case__media { background: radial-gradient(circle at 50% 80%, rgba(255,106,0,0.45), transparent 55%), linear-gradient(200deg, #221410, #0f0f0f); } .case--d .case__media { background: radial-gradient(circle at 20% 50%, rgba(255,106,0,0.4), transparent 40%), radial-gradient(circle at 80% 50%, rgba(255,138,42,0.3), transparent 40%), linear-gradient(160deg, #1a1a1a, #0f0f0f); } .work .case__media { background: #fff; } .work .case__glyph { color: rgba(15,15,15,.18); } .work .case__wordmark { color: rgba(15,15,15,.62); } .work .case__cat, .work .case__link { color: var(--orange); } .case__glyph { font-size: clamp(90px, 12vw, 180px); color: rgba(255,106,0,0.32); transition: transform 0.9s var(--ease), color 0.4s; line-height: 1; } .case__wordmark { position: absolute; top: 28px; left: 28px; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.24em; font-size: 13px; color: rgba(244,242,238,0.6); } .case__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; background: linear-gradient(transparent, rgba(255,255,255,.96) 55%); } .case__cat { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); } .case h3 { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -0.03em; margin: 8px 0 8px; } .case p { color: #62645f; font-size: 15px; max-width: 420px; } .case__link { display: inline-flex; align-items: center; width: fit-content; margin-top: 16px; padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; transition: color 0.3s, border-color .3s, transform .3s var(--ease); } @media (hover: hover) { .case__link:hover { color: #0f0f0f; background: var(--orange); border-color: var(--orange); } } .case--more { width: min(360px, 70vw); background: linear-gradient(160deg, var(--orange-2), var(--orange-dark)); border-color: rgba(255,200,150,0.4); display: grid; place-items: center; text-align: center; } .case__more { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #120800; padding: 24px; } .case__more-num { font-family: var(--font-display); font-weight: 600; font-size: 72px; line-height: 1; letter-spacing: -0.04em; } .case__more .btn { margin-top: 24px; } /* Mobile: native horizontal snap scroll instead of pinned */ @media (max-width: 900px) { .work__track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 18px 24px; transform: none; will-change: auto; gap: 14px; } .work__track::-webkit-scrollbar { display: none; } .case { scroll-snap-align: center; width: 82vw; height: 460px; } .case--more { width: 70vw; } .case__body { padding: 24px; } .case h3 { font-size: 24px; } } /* ========================================================= TESTIMONIALS ========================================================= */ .testi__head { max-width: none; text-align: center; margin-left: auto; margin-right: auto; } .testi__title { font-family: var(--font-poppins); font-weight: 400; font-size: clamp(38px, 5.5vw, 64px); line-height: 1.08; letter-spacing: -0.06em; max-width: 900px; margin-left: auto; margin-right: auto; } .trusted__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 44px; margin-top: clamp(28px, 4vw, 44px); } .trusted__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-poppins); font-weight: 600; font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -0.005em; color: var(--muted); } .trusted__glyph { color: var(--muted); font-size: 1.15em; opacity: 0.7; } .testi__stars { color: var(--orange); font-size: 15px; letter-spacing: 3px; margin-bottom: 18px; } .testi__featured { display: grid; grid-template-columns: 1.5fr 1fr; padding: 0; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); overflow: hidden; margin-bottom: 20px; } .testi__featured-body { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; } .testi__featured-quote { margin: 0 0 28px; max-width: 60ch; font-family: var(--font-display); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; letter-spacing: -0.005em; } .testi__by { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .testi__by-name { display: flex; flex-direction: column; gap: 2px; } .testi__by-name strong { font-family: var(--font-display); font-weight: 600; } .testi__by-name span { font-size: 13px; color: var(--muted); } .testi__brand { display: flex; align-items: center; opacity: 0.9; } .testi__brand-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: 0.01em; color: var(--text); } .testi__visual-glyph { color: var(--orange); } .testi__visual { position: relative; min-height: 260px; background: var(--bg-2); overflow: hidden; } .testi__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .quote { position: relative; padding: 28px 26px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); transition: border-color 0.3s, box-shadow 0.3s; } @media (hover: hover) { .quote:hover { border-color: rgba(255,106,0,0.5); box-shadow: 0 16px 36px rgba(0,0,0,.08); } } .quote p { font-size: 15px; line-height: 1.6; margin-bottom: 22px; } .quote footer { display: flex; flex-direction: column; gap: 2px; } .quote strong { font-family: var(--font-display); font-weight: 600; } .quote span { font-size: 13px; color: var(--muted); } @media (max-width: 1200px) and (min-width: 901px) { .testi__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .testi__featured { grid-template-columns: 1fr; } .testi__featured-body { padding: 32px 26px; } .testi__visual { min-height: 200px; order: -1; } .testi__grid { grid-template-columns: 1fr; } } /* ========================================================= BOOK ========================================================= */ .book { overflow: hidden; } .book__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; } .book__inner--center { grid-template-columns: 1fr; text-align: center; } .book__inner--center .book__copy { max-width: 760px; margin: 0 auto; } .book__inner--center .hero__cta { justify-content: center; margin-top: 24px; } .book__copy > p { color: var(--muted); font-size: 17px; margin-bottom: 28px; } .book__perks { display: flex; flex-direction: column; gap: 12px; } .book__perks li { display: flex; align-items: center; gap: 12px; font-size: 15px; } .book__perks li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 35%, var(--orange-2), var(--orange-dark)); } .book__card { padding: 40px; border-radius: 28px; background: linear-gradient(160deg, #1d1d1d, #141414); border: 1px solid var(--line-strong); box-shadow: 0 60px 120px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1); } .form { display: flex; flex-direction: column; gap: 18px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form label { display: flex; flex-direction: column; gap: 8px; } .form label span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .form input, .form select, .form textarea { width: 100%; padding: 14px 16px; border-radius: 12px; background: #0f0f0f; border: 1px solid var(--line-strong); color: var(--text); font: inherit; font-size: 16px; outline: none; transition: border-color 0.3s, box-shadow 0.3s; -webkit-appearance: none; appearance: none; } .form select { background-image: linear-gradient(45deg, transparent 50%, var(--orange) 50%), linear-gradient(135deg, var(--orange) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; } .form select option { background: var(--bg-2); } .form textarea { resize: vertical; min-height: 90px; } .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,106,0,0.15); } .form input.is-invalid { border-color: #ff4d4d; } .form__alt { font-size: 13px; color: var(--muted); text-align: center; } .form__alt a { color: var(--orange); } .form__success { display: none; padding: 14px; border-radius: 12px; text-align: center; background: rgba(255,106,0,0.12); border: 1px solid rgba(255,106,0,0.4); color: var(--orange-2); } .form.is-sent .form__success { display: block; } @media (max-width: 900px) { .book__inner { grid-template-columns: 1fr; gap: 40px; } .book__card { padding: 24px 20px; border-radius: 20px; } .form__row { grid-template-columns: 1fr; } .book__copy > p { font-size: 16px; } .book { padding-bottom: 120px; } /* room for sticky CTA */ } /* ========================================================= FOOTER ========================================================= */ .footer { position: relative; z-index: 20; border-top: 1px solid var(--line); padding: 48px 0 28px; background: var(--bg-2); } .footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); grid-template-rows: auto auto auto; column-gap: 40px; row-gap: 16px; align-items: start; } .footer__tag { color: var(--muted); font-size: 14px; } .footer__links { position: relative; right: 140px; grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(4, max-content); grid-template-rows: repeat(2, auto); align-self: start; row-gap: 54px; column-gap: 90px; justify-self: end; align-items: start; width: max-content; max-width: none; margin-left: auto; margin-right: 0; font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.03em; } .footer__links a { display: flex; align-items: center; justify-content: center; color: var(--muted); text-align: center; white-space: nowrap; transition: color 0.3s, transform .3s var(--ease); padding: 6px 0; } .footer__links a:hover { transform: translateY(-3px); } .footer__links a:hover { color: var(--orange); } .footer--home .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(520px, 1fr); } .footer--home .footer__links { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); } .footer__brandmark { position: relative; left: 50%; margin-left: -50vw; grid-column: 1 / -1; grid-row: 2; display: block; width: 100vw; max-width: 100vw; height: 300px; padding: 0; margin-right: 0; border: 0; background: transparent; overflow: hidden; } .footer__brandmark model-viewer { position: relative; left: -25vw; top: -100px; display: block; width: 150vw; max-width: none; height: 500px; padding: 0; margin: 0; border: 0; --poster-color: transparent; background: transparent; transform: none; pointer-events: auto; user-select: none; } .footer__brandmark model-viewer:focus, .footer__brandmark model-viewer:focus-visible, .footer__brandmark model-viewer:active { outline: none; transform: none; } .footer__brandmark model-viewer::part(default-progress-bar) { display: none; } .footer__brandmark model-viewer::part(poster) { display: none; } .model-status { color: var(--muted); font-size: 12px; } .model-loader { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .3s; background: transparent; } .model-loader span { width: 42px; height: 42px; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--orange); border-radius: 50%; animation: modelSpin .8s linear infinite; } model-viewer.is-loaded .model-loader { opacity: 0; } @keyframes modelSpin { to { transform: rotate(360deg); } } .footer__brandmark .nav__logo-fallback { align-items: center; justify-content: center; background: linear-gradient(135deg, var(--orange-2), var(--orange-dark)); color: #120800; font-size: clamp(22px, 4vw, 52px); } .footer__copy { grid-column: 1 / -1; grid-row: 3; color: var(--muted); font-size: 13px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; } @media (max-width: 800px) { .footer__inner { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 20px; } .footer__links { grid-column: 1; grid-row: 2; justify-self: start; width: 100%; } .footer__brandmark { grid-column: 1; grid-row: 3; } .footer__copy { grid-column: 1; grid-row: 4; } .footer { padding-bottom: 100px; } } @media (max-width: 1100px) and (min-width: 801px) { .footer--home .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr); } .footer--home .footer__links { gap: 20px 32px; font-size: 13px; width: 100%; } } /* ---------- Bottom booking dock ---------- */ /* ---------- Booking dock (morphing) ---------- */ .booking-dock { position: fixed; left: 50%; bottom: 24px; z-index: 500; transform: translateX(-50%); font-family: var(--font-body); display: inline-block; } body::before { content: ""; position: fixed; inset: 0; z-index: 490; background: rgba(0,0,0,.38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; will-change: opacity; transition: opacity .35s var(--ease); } body.dock-open::before { opacity: 1; } body.dock-open .btn__ticker, body.dock-open .portrait__tag, body.dock-open .hero__stamp { animation-play-state: paused; } .booking-dock__shell { position: relative; background-color: rgba(20,20,20,.82); background-image: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 42%, rgba(255,106,0,.05)); backdrop-filter: blur(14px) saturate(1.8); -webkit-backdrop-filter: blur(14px) saturate(1.8); border: 1px solid rgba(255,255,255,.14); color: #f4f4f2; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.3), 0 20px 44px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.22); transform: translateZ(0); backface-visibility: hidden; contain: layout paint; will-change: width, height, border-radius, transform; transition: width .62s cubic-bezier(.34,1.56,.64,1), height .62s cubic-bezier(.34,1.56,.64,1), border-radius .62s cubic-bezier(.34,1.56,.64,1), transform .3s var(--ease); transform-origin: bottom center; } .booking-dock__shell::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 0% 0%, rgba(255,255,255,.16), transparent 26%), radial-gradient(ellipse at 100% 0%, rgba(255,255,255,.08), transparent 24%); mix-blend-mode: screen; } .booking-dock__content { position: relative; z-index: 1; } .booking-dock__shell.is-squish { transform: scale(1.015, .985); } .booking-dock__content { position: absolute; inset: 0; padding: 8px; opacity: 1; transform: translate3d(0,0,0) scale(1); transition: opacity .35s var(--ease), transform .35s var(--ease); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; will-change: opacity, transform; } .booking-dock__content::-webkit-scrollbar { display: none; width: 0; height: 0; } .booking-dock__content.is-fading { opacity: 0; transform: translateY(6px) scale(.98); } .booking-dock__ghost { position: absolute; top: -9999px; left: -9999px; visibility: hidden; pointer-events: none; padding: 8px; font-family: var(--font-body); } .booking-dock__trigger { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; padding: 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .booking-dock__avatar { display: block; width: 34px; height: 34px; flex: 0 0 34px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, var(--orange), #ffb066); } .booking-dock__avatar img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 32%; } .booking-dock__trigger-text { flex: 0 1 auto; font-size: 14.5px; white-space: nowrap; color: #f4f4f2; } .booking-dock__trigger-text strong { font-weight: 600; } .booking-dock__arrow { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; margin-right: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .2s; } .booking-dock__arrow:hover { background: #f4f4f2; color: #0f0f0f; } .booking-dock.is-open .booking-dock__arrow { transform: rotate(90deg); background: var(--orange); } .booking-dock__preview { position: relative; padding: 14px 14px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .booking-dock__preview-min { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; } .booking-dock__preview-min:hover { background: rgba(255,255,255,.16); } .booking-dock__preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-right: 24px; } .booking-dock__preview-title { margin: 0; font-size: 14.5px; line-height: 1.35; color: #f4f4f2; } .booking-dock__preview-title strong { font-weight: 600; } .booking-dock__preview-host { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .booking-dock__preview-host .booking-dock__avatar { width: 38px; height: 38px; flex: 0 0 38px; } .booking-dock__preview-host-text { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 1px; } .booking-dock__preview-host-text strong { font-size: 13px; font-weight: 600; color: #f4f4f2; } .booking-dock__preview-host-text span { font-size: 11px; color: #9a9a96; } .booking-dock__daysrow { display: flex; align-items: center; gap: 6px; } .booking-dock__daynav { width: 26px; height: 26px; flex: 0 0 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: #fff; cursor: pointer; } .booking-dock__daynav:disabled { opacity: .25; cursor: not-allowed; pointer-events: none; } .booking-dock__daynav:hover { background: rgba(255,255,255,.14); } .booking-dock__daytrack { display: flex; flex: 1; min-width: 0; gap: 8px; transition: transform .18s cubic-bezier(.4,0,1,1), opacity .18s cubic-bezier(.4,0,1,1); } .booking-dock__daytrack.is-sliding-left { transform: translate3d(-18px,0,0); opacity: 0; } .booking-dock__daytrack.is-sliding-right { transform: translate3d(18px,0,0); opacity: 0; } .booking-dock__daytrack.is-entering { transition: none; } /* new page of days: cards arrive one after another from the side you're paging toward */ .booking-dock__daytrack.is-entering .booking-dock__day { animation: dockDayIn .46s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--i) * 35ms); } @keyframes dockDayIn { from { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 22px), 0, 0); } } .booking-dock__day { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 9px; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; background: #262626; color: #f4f4f2; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .3s cubic-bezier(.22,1,.36,1), border-color .3s cubic-bezier(.22,1,.36,1), color .3s cubic-bezier(.22,1,.36,1), transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s cubic-bezier(.22,1,.36,1); } @media (hover: hover) { .booking-dock__day:not(.is-active):hover { background: #303030; } } .booking-dock__day:not(.is-active):active { transform: scale(.97); } .booking-dock__day .slots { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--orange); white-space: nowrap; } .booking-dock__day .slots::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .booking-dock__day .name { font-size: 14px; font-weight: 600; white-space: nowrap; } /* month and "Confirm" share one slot and crossfade, so selecting never changes the card's size */ .booking-dock__day-foot { display: grid; line-height: 1.3; } .booking-dock__day-foot > span { grid-area: 1 / 1; justify-self: center; white-space: nowrap; transition: opacity .22s ease, transform .36s cubic-bezier(.22,1,.36,1); } .booking-dock__day .month { color: #9a9a96; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .booking-dock__day .view-times { font-size: 11.5px; font-weight: 600; opacity: 0; transform: translate3d(0,6px,0); } .booking-dock__day.is-active { background: #f4f4f2; border-color: #f4f4f2; color: #0f0f0f; transform: translate3d(0,-5px,0); box-shadow: 0 12px 22px rgba(0,0,0,.35); z-index: 2; } .booking-dock__day.is-active:active { transform: translate3d(0,-5px,0) scale(.96); } .booking-dock__day.is-active .month { opacity: 0; transform: translate3d(0,-6px,0); } .booking-dock__day.is-active .view-times { opacity: 1; transform: none; } .booking-dock__day.is-confirmed { background: var(--orange); border-color: var(--orange); transform: translate3d(0,-5px,0) scale(.96); box-shadow: 0 10px 24px rgba(255,106,0,.35); } @media (prefers-reduced-motion: reduce) { .booking-dock__daytrack, .booking-dock__day, .booking-dock__day-foot > span { transition: none; } .booking-dock__daytrack.is-entering .booking-dock__day { animation: none; } } .booking-dock__card { padding: 14px 14px 12px; } .booking-dock__card--cal { display: flex; flex-direction: column; height: 100%; } .booking-dock__card--cal .booking-dock__title { flex: none; } .booking-dock__cal { flex: 1; min-height: 0; border-radius: 14px; overflow-y: auto; margin-bottom: 10px; } .booking-dock__cal iframe { border-radius: 14px; } .booking-dock__card--cal .booking-dock__back { flex: none; align-self: flex-start; } .booking-dock__progress { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .booking-dock__progress-bar { display: flex; flex: 1; gap: 6px; } .booking-dock__progress-bar i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); } .booking-dock__progress-bar i.is-filled { background: #fff; } .booking-dock__min { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; } .booking-dock__min:hover { background: rgba(255,255,255,.16); } .booking-dock__title { margin: 0 0 16px; font: 600 17px/1.3 var(--font-display); color: #f4f4f2; } .booking-dock__field { margin-bottom: 14px; } .booking-dock__field label { display: block; margin-bottom: 6px; color: #9a9a96; font-size: 12.5px; } .booking-dock__field input, .booking-dock__field select, .booking-dock__field textarea { width: 100%; padding: 11px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: #262626; color: #f4f4f2; font: 14px var(--font-body); outline: 0; transition: border-color .2s; } .booking-dock__field input:focus, .booking-dock__field select:focus, .booking-dock__field textarea:focus { border-color: var(--orange); } .booking-dock__field textarea { min-height: 64px; resize: vertical; } .booking-dock__row { display: flex; gap: 10px; } .booking-dock__row .booking-dock__field { flex: 1; } .booking-dock__guest { margin-bottom: 8px; } .booking-dock__goal-label { margin: 2px 0 10px; font-size: 13.5px; color: #f4f4f2; } .booking-dock__goals { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; } .booking-dock__goal { padding: 8px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; background: #262626; color: #f4f4f2; font: 12.5px var(--font-body); cursor: pointer; transition: background .2s, border-color .2s, transform .15s; } .booking-dock__goal:hover { background: #303030; } .booking-dock__goal.is-selected { background: #f4f4f2; border-color: #f4f4f2; color: #0f0f0f; transform: scale(1.03); } .booking-dock__actions { display: flex; gap: 10px; margin-top: 2px; } .booking-dock__back, .booking-dock__next { flex: 1; padding: 12px; border: 0; border-radius: 999px; font: 600 14px var(--font-body); cursor: pointer; transition: background .2s, opacity .2s, transform .12s; } .booking-dock__back { background: #262626; color: #f4f4f2; } .booking-dock__back:hover { background: #303030; } .booking-dock__next { background: #fff; color: #0f0f0f; } .booking-dock__next:disabled { opacity: .4; cursor: not-allowed; } .booking-dock__next:not(:disabled):hover { background: #eee; } .booking-dock__next:not(:disabled):active { transform: scale(.97); } .booking-dock__next--full { width: 100%; flex: none; } .booking-dock__timedays { display: flex; gap: 6px; margin-bottom: 14px; } .booking-dock__timeday { flex: 1; padding: 9px 4px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: #262626; color: #f4f4f2; font: inherit; text-align: center; cursor: pointer; transition: background .2s, border-color .2s; } .booking-dock__timeday .dow { display: block; margin-bottom: 2px; font-size: 11.5px; color: #9a9a96; } .booking-dock__timeday .dom { font-size: 16px; font-weight: 600; } .booking-dock__timeday.is-active { border-color: #fff; background: #303030; } .booking-dock__tz { margin-bottom: 10px; font-size: 12px; color: #9a9a96; } .booking-dock__timezone-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 8px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: #262626; color: #f4f4f2; font: 13px var(--font-body); cursor: pointer; } .booking-dock__timezone-toggle span { color: #9a9a96; font-size: 16px; } .booking-dock__timezone-select { display: none; width: 100%; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--orange); border-radius: 12px; background: #262626; color: #f4f4f2; font: 13px var(--font-body); } .booking-dock__timezone-select.is-open { display: block; } .booking-dock__custom-time { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; } .booking-dock__custom-time select { flex: 1; padding: 10px 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: #262626; color: #f4f4f2; font: 14px var(--font-body); } .booking-dock__custom-time span { color: #f4f4f2; font-weight: 600; } .booking-dock__timezone { position: relative; margin-bottom: 12px; } .booking-dock__timezone-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: #262626; color: #f4f4f2; font: 13px var(--font-body); cursor: pointer; } .booking-dock__timezone-menu { position: absolute; right: 0; left: 0; bottom: calc(100% + 6px); z-index: 5; display: none; max-height: 180px; overflow-y: auto; padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #262626; box-shadow: 0 12px 28px rgba(0,0,0,.35); } .booking-dock__timezone-menu.is-open { display: grid; gap: 3px; } .booking-dock__timezone-menu button { padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #f4f4f2; text-align: left; font: 13px var(--font-body); cursor: pointer; } .booking-dock__timezone-menu button:hover { background: #303030; } .booking-dock__slots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .booking-dock__slot { padding: 9px 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: #262626; color: #f4f4f2; font: 13px var(--font-body); cursor: pointer; transition: background .2s, border-color .2s; } .booking-dock__slot.is-selected { border-color: #fff; background: #303030; font-weight: 600; } .booking-dock__hint { font-size: 13px; color: #9a9a96; } .booking-dock__confirm { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; } .booking-dock__date { flex-shrink: 0; text-align: center; } .booking-dock__date .dow { display: block; font-size: 12px; color: #9a9a96; } .booking-dock__date .dom { display: block; font-size: 19px; font-weight: 600; } .booking-dock__date .mon { display: block; font-size: 11px; color: #9a9a96; } .booking-dock__time-main { font-size: 19px; font-weight: 600; } .booking-dock__tz-sm { font-size: 12px; color: #9a9a96; } .booking-dock__link { display: inline-block; margin-bottom: 14px; padding: 0; border: 0; background: none; color: #f4f4f2; font: 13px var(--font-body); text-decoration: underline; cursor: pointer; } .booking-dock__contact { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; } .booking-dock__contact > div { flex: 1; min-width: 0; } .booking-dock__contact strong { display: block; font-size: 14px; } .booking-dock__contact span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: #9a9a96; } .booking-dock__edit { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; } .booking-dock__edit:hover { background: rgba(255,255,255,.16); } .booking-dock__meta { margin-top: 8px; font-size: 11.5px; line-height: 1.8; color: #9a9a96; } .booking-dock__done { margin-bottom: 18px; font-size: 13.5px; line-height: 1.6; color: #9a9a96; } @media (max-width: 480px) { .booking-dock { bottom: 16px; } } /* ========================================================= WORK PAGE ========================================================= */ .work-hero { padding: calc(var(--nav-h) + 80px) 0 8px; } .work-hero .container { width: calc(100% - 40px); max-width: none; } .work-hero__eyebrow { color: var(--orange); } @media (max-width: 800px) { .work-hero .container { width: calc(100% - 32px); } } .work-hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.1; letter-spacing: -0.06em; margin-bottom: 160px; max-width: 1000px; } .work-hero__sub { color: var(--muted); font-size: clamp(15px, 1.4vw, 18px); max-width: 620px; margin-bottom: 40px; } .filters { display: flex; gap: 6px; flex-wrap: wrap; } .filter-label { color: var(--muted); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 12px; } .filters--services { padding: 0; border: 0; border-radius: 0; background: none; } .filter { padding: 7px 13px; border-radius: 6px; border: 0; background: var(--bg-3); font-family: "IBM Plex Mono", monospace; font-size: 12.5px; font-weight: 500; color: var(--muted); transition: color 0.25s, background-color 0.25s; min-height: 0; } .filter.is-active { color: var(--bg); background: var(--text); border-color: transparent; font-weight: 500; } @media (hover: hover) { .filter:not(.is-active):hover { color: var(--text); background: var(--line-strong); } } @media (max-width: 600px) { .filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; scrollbar-width: none; margin-right: -18px; padding-right: 18px; } .filters::-webkit-scrollbar { display: none; } .filter { flex: 0 0 auto; } } .work-grid-section { background: var(--bg); padding: 16px 0 clamp(80px, 9vw, 140px); } .work-grid-section .container { width: calc(100% - 40px); max-width: none; } @media (max-width: 800px) { .work-grid-section .container { width: calc(100% - 32px); } } .wgrid { columns: 3; column-gap: 28px; } .wcard { display: inline-block; width: 100%; break-inside: avoid-column; margin-bottom: 56px; transition: opacity 0.4s, transform 0.4s; } .wcard.is-hidden { display: none; } @media (hover: hover) { .wcard:hover h2 { color: var(--orange); } .wcard:hover .wcard__media-inner { transform: scale(1.08); } .wcard:hover .case__glyph { transform: rotate(10deg) scale(1.1); color: var(--orange); } } .wcard__media { position: relative; aspect-ratio: 4 / 5; display: block; overflow: hidden; border-radius: 14px; text-decoration: none; } .wcard__media-inner { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 0.6s var(--ease); } .wcard--a .wcard__media-inner { background: radial-gradient(circle at 30% 30%, rgba(255,106,0,0.55), transparent 55%), linear-gradient(160deg, #2a1608, #0f0f0f); } .wcard--b .wcard__media-inner { background: radial-gradient(circle at 70% 20%, rgba(255,138,42,0.5), transparent 55%), linear-gradient(160deg, #1c1c1c, #0f0f0f); } .wcard--c .wcard__media-inner { background: radial-gradient(circle at 50% 80%, rgba(255,106,0,0.45), transparent 55%), linear-gradient(200deg, #221410, #0f0f0f); } .wcard--d .wcard__media-inner { background: radial-gradient(circle at 20% 50%, rgba(255,106,0,0.4), transparent 40%), radial-gradient(circle at 80% 50%, rgba(255,138,42,0.3), transparent 40%), linear-gradient(160deg, #1a1a1a, #0f0f0f); } .wcard--e .wcard__media-inner { background: radial-gradient(circle at 80% 80%, rgba(255,106,0,0.5), transparent 55%), linear-gradient(160deg, #1f1410, #0f0f0f); } .wcard--f .wcard__media-inner { background: radial-gradient(circle at 50% 20%, rgba(255,138,42,0.45), transparent 55%), linear-gradient(180deg, #1a1a1a, #0f0f0f); } .wcard--g .wcard__media-inner { background: radial-gradient(circle at 60% 70%, rgba(255,106,0,0.5), transparent 55%), linear-gradient(150deg, #241a12, #0f0f0f); } .wcard--h .wcard__media-inner { background: radial-gradient(circle at 30% 60%, rgba(255,138,42,0.45), transparent 55%), linear-gradient(200deg, #1c1c1c, #0f0f0f); } .wcard--i .wcard__media-inner { background: radial-gradient(circle at 50% 50%, rgba(255,106,0,0.5), transparent 50%), linear-gradient(170deg, #1a1a1a, #0f0f0f); } .wcard__palette { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 6px; } .wcard__palette i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255,255,255,0.15); } .wcard__body { padding: 14px 4px 0; } .wcard h2 { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; margin-bottom: 4px; transition: color 0.3s; } .wcard p { color: var(--muted); font-size: 15px; margin-bottom: 0; } .scroll-doodle { position: fixed; z-index: 1; width: 180px; height: 90px; pointer-events: none; opacity: 0; border-top: 2px solid var(--orange); border-radius: 50%; transform: rotate(-18deg) translateX(-30px); transition: opacity .4s, transform .8s var(--ease); } .scroll-doodle--one { left: -65px; top: 34%; } .scroll-doodle--two { right: -65px; top: 65%; transform: rotate(158deg) translateX(30px); } body.is-scrolling .scroll-doodle { opacity: .75; transform: rotate(-8deg) translateX(0); } body.is-scrolling .scroll-doodle--two { transform: rotate(168deg) translateX(0); } .footer-reveal-wrap { overflow: hidden; width: 100%; } .footer-reveal-text { width: max-content; max-width: none; white-space: nowrap; } .hero__visual { display: none; } .hero__grid { grid-template-columns: 1fr; } .hero__grid.container { width: 100%; max-width: none; margin-inline: 0; padding-inline: clamp(16px, 2vw, 40px); grid-template-columns: minmax(0, 1fr); } .hero__content { width: 100%; max-width: none; margin: 0 auto; text-align: center; align-items: center; } .hero__title { width: 100%; max-width: 100%; margin: 0; padding: 0; font-size: clamp(34px, 6.2vw, 100px); font-weight: 300; text-transform: uppercase; line-height: 1; text-align: center; } .hero__line { display: block; width: 100%; max-width: 100%; text-align: center; white-space: nowrap; letter-spacing: -.03em; } .hero__wink { display: inline-block; width: .56em; height: .56em; margin-left: .12em; vertical-align: baseline; animation: spin 5s linear infinite; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .nav { will-change: transform; } body.reveal-active .nav { --nav-hide-y: -180%; } /* Pinned final statement */ .reveal-wrapper { position: relative; z-index: 20; height: calc(100svh + 5000px); margin-top: 0; background: transparent; pointer-events: none; } /* transparent box overlaps the FAQ/footer above and below it; without this it silently ate their clicks */ .reveal-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; background: transparent; } .color-panel { position: absolute; inset: 0; background: #EEFE41; display: flex; align-items: center; overflow: hidden; transform: translateY(100%); will-change: transform; } .slide-track { display: flex; white-space: nowrap; will-change: transform; } .char { display: inline-block; color: #0f0f0f; font: 300 clamp(10rem, 24vw, 20rem)/1 var(--font-body); letter-spacing: -.01em; will-change: transform; } .reveal-sound-toggle { position: absolute; right: 24px; bottom: 24px; z-index: 100; display: none; min-width: 96px; padding: 10px 14px; border: 1px solid #0f0f0f; border-radius: 999px; background: transparent; color: #0f0f0f; font: 600 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; pointer-events: auto; touch-action: manipulation; } .reveal-sound-toggle.is-visible { display: block; } .reveal-sound-toggle:hover { background: #0f0f0f; color: #EEFE41; transform: scale(1.04); } @media (max-width: 800px) { .reveal-wrapper { margin-top: -90px; } } @media (max-width: 800px) { .hero__title { font-size: clamp(28px, 9vw, 58px); } .hero__line { white-space: normal; } } @media (max-width: 900px) { .nav > .btn { display: none; } } .footer__cta { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; justify-self: start; width: 100%; gap: 20px; margin-left: 0; text-align: left; } .footer__lead { max-width: 620px; margin: 0; color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.2vw, 48px); line-height: 1; letter-spacing: -.03em; } .footer__lead { align-self: flex-start; text-align: left; transform: translateX(-300px); } .footer__cta > .btn { transform: translateX(-300px); } .footer__lead span { display: block; white-space: nowrap; cursor: default; transition: color .3s var(--ease), transform .35s var(--ease), letter-spacing .35s var(--ease); } .footer__lead-main { font-size: 1em; } .footer__lead-sub { margin-top: 10px; color: var(--muted); font-size: .58em; font-weight: 500; letter-spacing: -.03em; } .footer__lead span:hover { color: var(--orange); transform: translateX(8px); letter-spacing: -.035em; } .footer__email { display: inline-flex; align-items: center; gap: 9px; margin-top: 0; color: var(--muted); font-size: 14px; transition: color .3s; transform: translateX(-300px); } .footer__email { position: relative; font-family: var(--font-display); font-weight: 600; transition: color .3s, transform .3s var(--ease); } .footer__email:hover { color: var(--orange); transform: translateX(-300px) scale(1.08); } .footer__email > span { color: inherit; transition: color .3s; } .footer__email:hover > span { background-color: var(--orange); background-image: linear-gradient(105deg, var(--orange) 0%, var(--orange) 35%, var(--orange-2) 49%, var(--orange) 63%, var(--orange) 100%); background-size: 240% 100%; background-position: 140% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation-name: emailShine; animation-duration: 4.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: both; will-change: background-position; } @keyframes emailShine { 0% { background-position: 140% 0; } 66% { background-position: -140% 0; } 100% { background-position: -140% 0; } } .footer__email svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 800px) { .footer__cta { gap: 16px; } .footer__lead { max-width: 520px; font-size: clamp(22px, 5.8vw, 38px); text-align: left; transform: translateX(-300px); } } .footer .nav__logo img, .footer .nav__logo-fallback { width: 72px; height: 72px; border-radius: 16px; } .footer .nav__name { font-size: 28px; } .footer .nav__logo { gap: 16px; } @media (max-width: 800px) { .hero__line { white-space: normal; } } .wgrid__empty { text-align: center; color: var(--muted); padding: 60px 0; } @media (max-width: 1000px) { .wgrid { columns: 2; column-gap: 22px; } } @media (max-width: 800px) { .wgrid { columns: 1; } .wcard { margin-bottom: 32px; } .wcard__body { padding: 12px 0 0; } .wcard h2 { font-size: 22px; } } .book--compact { padding-top: clamp(60px, 8vw, 100px); padding-bottom: clamp(20px, 3vw, 40px); } /* ---------- Services and project detail pages ---------- */ .project-hero { padding: calc(var(--nav-h) + 90px) 0 80px; } .project-hero__title { max-width: 920px; font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 8vw, 108px); line-height: 0.98; letter-spacing: -0.055em; text-wrap: balance; } .project-hero__title em { color: var(--orange); } .project-hero__sub { max-width: 650px; margin-top: 28px; color: var(--muted); font-size: clamp(16px, 1.5vw, 20px); } .pricing-head { max-width: 900px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; display: flex; flex-direction: column; align-items: center; } .pricing-head__title { margin: 0; max-width: 820px; font-family: var(--font-poppins); font-weight: 400; font-size: clamp(34px, 5vw, 58px); line-height: 1.08; letter-spacing: -0.06em; text-wrap: balance; } .pricing-head__sub { margin: 18px 0 0; font-family: var(--font-poppins); font-weight: 400; color: var(--muted); font-size: clamp(15px, 1.4vw, 17px); max-width: 52ch; } .pricing-head__spots { justify-content: center; margin: 20px 0 0; } .packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; } .package { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); overflow: hidden; } .package--featured { border-color: var(--orange); box-shadow: 0 24px 60px rgba(255,106,0,0.12); } .package__badge { margin: 0; padding: 12px; background: var(--orange); color: #fff; font: 600 12px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; } .package__body { padding: 28px 26px 22px; } .package h3 { margin: 0 0 10px; font: 500 20px var(--font-display); letter-spacing: -0.01em; } .package__price { color: var(--text); font: 500 40px/1 var(--font-display); letter-spacing: -0.03em; margin-bottom: 10px; } .package__body > p { font-family: var(--font-poppins); font-weight: 400; color: var(--muted); font-size: 14.5px; min-height: 44px; margin-bottom: 20px; } .package__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border: 1.5px solid var(--orange); border-radius: 999px; color: var(--orange); font: 500 15px var(--font-display); transition: background-color 0.25s, color 0.25s; } .package__btn:hover { background: rgba(255,106,0,0.08); } .package__btn--solid { background: var(--orange); border-color: var(--orange); color: #fff; } .package__btn--solid:hover { background: var(--orange-dark); } .package__btn-arrow { transition: transform 0.25s var(--ease); } .package__btn:hover .package__btn-arrow { transform: translateX(3px); } .package__guarantee { margin: 14px 0 0; color: var(--orange); font-size: 13px; font-weight: 500; text-align: center; } .package__inherits { margin: 0 26px 18px; padding: 12px; border-radius: 10px; background: var(--bg-3); color: var(--text); font-size: 13.5px; font-weight: 500; text-align: center; } .package__list { display: grid; gap: 14px; margin: 0; padding: 0 26px 26px; list-style: none; } .package__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-family: var(--font-poppins); font-weight: 400; font-size: 14.5px; line-height: 1.4; } .package__list li::before { content: "✓"; flex: none; color: var(--orange); font-weight: 500; } .package__list li strong { font-weight: 600; } .package__list li.is-muted { color: var(--muted); opacity: 0.55; } .package__list li.is-muted::before { color: var(--muted); } .project-hero__meta { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 36px; color: var(--muted); font-size: 13px; } .project-hero__meta strong { display: block; color: var(--text); font-family: var(--font-display); font-size: 20px; } .project-visual { min-height: 360px; display: grid; place-items: center; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); } .project-visual { border-radius: 0 0 34px 34px; } .project-visual.case--a { background: radial-gradient(circle at 30% 30%, rgba(255,106,0,0.55), transparent 55%), linear-gradient(160deg, #2a1608, #0f0f0f); } .project-visual.case--b { background: radial-gradient(circle at 70% 20%, rgba(255,138,42,0.5), transparent 55%), linear-gradient(160deg, #1c1c1c, #0f0f0f); } .project-visual.case--c { background: radial-gradient(circle at 50% 80%, rgba(255,106,0,0.45), transparent 55%), linear-gradient(200deg, #221410, #0f0f0f); } .project-visual.case--d { background: radial-gradient(circle at 20% 50%, rgba(255,106,0,0.4), transparent 40%), radial-gradient(circle at 80% 50%, rgba(255,138,42,0.3), transparent 40%), linear-gradient(160deg, #1a1a1a, #0f0f0f); } .project-visual.case--e { background: radial-gradient(circle at 80% 80%, rgba(255,106,0,0.5), transparent 55%), linear-gradient(160deg, #1f1410, #0f0f0f); } .project-visual.case--f { background: radial-gradient(circle at 50% 20%, rgba(255,138,42,0.45), transparent 55%), linear-gradient(180deg, #1a1a1a, #0f0f0f); } .project-visual .case__glyph { font-size: clamp(120px, 22vw, 300px); } .project-body { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 80px; } .project-body__aside { position: sticky; top: 110px; align-self: start; } .project-body__aside h3 { color: var(--orange); font: 600 12px var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; } .project-body__aside p { color: var(--muted); margin-top: 12px; } .project-body__copy { display: grid; gap: 34px; } .project-body__copy h2 { font: 600 clamp(30px, 4vw, 54px)/1.05 var(--font-display); letter-spacing: -0.04em; } .project-body__copy p { color: var(--muted); font-size: 17px; } .project-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .project-result { padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); } .project-result strong { display: block; color: var(--orange); font: 600 32px var(--font-display); } .project-result span { color: var(--muted); font-size: 12px; } @media (max-width: 800px) { .project-body { grid-template-columns: 1fr; gap: 14px; } .packages { grid-template-columns: 1fr; } .project-body__aside { position: static; } .project-results { grid-template-columns: 1fr 1fr; } } /* ---------- Mobile: drop decorative motion ---------- */ @media (max-width: 900px) { .portrait__tag { animation: none; } .case, .quote, .book__card, .wcard { box-shadow: 0 20px 40px rgba(0,0,0,0.35); } } /* ---------- Selected work: left text stays locked, cases scroll on the right ---------- */ .work { --wc-h: min(64svh, 46vw); padding-top: clamp(40px, 6vw, 80px); } .work__lock { display: grid; grid-template-columns: minmax(280px, 27%) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); padding-inline: 20px; } .work__left { position: sticky; top: 0; align-self: start; height: 100svh; display: flex; flex-direction: column; padding: 20svh 0 7svh; } .work__heading { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -.03em; } .work__name { margin: 0; color: #8b8b86; font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3vw, 44px); line-height: 1.15; letter-spacing: -.03em; } .work__desc { margin: auto 0 0; max-width: 40ch; color: var(--muted); font-size: 15.5px; line-height: 1.55; } .work__meta { display: flex; align-items: center; gap: 14px; margin-top: 36px; color: var(--text); } .work__thumb { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 6px; background: linear-gradient(160deg, #2a1608, #0f0f0f); color: rgba(255,255,255,.85); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; } .work__tag { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; max-width: 34ch; } .work__year { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .work__all { margin-top: 22px; width: fit-content; color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; transition: color .3s; } .work__all:hover { color: var(--orange); } .work__swap { transition: opacity .18s ease, transform .18s ease; } .work__left.is-swapping .work__swap { opacity: 0; transform: translateY(8px); } .work__list { display: flex; flex-direction: column; gap: 14px; padding-block: calc((100svh - var(--wc-h)) / 2); } .work__card { position: relative; display: block; height: var(--wc-h); overflow: hidden; border-radius: 16px; color: #f4f2ee; isolation: isolate; } .work__card::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: transform .9s var(--ease); } .work__card--1::before { background: radial-gradient(circle at 30% 30%, rgba(255,106,0,.55), transparent 55%), linear-gradient(160deg, #2a1608, #0f0f0f); } .work__card--2::before { background: radial-gradient(circle at 70% 20%, rgba(255,138,42,.5), transparent 55%), linear-gradient(160deg, #1c1c1c, #0f0f0f); } .work__card--3::before { background: radial-gradient(circle at 50% 80%, rgba(255,106,0,.45), transparent 55%), linear-gradient(200deg, #221410, #0f0f0f); } .work__card--4::before { background: radial-gradient(circle at 20% 50%, rgba(255,106,0,.4), transparent 40%), radial-gradient(circle at 80% 50%, rgba(255,138,42,.3), transparent 40%), linear-gradient(160deg, #1a1a1a, #0f0f0f); } .work__card--5::before { background: radial-gradient(circle at 40% 30%, rgba(255,106,0,.5), transparent 55%), linear-gradient(160deg, #151515, #0f0f0f); } .work__card--6::before { background: radial-gradient(circle at 70% 70%, rgba(255,138,42,.45), transparent 55%), linear-gradient(200deg, #1c1c1c, #0f0f0f); } .work__glyph { position: absolute; top: 28px; left: 32px; font-size: 28px; color: rgba(255,106,0,.7); } .work__wordmark { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 7vw, 110px); letter-spacing: .02em; } .work__cap { display: none; } @media (hover: hover) { .work__card:hover::before { transform: scale(1.04); } } @media (max-width: 900px) { .work { --wc-h: auto; } .work__lock { grid-template-columns: 1fr; gap: 24px; } .work__left { position: static; height: auto; padding: 0; } .work__name, .work__desc, .work__meta { display: none; } .work__all { margin-top: 16px; } .work__list { padding-block: 0; gap: 28px; } .work__card { height: auto; overflow: visible; border-radius: 0; color: var(--text); } .work__card::before { inset: 0 0 auto 0; height: auto; aspect-ratio: 4 / 3; border-radius: 16px; } .work__wordmark { inset: 0 0 auto 0; aspect-ratio: 4 / 3; color: #f4f2ee; } .work__glyph { top: 20px; left: 22px; } .work__card { padding-top: calc(75% + 18px); } .work__cap { display: block; } .work__cap h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; } .work__cap p { margin: 0 0 8px; color: var(--muted); font-size: 15px; line-height: 1.5; } .work__cap .work__cap-year { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } } /* "View case" cursor: replaces the dot while hovering a case */ .cursor-view { position: fixed; top: 0; left: 0; z-index: 9100; pointer-events: none; will-change: transform; } .cursor-view__in { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 4px; background: var(--orange); color: #120800; font: 600 14px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .3s var(--ease); } .cursor-view__in svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } body.cursor-view-on .cursor-view__in { opacity: 1; transform: scale(1); } body.cursor-view-on .cursor, body.cursor-view-on .cursor-ring { opacity: 0; } /* ---------- About-me statement under the video: grey words, key phrases in full black ---------- */ #statement { padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 8vw, 100px); } #statement > .container { width: 100%; max-width: none; margin-inline: 0; padding-inline: 20px; } .hero-video { padding-bottom: clamp(20px, 2.5vw, 36px); } .statement__text--lead { max-width: 1320px; font-weight: 600; font-size: clamp(30px, 4.4vw, 66px); line-height: 1.1; letter-spacing: -.03em; } .statement__text--lead .w { color: #b4b4ae; } .statement__text--lead .w.is-on { color: #8b8b86; } .statement__text--lead .w.is-on.hl { color: var(--text); } .statement__sub { max-width: 62ch; margin-top: clamp(28px, 4vw, 48px); color: var(--muted); font-size: clamp(15px, 1.3vw, 18px); font-weight: 300; line-height: 1.65; } /* ---------- Copy sections (intro, services groups, faq) ---------- */ .book__alt { margin-top: 16px; font-size: 15px; color: var(--muted); } .book__alt a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .book__alt a:hover { color: var(--orange); } .footer__blurb { max-width: 520px; margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.6; } .todo { background: #ffe680; color: #3a2c00; padding: 0 6px; border-radius: 4px; font-weight: 600; } /* ---------- Footer: dark, centred, rolling headline + outlined pill CTA (3D logo untouched) ---------- */ .footer--home { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; border-top: 0; padding: 0 0 28px; background: #000; color: #f4f2ee; } .footer--home .footer__inner { flex: 1; width: 100%; padding-top: clamp(90px, 18vh, 190px); display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 4vw, 52px); text-align: center; grid-template-columns: none; } .footer--home .footer__cta { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; margin: 0; text-align: center; } .footer__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .footer__roll { --rh: .78em; --gap: .55em; position: relative; margin: clamp(16px, 4vh, 40px) 0 0; height: calc(var(--rh) * 1.7); overflow: hidden; font-size: clamp(24px, 7.6vw, 124px); font-weight: 300; line-height: var(--rh); letter-spacing: -.03em; text-transform: uppercase; color: #f4f2ee; } .footer__roll-track { display: flex; flex-direction: column; animation: footerRoll 8s linear infinite; will-change: transform; backface-visibility: hidden; } .footer__roll-track > span { display: block; height: var(--rh); white-space: nowrap; } .footer__roll-track > span:nth-child(3n) { margin-bottom: var(--gap); } @keyframes footerRoll { from { transform: translate3d(0,0,0); } to { transform: translate3d(0, calc(var(--rh) * -3 - var(--gap)), 0); } } .footer--home .footer__blurb { max-width: 46ch; margin: 0; color: #9a9a94; font-size: 15px; line-height: 1.6; } .footer__start { display: inline-grid; place-items: center; min-width: min(306px, 80vw); height: 76px; padding: 0 48px; margin-top: clamp(24px, 5vh, 56px); border: 1px solid rgba(255,255,255,.85); border-radius: 999px; background: transparent; color: #fff; font-size: 20px; font-weight: 500; letter-spacing: -.01em; text-transform: uppercase; transition: background-color .35s var(--ease), border-color .35s; } .footer__start-roll { display: block; height: 1.25em; overflow: hidden; line-height: 1.25; } .footer__start-roll > span { display: block; transition: transform .45s var(--ease); } .footer__start-roll > span:last-child { color: #0a0a0a; } @media (hover: hover) { .footer__start:hover { background: #fff; border-color: #fff; } .footer__start:hover .footer__start-roll > span { transform: translateY(-100%); } } .footer__start:focus-visible { background: #fff; border-color: #fff; } .footer__start:focus-visible .footer__start-roll > span { transform: translateY(-100%); } .footer--home .footer__links { position: static; right: auto; align-self: center; justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 34px; width: auto; max-width: 900px; margin: clamp(16px, 4vh, 44px) 0 0; grid-column: auto; grid-row: auto; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: -.01em; text-transform: uppercase; } .footer--home .footer__links a { color: #f4f2ee; padding: 6px 0; } .footer--home .footer__links a:hover { color: var(--orange); } .footer--home .footer__brandmark { left: 0; margin-left: 0; grid-column: auto; grid-row: auto; align-self: center; } .footer__bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px 32px; flex-wrap: wrap; width: 100%; padding-top: 18px; } .footer--home .footer__copy, .footer__where { grid-column: auto; grid-row: auto; margin: 0; padding: 0; border: 0; color: #f4f2ee; font-size: 11px; font-weight: 600; letter-spacing: -.02em; text-transform: uppercase; text-align: left; } .footer__where { text-align: right; } @media (max-width: 800px) { .footer--home { padding-bottom: 100px; } .footer--home .footer__bottom { justify-content: center; text-align: center; } .footer--home .footer__copy, .footer__where { text-align: center; } } @media (prefers-reduced-motion: reduce) { .footer__roll { height: auto; } .footer__roll-track { animation: none; } .footer__roll-track > span:nth-child(n+4) { display: none; } } /* booking pill opened by the footer: no dimmed/blurred page behind it */ body.dock-quiet::before { opacity: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ========================================================= CONTACT PAGE ========================================================= */ .contact-hero { position: relative; z-index: 1; background: var(--bg); padding: calc(var(--nav-h) + 100px) 0 60px; text-align: center; } .contact-hero .container { display: flex; flex-direction: column; align-items: center; } .contact-hero__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(52px, 8vw, 110px); line-height: 1; letter-spacing: 0; text-transform: uppercase; } .contact-hero__sub { max-width: 46ch; margin: 20px 0 0; color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); } .contact-hero__icon { display: grid; place-items: center; width: 76px; height: 76px; margin-top: 44px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line); animation: spin 7s linear infinite; } .contact-hero__icon span { color: var(--orange); font-size: 22px; } @media (prefers-reduced-motion: reduce) { .contact-hero__icon { animation: none; } } .contact-body { position: relative; z-index: 1; background: var(--bg); padding: 20px 0 clamp(100px, 12vw, 160px); } .contact-body .container { width: calc(100% - 64px); max-width: 1400px; } .contact-body__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 64px; align-items: start; } .contact-body__col h2 { margin: 0 0 24px; font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; } .contact-cal { min-height: 620px; border-radius: 16px; overflow: hidden; background: #141414; } .contact-body__col--side { display: flex; flex-direction: column; gap: 36px; } .contact-email-group { display: flex; flex-direction: column; gap: 8px; } .contact-email__label { margin: 0; color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; } .contact-email__link { display: inline-block; width: max-content; color: var(--muted); font-family: var(--font-body); font-weight: 400; font-size: 16.5px; letter-spacing: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); } .contact-email__link:hover { color: var(--orange); text-decoration-color: var(--orange); } .contact-social { display: flex; flex-direction: column; gap: 8px; } .contact-social a { display: inline-block; width: max-content; color: var(--muted); font-family: var(--font-body); font-weight: 400; font-size: 16.5px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); } .contact-social a:hover { color: var(--orange); text-decoration-color: var(--orange); } .contact-body__note { margin-top: 8px; color: var(--muted); font-size: 14.5px; } .contact-body__note a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .contact-body__note a:hover { color: var(--orange); } @media (max-width: 1000px) { .contact-body__grid { grid-template-columns: 1fr; gap: 48px; } .contact-cal { min-height: 620px; } } /* ---------- FAQ (two-column accordion) ---------- */ .faq { width: 100%; } .faq__title { font-family: var(--font-body); font-weight: 600; letter-spacing: -.025em; margin-bottom: clamp(32px, 5vw, 56px); } .faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; } .faq__row { border-top: 1px solid var(--line); } .faq__row:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); } .faq__row summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-family: var(--font-body); font-size: 19px; font-weight: 500; letter-spacing: -.01em; cursor: pointer; list-style: none; } .faq__row summary::marker { content: ""; } .faq__row summary::-webkit-details-marker { display: none; } .faq__row summary:hover { color: var(--orange); } .faq__icon { position: relative; flex: none; width: 16px; height: 16px; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; transition: transform .3s var(--ease); } .faq__icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); } .faq__icon::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); } .faq__row[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq__row p { margin: 0 0 24px; max-width: 56ch; color: var(--muted); font-size: 17px; line-height: 1.6; } @media (max-width: 800px) { .faq__grid { grid-template-columns: 1fr; gap: 0; } .faq__row:nth-last-child(-n+2) { border-bottom: 0; } .faq__row:last-child { border-bottom: 1px solid var(--line); } } /* "send me the brief" locks in place while the reveal panel rises over it from below */ @media (min-width: 801px) { .book-dock { position: relative; height: 200svh; } .book-dock .faq { position: sticky; top: 0; height: 100svh; overflow-y: auto; scrollbar-gutter: stable; display: flex; align-items: center; } /* scrolls in place if several rows are open at once; scrollbar-gutter stops the appearing/disappearing scrollbar from shoving the centered heading sideways */ .book-dock + .reveal-wrapper { margin-top: calc(-100svh - 500px); } /* extra 500px: reveal panel finishes rising to full screen while the brief section is still locked underneath */ } /* footer sits pinned behind the closing panel; the panel scrolls up off it to reveal it */ @media (min-width: 801px) { .footer-dock { position: relative; z-index: 0; height: 200svh; margin-top: -100svh; } .footer-dock .footer--home { position: sticky; top: 0; height: 100svh; min-height: 0; } /* work page: the cards section sits ON TOP of the pinned footer (z-index), so the footer stays hidden behind it until the section scrolls up off it. That is what reveals the footer, and it is why the footer can never cut into a card: its visible edge is always the section's own bottom padding. */ .work-grid-section { position: relative; z-index: 1; } /* about page: same reveal as the work page. Commitments + testimonials together fill the last 100svh above the footer, so both sit on top of it. Full-bleed (padding, not margin) so the pinned footer can't show through the side gutters; the section divider line is drawn as a background instead of a border. */ .ab-section.ab-commit, .ab-section.ab-testi { position: relative; z-index: 1; margin-inline: 0; padding-inline: 28px; border-top: 0; background: linear-gradient(var(--line), var(--line)) 28px 0 / calc(100% - 56px) 1px no-repeat, var(--bg); } /* the gap between them is padding too: a margin would be an uncovered strip where the footer shows */ .ab-commit + .ab-section.ab-testi { margin-top: 0; padding-top: calc(clamp(48px, 5vw, 72px) + 28px); background-position: 28px clamp(48px, 5vw, 72px), 0 0; } .ab-section.ab-testi { padding-bottom: clamp(72px, 8vw, 120px); } /* services page: packages + closing CTA fill the last 100svh above the footer, same reveal */ body.page-services #pricing, body.page-services .svc-cta { position: relative; z-index: 1; background: var(--bg); } } /* header pill inverts over the dark footer */ body.footer-active .nav, body.page-dark .nav { background-color: rgba(10,10,10,.82) !important; background-image: none !important; border-color: rgba(255,255,255,.22) !important; color: #f4f2ee; } body.footer-active .nav::before, body.page-dark .nav::before { display: none; } .footer--home .footer__bottom { padding-inline: clamp(24px, 12vw, 200px); } .footer--home .footer__cta { gap: clamp(46px, 10.5vh, 110px); } .footer--home .footer__start { margin-top: 0; } .footer--home .footer__links { margin-top: clamp(46px, 10.5vh, 110px); } body.footer-active .nav__links a, body.page-dark .nav__links a { color: #f4f2ee; } body.footer-active .nav__logo img, body.page-dark .nav__logo img { filter: invert(1); } #pricing { scroll-margin-top: 110px; } #testimonials { padding-bottom: 0; } #testimonials + #pricing { padding-top: clamp(32px, 4vw, 56px); } /* ---------- Hero: pinned, headline glides centered -> left (progress vars set in script.js) ---------- */ .hero { --hp: 0; --hq: 0; display: block; margin-bottom: -14svh; height: calc(100svh + 130svh); min-height: 0; padding: 0; overflow: clip; } .hero__grid { position: sticky; top: 0; height: 100svh; align-content: center; padding-top: 0; } .hero__scroll { position: sticky; bottom: 24px; left: auto; margin: 0 auto; width: max-content; opacity: calc(1 - var(--hp) * 6); } .hero__stack { position: relative; width: 100%; transform: translate3d(0, calc(var(--hs, 0px) * var(--hq)), 0); } .hero__line { transform: translate3d(calc(var(--sx, 0px) * var(--hp)), 0, 0); } .hero__line:first-child { color: color-mix(in srgb, var(--orange) calc(var(--hp) * 100%), var(--text)); font-weight: calc(300 + 400 * var(--hp)); } .hero__spots, .hero__more { position: absolute; left: var(--gl, 0px); margin: 0; opacity: var(--hq); transform: translate3d(0, calc((1 - var(--hq)) * 16px), 0); visibility: hidden; } .hero.is-more .hero__spots, .hero.is-more .hero__more { visibility: visible; } .hero__spots { bottom: 100%; padding-bottom: 28px; } .hero__spots[hidden] { display: none; } .hero__spots .eyebrow__dot { flex: none; } .hero__spots.is-full .eyebrow__dot { background: var(--muted); box-shadow: 0 0 0 4px rgba(15,15,15,.08); } .hero__more { top: 100%; padding-top: 32px; text-align: left; } .hero__more .hero__sub { margin: 0 0 24px; max-width: 46ch; font-size: clamp(16px, 1.5vw, 20px); } .hero__btn { display: inline-flex; align-items: center; gap: 18px; padding: 8px 8px 8px 30px; border-radius: 999px; color: #fff; font-weight: 600; font-size: 18px; letter-spacing: -.01em; background: linear-gradient(110deg, #ff7a1a, #ff5a00, #ffa04d, #ff6a00, #ff7a1a); background-size: 600px 100%; animation: heroBtnFlow 5s linear infinite; box-shadow: 0 14px 30px rgba(255,106,0,.32), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .hero__btn-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.2); transition: transform .3s var(--ease), background-color .3s; } .hero__btn-arrow svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) { .hero__btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(255,106,0,.42), inset 0 1px 0 rgba(255,255,255,.35); } .hero__btn:hover .hero__btn-arrow { transform: translateX(3px); background: rgba(255,255,255,.3); } } .hero__btn:active { transform: scale(.98); } @keyframes heroBtnFlow { to { background-position: -600px 0; } } @media (max-width: 800px) { .hero.is-left .hero__line { text-align: left; } .hero__line { transform: none; } } @media (prefers-reduced-motion: reduce) { .hero { --hp: 1; --hq: 1; height: auto; padding: calc(var(--nav-h) + 48px) 0 96px; } .hero__grid { position: static; height: auto; } .hero__line { transform: none; text-align: left; } .hero__spots, .hero__more { position: static; visibility: visible; transform: none; padding: 0; margin: 20px 0; } .hero__scroll { display: none; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal, [data-split] .w > span { opacity: 1; transform: none; } .statement__text .w { color: var(--text); } } /* ========================================================= SERVICES PAGE (dark) The page swaps the colour tokens, so shared components (packages, eyebrows, footer) follow without their own rules. ========================================================= */ body.page-dark { --bg: #080808; --bg-2: #111111; --bg-3: #1a1a1a; --text: #f4f2ee; --muted: #8d8d88; --line: rgba(255,255,255,.1); --line-strong: rgba(255,255,255,.2); background: var(--bg); color: var(--text); } body.page-dark .bg { display: none; } body.page-services .package { background: var(--bg-2); } .svc-label { margin: 0; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .svc-label strong { margin-right: 6px; color: var(--text); font-weight: 600; } .svc-hero { display: grid; grid-template-columns: 44% 1fr; grid-template-rows: 1fr auto; min-height: 76vh; padding: calc(var(--nav-h) + 110px) 28px 44px; } .svc-hero__title { grid-column: 1; grid-row: 1; margin: 0; font-weight: 400; font-size: clamp(28px, 2.4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; } .svc-hero__lead { grid-column: 2; grid-row: 1; max-width: 21em; margin: 0; color: var(--muted); font-weight: 300; font-size: clamp(26px, 2.4vw, 44px); line-height: 1.15; letter-spacing: -0.03em; } .svc-jump { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; margin-top: 48px; } .svc-jump__label { margin-right: 40px; color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .svc-jump a { padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: border-color .25s, color .25s; } .svc-jump a:hover { color: var(--orange); } .svc-jump a.is-active { border-color: var(--text); } .svc-video { position: relative; margin: 0 10px; aspect-ratio: 32 / 5; min-height: 200px; border-radius: 6px; overflow: hidden; background: #000; } .svc-video video { display: block; width: 100%; height: 100%; object-fit: cover; } .svc-video__toggle { position: absolute; top: 16px; left: 16px; padding: 5px 10px; border: 0; border-radius: 3px; background: rgba(255,255,255,.28); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color .2s; } .svc-video__toggle:hover { background: rgba(255,255,255,.42); } /* scroll lock: the aside is sticky for the whole section, the categories scroll past it */ .svc-lock { display: grid; grid-template-columns: 44% 1fr; margin: clamp(80px, 12vw, 160px) 28px 0; border-top: 1px solid var(--line); } .svc-lock__aside { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 28px) 40px 24px 0; } .svc-lock__intro { max-width: 330px; margin: 40px 0 0; color: var(--muted); font-size: 16px; line-height: 1.45; } .svc-media { position: relative; width: min(460px, 100%); aspect-ratio: 5 / 3; border-radius: 8px; overflow: hidden; background: var(--bg-2); } .svc-media__slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .6s var(--ease); } .svc-media__slide.is-active { opacity: 1; } .svc-media__glyph { color: rgba(255,106,0,.6); font-size: clamp(64px, 7vw, 110px); line-height: 1; } .svc-media__tag { position: absolute; left: 18px; bottom: 16px; color: rgba(244,242,238,.7); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .svc-media__slide--1 { background: radial-gradient(circle at 30% 30%, rgba(255,106,0,.42), transparent 55%), linear-gradient(160deg, #2a1608, #0b0b0b); } .svc-media__slide--2 { background: radial-gradient(circle at 70% 25%, rgba(255,138,42,.4), transparent 55%), linear-gradient(160deg, #1c1c1c, #0b0b0b); } .svc-media__slide--3 { background: radial-gradient(circle at 50% 80%, rgba(255,106,0,.38), transparent 55%), linear-gradient(200deg, #221410, #0b0b0b); } .svc-media__slide--4 { background: radial-gradient(circle at 20% 60%, rgba(255,106,0,.36), transparent 45%), radial-gradient(circle at 80% 40%, rgba(255,138,42,.28), transparent 45%), linear-gradient(160deg, #1a1a1a, #0b0b0b); } .svc-media__slide--5 { background: radial-gradient(circle at 60% 30%, rgba(255,138,42,.4), transparent 55%), linear-gradient(180deg, #1f1410, #0b0b0b); } .svc-cat { display: grid; grid-template-columns: minmax(110px, 22%) 1fr; padding: 16vh 0; opacity: .3; transition: opacity .5s var(--ease); } .svc-cat:first-child { padding-top: 30vh; } .svc-cat:last-child { padding-bottom: 30vh; } .svc-cat.is-active { opacity: 1; } .svc-cat__name { position: sticky; top: 45vh; align-self: start; margin: 0; font-weight: 400; font-size: clamp(24px, 2vw, 34px); letter-spacing: -0.02em; } .svc-cat__lead { max-width: 22em; margin: 0 0 56px; font-weight: 400; font-size: clamp(24px, 2.1vw, 36px); line-height: 1.15; letter-spacing: -0.03em; } .svc-cat__items { margin: 0; padding: 0; list-style: none; } .svc-cat__items li { padding: 13px 0; border-top: 1px solid var(--line); font-size: 16px; font-weight: 500; } .svc-clients { margin: 0 28px; padding: 28px 0 clamp(60px, 8vw, 110px); border-top: 1px solid var(--line); } .svc-clients__title { max-width: 23em; margin: clamp(80px, 10vw, 140px) 0 64px; color: var(--muted); font-weight: 300; font-size: clamp(26px, 2.4vw, 44px); line-height: 1.15; letter-spacing: -0.03em; } .svc-clients__title span { color: var(--text); font-weight: 400; } .svc-clients__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .svc-client { position: relative; display: grid; place-items: center; aspect-ratio: 6 / 7; border-radius: 6px; background: var(--bg-2); transition: background-color .3s; } .svc-client__mark { color: #7d7d78; font-weight: 600; font-size: clamp(18px, 1.7vw, 28px); letter-spacing: .08em; transition: color .3s; } .svc-client__cat { position: absolute; left: 16px; bottom: 14px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .svc-client:hover { background: #161616; } .svc-client:hover .svc-client__mark { color: var(--text); } .svc-cta { padding: 0 28px clamp(90px, 12vw, 160px); text-align: center; } .svc-cta p { max-width: 40ch; margin: 0 auto 24px; color: var(--muted); font-size: 16px; } .svc-cta__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .svc-cta__btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-size: 15px; font-weight: 500; transition: background-color .25s, border-color .25s; } .svc-cta__btn:hover { border-color: var(--text); } .svc-cta__btn--solid { background: var(--orange); border-color: var(--orange); color: #fff; } .svc-cta__btn--solid:hover { background: var(--orange-dark); border-color: var(--orange-dark); } @media (max-width: 900px) { .svc-hero { grid-template-columns: 1fr; min-height: 0; gap: 20px; padding: calc(var(--nav-h) + 60px) 16px 32px; } .svc-hero__title, .svc-hero__lead, .svc-jump { grid-column: 1; grid-row: auto; } .svc-jump { gap: 8px 18px; margin-top: 12px; } .svc-jump__label { margin-right: 8px; } .svc-video { margin: 0 8px; } .svc-lock { grid-template-columns: 1fr; margin-inline: 16px; } .svc-lock__aside { position: static; height: auto; gap: 32px; padding: 28px 0 0; } .svc-cat { grid-template-columns: 1fr; gap: 16px; padding: 64px 0; opacity: 1; } .svc-cat:first-child { padding-top: 48px; } .svc-cat:last-child { padding-bottom: 64px; } .svc-cat__name { position: static; } .svc-cat__lead { margin-bottom: 32px; } .svc-clients { margin-inline: 16px; } .svc-clients__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .svc-clients__grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= ABOUT PAGE (dark) - same grid, gutters and label rows as the services page ========================================================= */ .ab-section { margin: 0 28px; padding-top: 28px; border-top: 1px solid var(--line); } .ab-section + .ab-section, .ab-caps + .ab-section, .ab-logos + .ab-section { margin-top: clamp(100px, 12vw, 180px); } .svc-video + .ab-section { margin-top: clamp(100px, 12vw, 160px); } .ab-photo { margin: 0; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: var(--bg-2); } .ab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* image trail: images fade in and follow the cursor, above the video banner */ .ab-trail { position: relative; margin: 10px; padding: calc(var(--nav-h) + 28px) 18px clamp(64px, 9vw, 120px); border-radius: 8px; border-top: 1px solid var(--line); min-height: 60svh; overflow: hidden; cursor: crosshair; } .ab-trail__title { max-width: 10em; margin: clamp(24px, 6vh, 64px) 0 0; font-weight: 600; font-size: clamp(36px, 6vw, 84px); line-height: 0.98; letter-spacing: -0.03em; } .ab-trail__imgs { position: absolute; inset: 0; pointer-events: none; } .ab-trail__img { position: absolute; top: 0; left: 0; width: clamp(160px, 16vw, 240px); aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; opacity: 0; will-change: transform, opacity; z-index: 1; } .ab-trail__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .ab-trail::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 24px; color: var(--muted); font-size: 12px; } .ab-story__grid { display: grid; grid-template-columns: 44% 1fr; gap: 56px; margin-top: clamp(60px, 8vw, 110px); } .ab-story__title { max-width: 13em; margin: 0; color: #56564f; font-weight: 600; font-size: clamp(34px, 3.8vw, 64px); line-height: 1.04; letter-spacing: -0.035em; } .ab-story__title span { color: var(--text); } .ab-story__copy { max-width: 38em; color: var(--muted); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; } .ab-story__copy p + p { margin-top: 1.1em; } .ab-intro__grid { display: grid; grid-template-columns: 44% 1fr; gap: 56px; align-items: start; margin-top: 56px; } .ab-intro__text { max-width: 24em; margin: 0; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.45; letter-spacing: -0.015em; } /* capabilities: continuous self-moving marquee, right to left, independent of scroll */ .ab-caps { position: relative; margin-top: clamp(100px, 12vw, 180px); margin-inline: 28px; padding-top: 28px; border-top: 1px solid var(--line); } .ab-caps__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: clamp(32px, 5vh, 56px); } .ab-caps__all { color: var(--muted); font-size: 13px; transition: color .25s; } .ab-caps__all:hover { color: var(--orange); } .ab-caps__viewport { overflow: hidden; margin: 0 -28px; padding: 0 28px; } .ab-caps__marquee { display: flex; width: max-content; animation: ab-caps-scroll 44s linear infinite; } .ab-caps__track { display: flex; gap: 16px; width: max-content; flex: none; padding-right: 16px; } @keyframes ab-caps-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .ab-cap { display: block; flex: none; width: clamp(220px, 20vw, 300px); } .ab-cap__img { display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--bg-2); } .ab-cap__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } /* index page: capabilities fills the viewport with its own tight rhythm */ #approach { padding: clamp(16px, 2vw, 32px) 0; } #approach .ab-caps { min-height: auto; margin-top: 0; margin-inline: 0; padding-top: clamp(16px, 2vw, 28px); } #approach .ab-caps__head { padding-inline: 20px; } #approach .ab-caps__head .svc-label { font-size: clamp(30px, 4vw, 52px); font-weight: 500; letter-spacing: -0.02em; text-transform: none; } #approach .ab-caps__head .svc-label strong { font-weight: 600; } #approach .ab-caps__viewport { margin: 0; padding: 0; } .ab-cap__name { display: block; margin-top: 18px; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: -0.02em; transition: color .25s; } .ab-cap__desc { display: block; margin-top: 6px; max-width: 26em; color: var(--muted); font-size: 14px; line-height: 1.5; } @media (hover: hover) { .ab-cap:hover .ab-cap__img img { transform: scale(1.05); } .ab-cap:hover .ab-cap__name { color: var(--orange); } } /* logo marquee: two rows, opposite directions, pure CSS loop (4 copies so -50% always lands on a repeat boundary) */ .ab-logos { margin-top: 48px; display: grid; gap: 14px; padding: 8px 0; } .ab-logos + .ab-section { margin-top: 48px; } .ab-logos__heading { margin: 0 0 24px; text-align: center; font-family: var(--font-poppins); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -0.06em; color: var(--text); } .ab-logos__row { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); } .ab-logos__track { display: flex; flex-wrap: nowrap; align-items: center; width: max-content; will-change: transform; animation: ab-logos-scroll 35s linear infinite; } .ab-logos__row--rtl .ab-logos__track { animation-direction: reverse; } .ab-logos__row:hover .ab-logos__track { animation-play-state: paused; } @keyframes ab-logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ab-logos__logo { display: flex; align-items: center; gap: 10px; margin-right: 56px; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3vw, 38px); letter-spacing: -0.01em; color: var(--muted); } .ab-logos__glyph { font-size: 0.7em; } .ab-commit { padding-bottom: 0; } .ab-commit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-top: 56px; } .ab-commit__title { margin: 0 0 32px; font-weight: 600; font-size: clamp(34px, 3.6vw, 60px); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; } .ab-commit__copy p { max-width: 36em; color: rgba(244,242,238,.82); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; } .ab-commit__copy p + p { margin-top: 1em; } /* testimonials: continuous marquee; hover eases the speed down (script.js) */ .ab-commit + .ab-testi { margin-top: clamp(48px, 5vw, 72px); } .ab-testi__marquee { margin: 40px -28px 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .ab-testi__track { display: flex; width: max-content; will-change: transform; animation: ab-testi-scroll 70s linear infinite; } .ab-testi__dup { display: contents; } @keyframes ab-testi-scroll { to { transform: translateX(-50%); } } .ab-testi__card { flex: none; display: flex; flex-direction: column; width: clamp(300px, 30vw, 440px); margin: 0 20px 0 0; padding: 32px 30px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); transition: border-color .3s var(--ease); } .ab-testi__card:hover { border-color: var(--line-strong); } .ab-testi__stars { color: var(--orange); font-size: 13px; letter-spacing: 3px; margin-bottom: 18px; } .ab-testi__card p { flex: 1; margin: 0 0 28px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--text); } .ab-testi__card footer strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; } .ab-testi__card footer span { font-size: 13px; color: var(--muted); } @media (max-width: 900px) { .ab-testi__marquee { margin-inline: -16px; } } @media (prefers-reduced-motion: reduce) { .ab-testi__marquee { overflow-x: auto; } .ab-testi__dup { display: none; } } @media (max-width: 900px) { .ab-section { margin-inline: 16px; } .ab-trail { margin: 8px; min-height: 46svh; } .ab-story__grid, .ab-intro__grid, .ab-commit__grid { grid-template-columns: 1fr; gap: 32px; } .ab-story__grid { margin-top: 40px; } .ab-caps { margin-inline: 16px; } .ab-caps__viewport { margin: 0 -16px; padding: 0 16px; overflow-x: auto; } .ab-caps__marquee { animation: none; } .ab-caps__track:last-child { display: none; } .ab-cap { width: 72vw; } .ab-logos__logo { font-size: 22px; margin-right: 36px; } } @media (prefers-reduced-motion: reduce) { .ab-caps__viewport { overflow-x: auto; } .ab-caps__marquee { animation: none; } .ab-caps__track:last-child { display: none; } } /* ========================================================= MOBILE OPTIMIZATION PASS — mobile/tablet-only overrides. Every rule below sits inside a max-width media query, so viewports wider than 900px (desktop) are untouched. ========================================================= */ /* Phones & tablets mirror the desktop design (<=900px is where the site used to switch to its own mobile layout). */ @media (max-width: 900px) { /* header pill: same as desktop, logo + the four links inside the pill (no burger menu) */ .nav__burger { display: none; } .nav__links { position: static; inset: auto; width: auto; height: auto; flex-direction: row; align-items: center; gap: clamp(10px, 3.6vw, 18px); padding: 0; background: none; transform: none; transition: none; } .nav__links a { font-family: var(--font-body); font-size: clamp(12px, 3.5vw, 14px); font-weight: 400; color: #0f0f0f; } .nav__links a::before { content: ""; position: absolute; inset: -14px -6px; } /* 44px tap area without growing the pill */ .nav { padding: 12px clamp(14px, 4vw, 22px); } .nav__logo img { height: 22px; } .nav.is-hidden { --nav-hide-y: 0%; } /* desktop keeps the pill on screen while scrolling */ /* selected work (home): desktop's pinned layout, stacked. Details pinned on top, cards scroll underneath, and the details swap as each card crosses the middle of the screen (same script as desktop). */ .work { --wc-h: 34svh; } .work__lock { grid-template-columns: 1fr; gap: 0; } .work__left { position: sticky; top: 0; z-index: 2; height: auto; padding: calc(var(--nav-h) + 36px) 0 18px; background: var(--bg); } .work__name, .work__desc, .work__meta { display: revert; } .work__meta { display: flex; margin-top: 16px; } .work__desc { margin: 12px 0 0; font-size: 14px; } .work__all { margin-top: 12px; } .work__list { gap: 14px; padding-block: 8px 42svh; } .work__card { height: var(--wc-h); overflow: hidden; border-radius: 16px; padding-top: 0; color: #f4f2ee; } .work__card::before { inset: 0; height: auto; aspect-ratio: auto; border-radius: 0; } .work__wordmark { inset: 0; aspect-ratio: auto; font-size: clamp(34px, 11vw, 64px); } .work__glyph { top: 18px; left: 20px; font-size: 22px; } .work__cap { display: none; } /* capabilities (home + about): moving on its own like desktop, smaller cards so more fit on screen */ .ab-caps__viewport { overflow: hidden; } .ab-caps__marquee { animation: ab-caps-scroll 36s linear infinite; } .ab-caps__track:last-child { display: flex; } .ab-cap { width: clamp(150px, 44vw, 220px); } .ab-cap__name { margin-top: 12px; font-size: 16px; } .ab-cap__desc { font-size: 12.5px; line-height: 1.45; } } @media (max-width: 900px) and (prefers-reduced-motion: reduce) { .ab-caps__viewport { overflow-x: auto; } .ab-caps__track:last-child { display: none; } } @media (max-width: 768px) { /* nav pill no longer touches the screen edges */ .nav { width: calc(100% - 20px); } /* video banner: aspect-ratio 32/5 + min-height 200px forced a 1280px-wide box (913px sideways overflow) */ .svc-video { aspect-ratio: 16 / 9; min-height: 0; } /* headings/paragraphs: no single orphaned word on the last line */ h1, h2, h3 { text-wrap: balance; } p, li, blockquote { text-wrap: pretty; } /* about: marquee heading had no side inset */ .ab-logos__heading { padding-inline: 16px; } /* the
that holds this heading to 2 lines on desktop left "right." orphaned at phone widths */ .testi__title br { display: none; } /* tap targets >= 44px. Text links get an invisible hit area so the visual layout doesn't move. */ .nav__logo::after, .work__all::after, .ab-caps__all::after { content: ""; position: absolute; inset: -12px -6px; } .work__all, .ab-caps__all { position: relative; } .footer--home .footer__links a { padding: 11px 0; } .svc-jump a { padding: 12px 8px; } .contact-email__link, .contact-social a { padding: 9px 0; } .filter { min-height: 44px; } } @media (max-width: 600px) { /* work filters: -18px bleed pushed the bar 2px past the screen edge */ .filters { margin-right: -16px; padding-right: 16px; } } @media (max-width: 480px) { /* two-word project titles ("Vitalé Nutrition") broke one word per line at 44px */ .project-hero__title { font-size: clamp(30px, 9.4vw, 44px); } } @media (max-width: 360px) { /* smallest phones: keep a clear gap between the logo and the four header links */ .nav { padding-inline: 12px; } .nav__logo img { height: 19px; } .nav__links { gap: 9px; } .nav__links a { font-size: 11.5px; } } @media (max-width: 800px) { /* hero headline: same glide as desktop (centered -> left) instead of a text-align snap. Each line stays on one row, sized to the screen, so the script's per-line offsets are right. */ .hero__title { font-size: calc((100vw - 32px) / 12.6); } .hero__line, .hero.is-left .hero__line { white-space: nowrap; text-align: center; transform: translate3d(calc(var(--sx, 0px) * var(--hp)), 0, 0); will-change: transform; } /* weight flips once at the halfway point instead of re-laying out the text on every scroll frame */ .hero__line:first-child { font-weight: 300; } .hero.is-left .hero__line:first-child { font-weight: 700; } } @media (max-width: 800px) and (prefers-reduced-motion: reduce) { .hero__line, .hero.is-left .hero__line { transform: none; text-align: left; white-space: normal; } } @media (max-width: 900px) { /* home reviews: big review stays on top, the other six become a swipeable row instead of a tall stack */ .testi__visual { min-height: 170px; } .testi__featured-body { padding: 24px 20px; } .testi__featured-quote { font-size: 16px; margin-bottom: 20px; } .testi__grid { --bleed: calc((100vw - 100%) / 2); display: flex; gap: 12px; margin-inline: calc(var(--bleed) * -1); padding: 0 var(--bleed) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .testi__grid::-webkit-scrollbar { display: none; } .testi__grid .quote { flex: 0 0 min(76vw, 300px); padding: 20px 18px; scroll-snap-align: center; } .testi__grid .quote p { font-size: 14px; margin-bottom: 16px; } /* packages (home + services): all three in one row, swipe left/right */ .packages { --bleed: calc((100vw - 100%) / 2); display: flex; align-items: stretch; gap: 12px; margin-inline: calc(var(--bleed) * -1); padding: 4px var(--bleed) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .packages::-webkit-scrollbar { display: none; } .package { flex: 0 0 min(82vw, 340px); scroll-snap-align: center; } } @media (max-width: 800px) { /* FAQ: two columns like desktop, type scaled to fit */ .faq__grid { grid-template-columns: 1fr 1fr; gap: 0 16px; } .faq__row:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); } .faq__row summary { gap: 8px; padding: 16px 0; font-size: 14px; line-height: 1.35; } .faq__row p { font-size: 13px; line-height: 1.55; margin-bottom: 16px; } } @media (max-width: 768px) { /* smaller booking pill (closed width is set in script.js) */ .booking-dock__trigger { gap: 9px; padding: 6px; } .booking-dock__avatar { width: 28px; height: 28px; flex-basis: 28px; } .booking-dock__trigger-text { font-size: 12.5px; } .booking-dock__arrow { width: 26px; height: 26px; flex-basis: 26px; } } /* work page (phones): desktop's masonry, two columns instead of three. Cards keep their desktop proportions (inline aspect-ratio) and everything inside scales down by the same ~0.4 factor. */ @media (max-width: 800px) { .wgrid { columns: 2; column-gap: 12px; } .wcard { margin-bottom: 24px; } .wcard__media { border-radius: 10px; } .wcard .case__glyph { font-size: clamp(52px, 17vw, 84px); } .wcard .case__wordmark { top: 12px; left: 12px; font-size: 9.5px; letter-spacing: .2em; } .wcard__palette { right: 10px; bottom: 10px; gap: 4px; } .wcard__palette i { width: 12px; height: 12px; } .wcard__body { padding: 10px 2px 0; } .wcard h2 { font-size: 15px; margin-bottom: 3px; } .wcard p { font-size: 12px; line-height: 1.4; } } /* services "What I do" (phones): same pinned pattern as Selected Work on home. Intro + image pinned on top, categories scroll underneath, the one crossing mid-screen lights up and swaps the image (existing script). */ @media (max-width: 900px) { .svc-lock__aside { position: sticky; top: 0; z-index: 2; gap: 14px; padding: calc(var(--nav-h) + 24px) 0 16px; background: var(--bg); } .svc-lock__intro { max-width: none; margin-top: 10px; font-size: 13.5px; } .svc-media { width: 100%; aspect-ratio: auto; height: clamp(110px, 17svh, 160px); } .svc-media__glyph { font-size: clamp(44px, 13vw, 72px); } .svc-cat { gap: 12px; padding: 40px 0; opacity: .3; } .svc-cat:first-child { padding-top: 32px; } .svc-cat:last-child { padding-bottom: 34svh; } .svc-cat__lead { font-size: clamp(20px, 5.6vw, 26px); margin-bottom: 20px; } .svc-cat__items li { padding: 11px 0; font-size: 14px; } } /* booking pill (phones): the width/height morph was re-blurring the page behind it on every frame. Solid glass tint instead of backdrop blur, no blend layer, and a settle curve without the overshoot. */ @media (max-width: 768px) { .booking-dock__shell { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(20,20,20,.94); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 28px rgba(0,0,0,.3); transition: width .5s cubic-bezier(.32,.72,0,1), height .5s cubic-bezier(.32,.72,0,1), border-radius .5s cubic-bezier(.32,.72,0,1); will-change: auto; } .booking-dock__shell::before { mix-blend-mode: normal; opacity: .5; } .booking-dock__shell.is-squish { transform: translateZ(0); } .booking-dock__content { transition-duration: .28s; } } /* ---------- Page transitions (cross-document View Transitions: Chrome/Edge 126+, Safari 18.2+; others just navigate) ---------- The page crossfades underneath while the header pill and the booking pill stay put; only their colours blend into the next page's (light pill on light pages, dark on About/Services). */ @view-transition { navigation: auto; } .nav { view-transition-name: site-nav; } .booking-dock__shell { view-transition-name: booking-pill; } /* on the shell, not the dock: a named ancestor would cut off the shell's backdrop blur */ /* Both pills get their final size from script. These are the same numbers the scripts paint at the top of a page, so the incoming page's pills already sit exactly where the outgoing ones are before any script runs. */ .booking-dock__shell { width: min(352px, calc(100vw - 32px)); height: 66px; border-radius: 999px; } @media (max-width: 768px) { .booking-dock__shell { width: min(298px, calc(100vw - 32px)); height: 56px; } } @media (min-width: 900px) { .nav { width: min(calc(100vw - 24px), 1700px); max-width: 1700px; height: 64px; margin: 16px auto 0; padding: 10px 32px 10px 40px; gap: 24px; border-radius: 28px; border-color: rgba(255,255,255,.7); background-color: rgba(251,252,248,.45); background-image: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.15) 45%, rgba(255,106,0,.03) 100%); backdrop-filter: blur(10px) saturate(1.5); -webkit-backdrop-filter: blur(10px) saturate(1.5); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(15,15,15,.1), 0 12px 32px rgba(15,15,15,.08); } .nav.is-scrolled { padding: 10px 32px 10px 40px; } /* work/project pages keep the solid pill colour, not a different inset */ .nav .nav__logo { transform: scale(1.35); transform-origin: left center; margin: 0; } } @media (max-width: 900px) { .nav.is-scrolled { padding: 12px clamp(14px, 4vw, 22px); } } /* the entry loader never belongs in a page-to-page hop (index.html ships it in the markup, before script hides it) */ html:active-view-transition .loader { display: none; } ::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.22,1,.36,1); } ::view-transition-old(root) { animation: vt-page-out .3s cubic-bezier(.4,0,1,1) both; } ::view-transition-new(root) { animation: vt-page-in .6s cubic-bezier(.22,1,.36,1) .08s both; } @keyframes vt-page-out { to { opacity: 0; } } @keyframes vt-page-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } } ::view-transition-old(site-nav), ::view-transition-new(site-nav) { height: 100%; animation-duration: .45s; } /* booking pill looks the same on every page: hold the outgoing one, the live one takes over when the hop ends */ ::view-transition-old(booking-pill) { animation: none; opacity: 1; } ::view-transition-new(booking-pill) { animation: none; opacity: 0; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* phones: three dates per page (script), a little less chrome around them so each card has room */ @media (max-width: 480px) { .booking-dock__preview { padding: 12px 10px 10px; gap: 12px; } .booking-dock__daysrow { gap: 4px; } .booking-dock__daynav { width: 24px; height: 24px; flex-basis: 24px; } } /* ========================================================= Cookie consent (consent.js) + calendar placeholder + cookie policy page ========================================================= */ .consent { position: fixed; left: 24px; bottom: 104px; z-index: 600; width: min(380px, calc(100vw - 32px)); opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .45s var(--ease), transform .6s var(--ease); pointer-events: none; } .consent.is-on { opacity: 1; transform: none; pointer-events: auto; } .consent__card { display: grid; gap: 12px; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 22px; background: #fff; color: var(--text); box-shadow: 0 24px 48px -20px rgba(15, 15, 15, .35); font-family: var(--font-body); } .consent__title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .consent__text { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-wrap: pretty; } .consent__text a { color: var(--text); text-underline-offset: 3px; } .consent__settings { display: grid; gap: 10px; padding: 12px 0 2px; border-top: 1px solid var(--line); } .consent__settings[hidden] { display: none; } .consent__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; } .consent__row strong { display: block; font-size: 13px; font-weight: 600; } .consent__row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; } .consent__row input { flex: none; width: 38px; height: 22px; margin: 0; appearance: none; border-radius: 999px; background: var(--bg-3); position: relative; cursor: pointer; transition: background-color .25s var(--ease); } .consent__row input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 15, 15, .25); transition: transform .3s var(--ease); } .consent__row input:checked { background: var(--orange); } .consent__row input:checked::after { transform: translateX(16px); } .consent__row input:disabled { opacity: .55; cursor: default; } .consent__row input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } .consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .consent__btn { height: 40px; padding: 0 18px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font: 500 13.5px var(--font-body); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease); } .consent__btn:hover { border-color: var(--text); } .consent__btn:active { transform: scale(.97); } .consent__btn--solid { border-color: var(--text); background: var(--text); color: #fff; } .consent__btn--solid:hover { background: var(--orange); border-color: var(--orange); } .consent__link { margin-left: auto; padding: 8px 4px; border: 0; background: none; color: var(--muted); font: 500 13px var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .consent__link:hover { color: var(--text); } .consent :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } @media (max-width: 768px) { .consent { left: 16px; bottom: 96px; } } @media (prefers-reduced-motion: reduce) { .consent, .consent__row input, .consent__row input::after { transition: none; } } /* calendar placeholder shown until the visitor allows the Cal.com calendar (both hosts are dark) */ .cal-consent { display: grid; justify-items: start; align-content: center; gap: 12px; height: 100%; min-height: 220px; padding: 28px; border: 1px dashed rgba(255, 255, 255, .2); border-radius: 14px; color: #f4f4f2; font-family: var(--font-body); } .cal-consent strong { font-size: 16px; font-weight: 600; } .cal-consent p { margin: 0; max-width: 42ch; color: rgba(244, 244, 242, .7); font-size: 14px; line-height: 1.5; text-wrap: pretty; } .contact-cal .cal-consent { min-height: inherit; } .cal-consent a { color: inherit; text-underline-offset: 3px; } .cal-consent button { height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--orange); color: #fff; font: 500 14px var(--font-body); cursor: pointer; transition: background-color .25s, transform .25s var(--ease); } .cal-consent button:hover { background: var(--orange-dark); } .cal-consent button:active { transform: scale(.97); } .cal-consent button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* footer link */ .footer__cookie-link { margin-left: 14px; color: inherit; opacity: .6; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: opacity .25s; } .footer__cookie-link:hover { opacity: 1; } /* cookie policy page */ .policy { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: calc(var(--nav-h) + 80px) 0 120px; font-family: var(--font-body); } .policy h1 { margin: 0 0 12px; font-size: clamp(40px, 6vw, 72px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; } .policy .policy__updated { margin: 0 0 48px; color: var(--muted); font-size: 14px; } .policy h2 { margin: 48px 0 12px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; } .policy p, .policy li { color: var(--text); font-size: 16px; line-height: 1.65; max-width: 68ch; } .policy table { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 14px; } .policy th, .policy td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; } .policy th { color: var(--muted); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .policy code { font-size: 13px; } .policy .policy__btn { display: inline-flex; align-items: center; height: 48px; margin-top: 8px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--text); color: #fff; font: 500 15px var(--font-body); cursor: pointer; transition: background-color .25s; } .policy .policy__btn:hover { background: var(--orange); } @media (max-width: 600px) { .policy table, .policy thead, .policy tbody, .policy tr, .policy td, .policy th { display: block; } .policy thead { display: none; } .policy td { border: 0; padding: 4px 0; } .policy tr { padding: 12px 0; border-bottom: 1px solid var(--line); } }