﻿/* Progressive visual depth: content remains usable without animation. */
:root{--depth-shadow:0 22px 45px -23px #002f2859}
body{background:#f8faf4}
header{box-shadow:0 5px 0 #002019,0 12px 30px #001c2426}
.hero{isolation:isolate;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 90% 25%,#ffdc5730,transparent 50%),linear-gradient(0deg,#002e2655,transparent 55%)}
.hero-copy{position:relative;z-index:2;text-shadow:0 3px 18px #001d2440}
.hero h1{text-shadow:0 2px 0 #002a2655,0 12px 28px #001b2450}
.hero .eyebrow{display:inline-block;border:1px solid #f7d56365;background:#002d265e;padding:9px 15px;border-radius:30px;box-shadow:inset 0 1px 0 #fff2,0 5px 20px #001a2420;backdrop-filter:blur(8px)}
.depth-orbit{position:absolute;right:-115px;top:55px;width:440px;height:440px;border-radius:50%;border:1px solid #f8d35365;box-shadow:inset 10px 7px 40px #ffe78215,12px 20px 50px #001e2440;transform:perspective(850px) rotateY(-30deg) rotateX(18deg);pointer-events:none;z-index:0;opacity:.7}
.depth-orbit:before,.depth-orbit:after{content:"";position:absolute;inset:38px;border-radius:50%;border:1px solid #fff4;box-shadow:0 0 30px #ffdb3610}
.depth-orbit:after{inset:90px;border:24px solid #ffe48312}
.button{position:relative;box-shadow:0 5px 0 #b89520,0 12px 24px #002b2633,inset 0 1px 0 #fff8;transition:transform .2s,box-shadow .2s,filter .2s}
.button:hover{transform:translateY(-3px);box-shadow:0 8px 0 #b89520,0 18px 28px #002b2638,inset 0 1px 0 #fff8}
.button:active{transform:translateY(3px);box-shadow:0 2px 0 #b89520,0 5px 14px #002b2630}
.editorial-section{position:relative;background:linear-gradient(135deg,#fffdf7,#f6f9f1);border-top:1px solid #ffffff}
.editorial-section.soft{background:radial-gradient(ellipse at 5% 0,#e1eacb99,transparent 60%),#edf2e8}
.editorial-layout{position:relative;perspective:1200px}
.editorial-layout>img{border:7px solid #fff;border-radius:20px;box-shadow:12px 12px 0 #dce5c9,14px 14px 0 #bcceab,0 30px 45px -18px #002e2650;transform:perspective(1100px) rotateY(-5deg) rotateZ(1deg);transition:transform .4s,box-shadow .4s}
.editorial-copy h2{position:relative}
.depth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:30px 0}
.depth-grid.single{grid-template-columns:1fr}
.depth-card{position:relative;min-width:0;padding:27px;background:linear-gradient(145deg,#fff,#f8faf3);border:1px solid #fff;border-radius:18px;box-shadow:0 5px 0 #dce5d2,var(--depth-shadow);transform:perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .22s ease-out,box-shadow .22s;isolation:isolate}
.depth-card:before{content:"";position:absolute;left:25px;top:0;width:44px;height:4px;background:linear-gradient(90deg,#e2ac00,#ffe58a);border-radius:0 0 5px 5px}
.depth-card h3{margin-top:0;font-size:20px}
.depth-card p:last-child{margin-bottom:0}
.depth-card p{font-size:15px;line-height:1.75}
.depth-card:hover{box-shadow:0 7px 0 #d2dfc7,0 28px 45px -23px #002f2870}
.with-image .depth-grid{grid-template-columns:1fr}
.editorial-copy:has(>.depth-grid){max-width:none}
.depth-card .editorial-cta{font-size:12px;gap:12px;padding:12px 17px}
.card,.contact-content form,.contact-content aside{box-shadow:0 5px 0 #dce5d2,0 24px 40px -22px #002f2850;border:1px solid #fff}
footer{box-shadow:inset 0 4px 0 #c3a43b}
.reveal-ready{animation:depth-arrive .75s cubic-bezier(.2,.7,.2,1) both}
@keyframes depth-arrive{from{opacity:.3;translate:0 24px}to{opacity:1;translate:0 0}}
@media(max-width:760px){.depth-grid{grid-template-columns:1fr;gap:18px}.depth-card{padding:23px}.editorial-layout>img{transform:none;box-shadow:7px 7px 0 #dce5c9,0 18px 30px -18px #002e2640}.depth-orbit{right:-210px;width:320px;height:320px;opacity:.35}.hero .eyebrow{font-size:9px}.button{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.depth-card,.editorial-layout>img,.button,.button:hover,.button:active{transform:none!important;transition:none!important}.reveal-ready{animation:none!important}.depth-orbit{transform:none}}

/* Interactive image depth; the image and its alt text remain intact. */
.editorial-layout>img.depth-photo,.card>img.depth-photo{
 transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(calc(-4deg + var(--tilt-y,0deg)));
 transition:transform .3s ease-out,box-shadow .3s ease-out;
 backface-visibility:hidden;
 box-shadow:8px 9px 0 #dce5c9,9px 10px 0 #b6c99f,0 24px 38px -16px #002e2659;
}
.card>img.depth-photo{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 9px 18px -12px #002e2659}
@media(hover:hover) and (pointer:fine){
 .editorial-layout>img.depth-photo:hover{
  transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px) scale(1.015);
  box-shadow:11px 15px 0 #dce5c9,12px 16px 0 #b6c99f,0 35px 48px -18px #002e2670;
 }
}
@media(max-width:760px),(hover:none){
 .editorial-layout>img.depth-photo,.card>img.depth-photo{transform:none;box-shadow:5px 6px 0 #dce5c9,0 15px 25px -16px #002e2659}
}
@media(prefers-reduced-motion:reduce){
 .editorial-layout>img.depth-photo,.editorial-layout>img.depth-photo:hover,.card>img.depth-photo{transform:none!important;transition:none!important}
}
