:root{
  --navy: #12213D;
  --navy-deep: #0A1526;
  --gold: #CC9A3E;
  --gold-soft: #E7C878;
  --teal: #3F7370;
  --bg: #F2F4F3;
  --card: #FFFFFF;
  --text: #17181F;
  --text-soft: #52596B;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{ font-family: var(--font-display); color: var(--navy); margin:0; }

.eyebrow{
  font-family: var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--teal);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(204,154,62,.25);
}

/* ===== Aperture ring signature ===== */
.aperture{
  position:absolute;
  border-radius:50%;
  border:1.5px dashed rgba(231,200,120,.45);
  pointer-events:none;
}
@keyframes spin-slow{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@media (prefers-reduced-motion: no-preference){
  .aperture.spin{ animation: spin-slow 60s linear infinite; }
}

/* ===== Navbar ===== */
.navbar-trendz{
  background: rgba(242,244,243,.98);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(18,33,61,.06);
  transition: box-shadow .35s ease, padding .35s ease;
  padding: 1.1rem 0;
}
.navbar-trendz.scrolled{
  box-shadow: 0 4px 24px rgba(18,33,61,.1);
  padding: .65rem 0;
}
.brand-mark{ display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.brand-mark svg{ width:50px; height:50px; }
.brand-word{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.55rem;
  color:var(--navy);
  line-height:1;
  letter-spacing:.01em;
}
.brand-word span{ display:block; font-family:var(--font-mono); font-size:.63rem; letter-spacing:.22em; color:var(--teal); text-transform:uppercase; margin-top:.34rem; font-weight:700; }

.nav-links{ gap: 2.3rem; }
.nav-links a{
  font-family: var(--font-body);
  font-weight:700;
  font-size:1rem;
  color: var(--navy);
  text-decoration:none;
  position:relative;
  padding: .3rem 0;
  letter-spacing:.01em;
}
.nav-links a::after{
  content:"";
  position:absolute; left:50%; bottom:-6px;
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  opacity:0; transform:translate(-50%,4px);
  transition: opacity .25s ease, transform .25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{ opacity:1; transform:translate(-50%,0); }
.nav-links a.active{ color: var(--gold); }

.phone-chip{
  display:flex; align-items:center; gap:.6rem;
  background: var(--navy);
  border:1px solid var(--navy);
  padding:.72rem 1.35rem;
  border-radius:999px;
  text-decoration:none;
  color:#F7F5EE;
  font-weight:700;
  font-size:1rem;
  box-shadow: 0 10px 24px rgba(18,33,61,.22);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.phone-chip i{ color:var(--gold-soft); font-size:1.15rem; }
.phone-chip:hover{ background: var(--navy-deep); color:#F7F5EE; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(18,33,61,.3); }

/* ===== Hero ===== */
.hero{
  position:relative;
  overflow:hidden;
  background: radial-gradient(1200px 600px at 78% 20%, #17294a 0%, var(--navy) 46%, var(--navy-deep) 100%);
  padding: 9.5rem 0 6.5rem;
}
.hero .aperture{ top:50%; left:82%; transform:translate(-50%,-50%); width:560px; height:560px; }
.hero .aperture.a2{ width:400px; height:400px; }
.hero .aperture.a3{ width:250px; height:250px; }
.hero-eyebrow{ color: var(--gold-soft); }
.hero-eyebrow::before{ background:var(--gold-soft); }
.hero h1{
  color:#F7F5EE;
  font-weight:600;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height:1.08;
  max-width: 12ch;
  margin: 1.1rem 0 1.4rem;
}
.hero h1 em{ font-style:normal; color: var(--gold-soft); }
.hero p.lead-text{
  color: rgba(247,245,238,.78);
  font-size:1.08rem;
  max-width: 44ch;
  margin-bottom: 2.2rem;
}
.btn-gold{
  background: var(--gold);
  border:1px solid var(--gold);
  color: var(--navy-deep);
  font-weight:700;
  padding:.85rem 1.7rem;
  border-radius:999px;
  transition: transform .2s ease, background .2s ease;
}
.btn-gold:hover{ background: var(--gold-soft); color:var(--navy-deep); transform: translateY(-2px); }
.btn-outline-hero{
  border:1px solid rgba(247,245,238,.4);
  color:#F7F5EE;
  padding:.85rem 1.7rem;
  border-radius:999px;
  font-weight:600;
  transition: border-color .2s ease, background .2s ease;
}
.btn-outline-hero:hover{ border-color:#F7F5EE; background: rgba(247,245,238,.08); color:#F7F5EE; }

.hero-stats{ margin-top: 3.4rem; padding-top: 2.1rem; border-top:1px solid rgba(247,245,238,.14); }
.hero-stats .stat b{ font-family: var(--font-display); font-size:1.9rem; color:#F7F5EE; display:block; }
.hero-stats .stat span{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: rgba(247,245,238,.55); }

.hero-visual{ position:relative; z-index:2; }
.lens-frame{
  position:relative;
  border-radius: 999px 999px 40px 40px / 999px 999px 30px 30px;
  overflow:hidden;
  border: 1px solid rgba(231,200,120,.35);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  aspect-ratio: 4/5;
}
.lens-frame img{ width:100%; height:100%; object-fit:cover; }
.lens-frame::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,21,38,0) 50%, rgba(10,21,38,.55) 100%);
}

/* ===== Section shell ===== */
section{ padding: 6.5rem 0; position:relative; }
.section-head{ max-width: 640px; margin-bottom: 3.2rem; }
.section-head h2{ font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight:600; margin-top:.7rem; line-height:1.15; }

/* ===== About ===== */
#about{ background: var(--card); }
.about-figure{ position:relative; }
.about-figure .frame{
  border-radius: 24px;
  overflow:hidden;
  box-shadow: 0 24px 50px rgba(18,33,61,.14);
}
.about-figure .frame img{ width:100%; display:block; }
.about-figure .aperture{ width:220px; height:220px; top:-40px; left:-40px; border-color: rgba(63,115,112,.4); }
.badge-est{
  position:absolute; right:-18px; bottom:-24px;
  background: var(--navy);
  color:#F7F5EE;
  width:120px; height:120px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  flex-direction:column;
  box-shadow: 0 14px 30px rgba(18,33,61,.35);
}
.badge-est b{ font-family:var(--font-display); font-size:1.15rem; }
.badge-est span{ font-family:var(--font-mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-soft); margin-top:.15rem; }

.about-copy p{ color: var(--text-soft); font-size:1.03rem; line-height:1.75; }
.value-row{ display:flex; gap:1rem; margin-top:2rem; }
.value-item{ flex:1; border-left:2px solid var(--gold); padding-left:1rem; }
.value-item b{ display:block; font-family:var(--font-display); color:var(--navy); font-size:1.05rem; }
.value-item span{ color:var(--text-soft); font-size:.88rem; }

/* ===== Services ===== */
#services{ background: var(--bg); }
.service-card{
  background: var(--card);
  border-radius: 20px;
  padding: 2.2rem 1.9rem;
  height:100%;
  border: 1px solid rgba(18,33,61,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
  overflow:hidden;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(18,33,61,.12); border-color: rgba(204,154,62,.35); }
.service-icon{
  width:56px; height:56px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: var(--navy);
  color: var(--gold-soft);
  font-size:1.4rem;
  margin-bottom:1.3rem;
}
.service-card h3{ font-size:1.18rem; font-weight:600; margin-bottom:.6rem; }
.service-card p{ color: var(--text-soft); font-size:.94rem; line-height:1.65; margin-bottom:0; }

/* ===== Testimonials ===== */
#testimonials{ background: var(--navy); position:relative; overflow:hidden; }
#testimonials .aperture{ border-color: rgba(231,200,120,.18); }
#testimonials .aperture.t1{ width:480px; height:480px; top:-160px; left:-160px; }
#testimonials .aperture.t2{ width:340px; height:340px; bottom:-140px; right:-100px; }
#testimonials .section-head h2{ color:#F7F5EE; }
#testimonials .eyebrow{ color:var(--gold-soft); }
#testimonials .eyebrow::before{ background:var(--gold-soft); }

.testi-card{
  background: rgba(247,245,238,.05);
  border: 1px solid rgba(247,245,238,.12);
  border-radius: 20px;
  padding: 2.2rem;
  height:100%;
  backdrop-filter: blur(6px);
}
.testi-quote-mark{
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--gold);
  line-height:1;
  display:block;
  margin-bottom: .5rem;
}
.testi-card p.quote{ color: rgba(247,245,238,.85); font-size: 1rem; line-height:1.7; min-height: 110px; }
.testi-person{ display:flex; align-items:center; gap:.8rem; margin-top:1.4rem; }
.testi-avatar{
  width:44px; height:44px; border-radius:50%;
  background: var(--gold);
  color: var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700;
}
.testi-person b{ color:#F7F5EE; display:block; font-size:.92rem; }
.testi-person span{ color: rgba(247,245,238,.55); font-size:.78rem; font-family: var(--font-mono); }
.stars{ color: var(--gold-soft); font-size:.8rem; letter-spacing:.15em; }

/* ===== Footer ===== */
footer{ background: var(--navy-deep); color: rgba(247,245,238,.75); padding: 5rem 0 0; }
footer h4{ color:#F7F5EE; font-size:1.05rem; margin-bottom:1.1rem; }
footer .brand-word{ color:#F7F5EE; }
footer .brand-word span{ color: var(--gold-soft); }
.footer-lead{ color: rgba(247,245,238,.55); font-size:.92rem; max-width: 34ch; margin-top:1rem; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.75rem; }
.footer-links a{ color: rgba(247,245,238,.7); text-decoration:none; font-size:.92rem; transition: color .2s ease; }
.footer-links a:hover{ color: var(--gold-soft); }
.footer-contact li{ display:flex; gap:.7rem; margin-bottom:1rem; font-size:.92rem; color: rgba(247,245,238,.75); }
.footer-contact i{ color: var(--gold); margin-top:.2rem; }
.map-frame{ border-radius:16px; overflow:hidden; border:1px solid rgba(247,245,238,.14); filter: grayscale(.2) contrast(1.05); }
.map-frame iframe{ width:100%; height:230px; border:0; display:block; }
.social-row a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(247,245,238,.2);
  display:inline-flex; align-items:center; justify-content:center;
  color:#F7F5EE; text-decoration:none; margin-right:.6rem;
  transition: border-color .2s ease, background .2s ease;
}
.social-row a:hover{ border-color: var(--gold); background: rgba(204,154,62,.12); }
.footer-bottom{
  margin-top: 3.5rem;
  border-top: 1px solid rgba(247,245,238,.1);
  padding: 1.4rem 0;
  font-size:.82rem;
  color: rgba(247,245,238,.45);
}

/* ===== WordPress core alignment / caption helpers ===== */
.alignleft{ float:left; margin:.4rem 1.5rem 1rem 0; }
.alignright{ float:right; margin:.4rem 0 1rem 1.5rem; }
.aligncenter{ display:block; margin:1rem auto; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:.85rem; color:var(--text-soft); text-align:center; margin-top:.4rem; }
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* ===== Generic page/post content (page.php, single.php) ===== */
.page-content-wrap{ padding: 10rem 0 6rem; }
.page-content-wrap h1.page-title{ font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 2rem; }
.page-content-wrap .entry-content{ color: var(--text-soft); font-size:1.05rem; line-height:1.8; max-width: 780px; }
.page-content-wrap .entry-content img{ max-width:100%; height:auto; border-radius:14px; }
.page-content-wrap .entry-meta{ font-family: var(--font-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--teal); margin-bottom:1rem; }

/* mobile menu tweak */
@media (max-width: 991.98px){
  .navbar-trendz{ background: rgba(242,244,243,.97); padding: .9rem 0; }
  .nav-links{ gap: 0; margin-top: 1rem; }
  .nav-links a{ padding: .65rem 0; display:block; border-bottom: 1px solid rgba(18,33,61,.08); }
  .phone-chip{ margin-top: 1rem; width:fit-content; }
  .hero{ padding: 7.5rem 0 4rem; text-align:center; }
  .hero .btns{ justify-content:center; }
  .hero p.lead-text{ margin-left:auto; margin-right:auto; }
  .hero-stats{ justify-content:center; text-align:center; }
  .badge-est{ right: 8px; bottom:-18px; }
}