:root{
  /* ===== SUSGENIX BRAND COLORS — edit the hex codes below to recolor every page ===== */
  --olive: #2F3820;  /* Primary brand: header, hero, page banners, sign-up form */
  --burgundy: #682D3C;  /* Standout buttons and links */
  --brass: #B59A62;  /* Fine details: rules, underlines, accents */
  --charcoal: #45483F;  /* Body text and footer */
  --label: #5A6B2C;  /* Small section labels and icons */
  --tint: #F5F2EB;  /* Light background bands */
  --cream: #E8DDC2;  /* Small labels on dark backgrounds */
}

body{margin:0;background:#FFFFFF;font-family:'Libre Franklin',Arial,sans-serif}
button,input,select,textarea{font-family:inherit}
a{color:var(--burgundy)}a:hover{color:#4A1F2B}
html{scroll-behavior:smooth}
.dd-menu{display:none}.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}.dd-menu a:hover{background:var(--tint)}
.chip{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:4px;cursor:pointer;font-size:15px;font-weight:600;border:1px solid #56653A;color:#F1EFE8}
.chip input{accent-color:#682D3C;width:18px;height:18px;margin:0}
.chip.on{background:var(--burgundy);color:#FFFFFF;border-color:var(--burgundy)}
#contact input::placeholder,#contact textarea::placeholder{color:#C9C7BC}
#contact select option{color:#45483F}
#contact input:focus,#contact select:focus,#contact textarea:focus,.chip:focus-within{outline:2px solid #E8DDC2;outline-offset:2px}
@media (max-width:700px){
h1{font-size:40px!important}
h2{font-size:32px!important}
section,header>div,footer{padding-left:20px!important;padding-right:20px!important}
#investors>div{padding:32px 24px!important}
}

/* ---- Mobile & tablet (iOS / Android) ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img{max-width:100%}
.dd-toggle{display:none}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:48px;height:48px;margin-left:auto;border:1px solid #E3DFD5;border-radius:4px;background:#FFFFFF;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nt-bar{display:block;width:22px;height:2px;background:var(--olive);transition:transform .2s,opacity .2s}
header.nav-open .nt-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav-open .nt-bar:nth-child(2){opacity:0}
header.nav-open .nt-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-toggle:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
@media (max-width:1024px){
  header>div{flex-wrap:nowrap!important;padding:12px 20px!important}
  .nav-toggle{display:flex}
  header nav{display:none!important;position:absolute;top:100%;left:0;right:0;z-index:50;background:#FFFFFF;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:0!important;padding:8px 20px 24px!important;border-bottom:2px solid var(--brass);box-shadow:0 18px 30px rgba(0,0,0,.15);max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  header.nav-open nav{display:flex!important}
  header nav>a,header nav .dd>a{display:flex!important;align-items:center;min-height:48px;padding:12px 0!important;border-bottom:1px solid #E3DFD5!important;font-size:15px!important}
  header nav .dd{position:static!important;display:flex!important;flex-wrap:wrap;align-items:stretch;border-bottom:1px solid #E3DFD5}
  header nav .dd>a{flex:1 1 auto;border-bottom:0!important}
  header nav .dd>a svg{display:none}
  .dd-toggle{display:flex!important;align-items:center;justify-content:center;width:48px;min-height:48px;border:0;border-left:1px solid #E3DFD5;background:none;cursor:pointer;color:var(--olive)}
  .dd-toggle svg{transition:transform .2s}
  .dd.open .dd-toggle svg{transform:rotate(180deg)}
  header nav .dd:not(.open) .dd-menu{display:none!important}
  header nav .dd-menu{flex:1 1 100%;display:block!important;position:static!important;box-shadow:none!important;min-width:0!important;padding:0 0 8px 14px!important;background:transparent!important;border-radius:0!important}
  header nav .dd-menu a{min-height:44px;display:flex!important;align-items:center;padding:8px 0!important;font-size:13px!important}
  header nav>a[href="contact.html"]{justify-content:center;margin-top:16px;border-bottom:0!important;border-radius:4px}
  html.nav-lock,html.nav-lock body{overflow:hidden}
  html.nav-lock .a11y-btn,html.nav-lock .a11y-panel{display:none!important}
}
@media (max-width:700px){
  header a[aria-label="Susgenix home"] img{height:40px!important}
  header a[aria-label="Susgenix home"] span{font-size:26px!important}
  h1{font-size:38px!important;line-height:1.1!important}
  h2{font-size:30px!important;line-height:1.15!important}
  section{padding-top:56px!important;padding-bottom:56px!important}
  section[aria-label="Portfolio photography"]{padding-top:0!important;padding-bottom:0!important;margin-top:-40px!important}
  section div[style*="padding: 64px"],section div[style*="padding: 48px"]{padding:28px 22px!important}
  section div[style*="margin: -40px auto 0"]{margin-top:-24px!important}
  [style*="grid-template-columns: repeat(auto-fit"],[style*="grid-template-columns: repeat(auto-fill"]{grid-template-columns:minmax(0,1fr)!important}
  .pgrid{grid-template-columns:minmax(0,1fr)!important}
  [style*="font-size: 48px"]{font-size:38px!important}
  [style*="font-size: 46px"],[style*="font-size: 44px"]{font-size:34px!important}
  p[style*="font-size: 19px"]{font-size:17px!important}
  input,select,textarea{font-size:16px!important}
  .fgroup{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin}
  .fchip{flex:0 0 auto!important}
  .flabel{flex:0 0 auto!important;width:auto!important;margin-right:4px}
  footer [style*="grid-template-columns"]{gap:28px!important}
  section:has(.fgroup){padding-top:40px!important;padding-bottom:8px!important}
  section:has(#pgrid){padding-top:8px!important}
  [style*="padding: 26px 24px"],[style*="padding: 26px 28px"]{padding:18px 20px!important}
  section[aria-label="Portfolio photography"] img{height:220px!important}
  section[aria-label="Portfolio photography"]>div{gap:14px!important}
}
@media (max-width:640px){
  .pmodal{width:100vw!important;max-width:100vw!important;height:100%!important;max-height:100%!important;max-height:100dvh!important;border-radius:0!important;margin:0!important}
  .pm-media img,.pm-media .pph{height:42vh!important}
  .pm-body{padding:20px 20px 32px!important}
  .pm-info h2{font-size:28px!important}
  .pm-close{top:calc(10px + env(safe-area-inset-top))!important}
}
.a11y-btn{bottom:calc(20px + env(safe-area-inset-bottom))!important;left:calc(16px + env(safe-area-inset-left))!important}
.a11y-panel{bottom:calc(84px + env(safe-area-inset-bottom))!important}
@media (max-width:700px){.a11y-btn{width:48px!important;height:48px!important}}
@media (hover:none){.pcard:hover{transform:none;box-shadow:none}}

/* ---- Accessibility menu ---- */
.a11y-skip{position:absolute;left:12px;top:-60px;z-index:1000;padding:12px 18px;background:var(--burgundy);color:#FFFFFF;font-weight:600;border-radius:4px;text-decoration:none}
.a11y-skip:focus{top:12px;color:#FFFFFF}
.a11y-btn{position:fixed;left:20px;bottom:20px;z-index:900;width:52px;height:52px;border-radius:50%;border:2px solid #FFFFFF;background:var(--olive);color:#FFFFFF;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.a11y-btn:hover{background:var(--burgundy)}
.a11y-btn:focus-visible,.a11y-panel button:focus-visible,.a11y-panel a:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.a11y-panel{position:fixed;left:20px;bottom:84px;z-index:901;width:min(320px,calc(100vw - 40px));background:#FFFFFF;color:var(--charcoal);border:1px solid #E3DFD5;border-top:3px solid var(--brass);border-radius:6px;box-shadow:0 16px 40px rgba(0,0,0,.22);padding:18px;font-family:'Libre Franklin',Arial,sans-serif}
.a11y-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.a11y-head h2{margin:0;font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:24px;color:var(--olive)}
.a11y-x{width:40px;height:40px;border:0;background:none;font-size:26px;cursor:pointer;color:var(--charcoal)}
.a11y-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:600;font-size:14px}
.a11y-size{display:flex;align-items:center;gap:8px}
.a11y-size button{min-width:44px;height:40px;border:1px solid #E3DFD5;border-radius:4px;background:var(--tint);font:600 15px 'Libre Franklin',Arial,sans-serif;cursor:pointer;color:var(--charcoal)}
.a11y-size-v{min-width:44px;text-align:center;font-size:13px}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-grid button{min-height:48px;padding:8px;border:1px solid #E3DFD5;border-radius:4px;background:#FFFFFF;font:600 13px 'Libre Franklin',Arial,sans-serif;color:var(--charcoal);cursor:pointer;text-align:center}
.a11y-grid button[aria-pressed="true"]{background:var(--olive);color:#FFFFFF;border-color:var(--olive)}
.a11y-grid button[data-reset]{background:var(--tint)}
.a11y-more{display:block;margin-top:12px;font-size:13px;font-weight:600}
html.a11y-contrast body{filter:contrast(1.3)}
html.a11y-contrast p,html.a11y-contrast li,html.a11y-contrast span{color:inherit}
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px;outline:2px solid #FFD400;outline-offset:1px}
html.a11y-font body,html.a11y-font body *{font-family:Verdana,Arial,sans-serif!important;letter-spacing:.02em}
html.a11y-spacing p,html.a11y-spacing li,html.a11y-spacing td{line-height:2!important}
html.a11y-spacing p{margin-bottom:1em}
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* In-page jump links */
html{scroll-behavior:smooth}section[id]{scroll-margin-top:12px}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Illustrations: phone layouts */
@media (max-width: 720px){.cyc-wide{display:none!important}.cyc-tall{display:block!important}.pm-lines{display:none}.dg-card{padding:28px 14px 22px!important}.dg-card figcaption div:first-child{font-size:26px!important}}

/* Phones and tablets: header stays at the top, Contact Us stays at the bottom */
.m-cta{display:none}
@media (max-width:1024px){
  header{position:sticky!important;top:0;z-index:1000!important}
  header nav{max-height:calc(100dvh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .m-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:950;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid #E3DFD5;box-shadow:0 -6px 18px rgba(0,0,0,.08)}
  .m-cta a{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:6px;background:var(--burgundy);color:#FFFFFF!important;font-weight:600;font-size:17px;text-decoration:none}
  .m-cta a:active{filter:brightness(.92)}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .a11y-btn{bottom:calc(88px + env(safe-area-inset-bottom))!important}
  .a11y-panel{bottom:calc(150px + env(safe-area-inset-bottom))!important}
  section[id]{scroll-margin-top:84px}
  html.nav-lock .m-cta{display:none!important}
  html.nav-lock header{position:fixed!important;left:0;right:0;top:0}
}
@media print{.m-cta{display:none!important}}

/* Home hero on phones: tagline on 2 lines, smaller headline, buttons side by side, compact stats */
@media (max-width:600px){
  #top{padding-top:44px!important;padding-bottom:72px!important}
  #top .hero-tag{font-size:11px!important;letter-spacing:.1em!important;line-height:1.6!important;margin-bottom:14px!important}
  #top .hero-h1{font-size:40px!important;margin-bottom:18px!important}
  #top .hero-lede{font-size:17px!important;margin-bottom:24px!important}
  #top .hero-btns{flex-wrap:nowrap!important;gap:10px!important}
  #top .hero-btns a{flex:1 1 0;text-align:center;padding:14px 8px!important;font-size:15px!important;white-space:nowrap}
  #top > div{gap:32px!important}
  #top .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #top .hero-stats > div{padding:14px 10px!important}
  #top .hero-stats [data-count]{font-size:24px!important}
  #top .hero-stats [data-count] + div{font-size:10px!important;letter-spacing:.04em!important;margin-top:4px}
}
/* Clickable photo cards */
.band-card img{transition:transform .5s ease}
.band-card:hover img,.band-card:focus-visible img{transform:scale(1.04)}
/* Phones/tablets: accessibility lives in the menu instead of floating over content */
.nav-a11y{display:none}
@media (max-width:1024px){
  .a11y-btn{display:none!important}
  .a11y-panel{bottom:calc(92px + env(safe-area-inset-bottom))!important}
  header.nav-open .nav-a11y{display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;padding:14px 4px;background:none;border:0;border-top:1px solid #E3DFD5;font:inherit;font-size:15px;font-weight:600;color:#2F3820;cursor:pointer}
}

/* Phones: page-section buttons on one row */
@media (max-width:600px){
  nav[aria-label="On this page"]{flex-wrap:nowrap!important;gap:8px!important;margin-top:28px!important}
  nav[aria-label="On this page"] a{flex:1 1 0;min-width:0;display:flex!important;align-items:center;justify-content:center;text-align:center;white-space:normal!important;padding:11px 6px!important;font-size:13px!important;line-height:1.25!important}
  /* Stat boxes (Portfolio, Acquisitions, Investors): three across */
  div:has(> div > [data-stat]),div:has(> div > [data-count]):not(.hero-stats){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  div:has(> div > [data-stat]) > div,div:has(> div > [data-count]):not(.hero-stats) > div{padding:14px 10px!important;border-right:1px solid #E3DFD5;border-bottom:0}
  div:has(> div > [data-stat]) [data-count],div:has(> div > [data-count]):not(.hero-stats) [data-count]{font-size:26px!important}
  div:has(> div > [data-stat]) [data-count] + div,div:has(> div > [data-count]):not(.hero-stats) [data-count] + div{font-size:10px!important;letter-spacing:.04em!important}
}
/* Filters: label fixed, choices scroll */
.fscroll{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:0;flex:1}
@media (max-width:1024px){
  .fgroup{flex-wrap:nowrap!important;overflow:visible!important;gap:10px!important}
  .fgroup .flabel{flex:0 0 auto!important;width:auto!important;margin:0!important}
  .fscroll{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px;padding:2px 0 6px}
  .fscroll::-webkit-scrollbar{display:none}
  .fscroll .fchip{flex:0 0 auto}
}


/* Thank-you: availability button only for prospective tenants and brokers */
#ty-avail[hidden]{display:none!important}

/* ---- Properties page ---- */
.fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.flabel{width:72px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6A6C63}
.fchip{font:inherit;font-size:14px;font-weight:600;padding:9px 16px;min-height:40px;border-radius:999px;border:1px solid #E3DFD5;background:#FFFFFF;color:var(--charcoal);cursor:pointer}
.fchip:hover{border-color:var(--brass)}
.fchip.on{background:var(--olive);color:#FFFFFF;border-color:var(--olive)}
.fchip:focus-visible,.popen:focus-visible,.pgo:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px}
.pcount{margin:8px 0 0;font-size:14px;color:#6A6C63}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.pcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #E3DFD5;border-radius:4px;overflow:hidden;transition:box-shadow .2s,transform .2s;text-align:left}
.pcard:hover{box-shadow:0 10px 28px rgba(47,56,32,.12);transform:translateY(-2px)}
.pcard:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px}
.pcard img,.pcard .pph{width:100%;height:220px;object-fit:cover;display:block;background:var(--olive)}
.pph{display:flex!important;align-items:center;justify-content:center}
.pbody{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.ptags{display:flex;flex-wrap:wrap;gap:6px;min-height:22px}
.ptag{display:inline-flex;padding:4px 10px;border-radius:3px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--tint);color:var(--charcoal)}
.ph3{margin:4px 0 0;font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:26px;line-height:1.15;color:var(--olive)}
.paddr{font-size:15px;line-height:1.5;color:#55584E}
.pfoot{margin-top:auto;padding-top:12px;border-top:1px solid #E3DFD5;font-size:14px;font-weight:600;color:var(--charcoal)}
.pnone{grid-column:1/-1;font-size:16px;color:#6A6C63}
.pmodal{width:min(1000px,94vw);max-height:92vh;padding:0;border:0;border-radius:10px;background:var(--olive);color:#FFFFFF;overflow:auto}
.pmodal::backdrop{background:rgba(20,22,16,.75)}
.pm-close{position:absolute;top:10px;right:14px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#FFFFFF;font-size:30px;line-height:1;cursor:pointer}
.pm-gal{position:relative}
.pm-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#FFFFFF;font-size:30px;line-height:1;cursor:pointer}
.pm-prev{left:14px}.pm-next{right:14px}
.pm-count{position:absolute;bottom:12px;right:14px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);font-size:13px}
.pm-media img,.pm-media .pph{width:100%;height:min(440px,45vh);object-fit:cover;display:block;background:#263018}
.pm-body{display:flex;flex-wrap:wrap;gap:24px;padding:24px 28px 28px}
.pm-info{flex:999 1 380px;min-width:0}
.pm-info h2{margin:0 0 6px;font-family:'EB Garamond',Georgia,serif;font-weight:500;font-size:34px}
.pm-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-bottom:18px;margin-bottom:18px;border-bottom:2px solid var(--brass)}
.pm-meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:16px;color:#F1EFE8}
.pm-btn{padding:10px 18px!important}
.pm-desc{margin:0 0 18px;font-size:15px;line-height:1.65;color:#F1EFE8}
.pm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.pm-btn{display:inline-flex;padding:13px 20px;border-radius:4px;background:var(--burgundy);color:#FFFFFF;text-decoration:none;font-weight:600}
.pm-btn:hover{color:#FFFFFF;background:#4A1F2B}
.pm-sec{color:var(--cream);font-weight:600}
.pm-map{flex:1 1 280px;display:flex;flex-direction:column;gap:8px}
.pm-map iframe{width:100%;height:200px;border:0;border-radius:6px;background:#263018}
.pm-map a{color:var(--cream);font-size:14px;font-weight:600}
@media (prefers-reduced-motion:reduce){.pcard{transition:none}.pcard:hover{transform:none}}

/* ---- Available listings ---- */
.vcard{display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #E3DFD5;border-radius:4px;overflow:hidden}
.vcard img,.vcard .pph{width:100%;height:200px;object-fit:cover;display:block;background:var(--olive)}
.vcard .ptag{align-self:flex-start}
.vsub{margin:4px 0 0;font-size:14px;color:#6A6C63}
.vfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 0;border-top:1px solid #E3DFD5;border-bottom:1px solid #E3DFD5}
.vf-l{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6A6C63}
.vf-v{margin-top:2px;font-size:16px;font-weight:600;color:var(--olive)}
.vact{margin-top:auto;display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:14px;font-weight:600}
.vact .pm-btn{padding:12px 18px!important;font-size:14px}
.vmail{margin:0;font-size:12px;color:#6A6C63}