/* ----------------------------------
   style.css / Version: 1.0
   Table of Contents
   01. Local Fonts ............................... line 27
   02. Root Variables ............................ line 85
   03. Reset & Base .............................. line 107
   04. Header / Navigation ....................... line 158
   05. Hero ...................................... line 186
   06. Trust Bar ................................. line 240
   07. Services .................................. line 256
   08. Process ................................... line 271
   09. Mortgage Calculator ....................... line 283
   10. FAQ ....................................... line 325
   11. Listings .................................. line 362
   12. Areas We Serve ............................ line 469
   13. Blog / Insights ........................... line 481
   14. Blog Grid ................................. line 511
   15. Pagination ................................ line 532
   16. Single Blog Post .......................... line 551
   17. About ..................................... line 597
   18. Testimonial ............................... line 609
   19. Get In Touch .............................. line 618
   20. Footer .................................... line 662
   21. Scroll Reveal ............................. line 684
---------------------------------- */

/* =============================================================
   LOCAL FONTS
   Self-hosted — no Google Fonts / no CDN. Every file these
   @font-face rules point to lives in the fonts/ folder next to
   this stylesheet, so the template renders identically with the
   internet completely off.
============================================================= */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-400-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-500-italic.woff2') format('woff2');
  font-weight:500;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/plex-mono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/plex-mono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}

/* =============================================================
   ROOT VARIABLES
   Central place for colors, fonts, and layout width. Edit here
   to re-theme the whole template.
============================================================= */
:root{
  --ink:#14213D;
  --paper:#EFEDE6;
  --paper-2:#E5E1D6;
  --brass:#A67C3D;
  --brass-dark:#8A6530;
  --slate:#5C6470;
  --line:#D3CDBD;
  --white:#FFFFFF;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --container: 1180px;
}

/* =============================================================
   RESET & BASE
============================================================= */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 32px;}
section{position:relative;}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.1;letter-spacing:-0.01em;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brass-dark);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--brass-dark);}

/* Buttons used across every section */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  padding:15px 26px;
  border-radius:2px;
  border:1px solid var(--ink);
  cursor:pointer;
  transition:all .25s ease;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:var(--brass-dark);border-color:var(--brass-dark);}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}

/* =============================================================
   HEADER / NAVIGATION
   Sticky bar, logo, nav links, phone number, CTA, mobile toggle.
============================================================= */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(239,237,230,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap;
  gap:20px;
  padding:20px 32px;max-width:var(--container);margin:0 auto;
  position:relative;
}
.logo{white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;}
.logo img{height:32px;width:auto;display:block;}
.nav-links{display:flex;gap:22px;font-size:14px;font-weight:500;flex-shrink:0;white-space:nowrap;}
.nav-links a{position:relative;padding-bottom:4px;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--brass);transition:width .25s ease;}
.nav-links a:hover::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:20px;flex-shrink:0;}
.nav-phone{font-family:var(--font-mono);font-size:13px;color:var(--slate);white-space:nowrap;}
.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;flex-shrink:0;}
.menu-toggle span{width:22px;height:2px;background:var(--ink);}

/* =============================================================
   HERO
   Headline + subhead + CTAs on the left, property photo with
   the signature "listing plaque" overlay on the right.
============================================================= */
.hero{padding:88px 0 120px;overflow:hidden;}
.hero .wrap{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;}
.hero h1{font-size:clamp(38px,5vw,64px);margin-bottom:24px;}
.hero h1 em{font-style:italic;color:var(--brass-dark);}
.hero p.lede{font-size:18px;color:var(--slate);max-width:440px;margin-bottom:36px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}

.hero-visual{position:relative;}
.hero-photo{
  aspect-ratio:4/5;
  border-radius:2px;
  position:relative;
  overflow:hidden;
}
.hero-photo img{width:100%;height:100%;object-fit:cover;}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(20,33,61,0.35), transparent 40%);
}

/* Signature element: the MLS-style plaque overlapping the hero photo */
.plaque{
  position:absolute;
  left:-40px;bottom:-36px;
  background:var(--ink);
  color:var(--paper);
  padding:22px 26px;
  width:280px;
  border-left:3px solid var(--brass);
  box-shadow:0 24px 48px rgba(20,33,61,0.28);
}
.plaque-top{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:#B9C0CE;margin-bottom:10px;text-transform:uppercase;
}
.plaque-addr{font-family:var(--font-display);font-size:19px;margin-bottom:14px;}
.plaque-specs{
  display:flex;gap:16px;font-family:var(--font-mono);font-size:12px;color:#D8DCE4;
  border-top:1px solid rgba(255,255,255,0.15);padding-top:12px;
}
.plaque-specs b{color:var(--paper);font-weight:500;}
.plaque-price{
  position:absolute;top:-16px;right:20px;
  background:var(--brass);color:var(--ink);
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  padding:8px 14px;
}

/* =============================================================
   TRUST BAR
   Four stat blocks directly under the hero.
============================================================= */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0;}
.trust .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
.trust-item{text-align:left;}
.trust-num{font-family:var(--font-display);font-size:34px;color:var(--ink);}
.trust-num span{color:var(--brass-dark);}
.trust-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);margin-top:4px;}

/* Shared section heading pattern (title left, blurb right) */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(28px,3.4vw,42px);max-width:520px;}
.section-head p{color:var(--slate);max-width:340px;font-size:15px;}

/* =============================================================
   SERVICES
   Three-column card grid: Buying / Selling / Investing.
============================================================= */
.services{padding:120px 0;}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.service-card{background:var(--paper);padding:40px 32px;transition:background .25s ease;}
.service-card:hover{background:var(--paper-2);}
.service-index{font-family:var(--font-mono);font-size:12px;color:var(--brass-dark);margin-bottom:24px;}
.service-card h3{font-size:22px;margin-bottom:12px;}
.service-card p{color:var(--slate);font-size:14.5px;margin-bottom:20px;}
.service-link{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.service-link::after{content:"→";transition:transform .2s ease;}
.service-card:hover .service-link::after{transform:translateX(4px);}

/* =============================================================
   PROCESS
   "How It Works" — four numbered stages, laid out in a row on
   desktop and stacked on mobile.
============================================================= */
.process{padding:0 0 120px;}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.process-step{border-top:2px solid var(--ink);padding-top:20px;}
.process-num{font-family:var(--font-mono);font-size:13px;color:var(--brass-dark);margin-bottom:14px;}
.process-step h3{font-size:19px;margin-bottom:10px;}
.process-step p{color:var(--slate);font-size:14px;}

/* =============================================================
   MORTGAGE CALCULATOR
   Interactive tool: inputs on the left, live-updating monthly
   payment breakdown on the right. Logic lives in js/script.js.
============================================================= */
.calculator{padding:0 0 120px;}
.calc-panel{background:var(--ink);color:var(--paper);border-left:3px solid var(--brass);}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;}
.calc-inputs{padding:44px 40px;}
.calc-field{margin-bottom:22px;}
.calc-field:last-child{margin-bottom:0;}
.calc-field label{
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:#B9C0CE;margin-bottom:10px;
}
.calc-field label span{color:var(--paper);font-family:var(--font-mono);}
.calc-field input[type="range"]{
  width:100%;accent-color:var(--brass);
  background:transparent;cursor:pointer;
}
.calc-field input[type="number"]{
  width:100%;padding:11px 12px;border-radius:2px;border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.05);color:var(--paper);font-family:var(--font-mono);font-size:14px;
}
.calc-results{
  padding:44px 40px;background:rgba(255,255,255,0.04);
  display:flex;flex-direction:column;justify-content:center;
}
.calc-results .eyebrow{color:var(--brass);}
.calc-results .eyebrow::before{background:var(--brass);}
.calc-monthly{font-family:var(--font-display);font-size:44px;margin-bottom:6px;}
.calc-monthly span{font-family:var(--font-mono);font-size:14px;color:#B9C0CE;font-weight:400;}
.calc-breakdown{
  margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.15);
  font-family:var(--font-mono);font-size:13px;color:#D8DCE4;
  display:grid;gap:10px;
}
.calc-breakdown div{display:flex;justify-content:space-between;}
.calc-breakdown b{color:var(--paper);font-weight:500;}
.calc-note{font-size:12px;color:#8890A0;margin-top:20px;}

/* =============================================================
   FAQ
   Accordion list — one question open at a time. Toggle logic
   in js/script.js, no page reload / no external library.
============================================================= */
/* padding-top matters here specifically: the testimonial band
   above is a full-bleed dark color change, so without top space
   of its own this heading reads as glued to it — every other
   section either opens the page or inherits its gap from the
   previous section's bottom padding, but this is the one place
   two "own paddings" don't already add up to a real gap. */
.faq{padding:120px 0 120px;}
.faq-list{max-width:800px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-question{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 4px;font-family:var(--font-display);font-size:18px;color:var(--ink);
}
.faq-icon{
  flex-shrink:0;width:22px;height:22px;position:relative;
}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;top:50%;left:50%;
  background:var(--brass-dark);
  transform:translate(-50%,-50%);
}
.faq-icon::before{width:14px;height:2px;}
.faq-icon::after{width:2px;height:14px;transition:transform .25s ease;}
.faq-item.open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scale(0);}
.faq-answer{
  max-height:0;overflow:hidden;
  transition:max-height .3s ease;
}
.faq-answer p{color:var(--slate);font-size:14.5px;padding:0 4px 24px;max-width:640px;}
.faq-item.open .faq-answer{max-height:200px;}

/* =============================================================
   LISTINGS
   A horizontal, one-card-at-a-time slider rather than a static
   grid — six listings plus a trailing "view more" card, native
   scroll-snap so it also swipes on touch, with arrow buttons
   that nudge it by exactly one card width per click (not by a
   full page of three).
============================================================= */
.listings{padding:0 0 120px;}

.listing-toolbar{display:flex;justify-content:flex-end;gap:10px;margin-bottom:24px;}
.slider-arrow{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .2s ease;
}
.slider-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.slider-arrow:disabled{opacity:.35;cursor:default;}
.slider-arrow:disabled:hover{background:transparent;border-color:var(--line);color:var(--ink);}

/* Touch-swipe progress bar: hidden by default (mouse/trackpad
   users get the arrow buttons above). Swapped in on real
   touchscreens by the media query near the bottom of this file,
   since swiping the row directly is the natural gesture there
   and clickable arrows are the "old-fashioned" fallback. */
.listing-progress{
  display:none;
  height:3px;border-radius:2px;
  background:var(--line);
  overflow:hidden;
  margin-top:18px;
}
.listing-progress-bar{
  display:block;height:100%;width:0%;
  background:var(--brass);border-radius:2px;
}

.listing-track{
  display:flex;gap:28px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding-bottom:4px;
  cursor:grab;
}
.listing-track::-webkit-scrollbar{display:none;}

/* Active state while a mouse drag is in progress (see the
   "Mouse drag-to-scroll" block in js/script.js). Native touch
   scrolling on phones/tablets doesn't touch this class at all —
   it's mouse-only. */
.listing-track.dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  user-select:none;
}
.listing-track.dragging .listing-slide{pointer-events:none;}
.listing-track img{-webkit-user-drag:none;user-select:none;}

.listing-slide{flex:0 0 calc((100% - 56px)/3);scroll-snap-align:start;}
.listing-card{background:var(--white);border:1px solid var(--line);height:100%;}
.listing-photo{
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
}
.listing-photo img{width:100%;height:100%;object-fit:cover;}
.listing-tag{
  position:absolute;top:14px;left:14px;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  padding:5px 10px;
}
.listing-body{padding:22px 22px 26px;}
.listing-price{font-family:var(--font-display);font-size:22px;margin-bottom:4px;}
.listing-addr{color:var(--slate);font-size:13.5px;margin-bottom:16px;}
.listing-specs{
  display:flex;gap:14px;font-family:var(--font-mono);font-size:11.5px;color:var(--slate);
  border-top:1px solid var(--line);padding-top:14px;
}

/* The trailing "view more" slide — same footprint as a listing
   card so it sits naturally at the end of the row, styled as a
   dashed invitation rather than another photo card. */
.listing-more-card{
  height:100%;min-height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;
  border:1px dashed var(--slate);
  padding:32px 24px;
  color:var(--ink);
  transition:background .2s ease, border-color .2s ease;
}
.listing-more-card:hover{background:var(--paper-2);border-color:var(--ink);}
.listing-more-arrow{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--brass-dark);
  transition:transform .2s ease;
}
.listing-more-card:hover .listing-more-arrow{transform:translateX(4px);}
.listing-more-title{font-family:var(--font-display);font-size:18px;}
.listing-more-sub{font-size:13px;color:var(--slate);}

/* =============================================================
   AREAS WE SERVE
   Three neighborhood cards with a small map graphic each.
============================================================= */
.areas{padding:0 0 120px;}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.area-card{background:var(--white);border:1px solid var(--line);}
.area-photo{aspect-ratio:7/5;overflow:hidden;}
.area-photo img{width:100%;height:100%;object-fit:cover;}
.area-card h3{font-size:19px;padding:20px 22px 6px;}
.area-card p{color:var(--slate);font-size:13.5px;padding:0 22px 22px;}

/* =============================================================
   BLOG / INSIGHTS
   Intentionally a different shape than "Areas We Serve" (which is
   a uniform 3-up photo-card grid): one larger featured post with
   a photo, paired with a compact text-only list of recent posts
   separated by rules — closer to an editorial index than a card
   grid, so the two sections don't read as the same component.
============================================================= */
.blog{padding:0 0 120px;}
.blog-layout{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--line);background:var(--white);}
.blog-feature{border-right:1px solid var(--line);}
.blog-feature-photo{aspect-ratio:5/4;overflow:hidden;}
.blog-feature-photo img{width:100%;height:100%;object-fit:cover;}
.blog-feature-body{padding:32px 36px 36px;}
.blog-feature-body h3{font-size:23px;margin-bottom:12px;}
.blog-feature-body p{color:var(--slate);font-size:14.5px;margin-bottom:20px;max-width:460px;}
.blog-meta{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);margin-bottom:14px;}
.blog-tag{color:var(--brass-dark);}
.blog-date{position:relative;padding-left:16px;}
.blog-date::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;background:var(--line);transform:translateY(-50%);}
.blog-list{display:flex;flex-direction:column;justify-content:center;}
.blog-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 32px;border-bottom:1px solid var(--line);transition:background .2s ease;}
.blog-row:last-child{border-bottom:none;}
.blog-row:hover{background:var(--paper-2);}
.blog-row-text .blog-meta{margin-bottom:8px;}
.blog-row-text h4{font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--ink);}
.blog-row-arrow{font-size:16px;color:var(--brass-dark);flex-shrink:0;transition:transform .2s ease;}
.blog-row:hover .blog-row-arrow{transform:translateX(4px);}
.blog-viewall{text-align:center;margin-top:40px;}

/* =============================================================
   BLOG GRID
   Used on blog.html (the archive) and again for "More from the
   blog" on blog-post.html. A uniform 3-up card grid — deliberately
   a different shape than the homepage's featured+list teaser,
   since this page's job is "browse everything" rather than
   "highlight one piece".
============================================================= */
.blog-archive{padding:56px 0 120px;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.blog-grid-card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;}
.blog-grid-photo{aspect-ratio:4/3;overflow:hidden;display:block;}
.blog-grid-photo img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.blog-grid-card:hover .blog-grid-photo img{transform:scale(1.03);}
.blog-grid-body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1;}
.blog-grid-body h3{font-size:18px;line-height:1.3;}
.blog-grid-body h3 a{transition:color .2s ease;}
.blog-grid-body h3 a:hover{color:var(--brass-dark);}
.blog-grid-body p{color:var(--slate);font-size:13.5px;flex:1;}
.blog-grid-body .service-link{margin-top:auto;}

/* =============================================================
   PAGINATION
   Presentational — see the comment above the <nav.pagination>
   markup in blog.html for why pages 2–8 all link back to the
   same page instead of being separately built.
============================================================= */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:56px;}
.page-btn{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:13px;color:var(--ink);
  transition:all .2s ease;
}
a.page-btn:hover{background:var(--paper-2);border-color:var(--ink);}
.page-btn.active{background:var(--ink);color:var(--paper);border-color:var(--ink);cursor:default;}
.page-btn.arrow{color:var(--brass-dark);}
.page-btn.disabled{opacity:.35;cursor:default;}

/* =============================================================
   SINGLE BLOG POST
   Used on blog-post.html — the article template every post card
   links through to.
============================================================= */
.post-hero{padding:56px 0 0;}
.post-breadcrumb{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;color:var(--slate);
  margin-bottom:28px;transition:color .2s ease;
}
.post-breadcrumb:hover{color:var(--brass-dark);}
.post-title{font-size:clamp(30px,4.4vw,50px);max-width:820px;margin:16px 0 20px;}
.post-deck{color:var(--slate);font-size:17px;line-height:1.6;max-width:640px;margin-bottom:40px;}
.post-featured-photo{aspect-ratio:16/9;border-radius:2px;overflow:hidden;margin-bottom:56px;}
.post-featured-photo img{width:100%;height:100%;object-fit:cover;}

.post-body{padding:0 0 8px;}
.post-body .wrap{max-width:720px;}
.post-body p{color:var(--ink);font-size:16.5px;line-height:1.75;margin-bottom:22px;}
.post-body h2{font-size:26px;margin:44px 0 16px;}
.post-body blockquote{
  font-family:var(--font-display);font-style:italic;font-size:22px;line-height:1.4;
  color:var(--brass-dark);border-left:3px solid var(--brass);
  padding:2px 0 2px 24px;margin:36px 0;
}
.post-body ul{margin:0 0 22px 22px;}
.post-body li{list-style:disc;color:var(--ink);font-size:16px;line-height:1.65;margin-bottom:10px;}

.post-author{
  max-width:720px;margin:8px auto 0;padding:32px 32px 0;
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:16px;
}
.post-author img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.post-author-name{font-family:var(--font-display);font-size:16px;}
.post-author-role{font-family:var(--font-mono);font-size:12px;color:var(--slate);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}

.post-related{padding:100px 0 120px;}

.post-cta{background:var(--ink);color:var(--paper);padding:80px 0;text-align:center;}
.post-cta h2{font-size:clamp(26px,3.2vw,36px);margin-bottom:14px;}
.post-cta p{color:#B9C0CE;font-size:15.5px;margin-bottom:28px;}
.post-cta .btn-primary{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.post-cta .btn-primary:hover{background:var(--brass);border-color:var(--brass);color:var(--ink);}

/* =============================================================
   ABOUT
   Agent photo on the left, bio copy + signature on the right.
============================================================= */
.about{padding:0 0 120px;}
.about .wrap{display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:center;}
.about-photo{aspect-ratio:3/4;position:relative;overflow:hidden;}
.about-photo img{width:100%;height:100%;object-fit:cover;}
.about h2{font-size:clamp(26px,3vw,38px);margin-bottom:20px;}
.about p{color:var(--slate);font-size:15.5px;margin-bottom:16px;max-width:520px;}
.about-sign{font-family:var(--font-display);font-style:italic;font-size:24px;margin-top:24px;color:var(--brass-dark);}

/* =============================================================
   TESTIMONIAL
   Full-width dark band with a single centered client quote.
============================================================= */
.testimonial{padding:100px 0;background:var(--ink);color:var(--paper);}
.testimonial .wrap{max-width:760px;text-align:center;}
.testimonial blockquote{font-family:var(--font-display);font-size:clamp(22px,3vw,32px);line-height:1.35;font-weight:400;margin-bottom:28px;}
.testimonial cite{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#B9C0CE;font-style:normal;}

/* =============================================================
   GET IN TOUCH
   Contact details on the left, inquiry form on the right.
============================================================= */
.contact{padding:120px 0;}
.contact .wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;}
.contact h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:18px;}
.contact p{color:var(--slate);font-size:15px;max-width:380px;margin-bottom:28px;}
.contact-meta{font-family:var(--font-mono);font-size:13px;color:var(--slate);line-height:2;}
.contact-meta b{color:var(--ink);}

form{display:grid;gap:16px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);display:block;margin-bottom:8px;}
input,textarea{
  width:100%;border:1px solid var(--line);background:var(--white);
  padding:13px 14px;font-family:var(--font-body);font-size:14px;color:var(--ink);
  border-radius:2px;
}
input:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:1px;}
textarea{resize:vertical;min-height:110px;}

/* Wraps the success/error banner + the <form> together so the
   banner sits directly above the fields regardless of which
   state is showing. */
.contact-form-wrap{display:flex;flex-direction:column;gap:16px;}

/* Honeypot spam field — visually and functionally hidden from
   real visitors (off-screen, not just opacity:0, so it can't be
   tabbed to or read by a screen reader either), but still a real
   form field a bot will find and fill in. contact.php checks it
   server-side. */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* Success/error banner shown after contact.php redirects back
   here with ?sent=1 or ?error=1 — toggled by js/script.js.
   Hidden by default via the HTML "hidden" attribute. */
.form-notice{
  padding:14px 18px;border-radius:2px;font-size:14px;
  border:1px solid transparent;
}
.form-notice-success{background:#EAF2E9;border-color:#BFDABC;color:#2E5C2A;}
.form-notice-error{background:#FBEAEA;border-color:#EFC3C3;color:#7A2A2A;}

/* =============================================================
   FOOTER
   Logo + nav links + social icons on top, copyright line below.
============================================================= */
footer{border-top:1px solid var(--line);padding:48px 0 32px;overflow:hidden;}
.footer-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.footer-links{display:flex;flex-wrap:wrap;gap:20px 28px;font-size:13px;color:var(--slate);}

/* Social icons: circular outline buttons, brass on hover */
.social-icons{display:flex;gap:10px;}
.social-icons a{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:all .2s ease;
}
.social-icons a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}

.footer-bottom{display:flex;justify-content:center;}
.footer-copy{font-family:var(--font-mono);font-size:12px;color:var(--slate);}

/* =============================================================
   SCROLL REVEAL
   Paired with the IntersectionObserver in js/script.js.
============================================================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* Flexbox safety net: a flex child's default min-width is "auto",
   which measures against its own content and can quietly push it
   past the edge of the container instead of wrapping — this is
   what let the footer nav overflow. min-width:0 lets every one of
   these actually shrink/wrap the way flex-wrap already says they
   should, at any width, on any device. */
.nav,.footer-top,.footer-links,.trust .wrap,.nav-cta{min-width:0;}
.nav > *,.footer-top > *,.trust-item{min-width:0;}