/* ============================================================
   JP Real Estate, shared brand system (brand.css)
   Linked by every page. Edit a token here, every page updates.
   ============================================================ */
*{box-sizing:border-box;}
:root{
  --navy:#142A4A; --navy-deep:#0E1F38; --navy-night:#070F20;
  --teal:#2E8C8C; --teal-deep:#1B6060;
  --gold:#C2A05A; --gold-bright:#E7C879; --gold-line:#E6C57E; --amber:#FFD487;
  --cream:#F8F3EA; --pure:#FFFFFF; --ink:#142A4A; --soft:#5A6675;
  --ease:cubic-bezier(.2,.7,.2,1);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --fs-3: clamp(19px, 2.4vw, 30px);
  --fs-2: clamp(28px, 4.0vw, 58px);
  --fs-1: clamp(44px, 6.4vw, 100px);
}
html{scroll-behavior:smooth;}
html,body{margin:0; padding:0;}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); background:var(--navy-night); -webkit-font-smoothing:antialiased; line-height:1.55;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
a{text-decoration:none; color:inherit;}
:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:8px;}
h1,h2,h3{margin:0;}

/* ---- global button system ---- */
.btn{position:relative; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; padding:12px 22px; border-radius:999px; overflow:hidden; isolation:isolate; transition:transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);}
.btn>*{position:relative; z-index:1;}
.btn::before{content:""; position:absolute; inset:0; z-index:0; transform:translateY(101%); transition:transform .34s var(--ease);}
.btn:hover{transform:translateY(-2px);} .btn:hover::before{transform:translateY(0);}
.btn:active{transform:translateY(0) scale(.97);}
.btn-gold{background:rgba(255,255,255,.08); color:var(--gold-bright); box-shadow:inset 0 0 0 1px rgba(231,200,121,.6); backdrop-filter:blur(6px);}
.btn-gold::before{background:var(--gold-bright);}
.btn-gold:hover, .btn-gold:hover span{color:var(--navy-deep) !important; transition:color .05s linear;}
.btn-ask{background:rgba(255,255,255,.08); color:#fff; box-shadow:inset 0 0 0 1px rgba(231,200,121,.45); backdrop-filter:blur(6px);}
.btn-ask::before{background:var(--gold-bright);} .btn-ask:hover{color:var(--navy-deep);}
.btn-solid{background:var(--gold-bright); color:var(--navy-deep); box-shadow:0 8px 20px -7px rgba(231,200,121,.9);}
.btn-solid::before{background:#fff;}
/* ---- WhatsApp "talk to me" button, on-brand teal, recognizable chat icon ---- */
.btn-wa{background:var(--teal); color:#fff; box-shadow:0 8px 20px -8px rgba(46,140,140,.85), inset 0 0 0 1px rgba(255,255,255,.14);}
.btn-wa::before{background:var(--teal-deep);}
.btn-wa:hover{color:#fff;}
.btn-wa svg{width:18px; height:18px; flex:none;}

/* ---- creator strip: the "seam", who's behind a shareable page (calculators, guides, hub) ---- */
.creator{max-width:1080px; margin:0 auto; padding:0 clamp(16px,4vw,52px) clamp(22px,4vh,38px);}
.creator-card{display:flex; align-items:center; gap:clamp(16px,3vw,28px); flex-wrap:wrap;
  border-radius:20px; padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px);
  background:radial-gradient(60% 90% at 0% 0%, rgba(46,140,140,.12), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(231,200,121,.22);}
.creator-photo{width:74px; height:74px; border-radius:50%; object-fit:cover; object-position:50% 28%; flex:none;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(231,200,121,.4);}
.creator-body{flex:1; min-width:220px;}
.creator-name{font-family:'Cormorant',serif; font-size:23px; font-weight:600; color:#fff;}
.creator-cred{display:inline-flex; align-items:center; gap:7px; margin-top:3px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright);}
.creator-cred svg{width:14px; height:14px;}
.creator-line{margin-top:9px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.8);}
/* light variant for cream-background sections (e.g. the guides on the homepage) */
.creator.on-cream .creator-card{background:#fff; border-color:#ECE3D2; box-shadow:0 1px 2px rgba(20,42,74,.04);}
.creator.on-cream .creator-name{color:var(--navy);}
.creator.on-cream .creator-cred{color:#9A7B25;}
.creator.on-cream .creator-line{color:var(--soft);}
.creator.on-cream .creator-photo{box-shadow:0 8px 20px -10px rgba(20,42,74,.5), 0 0 0 1px rgba(231,200,121,.5);}
@media (max-width:560px){
  .creator-card{justify-content:center; text-align:center;}
  .creator-body{flex-basis:100%;}
  .creator-cred{justify-content:center;}
  .creator .btn-wa{width:100%; justify-content:center;}
}

/* ---- reusable contact block: professional sign-off (identity + labeled contact rows) ---- */
.contact-intro{max-width:1080px; margin:0 auto clamp(12px,2vh,16px); font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.78);}
.contact-block{max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,44px); border-radius:20px; padding:clamp(20px,2.6vw,28px) clamp(22px,2.8vw,32px);
  background:radial-gradient(60% 90% at 0% 0%, rgba(46,140,140,.12), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(231,200,121,.22);}
.cb-name{font-family:'Cormorant',serif; font-size:26px; font-weight:600; color:#fff; line-height:1;}
.cb-tag{display:inline-block; margin-top:8px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-bright); padding:4px 10px; border-radius:999px; background:rgba(231,200,121,.14); box-shadow:inset 0 0 0 1px rgba(231,200,121,.4);}
.cb-brokerage{margin-top:11px; font-size:12.5px; color:rgba(255,255,255,.72);}
.cb-logo{display:block; height:32px; width:auto; margin-top:12px; background:#fff; padding:5px 7px; border-radius:6px; box-shadow:0 2px 8px -4px rgba(0,0,0,.4);}
.cb-rows{display:flex; flex-wrap:wrap; gap:12px 26px;}
.cb-row{display:inline-flex; align-items:center; gap:11px; color:inherit; transition:transform .18s var(--ease);}
.cb-row:hover{transform:translateX(2px);}
.cb-ic{display:grid; place-items:center; width:40px; height:40px; border-radius:11px; flex:none; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(231,200,121,.32); color:var(--gold-bright);}
.cb-ic svg{width:18px; height:18px;}
.cb-txt{display:flex; flex-direction:column; line-height:1.25;}
.cb-label{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5);}
.cb-val{font-size:14px; font-weight:600; color:#fff;}
.cb-row:hover .cb-val{color:var(--gold-bright);}
.contact-block.on-cream{background:#fff; border-color:#ECE3D2; box-shadow:0 1px 2px rgba(20,42,74,.04);}
.contact-block.on-cream .cb-name{color:var(--navy);}
.contact-block.on-cream .cb-tag{color:#9A7B25;}
.contact-block.on-cream .cb-brokerage{color:var(--soft);}
.contact-block.on-cream .cb-ic{background:rgba(20,42,74,.05); color:#9A7B25;}
.contact-block.on-cream .cb-label{color:var(--soft);}
.contact-block.on-cream .cb-val{color:var(--navy);}
.contact-block.on-cream .cb-row:hover .cb-val{color:#9A7B25;}
.contact-intro.on-cream{color:var(--soft);}
@media (max-width:640px){
  .contact-block{flex-direction:column; align-items:flex-start; text-align:left; gap:20px; padding:20px;}
  .cb-tag{margin-top:4px; padding:0; background:none; box-shadow:none;}
  .cb-rows{flex-direction:column; align-items:flex-start; gap:16px;}
  .cb-row{align-items:flex-start; gap:12px;}
  .cb-ic{width:20px; height:20px; border-radius:0; background:none; box-shadow:none;}
  .cb-ic svg{width:16px; height:16px;}
  .cb-txt{text-align:left;}
  .cb-label{font-size:11px;}
  .cb-val{font-size:15px; font-weight:500;}
}

/* ---- shared site header (compact, dark) ---- */
.site-head{position:relative; z-index:10; display:flex; align-items:center; gap:var(--s4); padding:var(--s5) clamp(16px,4vw,52px); flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:var(--s3); padding:var(--s1); border-radius:14px; transition:transform .25s var(--ease);}
.brand:active{transform:scale(.98);}
.brand-tile{display:grid; place-items:center; width:46px; height:46px; border-radius:12px; color:var(--navy-deep); background:var(--gold-bright); font-family:'Cormorant',serif; font-weight:600; font-size:22px; letter-spacing:.04em; box-shadow:0 6px 16px -7px rgba(231,200,121,.8), 0 0 0 1px rgba(255,255,255,.2); transition:transform .3s var(--ease);}
.brand:hover .brand-tile{transform:rotate(-5deg);}
.brand-div{width:1px; height:26px; background:linear-gradient(180deg, transparent, rgba(230,197,126,.7), transparent);}
.brand-words{font-family:'Cormorant',serif; font-size:21px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#fff; text-shadow:0 2px 10px rgba(5,12,26,.9); white-space:nowrap;}
.head-spacer{margin-left:auto;}
.back-link{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#fff; padding:9px 16px; border-radius:999px; background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(231,200,121,.32); transition:all .18s var(--ease);}
.back-link:hover{color:var(--gold-bright); background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(231,200,121,.7);}
.back-link svg{width:16px; height:16px;}
@media (max-width:600px){ .brand-words{font-size:18px; letter-spacing:.16em;} }

/* ---- reveal system ---- */
[class*="reveal-"]{opacity:0; transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); will-change:transform,opacity;}
[class*="reveal-"].revealed{opacity:1; transform:none; filter:none;}
.reveal-up{transform:translateY(26px);}
.reveal-fade{transform:translateY(10px);}
.reveal-left{transform:translateX(-30px);}
.reveal-right{transform:translateX(30px);}
.reveal-scale{transform:scale(.94);}
.reveal-blur{filter:blur(6px); transform:translateY(12px);}
[data-stagger] > *{opacity:0; transform:translateY(26px) scale(.95); transition:opacity .7s var(--ease), transform .7s var(--ease); will-change:transform,opacity;}
[data-stagger].revealed > *{opacity:1; transform:none;}
[data-stagger].revealed > *:nth-child(1){transition-delay:.10s;}
[data-stagger].revealed > *:nth-child(2){transition-delay:.20s;}
[data-stagger].revealed > *:nth-child(3){transition-delay:.30s;}
[data-stagger].revealed > *:nth-child(4){transition-delay:.40s;}
[data-stagger].revealed > *:nth-child(5){transition-delay:.50s;}
[data-stagger].revealed > *:nth-child(6){transition-delay:.60s;}
[data-inner] > *{opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
[data-stagger].revealed [data-inner] > *,
.revealed > [data-inner] > *,
[data-inner].revealed > *{opacity:1; transform:none;}
[data-inner] > *:nth-child(1){transition-delay:.34s;}
[data-inner] > *:nth-child(2){transition-delay:.42s;}
[data-inner] > *:nth-child(3){transition-delay:.50s;}
[data-inner] > *:nth-child(4){transition-delay:.58s;}
[data-stagger].revealed > *:nth-child(2) [data-inner] > *{transition-delay:calc(.34s + .10s);}
[data-stagger].revealed > *:nth-child(3) [data-inner] > *{transition-delay:calc(.34s + .20s);}
[data-stagger].revealed > *:nth-child(4) [data-inner] > *{transition-delay:calc(.34s + .30s);}
.reveal-fade[data-delay="0"]{transition-delay:0s;}
.reveal-up[data-delay="1"]{transition-delay:.12s;}
.reveal-fade[data-delay="2"]{transition-delay:.24s;}
.reveal-left[data-delay="1"]{transition-delay:.12s;}
.reveal-fade[data-delay="3"]{transition-delay:.36s;}
.reveal-up[data-delay="3"]{transition-delay:.36s;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [class*="reveal-"], [data-stagger] > *, [data-inner] > *{opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;}
}

/* ---- universal slim footer (every page except the homepage, which has its own rich footer) ---- */
.site-foot-slim{background:var(--navy-deep); border-top:1px solid rgba(231,200,121,.16); padding:clamp(30px,5vh,48px) clamp(16px,4vw,40px) clamp(26px,4vh,38px);}
.fs-wrap{max-width:1080px; margin:0 auto;}
.fs-nav{display:flex; flex-wrap:wrap; gap:9px 20px; margin-bottom:16px;}
.fs-nav a{font-size:13px; font-weight:600; color:rgba(255,255,255,.68); text-decoration:none; transition:color .18s var(--ease);}
.fs-nav a:hover{color:var(--gold-bright);}
.fs-legal{font-size:11.5px; line-height:1.65; color:rgba(255,255,255,.44); max-width:860px;}
.fs-legal b{color:rgba(255,255,255,.66); font-weight:600;}
@media print{ .site-foot-slim{display:none !important;} }

/* ---- composed 3-column site footer (identity | contact | brokerage) ---- */
.site-foot3{background:var(--navy-deep); border-top:1px solid rgba(231,200,121,.18); padding:56px clamp(16px,4vw,52px) 40px;}
.f3-wrap{max-width:1120px; margin:0 auto;}
.f3-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; column-gap:48px; row-gap:36px; align-items:start;}
.f3-col{text-align:left; min-width:0;}
.f3-mark{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--gold-bright); color:var(--navy-deep); font-family:'Cormorant',serif; font-weight:600; font-size:17px; letter-spacing:.03em; box-shadow:0 4px 12px -6px rgba(231,200,121,.8);}
.f3-name{margin-top:12px; font-family:'Cormorant',serif; font-size:20px; font-weight:600; color:#fff; line-height:1;}
.f3-role{margin-top:4px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5);}
.f3-brokerline{margin-top:12px; font-size:13px; line-height:1.5; color:rgba(255,255,255,.6); max-width:270px;}
.f3-h{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:16px;}
.f3-rows{display:flex; flex-direction:column; gap:18px;}
.f3-row{display:flex; align-items:flex-start; color:inherit; text-decoration:none;}
.f3-ic{width:20px; height:20px; margin-right:12px; flex:none; display:grid; place-items:center; color:var(--gold-bright);}
.f3-ic svg{width:16px; height:16px;}
.f3-txt{display:flex; flex-direction:column; line-height:1.3; text-align:left; min-width:0;}
.f3-label{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5);}
.f3-val{font-size:15px; font-weight:500; color:#fff; word-break:break-word;}
a.f3-row:hover .f3-val{color:var(--gold-bright);}
.f3-logo{display:block; height:34px; width:auto; margin-bottom:14px; background:#fff; padding:5px 8px; border-radius:7px; box-shadow:0 2px 10px -4px rgba(0,0,0,.45);}
.f3-broker-name{font-size:15px; font-weight:500; color:#fff; margin-bottom:14px;}
.f3-broker-rows{display:flex; flex-direction:column; gap:14px;}
.f3-broker-row{display:flex; align-items:flex-start; color:rgba(255,255,255,.7); font-size:13px; line-height:1.5; text-decoration:none;}
.f3-broker-row .f3-ic{color:rgba(255,255,255,.5);}
a.f3-broker-row:hover{color:var(--gold-bright);} a.f3-broker-row:hover .f3-ic{color:var(--gold-bright);}
.f3-bottom{margin-top:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;}
.f3-copy{font-size:12px; color:rgba(255,255,255,.42);}
.f3-legal-links{font-size:12px; color:rgba(255,255,255,.5);}
.f3-legal-links a{color:rgba(255,255,255,.62); text-decoration:none;} .f3-legal-links a:hover{color:var(--gold-bright);}
@media (max-width:640px){
  .site-foot3{padding:44px 20px 32px;}
  .f3-grid{grid-template-columns:1fr; row-gap:28px;}
  .f3-brokerline{max-width:none;}
  a.f3-row, a.f3-broker-row{min-height:44px; align-items:center;}
  .f3-bottom{flex-direction:column; align-items:flex-start; gap:8px;}
}
@media print{ .site-foot3{display:none !important;} }