/*
Theme Name: Lion Edge Properties
Theme URI: https://www.lionedge.com.ng
Author: Lion Edge Properties
Description: Custom theme for Lion Edge Properties - a Lagos-based property developer. Projects, Services, FAQs, Testimonials, Building Plans and Documentation are all published from the WordPress admin. Luxury direction - Bodoni Moda, Jost. Six colour palettes, all meeting WCAG AAA contrast, in light and dark.
Version: 2.12.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lionedge
*/

/* ==========================================================================
   1. TOKENS — "Stone"
   ========================================================================== */
:root{
  --ground:#efebe4;
  --raise:#f7f4ef;
  --ink:#1c1815;
  --mute:#544c43;
  --faint:#514c44;
  --line:#dad3c7;
  --line-soft:#e5e0d7;
  --accent:#604a23;
  --accent-dim:#6f5527;
  --ok:#4a6152;
  --display:"Bodoni Moda",Didot,"Times New Roman",Georgia,serif;
  --ui:"Jost",-apple-system,"Segoe UI",Helvetica,sans-serif;
  --shell:1280px;
  --img:linear-gradient(155deg,#cfc7b7 0%,#b0a593 45%,#918675 75%,#736858 100%);
}


/* ==========================================================================
   1b. PALETTE SWITCHER
   Chosen in Appearance → Customize → Colour palette.
   :root above holds the Stone default; each class below overrides it.
   ========================================================================== */
body.pal-noir{
  --ground:#0f0d0b; --raise:#17130e; --ink:#efe9df; --mute:#a79b8d; --faint:#a39c94;
  --line:#2a241c; --line-soft:#1e1913; --accent:#b79867; --accent-dim:#967748; --ok:#7fa08d;
  --img:linear-gradient(155deg,#241f19 0%,#3d352b 45%,#5d5142 75%,#7d6d59 100%);
}
body.pal-ivory{
  --ground:#f7f6f3; --raise:#ffffff; --ink:#0d0d0c; --mute:#53534d; --faint:#53534e;
  --line:#dedcd6; --line-soft:#ebeae5; --accent:#14140f; --accent-dim:#000000; --ok:#3f5c4d;
  --img:linear-gradient(155deg,#d5d3cc 0%,#b6b4ac 45%,#95938b 75%,#74726b 100%);
}
body.pal-emerald{
  --ground:#12241d; --raise:#182e25; --ink:#eae6d9; --mute:#9db0a4; --faint:#a1afa7;
  --line:#244034; --line-soft:#1a3229; --accent:#c9a961; --accent-dim:#a98a45; --ok:#8fbfa6;
  --img:linear-gradient(155deg,#1b3128 0%,#2c4a3b 45%,#4a6455 75%,#6d8574 100%);
}
body.pal-oxblood{
  --ground:#f2ece6; --raise:#f9f5f1; --ink:#241715; --mute:#5c4a47; --faint:#574c49;
  --line:#ddd0c8; --line-soft:#eae0d9; --accent:#6e2a26; --accent-dim:#54201d; --ok:#4a6152;
  --img:linear-gradient(155deg,#cfc0b6 0%,#ad998e 45%,#8b746a 75%,#6b544c 100%);
}
body.pal-midnight{
  --ground:#0e1622; --raise:#14202f; --ink:#e8ecf2; --mute:#94a3b5; --faint:#98a3b1;
  --line:#22334a; --line-soft:#1a2739; --accent:#c4a86a; --accent-dim:#a68a4f; --ok:#7fb5a2;
  --img:linear-gradient(155deg,#16222f 0%,#26374b 45%,#405366 75%,#5e7186 100%);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--ui);font-size:17.5px;font-weight:400;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);}
::selection{background:var(--accent);color:var(--ground);}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--accent);color:#fff;padding:.8rem 1.2rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;}
.skip-link:focus{left:0;}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px;}

.wrap{max-width:var(--shell);margin:0 auto;padding:0 2.5rem;}
@media(max-width:640px){.wrap{padding:0 1.4rem;}}
.shell{max-width:var(--shell);margin-left:auto;margin-right:auto;padding-left:2.5rem;padding-right:2.5rem;}
@media(max-width:640px){.shell{padding-left:1.4rem;padding-right:1.4rem;}}
.band{padding-top:9rem;padding-bottom:9rem;}
.band--sm{padding-top:5.5rem;padding-bottom:5.5rem;}
@media(max-width:820px){.band{padding-top:5.5rem;padding-bottom:5.5rem;}.band--sm{padding-top:3.5rem;padding-bottom:3.5rem;}}
.raise{background:var(--raise);}

/* ==========================================================================
   3. TYPE
   ========================================================================== */
.label{
  font-family:var(--ui);font-weight:400;font-size:.74rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 1.8rem;
}
h1,h2,h3,h4{
  font-family:var(--display);font-weight:400;line-height:1.06;
  letter-spacing:-.005em;margin:0 0 .6rem;text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6vw,4.6rem);}
h2{font-size:clamp(2rem,4.4vw,3.6rem);}
h3{font-size:1.6rem;}
h4{font-size:1.2rem;}
p{margin:0 0 1.15rem;font-weight:400;}
.lede{font-size:1.22rem;color:var(--mute);max-width:46ch;font-weight:400;}
.sec-sub{color:var(--mute);max-width:50ch;margin:0 0 3.5rem;font-size:1.05rem;font-weight:400;}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn{
  display:inline-block;font-family:var(--ui);font-weight:400;
  font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  padding:1.1rem 2.5rem;text-decoration:none;cursor:pointer;
  border:1px solid var(--accent);color:var(--accent);background:transparent;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn:hover{background:var(--accent);color:var(--ground);}
.btn--solid{background:var(--accent);color:var(--ground);}
.btn--solid:hover{background:transparent;color:var(--accent);}
.btn--quiet{border-color:var(--line);color:var(--ink);}
.btn--quiet:hover{background:var(--ink);color:var(--ground);border-color:var(--ink);}
.btn--wa{border-color:var(--ok);color:var(--ok);}
.btn--wa:hover{background:var(--ok);color:var(--ground);}

/* ==========================================================================
   5. IMAGE PLACEHOLDER (only until photos are uploaded)
   ========================================================================== */
.ph{position:relative;overflow:hidden;background:var(--img);min-height:140px;}
.ph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px);}
.ph span{
  position:absolute;left:1.1rem;bottom:1rem;z-index:1;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);
}

/* ==========================================================================
   6. HEADER
   ========================================================================== */
.topbar{border-bottom:1px solid var(--line-soft);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.topbar .wrap{display:flex;gap:1.8rem;align-items:center;padding:.9rem 2.5rem;flex-wrap:wrap;}
@media(max-width:640px){.topbar .wrap{padding:.8rem 1.4rem;gap:1rem;}}

/* ---- light / dark switch ----
   Sits in the top bar. The icon shows what you will GET, not where you are,
   which is the convention people already read correctly. */
.mode-toggle{
  background:transparent;border:1px solid var(--line);border-radius:0;
  color:var(--mute);cursor:pointer;font-family:inherit;font-size:.9rem;
  line-height:1;padding:.45rem .6rem;margin-left:.9rem;
  min-width:44px;min-height:32px;          /* thumb-sized */
  transition:color .25s ease,border-color .25s ease;
}
.mode-toggle:hover{color:var(--ink);border-color:var(--ink);}
.mode-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
/* One icon at a time: half-disc for automatic, sun for forced light,
   moon for forced dark. The icon shows the state you are IN. */
.mode-toggle__auto,.mode-toggle__sun,.mode-toggle__moon{display:none;}
.mode-toggle[data-mode="auto"] .mode-toggle__auto{display:inline;}
.mode-toggle[data-mode="light"] .mode-toggle__sun{display:inline;}
.mode-toggle[data-mode="dark"] .mode-toggle__moon{display:inline;}
/* Before the script runs, show something rather than an empty box. */
.mode-toggle:not([data-mode]) .mode-toggle__auto{display:inline;}
@media(max-width:640px){.mode-toggle{margin-left:auto;}}
.topbar a{color:var(--mute);text-decoration:none;}
.topbar a:hover{color:var(--accent);}
.topbar .grow{flex:1;}

.masthead{border-bottom:1px solid var(--line-soft);text-align:center;background:var(--ground);position:relative;z-index:20;}
.masthead .wrap{padding-top:2.6rem;padding-bottom:1.6rem;}
.brand{display:inline-block;text-decoration:none;color:var(--ink);}
.wordmark{
  font-family:var(--display);font-weight:400;
  /* --wm-scale is set from the Customizer; 1 is the original size. Scaling the
     whole clamp keeps the proportions right at every screen width. */
  font-size:clamp(calc(1.4rem * var(--wm-scale,1)),calc(3vw * var(--wm-scale,1)),calc(2.15rem * var(--wm-scale,1)));
  letter-spacing:.34em;
  text-transform:uppercase;line-height:1;margin:0 0 .55rem;padding-left:.34em;
}
.wordmark em{font-style:normal;color:var(--accent);}
.tagline{font-size:calc(.66rem * var(--wm-scale,1));letter-spacing:.34em;text-transform:uppercase;color:var(--faint);}

.nav{padding:1.7rem 0 0;}
.nav ul{list-style:none;display:flex;justify-content:center;gap:2.8rem;margin:0;padding:0;flex-wrap:wrap;}
.nav a{
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);text-decoration:none;font-weight:400;
  padding-bottom:.35rem;border-bottom:1px solid transparent;transition:.3s;
}
.nav a:hover,.nav .current-menu-item>a{color:var(--ink);border-bottom-color:var(--accent);}
.nav-toggle{display:none;}

/* ---- Phones and small tablets: a real menu, not six links wrapping ----
   The links used to reflow into two rows of 11px type with 19px tap targets.
   Below 820px they collapse behind a button and become full-width rows. */
@media(max-width:820px){
  .nav-toggle{
    display:inline-flex;align-items:center;gap:.6rem;
    margin:1.2rem auto 0;padding:.7rem 1.1rem;
    background:transparent;border:1px solid var(--line);border-radius:0;
    font-family:inherit;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink);cursor:pointer;
  }
  .nav-toggle__bars{display:inline-block;width:16px;}
  .nav-toggle__bars span{
    display:block;height:1px;background:var(--ink);margin:3px 0;
    transition:transform .3s ease,opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(4px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-4px) rotate(-45deg);}

  /* visibility, not just height: without it the links stay in the keyboard
     tab order while invisible, and a keyboard user tabs into nothing. */
  .nav{
    padding:0;max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .35s ease,visibility 0s linear .35s;
  }
  .nav.is-open{
    max-height:70vh;overflow-y:auto;padding:1rem 0 .4rem;visibility:visible;
    transition:max-height .35s ease,visibility 0s;
  }
  .nav ul{flex-direction:column;gap:0;}
  .nav li{width:100%;border-bottom:1px solid var(--line-soft);}
  .nav li:last-child{border-bottom:0;}
  .nav a{
    display:block;width:100%;padding:1rem 0;   /* 44px+ tap target */
    font-size:.82rem;letter-spacing:.14em;border-bottom:0;
  }
  .nav a:hover,.nav .current-menu-item>a{border-bottom-color:transparent;color:var(--accent);}

  /* Give the content room: less chrome above the fold. */
  .masthead .wrap{
    padding-top:1.5rem;padding-bottom:1.1rem;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:.75rem 1rem;text-align:left;
  }
  .nav-toggle{margin:0;}
  .nav{flex:0 0 100%;}
  .tagline{margin-top:.15rem;}
  .hero{min-height:62vh;}
  .hero__inner{padding-top:3rem;padding-bottom:3rem;}
  .hero .label,.label{letter-spacing:.18em;}
  .hero p{font-size:1.02rem;}
  .band{padding-top:3.6rem;padding-bottom:3.6rem;}
  .band--sm{padding-top:2.6rem;padding-bottom:2.6rem;}
}
@media(prefers-reduced-motion:reduce){
  .nav{transition:none;}
  .nav-toggle__bars span{transition:none;}
}

/* ==========================================================================
   7. HERO
   ========================================================================== */
/* min-height, never height. With a fixed height and bottom-aligned content,
   a long headline overflows UPWARD and lands on top of the navigation —
   which then stops responding to clicks. */
.hero{position:relative;min-height:min(84vh,820px);display:flex;align-items:flex-end;}
.hero__media{position:absolute;inset:0;overflow:hidden;}
.hero__media img{width:100%;height:100%;object-fit:cover;}
/* Slide layers. Stacked, cross-faded — never sliding sideways, which fights
   the typography. A single uploaded photo just sits there as before. */
.hero__shot{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;}
.hero__shot.is-on{opacity:1;}
.hero__shot:only-child{opacity:1;}
@media(prefers-reduced-motion:reduce){.hero__shot{transition:none;}}
.hero__media .ph{height:100%;}
.hero__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(28,24,21,.80) 0%,rgba(28,24,21,.42) 50%,rgba(28,24,21,.14) 100%);}
.hero__inner{position:relative;width:100%;padding-top:6rem;padding-bottom:5rem;}
.hero h1{color:#f4efe6;font-size:clamp(2.3rem,4.7vw,3.9rem);line-height:1.05;max-width:16ch;min-height:1.06em;}
.hero .label{color:#d8b57c;}
.hero p{color:rgba(244,239,230,.8);max-width:40ch;margin:1.8rem 0 0;font-size:1.15rem;}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.6rem;}
.hero .btn{border-color:#d8b57c;color:#f4efe6;}
.hero .btn:hover{background:#d8b57c;color:#1c1815;}
.hero__dots{display:flex;gap:.5rem;margin-top:2.6rem;}
.hero__dots button{width:34px;height:1px;border:0;padding:0;cursor:pointer;background:rgba(244,239,230,.35);transition:background .3s;}
.hero__dots button[aria-selected="true"]{background:#d8b57c;}

/* ==========================================================================
   8. STATEMENT
   ========================================================================== */
.statement{text-align:center;}
.statement h2{font-style:italic;max-width:19ch;margin:0 auto;}

/* ==========================================================================
   9. EDITORIAL SPLIT
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:3rem;}}
.split .ph,.split img{aspect-ratio:4/5;object-fit:cover;width:100%;}

/* ==========================================================================
   10. PORTFOLIO
   ========================================================================== */
/* A uniform three-across grid. Every tile the same shape, so the rows line up
   whatever the project count — the earlier magazine layout only resolved at
   multiples of six and left a hole at seven. */
.folio{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem 2.5rem;
  list-style:none;margin:0;padding:0;
}
.folio li{grid-column:auto;min-width:0;}
.folio figure{margin:0;}
.folio a{display:block;text-decoration:none;color:inherit;}
.folio .shot{aspect-ratio:4/3;overflow:hidden;margin-bottom:1.2rem;background:var(--raise);}
.folio .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1);}
.folio a:hover .shot img{transform:scale(1.04);}
.folio .n{font-family:var(--display);font-size:1.55rem;line-height:1.2;display:block;margin-bottom:.4rem;}
.folio .m{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}
@media(max-width:940px){.folio{grid-template-columns:repeat(2,1fr);gap:3rem 2rem;}}
@media(max-width:620px){.folio{grid-template-columns:1fr;gap:2.5rem;}}

/* ==========================================================================
   11. RESIDENCES (building plans as a list)
   ========================================================================== */
.res{border-top:1px solid var(--line);}
.res__row{
  display:grid;grid-template-columns:minmax(9rem,1.3fr) 3fr auto;
  gap:2rem;align-items:baseline;padding:2.1rem 0;
  border-bottom:1px solid var(--line);transition:padding-left .4s ease;
}
.res__row:hover{padding-left:1rem;}
.res__name{font-family:var(--display);font-size:1.8rem;line-height:1;}
.res__spec{display:flex;gap:2rem;flex-wrap:wrap;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
.res__spec b{color:var(--ink);font-weight:400;}
.res__cta{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-decoration:none;white-space:nowrap;}
@media(max-width:760px){.res__row{grid-template-columns:1fr;gap:1rem;}.res__spec{gap:1.3rem;}}

.amen{display:flex;flex-wrap:wrap;gap:2rem;margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line);}
.amen span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}

/* ==========================================================================
   12. ASSURANCE
   ========================================================================== */
.assure{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;}
@media(max-width:900px){.assure{grid-template-columns:repeat(2,1fr);gap:2.4rem;}}
@media(max-width:520px){.assure{grid-template-columns:1fr;}}
.assure__i{border-top:1px solid var(--accent);padding-top:1.4rem;}
.assure__i .t{font-family:var(--display);font-size:1.3rem;margin-bottom:.7rem;line-height:1.25;}
.assure__i .d{font-size:.97rem;color:var(--mute);line-height:1.7;}
.assure__i .d p{margin:0;}

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:4rem 5rem;}
@media(max-width:820px){.quotes{grid-template-columns:1fr;gap:3rem;}}
.quote{margin:0;}
.quote__topic{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1.2rem;}
.quote__body{font-family:var(--display);font-style:italic;font-size:1.45rem;line-height:1.5;margin:0 0 1.4rem;}
.quote__who{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);}
.quote__who span{display:block;color:var(--faint);margin-top:.45rem;letter-spacing:.18em;}

/* ==========================================================================
   14. FIGURES
   ========================================================================== */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;text-align:center;}
@media(max-width:820px){.figs{grid-template-columns:repeat(2,1fr);gap:2.4rem;}}
.figs .n{font-family:var(--display);font-size:clamp(2.6rem,5vw,4rem);line-height:1;font-variant-numeric:tabular-nums;}
.figs .l{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:1rem;}

/* ==========================================================================
   15. SERVICES
   ========================================================================== */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:4rem 3rem;}
@media(max-width:900px){.services{grid-template-columns:repeat(2,1fr);gap:3rem 2.4rem;}}
@media(max-width:620px){.services{grid-template-columns:1fr;}}
.service{border-top:1px solid var(--line);padding-top:1.6rem;}
.service__n{font-size:.74rem;letter-spacing:.18em;color:var(--accent);display:block;margin-bottom:1rem;}
.service h3{font-size:1.5rem;margin:0 0 .8rem;}
.service p{font-size:1rem;color:var(--mute);margin:0 0 1rem;}
.service ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.service li{font-size:.95rem;color:var(--mute);padding-left:1.1rem;position:relative;line-height:1.6;}
.service li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--accent);}

/* ==========================================================================
   16. PAGE HEAD + PROSE
   ========================================================================== */
.pagehead{border-bottom:1px solid var(--line-soft);padding:5rem 0 4rem;text-align:center;}
.pagehead h1{margin:0 auto .9rem;max-width:18ch;}
.pagehead p{color:var(--mute);max-width:54ch;margin:0 auto;}
.crumbs{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:1.4rem;}
.crumbs a{color:var(--faint);text-decoration:none;}
.crumbs a:hover{color:var(--accent);}

.prose{max-width:68ch;}
.prose h2{margin-top:3rem;font-size:2rem;}
.prose h3{margin-top:2.2rem;}
.prose p{color:var(--mute);}
.prose img{margin:2rem 0;}
.prose ul,.prose ol{padding-left:1.2rem;color:var(--mute);}
.prose li{margin-bottom:.5rem;}
.prose blockquote{border-left:1px solid var(--accent);margin:2rem 0;padding-left:1.6rem;font-family:var(--display);font-style:italic;font-size:1.2rem;}

.gallery,.prose .wp-block-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.5rem 0;}
@media(max-width:700px){.gallery,.prose .wp-block-gallery{grid-template-columns:repeat(2,1fr);}}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.gallery-item{margin:0!important;}
.gallery-caption{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.prose figure{margin:0;}

/* project cards on the archive */
.filters{display:flex;gap:2.2rem;margin-bottom:3.5rem;flex-wrap:wrap;justify-content:center;}
.filters button{
  font-family:var(--ui);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  background:transparent;color:var(--faint);border:0;border-bottom:1px solid transparent;
  padding:0 0 .4rem;cursor:pointer;transition:.3s;
}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent);}
.filters button:hover{color:var(--ink);}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem 2.5rem;list-style:none;margin:0;padding:0;}
@media(max-width:940px){.cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.cards{grid-template-columns:1fr;}}
.card{margin:0;}
.card a{text-decoration:none;color:inherit;display:block;}
.card__media{aspect-ratio:4/3;overflow:hidden;margin-bottom:1.2rem;}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1);}
.card a:hover .card__media img{transform:scale(1.04);}
.card__media .ph{height:100%;}
.card h3{font-size:1.5rem;margin:0 0 .45rem;}
.card__loc,.card__meta{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 .3rem;}
.status{display:inline-block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem;}
.status--completed{color:var(--ok);}

.projmeta{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid var(--line);}
@media(max-width:760px){.projmeta{grid-template-columns:repeat(2,1fr);}}
.projmeta .k{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:.5rem;}
.projmeta .v{font-family:var(--display);font-size:1.25rem;}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:4rem;padding-top:2rem;border-top:1px solid var(--line);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;}
.pager a{color:var(--accent);text-decoration:none;}

/* ==========================================================================
   17. FAQ
   ========================================================================== */
.faq{max-width:760px;margin:0 auto;border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;padding:1.7rem 0;list-style:none;
  font-family:var(--display);font-size:1.4rem;
  display:flex;justify-content:space-between;gap:2rem;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--accent);font-family:var(--ui);font-weight:300;flex:none;}
.faq details[open] summary::after{content:"\2013";}
.faq__a{padding:0 0 1.8rem;color:var(--mute);font-size:1.05rem;max-width:64ch;}
.faq__a p{margin:0;}

/* ==========================================================================
   18. FORMS
   ========================================================================== */
.form{display:grid;gap:1.6rem;max-width:560px;}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;}
@media(max-width:560px){.form__row{grid-template-columns:1fr;}}
.field label{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:.6rem;}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--ui);font-size:1.05rem;font-weight:400;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.6rem 0;border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--accent);}
.field textarea{min-height:120px;resize:vertical;}
.form__note{font-size:.82rem;letter-spacing:.1em;color:var(--faint);}
.notice{border-top:1px solid var(--accent);padding-top:1.4rem;margin-bottom:2.5rem;}
.notice strong{font-family:var(--display);font-weight:400;font-size:1.35rem;display:block;margin-bottom:.5rem;}
.notice p{font-size:1rem;color:var(--mute);margin:0;}

.contact-list{list-style:none;padding:0;margin:0 0 2.5rem;display:flex;flex-direction:column;gap:1.8rem;}
.contact-list .k{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:.5rem;}
.contact-list a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);}
.contact-list a:hover{border-bottom-color:var(--accent);}

/* ==========================================================================
   19. CLOSING + FOOTER
   ========================================================================== */
.close{text-align:center;}
.close h2{max-width:16ch;margin:0 auto 1.6rem;}
.close .lede{margin:0 auto 2.8rem;}
.close .hero__actions{justify-content:center;margin-top:0;}

.foot{border-top:1px solid var(--line);padding:4.5rem 0 2.5rem;}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr;gap:2.4rem;}}
@media(max-width:540px){.foot__grid{grid-template-columns:1fr;}}
.foot h4{font-family:var(--ui);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:400;margin:0 0 1.3rem;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.foot a,.foot li{color:var(--mute);text-decoration:none;font-size:.97rem;}
.foot a:hover{color:var(--accent);}
.foot__mark{font-family:var(--display);font-size:1.2rem;letter-spacing:.3em;text-transform:uppercase;margin-bottom:1.2rem;padding-left:.3em;}
.foot__about{font-size:.97rem;color:var(--mute);max-width:34ch;margin:0 0 1.4rem;}
.social{display:flex;gap:1.4rem;}
.foot__bottom{
  margin-top:3.5rem;padding-top:1.8rem;border-top:1px solid var(--line-soft);
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  /* The WhatsApp button is fixed to the bottom-right of the viewport, so at the
     very end of the page it lands on this line. Leave it room. */
  padding-bottom:4.6rem;
}
@media(max-width:620px){.foot__bottom{padding-bottom:5.4rem;}}

.wa-float{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:80;
  background:var(--ink);color:var(--ground);
  padding:1rem 1.6rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;transition:background .3s;
}
.wa-float:hover{background:var(--accent);color:var(--ground);}

/* ---- Office map ----
   Full-bleed so the map reads as a place rather than a widget, with the
   heading and the directions button held inside the normal measure. */
.map__head{margin:.6rem 0 .4rem;}
.map__addr{color:var(--mute);margin:0 0 2rem;}
.map{
  position:relative;width:100%;height:clamp(280px,42vh,460px);
  margin:0 0 2rem;background:var(--raise);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;
}
.map iframe{display:block;width:100%;height:100%;border:0;}
/* Google's tiles are bright. In dark mode, take the glare off without
   making the labels unreadable. */
.mode-dark .map iframe{filter:brightness(.88) contrast(1.04);}
.map__go{margin:0;}
@media(max-width:620px){.map{height:clamp(240px,38vh,340px);margin-bottom:1.6rem;}}

.empty-hint{border:1px solid var(--line);padding:2.5rem;text-align:center;color:var(--mute);font-size:1.02rem;}
.empty-hint strong{font-family:var(--display);font-weight:400;font-size:1.35rem;display:block;margin-bottom:.6rem;color:var(--ink);}

/* ==========================================================================
   20. WORDPRESS CORE
   ========================================================================== */
.alignleft{float:left;margin:0 2rem 1.2rem 0;}
.alignright{float:right;margin:0 0 1.2rem 2rem;}
.aligncenter{margin-left:auto;margin-right:auto;}
.alignwide{max-width:1100px;}
.alignfull{max-width:none;}
.wp-caption{max-width:100%;}
.wp-caption-text,.wp-element-caption{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:center;margin-top:.6rem;}
table{width:100%;border-collapse:collapse;}
th,td{text-align:left;padding:.8rem 0;border-bottom:1px solid var(--line);font-weight:400;}
code,pre{font-family:ui-monospace,monospace;font-size:.88rem;}
pre{background:var(--raise);padding:1.2rem;overflow-x:auto;}
.scrollx{overflow-x:auto;}