/*
Theme Name: WebDelux Studio
Theme URI: https://webdelux.dk
Author: WebDelux
Author URI: https://webdelux.dk
Description: Et eksklusivt one-page WordPress-tema til WebDelux med services, one-person studio, kundeudtalelser, kontaktsektion, mobilmenu og dark/light mode.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: webdelux
Tags: one-page, portfolio, business, custom-logo, custom-menu, responsive-layout
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

@font-face { font-family: "Geist"; src: url("assets/fonts/geist-latin.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono-latin.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }

:root {
  --font-geist-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-geist-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --paper: #f0eee8;
  --paper-2: #dedbd2;
  --ink: #101010;
  --muted: #77736c;
  --line: rgba(16, 16, 16, 0.2);
  --accent: #d8ff43;
  --nav: rgba(240, 238, 232, 0.76);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #080808;
  --paper-2: #151515;
  --ink: #f4f2ed;
  --muted: #888783;
  --line: rgba(244, 242, 237, 0.18);
  --accent: #caff38;
  --nav: rgba(8, 8, 8, 0.72);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-geist-sans), Arial, sans-serif; overflow-x: hidden; transition: background-color .5s var(--ease), color .5s var(--ease); }
body.admin-bar .nav-wrap { top: 32px; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { color: #080808; background: var(--accent); }
main { position: relative; overflow: clip; }

.grain { position: fixed; inset: -50%; z-index: 1000; pointer-events: none; opacity: .04; background-image: repeating-radial-gradient(circle at 17% 23%, currentColor 0, currentColor .5px, transparent .8px, transparent 4px); background-size: 7px 9px; animation: grain .25s steps(2) infinite; }
@keyframes grain { 0% { transform: translate(0) } 25% { transform: translate(2%, -3%) } 50% { transform: translate(-3%, 2%) } 75% { transform: translate(3%, 3%) } }

.loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; color: #f5f3ed; background: #050505; animation: loaderOut .8s var(--ease) .92s forwards; }
.loader-brand { position: absolute; top: 44%; font-size: 12px; font-weight: 650; letter-spacing: .32em; }
.loader-count { height: 1.2em; margin-top: 55px; overflow: hidden; font: 400 14px/1.2 var(--font-geist-mono), monospace; color: #858585; }
.loader-count span { display: block; animation: count 1s steps(4) forwards; }
@keyframes count { to { transform: translateY(-4.8em); } }
@keyframes loaderOut { 0% { clip-path: inset(0); } 100% { clip-path: inset(0 0 100% 0); visibility: hidden; } }

.cursor { position: fixed; top: 0; left: 0; z-index: 1500; width: 10px; height: 10px; margin: -5px; pointer-events: none; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .25s, border-color .25s; mix-blend-mode: difference; }
.cursor span { opacity: 0; color: #080808; font-size: 10px; font-weight: 700; white-space: nowrap; letter-spacing: .08em; transition: opacity .2s; }
.cursor.is-active { width: 88px; height: 88px; margin: -44px; border-color: var(--accent); background: var(--accent); mix-blend-mode: normal; }
.cursor.is-active span { opacity: 1; }

.section-pad { padding: 112px 4vw; }
.section-label { font: 550 11px/1.1 var(--font-geist-mono), monospace; letter-spacing: .08em; text-transform: uppercase; }
.section-head { display: grid; grid-template-columns: 1fr 2.1fr; align-items: start; }
.section-head h2, .work-intro h2, .about h2, .why h2 { margin: 0; font-size: clamp(4rem, 9.5vw, 10rem); line-height: .82; letter-spacing: -.075em; font-weight: 570; }

.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 900; padding: 24px 3vw; transition: padding .5s var(--ease); }
.nav { position: relative; height: 56px; padding: 0 10px 0 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid transparent; border-radius: 14px; transition: max-width .5s var(--ease), border-color .5s, background .5s, box-shadow .5s; margin: auto; }
.is-scrolled { padding-top: 12px; }
.is-scrolled .nav { max-width: 1060px; border-color: var(--line); background: var(--nav); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.brand { font-size: 15px; letter-spacing: -.02em; font-weight: 700; }
.brand sup, .footer-brand sup { font-size: .45em; vertical-align: top; margin-left: 2px; }
.nav-links { display: flex; gap: clamp(18px, 2.4vw, 38px); margin-left: auto; margin-right: clamp(16px, 3vw, 48px); }
.nav-links a { position: relative; font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: currentColor; transition: right .4s var(--ease); }
.nav-links a:hover::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.theme-toggle { width: 36px; height: 36px; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.theme-toggle span { display: block; font-size: 17px; transition: transform .5s var(--ease); }
.theme-toggle:hover span { transform: rotate(90deg); }
.nav-cta { display: flex; align-items: center; gap: 20px; padding: 12px 14px; color: var(--paper); background: var(--ink); border-radius: 8px; font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.arrow { display: inline-block; transition: transform .35s var(--ease); }
a:hover .arrow { transform: translate(3px, -3px); }
.magnetic { transform: translate(var(--mx, 0), var(--my, 0)); transition: transform .45s var(--ease), color .3s, background .3s; }
.menu-toggle { display: none; width: 40px; height: 40px; border: 0; background: none; }
.menu-toggle span { display: block; width: 18px; height: 1px; background: currentColor; margin: 5px auto; }

.hero { position: relative; height: 100svh; min-height: 630px; padding: 0 4vw 4vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero-eyebrow { position: absolute; top: 18vh; left: 4vw; font-size: 10px; letter-spacing: .13em; }
.hero-title { position: relative; z-index: 2; margin: 0 0 4.5vh; font-size: clamp(4rem, 8.4vw, 9.5rem); line-height: .82; letter-spacing: -.082em; font-weight: 570; }
.mask-line { display: block; overflow: hidden; padding-bottom: .06em; }
.mask-line > span { display: block; animation: heroLineIn 1.1s var(--ease) .9s both; }
.mask-line:nth-child(2) > span { animation-delay: 1s; }
@keyframes heroLineIn { from { transform: translateY(115%); } to { transform: translateY(0); } }
.hero-bottom { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr; gap: 8vw; padding-right: 5vw; }
.hero-bottom > p { max-width: 590px; margin: 0; font-size: clamp(17px, 1.55vw, 24px); line-height: 1.3; letter-spacing: -.025em; }
.hero-meta { display: flex; flex-direction: column; justify-content: space-between; gap: 25px; font: 520 10px/1.5 var(--font-geist-mono), monospace; }
.hero-links { display: flex; gap: 32px; font-family: var(--font-geist-sans); font-weight: 700; }
.text-link { display: inline-flex; gap: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--ink); }
.scroll-mark { position: absolute; right: 3vw; bottom: 4vh; z-index: 3; writing-mode: vertical-rl; font: 500 9px/1 var(--font-geist-mono), monospace; letter-spacing: .08em; cursor: pointer; }
.scroll-mark span { margin-top: 10px; animation: bob 1.7s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
.orb { position: absolute; top: 10vh; right: -8vw; width: min(54vw, 820px); aspect-ratio: 1; border-radius: 45% 55% 58% 42% / 42% 45% 55% 58%; background: radial-gradient(circle at 33% 30%, rgba(216,255,67,.85), rgba(128,34,255,.32) 30%, rgba(20,20,20,.03) 69%); filter: blur(1px); opacity: .55; animation: orbit 13s ease-in-out infinite alternate; }
.orb::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.18); border-radius: inherit; filter: blur(8px); box-shadow: 0 0 90px rgba(167, 83, 255, .25); }
.orb i { position: absolute; inset: 20%; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transform: rotate(45deg); }
.orb i:nth-child(2) { inset: 33%; transform: rotate(-18deg); }.orb i:nth-child(3) { inset: 45%; }
@keyframes orbit { to { border-radius: 58% 42% 44% 56% / 53% 38% 62% 47%; transform: rotate(7deg) scale(1.06); } }
.hero-coordinate { position: absolute; z-index: 3; color: var(--muted); font: 500 9px var(--font-geist-mono), monospace; }
.coordinate-a { right: 5vw; top: 22vh; }.coordinate-b { right: 27vw; top: 12vh; }

.statement { min-height: 145vh; display: grid; grid-template-columns: 1fr 4fr; align-content: center; row-gap: 80px; }
.statement-title { grid-column: 2; margin: 0; max-width: 1500px; font-size: clamp(3.5rem, 8.6vw, 9.5rem); line-height: .91; letter-spacing: -.07em; font-weight: 520; }
.statement-word { color: var(--line); transition: color .2s; }
.statement-signoff { grid-column: 2; justify-self: end; margin: 20px 8vw 0 0; font-family: Georgia, serif; font-size: clamp(20px, 2.2vw, 36px); font-style: italic; }

.numbers { padding-top: 80px; padding-bottom: 180px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5vw; }
.number-item { padding-top: 25px; border-top: 1px solid var(--line); }
.number-item strong { display: block; font-size: clamp(5.4rem, 12vw, 14rem); line-height: .83; letter-spacing: -.09em; font-weight: 520; }
.number-item span { display: block; margin-top: 28px; font: 560 11px/1.35 var(--font-geist-mono), monospace; color: var(--muted); }

.services { background: var(--paper-2); transition: background .5s; }
.services .section-head { margin-bottom: 52px; }
.studio-proof { margin: 0 0 52px 33%; padding: 18px 0; display: grid; grid-template-columns: .6fr .8fr 1.7fr; gap: 4vw; align-items: end; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.studio-proof span { display: flex; flex-direction: column; }
.studio-proof strong { font-size: clamp(3rem, 5.8vw, 6.2rem); line-height: .9; letter-spacing: -.07em; font-weight: 540; }
.studio-proof small { margin-top: 12px; color: var(--muted); font: 550 9px var(--font-geist-mono), monospace; }
.studio-proof p { margin: 0; font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.25; letter-spacing: -.025em; }
.studio-proof em { font-family: Georgia, serif; font-weight: 400; }
.service-list { border-top: 1px solid var(--line); }
.service-row { position: relative; display: grid; grid-template-columns: .3fr 1.5fr 1fr 42px; align-items: center; min-height: 132px; border-bottom: 1px solid var(--line); }
.service-number, .service-tags { font: 520 10px/1.4 var(--font-geist-mono), monospace; color: var(--muted); }
.service-main h3 { margin: 0; font-size: clamp(2.5rem, 5.2vw, 6rem); line-height: 1; letter-spacing: -.055em; font-weight: 520; transition: transform .5s var(--ease); }
.service-main p { max-width: 470px; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s, opacity .4s; }
.service-row:hover .service-main h3 { transform: translateX(14px); }
.service-row:hover .service-main p { max-height: 80px; opacity: 1; }
.service-arrow { justify-self: end; font-size: 28px; transition: transform .4s var(--ease); }
.service-row:hover .service-arrow { transform: rotate(45deg); }
.service-row-rich .service-main p { max-height: 70px; margin-top: 10px; opacity: 1; }
.service-detail > span { font: 520 9px/1.4 var(--font-geist-mono), monospace; color: var(--muted); }
.service-detail ul { display: flex; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.service-detail li { padding: 6px 8px; border: 1px solid var(--line); border-radius: 100px; font: 500 8px/1 var(--font-geist-mono), monospace; color: var(--muted); }
.service-preview { position: absolute; z-index: 5; right: 18%; width: 230px; height: 145px; opacity: 0; pointer-events: none; transform: translate(30px, 20px) rotate(5deg) scale(.9); background: #161616; color: #fff; border-radius: 6px; overflow: hidden; transition: opacity .35s, transform .55s var(--ease); box-shadow: 0 25px 60px rgba(0,0,0,.2); }
.service-row:hover .service-preview { opacity: 1; transform: translate(0, 0) rotate(-3deg) scale(1); }
.service-preview i { position: absolute; inset: 12px 12px auto; height: 6px; border-top: 1px solid #666; border-bottom: 1px solid #333; }
.service-preview b { position: absolute; bottom: 16px; left: 16px; font-size: 48px; font-weight: 500; letter-spacing: -.08em; }
.service-preview span { position: absolute; width: 90px; height: 90px; border-radius: 50%; right: -10px; bottom: -12px; background: var(--accent); filter: blur(3px); }
.preview-2 { background: #ddd2bd; color: #1d1a17; }.preview-2 span { border-radius: 0; background: #7047ff; }.preview-3 { background: linear-gradient(140deg,#102126,#899c87); }.preview-3 span { background: #f4a86f; }.preview-4 { background: linear-gradient(135deg,#1e1032,#d63970); }

.work { background: #080808; color: #f4f2ed; }
.work-intro { min-height: 46vh; position: relative; display: grid; grid-template-columns: 1fr 2.1fr; align-content: center; }
.work-intro h2 { grid-column: 2; }
.work-intro p { grid-column: 2; max-width: 480px; margin: 50px 0 0 auto; color: #8c8c89; line-height: 1.5; }
.work-pin { height: auto; overflow: visible; padding: 0 4vw 72px; }
.project-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; height: auto; }
.project-panel { width: auto; height: auto; min-width: 0; padding: 0; }
.project-visual { height: min(46vh, 520px); overflow: hidden; background: #dfd8ca; color: #151515; border-radius: 3px; }
.browser-chrome { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 13px; border-bottom: 1px solid rgba(0,0,0,.13); }
.browser-chrome > span { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.25); }
.browser-chrome em { margin: auto; font: 500 8px var(--font-geist-mono), monospace; opacity: .45; }
.case-canvas { position: relative; height: calc(100% - 38px); padding: 4%; overflow: hidden; }
.case-kicker { font: 550 9px var(--font-geist-mono), monospace; letter-spacing: .08em; }
.case-word { position: absolute; left: 3%; bottom: -2%; font-size: 9vw; line-height: .8; letter-spacing: -.11em; font-weight: 620; }
.case-detail { position: absolute; top: 10%; right: 5%; display: flex; gap: 15px; align-items: center; font: 550 9px/1.4 var(--font-geist-mono), monospace; }
.case-detail i { width: 48px; height: 48px; border-radius: 50%; background: #ff5a34; }
.project-academy { background: #152bff; color: white; }.project-academy .case-detail i { background: #d8ff43; }.project-academy .case-word { font-style: italic; }
.project-clinic { background: #d8d2c6; }.project-clinic .case-detail i { border-radius: 0; background: #802d3c; }.project-clinic .case-word { font-family: Georgia, serif; font-weight: 400; }
.project-villa { background: #334137; color: #f0e4c5; }.project-villa .case-detail i { background: #d9a95a; filter: blur(2px); }.project-villa .case-word { font-family: Georgia, serif; }
.project-info { min-height: 104px; display: flex; justify-content: space-between; align-items: center; }
.project-info > div { display: flex; align-items: baseline; gap: 22px; }.project-info span { font: 500 10px var(--font-geist-mono), monospace; color: #777; }
.project-info h3 { margin: 0; font-size: clamp(1.45rem, 2.2vw, 2.8rem); letter-spacing: -.055em; font-weight: 520; }.project-info p { font: 500 9px/1.5 var(--font-geist-mono), monospace; color: #9a9a96; text-align: right; }
.project-info small { display: block; width: 100%; margin: 7px 0 0 32px; color: #777; font: 500 8px var(--font-geist-mono), monospace; }
.project-info > div { flex-wrap: wrap; }

.browser-stage { height: 100vh; position: relative; display: grid; place-items: center; background: var(--paper); }
.browser-copy { position: absolute; z-index: 0; inset: 9vh 4vw auto; display: grid; grid-template-columns: 1fr 2fr; }
.browser-copy h2 { margin: 0; font-size: clamp(3.8rem,8.5vw,9rem); line-height: .85; letter-spacing: -.075em; font-weight: 560; }.browser-copy p { grid-column: 2; justify-self: end; font-size: 16px; color: var(--muted); }
.browser-shell { position: absolute; z-index: 2; bottom: 0; height: 72vh; overflow: hidden; color: #eee; background: #0c0c0c; box-shadow: 0 -20px 80px rgba(0,0,0,.16); }
.browser-top { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 15px; background: #1b1b1b; }.browser-top i { width: 7px; height: 7px; border-radius: 50%; background: #5b5b5b; }.browser-top span { margin: auto; color: #7a7a7a; font: 500 9px var(--font-geist-mono), monospace; }
.browser-content { height: calc(100% - 42px); padding: 3vw; background: radial-gradient(circle at 80% 15%,#382c63 0,#101010 35%); }
.mini-nav { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; }.mini-nav span { color: #aaa; font-size: 8px; }
.mini-grid { height: 100%; display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; }.mini-grid b { font-size: clamp(3rem,7vw,8rem); line-height: .8; letter-spacing: -.08em; }.mini-grid i { width: 27vw; height: 27vw; max-width: 370px; max-height: 370px; border-radius: 43% 57% 60% 40%; background: radial-gradient(circle at 30% 30%,#d8ff43,#712ccc 48%,transparent 72%); animation: orbit 8s infinite alternate; }

.drone-stage { min-height: 92vh; padding: 5vw 4vw; position: relative; display: grid; place-items: center; background: #080808; color: #f4f2ed; overflow: hidden; }
.drone-frame { position: relative; width: 100%; height: 78vh; overflow: hidden; border-radius: 24px; background: #202b2a; }
.drone-frame video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.12); }
.drone-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(0,0,0,.28),rgba(0,0,0,.02) 40%,rgba(0,0,0,.65)); }
.drone-label { position: absolute; left: 4vw; top: 4vh; }
.drone-title { position: absolute; inset: 45% 4vw auto; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: end; }.drone-title > span { font: 550 10px var(--font-geist-mono), monospace; }.drone-title h2 { margin: 0; text-align: right; font-size: clamp(4rem,9vw,10rem); line-height: .78; letter-spacing: -.08em; font-weight: 560; }
.drone-bottom { position: absolute; left: 4vw; right: 4vw; bottom: 4vh; display: flex; justify-content: space-between; align-items: end; }.drone-bottom p { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.4; }.light-link { border-bottom: 1px solid #fff; padding-bottom: 8px; font-size: 11px; font-weight: 650; }
.drone-compact { padding: 0 4vw 80px; }
.standalone-drone { padding-top: 80px; color: #f4f2ed; background: #080808; }
.drone-compact .drone-frame { height: 56vh; min-height: 500px; }
.drone-compact .drone-title h2 { font-size: clamp(3.6rem, 7vw, 7.8rem); }
.drone-compact .drone-bottom p { max-width: 600px; }

.studio-section { background: var(--paper-2); }
.studio-heading { display: grid; grid-template-columns: 1fr 2.1fr; align-items: start; }
.studio-heading h2 { margin: 0; font-size: clamp(3.8rem, 8vw, 8.5rem); line-height: .82; letter-spacing: -.075em; font-weight: 570; }
.studio-detail-grid { margin: 70px 0 56px 33%; display: grid; grid-template-columns: 1fr 1.35fr; gap: 8vw; }
.studio-intro { margin: 0; font-size: clamp(1.2rem, 1.8vw, 1.8rem); line-height: 1.35; letter-spacing: -.03em; }
.studio-points { border-top: 1px solid var(--line); }
.studio-points article { padding: 14px 0; display: grid; grid-template-columns: 42px 1fr; border-bottom: 1px solid var(--line); }
.studio-points article > span { color: var(--muted); font: 500 9px var(--font-geist-mono), monospace; }
.studio-points b { font-size: 12px; font-weight: 650; }
.studio-points p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.quote-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; }
.quote-rail blockquote { min-height: 190px; margin: 0; padding-top: 20px; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.quote-rail blockquote p { margin: 0; font-size: clamp(1.35rem, 2.1vw, 2.4rem); line-height: 1.08; letter-spacing: -.04em; }
.quote-rail footer { margin-top: auto; color: var(--muted); font: 500 8px var(--font-geist-mono), monospace; }

.why { display: grid; grid-template-columns: 1fr 1.2fr; gap: 9vw; align-items: start; }
.why-title { position: sticky; top: 18vh; }.why-title h2 { margin-top: 35px; }
.reason { padding: 35px 0 80px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 65px 1fr; }.reason > span { font: 500 10px var(--font-geist-mono), monospace; color: var(--muted); }.reason h3 { margin: 0; max-width: 650px; font-size: clamp(2rem,4.2vw,4.8rem); line-height: .98; letter-spacing: -.055em; font-weight: 520; }.reason p { grid-column: 2; max-width: 500px; margin: 35px 0 0; color: var(--muted); line-height: 1.6; }

.marquee { padding: 35px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.marquee-track { width: max-content; font-size: clamp(3.5rem,8vw,9rem); line-height: 1; letter-spacing: -.06em; font-weight: 540; white-space: nowrap; }

.testimonials { background: var(--paper-2); }.testimonials .section-head { margin-bottom: 70px; }.testimonial-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; }.testimonial-track blockquote { min-width: 0; min-height: 300px; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; }.testimonial-track blockquote > span { font: 500 10px var(--font-geist-mono), monospace; color: var(--muted); }.testimonial-track blockquote p { margin: 45px 0; font-size: clamp(1.8rem,2.8vw,3.2rem); line-height: 1.06; letter-spacing: -.045em; }.testimonial-track footer { margin-top: auto; font: 500 9px var(--font-geist-mono), monospace; }

.about { min-height: 92vh; position: relative; display: grid; grid-template-columns: 1fr 2fr; align-content: center; overflow: hidden; }.about .section-label { position: relative; z-index: 1; }.about h2 { position: relative; z-index: 1; grid-column: 2; }.about > p { position: relative; z-index: 1; grid-column: 2; width: 55%; margin: 48px 0 0 auto; font-size: 17px; line-height: 1.55; }.about-ghost { position: absolute; top: 12%; right: -2%; color: transparent; -webkit-text-stroke: 1px var(--line); font-size: 13vw; line-height: .78; letter-spacing: -.08em; text-align: right; font-weight: 600; opacity: .45; }
.principles { position: relative; z-index: 1; grid-column: 2; margin-top: 58px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.principles span { padding: 18px 14px 0 0; color: var(--muted); font: 500 9px var(--font-geist-mono), monospace; }
.principles b { display: block; margin-top: 26px; color: var(--ink); font: 550 12px var(--font-geist-sans), sans-serif; }

.process { padding-bottom: 190px; }.process .section-head { margin-bottom: 110px; }.process-list { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }.process-list article { min-height: 360px; padding: 22px 24px 0 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }.process-list article:not(:first-child) { padding-left: 24px; }.process-list article:last-child { border:0; }.process-list span { font: 500 10px var(--font-geist-mono), monospace; color: var(--muted); }.process-list h3 { margin: 70px 0 0; font-size: clamp(1.8rem,3vw,3.8rem); letter-spacing: -.05em; font-weight: 530; }.process-list p { max-width: 260px; margin-top: auto; color: var(--muted); font-size: 14px; line-height: 1.55; }

.contact { min-height: 78vh; color: #080808; background: var(--accent); display: flex; flex-direction: column; justify-content: space-between; }.contact-top { display: flex; justify-content: space-between; }.availability { font: 550 10px var(--font-geist-mono), monospace; }.availability i { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#080808; animation: blink 1.4s infinite; }@keyframes blink { 50% { opacity:.25; } }
.contact h2 { margin: 5vh 0; font-size: clamp(4rem,9vw,10rem); line-height: .76; letter-spacing: -.085em; font-weight: 590; }.contact-bottom { display: grid; grid-template-columns: 1fr 1.8fr; align-items: end; gap: 8vw; }.contact-bottom > p { max-width: 450px; margin: 0; font-size: 17px; line-height: 1.5; }.whatsapp-cta { min-height: 105px; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; border-top: 2px solid #080808; border-bottom: 2px solid #080808; font-size: clamp(2rem,3.6vw,4.4rem); font-weight: 550; letter-spacing: -.05em; }.whatsapp-cta:hover { color: var(--accent); background:#080808; }.contact-details { display:flex; gap:28px; margin-top:36px; font: 600 11px var(--font-geist-mono),monospace; }

.footer { padding-top: 62px; padding-bottom: 30px; background:#080808; color:#f4f2ed; }.footer-brand { font-size: clamp(4rem,10vw,11rem); line-height:.8; letter-spacing:-.09em; font-weight:600; }.footer-grid { margin: 50px 0; display:grid; grid-template-columns:1fr 1fr; }.footer-grid > div { display:flex; flex-direction:column; gap:9px; font-size:13px; }.footer-grid > div:nth-child(2) { justify-self:end; text-align:right; }.footer-grid span { color:#777; }.footer-bottom { padding-top:18px; border-top:1px solid #333; display:flex; justify-content:space-between; font:500 9px var(--font-geist-mono),monospace; color:#888; }
.mobile-menu { display:none; }

[data-reveal] { opacity: 0; transform: translateY(64px); clip-path: inset(0 0 100% 0); transition: opacity .35s, transform 1.15s var(--ease), clip-path 1.15s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); clip-path: inset(0); }
.brand-logo { display: block; width: auto; max-width: 150px; max-height: 32px; }

.site-content-default { min-height: 70vh; padding: 150px 4vw 90px; }
.site-content-default h1 { margin: 0 0 32px; font-size: clamp(3rem, 8vw, 8rem); line-height: .9; letter-spacing: -.07em; }
.site-content-default .entry-content { max-width: 820px; font-size: 18px; line-height: 1.7; }
.screen-reader-text { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@media (max-width: 900px) {
  body.admin-bar .nav-wrap { top: 46px; }
  .cursor { display:none; }.section-pad { padding: 100px 20px; }.nav-wrap { padding: 12px; }.nav { height:52px; padding-left:13px; border-color:var(--line); background:var(--nav); backdrop-filter:blur(20px); }.brand,.nav-actions { position:relative; z-index:902; }.desktop-nav { display:none; }.nav-cta { display:none; }.menu-toggle { position:relative; z-index:903; display:block; }.menu-toggle span { position:absolute; left:11px; top:15px; margin:0; transition:transform .35s var(--ease),top .35s var(--ease),background .35s; }.menu-toggle span:last-child { top:23px; }.menu-toggle.is-open span:first-child { top:19px; transform:rotate(45deg); }.menu-toggle.is-open span:last-child { top:19px; transform:rotate(-45deg); }.menu-open .nav { color:#f4f2ed; border-color:rgba(244,242,237,.14); background:rgba(8,8,8,.34); backdrop-filter:blur(18px); }.menu-open .menu-toggle span { background:var(--accent); }.theme-toggle { width:32px; }
  .mobile-menu { position:fixed; inset:0; z-index:850; display:block; overflow-y:auto; overscroll-behavior:contain; color:#f4f2ed; background:#080808; clip-path:inset(0 0 100% 0); opacity:.7; visibility:hidden; pointer-events:none; transition:clip-path .72s var(--ease),opacity .45s,visibility 0s .72s; }
  .mobile-menu.is-open { clip-path:inset(0); opacity:1; visibility:visible; pointer-events:auto; transition:clip-path .72s var(--ease),opacity .45s,visibility 0s; }
  .mobile-menu-glow { position:absolute; top:-16vw; right:-32vw; width:95vw; aspect-ratio:1; border-radius:46% 54% 59% 41%; background:radial-gradient(circle at 34% 34%,rgba(202,255,56,.78),rgba(120,49,255,.33) 34%,transparent 70%); filter:blur(4px); opacity:.72; transform:scale(.7) rotate(-18deg); transition:transform 1.1s var(--ease); }
  .mobile-menu.is-open .mobile-menu-glow { transform:scale(1) rotate(5deg); }
  .mobile-menu-inner { position:relative; z-index:1; min-height:100svh; padding:108px 20px 24px; display:flex; flex-direction:column; }
  .mobile-menu-kicker { display:flex; justify-content:space-between; gap:20px; color:#8b8b87; font:500 8px/1.3 var(--font-geist-mono),monospace; letter-spacing:.06em; }
  .mobile-menu-kicker span:last-child { text-align:right; }
  .mobile-menu-links { margin:6vh 0 4vh; border-top:1px solid rgba(244,242,237,.2); }
  .mobile-menu-links a { display:grid; grid-template-columns:28px 1fr 24px; gap:8px; align-items:center; padding:14px 0 13px; border-bottom:1px solid rgba(244,242,237,.2); transform:translateY(34px); opacity:0; transition:transform .65s var(--ease),opacity .35s; }
  .mobile-menu.is-open .mobile-menu-links a { transform:translateY(0); opacity:1; }
  .mobile-menu.is-open .mobile-menu-links a:nth-child(2){transition-delay:.06s}.mobile-menu.is-open .mobile-menu-links a:nth-child(3){transition-delay:.12s}.mobile-menu.is-open .mobile-menu-links a:nth-child(4){transition-delay:.18s}
  .mobile-menu-links > a > span { align-self:start; padding-top:5px; color:#777; font:500 8px var(--font-geist-mono),monospace; }
  .mobile-menu-links strong { display:block; font-size:clamp(2.45rem,11.5vw,4.2rem); line-height:.84; letter-spacing:-.07em; font-weight:560; }
  .mobile-menu-links small { display:block; margin-top:7px; color:#92928e; font:500 9px var(--font-geist-mono),monospace; }
  .mobile-menu-links b { justify-self:end; color:var(--accent); font-size:20px; font-weight:400; transition:transform .35s var(--ease); }
  .mobile-menu-footer { margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .mobile-menu-footer small { display:block; margin-bottom:10px; color:#777; font:500 8px var(--font-geist-mono),monospace; }
  .mobile-menu-contact { display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:10px; }
  .mobile-menu-contact small { margin-bottom:6px; }
  .mobile-menu-proof p { margin:0 0 9px; font:600 9px var(--font-geist-mono),monospace; }
  .mobile-menu-proof > span { color:#93938f; font:500 7px var(--font-geist-mono),monospace; }
  .mobile-menu-proof i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); }
  .mobile-whatsapp { grid-column:1/-1; min-height:58px; padding:0 16px; display:flex; justify-content:space-between; align-items:center; color:#080808; background:var(--accent); border-radius:8px; font-size:13px; font-weight:700; }
  .hero { height:78svh; min-height:640px; padding:0 20px 28px; }.hero-eyebrow { top:112px; left:20px; }.hero-title { margin-bottom:44px; font-size:clamp(2.1rem,9.1vw,3.4rem); line-height:.9; }.mask-line > span { white-space:nowrap; }.hero-bottom { display:block; padding:0; }.hero-bottom > p { font-size:15px; width:92%; }.hero-meta { margin-top:28px; }.hero-links { gap:15px; flex-direction:column; align-items:flex-start; }.scroll-mark { display:none; }.orb { width:110vw; right:-55vw; top:12vh; opacity:.45; }.coordinate-a,.coordinate-b { display:none; }
  .section-head,.work-intro,.about { grid-template-columns:1fr; }.section-head h2,.work-intro h2,.about h2 { grid-column:auto; margin-top:45px; font-size:clamp(3.6rem,18vw,7rem); }.statement { min-height:110vh; grid-template-columns:1fr; row-gap:40px; }.statement-title,.statement-signoff { grid-column:1; }.statement-title { font-size:clamp(3rem,14.7vw,6rem); }.statement-signoff { margin-right:0; }.numbers { grid-template-columns:1fr; gap:65px; }.number-item strong { font-size:33vw; }
  .services .section-head,.testimonials .section-head,.process .section-head { margin-bottom:56px; }.service-row { grid-template-columns:34px 1fr 24px; min-height:0; padding:24px 0; }.service-main h3 { font-size:clamp(2.2rem,10vw,4rem); }.service-main p { max-height:none; opacity:1; font-size:12px; }.service-tags,.service-preview { display:none; }.service-detail { grid-column:2; margin-top:18px; }.service-detail ul { margin-top:10px; }.service-arrow { grid-column:3; grid-row:1; }
  .studio-proof { margin:0 0 60px; grid-template-columns:1fr 1fr; gap:28px 18px; }.studio-proof p { grid-column:1 / -1; }
  .work-intro { min-height:52vh; }.work-intro p { grid-column:auto; }.work-pin { height:auto; padding-right:0; overflow:hidden; }.project-track { width:100%; display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; padding-right:20px; }.project-panel { min-width:82vw; width:82vw; height:auto; padding:0 0 56px; scroll-snap-align:start; }.project-visual { height:56vw; min-height:320px; }.case-word { font-size:30vw; }.project-info { height:auto; margin-top:22px; padding-right:10px; }.project-info h3 { font-size:8.5vw; }.project-info p { font-size:8px; }.project-info small { margin-left:28px; }
  .browser-copy { inset:8vh 20px auto; display:block; }.browser-copy h2 { margin-top:32px; font-size:14vw; }.browser-copy p { margin-top:22px; }.browser-shell { width:calc(100vw - 24px)!important; height:58vh; border-radius:18px!important; }.mini-grid { grid-template-columns:1fr; }.mini-grid b { font-size:12vw; }.mini-grid i { position:absolute; right:-8vw; bottom:-8vw; width:55vw; height:55vw; }
  .drone-frame { width:calc(100vw - 40px)!important; height:62vh; min-height:480px; border-radius:18px!important; }.drone-compact { padding:0 20px 70px; }.drone-compact .drone-frame { height:62vh; min-height:480px; }.drone-title { inset:38% 20px auto; display:block; }.drone-title h2 { margin-top:18px; text-align:left; font-size:14vw; }.drone-bottom { left:20px; right:20px; display:block; }.drone-bottom p { margin-bottom:20px; font-size:13px; }
  .why { grid-template-columns:1fr; }.why-title { position:relative; top:auto; }.why-title h2 { font-size:20vw; }.reason { padding-bottom:55px; }.reason h3 { font-size:9.5vw; }.marquee-track { font-size:15vw; }.testimonial-track { display:flex; overflow-x:auto; gap:20px; scrollbar-width:none; }.testimonial-track blockquote { min-width:82vw; min-height:330px; }.testimonial-track blockquote p { font-size:8vw; }
  .about { min-height:100vh; }.about > p { grid-column:auto; width:100%; margin-top:45px; }.about-ghost { top:20%; font-size:24vw; }.principles { grid-column:1; grid-template-columns:1fr; margin-top:45px; }.principles span { padding-bottom:18px; border-bottom:1px solid var(--line); }.principles b { margin-top:12px; }.studio-heading { grid-template-columns:1fr; }.studio-heading h2 { margin-top:40px; font-size:16vw; }.studio-detail-grid { margin:52px 0 44px; grid-template-columns:1fr; gap:42px; }.quote-rail { display:flex; overflow-x:auto; gap:18px; scrollbar-width:none; }.quote-rail blockquote { min-width:78vw; min-height:180px; }.quote-rail blockquote p { font-size:7.3vw; }.process-list { grid-template-columns:1fr; }.process-list article,.process-list article:not(:first-child) { min-height:260px; padding:25px 0; border-right:0; border-bottom:1px solid var(--line); }.process-list h3 { margin-top:35px; }.process-list p { margin-top:35px; }
  .contact { min-height:76vh; }.contact h2 { margin:58px 0; font-size:16vw; }.contact-bottom { grid-template-columns:1fr; }.whatsapp-cta { min-height:88px; margin-top:32px; padding:0 14px; font-size:7vw; }.contact-details { flex-direction:column; gap:10px; }.availability { display:none; }.footer-brand { font-size:18vw; }.footer-grid { margin:42px 0; grid-template-columns:1fr 1fr; gap:25px; }.footer-bottom { gap:20px; flex-wrap:wrap; }.footer-bottom span:nth-child(2) { order:3; width:100%; }
}

@media (hover: none) { .service-preview { display:none; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }.cursor,.loader { display:none; }.mask-line > span { transform:none!important; } }