/* ============================================================
   YourWebBuild — Shared Styles
   Linked on every page. Page-specific styles (hero, pricing
   cards, contact form, etc.) live in each file's own <style>
   block, layered on top of this.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --navy:#0b0f1a;--navy2:#111827;--navy3:#1a2235;
  --gold:#c9a84c;--gold2:#e8c96a;--white:#f0ece3;--muted:#8a97b0;--border:#ffffff14;
}
html{scroll-behavior:auto;overflow-x:hidden;}
body{background:var(--navy);color:var(--white);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-38px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.reveal-left.visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(38px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.reveal-right.visible{opacity:1;transform:translateX(0);}
.d1{transition-delay:.00s;}.d2{transition-delay:.12s;}.d3{transition-delay:.24s;}.d4{transition-delay:.36s;}.d5{transition-delay:.48s;}

/* Nav — identical on every page; only the active link differs */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 5%;background:rgba(11,15,26,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:padding .3s;}
nav.scrolled{padding:.8rem 5%;}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:700;color:var(--gold);}
.nav-links{display:flex;gap:2rem;}
.nav-links a{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .2s;position:relative;}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width .3s cubic-bezier(.22,1,.36,1);}
.nav-links a:hover{color:var(--gold);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--gold);}
.nav-links a.active::after{width:100%;}

.nav-right{display:flex;align-items:center;gap:1.25rem;position:relative;z-index:101;}

.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:26px;height:20px;background:none;border:none;cursor:pointer;padding:0;}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--gold);transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.btn{display:inline-block;padding:.75rem 1.8rem;border:1px solid var(--gold);color:var(--gold);font-family:'DM Sans',sans-serif;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .25s;background:transparent;}
.btn:hover{background:var(--gold);color:var(--navy);}
.btn-fill{background:var(--gold);color:var(--navy);font-weight:500;}
.btn-fill:hover{background:var(--gold2);border-color:var(--gold2);}

section{padding:6rem 5%;}
h2.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3rem);font-weight:600;color:var(--white);margin-bottom:1.5rem;line-height:2.8rem;}
.section-sub{font-size:.95rem;color:var(--muted);margin-bottom:3rem;}
.gold-line{display:block;width:0;height:2px;background:var(--gold);margin-bottom:1.5rem;transition:width .9s cubic-bezier(.22,1,.36,1);}
.gold-line.visible{width:40px;}

/* Subpage hero — Process / Pricing / About / Contact / Work all open this way */
.page-hero{padding:10rem 5% 4rem;text-align:center;position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 0%,#c9a84c0c 0%,transparent 70%);pointer-events:none;}
.hero-eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;opacity:0;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .2s forwards;}
.page-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.8rem,6vw,5rem);font-weight:700;line-height:1.08;margin-bottom:1.2rem;opacity:0;animation:fadeUp .8s cubic-bezier(.22,1,.36,1) .35s forwards;}
.page-title em{font-style:italic;color:var(--gold);}
.page-sub{font-size:1.05rem;color:var(--muted);max-width:560px;margin:0 auto 1.5rem;opacity:0;animation:fadeUp .8s cubic-bezier(.22,1,.36,1) .5s forwards;}
.gold-divider{width:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:2.5rem auto 0;animation:expandLine 1s cubic-bezier(.22,1,.36,1) .8s forwards;}
@keyframes expandLine{to{width:200px;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}

/* CTA band — closes out every subpage */
.cta-band{margin:0 5% 6rem;border:1px solid var(--border);background:var(--navy3);padding:3rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.cta-band-text h3{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:600;margin-bottom:.4rem;}
.cta-band-text p{font-size:.9rem;color:var(--muted);}

footer{padding:2rem 5%;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:700;color:var(--gold);}
.footer-copy{font-size:.8rem;color:var(--muted);}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap;}
.footer-links a{font-size:.8rem;color:var(--muted);}
.footer-links a:hover{color:var(--gold);}

@media(max-width:900px){
  .nav-toggle{display:flex;}

  /* backdrop-filter on nav makes nav the "containing block" for any
     position:fixed element inside it — including .nav-links. That
     traps the full-screen menu inside nav's own ~70px-tall box
     instead of the real viewport. Turning it off here is the fix. */
  nav{backdrop-filter:none;}

  .nav-links{
    position:fixed;
    inset:0;
    background:var(--navy);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2.2rem;
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s ease;
    z-index:90;
  }
  .nav-links.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav-links a{font-size:1.15rem;}
  .nav-links a::after{display:none;}
  body.nav-open{overflow:hidden;}
}
@media(max-width:640px){
  .cta-band{flex-direction:column;text-align:center;}
  .nav-right .btn-fill{padding:.6rem 1.1rem;font-size:.75rem;}
}