/*
Theme Name: PlotArth Realty
Theme URI: https://plotarthrealty.com
Author: PlotArth Realty
Author URI: https://plotarthrealty.com
Description: Custom one-page real estate theme for PlotArth Realty — verified plots, transparent process, and end-to-end property consultation. Converted from the approved PlotArth Realty design prototype.
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plotarth-realty
*/

:root{
  /* PlotArth Realty — "Ivory & Charcoal" palette.
     Primary is a deep warm charcoal, so every dark surface generated from it
     (hero, Why-Us, project thumbs) is rich and premium. Accent is the exact
     orange from the PlotArth logo. Neutrals are warm greige rather than cool
     grey, and the page sits on a warm ivory instead of flat white. */
  --navy-50:#f3f2f2; --navy-100:#e2e1e1; --navy-200:#c1bfbe; --navy-300:#989592; --navy-400:#64605c;
  --navy-500:#312b26; --navy-600:#2b2623; --navy-700:#25211f; --navy-800:#1f1c1c; --navy-900:#1a1718;
  --orange-50:#fef7f1; --orange-100:#fcebdf; --orange-200:#f8d5bb; --orange-300:#f4b88e; --orange-400:#ee9555;
  --orange-500:#e8721c; --orange-600:#c7621a; --orange-700:#a55318; --orange-800:#844316; --orange-900:#633414;
  --n-0:#fdfbf8; --n-50:#f7f6f6; --n-100:#ecebea; --n-200:#d7d4d2; --n-300:#bcb8b4; --n-400:#9b948e;
  --n-500:#7a7168; --n-600:#69625b; --n-700:#58524d; --n-800:#484340; --n-900:#373333;

  /* Header / footer surfaces. The PlotArth logo is a dark-navy mark, so the two
     places it appears are kept light — ivory for the header and mobile menu, a
     richer warm limestone for the footer — where the mark reads at full strength. */
  --surface-header:#fdfbf8;
  --surface-footer:#e8e0d1;
  --hairline:rgba(28,26,23,.12);
  --hairline-strong:rgba(28,26,23,.20);

  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;
  --shadow-sm:0 2px 10px rgba(49,43,38,.07);
  --shadow-md:0 10px 34px rgba(49,43,38,.10);
  --shadow-lg:0 24px 64px rgba(49,43,38,.16);
  --container-w:1280px;
  --space-section:clamp(64px,10vw,160px);
  --ease:cubic-bezier(.25,.8,.25,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);color:var(--n-800);background:var(--n-0);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0 0 .5em;color:var(--navy-900);}
p{margin:0 0 1em;color:var(--n-600);}
.container{max-width:var(--container-w);margin:0 auto;padding:0 clamp(20px,5vw,64px);}
section{position:relative;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--navy-900);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);z-index:999;transition:top .2s var(--ease);}
.skip-link:focus{top:12px;}
:focus-visible{outline:2px solid var(--orange-500);outline-offset:3px;}

.eyebrow{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-600);margin:0 0 14px;}
.section-head{max-width:640px;margin:0 0 56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(28px,3.6vw,42px);}
.section-head.on-dark .eyebrow{color:var(--orange-400);}
.section-head.on-dark h2{color:#fff;}
.section{padding:var(--space-section) 0;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:15px;padding:14px 28px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);white-space:nowrap;}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn-lg{padding:16px 32px;font-size:16px;}
.btn-primary{background:var(--navy-500);color:#fff;}
.btn-primary:hover{background:var(--navy-600);transform:translateY(-2px);box-shadow:var(--shadow-md);}
/* On the charcoal hero a charcoal button would disappear, so the primary
   action there inverts to an ivory pill — same button, surface-aware. */
.hero .btn-primary{background:var(--n-0);color:var(--navy-900);}
.hero .btn-primary:hover{background:#fff;color:var(--navy-900);}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px);}
.btn-outline-navy{background:transparent;color:var(--navy-600);border-color:var(--navy-200);}
.btn-outline-navy:hover{border-color:var(--navy-500);background:var(--navy-50);}
.btn-whatsapp{background:var(--navy-900);color:#fff;}
.btn-whatsapp:hover{background:var(--navy-700);transform:translateY(-2px);}
.btn-block{width:100%;}

.site-header{position:fixed;top:0;left:0;right:0;z-index:200;padding:22px 0;background:var(--surface-header);box-shadow:inset 0 -1px 0 var(--hairline);transition:padding .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;}
.brand-logo{height:46px;width:auto;transition:height .3s var(--ease),filter .3s var(--ease);}
.main-nav{display:flex;align-items:center;gap:34px;}
.main-nav a{font-size:14.5px;font-weight:500;color:var(--n-700);position:relative;padding:4px 0;transition:color .25s var(--ease);}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--orange-600);transition:width .25s var(--ease);}
.main-nav a:hover{color:var(--orange-600);}
.main-nav a:hover::after{width:100%;}
.header-cta{display:flex;align-items:center;gap:12px;}
.header-cta .btn{padding:11px 22px;font-size:14px;}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:transparent;border:0;cursor:pointer;padding:0;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy-800);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease),background .3s var(--ease);}

/* The header is a light surface at every scroll position, so the WhatsApp
   outline button uses its dark-on-light treatment throughout. */
.site-header .btn-outline-light{color:var(--navy-700);border-color:var(--n-300);}
.site-header .btn-outline-light:hover{background:var(--navy-50);border-color:var(--navy-400);}

.site-header.is-scrolled{background:rgba(253,251,248,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--hairline),0 6px 24px rgba(49,43,38,.06);padding:14px 0;}
.site-header.is-scrolled .brand-logo{height:38px;}

.hero{min-height:100svh;display:flex;align-items:center;background:linear-gradient(180deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 100%);overflow:hidden;padding-top:120px;}
.hero-bg{position:absolute;inset:0;pointer-events:none;}
.hero-bg .grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.6) 60%,transparent);}
.hero-bg .glow{position:absolute;top:8%;right:8%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(232,114,28,.22) 0%,rgba(232,114,28,0) 70%);}
.hero-bg .skyline{position:absolute;bottom:0;left:0;width:100%;height:46%;opacity:.9;}
.hero-inner{position:relative;z-index:2;max-width:820px;padding-top:40px;padding-bottom:120px;}
.hero-title{font-size:clamp(40px,6.6vw,76px);color:#fff;letter-spacing:-.01em;}
.hero-sub{font-size:clamp(16px,1.6vw,19px);color:var(--navy-100);max-width:600px;margin-bottom:36px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.scroll-cue{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);z-index:2;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:#fff;animation:bounce 2.4s ease-in-out infinite;}
.scroll-cue svg{width:16px;height:16px;}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(8px);}}

.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,96px);align-items:center;}
.about-visual{position:relative;background:var(--navy-900);border-radius:var(--radius-lg);aspect-ratio:4/5;overflow:hidden;box-shadow:var(--shadow-lg);}
.about-visual svg{position:absolute;inset:0;width:100%;height:100%;}
.about-stat{position:absolute;left:24px;right:24px;bottom:24px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-md);padding:20px 24px;}
.about-stat strong{display:block;font-family:var(--font-display);font-size:30px;color:#fff;}
.about-stat span{font-size:13px;color:var(--navy-100);}
.about-content p.lead{font-size:18px;color:var(--n-700);}
.about-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
.pillar{border-top:2px solid var(--navy-500);padding-top:16px;}
.pillar h3{font-size:17px;margin-bottom:8px;}
.pillar p{font-size:14.5px;margin-bottom:0;}

.card-grid{display:grid;gap:28px;}
.card-grid-3{grid-template-columns:repeat(3,1fr);}
.service-card{background:#fff;border:1px solid var(--n-100);border-radius:var(--radius-md);padding:36px 30px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.icon-badge{width:52px;height:52px;border-radius:var(--radius-sm);background:var(--orange-50);color:var(--orange-700);display:flex;align-items:center;justify-content:center;margin-bottom:22px;overflow:hidden;}
.icon-badge svg{width:26px;height:26px;}
.icon-badge img{width:26px;height:26px;object-fit:contain;}
.service-card h3{font-size:19px;margin-bottom:10px;}
.service-card p{font-size:14.5px;margin-bottom:0;}

.why-us{background:var(--navy-900);}
.why-us .grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;}
.icon-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-md);overflow:hidden;}
.icon-card{background:var(--navy-900);padding:38px 32px;transition:background .3s var(--ease);}
.icon-card:hover{background:var(--navy-800);}
.icon-card .icon-badge{background:rgba(232,114,28,.14);color:var(--orange-400);}
.icon-card h3{color:#fff;font-size:17px;margin-bottom:8px;}
.icon-card p{color:var(--navy-200);font-size:14px;margin-bottom:0;}

.project-card{border-radius:var(--radius-md);overflow:hidden;background:#fff;border:1px solid var(--n-100);transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.project-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.project-thumb{position:relative;aspect-ratio:5/4;background:var(--navy-800);overflow:hidden;}
.project-thumb svg,.project-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.project-card:hover .project-thumb svg,.project-card:hover .project-thumb img{transform:scale(1.06);}
.project-badge{position:absolute;top:16px;left:16px;background:var(--orange-500);color:var(--orange-900);font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:6px 14px;border-radius:var(--radius-pill);}
.project-body{padding:24px 26px 28px;}
.project-body h3{font-size:19px;margin-bottom:6px;}
.project-loc{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--n-500);}
.project-loc svg{width:15px;height:15px;color:var(--orange-600);flex-shrink:0;}

.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.timeline::before{content:"";position:absolute;top:27px;left:10%;right:10%;height:1.5px;background:var(--n-200);}
.timeline-step{position:relative;text-align:center;padding-top:0;}
.timeline-num{position:relative;z-index:2;width:56px;height:56px;margin:0 auto 20px;border-radius:50%;background:#fff;border:1.5px solid var(--navy-500);color:var(--navy-600);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:19px;transition:background .3s var(--ease),color .3s var(--ease);}
.timeline-step:hover .timeline-num{background:var(--navy-500);color:#fff;}
.timeline-step h3{font-size:16px;margin-bottom:6px;}
.timeline-step p{font-size:13.5px;margin-bottom:0;}

.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:start;}
.contact-list{margin-top:28px;display:flex;flex-direction:column;gap:16px;}
.contact-list li{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--n-700);}
.contact-list .icon-badge{width:42px;height:42px;margin-bottom:0;flex-shrink:0;}
.contact-list .icon-badge svg{width:20px;height:20px;}
.map-placeholder{margin-top:32px;aspect-ratio:16/9;border-radius:var(--radius-md);background:var(--navy-50);border:1px dashed var(--navy-200);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--navy-400);text-align:center;padding:20px;}
.map-placeholder svg{width:28px;height:28px;}
.map-placeholder span{font-size:13px;color:var(--n-500);}
.map-embed{margin-top:32px;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:16/9;}
.map-embed iframe{width:100%;height:100%;border:0;display:block;}
.contact-form{background:var(--n-50);border:1px solid var(--n-100);border-radius:var(--radius-lg);padding:clamp(28px,4vw,44px);}
.field{position:relative;margin-bottom:22px;}
.field input,.field textarea{width:100%;font-family:var(--font-body);font-size:15px;color:var(--navy-900);background:#fff;border:1.5px solid var(--n-200);border-radius:var(--radius-sm);padding:18px 16px 8px;transition:border-color .25s var(--ease);}
.field textarea{resize:vertical;min-height:110px;}
.field input:focus,.field textarea:focus{border-color:var(--navy-500);outline:none;}
.field label{position:absolute;left:16px;top:17px;font-size:15px;color:var(--n-500);pointer-events:none;transition:all .2s var(--ease);background:#fff;padding:0 2px;}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{top:-8px;font-size:11.5px;font-weight:600;color:var(--navy-600);letter-spacing:.03em;}
.form-note{font-size:12.5px;color:var(--n-500);margin-top:14px;text-align:center;}
.form-error{background:var(--orange-50);border:1px solid var(--orange-200);color:var(--orange-800);font-size:13.5px;font-weight:500;border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:20px;}

.site-footer{background:var(--surface-footer);color:var(--n-700);padding-top:88px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--hairline);}
.footer-logo{height:64px;width:auto;margin-bottom:18px;}
.footer-col h4{color:var(--navy-900);font-family:var(--font-body);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:20px;}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{font-size:14.5px;color:var(--n-700);transition:color .2s var(--ease);}
.footer-col a:hover{color:var(--orange-700);}
.footer-col p{color:var(--n-700);font-size:14.5px;max-width:280px;}
.footer-social{display:flex;gap:12px;margin-top:20px;}
.footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid var(--hairline-strong);color:var(--navy-800);display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);}
.footer-social a:hover{background:var(--orange-500);border-color:var(--orange-500);color:#fff;}
.footer-social svg{width:17px;height:17px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:26px 0;font-size:13px;color:var(--n-700);}
.footer-bottom .legal-links{display:flex;gap:20px;}
.footer-bottom a:hover{color:var(--navy-900);}

.whatsapp-float{position:fixed;right:24px;bottom:24px;z-index:150;width:58px;height:58px;border-radius:50%;background:var(--navy-500);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);}
.whatsapp-float svg{width:27px;height:27px;}
.whatsapp-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--navy-500);opacity:.5;animation:pulse 2.6s ease-out infinite;z-index:-1;}
@keyframes pulse{0%{transform:scale(1);opacity:.45;}100%{transform:scale(1.7);opacity:0;}}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .scroll-cue,.whatsapp-float::before{animation:none;}
}

.page-section{padding-top:calc(var(--space-section) + 40px);}
.page-container{max-width:800px;}
.page-content{font-size:16px;color:var(--n-700);}
.page-content p{margin-bottom:1.2em;}
.page-content a{color:var(--navy-600);text-decoration:underline;}
.page-content h2{font-size:26px;margin-top:1.4em;}
.page-content ul,.page-content ol{margin:0 0 1.2em 1.4em;color:var(--n-700);}
.page-content li{list-style:revert;margin-bottom:.4em;}

@media (max-width:1024px){
  .main-nav,.header-cta{display:none;}
  .nav-toggle{display:flex;}
  .about-grid{grid-template-columns:1fr;}
  .about-visual{aspect-ratio:16/9;}
  .card-grid-3{grid-template-columns:repeat(2,1fr);}
  .icon-grid{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .timeline{grid-template-columns:repeat(5,1fr);}
}
@media (max-width:760px){
  :root{--space-section:64px;}
  .card-grid-3{grid-template-columns:1fr;}
  .icon-grid{grid-template-columns:1fr;}
  .about-pillars{grid-template-columns:1fr;gap:20px;}
  .timeline{grid-template-columns:1fr;gap:28px;}
  .timeline::before{display:none;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .hero-actions .btn{flex:1;}
  .header-inner{position:relative;}
}

.mobile-drawer{position:fixed;inset:0;background:var(--surface-header);z-index:190;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:28px;padding:40px;transform:translateX(100%);transition:transform .4s var(--ease);}
.mobile-drawer.is-open{transform:translateX(0);}
.mobile-drawer a{font-family:var(--font-display);font-size:30px;color:var(--navy-900);}
.mobile-drawer a:hover{color:var(--orange-600);}
.mobile-drawer .btn-primary{color:#fff;}
.mobile-drawer .btn{margin-top:12px;}
body.nav-open{overflow:hidden;}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- 1.1.0 additions: optional hero/about photos, project extras ---- */
.hero-bg-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-bg-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,23,24,.90) 0%,rgba(26,23,24,.74) 45%,rgba(37,33,31,.88) 100%);}
.about-cta{margin-top:28px;}
.project-desc{font-size:13.5px;color:var(--n-500);margin-top:8px;margin-bottom:0;}
.project-btn{margin-top:16px;}

/* ---- 1.2.0 additions: Contact Info settings — click-to-call/email links now
   wrap the existing icon-badge rows, so this only adds the flex layout for
   that wrapper plus overflow-safety for long numbers/emails/addresses. No
   existing rule above is modified. ---- */
.contact-list li>a{display:flex;align-items:center;gap:14px;width:100%;}
.contact-list li,.contact-list li>a,.footer-col li,.footer-col a{overflow-wrap:anywhere;word-break:break-word;}
.footer-social{flex-wrap:wrap;row-gap:10px;}

/* ============================================================================
   MOTION LAYER — added in 2.1.0
   Scroll-reveal variants and hover polish, layered on top of the theme's
   existing .reveal / .is-visible system. Every rule here animates only
   opacity and transform, so no colour, size, spacing, font or markup value
   changes. Each reveal plays once (theme.js unobserves after firing), and
   the whole layer switches off under prefers-reduced-motion.
   ========================================================================== */

:root{
  --anim-ease:cubic-bezier(.22,.61,.36,1);
  --anim-x:28px;
}

/* ---- 1. Hero — tagline fades, then heading, copy and buttons lift in turn -- */
.hero .eyebrow.reveal{transform:none;transition-duration:.85s;}
.hero .eyebrow.reveal.is-visible{transform:none;}
.hero .hero-title.reveal{transform:translate3d(0,32px,0);transition-delay:.08s;}
.hero .hero-title.reveal.is-visible{transform:none;}
.hero .hero-sub.reveal{transform:translate3d(0,26px,0);transition-delay:.20s;}
.hero .hero-sub.reveal.is-visible{transform:none;}
.hero .hero-actions.reveal{transform:translate3d(0,20px,0) scale(.98);transition-delay:.32s;}
.hero .hero-actions.reveal.is-visible{transform:none;}

/* Hero backdrop settles once on load — no looping motion. */
.hero-bg .glow{animation:plotarth-glow-in 1.9s var(--anim-ease) both;}
.hero-bg .skyline{animation:plotarth-skyline-in 1.5s var(--anim-ease) .2s both;}
@keyframes plotarth-glow-in{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:none;}}
@keyframes plotarth-skyline-in{from{opacity:0;transform:translate3d(0,20px,0);}to{opacity:.9;transform:none;}}

/* ---- 2. About — the two columns settle in from their own sides ------------ */
.about-grid .about-visual.reveal{transform:translate3d(calc(var(--anim-x) * -1),0,0);}
.about-grid .about-visual.reveal.is-visible{transform:none;}
.about-content .reveal{transform:translate3d(var(--anim-x),0,0);}
.about-content .reveal.is-visible{transform:none;}
.about-content .eyebrow.reveal{transition-delay:.06s;}
.about-content h2.reveal{transition-delay:.14s;}
.about-content .lead.reveal{transition-delay:.22s;}
.about-pillars .pillar.reveal:nth-child(1){transition-delay:.30s;}
.about-pillars .pillar.reveal:nth-child(2){transition-delay:.38s;}
.about-pillars .pillar.reveal:nth-child(3){transition-delay:.46s;}
.about-content .about-cta.reveal{transition-delay:.54s;}

/* ---- 3 + Projects. Card grids — cards arrive one after another ------------ */
.card-grid > .reveal:nth-child(1){transition-delay:.06s;}
.card-grid > .reveal:nth-child(2){transition-delay:.16s;}
.card-grid > .reveal:nth-child(3){transition-delay:.26s;}
.card-grid > .reveal:nth-child(4){transition-delay:.36s;}
.card-grid > .reveal:nth-child(5){transition-delay:.46s;}
.card-grid > .reveal:nth-child(6){transition-delay:.56s;}
.card-grid > .reveal:nth-child(7){transition-delay:.66s;}
.card-grid > .reveal:nth-child(8){transition-delay:.76s;}
.card-grid > .reveal:nth-child(9){transition-delay:.86s;}

/* ---- 4. Why PlotArth — feature cards alternate direction ------------------
   .icon-grid already clips its overflow, so the sideways cards slide in from
   behind its own rounded edge and can never affect page width.              */
.icon-grid .icon-card{opacity:0;transition:opacity .68s var(--anim-ease),transform .68s var(--anim-ease),background .3s var(--ease);}
.icon-grid .icon-card:nth-child(3n+1){transform:translate3d(calc(var(--anim-x) * -1),14px,0);}
.icon-grid .icon-card:nth-child(3n+2){transform:translate3d(0,26px,0);}
.icon-grid .icon-card:nth-child(3n+3){transform:translate3d(var(--anim-x),14px,0);}
.icon-grid.is-visible .icon-card{opacity:1;transform:none;}
.icon-grid.is-visible .icon-card:nth-child(1){transition-delay:.06s;}
.icon-grid.is-visible .icon-card:nth-child(2){transition-delay:.16s;}
.icon-grid.is-visible .icon-card:nth-child(3){transition-delay:.26s;}
.icon-grid.is-visible .icon-card:nth-child(4){transition-delay:.36s;}
.icon-grid.is-visible .icon-card:nth-child(5){transition-delay:.46s;}
.icon-grid.is-visible .icon-card:nth-child(6){transition-delay:.56s;}
.icon-grid.is-visible .icon-card:nth-child(7){transition-delay:.66s;}
.icon-grid.is-visible .icon-card:nth-child(8){transition-delay:.76s;}
.icon-grid.is-visible .icon-card:nth-child(9){transition-delay:.86s;}

/* ---- 5. Process — steps rise in sequence ---------------------------------- */
.timeline .timeline-step{opacity:0;transform:translate3d(0,26px,0);transition:opacity .6s var(--anim-ease),transform .6s var(--anim-ease);}
.timeline.is-visible .timeline-step{opacity:1;transform:none;}
.timeline.is-visible .timeline-step:nth-child(1){transition-delay:.08s;}
.timeline.is-visible .timeline-step:nth-child(2){transition-delay:.18s;}
.timeline.is-visible .timeline-step:nth-child(3){transition-delay:.28s;}
.timeline.is-visible .timeline-step:nth-child(4){transition-delay:.38s;}
.timeline.is-visible .timeline-step:nth-child(5){transition-delay:.48s;}
.timeline.is-visible .timeline-step:nth-child(6){transition-delay:.58s;}

/* ---- 6. Contact — details from the left, form from the right -------------- */
.contact-grid .contact-info.reveal{transform:translate3d(calc(var(--anim-x) * -1),0,0);}
.contact-grid .contact-info.reveal.is-visible{transform:none;}
.contact-grid .contact-form.reveal{transform:translate3d(var(--anim-x),0,0);transition-delay:.10s;}
.contact-grid .contact-form.reveal.is-visible{transform:none;}
.contact-form .field{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s var(--anim-ease),transform .5s var(--anim-ease);}
.contact-form.is-visible .field{opacity:1;transform:none;}
.contact-form.is-visible .field:nth-of-type(1){transition-delay:.26s;}
.contact-form.is-visible .field:nth-of-type(2){transition-delay:.34s;}
.contact-form.is-visible .field:nth-of-type(3){transition-delay:.42s;}
.contact-form.is-visible .field:nth-of-type(4){transition-delay:.50s;}
.contact-form.is-visible .field:nth-of-type(5){transition-delay:.58s;}

/* ---- 7. Footer — columns fade up together --------------------------------- */
.footer-col{opacity:0;transform:translate3d(0,22px,0);transition:opacity .65s var(--anim-ease),transform .65s var(--anim-ease);}
.footer-col.is-visible{opacity:1;transform:none;}
.footer-grid .footer-col:nth-child(1){transition-delay:.04s;}
.footer-grid .footer-col:nth-child(2){transition-delay:.14s;}
.footer-grid .footer-col:nth-child(3){transition-delay:.24s;}
.footer-grid .footer-col:nth-child(4){transition-delay:.34s;}

/* ---- 8 + 9. Hover polish — small lifts on the elements that lacked one ---- */
.btn-outline-navy:hover{transform:translateY(-2px);}
.footer-social a{transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .25s var(--anim-ease);}
.footer-social a:hover{transform:translateY(-2px);}
.timeline-num{transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--anim-ease);}
.timeline-step:hover .timeline-num{transform:translateY(-3px);}

/* ---- 10. Mobile — vertical motion only, so nothing can widen the page ----- */
@media (max-width:1024px){
  :root{--anim-x:20px;}
}
@media (max-width:760px){
  .about-grid .about-visual.reveal,
  .about-content .reveal,
  .contact-grid .contact-info.reveal,
  .contact-grid .contact-form.reveal{transform:translate3d(0,20px,0);}
  .about-grid .about-visual.reveal.is-visible,
  .about-content .reveal.is-visible,
  .contact-grid .contact-info.reveal.is-visible,
  .contact-grid .contact-form.reveal.is-visible{transform:none;}
  .icon-grid .icon-card:nth-child(3n+1),
  .icon-grid .icon-card:nth-child(3n+3){transform:translate3d(0,22px,0);}
  .icon-grid.is-visible .icon-card:nth-child(3n+1),
  .icon-grid.is-visible .icon-card:nth-child(3n+3){transform:none;}
}

/* ---- Safety net — if JavaScript never runs, nothing stays hidden ---------- */
html:not(.has-motion) .reveal,
html:not(.has-motion) .icon-grid .icon-card,
html:not(.has-motion) .timeline .timeline-step,
html:not(.has-motion) .contact-form .field,
html:not(.has-motion) .footer-col{opacity:1 !important;transform:none !important;}

/* ---- Reduced motion — show everything in place, no movement at all -------- */
@media (prefers-reduced-motion:reduce){
  .hero .eyebrow.reveal,.hero .hero-title.reveal,.hero .hero-sub.reveal,.hero .hero-actions.reveal,
  .about-grid .about-visual.reveal,.about-content .reveal,
  .contact-grid .contact-info.reveal,.contact-grid .contact-form.reveal,
  .card-grid > .reveal,
  .icon-grid .icon-card,.icon-grid.is-visible .icon-card,
  .timeline .timeline-step,.timeline.is-visible .timeline-step,
  .contact-form .field,.contact-form.is-visible .field,
  .footer-col,.footer-grid .footer-col{opacity:1 !important;transform:none !important;transition:none !important;transition-delay:0s !important;}
  .hero-bg .glow,.hero-bg .skyline{animation:none !important;}
  .btn-outline-navy:hover,.footer-social a:hover,.timeline-step:hover .timeline-num{transform:none !important;}
}

/* ---- Card hover lift, restored ------------------------------------------
   .reveal.is-visible sets transform and sits later in the cascade with the
   same specificity as .service-card:hover / .project-card:hover, so it was
   cancelling their lift once a card scrolled into view. Re-stating it at a
   higher specificity — same -6px the design already asked for. */
.card-grid > .service-card.reveal.is-visible:hover,
.card-grid > .project-card.reveal.is-visible:hover{transform:translate3d(0,-6px,0);}

/* ============================================================================
   MOBILE FIXES — added in 2.1.1
   Three scoped corrections. Everything below is inside a max-width media
   query or targets the mobile drawer, which is only ever displayed at
   1024px and under — so the desktop layout is untouched.
   ========================================================================== */

/* ---- 1. About visual: a taller frame on phones so the photo is not
     squeezed into a letterbox, and a stat card sized to match ---------------
     At 390px the 16/9 frame was only 197px tall and the stat overlay covered
     72% of it. A 4/3 frame gives the image room and drops that to ~35%. */
@media (max-width:600px){
  .about-visual{aspect-ratio:4/3;}
  .about-stat{left:14px;right:14px;bottom:14px;padding:13px 16px;border-radius:var(--radius-sm);}
  .about-stat strong{font-size:22px;line-height:1.2;}
  .about-stat span{font-size:12px;line-height:1.45;display:block;}
}
/* Belt and braces for the uploaded photo: the template sets these inline, and
   repeating them here keeps the crop correct if that inline style is ever
   stripped by an optimiser. object-position is deliberately left alone so the
   Top / Center / Bottom focal choice in the Customizer still applies. */
.about-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---- 2. Mobile menu: readable rather than oversized ----------------------
     .mobile-drawer a was also catching the WhatsApp button, overriding its
     font with the 30px display face and stretching it to 306px of the 310px
     available. Excluding .btn restores the button's own type. */
@media (max-width:1024px){
  .mobile-drawer{gap:14px;padding:28px 24px;}
  .mobile-drawer a:not(.btn){font-size:21px;line-height:1.35;padding:2px 0;}
  .mobile-drawer a.btn{font-family:var(--font-body);font-size:15px;line-height:1.2;
    max-width:100%;margin-top:18px;padding:13px 26px;}
}
@media (max-width:400px){
  .mobile-drawer{gap:12px;padding:24px 20px;}
  .mobile-drawer a:not(.btn){font-size:19px;}
  .mobile-drawer a.btn{font-size:14.5px;padding:12px 22px;}
}
/* Very short screens (small phones in landscape): let the menu scroll
   internally instead of clipping the last item. */
@media (max-width:1024px) and (max-height:520px){
  .mobile-drawer{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;}
}

/* ---- 3. The address now sits in the contact list, so it needs the same
     alignment treatment the linked rows get. --------------------------------- */
.contact-list li.contact-address{align-items:flex-start;}
.contact-list li.contact-address .icon-badge{margin-top:-2px;}

/* ============================================================================
   FEATURE ROWS — added in 2.4.0
   Two image + copy rows under the hero, arranged in opposite directions.
   Reuses the theme's existing .reveal observer and the existing radius,
   shadow, font and neutral tokens. No new colour is introduced, and the section clips its own
   overflow so the sideways travel can never widen the page.
   ========================================================================== */
.features{overflow:hidden;}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;}
.feature-row + .feature-row{margin-top:clamp(56px,8vw,112px);}

.feature-media{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:var(--navy-900);}
.feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);transition:transform 1.5s var(--anim-ease);}
.feature-media.is-visible img{transform:scale(1);}

.feature-copy .eyebrow{margin-bottom:12px;}
.feature-copy h2{font-size:clamp(26px,3.1vw,38px);margin-bottom:16px;}
.feature-copy .feature-body{font-size:16.5px;line-height:1.75;color:var(--n-600);margin-bottom:0;max-width:520px;}
.feature-copy .feature-cta{margin:26px 0 0;}

/* Image slide. */
:root{--slide-x:90px;}
.feature-media.reveal{transition:opacity 1.15s var(--anim-ease),transform 1.15s var(--anim-ease);}
.feature-media.slide-from-left.reveal{transform:translate3d(calc(var(--slide-x) * -1),0,0);}
.feature-media.slide-from-right.reveal{transform:translate3d(var(--slide-x),0,0);}
.feature-media.slide-from-left.reveal.is-visible,
.feature-media.slide-from-right.reveal.is-visible{transform:none;}

/* Copy — a much shorter drift from its own side, staggered, so it reads as
   supporting the image rather than competing with it. */
.feature-copy .reveal{transition:opacity .85s var(--anim-ease),transform .85s var(--anim-ease);}
.feature-copy.copy-from-right .reveal{transform:translate3d(26px,0,0);}
.feature-copy.copy-from-left .reveal{transform:translate3d(-26px,0,0);}
.feature-copy .reveal.is-visible{transform:none;}
.feature-copy .eyebrow.reveal{transition-delay:.10s;}
.feature-copy h2.reveal{transition-delay:.20s;}
.feature-copy .feature-body.reveal{transition-delay:.30s;}
.feature-copy .feature-cta.reveal{transition-delay:.40s;}

@media (max-width:1024px){
  :root{--slide-x:64px;}
}
@media (max-width:900px){
  .feature-row{grid-template-columns:1fr;gap:26px;}
  /* Image first in both rows on small screens, so the rhythm stays consistent. */
  .feature-row.row-reverse .feature-media{order:-1;}
  .feature-media{aspect-ratio:4/3;}
  .feature-copy .feature-body{max-width:none;}
  /* Sideways drift becomes vertical here — nothing can push the page wide. */
  .feature-copy.copy-from-right .reveal,
  .feature-copy.copy-from-left .reveal{transform:translate3d(0,20px,0);}
  .feature-copy.copy-from-right .reveal.is-visible,
  .feature-copy.copy-from-left .reveal.is-visible{transform:none;}
}
@media (max-width:760px){
  :root{--slide-x:40px;}
  .feature-row + .feature-row{margin-top:48px;}
  .feature-copy h2{font-size:24px;margin-bottom:12px;}
  .feature-copy .feature-body{font-size:15px;line-height:1.7;}
  .feature-copy .feature-cta{margin-top:20px;}
}
@media (max-width:430px){
  :root{--slide-x:28px;}
  .feature-copy h2{font-size:22px;}
  .feature-copy .feature-body{font-size:14.5px;}
  .feature-media{aspect-ratio:5/4;}
}

@media (prefers-reduced-motion:reduce){
  .feature-media.reveal,
  .feature-media.slide-from-left.reveal,
  .feature-media.slide-from-right.reveal,
  .feature-copy .reveal{opacity:1 !important;transform:none !important;
    transition:none !important;transition-delay:0s !important;}
  .feature-media img,.feature-media.is-visible img{transform:none !important;transition:none !important;}
}

/* ============================================================================
   PROPERTY ASSISTANT — added in 2.6.0
   A chat-style panel built from the theme's own tokens: same radii, shadow,
   fonts, neutrals and buttons. No new colour is introduced. The panel clips
   its own overflow and every element is fluid, so it cannot widen the page.
   ========================================================================== */
.assistant .assistant-sub{font-size:16px;color:var(--n-600);margin:14px auto 0;max-width:560px;}

.assistant-panel{max-width:900px;margin:0 auto;background:var(--n-50);
  border:1px solid var(--n-100);border-radius:var(--radius-lg);
  padding:clamp(18px,2.6vw,28px);box-shadow:var(--shadow-md);overflow:hidden;}

/* ---- conversation ---- */
.assistant-log{max-height:460px;overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;display:flex;flex-direction:column;gap:14px;}
/* The log is a bounded flex column, so its children must keep their natural
   height instead of being squashed to fit it. */
.assistant-log > *{flex:0 0 auto;}
.msg{display:flex;max-width:100%;opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--anim-ease),transform .45s var(--anim-ease);}
.msg.is-in{opacity:1;transform:none;}
.msg-bot{justify-content:flex-start;}
.msg-user{justify-content:flex-end;}
.msg-bubble{display:inline-block;max-width:min(78%,560px);padding:12px 16px;
  font-size:15px;line-height:1.6;border-radius:var(--radius-md);
  overflow-wrap:anywhere;word-break:break-word;}
.msg-bot .msg-bubble{background:#fff;border:1px solid var(--n-100);color:var(--n-700);
  border-bottom-left-radius:var(--radius-sm);}
.msg-user .msg-bubble{background:var(--navy-500);color:#fff;
  border-bottom-right-radius:var(--radius-sm);}

.msg-typing .msg-bubble{display:flex;gap:5px;align-items:center;padding:15px 16px;}
.msg-typing .dot{width:6px;height:6px;border-radius:50%;background:var(--n-400);
  animation:plotarth-typing 1.2s infinite ease-in-out;}
.msg-typing .dot:nth-child(2){animation-delay:.15s;}
.msg-typing .dot:nth-child(3){animation-delay:.3s;}
@keyframes plotarth-typing{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* ---- results ---- */
.ap-results,.ap-fallback{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--anim-ease),transform .5s var(--anim-ease);}
.ap-results.is-in,.ap-fallback.is-in{opacity:1;transform:none;}
.ap-results-head{font-family:var(--font-body);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--n-600);margin:4px 0 12px;}
.ap-grid{display:grid;grid-template-columns:1fr;gap:12px;}

.ap-card{background:#fff;border:1px solid var(--n-100);border-radius:var(--radius-md);
  overflow:hidden;display:flex;flex-direction:column;
  opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--anim-ease),transform .55s var(--anim-ease),box-shadow .3s var(--ease);}
.ap-results.is-in .ap-card{opacity:1;transform:none;}
.ap-card:hover{box-shadow:var(--shadow-md);}
.ap-thumb{position:relative;aspect-ratio:5/4;background:var(--navy-800);overflow:hidden;}
.ap-thumb img,.ap-thumb svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ap-badge{position:absolute;top:12px;left:12px;background:var(--orange-500);color:var(--orange-900);
  font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:var(--radius-pill);}
.ap-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;}
.ap-title{font-size:17px;margin:0 0 6px;}
.ap-loc{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--n-500);margin:0 0 10px;}
.ap-loc svg{width:14px;height:14px;color:var(--orange-600);flex-shrink:0;}
.ap-facts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;list-style:none;}
.ap-facts li{font-size:12px;font-weight:500;color:var(--n-700);background:var(--n-50);
  border:1px solid var(--n-100);border-radius:var(--radius-pill);padding:4px 10px;}
.ap-desc{font-size:13.5px;line-height:1.6;color:var(--n-600);margin:0 0 14px;}
.ap-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;}
.ap-actions .btn{padding:9px 16px;font-size:13.5px;flex:1 1 auto;}
.ap-fallback .ap-actions{margin-top:12px;}

/* Once there is room, a result reads better as a wide row than as a lone
   narrow tile floating in the panel. */
@media (min-width:620px){
  .ap-card{flex-direction:row;min-height:186px;}
  .ap-thumb{flex:0 0 clamp(180px,28%,236px);aspect-ratio:auto;}
  .ap-body{flex:1 1 auto;padding:18px 20px 20px;}
  .ap-actions .btn{flex:0 0 auto;}
}

/* ---- input ---- */
.assistant-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 14px;}
.chip{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--n-700);
  background:#fff;border:1px solid var(--n-200);border-radius:var(--radius-pill);
  padding:8px 14px;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--anim-ease);}
.chip:hover{border-color:var(--navy-400);color:var(--navy-700);transform:translateY(-1px);}

.assistant-form{display:flex;gap:10px;align-items:stretch;}
.assistant-form input{flex:1 1 auto;min-width:0;font-family:var(--font-body);font-size:15px;
  color:var(--navy-900);background:#fff;border:1.5px solid var(--n-200);
  border-radius:var(--radius-pill);padding:13px 20px;transition:border-color .25s var(--ease);}
.assistant-form input:focus{border-color:var(--navy-500);outline:none;}
.assistant-form .btn{flex:0 0 auto;padding:13px 26px;}
.assistant-form.is-busy{opacity:.65;}

.assistant-noscript{max-width:900px;margin:16px auto 0;text-align:center;
  font-size:14.5px;line-height:1.7;color:var(--n-600);}
.assistant-noscript a{color:var(--navy-600);font-weight:600;text-decoration:underline;}

@media (max-width:760px){
  .assistant .assistant-sub{font-size:15px;}
  .assistant-panel{padding:16px 14px;border-radius:var(--radius-md);}
  /* No nested scrolling on touch: the conversation just grows down the page,
     which is what a phone does best. The script scrolls the window instead. */
  .assistant-log{max-height:none;overflow:visible;}
  .msg-bubble{max-width:88%;font-size:14.5px;padding:11px 14px;}
  .assistant-chips{gap:7px;margin:14px 0 12px;}
  .chip{font-size:12.5px;padding:7px 12px;}
  .assistant-form input{font-size:15px;padding:12px 16px;}
  .assistant-form .btn{padding:12px 18px;font-size:14px;}
}
@media (max-width:430px){
  .msg-bubble{max-width:92%;font-size:14px;}
  .ap-actions .btn{width:100%;flex:1 1 100%;}
  /* Give the field back the width the Send button was taking, so the
     placeholder is not cut off on a 375px screen. */
  .assistant-form input{padding:12px 14px;}
  .assistant-form .btn{padding:12px 15px;font-size:13.5px;}
}

@media (prefers-reduced-motion:reduce){
  .msg,.ap-results,.ap-fallback,.ap-card{opacity:1 !important;transform:none !important;
    transition:none !important;transition-delay:0s !important;}
  .msg-typing .dot{animation:none !important;}
  .chip:hover{transform:none !important;}
}

/* ============================================================================
   ASSISTANT LEAD FORM — added in 2.7.0
   The short form shown before a visitor can chat. Built entirely from the
   theme's existing tokens: same neutrals, radii, shadow, fonts, floating-label
   fields and buttons as the Get in Touch form. No new colour is introduced.
   ========================================================================== */
html.plead-open{overflow:hidden;}

.plead-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,4vw,40px);
  background:rgba(26,23,24,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity .28s var(--anim-ease);}
.plead-overlay.is-in{opacity:1;}
.plead-overlay[hidden]{display:none;}

.plead-panel{position:relative;width:100%;max-width:460px;margin:auto;
  background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--radius-lg);
  padding:clamp(24px,3.4vw,38px);box-shadow:var(--shadow-lg);
  max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(14px) scale(.985);
  transition:transform .32s var(--anim-ease);}
.plead-overlay.is-in .plead-panel{transform:none;}
.plead-panel:focus{outline:none;}

.plead-close{position:absolute;top:14px;right:14px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:transparent;border:0;border-radius:50%;cursor:pointer;color:var(--n-500);
  transition:background .2s var(--ease),color .2s var(--ease);}
.plead-close:hover{background:var(--n-50);color:var(--navy-700);}
.plead-close svg{width:18px;height:18px;}

.plead-panel .eyebrow{margin-bottom:10px;}
.plead-title{font-size:clamp(24px,3vw,30px);margin:0 0 8px;}
.plead-sub{font-size:15px;line-height:1.6;color:var(--n-600);margin:0 0 24px;}

.plead-form .field{margin-bottom:18px;}
.plead-form .field input{padding:20px 16px 8px;}
/* orange-700 rather than the usual accent: the asterisk is the only visual
   marker of a required field, so it has to clear AA on white. */
.plead-form .field label .req{color:var(--orange-700);}
.plead-form .field input.has-error{border-color:#b3261e;}
.plead-err{display:block;font-size:12.5px;line-height:1.5;color:#b3261e;margin:6px 2px 0;}
.plead-err:empty{display:none;}

.plead-alert{font-size:13.5px;line-height:1.55;color:#7a1c16;background:#fdecea;
  border:1px solid #f5c6c2;border-radius:var(--radius-sm);padding:11px 14px;margin:0 0 18px;}
.plead-alert[hidden]{display:none;}

.plead-optional{margin-bottom:18px;}
.plead-label{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:.03em;color:var(--navy-600);margin:0 0 7px;}
.plead-label .opt{font-weight:500;color:var(--n-500);letter-spacing:0;}
.plead-optional select,.plead-optional input{width:100%;font-family:var(--font-body);
  font-size:15px;color:var(--navy-900);background:#fff;border:1.5px solid var(--n-200);
  border-radius:var(--radius-sm);padding:13px 16px;transition:border-color .25s var(--ease);}
.plead-optional select{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369625b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;}
.plead-optional select:focus,.plead-optional input:focus{border-color:var(--navy-500);outline:none;}

/* Off-screen rather than display:none, so a bot that skips hidden inputs
   still fills it. Never reachable by keyboard or pointer. */
.plead-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

.plead-submit{margin-top:6px;}
.plead-privacy{font-size:12.5px;line-height:1.6;color:var(--n-500);margin:14px 0 0;text-align:center;}

/* The locked chat still reads normally; it just does not accept input yet. */
.assistant-panel.is-locked .assistant-form input{cursor:pointer;}

@media (max-width:760px){
  .plead-overlay{padding:12px;align-items:flex-start;}
  .plead-panel{max-width:none;padding:24px 20px 26px;border-radius:var(--radius-md);
    max-height:calc(100dvh - 24px);}
  .plead-title{font-size:24px;}
  .plead-sub{font-size:14.5px;margin-bottom:20px;}
  /* 46px+ targets: comfortable to tap, and large enough that iOS does not
     zoom the page when a field is focused. */
  .plead-form .field input,.plead-optional select,.plead-optional input{font-size:16px;}
  .plead-form .field input{padding:21px 14px 9px;}
  .plead-optional select,.plead-optional input{padding:14px 14px;}
  .plead-close{top:8px;right:8px;width:40px;height:40px;}
}
@media (max-width:430px){
  .plead-overlay{padding:8px;}
  .plead-panel{padding:22px 16px 24px;max-height:calc(100dvh - 16px);}
  .plead-title{font-size:22px;}
}

@media (prefers-reduced-motion:reduce){
  .plead-overlay,.plead-panel{transition:none !important;}
  .plead-panel{transform:none !important;}
}

/* ============================================================================
   PROPERTY MARKETPLACE — added in 3.0.0
   Listing cards, filters, the property page, and the submission form. Built
   from the theme's own tokens and reusing its existing card, field, button
   and dialog rules, so the marketplace looks like the rest of the site
   rather than something bolted on. No new colour is introduced.
   ========================================================================== */

/* ---- cards ---- */
.prop-card{display:flex;flex-direction:column;}
.prop-thumb{display:block;}
.prop-purpose{position:absolute;top:16px;right:16px;background:rgba(26,23,24,.78);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.04em;padding:5px 11px;border-radius:var(--radius-pill);}
.prop-body{display:flex;flex-direction:column;flex:1;}
.prop-body h3 a{color:inherit;transition:color .2s var(--ease);}
.prop-body h3 a:hover{color:var(--orange-700);}
.prop-facts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;list-style:none;}
.prop-facts li{font-size:12px;font-weight:500;color:var(--n-700);background:var(--n-50);
  border:1px solid var(--n-100);border-radius:var(--radius-pill);padding:4px 10px;}
.prop-price{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--navy-900);margin:0 0 10px;}
.prop-price-lg{font-size:clamp(24px,3vw,32px);margin-top:8px;}
.prop-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:4px;}
.prop-actions .btn{flex:1 1 auto;padding:11px 18px;font-size:14px;}
.projects-more{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px;}

/* ---- listing page ---- */
.properties-archive .assistant-sub{font-size:16px;color:var(--n-600);margin:14px auto 0;max-width:620px;}
.prop-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 16px;
  background:var(--n-50);border:1px solid var(--n-100);border-radius:var(--radius-lg);
  padding:clamp(18px,2.4vw,26px);margin:0 0 34px;}
.prop-filter{display:flex;flex-direction:column;gap:6px;min-width:0;}
.prop-filter label{font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:.03em;color:var(--navy-600);}
.prop-filter select,.prop-filter input{width:100%;font-family:var(--font-body);font-size:15px;
  color:var(--navy-900);background:#fff;border:1.5px solid var(--n-200);border-radius:var(--radius-sm);
  padding:11px 14px;transition:border-color .25s var(--ease);}
.prop-filter select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369625b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;}
.prop-filter select:focus,.prop-filter input:focus{border-color:var(--navy-500);outline:none;}
.prop-filter-actions{flex-direction:row;align-items:flex-end;gap:14px;}
.prop-filter-actions .btn{padding:11px 24px;}
.prop-clear{font-size:13.5px;color:var(--n-600);text-decoration:underline;white-space:nowrap;}
.prop-clear:hover{color:var(--navy-700);}
.prop-count{font-size:14px;color:var(--n-600);margin:0 0 18px;}

.prop-pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:44px;}
.prop-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 14px;border-radius:var(--radius-pill);
  border:1px solid var(--n-200);font-size:14.5px;font-weight:500;color:var(--n-700);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);}
.prop-pagination a.page-numbers:hover{border-color:var(--navy-400);color:var(--navy-700);}
.prop-pagination .page-numbers.current{background:var(--navy-500);border-color:var(--navy-500);color:#fff;}

.prop-empty{max-width:560px;margin:0 auto;text-align:center;background:var(--n-50);
  border:1px solid var(--n-100);border-radius:var(--radius-lg);padding:clamp(28px,4vw,44px);}
.prop-empty .prop-actions{justify-content:center;margin-top:20px;}
.prop-empty .btn{flex:0 0 auto;}

/* ---- single property ---- */
.prop-crumbs{font-size:13.5px;color:var(--n-500);margin:0 0 18px;display:flex;gap:8px;flex-wrap:wrap;}
.prop-crumbs a{color:var(--navy-600);text-decoration:underline;}
.prop-head h1{font-size:clamp(28px,4vw,46px);margin:0 0 10px;}
.prop-head .project-loc{margin:0;}

.prop-gallery{margin:26px 0 40px;}
.prop-gallery-main{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--navy-800);aspect-ratio:16/10;}
.prop-gallery-main img{width:100%;height:100%;object-fit:cover;}
.prop-gallery-strip{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;}
.prop-shot{flex:0 0 auto;width:96px;height:76px;padding:0;border:2px solid transparent;
  border-radius:var(--radius-sm);overflow:hidden;background:none;cursor:pointer;
  transition:border-color .2s var(--ease);}
.prop-shot img{width:100%;height:100%;object-fit:cover;}
.prop-shot.is-current{border-color:var(--orange-500);}

.prop-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.9fr);
  gap:clamp(28px,4vw,56px);align-items:start;}
.prop-block{margin:0 0 36px;}
.prop-block h2{font-size:clamp(20px,2.4vw,26px);margin:0 0 14px;}
.prop-list{display:grid;gap:8px;padding:0;margin:0;list-style:none;}
.prop-list li{position:relative;padding-left:24px;font-size:15px;color:var(--n-700);line-height:1.6;}
.prop-list li::before{content:"";position:absolute;left:4px;top:10px;width:7px;height:7px;
  border-radius:50%;background:var(--orange-500);}
.prop-list-cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
/* A column gap is not optional here: without it the value in one column
   runs straight into the label of the next. */
.prop-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0 clamp(22px,3vw,44px);margin:0;}
.prop-specs > div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--n-100);}
.prop-specs dt{font-size:14px;color:var(--n-600);margin:0;}
.prop-specs dd{font-size:14.5px;font-weight:600;color:var(--navy-800);margin:0;text-align:right;}
.prop-map-row{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--n-700);margin:0 0 14px;}
.prop-map-row svg{width:18px;height:18px;color:var(--orange-600);flex-shrink:0;}

.prop-aside{position:sticky;top:112px;}
.prop-cta{background:var(--n-50);border:1px solid var(--n-100);border-radius:var(--radius-lg);
  padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-sm);}
.prop-cta h2{font-size:22px;margin:0 0 10px;}
.prop-cta p{font-size:14.5px;}
.prop-cta .btn{margin-bottom:10px;}
.prop-privacy{font-size:12.5px;line-height:1.6;color:var(--n-500);margin:12px 0 0;}

/* ---- submission form ---- */
.submit-property .assistant-sub{font-size:16px;color:var(--n-600);margin:14px auto 0;max-width:620px;}
.submit-form{max-width:820px;margin:0 auto;background:var(--n-50);border:1px solid var(--n-100);
  border-radius:var(--radius-lg);padding:clamp(22px,3vw,40px);box-shadow:var(--shadow-md);}
.submit-alert{max-width:820px;margin:0 auto 20px;}

.submit-steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 28px;padding:0;counter-reset:step;}
.submit-steps li{counter-increment:step;flex:1 1 0;min-width:76px;font-size:12.5px;font-weight:600;
  color:var(--n-500);padding-top:12px;border-top:3px solid var(--n-200);transition:color .3s var(--ease),border-color .3s var(--ease);}
.submit-steps li::before{content:counter(step) ". ";}
.submit-steps li.is-current{color:var(--navy-800);border-top-color:var(--orange-500);}
.submit-steps li.is-done{color:var(--navy-600);border-top-color:var(--navy-400);}
.submit-steps[aria-hidden="true"]{display:none;}

.submit-step{border:0;padding:0;margin:0 0 8px;min-width:0;}
.submit-step legend{font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);font-weight:600;
  color:var(--navy-900);padding:0;margin:0 0 6px;}
.submit-form.is-stepped .submit-step{display:none;}
.submit-form.is-stepped .submit-step.is-current{display:block;}
.submit-sub{font-size:16px;margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--n-100);}
.submit-hint{font-size:13.5px;color:var(--n-500);margin:0 0 18px;}

.submit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 18px;}
/* A class selector beats the browser's [hidden] rule, so the type-specific
   groups need this or they never actually hide. */
.submit-form [hidden]{display:none;}
.submit-grid > .field-wide,.field-wide{grid-column:1/-1;}
.submit-form .field{margin-bottom:18px;}
.submit-form .field input,.submit-form .field textarea{padding:20px 16px 8px;}
.submit-form .field textarea{padding-top:24px;}
.submit-form .field label .req{color:var(--orange-700);}
.submit-form .field.has-error input,.submit-form .field.has-error textarea,
.submit-select.has-error select{border-color:#b3261e;}

.submit-select{margin-bottom:18px;min-width:0;}
.submit-select select,.submit-select input[type="file"]{width:100%;font-family:var(--font-body);
  font-size:15px;color:var(--navy-900);background:#fff;border:1.5px solid var(--n-200);
  border-radius:var(--radius-sm);padding:13px 16px;transition:border-color .25s var(--ease);}
.submit-select select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369625b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;}
.submit-select select:focus{border-color:var(--navy-500);outline:none;}
.submit-check{display:flex;align-items:center;margin-bottom:18px;font-size:14.5px;color:var(--n-700);}
.submit-check label{display:flex;align-items:center;gap:9px;cursor:pointer;}

.submit-drop{background:#fff;border:1.5px dashed var(--n-200);border-radius:var(--radius-md);
  padding:26px 20px;text-align:center;transition:border-color .25s var(--ease);}
.submit-drop:hover{border-color:var(--navy-400);}
.submit-drop input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.submit-drop label{cursor:pointer;}
.submit-drop-note{font-size:13px;color:var(--n-500);margin:12px 0 0;}
.submit-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:16px;}
.submit-previews:empty{display:none;}
.submit-shot{position:relative;margin:0;background:#fff;border:1px solid var(--n-100);
  border-radius:var(--radius-sm);overflow:hidden;}
.submit-shot.is-cover{border-color:var(--orange-500);box-shadow:0 0 0 1px var(--orange-500);}
.submit-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.submit-shot-tag{position:absolute;top:8px;left:8px;background:var(--orange-500);color:var(--orange-900);
  font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:var(--radius-pill);}
.submit-shot figcaption{display:flex;gap:6px;padding:8px;}
.submit-shot-btn{flex:1 1 auto;font-family:var(--font-body);font-size:12px;font-weight:600;
  color:var(--navy-700);background:var(--n-50);border:1px solid var(--n-200);
  border-radius:var(--radius-pill);padding:6px 8px;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease);}
.submit-shot-btn:hover{border-color:var(--navy-400);}
.submit-shot-remove:hover{border-color:#b3261e;color:#b3261e;}

.submit-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px;
  padding-top:24px;border-top:1px solid var(--n-100);}
.submit-count{font-size:13px;color:var(--n-500);margin:0 0 0 auto;}
.submit-privacy{max-width:560px;margin:18px auto 0;}

.submit-done{max-width:620px;margin:0 auto;text-align:center;}
.submit-tick{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;
  background:var(--orange-100);color:var(--orange-700);display:flex;align-items:center;justify-content:center;}
.submit-tick svg{width:30px;height:30px;}
.submit-done h1{font-size:clamp(24px,3.4vw,36px);margin:0 0 14px;}
.submit-done-note{font-size:14.5px;color:var(--n-500);}
.submit-done .prop-actions{justify-content:center;margin-top:26px;}
.submit-done .btn{flex:0 0 auto;}

/* ---- enquiry dialog: same panel as the assistant's lead form ---- */
.pint-ok{text-align:center;}
.pint-ok h4{font-family:var(--font-display);font-size:22px;margin:0 0 8px;}
.pint-ok p{font-size:14.5px;}
.pint-ok .ap-actions{justify-content:center;margin-top:18px;}
.pint-form .plead-err:empty{display:none;}

@media (max-width:980px){
  .prop-layout{grid-template-columns:1fr;}
  .prop-aside{position:static;}
}
@media (max-width:760px){
  .prop-filters{grid-template-columns:1fr 1fr;padding:16px 14px;gap:12px;}
  .prop-filter-actions{grid-column:1/-1;}
  .prop-filter select,.prop-filter input{font-size:16px;padding:12px 14px;}
  .prop-actions{gap:8px;}
  .prop-actions .btn{flex:1 1 100%;}
  .prop-gallery-main{aspect-ratio:4/3;}
  .prop-specs > div{padding:10px 0;}
  .submit-form{padding:20px 16px 26px;border-radius:var(--radius-md);}
  .submit-grid{grid-template-columns:1fr;}
  .submit-form .field input,.submit-form .field textarea,
  .submit-select select,.submit-select input[type="file"]{font-size:16px;}
  .submit-nav{gap:10px;}
  .submit-nav .btn{flex:1 1 auto;}
  .submit-count{width:100%;margin:0;text-align:center;}
  .submit-steps li{min-width:0;font-size:11.5px;}
  .projects-more .btn,.prop-empty .btn{flex:1 1 100%;}
}
@media (max-width:430px){
  .prop-filters{grid-template-columns:1fr;}
  .submit-previews{grid-template-columns:1fr 1fr;}
  .prop-specs > div{flex-direction:column;gap:2px;}
  .prop-specs dd{text-align:left;}
  .prop-shot{width:76px;height:60px;}
}

@media (prefers-reduced-motion:reduce){
  .submit-steps li,.prop-shot,.submit-shot-btn{transition:none !important;}
}