/* =========================================================
   Woodson Andrews — Design Tokens
   Palette (drawn directly from the Woodson Andrews logo):
     --ink        #262262  brand navy — logo wordmark color,
                            now the site's primary dark
     --ink-2      #322C7A  navy lightened, for gradients only
     --brand-gray #58585A  logo secondary color — muted text,
                            supporting UI on light backgrounds
     --brass      #B08D45  gold accent — not from the logo, kept
                            as the single warm accent for CTAs
     --brass-lt   #C9A968  accent hover
     --cream      #F3F1EC  light section background
     --slate      #22292F  body text on light
     --fog        #DCE3E7  muted text on dark
   Type:
     Display  — 'Source Serif 4' (headlines)
     Body     — 'IBM Plex Sans'
     Utility  — 'IBM Plex Mono' (eyebrows/labels)
   ========================================================= */

:root{
  --ink:#262262;
  --ink-2:#322C7A;
  --deep-blue:#4A4F9E;
  --brand-gray:#58585A;
  --brass:#B08D45;
  --brass-lt:#C9A968;
  --cream:#F3F1EC;
  --slate:#22292F;
  --fog:#DCE3E7;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--slate);
  background:var(--cream);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.15;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;}
a{color:inherit;}
img,svg{display:block;max-width:100%;}

.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 0.9em;
}
.eyebrow--light{color:var(--brass-lt);}

.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  font-size:0.95rem;
  padding:0.85em 1.7em;
  border-radius:2px;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn-solid{background:var(--brass); color:var(--ink);}
.btn-solid:hover{background:var(--brass-lt); transform:translateY(-1px);}
.btn-ghost{background:transparent; border:1.5px solid var(--fog); color:var(--fog);}
.btn-ghost:hover{border-color:var(--brass-lt); color:var(--brass-lt);}
.btn-text{background:none; padding:0.85em 0; color:var(--ink); font-weight:600; border-bottom:1.5px solid var(--brass);}
.btn-text:hover{color:var(--brass);}

/* =========================================================
   Header — solid ink bar guarantees logo contrast at all times
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(243,241,236,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(38,34,98,0.12);
}
.header-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; gap:2rem;
  padding:0.7rem 1.5rem;
}
.brand{
  display:flex; align-items:center;
  text-decoration:none;
  margin-right:auto;
}
.brand-logo{height:38px; width:auto; display:block;}
.brand--footer .brand-logo{height:34px;}
.site-nav{display:flex; gap:1.8rem;}
.site-nav a{
  color:var(--slate);
  text-decoration:none;
  font-size:0.95rem;
  font-weight:500;
  transition:color .2s ease;
}
.site-nav a:hover{color:var(--ink);}
.header-cta.btn-ghost{
  border-color:var(--ink);
  color:var(--ink);
}
.header-cta.btn-ghost:hover{
  border-color:var(--brass);
  color:var(--brass);
  background:transparent;
}
.header-cta{flex-shrink:0;}
.nav-toggle{display:none;}

.mobile-nav{
  display:none;
  flex-direction:column;
  background:var(--cream);
  padding:0.5rem 1.5rem 1.2rem;
}
.mobile-nav a{
  color:var(--slate); text-decoration:none; padding:0.6rem 0;
  border-top:1px solid rgba(38,34,98,0.1);
  font-size:1rem;
}
.mobile-nav.open{display:flex;}

@media (max-width: 820px){
  .site-nav, .header-cta{display:none;}
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:32px; height:32px; background:none; border:none; cursor:pointer;
  }
  .nav-toggle span{display:block; height:2px; width:100%; background:var(--ink);}
}

/* =========================================================
   Hero — layered parallax
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
  background:linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 55%, var(--deep-blue) 130%);
}
.hero-layer{position:absolute; inset:0; will-change:transform;}
.hero-layer--photo{
  background-image:url('assets/riverfront-hero.jpg');
  background-size:cover;
  background-position:center 60%;
  top:-10%; height:120%;
}
.hero-layer--overlay{
  background:linear-gradient(100deg,
    rgba(38,34,98,0.94) 0%,
    rgba(38,34,98,0.86) 32%,
    rgba(38,34,98,0.55) 62%,
    rgba(38,34,98,0.32) 100%);
}
.hero-layer--grain{
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:3px 3px;
}
.hero-content{
  position:relative; z-index:2;
  max-width:var(--max); width:100%;
  margin:0 auto; padding:7rem 1.5rem 4rem;
}
.hero h1{
  color:var(--cream);
  font-size:clamp(2.3rem, 5vw, 3.6rem);
  max-width:14ch;
}
.hero-sub{
  color:var(--fog);
  max-width:46ch;
  font-size:1.08rem;
}
.hero-actions{display:flex; align-items:center; gap:1.8rem; margin-top:2rem;}
.hero-actions .btn-text{color:var(--cream);}

.scroll-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  z-index:2;
}
.scroll-cue span{
  display:block; width:1px; height:40px;
  background:linear-gradient(var(--brass), transparent);
  animation:scrollpulse 1.8s ease-in-out infinite;
}
@keyframes scrollpulse{
  0%,100%{opacity:0.3;}
  50%{opacity:1;}
}

/* =========================================================
   About
   ========================================================= */
.about{padding:7rem 1.5rem;}
.about-inner{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:4rem; align-items:center;
}
.about-copy h2{font-size:clamp(1.8rem,3vw,2.4rem);}
.about-copy p{max-width:56ch; color:var(--slate);}
.about-visual{will-change:transform;}
.about-visual svg{width:100%; height:auto;}

/* Divider */
.divider{overflow:hidden; line-height:0; background:var(--cream); will-change:transform;}
.divider svg{width:100%; height:110px; display:block;}

/* =========================================================
   Services
   ========================================================= */
.services{
  position:relative;
  background:var(--ink);
  padding:6.5rem 1.5rem;
  overflow:hidden;
}
.services-bg{
  position:absolute; inset:-10% -10%;
  background-image:radial-gradient(circle at 30% 20%, rgba(176,141,69,0.08), transparent 40%),
                    radial-gradient(circle at 75% 80%, rgba(92,135,160,0.1), transparent 45%);
  will-change:transform;
}
.services-inner{position:relative; z-index:1; max-width:var(--max); margin:0 auto;}
.services h2{color:var(--cream); font-size:clamp(1.8rem,3vw,2.4rem); max-width:16ch;}
.service-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem; margin-top:3rem;
}
.service-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(220,227,231,0.12);
  border-radius:4px;
  padding:2rem 1.75rem;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.service-card:hover{
  border-color:rgba(176,141,69,0.45);
  transform:translateY(-3px);
  background:rgba(255,255,255,0.05);
}
.service-icon{color:var(--brass); margin-bottom:1.1rem;}
.service-icon svg{width:32px; height:32px;}
.service-card h3{color:var(--cream); font-size:1.15rem; margin-bottom:0.5em;}
.service-card p{color:var(--fog); font-size:0.95rem; margin:0;}

.service-card--photo{
  position:relative;
  background-image:
    linear-gradient(180deg, rgba(38,34,98,0.88) 0%, rgba(38,34,98,0.95) 70%),
    url('assets/cannon-duotone.jpg');
  background-size:cover;
  background-position:center 35%;
  border-color:rgba(220,227,231,0.16);
}
.service-card--photo:hover{
  background-image:
    linear-gradient(180deg, rgba(38,34,98,0.78) 0%, rgba(38,34,98,0.92) 70%),
    url('assets/cannon-duotone.jpg');
}

/* =========================================================
   Contact
   ========================================================= */
.contact{padding:7rem 1.5rem;}
.contact-inner{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:4rem;
}
.contact-copy h2{font-size:clamp(1.8rem,3vw,2.4rem);}
.contact-copy p{max-width:40ch;}
.contact-details{display:flex; flex-direction:column; gap:0.5rem; margin-top:1.5rem;}
.contact-details a{
  text-decoration:none; color:var(--deep-blue); font-weight:600;
}
.contact-details a:hover{color:var(--brass);}

.contact-form{
  background:#fff;
  border:1px solid #e2ddd2;
  border-radius:6px;
  padding:2rem;
  display:flex; flex-direction:column; gap:1.1rem;
}
.contact-form label{
  display:flex; flex-direction:column; gap:0.4rem;
  font-size:0.85rem; font-weight:600; color:#4a4f54;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-family:var(--sans);
  font-size:0.98rem;
  padding:0.7em 0.8em;
  border:1px solid #d7d2c6;
  border-radius:3px;
  background:var(--cream);
  color:var(--slate);
  resize:vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:2px solid var(--brass);
  outline-offset:1px;
}
.contact-form .btn{align-self:flex-start; margin-top:0.4rem;}
.form-note{font-size:0.85rem; color:#5b6670; margin:0;}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--ink);
  padding:3rem 1.5rem 2rem;
}
.footer-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  border-top:1px solid rgba(220,227,231,0.12);
  padding-top:2rem;
}
.brand--footer{margin-right:0;}
.footer-contact{display:flex; gap:0.7rem; color:var(--fog); font-size:0.9rem;}
.footer-contact a{text-decoration:none; color:var(--fog);}
.footer-contact a:hover{color:var(--brass-lt);}
.footer-copy{
  width:100%; margin:0; margin-top:1rem;
  font-size:0.8rem; color:#5f6c76;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .about-inner, .contact-inner{grid-template-columns:1fr; gap:2.5rem;}
  .about-visual{max-width:280px; margin:0 auto;}
  .service-grid{grid-template-columns:1fr;}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .hero-layer, .about-visual, .services-bg, .divider{transform:none !important;}
  .scroll-cue span{animation:none;}
}