/* Deep Media / ink, ocean, ice and amber. */
:root{
 --bg:#05141c;--fg:#ecf5f3;--muted:#a6bec5;--aqua:#72ccdc;--line:#94c9d027;
 --coral:#f4ad39;--amber:#ffd77b;
 --electric-text:linear-gradient(110deg,#279ab7 5%,#a7e4e9 38%,#50bed0 65%,#2587a8 95%);
 --warm-text:linear-gradient(110deg,#ee8c27 0%,#ffc34d 42%,#fff0b4 66%,#e99a24 100%);
}
body{background:var(--bg);color:var(--fg)}
main{background:radial-gradient(ellipse at 86% 8%,#11617a40,transparent 26%),radial-gradient(ellipse at 4% 45%,#0a475a33,transparent 30%),linear-gradient(180deg,#071c28 0%,#082d3e 21%,#061d2a 44%,#04121a 76%,#061b24 100%)}
header{background:linear-gradient(#03121b75,transparent)}
.water-column{background:radial-gradient(ellipse at 65% 20%,#12627d60,transparent 65%)}
.hero-film{background:#061a24!important}
.hero-film:after{background:linear-gradient(90deg,#031722ed 0%,#062538b0 43%,#092c3835 100%),linear-gradient(180deg,#031b2d70,transparent 35%,#03172188)}
h1 em,.work-intro h1 em,h2 em,.intro h2 span,.mark,.creative-tools-intro h3 em,.creative-tools-details .mono{
 background-image:var(--electric-text);color:#72ccdc;filter:drop-shadow(0 0 12px #44b5cb35)
}
.eyebrow,.hero .eyebrow,.creative-tools .eyebrow,.process small,.work-jump span,.work-jump b{color:#72ccdc;text-shadow:0 0 14px #35a7c033}
.eyebrow i{background:#ffc34d;box-shadow:0 0 14px #f6a93475}
.hero-bottom p,.hero-foot,.hero-project,.intro-copy,.section-top>p,.work-heading-row>p,.work-lead>p,.category-heading>p:not(.eyebrow),.case-context>p:not(.eyebrow),.work-outro p:not(.eyebrow){color:#b4c9ce}
.hero-project:hover,nav a:hover,.text-link:hover,footer a:hover{color:#ffe0a0;text-shadow:0 0 16px #f6a93450}
.service-hint{color:#8faab4}
:is(.pill,.nav-contact,.filters button,.close,.open-circle,.front,.back){background:linear-gradient(135deg,#a0d4d52c,#30687928 48%,#14445250);border-color:#b0dad339;color:#ecf5f3;box-shadow:inset 0 0 22px #d7eeec0c,0 7px 24px #010d1933}
:is(.pill,.nav-contact,.filters button,.close,.open-circle,.front,.back)::before{background:radial-gradient(ellipse at var(--light-x) var(--light-y),#90dce73d,transparent 65%),linear-gradient(118deg,#b7edf012 5%,#43839605 36%,#fff0c655 48%,#d68c2015 59%,#64bbcc20 87%);background-size:100% 100%,230% 100%}
:is(.pill,.nav-contact,.filters button,.close):is(:hover,:focus-visible),.project-open:is(:hover,:focus-visible) .open-circle,.flip:is(:hover,:focus-visible) :is(.front,.back){background:linear-gradient(135deg,#95d6e024,#155b734f 52%,#e7a73520);border-color:#ffe0a08c;color:#fff8e8}
@keyframes water-glow{0%,100%{box-shadow:inset 0 0 18px #a6e7e820,0 0 16px #318daa50,0 0 40px #15607840,0 10px 48px #9b5e1220}50%{box-shadow:inset 0 0 25px #fff0bd25,0 0 25px #60bdcf66,0 0 65px #267e9c55,0 12px 85px #de972c30}}
.hero-bottom>.pill,.nav-contact{background:linear-gradient(125deg,#ffe3a829,#b37a2518 42%,#408ca530);border-color:#efc77c66}
.front small,.back small,.flip-label{color:#afc7cd}.back>span:not(.flip-label){color:#c5dadd}
.service-grid .vector-art{filter:drop-shadow(0 0 15px #258ca83b)}
.service-grid .back{background:linear-gradient(145deg,#164357,#092532 65%,#4e381b44)}
.service-grid .front{background:radial-gradient(ellipse at 100% 0%,#d9962713,transparent 56%),linear-gradient(135deg,#acd7da20,#1b465537 48%,#09232f99)}
.creative-tools,.creative-tools-details>div+div,.about,.process,.work-category{border-color:var(--line)}
.process small{color:#efbf67;text-shadow:0 0 12px #efb94422}
.bio-field{background:radial-gradient(ellipse at 76% 83%,#c3852010,transparent 34%),radial-gradient(ellipse at 23% 65%,#2394ad0c,transparent 38%)}
.project-caption{background:linear-gradient(135deg,#82c6d01b,#28576b28);border-color:var(--line)}
.project-caption span,.category-heading>p:not(.eyebrow),.case-context>p:not(.eyebrow){color:#adc3ca}
.work-jump{border-color:var(--line)}.work-jump a+a{border-color:var(--line)}.work-jump a:hover{background:#78c9d00b}.work-jump b{color:#f4bd58}
.work-outro{background:radial-gradient(ellipse at 85% 100%,#bd7c2520,transparent 60%),radial-gradient(ellipse at 20% 30%,#14546a55,transparent 70%)}
.contact{background:radial-gradient(ellipse at 0% 100%,#98601e32,transparent 58%),radial-gradient(ellipse at 100% 0%,#15566c60,transparent 63%),linear-gradient(125deg,#082b3b,#041820 75%);color:#edf5f1;border-top:1px solid #dfb36133}
.contact h2 em{background-image:var(--warm-text);filter:drop-shadow(0 0 15px #e49a2b30)}
.contact .eyebrow{color:#efbf67;text-shadow:none}.contact p{color:#adc4cc}.contact .text-link{color:#f8d58e;border-color:#e6b65a70}
.contact label{color:#d3e4e7}
.contact input,.contact select,.contact textarea{color:#edf5f1;border-color:#8bbac65c;background:transparent;color-scheme:dark}
.contact input::placeholder,.contact textarea::placeholder{color:#9db7c2}
.contact select option{background:#0b2b3b;color:#edf5f1}
.contact .pill{background:linear-gradient(115deg,#72501d75,#a46e2338 46%,#316a7955);border-color:#efc77c80;color:#fff3d8}
.contact .pill:is(:hover,:focus-visible){background:linear-gradient(115deg,#a6752866,#17566e66 75%,#86bfce33)}
.contact :is(input,select,textarea):focus-visible{outline:2px solid #eac16c;outline-offset:5px}
.text-link{border-color:#82bdc369}
.case-context{border-color:#78aeb14d}.case-context>span{color:#8eaab5}
dialog{background:linear-gradient(145deg,#0c3244,#061b26);border-color:#80b9c04d}dialog p{color:#b6ccd1}dialog img,dialog video{background:#04151d}
footer{background:#04121a;color:#9bb7c1}footer .brand{color:#ecf5f3}
@media(max-width:800px){.hero-film:after{background:linear-gradient(90deg,#031722df,#06253785),linear-gradient(180deg,#031c2966,transparent 55%,#03172188)}}
.work-page main{background:radial-gradient(ellipse at 88% 1%,#12627d4a,transparent 25%),radial-gradient(ellipse at 0% 38%,#0a475a33,transparent 30%),#051923}
/* Centered landing composition and a compact frosted navigation band. */
header{height:84px;padding:0 6%;background:linear-gradient(110deg,#a8d8de18,#062430a6 55%,#6caab322);backdrop-filter:blur(26px) saturate(125%);-webkit-backdrop-filter:blur(26px) saturate(125%);border-bottom:1px solid #b7dbe025;box-shadow:0 8px 30px #02131b20}
header .brand{font-size:33px}header .brand-light{font-weight:500}
header nav{font-size:17px;font-weight:650;gap:34px}
header .nav-contact{padding:10px 20px}
.hero{padding-top:84px;padding-bottom:65px}
.hero>.hero-film{top:84px}
.hero-content{width:100%;max-width:1000px;margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:65px 0 35px}
.hero .display-heading{margin-left:auto;margin-right:auto}
.hero .eyebrow{margin-bottom:28px}
.hero h1{font-size:clamp(72px,8.5vw,126px);line-height:1.04;margin-bottom:30px}
.hero-bottom{align-items:center;gap:26px}
.hero-bottom p{font-size:20px;line-height:1.55}
.hero-bottom>.pill{min-width:224px}
.hero-foot{margin-top:0;padding-top:24px;width:100%}
.hero-film:after{background:radial-gradient(ellipse at 50% 43%,#031822c9 0%,#041c2b8c 48%,#04182240 100%),linear-gradient(180deg,#04182255,transparent 52%,#031721aa)}
@media(max-width:800px){header{height:74px;padding:0 5%}header .brand{font-size:26px}header nav{font-size:15px;gap:20px}header .nav-contact{padding:9px 15px}.hero{padding-top:74px}.hero>.hero-film{top:74px}.hero-content{padding:56px 0 30px}.hero h1{font-size:clamp(54px,10vw,80px)}.hero-bottom p{font-size:18px}}
@media(max-width:480px){header{height:70px;padding:0 4%}header .brand{font-size:22px}header .mark{font-size:30px;margin-right:7px}header nav{font-size:13px;gap:13px}header .nav-contact{padding:8px 11px}header .nav-contact span{margin-left:6px}.hero{padding-top:70px}.hero>.hero-film{top:70px}.hero h1{font-size:clamp(45px,11.5vw,60px)}.hero .eyebrow{font-size:9px;letter-spacing:1.2px}.hero-content{padding-top:45px}.hero-bottom p{font-size:17px}}
@media(max-width:360px){header .brand{font-size:19px}header .mark{font-size:26px;margin-right:5px}header nav{font-size:12px;gap:10px}header .nav-contact{padding:8px 9px}header .nav-contact span{display:none}}

/* A quieter, shorter landing frame and warm emphasis on creative range. */
.hero{min-height:max(650px,74svh);padding-bottom:52px}
.hero-content{padding:50px 0 35px}
.hero-bottom>.pill,.work-teaser .pill{justify-content:center;text-align:center;gap:0;min-width:224px}
.gold-text{background-image:var(--warm-text);background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:#ffd078;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 14px #e49a2b40);animation:electric-flow 12s ease-in-out infinite alternate}
@media(max-width:800px){.hero{min-height:max(600px,78svh);padding-bottom:45px}.hero-content{padding:42px 0 28px}}
@media(prefers-reduced-motion:reduce){.gold-text{animation:none}}
/* Warm editorial highlights, with room for italic strokes and descenders. */
#hero-title em,#creative-tools-title em,#about h2 em{
 background-image:var(--warm-text);background-size:200% 100%;
 background-clip:text;-webkit-background-clip:text;color:#ffd078;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 0 14px #e49a2b40);
 padding:.04em .09em .18em .04em;margin:-.04em -.09em -.18em -.04em;
 box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
#about h2 em{display:inline-block;line-height:1.15;vertical-align:baseline}

/* A right-aligned editorial beat between the introduction and capabilities. */
#work.work-teaser{grid-template-columns:1fr;text-align:right;justify-items:end;gap:18px}
#work.work-teaser>div{width:100%;max-width:850px;justify-self:end}
#work.work-teaser>div:last-child{max-width:580px}
#work.work-teaser h2{margin-bottom:12px}

/* A quick ambient wash settles once; resting sea-glass styles stay unchanged. */
:is(.pill,.nav-contact,button:not(.flip)):is(:hover,:focus-visible),
.flip:is(:hover,:focus-visible) :is(.front,.back){
 isolation:isolate;overflow:visible;
 border-color:#a9e4e78c;color:#fff8e8;
 animation:none;
 box-shadow:inset 0 0 20px #bce8e51a,0 0 22px #389ab133,0 3px 28px #edaa3426;
}
:is(button:not(.flip)):is(:hover,:focus-visible){position:relative}
.flip:is(:hover,:focus-visible) :is(.front,.back){overflow:hidden}
:is(.pill,.nav-contact,button:not(.flip)):is(:hover,:focus-visible)::before,
.flip:is(:hover,:focus-visible) :is(.front,.back)::before{
 content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
 opacity:.85;
 background:linear-gradient(115deg,#43899d18 0%,#81d1db66 35%,#c0dcd04d 58%,#e9b95c55 80%,#23617b33 100%);
 background-size:230% 180%;background-position:65% 50%;
 animation:ambient-settle 1.15s cubic-bezier(.16,1,.3,1) 1 both;
}
:is(.pill,.nav-contact,button:not(.flip)):is(:hover,:focus-visible)::after{
 content:'';position:absolute;inset:-4px;border-radius:inherit;z-index:-2;pointer-events:none;
 background:linear-gradient(115deg,#69c5d34d,#357d9626 48%,#e8b65b40);
 filter:blur(15px);opacity:.5;
 animation:ambient-bloom 1.15s cubic-bezier(.16,1,.3,1) 1 both;
}
@keyframes ambient-settle{
 from{background-position:0% 50%;opacity:.25}
 to{background-position:65% 50%;opacity:.85}
}
@keyframes ambient-bloom{from{opacity:0}to{opacity:.5}}
@media(prefers-reduced-motion:reduce){
 :is(.pill,.nav-contact,button:not(.flip)):is(:hover,:focus-visible)::before,
 :is(.pill,.nav-contact,button:not(.flip)):is(:hover,:focus-visible)::after,
 .flip:is(:hover,:focus-visible) :is(.front,.back)::before{animation:none}
}

/* Show the original hero footage without a tint or dimming layer. */
.hero::after,.hero-film::after{content:none;background:none}
.hero-film video{filter:none;opacity:1;mix-blend-mode:normal}

.form-trap{display:none!important}
#inquiry button:disabled{cursor:default;opacity:.65;pointer-events:none}
#form-status[data-state="error"]{color:#ffd77b}

/* Accent words use the same upright typography as the main headings. */
em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}

/* Keep phrases together and let supporting copy flow naturally. */
h1,h2,h3,h4,.front strong,.back strong,.tile-copy strong{text-wrap:balance;word-break:normal;overflow-wrap:normal;hyphens:none}
p,.back>span,.case-facts dd,.tile-specialty{text-wrap:pretty}
.contact-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:7%}
.contact-grid>div:first-child{container-type:inline-size}
.contact h2.display-heading{font-size:clamp(28px,13cqw,72px);line-height:1.12;width:100%;margin-bottom:28px}
.contact h2 .type-line{white-space:nowrap}
.project-page .case-hero h1{font-size:clamp(34px,7.4vw,108px)}
.portfolio-outro>p:not(.eyebrow){max-width:58ch}
@media(max-width:800px){.contact-grid{grid-template-columns:minmax(0,1fr);gap:40px}}

@media(max-width:480px){header{gap:14px}header .brand{font-size:20px}header nav{font-size:12px;gap:12px}header .nav-contact{padding:8px 10px}}

#about>div:first-child{container-type:inline-size}
#about h2{font-size:clamp(28px,10.5cqw,57px);line-height:1.14}