:root {
  --ink: #121514;
  --paper: #f5f3ed;
  --paper-deep: #e8e5dc;
  --green: #a9d447;
  --green-deep: #667d24;
  --line: rgba(18, 21, 20, .17);
  --light-line: rgba(245, 243, 237, .2);
  --sans: "Manrope", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --mono: "DM Mono", Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; } button { font: inherit; } img { display: block; max-width: 100%; }
::selection { color: var(--ink); background: var(--green); }
.skip-link { position: fixed; z-index: 100; top: -60px; left: 20px; padding: 10px 13px; color: var(--ink); background: var(--green); font-size: 12px; font-weight: 800; transition: top .2s; }.skip-link:focus { top: 15px; }
.grain { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }.grain--light { opacity: .12; mix-blend-mode: screen; }

.site-header { position: absolute; z-index: 10; top: 0; display: flex; align-items: center; width: 100%; height: 82px; padding: 0 clamp(20px, 4vw, 62px); color: var(--ink); }.wordmark { font-size: 15px; font-weight: 800; letter-spacing: -.085em; }.wordmark span { color: var(--green-deep); }.site-header nav { display: flex; gap: 24px; margin-left: clamp(30px, 5vw, 90px); }.nav-link { position: relative; padding: 7px 0; color: rgba(18,21,20,.6); font-size: 10px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }.nav-link::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }.nav-link.is-active { color: var(--ink); }.header-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }.theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; color: inherit; background: none; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }.theme-toggle i { color: var(--green-deep); font-size: 15px; font-style: normal; }.header-contact { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.header-contact span { margin-left: 5px; color: var(--green-deep); font-size: 14px; }.site-header--creative { color: #fff2e8; }.wordmark--creative span { color: #ffab55; }.nav-link--creative { color: rgba(255,242,232,.58); }.nav-link--creative.is-active { color: #fff2e8; }.theme-toggle--creative i, .header-contact--creative span { color: #ffab55; }

.pro-hero { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; min-height: 790px; padding: 147px clamp(20px, 7vw, 132px) 62px; overflow: hidden; background: var(--paper); }.pro-hero::before { content: ""; position: absolute; top: 0; right: 0; width: 51%; height: 100%; background: var(--paper-deep); }.pro-hero__copy, .pro-portrait, .hero-index { position: relative; z-index: 1; }.kicker, .creator-kicker { display: flex; gap: 12px; align-items: center; margin: 0 0 28px; color: rgba(18,21,20,.56); font: 500 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }.kicker span { color: var(--green-deep); }.pro-hero h1 { max-width: 750px; margin: 0 0 25px; font-size: clamp(53px, 7.4vw, 116px); font-weight: 600; letter-spacing: -.085em; line-height: .88; }.pro-hero h1 em, .display em, .contact-title em { color: var(--green-deep); font-family: var(--serif); font-weight: 600; }.hero-intro { max-width: 530px; margin: 0 0 34px; color: rgba(18,21,20,.68); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.8; }.hero-intro strong { color: var(--ink); }.hero-buttons { display: flex; flex-wrap: wrap; gap: 25px; align-items: center; }.button { display: inline-flex; min-height: 51px; align-items: center; gap: 25px; padding: 0 17px; font-size: 11px; font-weight: 800; transition: transform .3s var(--ease), background .3s; }.button span { font-size: 17px; }.button:hover { transform: translateY(-3px); }.button--ink { color: var(--paper); background: var(--ink); }.button--ink:hover { color: var(--ink); background: var(--green); }.button--outline { color: var(--ink); background: transparent; border: 1.5px solid rgba(18,21,20,.38); }.button--outline:hover { color: var(--ink); background: var(--green); border-color: var(--green); }.text-link { display: inline-flex; gap: 9px; align-items: center; font-size: 11px; font-weight: 800; }.text-link span { color: var(--green-deep); font-size: 16px; transition: transform .3s var(--ease); }.text-link:hover span { transform: translate(3px, 3px); }
.pro-portrait { justify-self: end; width: min(100%, 490px); aspect-ratio: .79; overflow: hidden; background: #cac8c0; isolation: isolate; transition: transform .4s var(--ease); }.pro-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: translate(var(--track-portrait-x, 0px), var(--track-portrait-y, 0px)) scale(1.055); transition: transform .25s linear; }.portrait-grid { position: absolute; z-index: 1; inset: 0; opacity: .35; background-image: linear-gradient(rgba(18,21,20,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(18,21,20,.22) 1px, transparent 1px); background-size: 48px 48px; mix-blend-mode: multiply; }.sightline { position: absolute; z-index: 2; background: var(--green); mix-blend-mode: multiply; opacity: .95; transition: transform .2s linear; }.sightline--x { top: calc(50% + var(--track-y, 0px)); left: 0; width: 100%; height: 1px; }.sightline--y { top: 0; left: calc(50% + var(--track-x, 0px)); width: 1px; height: 100%; }.pro-portrait::before { content: "FIELD / 01"; position: absolute; z-index: 3; top: 16px; left: 16px; color: var(--ink); font: 500 8px var(--mono); letter-spacing: .07em; }.pro-portrait figcaption { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; gap: 10px; padding: 13px 15px; color: #f5f3ed; background: rgba(18,21,20,.76); font: 500 8px var(--mono); letter-spacing: .055em; }.hero-index { position: absolute; right: clamp(20px, 7vw, 132px); bottom: 27px; left: clamp(20px, 7vw, 132px); display: flex; justify-content: space-between; color: rgba(18,21,20,.46); font: 500 8px var(--mono); letter-spacing: .07em; }

.section { position: relative; padding: 120px clamp(20px, 7vw, 132px); }.section-label, .creator-section-label { display: flex; gap: 34px; margin-bottom: 70px; color: rgba(18,21,20,.54); font: 500 10px var(--mono); letter-spacing: .075em; text-transform: uppercase; }.section-label span:first-child { color: var(--green-deep); }.profile { background: #ebe9e2; }.profile-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 60px; align-items: start; }.display { margin: 0; font-size: clamp(43px, 5.7vw, 91px); font-weight: 600; letter-spacing: -.08em; line-height: .9; }.profile-copy { max-width: 450px; padding-top: 12px; }.profile-copy p { margin: 0 0 18px; color: rgba(18,21,20,.67); font-size: 15px; line-height: 1.8; }.credential-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(80px, 10vw, 150px); border-top: 1px solid var(--line); }.credential-strip article { min-height: 150px; padding: 19px 22px 0 0; border-right: 1px solid var(--line); }.credential-strip article + article { padding-left: 22px; }.credential-strip article:last-child { border: 0; }.credential-strip span { color: rgba(18,21,20,.5); font: 500 9px var(--mono); letter-spacing: .075em; }.credential-strip strong { display: block; margin-top: 31px; font-size: clamp(14px, 1.3vw, 19px); letter-spacing: -.045em; line-height: 1.15; }
.section--ink { color: var(--paper); background: var(--ink); }.section-label--light { color: rgba(245,243,237,.52); }.section-label--light span:first-child { color: var(--green); }.display--light { color: var(--paper); }.project-ledger { margin-top: 80px; border-top: 1px solid var(--light-line); }.project-row { display: grid; grid-template-columns: 8% 1fr 155px; gap: 28px; padding: 29px 0; border-bottom: 1px solid var(--light-line); transition: background .4s var(--ease), padding .4s var(--ease); }.project-row:hover { padding-right: 18px; padding-left: 18px; background: rgba(169,212,71,.08); }.project-number, .project-tag, .project-skill { font: 500 9px var(--mono); letter-spacing: .07em; text-transform: uppercase; }.project-number { color: var(--green); }.project-tag { margin: 0 0 12px; color: rgba(245,243,237,.5); }.project-row h3 { max-width: 660px; margin: 0 0 12px; font-size: clamp(20px, 2.5vw, 34px); letter-spacing: -.06em; }.project-description { max-width: 650px; margin: 0; color: rgba(245,243,237,.63); font-size: 12px; line-height: 1.7; }.project-skill { align-self: center; justify-self: end; color: var(--green); text-align: right; }
.leadership { background: var(--paper); }.leadership-head { display: grid; grid-template-columns: 1.35fr .65fr; gap: 60px; align-items: end; margin-bottom: 85px; }.leadership-head p { max-width: 360px; margin: 0; color: rgba(18,21,20,.62); font-size: 14px; line-height: 1.7; }.timeline { border-top: 1px solid var(--line); }.timeline-item { display: grid; grid-template-columns: 18% 1fr; gap: 25px; padding: 28px 0; border-bottom: 1px solid var(--line); }.timeline-item time, .timeline-item p, .timeline-item span { font: 500 9px var(--mono); letter-spacing: .075em; text-transform: uppercase; }.timeline-item time { color: rgba(18,21,20,.52); }.timeline-item p { margin: 0 0 12px; color: var(--green-deep); }.timeline-item h3 { margin: 0 0 9px; font-size: clamp(20px, 2.2vw, 31px); letter-spacing: -.06em; }.timeline-item span { color: rgba(18,21,20,.57); }.section--sage { background: #cbd5a9; }.outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(18,21,20,.23); }.outcome { min-height: 255px; padding: 24px 25px 15px 0; border-right: 1px solid rgba(18,21,20,.23); }.outcome + .outcome { padding-left: 25px; }.outcome:last-child { border: 0; }.outcome span { display: block; margin: 36px 0 25px; color: #405a10; font-size: clamp(43px, 5.5vw, 82px); font-weight: 800; letter-spacing: -.09em; line-height: .8; }.outcome p { max-width: 210px; margin: 0; color: rgba(18,21,20,.68); font-size: 12px; line-height: 1.7; }
.contact { display: flex; min-height: 720px; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; color: var(--paper); text-align: center; background: #52704b; }.contact > *:not(.contact-orbit) { position: relative; z-index: 1; }.contact-orbit { position: absolute; width: min(90vw, 900px); aspect-ratio: 1; border: 1px solid rgba(245,243,237,.24); border-radius: 50%; }.contact-orbit::before, .contact-orbit::after { content: ""; position: absolute; border: 1px solid rgba(245,243,237,.2); border-radius: 50%; }.contact-orbit::before { inset: 12%; }.contact-orbit::after { inset: 27%; }.contact .kicker { color: rgba(245,243,237,.65); }.contact .kicker span { color: var(--green); }.contact-title { margin: 0 0 25px; font-size: clamp(54px, 7.5vw, 120px); font-weight: 600; letter-spacing: -.085em; line-height: .86; }.contact-title em { color: var(--green); }.contact-copy { max-width: 480px; margin: 0 0 33px; color: rgba(245,243,237,.72); font-size: 14px; line-height: 1.75; }.contact-actions { display: flex; align-items: center; gap: 26px; }.button--paper { color: var(--ink); background: var(--paper); }.button--paper:hover { background: var(--green); }.text-link--paper { color: var(--paper); }.text-link--paper span { color: var(--green); }
.footer { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 clamp(20px, 7vw, 132px); color: rgba(245,243,237,.67); background: #101210; }.footer p { margin: 0; font: 500 9px var(--mono); letter-spacing: .06em; }.footer > a:last-child { color: var(--green); font-size: 10px; font-weight: 800; text-transform: uppercase; }.footer > a:last-child span { font-size: 14px; }

/* Creative page: intentionally louder, vertical, and cut like a feed. */
.creative-page { background: #150e24; color: #fff2e8; }.creative-hero { position: relative; display: grid; grid-template-columns: .83fr 1.17fr; min-height: 825px; padding: 154px clamp(20px, 7vw, 132px) 55px; overflow: hidden; background: #150e24; }.creative-hero__noise { position: absolute; z-index: 0; inset: 0; opacity: .45; background-image: linear-gradient(115deg, transparent 45%, rgba(255,169,83,.12) 45%, rgba(255,169,83,.12) 46%, transparent 46%), linear-gradient(rgba(255,242,232,.05) 1px, transparent 1px); background-size: 100% 100%, 100% 37px; }.creator-stamp { position: absolute; z-index: 3; top: 112px; right: clamp(20px, 7vw, 132px); margin: 0; color: #ffab55; font: 500 8px var(--mono); letter-spacing: .1em; }.creative-hero__copy { position: relative; z-index: 2; align-self: center; }.creator-kicker { color: rgba(255,242,232,.65); }.creative-hero h1 { margin: 0 0 27px; font-size: clamp(72px, 9.7vw, 155px); font-weight: 800; letter-spacing: -.11em; line-height: .72; }.creative-hero h1 em, .creative-display em, .creative-contact-title em { color: #ffab55; font-family: var(--serif); font-weight: 600; letter-spacing: -.09em; }.creative-hero__copy > p:not(.creator-kicker) { max-width: 395px; margin: 0 0 34px; color: rgba(255,242,232,.72); font-size: 14px; line-height: 1.8; }.creator-button { display: inline-flex; align-items: center; gap: 28px; min-height: 51px; padding: 0 16px; color: #150e24; background: #ffab55; font-size: 11px; font-weight: 800; text-transform: uppercase; transition: transform .3s var(--ease), background .3s; }.creator-button:hover { background: #fff2e8; transform: rotate(-2deg) translateY(-3px); }.creator-button span { font-size: 17px; }.creator-portrait { position: relative; z-index: 1; justify-self: end; width: min(100%, 570px); aspect-ratio: .9; overflow: hidden; border: 1px solid rgba(255,242,232,.46); background: #291b3a; transform: rotate(3deg); }.creator-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 51% 50%; transform: translate(var(--track-portrait-x, 0px), var(--track-portrait-y, 0px)) scale(1.05); transition: transform .2s linear; }.creator-portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at calc(50% + var(--track-x, 0px)) calc(50% + var(--track-y, 0px)), transparent 0 12%, rgba(21,14,36,.24) 46%, rgba(21,14,36,.6) 100%); }.viewfinder { position: absolute; z-index: 2; width: 74px; height: 74px; border-color: #ffab55; border-style: solid; }.viewfinder--top { top: 18px; left: 18px; border-width: 2px 0 0 2px; }.viewfinder--bottom { right: 18px; bottom: 18px; border-width: 0 2px 2px 0; }.creator-portrait figcaption { position: absolute; z-index: 3; right: 16px; bottom: 16px; left: 16px; display: flex; align-items: center; gap: 8px; color: #fff2e8; font: 500 8px var(--mono); letter-spacing: .08em; }.creator-portrait figcaption i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a50; animation: blink 1s steps(1) infinite; }.creator-scroll { position: absolute; z-index: 2; bottom: 30px; left: clamp(20px, 7vw, 132px); display: flex; gap: 12px; align-items: center; color: rgba(255,242,232,.5); font: 500 8px var(--mono); letter-spacing: .09em; }.creator-scroll b { color: #ffab55; font-size: 16px; }
.creative-section { position: relative; padding: 120px clamp(20px, 7vw, 132px); }.creator-section-label { color: rgba(255,242,232,.52); }.creator-section-label span:first-child { color: #ffab55; }.creative-about { background: #ff8a51; color: #1c0c23; }.creative-about .creator-section-label { color: rgba(28,12,35,.55); }.creative-about .creator-section-label span:first-child { color: #1c0c23; }.creative-about__grid { display: grid; grid-template-columns: 1.22fr .78fr; gap: 60px; }.creative-display { margin: 0; font-size: clamp(47px, 6.2vw, 99px); font-weight: 700; letter-spacing: -.09em; line-height: .83; }.creative-display em { color: #4b1e50; }.creative-about__copy { max-width: 440px; padding-top: 8px; }.creative-about__copy p { margin: 0 0 19px; color: rgba(28,12,35,.76); font-size: 15px; line-height: 1.78; }.creator-tool-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }.creator-tool-row span { padding: 7px 9px; border: 1px solid rgba(28,12,35,.34); font: 500 9px var(--mono); letter-spacing: .055em; }
.reel-room { background: #150e24; }.reel-head { display: grid; grid-template-columns: 1.23fr .77fr; gap: 60px; align-items: end; margin-bottom: 70px; }.reel-head .creative-display { color: #fff2e8; }.reel-head p { max-width: 310px; margin: 0; color: rgba(255,242,232,.62); font-size: 14px; line-height: 1.75; }.reel-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 15px; }.reel-card { position: relative; display: flex; min-height: 320px; flex-direction: column; justify-content: space-between; padding: 20px; overflow: hidden; }.reel-card > span { position: relative; z-index: 2; font: 500 9px var(--mono); letter-spacing: .075em; }.reel-card h3 { position: relative; z-index: 2; margin: auto 0 0; font-size: clamp(28px, 3.3vw, 48px); letter-spacing: -.08em; line-height: .83; }.reel-card p { position: relative; z-index: 2; max-width: 200px; margin: 16px 0 0; font-size: 12px; line-height: 1.65; }.reel-card b { position: absolute; z-index: 1; right: -5%; bottom: -27%; font: 600 clamp(170px, 22vw, 320px)/1 var(--serif); opacity: .2; }.reel-card--gold { grid-column: span 5; color: #1c0c23; background: #ffbd58; }.reel-card--photo { grid-column: span 7; color: #fff2e8; }.reel-card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: saturate(.82) contrast(1.05); transition: transform .6s var(--ease); }.reel-card--photo:hover img { transform: scale(1.07); }.reel-card--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(21,14,36,.78), transparent 65%); }.reel-card--photo div { position: relative; z-index: 2; margin-top: auto; }.reel-card--violet { grid-column: span 7; color: #fff2e8; background: #56335d; }.reel-card--white { grid-column: span 5; color: #1c0c23; background: #fff2e8; }.audio-bars { position: relative; z-index: 2; display: flex; height: 62px; align-items: end; gap: 5px; margin: 23px 0 auto; }.audio-bars i { flex: 1; background: #ffbd58; animation: levels 1.1s ease-in-out infinite alternate; }.audio-bars i:nth-child(1) { height: 32%; }.audio-bars i:nth-child(2) { height: 78%; animation-delay: .3s; }.audio-bars i:nth-child(3) { height: 45%; animation-delay: .1s; }.audio-bars i:nth-child(4) { height: 94%; animation-delay: .5s; }.audio-bars i:nth-child(5) { height: 63%; animation-delay: .2s; }.audio-bars i:nth-child(6) { height: 36%; animation-delay: .45s; }.audio-bars i:nth-child(7) { height: 84%; animation-delay: .15s; }.audio-bars i:nth-child(8) { height: 52%; animation-delay: .6s; }
.creator-notes { color: #fff2e8; background: #25122e; }.notes-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 70px; align-items: start; }.notes-layout .creative-display { color: #fff2e8; }.notes-list { border-top: 1px solid rgba(255,242,232,.22); }.notes-list article { padding: 20px 0; border-bottom: 1px solid rgba(255,242,232,.22); }.notes-list span { color: #ffab55; font: 500 9px var(--mono); letter-spacing: .08em; }.notes-list h3 { margin: 24px 0 8px; font-size: clamp(18px, 1.8vw, 25px); letter-spacing: -.06em; }.notes-list p { max-width: 570px; margin: 0; color: rgba(255,242,232,.65); font-size: 12px; line-height: 1.7; }.rights-note { margin: 62px 0 0; color: rgba(255,242,232,.48); font: 500 9px var(--mono); letter-spacing: .045em; }
.creative-collab { display: flex; min-height: 700px; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; text-align: center; background: #d8ef78; color: #150e24; }.creative-collab > *:not(.creative-collab__orb) { position: relative; z-index: 1; }.creative-collab__orb { position: absolute; width: min(87vw, 900px); aspect-ratio: 1; border: 1px solid rgba(21,14,36,.26); border-radius: 50%; }.creative-collab__orb::before, .creative-collab__orb::after { content: ""; position: absolute; border: 1px solid rgba(21,14,36,.2); border-radius: 50%; }.creative-collab__orb::before { inset: 13%; }.creative-collab__orb::after { inset: 28%; }.creative-collab .creator-kicker { color: rgba(21,14,36,.62); }.creative-contact-title { max-width: 900px; margin: 0 0 23px; font-size: clamp(58px, 8vw, 132px); font-weight: 800; letter-spacing: -.1em; line-height: .78; }.creative-contact-title em { color: #692d5f; }.creative-contact-copy { max-width: 470px; margin: 0 0 32px; color: rgba(21,14,36,.7); font-size: 14px; line-height: 1.75; }.creative-contact-actions { display: flex; align-items: center; gap: 26px; }.creator-button--paper { color: #fff2e8; background: #150e24; }.creator-button--paper:hover { color: #150e24; background: #ffab55; }.creator-text-link { color: #150e24; font-size: 11px; font-weight: 800; }.creator-text-link span { margin-left: 7px; color: #692d5f; font-size: 16px; }.footer--creative { color: rgba(255,242,232,.65); background: #150e24; }.footer--creative > a:last-child { color: #ffab55; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes blink { 50% { opacity: .25; } } @keyframes levels { to { transform: scaleY(.45); transform-origin: bottom; } }

/* Alternate light/dark presentation, shared across the two primary experiences. */
body.is-night.pro-page { background: #121514; color: #f5f3ed; }.is-night.pro-page .site-header { color: #f5f3ed; }.is-night.pro-page .nav-link { color: rgba(245,243,237,.58); }.is-night.pro-page .nav-link.is-active { color: #f5f3ed; }.is-night.pro-page .pro-hero, .is-night.pro-page .leadership { color: #f5f3ed; background: #121514; }.is-night.pro-page .pro-hero::before { background: #1c211e; }.is-night.pro-page .hero-intro, .is-night.pro-page .kicker, .is-night.pro-page .hero-index, .is-night.pro-page .profile-copy p, .is-night.pro-page .leadership-head p, .is-night.pro-page .timeline-item span { color: rgba(245,243,237,.65); }.is-night.pro-page .hero-intro strong { color: #f5f3ed; }.is-night.pro-page .profile { background: #1c211e; }.is-night.pro-page .profile-copy .text-link { color: #f5f3ed; }.is-night.pro-page .button--outline { color: #f5f3ed; border-color: rgba(245,243,237,.35); background: transparent; }.is-night.pro-page .button--outline:hover { color: #121514; background: var(--green); border-color: var(--green); }.is-night.pro-page .credential-strip, .is-night.pro-page .credential-strip article, .is-night.pro-page .timeline, .is-night.pro-page .timeline-item { border-color: rgba(245,243,237,.2); }.is-night.pro-page .credential-strip span, .is-night.pro-page .timeline-item time { color: rgba(245,243,237,.48); }.is-night.pro-page .section--sage { background: #637645; }.is-night.pro-page .outcome span { color: #d8ef78; }.is-night.pro-page .outcome p { color: rgba(245,243,237,.8); }.is-night.pro-page .outcome-grid, .is-night.pro-page .outcome { border-color: rgba(245,243,237,.22); }.is-night.creative-page { background: #fff0e6; color: #1c0c23; }.is-night.creative-page .site-header--creative { color: #1c0c23; }.is-night.creative-page .nav-link--creative { color: rgba(28,12,35,.6); }.is-night.creative-page .nav-link--creative.is-active { color: #1c0c23; }.is-night.creative-page .creative-hero { background: #fff0e6; }.is-night.creative-page .creative-hero__noise { opacity: .5; background-image: linear-gradient(115deg, transparent 45%, rgba(111,45,95,.12) 45%, rgba(111,45,95,.12) 46%, transparent 46%), linear-gradient(rgba(28,12,35,.06) 1px, transparent 1px); }.is-night.creative-page .creator-stamp, .is-night.creative-page .creator-kicker, .is-night.creative-page .creative-hero__copy > p:not(.creator-kicker), .is-night.creative-page .creator-scroll { color: rgba(28,12,35,.65); }.is-night.creative-page .creative-hero h1 { color: #1c0c23; }.is-night.creative-page .reel-room { background: #fff0e6; }.is-night.creative-page .reel-head .creative-display { color: #1c0c23; }.is-night.creative-page .reel-head p { color: rgba(28,12,35,.67); }.is-night.creative-page .creator-notes { color: #fff2e8; background: #321938; }

@media (max-width: 900px) { .pro-hero, .creative-hero { grid-template-columns: 1fr; gap: 48px; }.pro-hero { min-height: auto; padding-top: 135px; }.pro-portrait { justify-self: start; width: min(100%, 500px); }.pro-hero::before { width: 100%; height: 47%; }.hero-index { position: static; grid-column: 1; margin-top: 10px; }.profile-grid, .leadership-head, .creative-about__grid, .reel-head, .notes-layout { grid-template-columns: 1fr; }.profile-copy, .leadership-head p { max-width: 530px; }.credential-strip, .outcome-grid { grid-template-columns: 1fr 1fr; }.credential-strip article:nth-child(2), .outcome:nth-child(2) { border-right: 0; }.credential-strip article:nth-child(n+3), .outcome:nth-child(n+3) { border-top: 1px solid var(--line); }.project-row { grid-template-columns: 48px 1fr; }.project-skill { grid-column: 2; justify-self: start; text-align: left; }.creative-hero { min-height: auto; padding-top: 135px; }.creator-portrait { justify-self: start; width: min(100%, 550px); }.creator-stamp { top: 95px; }.reel-card--gold, .reel-card--photo, .reel-card--violet, .reel-card--white { grid-column: span 6; } }
@media (max-width: 590px) { .site-header { height: 65px; padding: 0 20px; }.header-actions { gap: 14px; }.header-contact { font-size: 9px; }.pro-hero, .creative-hero { padding-right: 20px; padding-left: 20px; }.pro-hero { padding-top: 113px; padding-bottom: 35px; }.pro-hero h1 { font-size: clamp(52px, 15vw, 76px); }.hero-index { font-size: 7px; }.hero-index span:nth-child(2) { display: none; }.pro-portrait { width: 100%; }.section, .creative-section { padding: 83px 20px; }.section-label, .creator-section-label { gap: 20px; margin-bottom: 45px; }.credential-strip, .outcome-grid { grid-template-columns: 1fr; }.credential-strip article, .credential-strip article + article, .outcome, .outcome + .outcome { min-height: auto; padding: 20px 0; border-right: 0; border-top: 1px solid var(--line); }.credential-strip article:first-child, .outcome:first-child { border-top: 0; }.credential-strip strong { margin-top: 19px; }.project-ledger { margin-top: 50px; }.project-row { gap: 13px; padding: 23px 0; }.project-row h3 { font-size: 21px; }.timeline-item { grid-template-columns: 1fr; gap: 13px; }.timeline-item h3 { font-size: 22px; }.outcome span { margin: 23px 0 19px; }.contact { min-height: 620px; padding-right: 20px; padding-left: 20px; }.contact-title { font-size: clamp(52px, 15vw, 78px); }.contact-actions, .creative-contact-actions { flex-direction: column; gap: 18px; }.footer { min-height: 70px; }.footer p { display: none; }.footer > a:last-child { font-size: 9px; }.creative-hero { gap: 35px; padding-top: 113px; padding-bottom: 42px; }.creative-hero h1 { font-size: clamp(68px, 20vw, 94px); }.creator-stamp { top: 81px; right: 20px; font-size: 7px; }.creator-portrait { width: 100%; }.creative-about__copy p { font-size: 14px; }.reel-grid { grid-template-columns: 1fr; }.reel-card--gold, .reel-card--photo, .reel-card--violet, .reel-card--white { grid-column: auto; min-height: 285px; }.creative-collab { min-height: 620px; padding-right: 20px; padding-left: 20px; }.creative-contact-title { font-size: clamp(54px, 16vw, 82px); }.rights-note { margin-top: 40px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.creator-portrait figcaption i, .audio-bars i { animation: none; }.pro-portrait img, .creator-portrait img { transform: none; }.button, .creator-button { transition: none; } }

/* Pointer values are calculated in pixels by script: no experimental CSS arithmetic. */
.pro-portrait img { transform: translate(var(--track-portrait-x, 0px), var(--track-portrait-y, 0px)) scale(1.055); }.sightline--x { top: calc(50% + var(--track-y, 0px)); }.sightline--y { left: calc(50% + var(--track-x, 0px)); }.creator-portrait img { transform: translate(var(--track-portrait-x, 0px), var(--track-portrait-y, 0px)) scale(1.05); }.creator-portrait::after { background: radial-gradient(circle at calc(50% + var(--track-x, 0px)) calc(50% + var(--track-y, 0px)), transparent 0 12%, rgba(21,14,36,.24) 46%, rgba(21,14,36,.6) 100%); }
@media (prefers-reduced-motion: reduce) { .pro-portrait img, .creator-portrait img { transform: none; } }

/* Interaction layer: each chapter gains a quiet entrance and a visible response to attention. */
main > section { isolation: isolate; }
main > section::after { content: ""; position: absolute; z-index: 0; right: clamp(20px, 7vw, 132px); bottom: 32px; width: min(21vw, 220px); height: 1px; pointer-events: none; opacity: .45; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 1s var(--ease) .16s; }
main > section.motion-active::after { transform: scaleX(1); }
main > section > * { position: relative; z-index: 1; }
.reveal { transition-delay: calc(var(--reveal-order, 0) * 55ms); }

/* Native details menu remains keyboard-friendly while giving the small-screen header an actual navigation home. */
.nav-menu { position: relative; display: inline-block; color: rgba(18,21,20,.6); font-size: 10px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.nav-menu summary { display: flex; gap: 7px; align-items: center; padding: 7px 0; list-style: none; cursor: pointer; }.nav-menu summary::-webkit-details-marker { display: none; }.nav-menu summary span { color: var(--green-deep); font-size: 14px; transition: transform .25s var(--ease); }.nav-menu[open] summary span { transform: rotate(45deg); }
.nav-menu > div { position: absolute; top: calc(100% + 12px); right: -12px; display: grid; width: 170px; padding: 9px; border: 1px solid var(--line); box-shadow: 0 14px 35px rgba(18,21,20,.13); background: rgba(245,243,237,.96); backdrop-filter: blur(14px); animation: menu-in .28s var(--ease) both; }.nav-menu > div a { padding: 10px; transition: background .2s, padding .2s var(--ease); }.nav-menu > div a:hover, .nav-menu > div a:focus-visible { padding-left: 15px; outline: 0; background: rgba(169,212,71,.31); }
.nav-menu--creative { color: rgba(255,242,232,.62); }.nav-menu--creative > div { border-color: rgba(255,242,232,.22); color: #fff2e8; background: rgba(21,14,36,.95); }.nav-menu--creative > div a:hover, .nav-menu--creative > div a:focus-visible { background: rgba(255,171,85,.2); }.is-night.creative-page .nav-menu--creative { color: rgba(28,12,35,.62); }.is-night.creative-page .nav-menu--creative > div { color: #1c0c23; background: rgba(255,240,230,.97); }

/* Corrected professional opening: clearer hierarchy, grounded portrait, less accidental empty space. */
.pro-hero { grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr); min-height: 840px; align-items: center; }.pro-hero::before { width: 45%; }.pro-hero__copy { align-self: center; padding-bottom: 23px; }.pro-portrait { align-self: center; justify-self: center; width: min(100%, 455px); margin: 14px 0 31px; box-shadow: 18px 18px 0 rgba(102,125,36,.15); }.pro-portrait::after { content: "CALIBRATED / CURSOR-REACTIVE"; position: absolute; z-index: 4; right: 15px; top: 16px; color: rgba(18,21,20,.58); font: 500 7px var(--mono); letter-spacing: .08em; }.hero-index { bottom: 31px; }

/* Booking is a deliberate service chooser, not a pretend payment form. */
.booking { color: var(--ink); background: #dedbd1; }.booking-head { display: grid; grid-template-columns: 1.25fr .75fr; gap: 60px; align-items: end; margin-bottom: 72px; }.booking-head p { max-width: 370px; margin: 0; color: rgba(18,21,20,.67); font-size: 14px; line-height: 1.75; }.service-picker { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }.service-card { position: relative; min-height: 255px; padding: 23px 25px; border: 0; border-right: 1px solid var(--line); color: inherit; background: transparent; cursor: pointer; text-align: left; transition: color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease); transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0); }.service-card:last-child { border-right: 0; }.service-card::after { content: ""; position: absolute; right: 25px; bottom: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--green-deep); opacity: 0; transform: scale(0); transition: opacity .25s, transform .25s var(--ease); }.service-card span { display: block; color: rgba(18,21,20,.55); font: 500 9px var(--mono); letter-spacing: .075em; }.service-card strong { display: block; margin-top: 75px; font-size: clamp(19px, 2vw, 29px); letter-spacing: -.065em; line-height: .92; }.service-card em { display: block; max-width: 200px; margin-top: 17px; color: rgba(18,21,20,.63); font-size: 11px; font-style: normal; line-height: 1.55; }.service-card:hover, .service-card:focus-visible, .service-card.is-selected { color: var(--paper); background: var(--ink); outline: 0; }.service-card:hover span, .service-card:focus-visible span, .service-card.is-selected span, .service-card:hover em, .service-card:focus-visible em, .service-card.is-selected em { color: rgba(245,243,237,.68); }.service-card:hover::after, .service-card:focus-visible::after, .service-card.is-selected::after { opacity: 1; transform: scale(1); }.booking-cta { display: flex; justify-content: space-between; gap: 40px; align-items: end; padding-top: 31px; border-top: 1px solid var(--line); }.booking-cta > div > span { display: block; color: rgba(18,21,20,.54); font: 500 9px var(--mono); letter-spacing: .075em; }.booking-cta strong { display: block; margin-top: 8px; font-size: 17px; letter-spacing: -.045em; }.booking-cta p { max-width: 455px; margin: 12px 0 0; color: rgba(18,21,20,.63); font-size: 11px; line-height: 1.6; }

/* Cursor plus magnetic micro-responses on devices which actually have a precise pointer. */
.cursor-dot, .cursor-orbit { position: fixed; z-index: 110; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity .2s, width .25s var(--ease), height .25s var(--ease), border-color .25s; }.cursor-dot { width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--green-deep); }.cursor-orbit { display: grid; width: 42px; height: 42px; margin: -21px; place-items: center; border: 1px solid rgba(18,21,20,.55); border-radius: 50%; color: var(--ink); font: 800 7px var(--mono); letter-spacing: .08em; }.cursor-orbit span { opacity: 0; transition: opacity .2s; }.cursor-is-visible .cursor-dot, .cursor-is-visible .cursor-orbit { opacity: 1; }.cursor-is-link .cursor-dot { width: 4px; height: 4px; margin: -2px; }.cursor-is-link .cursor-orbit { width: 66px; height: 66px; margin: -33px; border-color: var(--green-deep); background: rgba(169,212,71,.16); }.cursor-is-link .cursor-orbit span { opacity: 1; }.cursor-dot--creative { background: #ffab55; }.cursor-orbit--creative { border-color: rgba(255,242,232,.7); color: #fff2e8; }.creative-page.cursor-is-link .cursor-orbit { border-color: #ffab55; background: rgba(255,171,85,.18); }.has-custom-cursor a, .has-custom-cursor button, .has-custom-cursor summary { cursor: none; }
.hero-buttons a, .creator-hero-actions > *, .social-icons a, .footer > a:last-child { transform: translate3d(var(--magnet-x, 0px), var(--magnet-y, 0px), 0); }

/* Creator mode leans into a playful cut-room personality without borrowing anyone else's IP. */
.creator-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }.chaos-toggle { min-height: 51px; padding: 0 15px; border: 1px solid rgba(255,242,232,.42); color: #fff2e8; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; transition: transform .3s var(--ease), background .3s, color .3s; }.chaos-toggle span { margin-left: 8px; color: #ffab55; font-size: 15px; }.chaos-toggle:hover, .chaos-toggle:focus-visible { outline: 0; color: #150e24; background: #fff2e8; transform: translateY(-3px) rotate(2deg); }.chaos-doodles { position: absolute; z-index: 4; inset: 0; pointer-events: none; }.chaos-doodles i { position: absolute; opacity: 0; color: #ffab55; font-family: var(--mono); font-style: normal; font-weight: 800; letter-spacing: .08em; transform: scale(.2) rotate(-18deg); transition: opacity .35s, transform .6s var(--ease); }.chaos-doodles i:nth-child(1) { top: 20%; right: 7%; font-size: 49px; }.chaos-doodles i:nth-child(2) { right: 43%; bottom: 17%; font-size: 12px; }.chaos-doodles i:nth-child(3) { top: 65%; right: 12%; font-size: 35px; }.chaos-doodles i:nth-child(4) { top: 20%; left: 44%; color: #d8ef78; font-size: 10px; }.is-chaos .chaos-doodles i { opacity: 1; transform: scale(1) rotate(9deg); }.is-chaos .chaos-doodles i:nth-child(2) { transform: scale(1) rotate(-11deg); }.is-chaos .creator-portrait { transform: rotate(-4deg) translateY(-9px); box-shadow: 16px 16px 0 #ffab55; }.is-chaos .creative-hero__noise { transform: scale(1.05) rotate(-1deg); }.is-chaos .creative-hero h1 em { text-shadow: 5px 5px 0 #56335d; }.creator-portrait, .creative-hero__noise, .creative-hero h1 em { transition: transform .7s var(--ease), box-shadow .7s var(--ease), text-shadow .4s var(--ease); }
.creative-about.motion-active .creator-tool-row span { animation: sticker-in .6s var(--ease) both; }.creative-about.motion-active .creator-tool-row span:nth-child(2) { animation-delay: .08s; }.creative-about.motion-active .creator-tool-row span:nth-child(3) { animation-delay: .16s; }.creative-about.motion-active .creator-tool-row span:nth-child(4) { animation-delay: .24s; }.reel-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }.reel-card:hover { z-index: 3; transform: translateY(-11px) rotate(-1deg); box-shadow: 12px 14px 0 rgba(255,171,85,.3); }.reel-card--violet:hover { transform: translateY(-11px) rotate(1deg); }.creator-notes.motion-active .notes-list article { animation: note-slide .6s var(--ease) both; }.creator-notes.motion-active .notes-list article:nth-child(2) { animation-delay: .1s; }.creator-notes.motion-active .notes-list article:nth-child(3) { animation-delay: .2s; }.creative-collab.motion-active .creative-collab__orb { animation: soft-spin 22s linear infinite; }

/* Extra movement in the considered professional world stays deliberately restrained. */
.profile.motion-active .credential-strip { animation: line-rise .8s var(--ease) both; }.work.motion-active .project-row:hover { transform: translateX(7px); }.leadership.motion-active .timeline-item { transition: padding .35s var(--ease), background .35s; }.leadership.motion-active .timeline-item:hover { padding-right: 17px; padding-left: 17px; background: rgba(169,212,71,.13); }.outcomes.motion-active .outcome { transition: background .35s var(--ease), transform .35s var(--ease); }.outcomes.motion-active .outcome:hover { background: rgba(245,243,237,.22); transform: translateY(-6px); }.contact.motion-active .contact-orbit { animation: soft-spin 28s linear infinite; }.contact.motion-active .contact-orbit::before { animation: orbit-breathe 4s ease-in-out infinite alternate; }
.social-icons { display: flex; gap: 8px; align-items: center; }.social-icons a { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(245,243,237,.37); border-radius: 50%; color: var(--paper); font: 800 8px var(--mono); letter-spacing: -.06em; transition: color .2s, background .2s, border-color .2s, transform .3s var(--ease); }.social-icons a:hover, .social-icons a:focus-visible { border-color: var(--green); outline: 0; color: var(--ink); background: var(--green); }.social-icons--creative a:hover, .social-icons--creative a:focus-visible { border-color: #ffab55; background: #ffab55; }

@keyframes menu-in { from { opacity: 0; transform: translateY(-7px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sticker-in { from { opacity: 0; transform: translateY(13px) rotate(-7deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes note-slide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes line-rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes soft-spin { to { transform: rotate(360deg); } }
@keyframes orbit-breathe { to { transform: scale(1.06); opacity: .45; } }

.is-night.pro-page .booking { color: #f5f3ed; background: #262e26; }.is-night.pro-page .booking-head p, .is-night.pro-page .service-card span, .is-night.pro-page .service-card em, .is-night.pro-page .booking-cta > div > span, .is-night.pro-page .booking-cta p { color: rgba(245,243,237,.66); }.is-night.pro-page .service-picker, .is-night.pro-page .booking-cta, .is-night.pro-page .service-card { border-color: rgba(245,243,237,.2); }.is-night.pro-page .service-card:hover, .is-night.pro-page .service-card:focus-visible, .is-night.pro-page .service-card.is-selected { color: var(--ink); background: var(--green); }.is-night.pro-page .service-card:hover span, .is-night.pro-page .service-card:focus-visible span, .is-night.pro-page .service-card.is-selected span, .is-night.pro-page .service-card:hover em, .is-night.pro-page .service-card:focus-visible em, .is-night.pro-page .service-card.is-selected em { color: rgba(18,21,20,.7); }.is-night.pro-page .pro-portrait::after { color: rgba(245,243,237,.58); }.is-night.pro-page .cursor-orbit { border-color: rgba(245,243,237,.7); color: #f5f3ed; }.is-night.pro-page.cursor-is-link .cursor-orbit { background: rgba(169,212,71,.2); }

@media (max-width: 900px) { .pro-hero { grid-template-columns: 1fr; min-height: auto; }.pro-hero::before { width: 100%; height: 43%; }.pro-portrait { justify-self: start; margin-bottom: 10px; }.booking-head { grid-template-columns: 1fr; gap: 24px; }.service-picker { grid-template-columns: 1fr; }.service-card, .service-card:last-child { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }.service-card strong { margin-top: 37px; }.booking-cta { align-items: start; flex-direction: column; }.creative-hero .chaos-doodles i:nth-child(4) { left: 65%; } }
@media (max-width: 590px) { .site-header nav { display: flex; gap: 0; margin-left: 15px; }.site-header nav > .nav-link { display: none; }.nav-menu { display: inline-block; }.nav-menu > div { right: -13px; }.pro-hero__copy { padding-bottom: 0; }.pro-portrait { width: min(100%, 405px); }.booking-cta .button { width: 100%; justify-content: space-between; }.social-icons { margin-left: auto; }.footer { gap: 10px; }.footer > a:last-child { display: none; }.creative-hero__copy > p:not(.creator-kicker) { max-width: 330px; }.chaos-doodles i:nth-child(1) { top: 59%; right: 9%; font-size: 34px; }.chaos-doodles i:nth-child(2) { right: 11%; bottom: 6%; }.chaos-doodles i:nth-child(3) { top: 51%; right: 15%; font-size: 25px; }.chaos-doodles i:nth-child(4) { display: none; } }
@media (prefers-reduced-motion: reduce) { main > section::after { transition: none; transform: scaleX(1); }.cursor-dot, .cursor-orbit { display: none; }.creative-about.motion-active .creator-tool-row span, .creator-notes.motion-active .notes-list article, .creative-collab.motion-active .creative-collab__orb, .contact.motion-active .contact-orbit, .contact.motion-active .contact-orbit::before { animation: none; }.is-chaos .creator-portrait, .is-chaos .creative-hero__noise { transform: none; }.reel-card:hover, .work.motion-active .project-row:hover, .outcomes.motion-active .outcome:hover { transform: none; } }

/* Identity switch: the only primary route change is presented as a mode control. */
.identity-switch { display: inline-flex; gap: 8px; align-items: center; color: rgba(18,21,20,.48); font: 800 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }.identity-switch > span[aria-current="page"] { color: var(--ink); }.identity-switch i { position: relative; display: block; width: 35px; height: 18px; border: 1px solid rgba(18,21,20,.42); border-radius: 999px; background: rgba(18,21,20,.06); transition: background .3s var(--ease), border-color .3s; }.identity-switch i b { position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--green-deep); transition: transform .35s var(--ease), background .3s; }.identity-switch--creative i b { transform: translateX(15px); background: #ffab55; }.identity-switch:hover i, .identity-switch:focus-visible i { border-color: var(--green-deep); background: rgba(169,212,71,.23); }.identity-switch:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 5px; }.site-header--creative .identity-switch { color: rgba(255,242,232,.55); }.site-header--creative .identity-switch > span[aria-current="page"] { color: #fff2e8; }.site-header--creative .identity-switch i { border-color: rgba(255,242,232,.45); background: rgba(255,242,232,.08); }.site-header--creative .identity-switch:hover i, .site-header--creative .identity-switch:focus-visible i { border-color: #ffab55; background: rgba(255,171,85,.18); }

/* Professional opening uses an explicit identity line and a clearer working point of view. */
.pro-hero { min-height: 805px; }.pro-hero__copy { max-width: 710px; }.hero-identity { display: flex; justify-content: space-between; gap: 18px; max-width: 570px; margin: 0 0 18px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: rgba(18,21,20,.7); font: 500 9px var(--mono); letter-spacing: .075em; }.hero-identity span:last-child { color: var(--green-deep); }.pro-hero h1 { max-width: 670px; margin-bottom: 21px; font-size: clamp(51px, 6.85vw, 103px); line-height: .87; }.hero-specialties { display: flex; flex-wrap: wrap; gap: 8px; max-width: 570px; margin: 0 0 34px; padding: 0; list-style: none; }.hero-specialties li { padding: 6px 8px; border: 1px solid rgba(18,21,20,.25); color: rgba(18,21,20,.67); font: 500 9px var(--mono); letter-spacing: .045em; text-transform: uppercase; }.pro-portrait { width: min(100%, 425px); box-shadow: 14px 14px 0 rgba(102,125,36,.12); }.pro-portrait figcaption { background: rgba(18,21,20,.88); }

/* Direct file handoff makes project references possible without pretending a static site stores uploads. */
.brief-files { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: center; margin-top: 58px; padding: 28px; border: 1px solid var(--line); background: rgba(245,243,237,.46); }.brief-files__eyebrow { color: var(--green-deep); font: 500 9px var(--mono); letter-spacing: .075em; }.brief-files h3 { margin: 13px 0 8px; font-size: clamp(25px, 2.7vw, 39px); letter-spacing: -.065em; }.brief-files p { max-width: 500px; margin: 0; color: rgba(18,21,20,.68); font-size: 12px; line-height: 1.65; }.brief-files__action { display: grid; gap: 12px; justify-items: start; }.file-picker { display: inline-flex; align-items: center; gap: 22px; min-height: 47px; padding: 0 15px; color: var(--paper); background: var(--ink); cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; transition: background .25s, transform .25s var(--ease); }.file-picker span { color: var(--green); font-size: 18px; }.file-picker:hover { color: var(--ink); background: var(--green); transform: translateY(-2px); }.brief-files input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }.brief-files__action [data-file-status] { min-height: 20px; color: rgba(18,21,20,.58); font: 500 9px var(--mono); letter-spacing: .02em; }.brief-files .text-link { margin-top: 4px; }

/* Predictable click targets: animated cursor disappears over controls, leaving native focus/pointer cues clear. */
.cursor-is-link .cursor-dot, .cursor-is-link .cursor-orbit { opacity: 0 !important; }.has-custom-cursor a, .has-custom-cursor button, .has-custom-cursor summary { cursor: pointer; }.has-custom-cursor input, .has-custom-cursor label { cursor: pointer; }

/* Creator-side motion is intentionally more kinetic, while still using transform/opacity only. */
.creative-hero.motion-active .creator-portrait { animation: creator-drift 6s ease-in-out infinite alternate; }.creative-hero.motion-active .creator-stamp { animation: stamp-nudge 4.5s ease-in-out infinite alternate; }.creative-hero.motion-active .creator-scroll b { animation: scroll-bob 1.5s ease-in-out infinite; }.reel-profile-link { display: inline-flex; gap: 9px; align-items: center; margin-top: 22px; padding-bottom: 4px; border-bottom: 1px solid #ffab55; color: #ffab55; font-size: 11px; font-weight: 800; }.reel-profile-link span { transition: transform .25s var(--ease); }.reel-profile-link:hover span { transform: translate(3px, -3px); }.reel-room.motion-active .reel-card.is-visible { animation: reel-arrive .72s var(--ease) both; }.reel-room.motion-active .reel-card:nth-child(2) { animation-delay: .08s; }.reel-room.motion-active .reel-card:nth-child(3) { animation-delay: .16s; }.reel-room.motion-active .reel-card:nth-child(4) { animation-delay: .24s; }.reel-room.motion-active .reel-card b { animation: number-float 4.5s ease-in-out infinite alternate; }.reel-room.motion-active .reel-card:nth-child(2) b, .reel-room.motion-active .reel-card:nth-child(4) b { animation-delay: .6s; }.creative-collab.motion-active .creative-contact-title { animation: title-jump .75s var(--ease) both; }

.back-to-top { position: fixed; z-index: 40; right: 20px; bottom: 20px; display: grid; width: 48px; height: 48px; padding: 0; place-items: center; border: 1px solid rgba(18,21,20,.4); border-radius: 50%; color: var(--paper); background: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(13px); transition: opacity .25s, transform .25s var(--ease), color .25s, background .25s; }.back-to-top span { font-size: 19px; line-height: .6; }.back-to-top small { margin-top: -9px; font: 800 7px var(--mono); letter-spacing: .08em; }.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }.back-to-top:hover, .back-to-top:focus-visible { outline: 0; color: var(--ink); background: var(--green); transform: translateY(-3px); }.back-to-top--creative { border-color: rgba(255,242,232,.55); color: #fff2e8; background: #150e24; }.back-to-top--creative:hover, .back-to-top--creative:focus-visible { background: #ffab55; }

/* Contrast repairs for every alternate colour state. */
.is-night.pro-page .profile .section-label, .is-night.pro-page .leadership .section-label, .is-night.pro-page .booking .section-label { color: rgba(245,243,237,.7); }.is-night.pro-page .profile .section-label span:first-child, .is-night.pro-page .leadership .section-label span:first-child, .is-night.pro-page .booking .section-label span:first-child { color: var(--green); }.is-night.pro-page .leadership .timeline-item p { color: #c9ed79; }.is-night.pro-page .section--sage .section-label { color: rgba(245,243,237,.77); }.is-night.pro-page .section--sage .section-label span:first-child { color: #e3ff91; }.is-night.pro-page .pro-hero h1 em, .is-night.pro-page .display em { color: #d8ef78; }.is-night.pro-page .hero-identity { border-color: rgba(245,243,237,.23); color: rgba(245,243,237,.78); }.is-night.pro-page .hero-specialties li { border-color: rgba(245,243,237,.3); color: rgba(245,243,237,.75); }.is-night.pro-page .brief-files { border-color: rgba(245,243,237,.22); background: rgba(245,243,237,.04); }.is-night.pro-page .brief-files p, .is-night.pro-page .brief-files__action [data-file-status] { color: rgba(245,243,237,.72); }.is-night.pro-page .file-picker { color: var(--ink); background: var(--green); }.is-night.pro-page .file-picker:hover { color: var(--paper); background: #101210; }
.is-night.creative-page .creative-hero h1 em { color: #752d62; }.is-night.creative-page .creator-scroll b { color: #752d62; }.is-night.creative-page .creator-portrait { border-color: rgba(28,12,35,.45); }.is-night.creative-page .chaos-toggle { border-color: rgba(28,12,35,.48); color: #1c0c23; }.is-night.creative-page .chaos-toggle span { color: #752d62; }.is-night.creative-page .chaos-toggle:hover, .is-night.creative-page .chaos-toggle:focus-visible { color: #fff2e8; background: #1c0c23; }.is-night.creative-page .reel-room .creator-section-label { color: rgba(28,12,35,.67); }.is-night.creative-page .reel-room .creator-section-label span:first-child { color: #752d62; }.is-night.creative-page .reel-profile-link { color: #752d62; border-color: #752d62; }.is-night.creative-page .cursor-orbit--creative { border-color: rgba(28,12,35,.6); color: #1c0c23; }

@keyframes creator-drift { from { transform: rotate(3deg) translateY(0); } to { transform: rotate(1deg) translateY(-10px); } }
@keyframes stamp-nudge { from { transform: rotate(0); } to { transform: rotate(-3deg) translateY(-3px); } }
@keyframes scroll-bob { 50% { transform: translateY(6px); } }
@keyframes reel-arrive { from { opacity: 0; transform: translateY(42px) rotate(-2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes number-float { to { transform: translateY(-15px) rotate(6deg); } }
@keyframes title-jump { from { opacity: 0; transform: translateY(25px) rotate(1deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }

@media (max-width: 900px) { .brief-files { grid-template-columns: 1fr; gap: 25px; }.identity-switch { gap: 6px; }.hero-identity { max-width: 100%; }.reel-head > div { max-width: 440px; } }
@media (max-width: 590px) { .site-header { gap: 10px; }.site-header .wordmark { font-size: 13px; }.site-header nav { margin-left: auto; }.identity-switch { gap: 5px; font-size: 8px; }.identity-switch i { width: 30px; height: 16px; }.identity-switch i b { width: 8px; height: 8px; }.identity-switch--creative i b { transform: translateX(12px); }.header-contact { display: none; }.header-actions { margin-left: 0; }.hero-identity { margin-bottom: 13px; font-size: 8px; }.hero-specialties { gap: 6px; margin-bottom: 26px; }.hero-specialties li { font-size: 8px; }.brief-files { padding: 20px; margin-top: 39px; }.brief-files h3 { font-size: 29px; }.back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }.reel-profile-link { margin-top: 16px; }.creative-contact-actions { gap: 13px; }.creative-contact-actions .creator-text-link { display: block; } }
@media (prefers-reduced-motion: reduce) { .creative-hero.motion-active .creator-portrait, .creative-hero.motion-active .creator-stamp, .creative-hero.motion-active .creator-scroll b, .reel-room.motion-active .reel-card.is-visible, .reel-room.motion-active .reel-card b, .creative-collab.motion-active .creative-contact-title { animation: none; }.back-to-top { transition: none; } }

/* Final contrast pass: decorative type may be subtle, but no content copy is left low-contrast in either mode. */
.nav-link, .nav-menu, .kicker, .section-label, .credential-strip span, .timeline-item time, .hero-index { color: rgba(18,21,20,.72); }.hero-intro, .profile-copy p, .leadership-head p, .booking-head p, .booking-cta p, .brief-files p, .brief-files__action [data-file-status] { color: rgba(18,21,20,.78); }.project-tag, .project-description { color: rgba(245,243,237,.78); }.section-label--light { color: rgba(245,243,237,.8); }.contact-copy { color: rgba(245,243,237,.86); }.pro-portrait::before, .pro-portrait::after { padding: 3px 5px; background: rgba(245,243,237,.77); }.pro-portrait figcaption { color: #fff; }
.creative-page .creator-kicker, .creative-page .creator-section-label, .creative-page .creator-scroll, .creative-page .reel-head p, .creative-page .notes-list p, .creative-page .rights-note, .creative-page .creative-contact-copy { color: rgba(255,242,232,.82); }.creative-page .creator-stamp { color: #ffc17d; }.creative-page .nav-link--creative, .creative-page .nav-menu--creative { color: rgba(255,242,232,.8); }.creative-page .nav-link--creative.is-active { color: #fff2e8; }

.is-night.pro-page .nav-link, .is-night.pro-page .nav-menu, .is-night.pro-page .kicker, .is-night.pro-page .hero-index, .is-night.pro-page .credential-strip span, .is-night.pro-page .timeline-item time { color: rgba(245,243,237,.78); }.is-night.pro-page .hero-intro, .is-night.pro-page .profile-copy p, .is-night.pro-page .leadership-head p, .is-night.pro-page .booking-head p, .is-night.pro-page .booking-cta p, .is-night.pro-page .brief-files p, .is-night.pro-page .brief-files__action [data-file-status] { color: rgba(245,243,237,.84); }.is-night.pro-page .pro-portrait::before, .is-night.pro-page .pro-portrait::after { color: #121514; background: rgba(245,243,237,.86); }.is-night.pro-page .contact-copy { color: rgba(245,243,237,.88); }.is-night.pro-page .identity-switch { color: rgba(245,243,237,.7); }.is-night.pro-page .identity-switch > span[aria-current="page"] { color: #fff; }.is-night.pro-page .identity-switch i { border-color: rgba(245,243,237,.62); background: rgba(245,243,237,.1); }

.is-night.creative-page .creator-kicker, .is-night.creative-page .creator-stamp, .is-night.creative-page .creator-scroll, .is-night.creative-page .creative-hero__copy > p:not(.creator-kicker) { color: rgba(28,12,35,.82); }.is-night.creative-page .creator-section-label { color: rgba(28,12,35,.76); }.is-night.creative-page .creator-section-label span:first-child { color: #752d62; }.is-night.creative-page .creator-notes .creator-section-label, .is-night.creative-page .creator-notes .notes-list p, .is-night.creative-page .creator-notes .rights-note { color: rgba(255,242,232,.84); }.is-night.creative-page .creator-notes .creator-section-label span:first-child { color: #ffc17d; }.is-night.creative-page .creative-contact-copy { color: rgba(21,14,36,.84); }.is-night.creative-page .site-header--creative .identity-switch { color: rgba(28,12,35,.68); }.is-night.creative-page .site-header--creative .identity-switch > span[aria-current="page"] { color: #1c0c23; }.is-night.creative-page .site-header--creative .identity-switch i { border-color: rgba(28,12,35,.58); background: rgba(28,12,35,.08); }

/* These two bright creative panels intentionally use ink, not the dark-page white text. */
.creative-page .creative-about .creator-section-label { color: rgba(28,12,35,.78); }.creative-page .creative-about .creator-section-label span:first-child { color: #1c0c23; }.creative-page .creative-collab .creator-kicker, .creative-page .creative-collab .creative-contact-copy { color: rgba(21,14,36,.84); }

/* Larger identity switch with a generous touch target. */
.identity-switch { gap: 10px; min-height: 32px; font-size: 10px; }.identity-switch i { width: 46px; height: 24px; }.identity-switch i b { top: 4px; left: 4px; width: 14px; height: 14px; }.identity-switch--creative i b { transform: translateX(22px); }
@media (max-width: 590px) { .identity-switch { gap: 6px; min-height: 27px; font-size: 8px; }.identity-switch i { width: 36px; height: 20px; }.identity-switch i b { top: 3px; left: 3px; width: 12px; height: 12px; }.identity-switch--creative i b { transform: translateX(16px); } }

/* Keep the identity control locked to one visual coordinate across both page modes. */
.site-header nav { position: absolute; left: 50%; margin-left: 0; transform: translateX(-50%); }.site-header .identity-switch { white-space: nowrap; }.site-header .header-actions { margin-left: auto; }
@media (max-width: 590px) { .site-header nav { left: 50%; margin-left: 0; transform: translateX(-50%); }.site-header .identity-switch { min-width: 124px; justify-content: center; }.site-header nav .nav-menu { margin-left: 7px; } }

/* Professional hero: one continuous canvas, with a contained technical field behind the portrait. */
.pro-hero::before { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; background: radial-gradient(ellipse 42% 66% at 81% 48%, #e5e4dc 0 51%, transparent 52%); }.pro-hero::after { right: clamp(20px, 7vw, 132px); bottom: 32px; left: auto; width: min(21vw, 220px); height: 1px; background: var(--ink); }
.is-night.pro-page .pro-hero::before { background: radial-gradient(ellipse 42% 66% at 81% 48%, #1d2821 0 51%, transparent 52%); }
@media (max-width: 900px) { .pro-hero::before { background: radial-gradient(ellipse 67% 38% at 72% 76%, #e5e4dc 0 51%, transparent 52%); }.is-night.pro-page .pro-hero::before { background: radial-gradient(ellipse 67% 38% at 72% 76%, #1d2821 0 51%, transparent 52%); } }

/* Header theme toggle: round single-click button with transparent bg and dead-center icon */
.header-actions { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; }
.theme-toggle, .theme-toggle--creative { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; min-height: 34px; height: 34px; padding: 0; border: 1px solid rgba(18,21,20,.32); border-radius: 50%; color: var(--ink); background: rgba(18,21,20,.06); cursor: pointer; transition: transform .2s var(--ease), background .3s var(--ease), border-color .3s, color .3s; flex-shrink: 0; }
.theme-toggle [data-theme-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.theme-toggle i, .theme-toggle--creative i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; color: var(--green-deep); font-size: 0; line-height: 0; }
.theme-toggle i::after, .theme-toggle--creative i::after { display: none; }
.theme-icon { display: block; pointer-events: none; flex-shrink: 0; transition: transform .25s var(--ease); }
.theme-icon--sun { display: block; }
.theme-icon--moon { display: none; }
.is-night.pro-page .theme-toggle { border-color: rgba(245,243,237,.45); background: rgba(245,243,237,.1); }
.is-night.pro-page .theme-toggle i { color: #d8ef78; }
.is-night.pro-page .theme-toggle .theme-icon--sun { display: none; }
.is-night.pro-page .theme-toggle .theme-icon--moon { display: block; }
.theme-toggle--creative { border-color: rgba(255,242,232,.38); background: rgba(255,242,232,.08); }
.theme-toggle--creative i { color: #ffab55; }
.theme-toggle--creative .theme-icon--sun { display: none; }
.theme-toggle--creative .theme-icon--moon { display: block; }
.is-night.creative-page .theme-toggle--creative { border-color: rgba(28,12,35,.45); background: rgba(28,12,35,.08); }
.is-night.creative-page .theme-toggle--creative i { color: #ffab55; }
.is-night.creative-page .theme-toggle--creative .theme-icon--sun { display: block; }
.is-night.creative-page .theme-toggle--creative .theme-icon--moon { display: none; }
.theme-toggle:hover, .theme-toggle:focus-visible { outline: 0; border-color: var(--green-deep); background: rgba(169,212,71,.23); transform: translateY(-1px); }
.theme-toggle:hover .theme-icon { transform: rotate(15deg); }
.theme-toggle:active { transform: translateY(0) scale(.94); }
.theme-toggle:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
.theme-toggle--creative:hover, .theme-toggle--creative:focus-visible { border-color: #ffab55; background: rgba(255,171,85,.18); transform: translateY(-1px); }
.theme-toggle--creative:hover .theme-icon { transform: rotate(15deg); }
.theme-toggle--creative:active { transform: translateY(0) scale(.94); }
.theme-toggle--creative:focus-visible { outline: 2px solid #ffab55; outline-offset: 3px; }
.header-contact { display: inline-flex; align-items: center; min-height: 24px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }

/* Consistent hover language for every call-to-action arrow. */
.button span, .creator-button span, .text-link span, .creator-text-link span, .reel-profile-link span, .project-dossier__links a span, .payment-source a span { display: inline-block; transition: transform .28s var(--ease); }.button:hover span, .button:focus-visible span, .creator-button:hover span, .creator-button:focus-visible span, .text-link:hover span, .text-link:focus-visible span, .creator-text-link:hover span, .creator-text-link:focus-visible span, .reel-profile-link:hover span, .reel-profile-link:focus-visible span, .project-dossier__links a:hover span, .project-dossier__links a:focus-visible span, .payment-source a:hover span, .payment-source a:focus-visible span { animation: arrow-flick .62s var(--ease) both; }

/* Expandable project dossiers: project detail, local image preview, and download stay beside each project. */
.project-dossier { grid-column: 2 / -1; margin-top: -4px; color: #fff2e8; }.project-dossier summary { display: inline-flex; gap: 10px; align-items: center; padding: 9px 0; color: var(--green); cursor: pointer; font: 700 10px var(--mono); letter-spacing: .055em; text-transform: uppercase; list-style: none; }.project-dossier summary::-webkit-details-marker { display: none; }.project-dossier summary span { font-size: 16px; transition: transform .3s var(--ease); }.project-dossier[open] summary span { transform: rotate(45deg); }.project-dossier__content { display: grid; grid-template-columns: minmax(180px, .55fr) 1fr; gap: 27px; align-items: stretch; margin: 4px 0 20px; padding: 19px; border: 1px solid rgba(245,243,237,.22); background: rgba(245,243,237,.05); animation: dossier-open .42s var(--ease) both; }.project-dossier__content > div:last-child > p:not(.project-dossier__label) { max-width: 560px; margin: 8px 0 21px; color: rgba(245,243,237,.82); font-size: 12px; line-height: 1.7; }.project-dossier__label { margin: 0; color: var(--green); font: 500 9px var(--mono); letter-spacing: .075em; }.project-visual { position: relative; display: flex; min-height: 170px; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 14px; border: 1px solid rgba(245,243,237,.32); color: rgba(245,243,237,.78); background: linear-gradient(135deg, #30422d, #121514); font: 500 9px var(--mono); letter-spacing: .06em; }.project-visual::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(245,243,237,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(245,243,237,.2) 1px, transparent 1px); background-size: 22px 22px; }.project-visual--rf { background: radial-gradient(circle at 50% 50%, rgba(169,212,71,.6) 0 2px, transparent 3px 15px, rgba(169,212,71,.18) 16px 17px, transparent 18px), #11231f; }.project-visual--ai { background: linear-gradient(135deg, #21354c, #11161d); }.project-visual--hostel { background: linear-gradient(135deg, #4d3e24, #16130d); }.project-visual--wheelchair { background: linear-gradient(135deg, #4c3b5a, #17121d); }.project-visual > * { position: relative; z-index: 1; }.project-visual img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; }.project-visual label { align-self: start; margin-top: 11px; padding: 7px 8px; border: 1px solid rgba(245,243,237,.48); color: #fff; cursor: pointer; font-size: 8px; transition: color .2s, background .2s; }.project-visual label:hover { color: #121514; background: var(--green); }.project-visual input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }.project-dossier__links { display: flex; flex-wrap: wrap; gap: 18px; }.project-dossier__links a { color: #fff; font-size: 10px; font-weight: 800; }.project-dossier__links a:first-child { color: var(--green); }.project-dossier__links a:focus-visible, .project-dossier summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

/* Rebuilt booking close: clear three-step process rather than a generic reference drop. */
.booking-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 35px; border-top: 1px solid var(--line); }.booking-steps article { min-height: 165px; padding: 20px 25px 16px 0; border-right: 1px solid var(--line); }.booking-steps article + article { padding-left: 25px; }.booking-steps article:last-child { border-right: 0; }.booking-steps span { color: var(--green-deep); font: 500 9px var(--mono); letter-spacing: .08em; }.booking-steps strong { display: block; margin-top: 31px; font-size: 17px; letter-spacing: -.045em; }.booking-steps p { max-width: 205px; margin: 8px 0 0; color: rgba(18,21,20,.74); font-size: 11px; line-height: 1.55; }.payment-source { margin: 26px 0 0; color: rgba(18,21,20,.68); font: 500 10px var(--mono); line-height: 1.6; }.payment-source a { color: var(--green-deep); font-weight: 800; }.payment-source em { font-style: normal; }.is-night.pro-page .booking-steps { border-color: rgba(245,243,237,.2); }.is-night.pro-page .booking-steps article { border-color: rgba(245,243,237,.2); }.is-night.pro-page .booking-steps span, .is-night.pro-page .payment-source a { color: #d8ef78; }.is-night.pro-page .booking-steps p, .is-night.pro-page .payment-source { color: rgba(245,243,237,.78); }

/* More movement in the first creative frame and a configurable Instagram Reel shelf. */
.creative-hero__noise::after { content: "CUT / HOLD / MOVE / REPEAT"; position: absolute; right: -13%; bottom: 9%; color: rgba(255,242,232,.14); font: 800 clamp(20px, 3vw, 46px) var(--mono); letter-spacing: .07em; white-space: nowrap; transform: rotate(-8deg); animation: tape-drift 12s linear infinite; }.creative-hero.motion-active .viewfinder { animation: finder-pulse 2.8s ease-in-out infinite alternate; }.creative-hero.motion-active .creator-hero-actions { animation: action-settle .7s var(--ease) .2s both; }.instagram-reel-feed { display: grid; gap: 12px; max-width: 100%; margin-top: 20px; padding: 20px; border: 1px solid rgba(255,242,232,.25); background: rgba(255,242,232,.05); }.instagram-reel-feed > p { margin: 0; color: rgba(255,242,232,.82); font-size: 12px; line-height: 1.65; }.instagram-reel-feed code { padding: 2px 4px; color: #ffbd58; background: rgba(255,189,88,.12); font: 500 10px var(--mono); }.instagram-reel-feed a { color: #ffbd58; font-weight: 800; }.instagram-reel-feed .instagram-media { min-width: 0 !important; width: 100% !important; margin: 0 !important; background: transparent !important; }.is-night.creative-page .instagram-reel-feed { border-color: rgba(28,12,35,.22); background: rgba(28,12,35,.05); }.is-night.creative-page .instagram-reel-feed > p { color: rgba(28,12,35,.82); }.is-night.creative-page .instagram-reel-feed code, .is-night.creative-page .instagram-reel-feed a { color: #752d62; }

.outcomes.motion-active .outcome span[data-count] { animation: count-glow 1.2s var(--ease) both; }
@keyframes arrow-flick { 42% { transform: translate(5px, -5px); } 100% { transform: translate(0); } }
@keyframes dossier-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tape-drift { from { transform: translateX(0) rotate(-8deg); } to { transform: translateX(-22%) rotate(-8deg); } }
@keyframes finder-pulse { to { transform: scale(1.08); border-color: #fff2e8; } }
@keyframes action-settle { from { opacity: 0; transform: translateY(15px) rotate(-2deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes count-glow { 45% { color: #f5f3ed; text-shadow: 0 0 24px rgba(245,243,237,.7); } }

@media (max-width: 900px) { .project-dossier__content { grid-template-columns: 1fr; }.project-visual { min-height: 205px; }.booking-steps { grid-template-columns: 1fr; }.booking-steps article, .booking-steps article + article { min-height: auto; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }.booking-steps article:last-child { border-bottom: 0; }.is-night.pro-page .booking-steps article { border-color: rgba(245,243,237,.2); } }
/* =========================================================
   COMPREHENSIVE MOBILE LAYOUT SYSTEM (max-width: 768px)
   ========================================================= */
@media (max-width: 768px) {
  /* Site Header: Clean 3-zone layout with equal vertical centering */
  .site-header,
  .site-header--creative {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 64px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    z-index: 50 !important;
  }
  .site-header .wordmark,
  .site-header--creative .wordmark--creative {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: -.06em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  /* Center Navigation & Identity Switch */
  .site-header .site-nav,
  .site-header nav {
    position: static !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 4px !important;
  }
  .identity-switch {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    min-height: 32px !important;
    font-size: 8px !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
    padding: 0 !important;
  }
  .identity-switch i {
    width: 32px !important;
    height: 18px !important;
    border-radius: 999px !important;
  }
  .identity-switch i b {
    top: 3px !important;
    left: 3px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
  }
  .identity-switch--creative i b {
    transform: translateX(14px) !important;
  }

  /* Right Action Buttons: Nav Menu & Theme Toggle */
  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
  .header-contact,
  .header-contact--creative {
    display: none !important;
  }
  .nav-menu,
  .nav-menu--creative {
    position: relative !important;
    display: inline-block !important;
    margin: 0 !important;
  }
  .nav-menu summary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 11px !important;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 999px !important;
    border: 1px solid var(--line) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    box-sizing: border-box !important;
    background: rgba(245,243,237,.92) !important;
    backdrop-filter: blur(12px) !important;
    cursor: pointer !important;
  }
  .is-night.pro-page .nav-menu summary {
    border-color: rgba(245,243,237,.25) !important;
    background: rgba(18,21,20,.92) !important;
    color: #f5f3ed !important;
  }
  .nav-menu--creative summary {
    border-color: rgba(255,242,232,.3) !important;
    background: rgba(21,14,36,.92) !important;
    color: #fff2e8 !important;
  }
  .is-night.creative-page .nav-menu--creative summary {
    border-color: rgba(28,12,35,.25) !important;
    background: rgba(255,240,230,.95) !important;
    color: #1c0c23 !important;
  }
  .theme-toggle,
  .theme-toggle--creative {
    width: 32px !important;
    min-height: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .theme-toggle .theme-icon,
  .theme-toggle--creative .theme-icon {
    width: 14px !important;
    height: 14px !important;
  }
  .nav-menu > div {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: 190px !important;
    z-index: 100 !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.2) !important;
    border-radius: 6px !important;
    max-height: calc(100vh - 85px) !important;
    overflow-y: auto !important;
  }

  /* Hero Section Alignment */
  .pro-hero,
  .creative-hero {
    min-height: auto !important;
    padding: 105px 20px 45px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  .pro-hero h1 {
    font-size: clamp(42px, 12.5vw, 64px) !important;
    line-height: .92 !important;
    letter-spacing: -.07em !important;
    word-break: break-word !important;
    margin-bottom: 18px !important;
  }
  .creative-hero h1 {
    font-size: clamp(48px, 14vw, 76px) !important;
    line-height: .92 !important;
    letter-spacing: -.07em !important;
    margin-bottom: 18px !important;
  }
  .hero-intro,
  .creative-hero__copy > p:not(.creator-kicker) {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 24px !important;
    max-width: 100% !important;
  }
  .hero-identity {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    font-size: 8px !important;
    margin-bottom: 14px !important;
  }
  .hero-specialties {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin-bottom: 26px !important;
  }
  .hero-specialties li {
    font-size: 8px !important;
    padding: 5px 8px !important;
  }

  /* Hero Buttons Alignment - Full Width & Stacked with Equal Tap Targets */
  .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 8px !important;
  }
  .hero-buttons .button {
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    font-size: 11px !important;
    letter-spacing: .04em !important;
    border-radius: 2px !important;
  }
  .creator-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 8px !important;
  }
  .creator-hero-actions .creator-button,
  .creator-hero-actions .chaos-toggle {
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    font-size: 11px !important;
    border-radius: 2px !important;
  }

  /* Portraits & Grid Alignment */
  .pro-portrait,
  .creator-portrait {
    width: 100% !important;
    max-width: 380px !important;
    aspect-ratio: 1 !important;
    margin: 12px auto 0 !important;
    justify-self: center !important;
  }
  .hero-index {
    position: static !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 14px !important;
    font-size: 8px !important;
  }

  /* Sections & Spacing */
  .section,
  .creative-section {
    padding: 72px 20px !important;
  }
  .display,
  .creative-display {
    font-size: clamp(34px, 9.5vw, 54px) !important;
    line-height: .95 !important;
  }
  .profile-grid,
  .creative-about__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .profile-copy p,
  .creative-about__copy p {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
  .credential-strip,
  .outcome-grid {
    grid-template-columns: 1fr !important;
    margin-top: 48px !important;
  }
  .credential-strip article,
  .outcome {
    min-height: auto !important;
    padding: 18px 0 !important;
    border-right: 0 !important;
    border-top: 1px solid var(--line) !important;
  }
  .credential-strip article:first-child,
  .outcome:first-child {
    border-top: 0 !important;
  }
  .timeline-item {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 22px 0 !important;
  }
  .timeline-item h3 {
    font-size: 20px !important;
  }

  /* Project Dossier */
  .project-dossier {
    grid-column: 1 / -1 !important;
  }
  .project-dossier__content {
    padding: 16px !important;
  }
  .project-dossier__links {
    gap: 12px !important;
  }
  .creative-hero__noise::after {
    bottom: 14% !important;
    font-size: 19px !important;
  }
  .instagram-reel-feed {
    padding: 15px !important;
  }

  /* Booking & Service Buttons */
  .service-picker {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .service-card {
    min-height: auto !important;
    padding: 20px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .booking-cta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }
  .booking-cta .button {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }

  /* Contact Actions */
  .contact-actions,
  .creative-contact-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .contact-actions .button,
  .contact-actions .text-link,
  .creative-contact-actions .creator-button,
  .creative-contact-actions .creator-text-link {
    width: 100% !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    font-size: 11px !important;
  }
  .contact-actions .text-link,
  .creative-contact-actions .creator-text-link {
    border: 1px solid var(--line) !important;
  }
  .is-night.pro-page .contact-actions .text-link {
    border-color: rgba(245,243,237,.25) !important;
  }
  .creative-contact-actions .creator-text-link {
    border-color: rgba(255,242,232,.3) !important;
  }

  /* Footer Alignment */
  .footer,
  .footer--creative {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 16px !important;
    padding: 34px 20px !important;
    min-height: auto !important;
  }
  .footer .wordmark,
  .footer--creative .wordmark--creative {
    margin: 0 !important;
  }
  .footer .social-icons,
  .footer--creative .social-icons--creative {
    margin: 0 !important;
    justify-content: center !important;
  }
  .footer > a:last-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 10px !important;
    margin-top: 4px !important;
  }
}
@media (prefers-reduced-motion: reduce) { .button:hover span, .creator-button:hover span, .text-link:hover span, .creator-text-link:hover span, .reel-profile-link:hover span, .project-dossier__links a:hover span, .payment-source a:hover span, .creative-hero__noise::after, .creative-hero.motion-active .viewfinder, .creative-hero.motion-active .creator-hero-actions, .outcomes.motion-active .outcome span[data-count] { animation: none; } }

.project-visual label, .project-visual [data-project-photo-state] { z-index: 3; }