/* garywaddell.org — Wonder redesign, July 2026 */
:root{
  --navy:#1B2A4A; --navy-deep:#0F1A30; --gold:#C8A951; --gold-light:#E4CE8A;
  --cream:#F5F0E8; --cream-warm:#EDE6D8; --ink:#20242e; --ink-soft:#4a5064;
  --on-navy:#dfe3ee; --on-navy-soft:#aab3c9;
  --display:'Cormorant Garamond',Georgia,serif; --body:'EB Garamond',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{font-family:var(--body);font-size:1.19rem;line-height:1.65;color:var(--ink);background:var(--cream)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:50;background:rgba(15,26,48,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(200,169,81,.25)}
.masthead .inner{max-width:1120px;margin:0 auto;padding:.7rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{text-decoration:none;color:var(--cream)}
.brand .name{font-family:var(--display);font-weight:600;font-size:1.28rem;letter-spacing:.06em}
.brand .roles{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-soft)}
nav.site{display:flex;gap:1.4rem;flex-wrap:wrap}
nav.site a{color:var(--on-navy);text-decoration:none;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem 0;border-bottom:2px solid transparent}
nav.site a:hover,nav.site a[aria-current="page"]{color:var(--gold-light);border-bottom-color:var(--gold)}

/* ---------- bands ---------- */
.band{padding:5rem 1.4rem}
.band .inner{max-width:1060px;margin:0 auto}
.band--navy{background:var(--navy);color:var(--on-navy)}
.band--deep{background:var(--navy-deep);color:var(--on-navy)}
.band--cream{background:var(--cream)}
.band--warm{background:var(--cream-warm)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.split>*{min-width:0}
.split .photo{width:100%;height:auto}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:2.2rem}}
.eyebrow{font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:1.1rem}
.band--navy h2,.band--deep h2{color:var(--cream)}
.band p+p{margin-top:1rem}
.lede{font-size:1.24rem}
.photo{border-radius:4px;box-shadow:0 18px 50px rgba(15,26,48,.28)}
.band--navy .photo,.band--deep .photo{box-shadow:0 18px 50px rgba(0,0,0,.5)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 30% 10%,#22335a 0%,var(--navy) 45%,var(--navy-deep) 100%);color:var(--on-navy);padding:5.5rem 1.4rem 6rem}
.hero .inner{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center;position:relative;z-index:2}
.hero .inner>*{min-width:0}
@media(max-width:820px){.hero .inner{grid-template-columns:1fr}.hero{padding-top:3.5rem}}
.hero h1{font-size:clamp(2.5rem,5.4vw,4rem);color:var(--cream);margin-bottom:1.2rem}
.hero h1 .look{color:var(--gold-light);font-style:italic}
.hero .promise{font-size:1.22rem;color:var(--on-navy-soft);max-width:34rem}
.hero .promise em{color:var(--on-navy)}
.hero .cover{width:min(340px,100%);height:auto;margin:0 auto;box-shadow:0 30px 70px rgba(0,0,0,.55);border-radius:3px}
@media(max-width:820px){.hero .cover{max-width:270px}}
.fireflies{position:absolute;inset:0;z-index:1;pointer-events:none}
.fireflies span{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 12px 4px rgba(200,169,81,.55);opacity:0;animation:glow 6s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:0}45%,55%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.fireflies span{opacity:.55;animation:none}}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--body);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:.95rem 1.9rem;border-radius:3px;margin-top:1.8rem;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold);color:var(--navy-deep);font-weight:600}
.btn--gold:hover{background:var(--gold-light)}
.btn--line{border:1.5px solid var(--gold);color:var(--gold-light)}
.btn--line-dark{border:1.5px solid var(--navy);color:var(--navy)}
.btn+.btn{margin-left:.9rem}
@media(max-width:520px){.btn+.btn{margin-left:0}}
.textlink{color:inherit}
.band--navy .textlink,.band--deep .textlink{color:var(--gold-light)}

/* ---------- quotes ---------- */
blockquote{border-left:3px solid var(--gold);padding-left:1.4rem;margin:1.8rem 0;font-style:italic;font-size:1.16rem}
blockquote cite{display:block;font-style:normal;font-size:.98rem;margin-top:.7rem;color:var(--ink-soft)}
.band--navy blockquote cite,.band--deep blockquote cite{color:var(--on-navy-soft)}

/* ---------- cards / grids ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.4rem}
@media(max-width:820px){.cards{grid-template-columns:1fr}}
.card{background:rgba(255,255,255,.55);border:1px solid rgba(27,42,74,.12);border-radius:4px;padding:1.8rem}
.band--navy .card,.band--deep .card{background:rgba(255,255,255,.05);border-color:rgba(200,169,81,.3)}
.card h3{font-size:1.4rem;margin:.35rem 0 .6rem}
.card .eyebrow{margin-bottom:.2rem}

/* ---------- forms ---------- */
form.inquiry{display:grid;gap:1rem;max-width:34rem;margin-top:1.6rem}
form.inquiry label{display:grid;gap:.35rem;font-size:1rem}
form.inquiry input,form.inquiry select,form.inquiry textarea{font-family:var(--body);font-size:1.05rem;padding:.7rem .8rem;border:1px solid rgba(27,42,74,.35);border-radius:3px;background:#fff;color:var(--ink)}
form.inquiry textarea{min-height:8rem;resize:vertical}
form.inquiry button{justify-self:start;cursor:pointer;border:none}
.hidden{display:none}
.ml-embedded{margin-top:1.4rem}

/* ---------- footer ---------- */
footer{background:var(--navy-deep);color:var(--on-navy-soft);padding:3.5rem 1.4rem}
footer .inner{max-width:1060px;margin:0 auto;display:grid;gap:1.6rem}
footer nav{display:flex;gap:1.3rem;flex-wrap:wrap}
footer a{color:var(--on-navy);text-decoration:none}
footer a:hover{color:var(--gold-light)}
footer .signoff{font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--cream)}
footer .fine{font-size:.92rem}

/* ---------- page heroes (interior) ---------- */
.pagehero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:var(--on-navy);padding:4.5rem 1.4rem}
.pagehero .inner{max-width:1060px;margin:0 auto}
.pagehero h1{font-size:clamp(2.2rem,4.5vw,3.3rem);color:var(--cream);max-width:22ch}
.credstrip{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.4rem;font-size:.95rem;letter-spacing:.05em;color:var(--on-navy-soft)}