/* =====================================================================
   SPDA REAL ESTATE — WEBSITE STYLESHEET
   ---------------------------------------------------------------------
   SETTINGS: change the values in this block to adjust the whole site.
   Colours come from the SPDA Brand Identity Guidelines (Rev. 03, p.13).
   Sizes use rem (1rem = 16px) or clamp(min, preferred, max), which
   scales smoothly between phone and desktop.
   ===================================================================== */
:root{
  /* --- Brand colours (do not change without updating the guidelines) */
  --ink:#131313;          /* SPDA Ink: text, dark bands */
  --vermilion:#D94F2B;    /* SPDA Vermilion: accent only, one per section */
  --bone:#F2EDE7;         /* Bone: page background */
  --sand:#C9B8A3;         /* Sand: hairlines, secondary text on ink */
  --stone:#8A7A68;        /* Stone: labels and captions */
  --white:#FFFFFF;
  --body-2:#4D463F;       /* secondary body text on bone */
  --on-ink-2:#C9B8A3;     /* secondary text on ink */
  --ink-rule:#3a3631;     /* hairlines on ink */

  /* --- Typefaces */
  --f-sans:"Nimbus Sans L","Nimbus Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"Nimbus Mono PS","Courier New",ui-monospace,monospace;

  /* --- Text sizes */
  --t-display:clamp(1.875rem,3.3vw,3rem);   /* hero headline: min, scaling, max */
  --t-h2:clamp(1.75rem,3.2vw,2.5rem);       /* section titles */
  --t-body:1.0625rem;                       /* body text (17px) */
  --t-eyebrow:.78125rem;                    /* small caps labels (12.5px) */

  /* --- Layout */
  --gutter:clamp(16px,4.5vw,58px);          /* left/right page margin */
  --wrap:74rem;                             /* maximum content width */
  --hero-min-height:clamp(560px,46vw,760px);/* height of the photo hero on desktop */
  --hero-image-focus:100% 50%;              /* which part of the hero photo stays visible (x y) */
  --band-text-nudge:0px;                    /* move the text beside the big logo down (+) or up (-) */
  --lockup-width:380px;                     /* width of the big logo in the dark band */

  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--f-sans);font-size:calc(var(--t-body) * var(--s-body,1));line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.05;text-wrap:balance}
p{margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--vermilion);outline-offset:3px}
img{display:block;max-width:100%}
.eyebrow{font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.eyebrow.v{color:var(--vermilion)}
.mono{font-family:var(--f-mono)}
.wm{display:block;width:100%;height:auto}
.cap{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stone)}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;font:700 .75rem/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border:1.5px solid currentColor;background:none;color:inherit;cursor:pointer}
.btn.ink{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn.ink:hover{background:var(--vermilion);border-color:var(--vermilion);color:var(--white)}
.btn:hover{border-color:var(--vermilion)}
.actions{display:flex;flex-wrap:wrap;gap:12px}


/* ---------- Header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bone);padding-block:18px;border-bottom:1.5px solid var(--ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.lock-inline{display:flex;align-items:center;gap:18px;text-decoration:none;color:var(--ink)}
.lock-inline .mk{display:block;width:112px}
.legal{display:block;font-size:.6875rem;letter-spacing:.02em;margin-top:5px;line-height:1}
.lock-inline .desc{border-left:1px solid var(--sand);padding-left:16px;font-size:.625rem;letter-spacing:.2em;line-height:1.7;color:var(--stone);text-transform:uppercase}
.nav{display:flex;gap:28px}
.nav a{text-decoration:none;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase}
.nav a:hover{color:var(--vermilion)}
.nav-social{display:none}
@media (max-width:860px){.lock-inline .desc{display:none}}
.top-actions{display:flex;align-items:center;gap:14px}
.btn.btn-sm{min-height:40px;padding:0 16px;font-size:.6875rem}
.menu-btn{display:none;align-items:center;gap:10px;min-height:40px;padding:0 2px;background:none;border:0;color:var(--ink);font:400 .6875rem/1 var(--f-sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.menu-icon{display:grid;gap:6px;width:22px}
.menu-icon i{display:block;height:2px;background:var(--ink)}
.menu-icon i:last-child{background:var(--vermilion)}
html{scroll-padding-top:96px}

@media (max-width:860px){
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--ink);padding:8px var(--gutter) 28px;box-shadow:0 18px 30px rgba(19,19,19,.18)}
  .top.open .nav{display:flex}
  .nav a{color:var(--bone);font-size:1.375rem;letter-spacing:-.01em;text-transform:none;font-weight:700;padding-block:16px;border-bottom:1px solid var(--ink-rule)}
  .nav a[href="#contact"]{border-bottom:3px solid var(--vermilion)}
  .nav .nav-social{display:block;padding-top:22px}
  .nav .nav-social .eyebrow{color:var(--vermilion);font-weight:700}
  .nav .nav-social .soc-list{gap:6px 22px;margin-top:10px}
  .nav .nav-social .soc{padding:6px 0;border:0;font-size:.75rem}
  .top.open .menu-icon i:first-child{transform:translateY(4px) rotate(45deg)}
  .top.open .menu-icon i:last-child{transform:translateY(-4px) rotate(-45deg)}
}
@media (max-width:420px){.lock-inline .mk{width:96px}.top-actions{gap:10px}.btn.btn-sm{padding:0 12px}}


/* ---------- Hero (photo) ---------- */
.hero{position:relative;background:#E4DED6;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-image-focus)}
.hero .wrap{position:relative;min-height:calc(var(--hero-min-height) * var(--s-hero,1));display:flex;flex-direction:column;justify-content:center;padding-block:72px}
.hero .txt{max-width:min(34rem,46%)}
.hero h1{font-size:calc(var(--t-display) * var(--s-display,1));margin-top:18px}
.hero .pitch{margin-top:22px;color:var(--body-2);max-width:40ch}
.hero .actions{margin-top:30px}
.hero .cap{position:absolute;right:var(--gutter);bottom:18px;color:var(--bone);opacity:.85}
@media (max-width:820px){
  .hero{background:var(--bone)}
  .hero img.bg{position:relative;height:auto;aspect-ratio:4/3;object-position:100% 40%}
  .hero .wrap{min-height:0;padding-block:36px 48px}
  .hero .txt{max-width:none}
  .hero .cap{top:calc(75vw - 30px);bottom:auto}
}


/* ---------- Dark band with the big logo ---------- */
.band{background:var(--ink);color:var(--bone);padding-top:clamp(48px,7vw,80px)}
.band-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,88px);align-items:center}
.band-text{margin-top:var(--band-text-nudge)}
.lockup{container-type:inline-size;width:min(100%,var(--lockup-width))}
.lockup .descriptor,.lockup .slogan{display:flex;justify-content:space-between;white-space:nowrap;line-height:1}
.lockup .descriptor{margin-top:3.2cqi;font-size:4.42cqi;letter-spacing:-.01em}
.lockup .slogan{margin-top:5.6cqi;font-size:4.3cqi;font-weight:700;color:var(--vermilion);letter-spacing:.06em}
.lockup .slogan span:last-child{letter-spacing:0}
.band p.lead{font-size:clamp(1.1875rem,1.8vw,1.5rem);line-height:1.45;color:var(--bone);max-width:40ch}
.band p.lead + p{margin-top:16px;color:var(--on-ink-2);max-width:52ch}
.datum-band{display:block;width:100%;max-width:none;height:72px;margin-top:clamp(48px,7vw,80px)}
@media (max-width:820px){.band-grid{grid-template-columns:1fr;align-items:start}}


/* ---------- Image + text halves (Mission, Services) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.split figure{margin:0;position:relative;min-height:420px}
.split figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split figure .cap{position:absolute;left:16px;bottom:14px;color:var(--bone)}
.split .txt{padding:clamp(48px,7vw,104px) var(--gutter);display:grid;gap:56px;align-content:center;max-width:44rem}
.split h2{font-size:calc(clamp(1.5rem,2.6vw,2.125rem) * var(--s-h2,1));margin-top:14px;line-height:1.12;letter-spacing:-.015em}
.split .short{width:66px;height:4px;background:var(--ink);margin-block:22px}
.split p.body{color:var(--body-2);max-width:50ch}
@media (max-width:860px){.split{grid-template-columns:1fr}.split figure{min-height:0;aspect-ratio:3/2}.split.rev figure{order:-1}}

.sec{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:end;padding-bottom:36px;border-bottom:1.5px solid var(--ink)}
.sec-head h2{font-size:calc(var(--t-h2) * var(--s-h2,1));text-transform:uppercase}
.sec-head p{color:var(--body-2)}
.sec-head p > span{display:block}
@media (min-width:1240px){.sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}.sec-head p > span{white-space:nowrap}}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}}

.values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;margin-top:40px}
.val{border-top:4px solid var(--ink);padding-top:22px;display:grid;gap:10px;align-content:start}
.val:first-child{border-top-color:var(--vermilion)}
.val .n{font-size:.75rem;letter-spacing:.2em;color:var(--stone)}
.val h3{font-size:1.375rem;line-height:1.15;letter-spacing:-.01em}
.val p{color:var(--body-2);font-size:.96875rem}
@media (max-width:980px){.values{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.val:last-child{grid-column:1/-1;max-width:calc(50% - 13px)}}
@media (max-width:540px){.values{grid-template-columns:1fr}.val:last-child{max-width:none}}


/* ---------- Services list ---------- */
.svc-list{display:grid}
.svc{display:grid;grid-template-columns:44px minmax(0,1fr);gap:22px;padding-block:24px;border-bottom:1px solid var(--sand)}
.svc:first-child{border-top:1.5px solid var(--ink)}
.svc svg{width:44px;height:44px}
.svc h3{font-size:1.375rem}
.svc p{color:var(--body-2);font-size:.96875rem;margin-top:6px}

.aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:40px}
.card{background:var(--white);border:1px solid var(--sand);padding:30px 28px 32px;display:grid;gap:16px;align-content:start}
.card.ink{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.card h3{font-size:1.5rem;line-height:1.15;padding-bottom:18px;border-bottom:1px solid var(--sand)}
.card.ink h3{border-bottom-color:var(--ink-rule)}
.card p{color:var(--body-2);font-size:.96875rem}
.card.ink p{color:var(--on-ink-2)}
.card blockquote{margin:6px 0 0;font-weight:700;font-size:1.0625rem;line-height:1.45}
@media (max-width:900px){.aud{grid-template-columns:1fr}}


/* ---------- Founders ---------- */
.founders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;row-gap:0;margin-top:40px}
.f{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start}
.f figure{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.f figure img{width:100%;height:100%;object-fit:cover}
.f h3{font-size:1.5rem;margin-top:22px;letter-spacing:-.01em}
.f .role{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin-top:8px}
.f p.bio{color:var(--body-2);font-size:.96875rem;margin-top:14px}
.f .lines{margin-top:20px;border-top:1px solid var(--sand)}
.f .ln{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:12px;padding-block:10px;border-bottom:1px solid var(--sand);font-size:.9375rem;align-items:baseline}
.f .ln span:first-child{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.f .ln a{text-decoration:none;overflow-wrap:anywhere}
.f .ln a:hover{color:var(--vermilion)}
@media (max-width:900px){.founders{grid-template-columns:1fr;max-width:30rem;row-gap:56px}.f{grid-row:auto;grid-template-rows:none}}


/* ---------- Contact us (dark): form + office details ---------- */
.contact{padding-block:clamp(64px,9vw,112px)}
.contact .sec-head{border-bottom-color:var(--vermilion)}
.contact .sec-head p{color:var(--on-ink-2)}
.rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
.row{display:grid;gap:8px;padding-block:22px;border-bottom:1px solid var(--ink-rule);align-content:start}
.row .k{font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.row .v{font-size:1.1875rem;overflow-wrap:anywhere}
.row a{text-decoration:none}.row a:hover{color:var(--vermilion)}
@media (max-width:820px){.rows{grid-template-columns:1fr}}

.foot{padding-block:44px 40px}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px}
.foot .mk{display:block;width:96px}
.foot .legal{font-size:.625rem;margin-top:4px}
.reg{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.fine{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:28px;padding-top:18px;border-top:1px solid var(--sand);font-size:.8125rem;color:var(--stone)}
.tick{flex:none;width:26px;height:3px;background:var(--vermilion);margin-bottom:6px}

.contact-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);margin-top:12px;align-items:start}
.rows.stack{grid-template-columns:1fr}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.enq{display:grid;gap:4px;padding-top:12px}
.enq .f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
@media (max-width:620px){.enq .f2{grid-template-columns:1fr}}
.fld{display:grid;gap:6px;padding-block:14px}
.fld .lbl{font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.fld input,.fld textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--stone);border-radius:0;color:var(--bone);font:400 1.0625rem/1.5 var(--f-sans);padding:8px 0 10px;outline:0;-webkit-appearance:none;appearance:none}
.fld textarea{resize:vertical;min-height:120px}
.fld input::placeholder,.fld textarea::placeholder{color:#6f655a}
.fld input:focus,.fld textarea:focus{border-bottom:2px solid var(--vermilion);padding-bottom:9px}
.fld input:-webkit-autofill{-webkit-text-fill-color:var(--bone);box-shadow:inset 0 0 0 40px var(--ink)}
.fld .msg{min-height:1em;font-size:.8125rem;color:#EC7A5B}
.fld.bad input,.fld.bad textarea{border-bottom-color:#EC7A5B}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.f-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:14px}
.f-note{font-size:.8125rem;color:var(--stone)}
.btn.fill{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn.fill:hover{background:var(--vermilion);border-color:var(--vermilion);color:var(--white)}
.btn:disabled{opacity:.6;cursor:default}
.f-status{min-height:1.4em;font-size:.9375rem;color:var(--sand)}
.f-done{padding:28px 0;border-top:3px solid var(--vermilion)}
.f-done h3{font-size:clamp(1.5rem,2.6vw,2.125rem);margin-top:12px}
.f-done p:last-child{margin-top:12px;color:var(--on-ink-2);max-width:46ch}
.f-done em{color:var(--stone);font-style:normal}

/* ---------- Social media ribbon ---------- */
.social{border-bottom:1px solid var(--sand);padding-block:22px}
.social .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px}
.soc-list{display:flex;flex-wrap:wrap}
.social .eyebrow{color:var(--vermilion);font-weight:700}
.soc{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--vermilion);padding:10px 20px;border-left:1px solid var(--sand)}
.soc:first-child{border-left:0;padding-left:0}
.soc[aria-disabled=true]{cursor:default}
a.soc:hover{color:var(--ink)}
@media (max-width:620px){.soc-list{gap:4px 24px}.soc{padding:8px 0;border-left:0}}

/* Hero text block takes its width from the two buttons, so the headline and intro
   line up with the button frames (left and right edges). */
.hero .txt{width:fit-content}
.hero .txt h1,.hero .txt .pitch{width:0;min-width:100%}
.hero .pitch{max-width:none}
.hero .txt h1{text-wrap:pretty}
@media (max-width:820px){.hero .actions .btn{flex:1 1 100%;justify-content:center}}

/* Social icons (Font Awesome Free, CC BY 4.0) shown as single-colour silhouettes */
.soc{display:inline-flex;align-items:center;gap:8px}
.ico{display:inline-block;width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ico-instagram{--ico:url(../images/social/instagram.svg)}
.ico-linkedin{--ico:url(../images/social/linkedin.svg)}
.ico-facebook{--ico:url(../images/social/facebook.svg)}
.ico-youtube{--ico:url(../images/social/youtube.svg);width:16px}