/* Architectural surfaces: quiet relief and grazing light, not extra content.
   Vector/CSS details stay sharp at every pixel density. Motion stays untouched. */
/* The frame around the film: lit navy, restrained gold and shallow relief. */
.site-header{
 position:relative;z-index:3;
 background:radial-gradient(ellipse at 23% 0%,#304968 0%,transparent 64%),linear-gradient(110deg,#0b213d,#07162b 76%,#040e20);
 box-shadow:inset 0 1px #ffffff0d;
}
.site-header::after{
 content:'';position:absolute;inset:auto 0 0;height:1px;pointer-events:none;
 background:linear-gradient(90deg,#c3994230,#f1cd827d 26%,#c3994230 76%,transparent);
}
.hero-caption{
 position:relative;isolation:isolate;overflow:clip;
 background:linear-gradient(116deg,transparent 0 48%,#ffffff05 48.1%,transparent 73%),radial-gradient(ellipse at 18% 90%,#a77b3829,transparent 59%),radial-gradient(ellipse at 84% 24%,#3152726b,transparent 60%),linear-gradient(112deg,#10263e,#0b1d35 67%,#08152b);
 box-shadow:inset 0 -1px #dfb45f33;
}
.hero-caption::before{
 content:'';position:absolute;z-index:-1;pointer-events:none;
 width:55%;height:280%;left:-12%;top:-75%;transform:rotate(-18deg);
 border:1px solid #eac47818;border-radius:48% 48% 0 0;
 box-shadow:0 0 0 23px #fff6df03,0 0 0 24px #eac4780b;
}
.hero-caption::after{
 content:'';position:absolute;inset:0 0 auto;height:24px;pointer-events:none;
 background:linear-gradient(#0b1d354a,transparent);
}
.city-motion-stage::after{
 content:'';position:absolute;z-index:1;inset:auto 0 0;height:22px;pointer-events:none;
 background:linear-gradient(transparent,#0b1d3566);
}
.hero-actions .text-link{background:#061a3c6b;box-shadow:inset 0 1px #ffffff09}
.hero-actions .text-link:hover{background:#264461}
footer{
 position:relative;isolation:isolate;overflow:clip;
 background:radial-gradient(ellipse at 17% 0%,#314961 0%,transparent 62%),radial-gradient(ellipse at 87% 100%,#81643724,transparent 55%),linear-gradient(112deg,#10243b,#061328 78%);
 box-shadow:inset 0 1px #dbb36c55;
}
footer::before{
 content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;
 background:linear-gradient(116deg,transparent 0 52%,#fff5dc05 52.1%,transparent 76%);
}
footer nav a{color:#e2e8ef}
footer nav a:hover{color:#f0c877}
@media(max-width:780px){
 .hero-caption::before{width:115%;left:-55%;height:165%;top:-28%}
 .site-header{background:radial-gradient(ellipse at 15% 0%,#304968 0%,transparent 80%),#08172e}
 .mobile-menu nav{background:linear-gradient(120deg,#182f4c,#08172e)}
 .city-motion-stage::after{height:16px}
}
.section,.proof-band{position:relative;isolation:isolate}
.section::before,.section::after,.proof-band::before{pointer-events:none}
.proof-band{
 background:radial-gradient(ellipse at 24% 0%,#fff3c7 0%,transparent 65%),linear-gradient(112deg,#edc46e,#d9a443);
 box-shadow:inset 0 1px #fff7dd99,inset 0 -1px #90691c33;
}
.intro{
 background:linear-gradient(118deg,transparent 0 36%,#b7aa9112 36.1%,transparent 56%),radial-gradient(ellipse at 0% 0%,#fffefa 22%,transparent 72%),linear-gradient(110deg,#f7efdf,#ede5d7);
 overflow:hidden;
}
.intro::before{
 content:'';position:absolute;z-index:-1;left:-5%;top:12%;width:47%;height:112%;
 border:1px solid #a88b5130;border-radius:48% 48% 0 0;
 box-shadow:0 0 0 24px #fffdf830,0 0 0 25px #a88b5114,22px 10px 70px #7864410b;
 transform:rotate(-12deg);
}
.intro-copy{border-left:1px solid #a88b5142;padding-left:32px}
.intro-copy .lead{color:#59492d}
.expertise{
 background:linear-gradient(90deg,#647c9310 1px,transparent 1px),linear-gradient(#647c9310 1px,transparent 1px),radial-gradient(ellipse at 90% 0%,#fffdf9,transparent 75%),linear-gradient(125deg,#dce5ec,#eff0eb);
 background-size:64px 64px,64px 64px,auto,auto;
 box-shadow:inset 0 1px #fff9,inset 0 18px 35px -32px #0c29496b;
}
#services{border-radius:18px;background:#fffdf866;box-shadow:0 16px 38px -24px #18344e5c,inset 0 1px #fff}
.service{border-top-color:#8ea0af45;transition:background .2s,box-shadow .2s}
.service:first-child{border-top:0}
.service:last-child{border-bottom:0}
.expertise .service summary{padding-left:22px;padding-right:22px}
.service:hover{background:#fffdf877}
.service[open]{background:#fffdf8e8;box-shadow:0 12px 25px -20px #061a3c66;border-radius:14px}
.service>p{
 max-width:620px;
 margin:-2px 52px 0 auto;
 padding:0 0 34px;
 color:#34465b;
 font-size:16px;
 line-height:1.55;
 letter-spacing:0;
}
.service .plus{color:#84601e}
.work{
 background:radial-gradient(ellipse at 0% 10%,#25466a 0%,transparent 55%),radial-gradient(ellipse at 100% 90%,#192d4b,transparent 65%),#07162e;
 box-shadow:inset 0 1px #ffffff18;
}
.project figure{background:transparent;box-shadow:0 18px 32px -18px #0009}
.project img{border:0;outline:0;clip-path:inset(.35% round 16px)}
.packages{
 background:linear-gradient(122deg,transparent 48%,#b6a47b10 48.1%,transparent 76%),radial-gradient(ellipse at 100% 20%,#ead7aa77,transparent 64%),linear-gradient(145deg,#fffdf8,#eae7df);
}
.package{box-shadow:inset 0 1px #fffd,0 2px 3px #10223a08,0 18px 30px -22px #10223a4d}
.package:nth-child(2){background:radial-gradient(ellipse at 70% 0%,#fff3ca,transparent 72%),linear-gradient(112deg,#ebc77c,#f4e3bb)}
.package:nth-child(3){background:radial-gradient(ellipse at 76% 0%,#36557a,transparent 72%),linear-gradient(115deg,#142f50,#061a3c);box-shadow:inset 0 1px #ffffff24,0 18px 30px -20px #061a3c66}
.price-from{display:block;font-size:14px;line-height:1.4;letter-spacing:.025em;font-weight:500;color:#f2ca77}
.package{transition:translate .25s ease,box-shadow .25s ease,border-color .25s ease}
.package .plus{transition:transform .2s,background .25s ease,box-shadow .25s ease}
.package:focus-within{border-color:#b88a32;box-shadow:inset 0 1px #ffffff44,0 12px 32px -15px #10223a55}
@media(hover:hover) and (pointer:fine){
 .package:hover{translate:0 -5px;border-color:#b88a32;box-shadow:inset 0 1px #ffffff66,0 6px 10px -5px #10223a24,0 25px 38px -18px #10223a66}
 .package:nth-child(3):hover{border-color:#e2af43;box-shadow:inset 0 1px #f4cd7c55,0 6px 10px -5px #10223a33,0 25px 38px -18px #061a3c88}
 .package:hover .plus{background:#f1ca75;box-shadow:0 3px 9px #061a3c15}
}
@media(hover:none){.package summary:active{background:#e2af4314}}
@media(prefers-reduced-motion:reduce){.package:hover{translate:none}}
.process{
 overflow:clip;
 background:radial-gradient(ellipse at 0% 35%,#edcf8b66,transparent 58%),linear-gradient(108deg,#f6efdf,#fffdf8 68%,#ece5d8);
 border-top:1px solid #c0a66d40;border-bottom:1px solid #c0a66d40;
}
.process::before{
 content:'';position:absolute;z-index:-1;inset:40px auto 0 -10%;width:52%;
 border:1px solid #b7985b33;border-bottom:0;border-radius:48% 48% 0 0;
 box-shadow:0 0 0 30px #fffdf829,0 0 0 31px #b7985b1f,0 0 0 62px #fffdf81a,0 0 0 63px #b7985b14;
 clip-path:inset(-64px -64px 0 0);
}
#process-steps{position:relative;border-left:1px solid #bea05d80;padding-left:32px}
.process-step{position:relative;border-bottom-color:#ad935537}
.process-step::before{content:'';position:absolute;left:-37px;top:10px;width:9px;height:9px;background:#b78b35;border-radius:50%;box-shadow:0 0 0 5px #f9f4e9}
.contact{
 background:radial-gradient(ellipse at 80% 26%,#fffdf9 0%,#f1eee555 42%,transparent 66%),linear-gradient(130deg,#dce5ed,#e9e6dd);
}
.contact>img{filter:drop-shadow(0 20px 18px #162b4624)}
/* Artwork edge-to-edge, including the enlarged view. No paper mat. */
#project-dialog{padding:0;background:transparent;color:#fffdf8;box-shadow:none;border:0;border-radius:0;max-width:min(1100px,94vw);overflow:visible}
#project-dialog>img{display:block;max-height:76svh;border:0;border-radius:14px;object-fit:contain;background:transparent;clip-path:inset(.35% round 12px)}
#project-dialog h2{margin:17px 3px 0;font-size:25px}
#project-dialog p{margin:5px 3px 0;color:#cad5e1}
#project-dialog .dialog-close{right:12px;top:12px;z-index:2;border-color:#ffffff66;background:#061a3ce8}
@media(max-width:780px){
 .intro-copy{padding-left:0;border-left:0}
 .project img{clip-path:inset(.35% round 10px)}
 .intro::before{width:92%;left:-35%;top:7%;height:85%}
 .expertise{background-size:40px 40px,40px 40px,auto,auto}
 .expertise .service summary{padding-left:14px;padding-right:14px}
 .service>p{
  max-width:none;
  margin:-2px 18px 0;
  padding:0 0 30px;
  font-size:16px;
  line-height:1.55;
 }
 .process::before{width:85%;left:-38%;top:25px;bottom:0;box-shadow:0 0 0 24px #fffdf829,0 0 0 25px #b7985b1f}
 #process-steps{padding-left:24px}
 .process-step::before{left:-29px}
 #project-dialog h2{font-size:23px}
}