/* ==========================================================================
   Illuminated Wealth Inc. — Site Design System (v4)
   Navy / Gold / Cream / Slate — Cormorant Garamond (headings) + Avenir Next (body)

   V4 visual principle:
     Logo = brand. Photography = real estate. Typography = sophistication.
     Color = atmosphere. Whitespace = restraint.

   This pass removes every illustrated stand-in device from v3 (the skyline
   silhouette, the facade-grid panel, the blueprint texture, the route/territory
   line) in favor of real photography. Because photography has not been
   supplied yet, sections that will eventually hold a photograph use a plain,
   flat, correctly-proportioned "photo area" (see .photo-area below) rather
   than any decorative graphic, gradient, icon, or watermark — the composition
   is designed to work on layout, typography, color and whitespace alone, so
   the photo elevates it later rather than rescuing it.

   Photography subject matter (see index.html comments on each .photo-area
   for the specific brief): Class B / workforce garden-style multifamily and
   manufactured housing communities — not office, industrial, retail,
   farmland, vacant land, or generic luxury-apartment marketing imagery.

   Gold stays scarce: the CTA button, the numeral system, and a handful of
   signature hairlines/accents. Never a default color.

   All gradients have been flattened to solid colors. A very restrained grain
   texture (assets/img/grain.png, via the .grain utility) still sits over navy
   sections for a trace of material depth — intentionally barely perceptible.
   ========================================================================== */

:root{
  --navy:#0f2a44;
  --navy-deep:#0a1d30;
  --navy-soft:#173250;
  --cream:#faf7f2;
  --cream-dim:#efece7;
  --slate:#4b5563;
  --light-gray:#e6e8eb;
  --gold:#c9a227;
  --gold-light:#d9be68;
  --line-on-navy: rgba(250,247,242,0.14);
  --line-on-cream: rgba(15,42,68,0.13);
  --serif:'Cormorant Garamond','Times New Roman',serif;
  --sans:'Avenir Next','Avenir','Segoe UI',Helvetica,Arial,sans-serif;
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--cream);
  color:var(--navy);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.1; margin:0; letter-spacing:-0.01em;}
p{margin:0;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 6vw;}
section{padding:7rem 0;}
@media (max-width:760px){ section{padding:4.5rem 0;} }

/* ---------------- Type system ---------------- */
.eyebrow{
  font-family:var(--sans); font-size:0.68rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--slate); font-weight:600; margin-bottom:1.1rem; display:block;
}
.bg-navy .eyebrow, .hero-copy .eyebrow{color:#9099a6;}
.rule{width:44px; height:1px; background:var(--line-on-cream); margin:1.7rem 0;}
.bg-navy .rule{background:var(--line-on-navy);}
.rule-gold{background:var(--gold);}
.section-title{font-size:clamp(2.2rem,4.2vw,3.5rem); line-height:1.06; max-width:760px;}
.dek{font-size:1.05rem; color:var(--slate); max-width:600px; line-height:1.7;}
.bg-navy .dek{color:#b7bcc4;}
.meta{font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate);}

/* ---------------- Texture ----------------
   A single restrained grain layer for sections that want a trace of material
   depth. Kept deliberately faint (v3 was 0.55; v4 is 0.08 — barely visible,
   not a texture effect you'd notice unless you looked for it). */
.grain{position:relative;}
.grain::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url('assets/img/grain.png'); background-repeat:repeat; background-size:220px;
  opacity:0.08; mix-blend-mode:overlay;
}

/* ---------------- Photography areas ----------------
   Real photography now lives here as plain <img> elements — no gradients, no
   patterns, no icons, no logo watermarks, no captions. Each keeps the exact
   proportion established in V4; .photo-area still carries a flat background
   color as a fallback (visible only before the image loads). Two variants:
   the default (flat navy) for full-bleed/dark editorial photo moments
   (Hero); --inset (flat light gray) for photo moments set within cream
   sections (Services). */
.photo-area{background:var(--navy); width:100%; height:100%; object-fit:cover; display:block;}
.photo-area--inset{background:var(--light-gray);}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--sans); font-size:0.8rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  padding:1rem 1.9rem; border-radius:1px; border:1px solid transparent; cursor:pointer; transition:all .2s ease;
}
.btn-gold{background:var(--gold); color:var(--navy-deep);}
.btn-gold:hover{background:var(--gold-light);}
.btn-outline{border-color:rgba(250,247,242,0.4); color:var(--cream);}
.btn-outline:hover{border-color:var(--gold); color:var(--gold-light);}
.btn-outline-navy{border-color:rgba(15,42,68,0.3); color:var(--navy);}
.btn-outline-navy:hover{border-color:var(--gold); color:var(--gold);}

/* ---------------- Header / Nav ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,29,48,0.94); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-on-navy);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0;}
/* Logo lockup is a stacked composition (lighthouse mark, then wordmark, then
   tagline). At 84px the lighthouse was recognizable but "ILLUMINATED WEALTH"
   itself rendered under 8px tall and was effectively unreadable — the
   lighthouse was carrying the brand alone. 136px brings the wordmark up to a
   genuinely legible size at normal viewing distance while keeping the header
   editorial rather than a logo banner. */
.brandmark{display:flex; align-items:center; color:var(--cream);}
.brandmark .logo-lockup{height:136px; width:auto; display:block;}
@media (max-width:560px){ .brandmark .logo-lockup{height:92px;} }
.nav-links{display:flex; align-items:center; gap:2.1rem;}
.nav-links a{
  font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:#b7bcc4; font-weight:600;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--gold-light);}
.nav-links .btn{margin-left:0.4rem;}
.nav-toggle{display:none; background:none; border:none; color:var(--cream); font-size:1.6rem; cursor:pointer;}
@media (max-width:860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--navy-deep);
    flex-direction:column; align-items:flex-start; gap:0; padding:0.5rem 6vw 1.5rem;
    border-bottom:1px solid var(--line-on-navy);
    display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:0.9rem 0; width:100%; border-bottom:1px solid var(--line-on-navy);}
  .nav-links .btn{margin:1rem 0 0; width:100%; justify-content:center;}
  .nav-toggle{display:block;}
}

/* ---------------- Hero ----------------
   A hard-edge, two-part composition: a solid navy panel carrying the brand
   statement, set directly against a photo area with no gradient transition
   between them. This is one of the two sanctioned photography treatments
   ("full bleed" or "split with navy") described in the v4 brief — chosen here
   because it keeps the opening moment on-brand (navy) even before the photo
   exists, and reads as a confident, intentional edit rather than an empty box. */
.hero{position:relative; display:grid; grid-template-columns:0.92fr 1.08fr; min-height:92vh;}
.hero-copy{background:var(--navy-deep); color:var(--cream); display:flex; align-items:center; padding:4rem 0; position:relative; overflow:hidden;}
/* The lighthouse mark as an architectural watermark — large, tonal, anchored
   behind and around the headline so it reads immediately as a lighthouse
   rather than a faint background texture. Sits behind the copy (z-index:1,
   below .hero-copy-inner's z-index:3). Uses the actual supplied mark asset
   at low-but-legible opacity — not a redraw, not a new graphic. */
.hero-watermark{
  position:absolute; z-index:1; pointer-events:none;
  right:2%; bottom:-10%; height:100%; width:auto;
  opacity:0.2;
}
.hero-copy-inner{max-width:540px; padding:0 4vw 0 6vw; position:relative; z-index:3;}
.hero h1{font-size:clamp(2.4rem,4vw,3.7rem); color:var(--cream); line-height:1.1; font-weight:500;}
.hero .dek{font-size:1.06rem; margin-top:1.5rem; max-width:460px; color:#c3c8ce;}
.hero .btn-row{margin-top:2.4rem;}
.hero-focus{
  font-family:var(--sans); font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold-light); font-weight:600; margin-top:1.5rem;
}
/* Company-name identifier, distinct from the generic .eyebrow used for
   section labels elsewhere on the site — sized and colored to read as the
   brand identity, not a muted section tag. */
.hero-brand{
  font-family:var(--sans); font-size:0.98rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--cream); font-weight:700; margin-bottom:1.1rem; display:block;
}
.hero-photo{min-height:340px;}
@media (max-width:900px){
  .hero{grid-template-columns:1fr; min-height:auto;}
  .hero-copy{padding:6.5rem 0 3rem;}
  .hero-copy-inner{margin-left:0; padding:0 6vw;}
  .hero-photo{min-height:260px;}
}

/* ---------------- Split / editorial layout utilities ---------------- */
.split{display:grid; gap:3.5rem;}
.split-60-40{grid-template-columns:1.5fr 1fr;}
.split-40-60{grid-template-columns:1fr 1.5fr;}
.split-45-55{grid-template-columns:0.95fr 1.15fr;}
@media (max-width:900px){ .split{grid-template-columns:1fr !important; gap:2.4rem;} }

/* ---------------- Philosophy ----------------
   Primarily editorial / typographic, by design — no photography in this
   section. Judgment carried by whitespace, the large pull-quote, and a
   single supporting paragraph, not an image. */
.philosophy-block{max-width:760px;}
.pullquote{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(2rem,3.6vw,3rem); line-height:1.28; color:var(--navy); margin:0;
}
.bg-navy .pullquote{color:var(--cream);}
.philosophy-support{margin-top:1.8rem; max-width:600px;}
.philosophy-support p{color:var(--slate); font-size:1rem; line-height:1.8;}

/* ---------------- Specialization ---------------- */
.spec-grid{grid-template-columns:1fr 1fr;}
.spec-block{border-top:1px solid var(--line-on-cream); padding-top:1.4rem;}
.spec-label{
  font-family:var(--sans); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:0.9rem; display:block;
}
.spec-block h3{font-size:1.35rem; margin-bottom:0.7rem;}
.spec-block p{color:var(--slate); font-size:0.95rem; line-height:1.75; max-width:440px;}
.spec-differentiator{
  margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line-on-cream);
  color:var(--slate); font-size:0.95rem; line-height:1.75; max-width:720px;
}
.spec-differentiator strong{color:var(--navy); font-weight:600;}

/* ---------------- Testimonial ---------------- */
.testimonial-block{max-width:740px;}
.testimonial-block .pullquote{font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.42;}
.testimonial-attribution{margin-top:1.8rem;}
.testimonial-attribution .name{font-family:var(--sans); font-size:0.85rem; font-weight:700; color:var(--navy); letter-spacing:0.02em;}
.testimonial-attribution .role{display:block; font-size:0.78rem; color:var(--slate); margin-top:0.2rem;}

/* ---------------- What We Do — photo area + stacked rows ---------------- */
.services-grid{grid-template-columns:0.85fr 1.7fr;}
.services-photo{min-height:420px;}
@media (max-width:900px){ .services-photo{min-height:280px;} }

.service-row{display:grid; grid-template-columns:64px 1fr; gap:1.4rem; padding:1.8rem 0; border-top:1px solid var(--line-on-cream);}
.service-row:last-child{border-bottom:1px solid var(--line-on-cream);}
.service-row .sn{font-family:var(--serif); font-size:clamp(1.8rem,2.8vw,2.3rem); color:var(--gold); line-height:1;}
.service-row h3{font-size:1.25rem; margin-bottom:0.5rem;}
.service-row p{color:var(--slate); font-size:0.93rem; line-height:1.65; max-width:460px;}

/* ---------------- Our Approach ----------------
   Typography, spacing, and a subtle rule system carry this section — no
   background texture. */
.process-strip{width:100%; margin-top:2.6rem; border-top:1px solid var(--line-on-navy); padding-top:2.4rem;}
.process-list{display:grid; grid-template-columns:repeat(5,1fr); gap:1.8rem;}
@media (max-width:900px){ .process-list{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .process-list{grid-template-columns:1fr;} }
.process-step .pn{font-family:var(--serif); color:var(--gold); font-size:clamp(2rem,3.4vw,2.7rem); display:block; margin-bottom:0.9rem; line-height:1;}
.process-step h4{font-size:1.05rem; margin-bottom:0.5rem; color:var(--cream); letter-spacing:0.01em;}
.process-step p{font-size:0.86rem; color:#a9aeb6; line-height:1.6;}

/* ---------------- Sections bg variants ---------------- */
.bg-navy{background:var(--navy); color:var(--cream);}
.bg-cream{background:var(--cream); color:var(--navy);}
.bg-cream-dim{background:var(--cream-dim); color:var(--navy);}

/* ---------------- Track record (Sean O'Brian's cumulative experience) ----------------
   Verified credibility figures + a small set of representative closed
   transactions from Sean O'Brian's career prior to founding Illuminated
   Wealth Inc. Deliberately simple — three stats, then a short list of named
   transactions with no photos, no descriptions, no grid of cards. This is
   distinct from the reserved "Representative Experience" architecture below
   (assets/js/transactions.js), which stays empty until Illuminated Wealth
   Inc. itself has verified, signed transactions of its own. */
.stat-row{
  display:flex; flex-wrap:wrap; gap:3rem 4rem; align-items:baseline;
  margin-top:2rem; padding-top:2rem; border-top:1px solid var(--line-on-cream);
}
.stat{min-width:140px;}
.stat-figure{font-family:var(--serif); font-size:clamp(2.4rem,4.2vw,3.4rem); color:var(--gold); line-height:1;}
.stat-label{font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); margin-top:0.5rem;}
.stat-focus-line{font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--navy); line-height:1.7;}

.repexp-grid-simple{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:2.6rem;}
@media (max-width:900px){ .repexp-grid-simple{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .repexp-grid-simple{grid-template-columns:1fr;} }
.repexp-row{border-top:1px solid var(--line-on-cream); padding-top:1.1rem;}
.repexp-row h4{font-size:1.02rem; margin-bottom:0.4rem; line-height:1.3;}
.repexp-row .loc{font-size:0.82rem; color:var(--slate); margin-bottom:0.4rem;}
.repexp-row .metrics{font-size:0.82rem; color:var(--navy); letter-spacing:0.02em;}

/* ---------------- Representative Experience (reserved, not shown) ---------------- */
.spread-grid{grid-template-columns:1fr 1.15fr;}
.repexp-empty p{color:var(--slate); font-size:0.98rem; line-height:1.75; max-width:420px;}
.repexp-grid{display:grid; gap:1.8rem; margin-top:0.5rem;}
.repexp-card{border-top:1px solid var(--line-on-cream); padding-top:1.2rem;}
.repexp-card .photo{width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--light-gray); margin-bottom:1rem;}
.repexp-card .tag{font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate); margin-bottom:0.4rem; display:block;}
.repexp-card h4{font-size:1.1rem; margin-bottom:0.3rem;}
.repexp-card .loc{font-size:0.82rem; color:var(--slate); margin-bottom:0.6rem;}
.repexp-card p{font-size:0.88rem; color:var(--slate); line-height:1.6;}
.repexp-card .metrics{margin-top:0.7rem; font-size:0.78rem; color:var(--navy); letter-spacing:0.03em;}

/* ---------------- Markets (full-bleed, dark, photo-led) ---------------- */
.geo-band{position:relative; padding:7.5rem 0; color:var(--cream); background:var(--navy-deep);}
.geo-band .geo-name{font-size:clamp(2.2rem,4.4vw,3.4rem); color:var(--cream); max-width:760px; line-height:1.08; margin-top:2.6rem;}
.markets-photo{aspect-ratio:21/9; margin-bottom:0;}
@media (max-width:700px){ .markets-photo{aspect-ratio:4/3;} }

/* ---------------- Principal ---------------- */
.principal-grid{align-items:center;}
.principal-photo{width:100%; aspect-ratio:4/5; object-fit:cover; filter:saturate(0.94) contrast(1.02) grayscale(0.08);}
.principal-copy .pullquote{font-size:clamp(1.9rem,3vw,2.5rem);}
.principal-copy p.dek{margin-top:1.4rem; max-width:440px;}

/* ---------------- CTA banner ---------------- */
.cta-banner{position:relative; background:var(--navy-deep); color:var(--cream); text-align:left; padding:6.5rem 0;}
.cta-banner .wrap{position:relative; z-index:3;}
.cta-banner h2{font-size:clamp(2.1rem,4vw,3.2rem); color:var(--cream); margin-bottom:1.8rem; max-width:640px;}

/* ---------------- Footer ---------------- */
footer{background:var(--navy-deep); color:#9aa3ad; padding:4rem 0 2rem; font-size:0.85rem;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--line-on-navy);}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand .brandmark{margin-bottom:1.2rem;}
.footer-brand .logo-lockup{height:170px;}
@media (max-width:560px){ .footer-brand .logo-lockup{height:120px;} }
.footer-brand p{max-width:320px; color:#8891a0; font-size:0.85rem;}
.footer-col h5{font-family:var(--sans); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:#8891a0; margin-bottom:1rem; font-weight:600;}
.footer-col a, .footer-col p{display:block; color:#9aa3ad; margin-bottom:0.6rem;}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:1.6rem; flex-wrap:wrap; gap:0.8rem; font-size:0.76rem; color:#6d7580;}

/* ---------------- About page ---------------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:3rem;}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr;} }
.serve-col h3{font-size:1.15rem; margin-bottom:0.6rem;}
.serve-col p{color:var(--slate); font-size:0.92rem;}
.about-hero{position:relative;}
.credential-row{display:flex; gap:2.5rem; flex-wrap:wrap; margin-top:2.2rem;}
.credential-row .item{border-left:1px solid var(--gold); padding-left:0.9rem;}
.credential-row .item .v{font-family:var(--serif); font-size:1.05rem; color:var(--navy);}
.credential-row .item .l{font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate); margin-top:0.25rem;}

.about-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:3.8rem; align-items:start; margin-top:1rem;}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr;} }
.about-photo{width:100%; aspect-ratio:4/5; object-fit:cover; filter:saturate(0.94) contrast(1.02) grayscale(0.08);}
.bio-copy p{color:var(--slate); font-size:1rem; line-height:1.8; margin-bottom:1.2rem;}
.bio-copy p:last-child{margin-bottom:0;}
.bio-copy p:first-child::first-letter{
  font-family:var(--serif); font-size:3.4rem; float:left; line-height:0.8; padding:0.1rem 0.5rem 0 0; color:var(--navy);
}

/* ---------------- Contact page ---------------- */
.contact-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:4rem; align-items:start;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info .row{display:flex; gap:0.9rem; padding:1.1rem 0; border-top:1px solid var(--line-on-cream);}
.contact-info .row:last-child{border-bottom:1px solid var(--line-on-cream);}
.contact-info .row .k{width:110px; flex-shrink:0; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate); padding-top:0.15rem;}
.contact-info .row .v{font-size:0.98rem; color:var(--navy);}
.contact-info .row .v a:hover{color:var(--gold);}

form.iw-form{display:grid; gap:1.3rem;}
form.iw-form[hidden]{display:none;}
.iw-form .field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.3rem;}
@media (max-width:560px){ .iw-form .field-row{grid-template-columns:1fr;} }
.iw-form label{display:block; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate); margin-bottom:0.5rem; font-weight:600;}
.iw-form input, .iw-form select, .iw-form textarea{
  width:100%; padding:0.85rem 0.9rem; border:1px solid var(--line-on-cream); background:#fff; color:var(--navy);
  font-family:var(--sans); font-size:0.95rem; border-radius:1px; outline:none; transition:border-color .2s ease;
}
.iw-form input:focus, .iw-form select:focus, .iw-form textarea:focus{border-color:var(--gold);}
.iw-form textarea{resize:vertical; min-height:120px;}
.iw-form .honeypot{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}
.iw-form .disclaimer{font-size:0.78rem; color:var(--slate); opacity:0.85; margin-top:0.2rem;}
.iw-form .form-status{font-size:0.85rem; color:#8a3f35; line-height:1.6;}
.iw-form button:disabled{cursor:wait; opacity:0.7;}
.form-success{border-top:1px solid var(--gold); padding-top:1.8rem;}
.form-success h2{font-size:clamp(2rem,4vw,2.8rem); margin:0.7rem 0 0.8rem;}
.form-success p{max-width:520px; color:var(--slate); line-height:1.75;}

/* ---------------- Utility ---------------- */
.center{text-align:center;}
.mt-lg{margin-top:3rem;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--navy); padding:0.6rem 1rem; z-index:200;}
.skip-link:focus{left:1rem; top:1rem;}