/* DAKNES: quiet light, layout guides, and print texture. */
body{--glow-x:75%;--glow-y:18%;--grid-x:0px;--grid-y:0px;isolation:isolate}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{
  background:
    radial-gradient(600px circle at var(--glow-x) var(--glow-y),rgba(233,187,112,.15),transparent 73%),
    radial-gradient(ellipse 75% 55% at 8% 86%,rgba(83,124,153,.20),transparent 75%),
    linear-gradient(150deg,transparent 15%,rgba(90,129,158,.08) 50%,transparent 78%);
}
body::after{
  background:linear-gradient(rgba(235,210,170,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(235,210,170,.035) 1px,transparent 1px);
  background-size:96px 96px;background-position:var(--grid-x) var(--grid-y);opacity:.65;
  mask-image:linear-gradient(90deg,#000,transparent 72%);
}
body>header,body>main,body>footer{position:relative;z-index:1}
body>header{z-index:20}
body>header:has(.bar .navcta){position:sticky}
/* Large, soft arcs recall layout guides at the edges of the landing page. */
.hero{background-image:radial-gradient(circle 360px at 100% 5%,transparent 64%,rgba(233,187,112,.13) 64.25%,transparent 64.7%,transparent 78%,rgba(233,187,112,.08) 78.25%,transparent 78.7%)}
.services{
  background-image:
    radial-gradient(ellipse 65% 130% at 100% 0%,rgba(89,129,157,.23),transparent 72%),
    radial-gradient(circle 350px at 0% 100%,transparent 71%,rgba(233,187,112,.105) 71.25%,transparent 71.7%,transparent 85%,rgba(233,187,112,.07) 85.25%,transparent 85.7%),
    linear-gradient(130deg,#203b56,#294b65 55%,#203b56);
}
.process{background-image:radial-gradient(ellipse 65% 100% at 5% 95%,rgba(75,112,141,.18),transparent 75%)}
.contact{background-image:radial-gradient(ellipse 80% 110% at 100% 15%,rgba(233,187,112,.10),transparent 68%),linear-gradient(125deg,#3b5b73,#274761 60%,#1d3851)}
/* Faint ink dots on cards; retain their existing panel colors and contrast. */
:where(.card,.editor-panel,.preview-card,.controls-card,.viewer-panel,.layout-panel){
  background-image:radial-gradient(circle at 1px 1px,rgba(233,187,112,.065) 1px,transparent 1.6px);
  background-size:32px 32px;background-position:var(--grid-x) var(--grid-y);
}
/* The design pages use a lighter print texture around the product preview. */
body:has(.preview-card),body:has(.viewer-panel),body:has(.cards){
  background-image:radial-gradient(ellipse 65% 60% at 85% 10%,rgba(65,108,139,.26),transparent 75%),linear-gradient(145deg,#142b43,#1c3a53 55%,#142b43);
}
body:has(.preview-card)::after,body:has(.viewer-panel)::after,body:has(.cards)::after{opacity:.36}
@media(max-width:650px){.hero{background-image:radial-gradient(circle 240px at 100% 0%,transparent 64%,rgba(233,187,112,.10) 64.25%,transparent 64.7%)}}
@media(prefers-reduced-motion:reduce){body{--grid-x:0px!important;--grid-y:0px!important;--glow-x:75%!important;--glow-y:18%!important}}
/* Small, varied agency pictograms remain anchored to the viewport. */
body::after{
  background-image:url("agency-icons-small.webp");
  background-size:960px 640px;
  background-position:center center;
  background-repeat:repeat;
  mask-image:none;
  opacity:.09;
}
body:has(.preview-card)::after,body:has(.viewer-panel)::after,body:has(.cards)::after{opacity:.09}
.services,.process,.contact{position:relative;isolation:isolate}
.services::before,.process::before,.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:url("agency-icons-small.webp") center center/960px 640px repeat fixed;
  opacity:.07;
}
.services .wrap,.process .wrap,.contact .wrap{position:relative;z-index:1}
@media(max-width:650px){body::after{background-size:660px 440px;opacity:.07}body:has(.preview-card)::after,body:has(.viewer-panel)::after,body:has(.cards)::after{opacity:.07}.services::before,.process::before,.contact::before{background-size:660px 440px;opacity:.05}}