:root {
  --ink: #07070a;
  --ink-2: #0c0c11;
  --surface: #101017;
  --bone: #eceae5;
  --dim: #b0b0b8;
  --acid: #d4ff3f;
  --line: #343439;
  --error: #ffb7b7;
  --display: 'Clash Display', sans-serif;
  --body: 'Satoshi', sans-serif;
  --gutter: clamp(24px, 5vw, 80px);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --interaction: 180ms var(--ease-out);
  color-scheme: dark;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:auto;scroll-padding-top:104px}
body {margin:0;background:var(--ink);color:var(--bone);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased}
::selection {background:var(--acid);color:var(--ink)}
:focus-visible {outline:2px solid var(--acid);outline-offset:5px}
input,textarea,select {caret-color:var(--acid)}
* {scrollbar-color:var(--line) var(--ink)}
a {color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}
button,input,textarea {font:inherit}
button,a,input,textarea,summary {-webkit-tap-highlight-color:transparent}
button,a,summary {touch-action:manipulation}
button {cursor:pointer}
button:disabled {cursor:wait}
img {display:block;max-width:100%;height:auto}
[hidden] {display:none!important}
h1,h2,h3,p {margin:0}
h1,h2,h3 {text-wrap:balance}
h1,h2 {font-family:var(--display);font-weight:500;letter-spacing:-.035em;line-height:1.02}
h1 {font-size:clamp(48px,7.1vw,100px)}
h2 {font-size:clamp(36px,4.5vw,64px)}
h3 {font-size:clamp(23px,2.3vw,32px);font-weight:500;line-height:1.2}
p {max-width:66ch}
.wrap {width:min(100%,1600px);padding-inline:var(--gutter);margin-inline:auto}
.grain {position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;mix-blend-mode:screen}
.skip {position:fixed;left:16px;top:-100px;background:var(--acid);color:var(--ink);padding:12px 18px;z-index:1000}
.skip:focus {top:12px}
.site-header {position:sticky;top:0;z-index:40;background:var(--ink);border-bottom:1px solid var(--line)}
.header-inner {display:flex;align-items:center;min-height:88px;gap:36px}
.brand {display:flex;align-items:center;gap:13px;text-decoration:none;margin-right:auto;min-height:48px}
.brand img {width:29px;height:36px;object-fit:contain}
.brand span {font:600 20px/1 var(--display);letter-spacing:-.025em;text-transform:uppercase}
.main-nav {display:flex;align-items:center;gap:32px}
.main-nav a {font-size:15px;text-decoration:none;min-height:44px;display:flex;align-items:center}
.main-nav a:hover,.main-nav a[aria-current="page"] {color:var(--acid)}
.button {display:inline-flex;justify-content:center;align-items:center;gap:22px;padding:16px 23px;min-height:52px;background:var(--acid);color:var(--ink);font-weight:700;font-size:15px;border:1px solid var(--acid);text-decoration:none;transition:background .15s,color .15s}
.button:hover:not(:disabled) {background:var(--bone);border-color:var(--bone)}
.button:disabled {opacity:.7}
.button:disabled {cursor:not-allowed}
.lead-form[aria-busy="true"] .button:disabled {cursor:wait}
.button.secondary {background:transparent;border-color:var(--line);color:var(--bone)}
.button.secondary:hover {border-color:var(--bone)}
.text-link {display:inline-flex;align-items:center;gap:14px;min-height:48px;font-weight:500}
.arrow {width:18px;height:18px;flex-shrink:0}
.menu-toggle {display:none;background:transparent;border:1px solid var(--line);color:var(--bone);min-width:48px;min-height:48px}
.menu-toggle .menu-lines {display:block;width:20px;height:12px;margin:auto;border-top:1px solid;border-bottom:1px solid}
.mobile-nav {border-top:1px solid var(--line);padding:12px var(--gutter) 24px}
.mobile-nav a {display:block;font-size:24px;text-decoration:none;padding:10px 0;min-height:48px}
.hero {padding-block:clamp(48px,7vw,100px) 48px}
.hero-top {display:grid;grid-template-columns:1.3fr 1fr;gap:7vw;align-items:end}
.hero h1 {max-width:11ch}
.hero-copy {max-width:460px;padding-bottom:5px}
.hero-copy p {font-size:clamp(18px,1.5vw,22px);color:var(--dim)}
.actions {display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:28px}
.hero-foot {margin-top:32px;display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid var(--line);color:var(--dim);font-size:14px}
.film-strip {display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:40px}
.film-still {position:relative;display:block;overflow:hidden;text-decoration:none;background:var(--surface)}
.film-still img {width:100%;height:clamp(220px,28vw,380px);object-fit:cover;transition:transform .35s ease-out}
.film-still-label {position:absolute;bottom:0;left:0;right:0;padding:40px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.88));display:flex;align-items:end;justify-content:space-between;gap:12px;color:#fff;font-size:15px}
.play-label {display:flex;align-items:center;gap:8px}
.play-icon {width:28px;height:28px}
.section {padding-block:clamp(64px,8vw,120px)}
.section-rule {border-top:1px solid var(--line)}
.section-head {display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:48px}
.section-head p {color:var(--dim);max-width:39ch}
.service-list {margin-top:40px}
.service-row {display:grid;grid-template-columns:1fr 1.1fr;gap:6vw;padding-block:27px;border-top:1px solid var(--line)}
.service-row p {color:var(--dim);max-width:52ch}
.service-row:last-child {border-bottom:1px solid var(--line)}
.service-small {margin-top:30px;color:var(--dim);font-size:16px;max-width:70ch}
.studio-grid {display:grid;grid-template-columns:1fr 1fr;gap:7vw}
.studio-copy p+p {margin-top:22px}
.studio-copy p {color:var(--dim);font-size:19px}
.studio-copy .text-link {margin-top:22px;color:var(--bone);font-size:16px}
.steps {list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.steps li {border-top:1px solid var(--line);padding-top:22px}
.steps h3 {font-size:24px;margin-bottom:12px}
.steps p {font-size:16px;color:var(--dim)}
.inquiry-section {background:var(--ink-2);border-top:1px solid var(--line)}
.inquiry-layout {display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw}
.inquiry-intro p {margin-top:24px;color:var(--dim);max-width:35ch;font-size:19px}
.inquiry-intro .direct {font-size:16px;margin-top:32px}
.lead-form {max-width:680px;scroll-margin-top:0}
.form-intro {font-size:14px;color:var(--dim);margin-bottom:24px}
.form-setup-note {font-size:14px;color:var(--bone);padding:16px;background:var(--surface);border:1px solid var(--line);margin-bottom:24px}
.contact-email {margin-top:28px;font-size:15px;color:var(--dim)}
.field-grid {display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field {margin-bottom:22px}
label {display:block;font-size:15px;font-weight:500;margin-bottom:8px}
label .optional {font-weight:400;color:var(--dim)}
input,textarea {display:block;width:100%;padding:13px 15px;min-height:50px;border:1px solid #62626b;background:var(--surface);border-radius:0;color:var(--bone)}
input::placeholder,textarea::placeholder {color:var(--dim)}
input:focus,textarea:focus {outline:2px solid var(--acid);outline-offset:2px;border-color:transparent}
textarea {min-height:126px;resize:vertical}
input[aria-invalid="true"],textarea[aria-invalid="true"] {border-color:var(--error)}
.field-error {color:var(--error);font-size:14px;margin-top:7px}
.optional-details {border-top:1px solid var(--line);margin:0 0 24px}
summary {cursor:pointer;min-height:48px;padding-block:14px;font-size:15px}
.optional-details[open] summary {margin-bottom:8px}
.privacy-note {font-size:13px;color:var(--dim);margin-top:16px;line-height:1.6}
.form-status {margin-top:16px;font-size:15px;line-height:1.5}
.form-status[data-state="error"] {color:var(--error)}
.success {padding:28px 0;border-top:1px solid var(--acid)}
.success h2 {color:var(--acid);font-family:var(--display);font-size:36px;margin-bottom:18px}
.success p {color:var(--dim)}
.success .text-link {margin-top:20px}
.hp {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.page-intro {padding-block:clamp(48px,7vw,100px) 40px}
.page-intro h1 {max-width:14ch}
.page-intro p {margin-top:28px;color:var(--dim);font-size:21px;max-width:52ch}
.work-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px;padding-bottom:80px}
.work-card {min-width:0}
.video-shell {position:relative;aspect-ratio:16/9;background:var(--surface);overflow:hidden}
.video-trigger {display:block;border:0;padding:0;width:100%;height:100%;color:white;background:var(--surface);text-decoration:none}
.video-trigger img {width:100%;height:100%;object-fit:cover;transition:transform .3s ease-out}
.video-trigger .play-badge {position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;padding:10px 15px;background:var(--ink);font-size:15px}
.video-shell iframe,.video-shell video {position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.work-info {display:flex;justify-content:space-between;align-items:start;gap:20px;padding-top:18px}
.work-info h2 {font:500 25px/1.2 var(--body);letter-spacing:-.02em}
.work-info p {color:var(--dim);font-size:14px;margin-top:7px}
.work-info a,.work-tag {font-size:14px;white-space:nowrap;min-height:44px;display:flex;align-items:center}
.work-tag {color:var(--acid)}
.editorial {max-width:760px;padding-block:20px 80px}
.editorial h2 {font-size:32px;line-height:1.15;margin-block:36px 16px}
.editorial p,.editorial ul {color:var(--dim);margin-bottom:20px}
.editorial li {margin-bottom:8px}
.editorial a {color:var(--bone)}
.notes-list {list-style:none;padding:0;margin:0}
.notes-list li {border-top:1px solid var(--line)}
.notes-list a {display:block;padding:24px 0;font-size:24px;text-decoration:none}
.notes-list a:hover {color:var(--acid)}
.note {font-size:14px;color:var(--dim);margin-top:28px}
.simple-cta {display:flex;align-items:center;justify-content:space-between;gap:32px;border-top:1px solid var(--line);padding-block:64px}
.simple-cta h2 {font-size:clamp(32px,4vw,56px)}
.site-footer {border-top:1px solid var(--line);padding-block:40px 24px}
.footer-top {display:flex;justify-content:space-between;gap:32px}
.footer-top p {color:var(--dim);font-size:15px}
.footer-links {display:flex;flex-wrap:wrap;gap:8px 28px}
.footer-links a {font-size:14px;min-height:44px;display:flex;align-items:center}
.footer-bottom {display:flex;justify-content:space-between;gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.footer-bottom a {padding-block:10px}

/* The original GP signature, kept short and confined to the first homepage visit. */
.site-intro {position:fixed;inset:0;z-index:900;display:grid;place-items:center;background:var(--ink);animation:intro-exit 350ms var(--ease-out) 1050ms forwards}
.site-intro__lockup {display:grid;grid-template-columns:auto auto;align-items:center;column-gap:clamp(16px,2vw,22px);row-gap:22px}
.site-intro__mark {position:relative;width:clamp(44px,5vw,58px);animation:intro-mark 500ms var(--ease-out) both}
.site-intro__mark img {width:100%;height:auto}
.site-intro__ghost {position:absolute;inset:0;opacity:0;pointer-events:none}
.site-intro__ghost--lime {filter:sepia(1) saturate(8) hue-rotate(29deg);animation:intro-slice-lime 750ms steps(1,end) 100ms both}
.site-intro__ghost--white {animation:intro-slice-white 750ms steps(1,end) 100ms both}
.site-intro__name {font:600 clamp(34px,4.2vw,48px)/1 var(--display);letter-spacing:-.025em;text-transform:uppercase;animation:intro-name 650ms var(--ease-out) both}
.site-intro__line {grid-column:1 / -1;width:100%;height:1px;background:var(--line);overflow:hidden}
.site-intro__line::after {content:"";display:block;width:100%;height:100%;background:var(--acid);transform-origin:left;animation:intro-line 850ms var(--ease-out) both}
@keyframes intro-mark {from{opacity:.65;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes intro-name {from{opacity:0}to{opacity:1}}
@keyframes intro-line {from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes intro-slice-lime {
  0%,28%,100%{opacity:0;transform:none;clip-path:inset(0)}
  22%{opacity:.7;transform:translateX(5px);clip-path:inset(22% 0 58%)}
}
@keyframes intro-slice-white {
  0%,65%,100%{opacity:0;transform:none;clip-path:inset(0)}
  58%{opacity:.6;transform:translateX(-4px);clip-path:inset(62% 0 18%)}
}
@keyframes intro-exit {to{opacity:0;visibility:hidden;pointer-events:none}}

/* Motion communicates what can be clicked; static service copy stays still. */
.button {transition:background var(--interaction),color var(--interaction),border-color var(--interaction),transform var(--interaction)}
.button .arrow,.text-link .arrow {transition:transform var(--interaction)}
.text-link,.footer-links a,.work-info a,summary {transition:color var(--interaction),text-decoration-color var(--interaction)}
.main-nav a {position:relative;transition:color var(--interaction)}
.main-nav a::after {content:"";position:absolute;bottom:5px;left:0;right:0;height:1px;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform var(--interaction)}
.main-nav a[aria-current="page"]::after,.main-nav a:focus-visible::after {transform:scaleX(1)}
.button:focus-visible:not(:disabled) {background:var(--bone);border-color:var(--bone)}
.button:focus-visible .arrow,.text-link:focus-visible .arrow {transform:translateX(4px)}
.text-link:focus-visible,.footer-links a:focus-visible,.work-info a:focus-visible,summary:focus-visible {color:var(--acid)}
.film-still img,.video-trigger img {transition:transform 550ms var(--ease-out),filter 550ms var(--ease-out)}
.film-still::after {content:"";position:absolute;inset:0;border:1px solid var(--acid);opacity:0;pointer-events:none;transition:opacity var(--interaction)}
.play-icon {transition:transform 260ms var(--ease-out),color var(--interaction)}
.play-badge {transition:background var(--interaction),color var(--interaction)}
.film-still:focus-visible::after {opacity:1}
.film-still:focus-visible .play-icon {color:var(--acid);transform:scale(1.08)}
.video-trigger:focus-visible .play-badge {background:var(--acid);color:var(--ink)}
.menu-toggle {transition:border-color var(--interaction),background var(--interaction)}
.menu-toggle .menu-lines {position:relative;border:0}
.menu-toggle .menu-lines::before,.menu-toggle .menu-lines::after {content:"";position:absolute;left:0;width:20px;height:1px;background:currentColor;transition:transform 220ms var(--ease-out)}
.menu-toggle .menu-lines::before {top:0}
.menu-toggle .menu-lines::after {bottom:0}
.menu-toggle[aria-expanded="true"] .menu-lines::before {transform:translateY(5.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-lines::after {transform:translateY(-5.5px) rotate(-45deg)}
input,textarea {transition:border-color var(--interaction),background var(--interaction)}
@media(hover:hover) and (pointer:fine) {
  .main-nav a:hover::after {transform:scaleX(1)}
  .button:hover:not(:disabled) {transform:translateY(-2px)}
  .button:hover:not(:disabled) .arrow,.text-link:hover .arrow {transform:translateX(4px)}
  .text-link:hover,.footer-links a:hover,.work-info a:hover,summary:hover {color:var(--acid)}
  .film-still:hover img,.video-trigger:hover img {transform:scale(1.035);filter:contrast(1.04)}
  .film-still:hover::after {opacity:1}
  .film-still:hover .play-icon {color:var(--acid);transform:scale(1.08)}
  .video-trigger:hover .play-badge {background:var(--acid);color:var(--ink)}
  .menu-toggle:hover {border-color:var(--bone)}
}
.button:active:not(:disabled) {transform:translateY(0) scale(.98);transition-duration:100ms}
@media(min-width:1600px) {.hero h1 {font-size:100px}}
@media(max-width:1000px) {
  .hero-top {gap:40px;grid-template-columns:1.1fr 1fr}
  .main-nav {gap:20px}
  .header-inner {gap:24px}
  .inquiry-layout {gap:44px}
}
@media(max-width:760px) {
  html {scroll-padding-top:96px}
  .header-inner {min-height:76px;gap:12px}
  .brand {gap:8px}
  .brand span {font-size:17px}
  .brand img {width:24px;height:30px}
  .main-nav {display:none}
  .header-inner>.button {padding:12px 13px;min-height:46px;font-size:13px}
  .header-inner>.button .arrow {display:none}
  .menu-toggle {display:block}
  .hero {padding-top:44px}
  .hero-top {grid-template-columns:1fr;gap:24px}
  .hero h1 {font-size:clamp(49px,11vw,74px);max-width:12ch}
  .hero-copy p {font-size:19px}
  .actions {gap:12px 24px;margin-top:24px}
  .film-strip {margin-top:32px;grid-template-columns:1fr;gap:16px}
  .film-still img {height:240px}
  .film-strip .film-still:nth-child(2) {display:none}
  .hero-foot {font-size:13px;display:block;margin-top:20px}
  .hero-foot span {display:block}
  .hero-foot span+span {margin-top:5px}
  .section {padding-block:64px}
  .section-head {display:block;margin-bottom:32px}
  .section-head p {margin-top:20px}
  .service-row {grid-template-columns:1fr;gap:14px}
  .studio-grid,.inquiry-layout {grid-template-columns:1fr;gap:32px}
  .studio-copy p,.inquiry-intro p {font-size:18px}
  .inquiry-intro .direct {margin-top:20px}
  .steps {grid-template-columns:1fr;gap:28px}
  .page-intro p {font-size:19px}
  .work-grid {grid-template-columns:1fr;gap:36px;padding-bottom:64px}
  .work-info h2 {font-size:23px}
  .simple-cta {align-items:start;flex-direction:column;padding-block:48px}
  .footer-top,.footer-bottom {flex-direction:column;gap:20px}
  .footer-bottom {margin-top:20px}
  .footer-links {gap:8px 20px}
}
@media(max-width:420px) {
  .field-grid {grid-template-columns:1fr;gap:0}
  .brand span {line-height:1}
  .hero h1 {font-size:49px}
  .film-still img {height:220px}
  .work-info {display:block}
  .work-info a {margin-top:4px}
  .lead-form .button {width:100%}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  .site-intro {display:none!important}
  .film-still img,.video-trigger img,.button,.arrow,.play-icon,.main-nav a::after,.menu-lines::before,.menu-lines::after {transition:none!important}
  .film-still:hover img,.video-trigger:hover img,.button:hover:not(:disabled),.button:active:not(:disabled),.button .arrow,.text-link .arrow,.film-still .play-icon {transform:none!important}
}
.check-field {display:flex;align-items:center;gap:12px;min-height:48px;margin:0 0 20px;font-weight:400;cursor:pointer}
.check-field input {width:20px;height:20px;min-height:0;padding:0;flex:none;accent-color:var(--acid)}
.policy-list {margin-top:8px}
.policy-list .service-row h2 {font-size:clamp(24px,3vw,34px)}
.svc-list {list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.svc-item {border:1px solid var(--line);background:var(--surface)}
.svc-item h3 {margin:0;font:500 17px/1.3 var(--body)}
.svc-toggle {display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 18px;background:none;border:0;color:var(--bone);text-align:left;transition:color var(--interaction)}
.svc-toggle:focus-visible {outline:2px solid var(--acid);outline-offset:-2px}
.svc-plus {position:relative;flex:none;width:14px;height:14px}
.svc-plus::before,.svc-plus::after {content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:currentColor;transition:transform var(--interaction)}
.svc-plus::after {transform:rotate(90deg)}
.svc-toggle[aria-expanded="true"] .svc-plus::after {transform:rotate(0deg)}
.svc-toggle[aria-expanded="true"] {color:var(--acid)}
.svc-detail {padding:0 18px 18px;font-size:15px;color:var(--dim)}
.svc-detail ul {margin:0;padding-left:18px}
.svc-detail li {margin-bottom:4px}
.svc-label {margin-top:12px;margin-bottom:4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone)}
.svc-detail .svc-label:first-child {margin-top:0}
@media(hover:hover) {.svc-toggle:hover {color:var(--acid)}}