/* ============================================================
   AQUARIAN VISION MARKETING — site styles
   Design system: art-deco luxury (navy / gold / cream),
   editorial serif display + clean sans body + script accent.
   ============================================================ */

:root{
  --ink:#13202e;
  --navy:#1b2c40;
  --navy-soft:#243750;
  --gold:#c19a4b;
  --gold-light:#ddc187;
  --cream:#f6f1e7;
  --white:#fbf8f2;
  --text:#33312c;
  --muted:#6f6a5f;
  --line:#e4dcca;
  --shadow:0 18px 50px -20px rgba(19,32,46,.45);
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  color:var(--ink);
  margin:0;
  line-height:1.08;
  letter-spacing:.4px;
}
h1{font-size:clamp(2.6rem,6vw,4.6rem);}
h2{font-size:clamp(2rem,4vw,3.1rem);}
h3{font-size:clamp(1.4rem,2.4vw,1.9rem);}
p{margin:0 0 1.1em;}

.script{
  font-family:"Pinyon Script",cursive;
  font-weight:400;
  color:var(--gold);
  letter-spacing:0;
  line-height:1;
}
.eyebrow{
  font-family:"Jost",sans-serif;
  text-transform:uppercase;
  letter-spacing:.42em;
  font-size:.72rem;
  font-weight:500;
  color:var(--gold);
  margin:0 0 1.1rem;
}
.lede{font-size:1.18rem;color:var(--muted);max-width:48ch;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
section{padding:clamp(64px,9vw,128px) 0;}
.center{text-align:center;margin-left:auto;margin-right:auto;}
.center .lede{margin-left:auto;margin-right:auto;}

.rule{width:64px;height:1px;background:var(--gold);border:0;margin:1.4rem 0;}
.center .rule{margin-left:auto;margin-right:auto;}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,248,242,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;}
.brand{display:flex;flex-direction:column;line-height:1;}
.brand b{
  font-family:"Cormorant Garamond",serif;
  font-weight:600;font-size:1.34rem;letter-spacing:.12em;color:var(--ink);
}
.brand span{
  font-size:.58rem;letter-spacing:.46em;text-transform:uppercase;
  color:var(--gold);margin-top:4px;padding-left:.12em;
}
.nav-links{display:flex;gap:30px;align-items:center;}
.nav-links a{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.16em;color:var(--text);
  padding:6px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s;
}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink);border-color:var(--gold);}
.nav-toggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:"Jost",sans-serif;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.2em;padding:16px 34px;
  border:1px solid var(--gold);color:var(--ink);background:transparent;
  transition:background .25s,color .25s;cursor:pointer;
}
.btn:hover{background:var(--gold);color:var(--white);}
.btn-solid{background:var(--gold);color:var(--white);}
.btn-solid:hover{background:var(--ink);border-color:var(--ink);}
.btn-on-dark{color:var(--white);border-color:var(--gold-light);}
.btn-on-dark:hover{background:var(--gold-light);color:var(--ink);}
.txtlink{
  display:inline-block;font-size:.8rem;text-transform:uppercase;letter-spacing:.18em;
  color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:3px;margin-left:6px;
}
.txtlink:hover{color:var(--ink);border-color:var(--gold);}
.cta-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.center .cta-row{justify-content:center;}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;}
.hero-dark{background:var(--ink);color:var(--cream);}
.hero-dark h1{color:var(--cream);}
.hero-dark .lede{color:#c9c4b6;}
.hero-cream{background:
  radial-gradient(120% 90% at 50% -10%, #fffdf7 0%, var(--cream) 55%, #efe7d4 100%);}
.hero-inner{padding:clamp(84px,14vw,168px) 0;}
.hero .script{font-size:clamp(2.4rem,5vw,3.6rem);display:block;margin-bottom:.1em;}
.glow::before{
  content:"";position:absolute;inset:auto;left:50%;top:8%;
  width:560px;height:560px;transform:translateX(-50%);
  background:radial-gradient(circle, rgba(193,154,75,.22), transparent 62%);
  pointer-events:none;
}

/* ---------- framed showcase (echoes the portfolio photo frames) ---------- */
.frame{
  background:#0d0d0d;padding:14px;box-shadow:var(--shadow);
  border-radius:2px;
}
.frame img{border-radius:1px;width:100%;}
.frame-cap{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
  margin-top:14px;text-align:center;
}

/* ---------- proof strip / grids ---------- */
.grid{display:grid;gap:30px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,84px);align-items:center;}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.card{
  background:var(--white);border:1px solid var(--line);padding:40px 32px;
  transition:transform .25s,box-shadow .25s;position:relative;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card .tier{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);}
.card h3{margin:14px 0 10px;}
.card p{font-size:.96rem;color:var(--muted);}

/* ---------- before/after rows ---------- */
.ba-row{margin-top:clamp(40px,6vw,72px);}
.ba-row .frame img{width:100%;}
.ba-meta{margin-top:18px;text-align:center;}
.ba-meta h3{margin-bottom:4px;}
.ba-meta span{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}

/* ---------- arrow motif (brand vernacular: before -> after) ---------- */
.arrow{display:block;margin:8px auto;width:120px;height:auto;color:var(--gold);}

/* ---------- alt section bg ---------- */
.bg-cream{background:var(--cream);}
.bg-navy{background:var(--ink);color:var(--cream);}
.bg-navy h2,.bg-navy h3{color:var(--cream);}
.bg-navy .lede{color:#c9c4b6;}
.bg-navy .eyebrow{color:var(--gold-light);}

/* ---------- callout / notice ---------- */
.notice{
  border:1px dashed var(--gold);background:rgba(193,154,75,.08);
  padding:14px 18px;font-size:.84rem;color:var(--muted);border-radius:3px;
}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#c9c4b6;padding:72px 0 36px;}
.footer h2{color:var(--cream);}
.footer .ftcols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-top:40px;}
.footer a{color:#c9c4b6;}
.footer a:hover{color:var(--gold-light);}
.footer .ftnav{display:flex;flex-direction:column;gap:10px;font-size:.86rem;}
.footer .legal{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.74rem;letter-spacing:.08em;color:#8a8678;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .grid-3,.cards{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .nav-links{
    position:absolute;top:74px;left:0;right:0;background:var(--white);
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;
    padding:8px 28px 20px;display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
}