:root {
  color-scheme: dark;
  --ink: #0b0d0c;
  --ink-soft: #101412;
  --panel: #151a17;
  --panel-lift: #1b211d;
  --paper: #f0f0e8;
  --muted: #8e9890;
  --muted-light: #bec5bd;
  --line: rgba(240, 240, 232, .13);
  --line-strong: rgba(240, 240, 232, .23);
  --acid: #c8ff4a;
  --acid-soft: #dbff83;
  --font-display: 'Space Grotesk', 'Arial', sans-serif;
  --font-body: 'DM Sans', 'Arial', sans-serif;
  --content: 1240px;
  --gutter: clamp(22px, 6.3vw, 100px);
  --ease: cubic-bezier(.22, .72, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body:has(.project-dialog[open]) { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { color: var(--ink); background: var(--acid); }
.section-shell { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 16px; transform: translateY(-160%); background: var(--acid); color: var(--ink); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; }

.site-header { position: absolute; z-index: 20; inset: 0 0 auto; border-bottom: 1px solid rgba(240,240,232,.08); }
.header-inner { width: min(100% - 2 * var(--gutter), 1400px); min-height: 82px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 37px; height: 37px; color: var(--paper); }
.brand-name { position: relative; display: flex; align-items: baseline; gap: 1px; font: 700 17px/1 var(--font-display); letter-spacing: -.06em; }
.brand-name small { margin-left: 5px; color: var(--muted); font: 600 8px/1 var(--font-body); letter-spacing: .24em; }
.brand-dot { color: var(--acid); }
.primary-nav { display: flex; align-items: center; gap: clamp(19px, 2.4vw, 37px); }
.primary-nav > a:not(.nav-cta) { color: var(--muted-light); font-size: 12px; transition: color .18s ease; }
.primary-nav > a:not(.nav-cta):hover { color: var(--acid); }
.nav-cta { min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; gap: 15px; border: 1px solid var(--line-strong); font-size: 11px; letter-spacing: .02em; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.nav-cta span { color: var(--acid); font-size: 15px; }
.nav-cta:hover { border-color: var(--acid); color: var(--ink); background: var(--acid); }
.nav-cta:hover span { color: var(--ink); }
.menu-toggle { display: none; }

.hero { min-height: min(860px, 100svh); padding-top: 145px; padding-bottom: 110px; position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(36px, 7vw, 100px); }
.hero-copy { position: relative; z-index: 2; padding-bottom: 18px; }
.eyebrow { margin: 0; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .19em; line-height: 1.5; }
.hero .eyebrow { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px rgba(200,255,74,.6); }
.eyebrow-divider { color: var(--acid); }
.hero-brand { margin: 48px 0 10px; color: var(--acid); font: 700 12px/1.2 var(--font-display); letter-spacing: .22em; }
h1, h2, h3, p { overflow-wrap: break-word; }
.hero h1 { margin: 0; font: 600 clamp(64px, 8.4vw, 122px)/.88 var(--font-display); letter-spacing: -.085em; }
.hero h1 span { color: var(--acid); }
.hero-description { max-width: 415px; margin: 29px 0 0; color: var(--muted-light); font-size: 15px; line-height: 1.75; }
.hero-audience { max-width: 390px; margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.button { min-height: 50px; padding: 0 20px; display: inline-flex; justify-content: center; align-items: center; gap: 23px; font-size: 11px; font-weight: 700; letter-spacing: .015em; transition: transform .22s var(--ease), color .22s ease, border-color .22s ease, background .22s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: var(--ink); background: var(--acid); }
.button-primary:hover { background: var(--acid-soft); }
.button-primary span { font-size: 15px; }
.button-quiet { border: 1px solid var(--line-strong); background: rgba(255,255,255,.015); }
.button-quiet span { color: var(--acid); font-size: 15px; }
.button-quiet:hover { border-color: var(--acid); }
.hero-footnote { margin-top: 46px; display: flex; align-items: center; gap: 12px; color: var(--muted); font: 500 10px/1.2 var(--font-display); letter-spacing: .08em; }
.footnote-rule { width: 38px; height: 1px; background: var(--acid); }
.hero-visual { position: relative; z-index: 1; width: 100%; max-width: 510px; justify-self: end; }
.hero-image-wrap { position: relative; isolation: isolate; aspect-ratio: 4 / 4.65; overflow: hidden; background: #19201a; border: 1px solid rgba(240,240,232,.18); box-shadow: 0 28px 90px rgba(0,0,0,.32); }
.hero-image-wrap::before { position: absolute; z-index: 1; inset: 0; content: ''; pointer-events: none; background: linear-gradient(180deg, rgba(11,13,12,.1) 0%, transparent 35%, rgba(11,13,12,.18) 60%, rgba(11,13,12,.76) 100%), linear-gradient(90deg, rgba(11,13,12,.08), transparent 48%, rgba(200,255,74,.07)); mix-blend-mode: normal; }
.hero-image { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.04); animation: image-settle 1.15s var(--ease) both; }
.frame-corners { position: absolute; z-index: 3; inset: 16px; pointer-events: none; }
.frame-corners i { position: absolute; width: 14px; height: 14px; border-color: var(--acid); border-style: solid; opacity: .8; }
.frame-corners i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.frame-corners i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.frame-corners i:nth-child(3) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.frame-corners i:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.visual-stamp { position: absolute; z-index: 4; top: 26px; left: 28px; display: grid; gap: 2px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.visual-stamp span:first-child { font: 700 26px/1 var(--font-display); letter-spacing: -.08em; }
.visual-stamp span:last-child { color: rgba(240,240,232,.7); font-size: 7px; letter-spacing: .2em; }
.visual-playhead { position: absolute; z-index: 2; top: 17%; bottom: 24%; left: 63%; width: 1px; background: linear-gradient(180deg, transparent, var(--acid) 20%, var(--acid) 80%, transparent); box-shadow: 0 0 18px rgba(200,255,74,.58); animation: playhead-sweep 7s ease-in-out infinite alternate; }
.visual-playhead::before { position: absolute; top: 0; left: -4px; width: 9px; height: 9px; content: ''; background: var(--acid); clip-path: polygon(0 0,100% 0,50% 100%); }
.timeline-card { position: absolute; z-index: 4; right: 7%; bottom: 16%; width: min(245px, 66%); padding: 13px 13px 12px; border: 1px solid rgba(240,240,232,.22); background: rgba(13,17,14,.69); backdrop-filter: blur(14px); box-shadow: 0 12px 35px rgba(0,0,0,.2); }
.timeline-head { margin-bottom: 11px; display: flex; justify-content: space-between; gap: 10px; color: rgba(240,240,232,.65); font: 600 7px/1 var(--font-body); letter-spacing: .1em; }
.timeline-track { position: relative; display: grid; gap: 4px; }
.timeline-track i { height: 4px; border-radius: 1px; background: rgba(240,240,232,.13); }
.timeline-track .track-a { width: 72%; background: linear-gradient(90deg, rgba(200,255,74,.9), rgba(200,255,74,.27)); }
.timeline-track .track-b { width: 87%; background: linear-gradient(90deg, rgba(141,205,198,.75), rgba(141,205,198,.12)); }
.timeline-track .track-c { width: 59%; background: linear-gradient(90deg, rgba(238,172,113,.7), rgba(238,172,113,.14)); }
.timeline-track b { position: absolute; top: -4px; bottom: -4px; left: 62%; width: 1px; background: var(--acid); box-shadow: 0 0 8px var(--acid); animation: track-sweep 5s ease-in-out infinite alternate; }
.visual-caption { position: absolute; z-index: 4; right: 17px; bottom: 17px; left: 17px; display: flex; justify-content: space-between; color: rgba(240,240,232,.64); font: 600 7px/1 var(--font-body); letter-spacing: .15em; }
.visual-caption span:first-child { color: var(--acid); }
.visual-orbit { position: absolute; z-index: -1; border: 1px solid rgba(200,255,74,.19); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 92px; height: 92px; top: 11%; right: -9%; }
.orbit-two { width: 20px; height: 20px; top: 15%; right: -2%; background: var(--acid); box-shadow: 0 0 26px rgba(200,255,74,.25); }
.scroll-cue { position: absolute; bottom: 34px; left: 0; display: inline-flex; align-items: center; gap: 11px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.scroll-cue-line { width: 25px; height: 1px; background: var(--acid); }
.hero-index { position: absolute; right: 0; bottom: 31px; margin: 0; color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.hero-index span { margin-inline: 8px; color: var(--acid); }

.intro-strip { overflow: hidden; padding: 17px 0; border-block: 1px solid var(--line); background: #0e110f; }
.intro-strip-inner { width: max-content; margin-inline: auto; display: flex; align-items: center; gap: clamp(22px, 5vw, 77px); color: var(--muted-light); font: 600 9px/1 var(--font-display); letter-spacing: .18em; }
.strip-star { color: var(--acid); font-size: 13px; }

.services-section { padding-block: clamp(94px, 12vw, 162px) clamp(96px, 11vw, 150px); }
.section-heading { margin-bottom: 49px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.section-kicker { margin-bottom: 17px; }
.section-kicker span { margin-inline: 6px; color: var(--acid); }
.section-heading h2, .about-copy h2 { margin: 0; font: 500 clamp(44px, 5.8vw, 76px)/1.03 var(--font-display); letter-spacing: -.075em; }
.section-heading h2 span, .about-copy h2 span, .contact-heading h2 span { color: var(--acid); }
.section-aside { max-width: 330px; margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.services-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-block: 1px solid var(--line); }
.service-card { min-height: 252px; padding: 23px 23px 25px; position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--line); transition: background .25s ease, transform .25s var(--ease); }
.service-card:first-child { border-left: 1px solid var(--line); }
.service-card:hover { z-index: 1; transform: translateY(-5px); background: linear-gradient(145deg, rgba(200,255,74,.065), rgba(200,255,74,0) 63%); }
.service-topline { display: flex; justify-content: space-between; align-items: start; }
.service-number { color: var(--muted); font: 500 9px/1 var(--font-display); letter-spacing: .08em; }
.service-icon { width: 42px; height: 42px; color: var(--acid); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.service-card:hover .service-icon { transform: rotate(-5deg) scale(1.06); }
.service-card h3 { max-width: 220px; margin: auto 0 8px; font: 500 19px/1.25 var(--font-display); letter-spacing: -.04em; }
.service-card p { max-width: 230px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.service-arrow { position: absolute; right: 20px; bottom: 21px; color: var(--acid); font-size: 14px; opacity: 0; transform: translate(-4px,4px); transition: opacity .2s ease, transform .2s ease; }
.service-card:hover .service-arrow { opacity: 1; transform: translate(0); }

.work-section { padding-block: clamp(90px, 10vw, 135px) clamp(100px, 11vw, 150px); background: #0f1210; border-block: 1px solid rgba(240,240,232,.055); }
.work-heading { margin-bottom: 52px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 22px; row-gap: 54px; }
.project-card { grid-column: span 5; min-width: 0; }
.project-feature { grid-column: span 7; }
.project-card:nth-child(4), .project-card:nth-child(6) { grid-column: span 7; }
.project-trigger { width: 100%; padding: 0; display: block; border: 0; text-align: left; background: transparent; cursor: pointer; }
.project-image-wrap { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 1.16 / 1; background: #20251f; }
.project-card:not(.project-feature) .project-image-wrap { aspect-ratio: 1.08 / 1; }
.project-image-wrap::after { position: absolute; z-index: 1; inset: 0; content: ''; background: linear-gradient(180deg, rgba(11,13,12,0) 50%, rgba(11,13,12,.45)); pointer-events: none; }
.project-image-wrap img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.84); transition: transform .8s var(--ease), filter .5s ease; }
.project-trigger:hover .project-image-wrap img, .project-trigger:focus-visible .project-image-wrap img { transform: scale(1.045); filter: saturate(1.03); }
.project-image-index { position: absolute; z-index: 2; top: 17px; left: 17px; color: rgba(240,240,232,.75); font-size: 8px; font-weight: 600; letter-spacing: .14em; }
.project-view { position: absolute; z-index: 2; right: 16px; bottom: 16px; padding: 10px 12px; display: inline-flex; align-items: center; gap: 17px; border: 1px solid rgba(240,240,232,.45); background: rgba(11,13,12,.45); color: var(--paper); font-size: 9px; opacity: 0; transform: translateY(6px); transition: opacity .22s ease, transform .22s ease, color .22s ease, background .22s ease; backdrop-filter: blur(8px); }
.project-view b { color: var(--acid); font-size: 14px; font-weight: 400; }
.project-trigger:hover .project-view, .project-trigger:focus-visible .project-view { opacity: 1; transform: translateY(0); }
.project-meta { padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.project-meta > span:first-child { display: grid; gap: 4px; }
.project-meta strong { font: 500 16px/1.2 var(--font-display); letter-spacing: -.035em; }
.project-meta small { color: var(--muted); font-size: 9px; letter-spacing: .05em; }
.project-arrow { color: var(--acid); transition: transform .2s ease; }
.project-trigger:hover .project-arrow { transform: translate(3px,-3px); }
.portfolio-note { margin: 51px 0 0; color: var(--muted); text-align: center; font-size: 10px; }
.portfolio-note span { margin-right: 7px; color: var(--acid); }

.pricing-section { padding-block: clamp(94px, 12vw, 160px) clamp(100px, 11vw, 145px); }
.pricing-section .section-heading { margin-bottom: 45px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: stretch; border-block: 1px solid var(--line); }
.price-card { min-height: 405px; padding: 26px 27px 25px; position: relative; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(255,255,255,.012); }
.price-card:first-child { border-left: 1px solid var(--line); }
.price-card-featured { background: linear-gradient(155deg, rgba(200,255,74,.085), rgba(200,255,74,.015) 63%); }
.price-card-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.package-label { color: var(--acid); font: 700 11px/1 var(--font-display); letter-spacing: .17em; }
.package-index { color: var(--muted); font-size: 7px; letter-spacing: .1em; text-align: right; }
.price-amount { margin: 30px 0 0; font: 500 clamp(31px, 3.1vw, 43px)/1 var(--font-display); letter-spacing: -.065em; white-space: nowrap; }
.price-amount small { margin-right: 4px; color: var(--muted); font: 500 10px/1 var(--font-body); letter-spacing: .02em; vertical-align: middle; }
.price-context { min-height: 43px; margin: 13px 0 17px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.price-card ul { margin: 0; padding: 17px 0 5px; display: grid; gap: 12px; list-style: none; border-top: 1px solid var(--line); }
.price-card li { position: relative; padding-left: 17px; color: var(--muted-light); font-size: 11px; }
.price-card li::before { position: absolute; left: 0; color: var(--acid); content: '↗'; font-size: 10px; }
.price-link { margin-top: auto; padding-top: 21px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); color: var(--paper); font-size: 10px; transition: color .2s ease; }
.price-link span { color: var(--acid); font-size: 15px; transition: transform .2s ease; }
.price-link:hover { color: var(--acid); }
.price-link:hover span { transform: translate(3px,-3px); }
.featured-ribbon { position: absolute; top: -1px; right: 26px; padding: 7px 10px; display: flex; gap: 7px; color: var(--ink); background: var(--acid); font-size: 7px; font-weight: 700; letter-spacing: .11em; }
.featured-ribbon span { font-size: 9px; }
.custom-package-note { margin: 20px 0 0; color: var(--muted); text-align: center; font-size: 10px; }
.custom-package-note span { color: var(--muted-light); }

.about-section { padding-block: clamp(85px, 10vw, 130px); background: #101411; border-block: 1px solid rgba(240,240,232,.06); }
.about-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(55px, 10vw, 145px); align-items: center; }
.about-art { position: relative; max-width: 490px; }
.about-frame { min-height: 365px; padding: 35px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line-strong); background: radial-gradient(ellipse at 80% 15%, rgba(200,255,74,.16), transparent 38%), radial-gradient(ellipse at 12% 82%, rgba(75,111,91,.22), transparent 35%), #141a16; }
.about-frame::before, .about-frame::after { position: absolute; content: ''; pointer-events: none; }
.about-frame::before { inset: 13px; border: 1px solid rgba(240,240,232,.08); }
.about-frame::after { top: 0; right: 23%; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(200,255,74,.3), transparent); }
.about-mark { position: relative; z-index: 1; font: 600 clamp(58px, 8vw, 90px)/1 var(--font-display); letter-spacing: -.1em; }
.about-mark span { color: var(--acid); }
.about-wave { position: relative; z-index: 1; height: 67px; display: flex; align-items: center; gap: 5px; opacity: .82; }
.about-wave i { width: 3px; flex: 1; background: linear-gradient(180deg, transparent, var(--acid), transparent); transform: scaleY(.25); transform-origin: center; animation: waveform 2.8s ease-in-out infinite alternate; }
.about-wave i:nth-child(3n) { animation-delay: -.6s; transform: scaleY(.66); }
.about-wave i:nth-child(4n) { animation-delay: -1s; transform: scaleY(.4); }
.about-wave i:nth-child(5n) { animation-delay: -.3s; transform: scaleY(.82); }
.about-art-caption, .about-art-index { position: relative; z-index: 1; color: var(--muted-light); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.about-art-index { color: var(--muted); font-size: 7px; }
.about-crosshair { position: absolute; z-index: 2; width: 18px; height: 18px; border-color: var(--acid); border-style: solid; }
.about-crosshair-a { top: -6px; left: -6px; border-width: 1px 0 0 1px; }
.about-crosshair-b { right: -6px; bottom: -6px; border-width: 0 1px 1px 0; }
.about-copy h2 { margin-bottom: 27px; font-size: clamp(43px, 5.2vw, 69px); }
.about-copy > p:not(.eyebrow):not(.about-signoff) { max-width: 520px; color: var(--muted-light); font-size: 14px; line-height: 1.9; }
.about-signoff { margin: 29px 0 27px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; }
.signoff-line { width: 27px; height: 1px; background: var(--acid); }
.text-link { display: inline-flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line-strong); padding-bottom: 7px; font-size: 11px; transition: color .2s ease, border-color .2s ease; }
.text-link span { color: var(--acid); font-size: 15px; }
.text-link:hover { color: var(--acid); border-color: var(--acid); }

.cta-section { padding-block: clamp(82px, 10vw, 130px); }
.cta-panel { min-height: 420px; padding: clamp(34px, 7vw, 88px); position: relative; isolation: isolate; overflow: hidden; color: var(--ink); background: var(--acid); }
.cta-panel::before { position: absolute; z-index: -1; content: ''; width: 450px; height: 450px; top: -210px; right: -80px; border: 1px solid rgba(11,13,12,.13); border-radius: 50%; box-shadow: 0 0 0 32px rgba(11,13,12,.025), 0 0 0 75px rgba(11,13,12,.025), 0 0 0 122px rgba(11,13,12,.02); }
.cta-frame-mark { position: absolute; top: 35px; right: 40px; color: rgba(11,13,12,.55); font: 600 20px/1 var(--font-display); }
.cta-frame-mark span { color: var(--ink); }
.cta-eyebrow { color: rgba(11,13,12,.6); }
.cta-eyebrow span { margin-left: 12px; color: rgba(11,13,12,.72); }
.cta-panel h2 { margin: 39px 0 10px; font: 500 clamp(50px, 7vw, 89px)/.94 var(--font-display); letter-spacing: -.085em; }
.cta-panel h2 em { font-weight: 400; }
.cta-panel > p:not(.eyebrow) { margin: 16px 0 24px; color: rgba(11,13,12,.75); font-size: 13px; }
.button-dark { color: var(--paper); background: var(--ink); }
.button-dark:hover { background: #222a23; }
.button-dark span { color: var(--acid); font-size: 15px; }
.cta-index { position: absolute; right: 39px; bottom: 33px; color: rgba(11,13,12,.55); font-size: 8px; font-weight: 700; letter-spacing: .12em; }

.contact-section { padding-block: 36px clamp(86px, 10vw, 135px); }
.contact-heading { margin-bottom: 55px; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.contact-heading h2 { margin: 0; font: 500 clamp(48px, 6vw, 78px)/.96 var(--font-display); letter-spacing: -.08em; }
.contact-intro { max-width: 260px; margin: 0 0 7px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.contact-bottom { padding-top: 25px; display: grid; grid-template-columns: 1.15fr auto 1fr; align-items: center; gap: 30px; border-top: 1px solid var(--line-strong); }
.contact-email { width: fit-content; display: inline-flex; align-items: center; gap: 15px; font: 500 clamp(16px, 2vw, 23px)/1.3 var(--font-display); letter-spacing: -.035em; transition: color .2s ease; }
.contact-email span { color: var(--acid); font-size: 17px; }
.contact-email:hover { color: var(--acid); }
.contact-actions { display: flex; gap: 8px; }
.contact-button { padding: 10px 12px; display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line-strong); font-size: 9px; transition: border-color .2s ease, background .2s ease; }
.contact-button span { color: var(--acid); font-size: 13px; }
.contact-button:hover { border-color: var(--acid); background: rgba(200,255,74,.06); }
.contact-button-placeholder:disabled { align-items: flex-start; flex-direction: column; gap: 1px; color: var(--muted-light); opacity: .8; cursor: not-allowed; }
.contact-button-placeholder small { color: var(--muted); font-size: 7px; }
.social-links { display: flex; justify-content: end; align-items: center; flex-wrap: wrap; gap: 8px; }
.social-label { margin-right: 3px; color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .16em; }
.social-placeholder { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); color: var(--muted-light); font-size: 9px; }
.social-placeholder small { color: var(--muted); font-size: 7px; }

.site-footer { border-top: 1px solid var(--line); }
.footer-inner { min-height: 82px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.footer-brand { display: grid; gap: 0; font: 700 17px/1 var(--font-display); letter-spacing: -.065em; }
.footer-brand small { margin-top: 4px; color: var(--muted); font: 600 7px/1 var(--font-body); letter-spacing: .25em; }
.footer-inner > p { margin: 0; color: var(--muted); font-size: 9px; }
.footer-inner .copyright { color: #727b73; }
.back-top { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-light); font-size: 13px; }
.back-top span { font-size: 7px; font-weight: 700; letter-spacing: .12em; }
.back-top:hover { color: var(--acid); }

.project-dialog { width: min(540px, calc(100% - 32px)); max-width: none; padding: 0; border: 1px solid var(--line-strong); color: var(--paper); background: #121713; box-shadow: 0 30px 120px rgba(0,0,0,.68); }
.project-dialog::backdrop { background: rgba(4,6,5,.78); backdrop-filter: blur(7px); }
.dialog-inner { min-height: 330px; padding: clamp(28px, 6vw, 52px); position: relative; display: flex; flex-direction: column; justify-content: center; }
.dialog-close { position: absolute; top: 15px; right: 16px; width: 38px; height: 38px; border: 1px solid var(--line); background: transparent; color: var(--paper); font-size: 24px; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.dialog-close:hover { color: var(--acid); border-color: var(--acid); }
.dialog-kicker { margin-bottom: 28px; }
.dialog-kicker span { color: var(--acid); }
.dialog-category { margin: 0 0 8px; color: var(--acid); font-size: 10px; letter-spacing: .1em; }
.project-dialog h2 { margin: 0; font: 500 clamp(34px, 8vw, 54px)/1 var(--font-display); letter-spacing: -.065em; }
.dialog-copy { max-width: 380px; margin: 18px 0 25px; color: var(--muted); font-size: 12px; }

.has-js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.has-js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.has-js .services-grid .service-card:nth-child(2), .has-js .portfolio-grid .project-card:nth-child(even) { transition-delay: .08s; }
@keyframes playhead-sweep { from { left: 34%; opacity: .55; } to { left: 75%; opacity: 1; } }
@keyframes track-sweep { from { left: 32%; } to { left: 84%; } }
@keyframes waveform { from { transform: scaleY(.18); } to { transform: scaleY(.91); } }
@keyframes image-settle { from { transform: scale(1.045); opacity: .72; } to { transform: scale(1); opacity: 1; } }

@media (min-width: 1500px) {
  .hero { min-height: 920px; }
}
@media (max-width: 960px) {
  :root { --gutter: clamp(23px, 5vw, 54px); }
  .header-inner { min-height: 76px; }
  .primary-nav { gap: 17px; }
  .primary-nav > a:not(.nav-cta) { font-size: 10px; }
  .hero { min-height: 780px; gap: 35px; }
  .hero h1 { font-size: clamp(64px, 9.4vw, 92px); }
  .hero .eyebrow { font-size: 8px; }
  .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-card:nth-child(3) { border-left: 1px solid var(--line); }
  .service-card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .contact-bottom { grid-template-columns: 1fr auto; }
  .social-links { grid-column: 1 / -1; justify-content: start; }
}
@media (max-width: 680px) {
  :root { --gutter: 22px; }
  html { scroll-padding-top: 68px; }
  .site-header { position: absolute; }
  .header-inner { min-height: 68px; }
  .brand-mark { width: 32px; height: 32px; }
  .menu-toggle { width: 42px; height: 42px; padding: 12px 9px; display: flex; flex-direction: column; justify-content: center; gap: 6px; border: 1px solid var(--line-strong); background: rgba(11,13,12,.55); cursor: pointer; }
  .menu-toggle span { width: 100%; height: 1px; background: var(--paper); transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .primary-nav { position: absolute; top: calc(100% + 1px); right: var(--gutter); left: var(--gutter); padding: 12px; display: none; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--line-strong); background: rgba(13,16,14,.97); backdrop-filter: blur(16px); }
  .primary-nav.is-open { display: flex; }
  .primary-nav > a:not(.nav-cta) { padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 12px; }
  .primary-nav .nav-cta { justify-content: space-between; margin-top: 10px; }
  .hero { min-height: auto; padding-top: 130px; padding-bottom: 86px; grid-template-columns: 1fr; gap: 38px; }
  .hero-copy { padding-bottom: 0; }
  .hero .eyebrow { font-size: 7px; letter-spacing: .14em; }
  .hero-brand { margin-top: 38px; }
  .hero h1 { font-size: clamp(68px, 16.5vw, 104px); }
  .hero-description { max-width: 360px; margin-top: 22px; font-size: 13px; }
  .hero-actions { margin-top: 24px; gap: 9px; }
  .button { min-height: 47px; padding-inline: 15px; gap: 14px; font-size: 10px; }
  .hero-footnote { margin-top: 29px; }
  .hero-visual { width: min(100%, 440px); justify-self: center; }
  .hero-image-wrap { aspect-ratio: 1 / 1.03; }
  .timeline-card { bottom: 14%; }
  .scroll-cue { bottom: 26px; }
  .hero-index { right: 0; bottom: 24px; font-size: 7px; }
  .intro-strip-inner { gap: 22px; font-size: 8px; }
  .services-section { padding-block: 82px 90px; }
  .section-heading { margin-bottom: 32px; align-items: start; flex-direction: column; gap: 14px; }
  .section-heading h2, .about-copy h2 { font-size: clamp(43px, 11vw, 64px); }
  .section-aside { max-width: 340px; font-size: 11px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 210px; padding: 20px 20px 22px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .service-card:first-child { border-top: 0; }
  .service-card h3 { margin-top: 26px; font-size: 18px; }
  .service-card p { max-width: 290px; }
  .service-arrow { opacity: 1; transform: none; }
  .work-section { padding-block: 82px 91px; }
  .portfolio-grid { grid-template-columns: 1fr; row-gap: 31px; }
  .project-card, .project-feature { grid-column: 1; }
  .project-image-wrap, .project-card:not(.project-feature) .project-image-wrap { aspect-ratio: 1.18 / 1; }
  .project-view { opacity: 1; transform: none; }
  .project-meta strong { font-size: 15px; }
  .portfolio-note { margin-top: 35px; font-size: 9px; }
  .pricing-section { padding-block: 82px 90px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { min-height: 367px; padding: 23px 21px; border-right: 1px solid var(--line); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .price-card:first-child { border-bottom: 1px solid var(--line); }
  .price-card:last-child { border-bottom: 0; }
  .price-amount { font-size: 39px; }
  .price-context { min-height: 0; }
  .featured-ribbon { right: 20px; }
  .custom-package-note { font-size: 9px; line-height: 1.8; }
  .custom-package-note span { display: block; }
  .about-section { padding-block: 77px; }
  .about-layout { grid-template-columns: 1fr; gap: 42px; }
  .about-art { width: min(100%, 460px); }
  .about-frame { min-height: 290px; padding: 27px; }
  .about-copy h2 { margin-bottom: 19px; }
  .about-copy > p:not(.eyebrow):not(.about-signoff) { font-size: 13px; }
  .cta-section { padding-block: 70px; }
  .cta-panel { min-height: 394px; padding: 34px 24px; }
  .cta-frame-mark { top: 22px; right: 20px; font-size: 16px; }
  .cta-eyebrow { max-width: 220px; font-size: 7px; }
  .cta-eyebrow span { margin-left: 0; display: block; }
  .cta-panel h2 { margin-top: 54px; font-size: clamp(51px, 12.5vw, 75px); }
  .cta-panel > p:not(.eyebrow) { max-width: 260px; font-size: 11px; }
  .cta-index { right: 19px; bottom: 17px; font-size: 7px; }
  .contact-section { padding-block: 12px 77px; }
  .contact-heading { margin-bottom: 34px; flex-direction: column; align-items: start; gap: 17px; }
  .contact-heading h2 { font-size: clamp(54px, 13vw, 73px); }
  .contact-intro { max-width: 280px; font-size: 11px; }
  .contact-bottom { padding-top: 20px; grid-template-columns: 1fr; gap: 20px; }
  .contact-email { font-size: clamp(16px, 5.1vw, 22px); }
  .contact-actions { flex-wrap: wrap; }
  .contact-button { min-width: 110px; justify-content: space-between; }
  .social-links { grid-column: 1; justify-content: start; }
  .social-label { flex-basis: 100%; margin-bottom: 2px; }
  .footer-inner { min-height: 0; padding-block: 23px; display: grid; grid-template-columns: auto 1fr; gap: 12px; }
  .footer-inner > p { text-align: right; }
  .footer-inner .copyright { grid-column: 1 / -1; text-align: left; }
  .back-top { grid-column: 2; grid-row: 2; justify-self: end; }
  .dialog-inner { min-height: 300px; }
}
@media (max-width: 380px) {
  :root { --gutter: 17px; }
  .hero .eyebrow { white-space: normal; }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { flex: 1; padding-inline: 10px; gap: 8px; }
  .brand-name { font-size: 16px; }
  .contact-email { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .has-js .reveal { opacity: 1; transform: none; }
}


/* Package navigation and detail pages */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: package-view-out .16s ease both; }
::view-transition-new(root) { animation: package-view-in .22s cubic-bezier(.22,.72,.2,1) both; }

.pricing-grid > .price-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .22s ease, box-shadow .22s ease, transform .22s var(--ease);
}
.pricing-grid > .price-card:hover {
  z-index: 2;
  background: linear-gradient(145deg, rgba(200,255,74,.065), rgba(200,255,74,.008) 70%);
  box-shadow: inset 0 0 0 1px rgba(200,255,74,.25);
}
.pricing-grid > .price-card-featured:hover {
  background: linear-gradient(145deg, rgba(200,255,74,.13), rgba(200,255,74,.025) 70%);
}
.pricing-grid > .price-card:focus-visible { z-index: 3; outline-offset: -5px; }
.pricing-grid > .price-card:hover .price-link,
.pricing-grid > .price-card:focus-visible .price-link { color: var(--acid); }
.pricing-grid > .price-card:hover .price-link span,
.pricing-grid > .price-card:focus-visible .price-link span { transform: translate(3px,-3px); }

.package-page {
  padding-top: clamp(132px, 15vw, 178px);
  padding-bottom: clamp(78px, 10vw, 130px);
  animation: package-content-in .32s var(--ease) both;
}
.package-page-topline {
  margin-bottom: clamp(34px, 6vw, 75px);
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}
.package-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted-light);
  font-size: 10px;
  transition: color .18s ease;
}
.package-back-link:hover { color: var(--acid); }
.package-route-index { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.package-hero {
  margin-bottom: clamp(68px, 9vw, 118px);
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(230px,.75fr);
  align-items: end;
  gap: clamp(30px, 7vw, 96px);
}
.package-eyebrow { margin-bottom: 18px; }
.package-eyebrow span { color: var(--acid); }
.package-title {
  margin: 0;
  font: 600 clamp(59px, 10.5vw, 116px)/.88 var(--font-display);
  letter-spacing: -.09em;
}
.package-title span { display: block; color: var(--acid); }
.package-summary { max-width: 570px; margin: 25px 0 0; color: var(--muted-light); font-size: clamp(13px, 1.4vw, 16px); line-height: 1.8; }
.package-price-panel {
  padding: 25px 23px 23px;
  position: relative;
  border: 1px solid var(--line-strong);
  background: linear-gradient(145deg, rgba(200,255,74,.075), rgba(255,255,255,.012) 65%);
}
.package-price-panel::before { position: absolute; top: -1px; left: -1px; width: 38px; height: 1px; content: ''; background: var(--acid); }
.package-price-label { margin: 0 0 13px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.package-price-amount { margin: 0; font: 500 clamp(37px, 5vw, 52px)/1 var(--font-display); letter-spacing: -.07em; white-space: nowrap; }
.package-price-note { margin: 11px 0 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.package-content-grid {
  margin-bottom: clamp(76px, 10vw, 130px);
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(255px,.8fr);
  gap: clamp(30px, 7vw, 92px);
  align-items: start;
}
.package-section-kicker { margin-bottom: 12px; }
.package-section-kicker span { color: var(--acid); }
.package-section-title { margin: 0 0 29px; font: 500 clamp(35px, 5vw, 58px)/1 var(--font-display); letter-spacing: -.07em; }
.package-section-title span { color: var(--acid); }
.package-feature-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: 24px;
  list-style: none;
  border-top: 1px solid var(--line);
}
.package-feature-list li {
  min-height: 55px;
  padding: 15px 4px 14px 21px;
  position: relative;
  border-bottom: 1px solid var(--line);
  color: var(--muted-light);
  font-size: 11px;
  line-height: 1.6;
}
.package-feature-list li::before { position: absolute; top: 15px; left: 2px; color: var(--acid); content: '↗'; font-size: 11px; }
.package-facts {
  padding: clamp(21px, 3vw, 30px);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.018);
}
.package-facts-title { margin: 0 0 8px; font: 500 18px/1.3 var(--font-display); letter-spacing: -.03em; }
.package-fact { padding: 17px 0; border-top: 1px solid var(--line); }
.package-fact:first-of-type { margin-top: 18px; }
.package-fact dt { margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.package-fact dd { margin: 0; color: var(--paper); font-size: 11px; line-height: 1.7; }
.package-faq-section { max-width: 900px; margin: 0 auto clamp(76px, 10vw, 125px); }
.package-faq-heading { margin-bottom: 26px; }
.package-faq-list { border-top: 1px solid var(--line-strong); }
.package-faq-list details { border-bottom: 1px solid var(--line); }
.package-faq-list summary {
  padding: 18px 34px 18px 0;
  position: relative;
  color: var(--paper);
  font: 500 14px/1.5 var(--font-display);
  cursor: pointer;
  list-style: none;
}
.package-faq-list summary::-webkit-details-marker { display: none; }
.package-faq-list summary::after { position: absolute; top: 17px; right: 2px; color: var(--acid); content: '+'; font: 400 20px/1 var(--font-body); }
.package-faq-list details[open] summary::after { content: '−'; }
.package-faq-list details p { max-width: 700px; margin: -2px 0 19px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.package-order-panel {
  padding: clamp(30px, 6vw, 62px);
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: var(--acid);
}
.package-order-panel::after { position: absolute; top: -130px; right: -65px; width: 280px; height: 280px; border: 1px solid rgba(11,13,12,.17); border-radius: 50%; content: ''; box-shadow: 0 0 0 28px rgba(11,13,12,.025), 0 0 0 65px rgba(11,13,12,.02); pointer-events: none; }
.package-order-panel .eyebrow { position: relative; z-index: 1; color: rgba(11,13,12,.62); }
.package-order-panel h2 { max-width: 700px; margin: 27px 0 11px; position: relative; z-index: 1; font: 500 clamp(39px, 7vw, 76px)/.98 var(--font-display); letter-spacing: -.075em; }
.package-order-panel > p:not(.eyebrow) { max-width: 550px; margin: 0 0 25px; position: relative; z-index: 1; color: rgba(11,13,12,.74); font-size: 12px; line-height: 1.8; }
.package-order-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.package-order-actions .button-quiet { border-color: rgba(11,13,12,.35); color: var(--ink); }
.package-order-actions .button-quiet span { color: var(--ink); }
.package-order-actions .button-quiet:hover { border-color: var(--ink); background: rgba(11,13,12,.06); }

@keyframes package-content-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes package-view-out { to { opacity: 0; transform: translateY(-3px); } }
@keyframes package-view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .package-hero, .package-content-grid { grid-template-columns: 1fr; }
  .package-price-panel { max-width: 360px; }
  .package-facts { max-width: 580px; }
}
@media (max-width: 680px) {
  .package-page { padding-top: 105px; padding-bottom: 78px; }
  .package-page-topline { margin-bottom: 39px; align-items: flex-start; }
  .package-back-link { font-size: 9px; }
  .package-route-index { font-size: 7px; text-align: right; }
  .package-hero { margin-bottom: 66px; gap: 27px; }
  .package-title { font-size: clamp(57px, 15vw, 88px); }
  .package-summary { margin-top: 19px; font-size: 13px; }
  .package-price-panel { width: 100%; max-width: none; padding: 21px; }
  .package-price-amount { font-size: 43px; }
  .package-content-grid { margin-bottom: 70px; gap: 32px; }
  .package-section-title { margin-bottom: 20px; font-size: 40px; }
  .package-feature-list { grid-template-columns: 1fr; }
  .package-feature-list li { min-height: 49px; padding-block: 13px; }
  .package-feature-list li::before { top: 13px; }
  .package-faq-section { margin-bottom: 70px; }
  .package-faq-list summary { font-size: 13px; }
  .package-order-panel { padding: 30px 22px; }
  .package-order-panel h2 { margin-top: 22px; font-size: clamp(40px, 11vw, 58px); }
  .package-order-actions { align-items: stretch; flex-direction: column; }
  .package-order-actions .button { justify-content: space-between; }
}