/* Light, fabric and architectural arcs — shared by the four pages. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1);--linen:#ece3d6}
body{background:linear-gradient(125deg,#faf8f3 0%,var(--paper) 48%,#eef1ee 100%)}
.hero-copy{background:linear-gradient(125deg,#f7f3eb 10%,#e9e0d2 100%)}
.page-intro{--muted:#48585c;--emphasis:#345563;position:relative;isolation:isolate;background:linear-gradient(115deg,#f8f5ef 20%,#edf0ed 65%,#cddbd9 100%)}
.page-intro::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0 0 0 55%;background:url('assets/arches.svg') right 30%/auto 130% no-repeat;opacity:.45;clip-path:inset(0)}
.page-intro>.container{position:relative}
.soft{background:linear-gradient(125deg,#edf1ee,#dde6e2)}
.quote-band{--emphasis:#345563;position:relative;isolation:isolate;background:linear-gradient(115deg,#eee5d8,#dfcdb5)}
.quote-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/arches.svg') right center/auto 180% no-repeat;opacity:.22}
.contact-help{background:linear-gradient(135deg,#e6ece7,#d9e3df);border-radius:2px 54px 2px 2px}
.cta{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,#031420 10%,#122f3a 68%,#294b55)}
.cta::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:url('assets/arches.svg') right 45%/auto 180% no-repeat;opacity:.38}
.cta::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:420px;height:420px;left:0;top:0;background:radial-gradient(ellipse,#aecdc51c,transparent 68%);transform:translate(var(--light-x,65vw),var(--light-y,-120px));opacity:0;transition:opacity 250ms}
.cta.is-lit::after{opacity:1}
.site-footer{background:linear-gradient(135deg,#031420,#0a202c)}
.hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--linen);transform:scaleX(0);transform-origin:right}
.photo-note{z-index:1}
.service-card img{transition:clip-path 450ms var(--motion-ease),filter 250ms;clip-path:inset(0 round 0)}
.service-card:is(:hover,:focus-visible) img{clip-path:inset(2% round 3px 48px 3px 3px);filter:brightness(1.04)}
.service-card{transition:border-color 200ms}
.service-card:is(:hover,:focus-visible){border-color:var(--emphasis)}
.btn,.nav-cta,.service-index a{background-size:220% 100%;background-position:100% 0;transition:background-position 350ms var(--motion-ease),background-color 200ms,color 200ms,transform 150ms}
.btn,.btn:hover{background-image:linear-gradient(110deg,#315868 0%,#315868 45%,transparent 55%)}
.btn-light,.btn-light:hover{background-image:linear-gradient(110deg,#a4bfca 0%,#a4bfca 45%,transparent 55%)}
.btn:is(:hover,:focus-visible){background-position:0 0}
.btn:active,.menu-toggle:active{transform:scale(.98)}
.arrow{transition:transform 250ms var(--motion-ease)}
a:is(:hover,:focus-visible)>.arrow,.service-card:is(:hover,:focus-visible) h3 .arrow,.contact-item:is(:hover,:focus-visible) .arrow{transform:translateX(4px)}
.hero-foot a:is(:hover,:focus-visible)>.arrow{transform:translateY(4px)}
.text-link{transition:color 180ms,border-color 180ms}
.contact-item{transition:background-color 220ms}
.contact-item:is(:hover,:focus-visible){background:#e6ece680}
.menu-toggle{transition:background-color 180ms,transform 150ms}
.menu-toggle:is(:hover,:focus-visible){background:#183242}
.service-index a[aria-current="location"]{background:var(--ink);color:white;border-color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
 .motion-ready .page-intro::before{animation:arch-arrive 750ms var(--motion-ease) both}
 .motion-ready .page-intro h1{animation:type-settle 650ms var(--motion-ease) both}
 .hero-ready .hero-art::after{animation:curtain-open 800ms var(--motion-ease) both}
 .hero-ready .hero-art>img{animation:photo-settle 800ms var(--motion-ease) both}
 .hero-ready .hero-copy h1{animation:type-settle 700ms var(--motion-ease) both}
 .hero-ready .photo-note{animation:caption-arrive 550ms 180ms var(--motion-ease) both}
 .cta.has-arrived::before{animation:arch-arrive 750ms var(--motion-ease) both}
 .service-row:target .service-copy h2,.detail-block:target h2{animation:target-emphasis 700ms var(--motion-ease)}
 @media(max-width:860px){.js .nav.is-open:not(.is-initial){animation:menu-open 220ms var(--motion-ease)}}
}
@keyframes curtain-open{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes photo-settle{from{transform:scale(1.055)}to{transform:scale(1)}}
@keyframes type-settle{from{transform:translateY(12px)}to{transform:translateY(0)}}
@keyframes caption-arrive{from{transform:translateX(16px);opacity:.5}to{transform:translateX(0);opacity:1}}
@keyframes arch-arrive{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes menu-open{from{opacity:.8;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@keyframes target-emphasis{from{color:var(--emphasis)}to{color:var(--ink)}}
@media(max-width:720px){
 .page-intro::before{inset:0 0 0 35%;opacity:.22;background-size:auto 100%}
 .cta::before{background-position:90% center;opacity:.22}
 .quote-band::before{opacity:.14}
 .contact-item:is(:hover,:focus-visible){padding-left:0;padding-right:0}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
 .hero-art::after{transform:scaleX(0)}
 .service-card:is(:hover,:focus-visible) img{clip-path:inset(0);filter:brightness(1.04)}
 .arrow,.btn:active,.menu-toggle:active{transform:none!important}
 .contact-item:is(:hover,:focus-visible){padding-left:0;padding-right:0}
 .cta::after{display:none}
}

/* Background depth follows scrolling; foreground text stays stationary. */
.page-intro,.quote-band{overflow:clip}
.page-intro::before,.quote-band::before,.cta::before{transform:translate3d(0,var(--arch-shift,0px),0)}
@media(prefers-reduced-motion:reduce){
 .page-intro::before,.quote-band::before,.cta::before{transform:none}
}
