/* Start custom CSS for html, class: .elementor-element-38dd961 *//* =========================================================
NEW VISION COMMERCIAL
ABOUT PAGE
FINAL TYPOGRAPHY + RESPONSIVE CSS
HERO IMAGE UPDATED:
414 W Arbor Vitae St, Inglewood, CA
========================================================= */
/* =========================================================
ROOT
========================================================= */
:root{
--ink:#0a0a0b;
--charcoal:#151517;
--panel:#1c1c1f;
--panel-2:#232326;
--line:#2a2a2e;
--line-soft:#232327;
--volt:#c6ff3d;
--volt-dim:#9fd92e;
--volt-soft:rgba(198,255,61,.1);
--paper:#f5f5f2;
--light:#f5f5f2;
--light-2:#ecece7;
--grey:#9a9a9f;
--grey-dim:#6b6b70;
--dark-text:#151517;
--dark-grey:#55575b;
--radius:2px;
--ease:cubic-bezier(.2,.7,.2,1);
}
/* =========================================================
RESET
========================================================= */
*{
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
font-size:16px;
}
body{
margin:0;
background:var(--ink);
color:var(--paper);
font-family:'Archivo',sans-serif;
font-size:17px;
line-height:1.65;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{
max-width:100%;
}
button{
font:inherit;
}
a{
color:inherit;
text-decoration:none;
}
::selection{
background:var(--volt);
color:var(--ink);
}
/* =========================================================
TYPOGRAPHY
========================================================= */
.display{
font-family:'Anton',sans-serif;
font-weight:400;
text-transform:uppercase;
letter-spacing:.015em;
line-height:.94;
}
p{
font-family:'Archivo',sans-serif;
}
.eyebrow{
font-family:'JetBrains Mono',monospace;
font-size:.78rem;
font-weight:600;
letter-spacing:.18em;
line-height:1.4;
text-transform:uppercase;
color:var(--volt);
display:flex;
align-items:center;
gap:.6rem;
}
.eyebrow::before{
content:"";
width:22px;
height:1px;
background:var(--volt);
display:inline-block;
flex-shrink:0;
}
/* =========================================================
CONTAINER
========================================================= */
.container-xl{
width:100%;
max-width:1380px;
margin-left:auto;
margin-right:auto;
padding-left:clamp(20px,4vw,56px);
padding-right:clamp(20px,4vw,56px);
}
/* =========================================================
BUTTONS
========================================================= */
.btn-volt{
background:var(--volt);
color:var(--ink) !important;
font-family:'JetBrains Mono',monospace;
font-size:.78rem;
font-weight:600;
letter-spacing:.085em;
text-transform:uppercase;
min-height:48px;
padding:14px 25px;
border-radius:var(--radius);
border:1px solid var(--volt);
line-height:1.2;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.55rem;
white-space:nowrap;
transition:
background .2s ease,
color .2s ease,
transform .2s ease,
border-color .2s ease;
}
.btn-volt:hover{
background:transparent;
color:var(--volt) !important;
transform:translateY(-2px);
}
.btn-outline-dark{
background:transparent;
color:var(--paper) !important;
font-family:'JetBrains Mono',monospace;
font-size:.78rem;
font-weight:600;
letter-spacing:.085em;
text-transform:uppercase;
min-height:48px;
padding:14px 25px;
border:1px solid #4b4b50;
display:inline-flex;
align-items:center;
justify-content:center;
gap:.55rem;
transition:
border-color .2s ease,
color .2s ease,
transform .2s ease;
}
.btn-outline-dark:hover{
border-color:var(--volt);
color:var(--volt) !important;
transform:translateY(-2px);
}
/* =========================================================
HERO
UPDATED HERO IMAGE
========================================================= */
.subpage-hero{
position:relative;
min-height:560px;
height:clamp(560px,68vh,760px);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:#050506;
text-align:center;
}
.subpage-hero-image{
position:absolute;
inset:0;
background-image:url(
'https://8gy.cd3.mytemp.website/wp-content/uploads/2026/10/414-W-Arbor-Vitae-St-40-scaled.jpg'
);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
transform:scale(1.02);
z-index:0;
will-change:transform;
}
/* Dark overlay keeps white/green typography readable */
.subpage-hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(10,10,11,.30) 0%,
rgba(10,10,11,.43) 38%,
rgba(10,10,11,.72) 72%,
rgba(10,10,11,.94) 100%
);
z-index:1;
pointer-events:none;
}
/* Subtle grid effect */
.subpage-hero::after{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:64px 64px;
mix-blend-mode:overlay;
z-index:1;
pointer-events:none;
}
.subpage-hero-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
.hero-eyebrow{
justify-content:center;
color:var(--volt);
margin-bottom:18px;
font-size:.78rem;
letter-spacing:.20em;
}
.subpage-title{
color:var(--paper);
font-size:clamp(3rem,6vw,6.15rem);
max-width:1050px;
margin:0;
text-shadow:
0 3px 25px rgba(0,0,0,.55);
}
.subpage-title em{
color:var(--volt);
font-style:normal;
}
.subpage-intro{
max-width:650px;
margin:28px auto 0;
color:#d0d0d2;
font-size:clamp(1rem,1.4vw,1.2rem);
line-height:1.72;
text-shadow:
0 2px 12px rgba(0,0,0,.45);
}
/* =========================================================
LIGHT SECTIONS
========================================================= */
.section-light{
background:var(--light);
color:var(--ink);
}
/* =========================================================
FOUNDER
========================================================= */
.about-founder{
padding:
clamp(78px,9vw,130px)
0;
}
.founder-image-wrap{
position:relative;
max-width:500px;
margin:0 auto;
}
.founder-image{
display:block;
width:100%;
max-width:500px;
aspect-ratio:4 / 5;
object-fit:cover;
box-shadow:
0 18px 45px rgba(0,0,0,.14);
}
.image-corner{
position:absolute;
width:30px;
height:30px;
border-color:var(--volt);
border-style:solid;
z-index:2;
}
.image-corner.top-left{
top:16px;
left:16px;
border-width:2px 0 0 2px;
}
.image-corner.bottom-right{
right:16px;
bottom:16px;
border-width:0 2px 2px 0;
}
.image-caption{
position:absolute;
left:16px;
bottom:16px;
background:rgba(10,10,11,.72);
color:var(--paper);
padding:7px 11px;
font-family:'JetBrains Mono',monospace;
font-size:.66rem;
letter-spacing:.10em;
text-transform:uppercase;
backdrop-filter:blur(5px);
}
.dark-eyebrow{
color:#667000;
margin-bottom:15px;
}
.dark-eyebrow::before{
background:#667000;
}
.section-title{
font-size:clamp(2.45rem,4.5vw,4.5rem);
margin:0 0 20px;
}
.dark-title{
color:var(--ink);
}
.founder-lede{
color:#2d2e31;
font-size:clamp(1.08rem,1.35vw,1.22rem);
font-weight:500;
line-height:1.72;
margin:0 0 20px;
max-width:62ch;
}
.body-copy{
color:#4f5359;
font-size:1.05rem;
line-height:1.75;
margin:0 0 20px;
max-width:68ch;
}
.body-copy strong{
color:var(--ink);
font-weight:700;
}
/* =========================================================
STATS
========================================================= */
.stats-section{
background:var(--ink);
padding:
clamp(60px,7vw,88px)
0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.stat-item{
padding:8px 15px;
}
.stat-number{
font-family:'Anton',sans-serif;
color:var(--volt);
font-size:clamp(2.4rem,4vw,4rem);
line-height:.95;
margin-bottom:10px;
white-space:nowrap;
}
.stat-label{
font-family:'JetBrains Mono',monospace;
font-size:.70rem;
font-weight:500;
color:#bdbdc1;
letter-spacing:.12em;
line-height:1.45;
text-transform:uppercase;
}
/* =========================================================
EXTENDED BIO
========================================================= */
.extended-bio{
padding:
clamp(80px,9vw,130px)
0;
}
.content-narrow{
max-width:900px;
margin:0 auto;
text-align:center;
}
.centered-eyebrow{
justify-content:center;
}
.centered-title{
margin-top:14px;
margin-bottom:32px;
}
.large-copy{
max-width:850px;
margin-left:auto;
margin-right:auto;
font-size:clamp(1.02rem,1.25vw,1.15rem);
line-height:1.8;
}
/* =========================================================
SPECIALIZATIONS
========================================================= */
.specializations-section{
padding:
0
0
clamp(80px,9vw,130px);
}
.section-heading-center{
max-width:900px;
margin:0 auto clamp(45px,5vw,65px);
text-align:center;
}
.dark-lede{
max-width:800px;
margin:0 auto;
color:#55575b;
font-size:1.05rem;
line-height:1.75;
}
.specialization-grid{
margin-top:10px;
}
.specialization-card{
position:relative;
min-height:440px;
overflow:hidden;
background:#151517;
border:1px solid #2d2d31;
display:flex;
align-items:flex-end;
transition:
border-color .3s ease,
transform .3s ease;
}
.specialization-card:hover{
border-color:var(--volt);
transform:translateY(-4px);
}
.specialization-card > img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
filter:
grayscale(40%)
brightness(.48);
transition:
transform .7s var(--ease),
filter .5s ease;
}
.specialization-card:hover > img{
transform:scale(1.06);
filter:
grayscale(0%)
brightness(.56);
}
.specialization-card::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(10,10,11,0) 25%,
rgba(10,10,11,.55) 55%,
rgba(10,10,11,.97) 90%
);
}
.specialization-content{
position:relative;
z-index:2;
width:100%;
padding:30px;
}
.specialization-number{
font-family:'JetBrains Mono',monospace;
color:var(--volt);
font-size:.74rem;
letter-spacing:.10em;
text-transform:uppercase;
}
.specialization-content h3{
color:#fff;
font-size:clamp(1.7rem,2.5vw,2.4rem);
margin:12px 0 12px;
line-height:1;
}
.specialization-content p{
color:#e5e5e5;
font-family:'Archivo',sans-serif;
font-size:.98rem;
line-height:1.65;
margin:0;
max-width:55ch;
}
/* =========================================================
FEATURED PORTFOLIO
========================================================= */
.portfolio-section{
padding:
0
0
clamp(85px,10vw,140px);
}
.portfolio-grid{
display:grid;
grid-template-columns:
repeat(4,minmax(0,1fr));
grid-auto-rows:260px;
gap:14px;
}
.portfolio-item{
position:relative;
display:block;
width:100%;
height:100%;
padding:0;
border:0;
overflow:hidden;
background:#151517;
cursor:pointer;
text-align:left;
}
.portfolio-item.portfolio-large{
grid-column:span 2;
grid-row:span 2;
}
.portfolio-item.portfolio-wide{
grid-column:span 2;
}
.portfolio-item img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:
transform .55s var(--ease),
filter .4s ease;
}
.portfolio-item::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(10,10,11,0) 35%,
rgba(10,10,11,.55) 100%
);
opacity:.65;
transition:opacity .35s ease;
}
.portfolio-item:hover img{
transform:scale(1.06);
filter:brightness(.85);
}
.portfolio-item:hover::after{
opacity:1;
}
.portfolio-overlay{
position:absolute;
right:18px;
bottom:18px;
z-index:3;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
background:var(--volt);
color:var(--ink);
opacity:0;
transform:translateY(8px);
transition:
opacity .3s ease,
transform .3s ease;
}
.portfolio-item:hover .portfolio-overlay{
opacity:1;
transform:translateY(0);
}
.portfolio-overlay i{
font-size:.85rem;
}
/* =========================================================
LIGHTBOX
========================================================= */
.portfolio-lightbox{
position:fixed;
inset:0;
z-index:5000;
background:rgba(0,0,0,.94);
display:flex;
align-items:center;
justify-content:center;
padding:50px;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity .25s ease,
visibility .25s ease;
}
.portfolio-lightbox.open{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.portfolio-lightbox img{
display:block;
max-width:min(92vw,1400px);
max-height:88vh;
width:auto;
height:auto;
object-fit:contain;
box-shadow:
0 20px 80px rgba(0,0,0,.55);
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
position:absolute;
z-index:10;
border:1px solid rgba(255,255,255,.22);
background:rgba(10,10,11,.65);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease;
}
.lightbox-close{
top:20px;
right:25px;
width:48px;
height:48px;
}
.lightbox-prev,
.lightbox-next{
top:50%;
width:50px;
height:50px;
transform:translateY(-50%);
}
.lightbox-prev{
left:25px;
}
.lightbox-next{
right:25px;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
background:var(--volt);
color:var(--ink);
border-color:var(--volt);
}
body.lightbox-open{
overflow:hidden;
}
/* =========================================================
ACHIEVEMENTS
========================================================= */
.achievements-section{
background:var(--ink);
color:var(--paper);
padding:
clamp(80px,9vw,130px)
0;
border-top:1px solid var(--line);
}
.dark-section-title{
color:var(--paper);
font-size:clamp(2.5rem,4.5vw,4.5rem);
margin:
15px 0
55px;
}
.achievement-heading{
font-family:'Anton',sans-serif;
color:var(--paper);
font-size:1.55rem;
font-weight:400;
letter-spacing:.04em;
text-transform:uppercase;
margin-bottom:28px;
}
.achievement-list{
list-style:none;
padding:0;
margin:0;
}
.achievement-list li{
position:relative;
padding:
0
0
18px
27px;
margin-bottom:15px;
color:#d5d5d8;
font-family:'Archivo',sans-serif;
font-size:1.05rem;
line-height:1.65;
}
.achievement-list li i{
position:absolute;
left:0;
top:10px;
color:var(--volt);
font-size:7px;
}
/* =========================================================
OWNER CTA
========================================================= */
.owner-cta-section{
background:var(--ink);
color:var(--paper);
padding:
clamp(75px,9vw,120px)
0;
border-top:1px solid var(--line);
}
.owner-cta-inner{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:35px;
}
.owner-cta-copy{
max-width:650px;
}
.owner-cta-copy .dark-section-title{
margin-bottom:18px;
font-size:clamp(2.2rem,4vw,3.5rem);
}
.owner-cta-copy p{
color:#c2c2c6;
font-size:1.05rem;
line-height:1.72;
margin:0;
max-width:62ch;
}
.owner-cta-actions{
display:flex;
flex-wrap:wrap;
gap:14px;
flex-shrink:0;
}
/* =========================================================
ACCESSIBILITY
========================================================= */
.a11y-btn{
position:fixed;
right:22px;
bottom:22px;
z-index:1200;
width:52px;
height:52px;
border-radius:50%;
background:var(--volt);
border:none;
display:flex;
align-items:center;
justify-content:center;
box-shadow:
0 8px 24px rgba(0,0,0,.4);
cursor:pointer;
transition:
transform .25s ease;
}
.a11y-btn:hover{
transform:scale(1.08);
}
.a11y-btn i{
font-size:22px;
color:var(--ink);
}
.a11y-panel{
position:fixed;
right:22px;
bottom:86px;
z-index:1200;
width:240px;
background:var(--charcoal);
border:1px solid var(--line);
padding:18px;
transform:
translateY(12px)
scale(.96);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.25s ease;
}
.a11y-panel.open{
transform:
translateY(0)
scale(1);
opacity:1;
visibility:visible;
pointer-events:auto;
}
.a11y-panel h5{
font-family:'JetBrains Mono',monospace;
font-size:.70rem;
letter-spacing:.10em;
text-transform:uppercase;
color:var(--volt);
margin-bottom:14px;
}
.a11y-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:8px 0;
border-bottom:1px solid var(--line);
font-family:'Archivo',sans-serif;
font-size:.84rem;
color:var(--grey);
}
.a11y-row:last-child{
border-bottom:none;
}
.a11y-toggle{
width:36px;
height:20px;
background:var(--line);
border-radius:20px;
position:relative;
cursor:pointer;
border:none;
flex-shrink:0;
}
.a11y-toggle::after{
content:"";
position:absolute;
top:2px;
left:2px;
width:16px;
height:16px;
border-radius:50%;
background:var(--paper);
transition:.2s ease;
}
.a11y-toggle.on{
background:var(--volt);
}
.a11y-toggle.on::after{
transform:translateX(16px);
background:var(--ink);
}
/* =========================================================
HIGH CONTRAST
========================================================= */
body.high-contrast{
background:#000;
}
body.high-contrast .section-light{
background:#fff;
color:#000;
}
body.high-contrast .display,
body.high-contrast p,
body.high-contrast span,
body.high-contrast a{
color:#fff;
}
body.high-contrast .section-light .display,
body.high-contrast .section-light p,
body.high-contrast .section-light span{
color:#000 !important;
}
/* =========================================================
LARGER TEXT
========================================================= */
html.larger-text body{
font-size:18px;
}
html.larger-text .body-copy{
font-size:1.12rem;
}
html.larger-text .dark-lede{
font-size:1.12rem;
}
/* =========================================================
REDUCED MOTION
========================================================= */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
@media (prefers-reduced-motion:reduce){
html{
scroll-behavior:auto;
}
*,
*::before,
*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:991.98px){
body{
font-size:16.5px;
}
.subpage-hero{
min-height:540px;
height:65vh;
}
.subpage-hero-image{
background-position:center center;
}
.subpage-title{
font-size:clamp(3rem,9vw,5rem);
}
.subpage-intro{
max-width:620px;
}
.portfolio-grid{
grid-template-columns:
repeat(2,minmax(0,1fr));
grid-auto-rows:240px;
}
.portfolio-item.portfolio-large{
grid-column:span 2;
grid-row:span 2;
}
.portfolio-item.portfolio-wide{
grid-column:span 2;
}
.owner-cta-inner{
align-items:flex-start;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:767.98px){
.container-xl{
padding-left:20px;
padding-right:20px;
}
.subpage-hero{
min-height:520px;
height:70vh;
padding:80px 0;
}
.subpage-hero-image{
background-position:center center;
transform:scale(1.04);
}
.subpage-hero-overlay{
background:
linear-gradient(
180deg,
rgba(10,10,11,.38) 0%,
rgba(10,10,11,.55) 45%,
rgba(10,10,11,.94) 100%
);
}
.hero-eyebrow{
font-size:.70rem;
letter-spacing:.16em;
margin-bottom:15px;
}
.subpage-title{
font-size:clamp(2.75rem,12vw,4.25rem);
max-width:95%;
}
.subpage-intro{
margin-top:22px;
font-size:.98rem;
line-height:1.65;
max-width:90%;
}
.about-founder{
padding:
70px
0;
}
.founder-image-wrap{
max-width:420px;
}
.portfolio-grid{
grid-template-columns:1fr;
grid-auto-rows:250px;
gap:12px;
}
.portfolio-item.portfolio-large,
.portfolio-item.portfolio-wide{
grid-column:span 1;
grid-row:span 1;
}
.portfolio-overlay{
opacity:1;
transform:none;
}
.owner-cta-inner{
display:block;
}
.owner-cta-actions{
margin-top:30px;
}
.a11y-btn{
right:16px;
bottom:16px;
width:48px;
height:48px;
}
.a11y-panel{
right:16px;
bottom:76px;
width:230px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width:480px){
.subpage-hero{
min-height:500px;
height:68vh;
}
.subpage-title{
font-size:clamp(2.55rem,13vw,3.6rem);
}
.subpage-intro{
font-size:.92rem;
max-width:94%;
}
.specialization-card{
min-height:390px;
}
.specialization-content{
padding:24px;
}
.owner-cta-actions{
flex-direction:column;
align-items:stretch;
}
.owner-cta-actions a{
width:100%;
}
.portfolio-lightbox{
padding:20px;
}
.lightbox-close{
top:12px;
right:12px;
}
.lightbox-prev{
left:12px;
}
.lightbox-next{
right:12px;
}
}
/* =========================================================
EXTRA HERO IMAGE QUALITY / POSITIONING
========================================================= */
@media (min-width:1200px){
.subpage-hero-image{
background-position:center 45%;
}
}
@media (max-width:767.98px){
.subpage-hero-image{
background-position:center center;
}
}
/* =========================================================
HERO IMAGE LOAD FALLBACK
========================================================= */
.subpage-hero-image{
background-color:#151517;
}
/* =========================================================
END
========================================================= */
/* =========================================================
ABOUT PAGE — SOURCE-OF-TRUTH CONTENT UPDATES
========================================================= */
.founder-lede{
font-size:clamp(1.05rem,1.3vw,1.2rem);
}
.founder-lede + .body-copy{
margin-top:4px;
}
.property-management-about{
background:var(--ink);
color:var(--paper);
padding:clamp(80px,9vw,125px) 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
position:relative;
overflow:hidden;
}
.property-management-about::before{
content:"";
position:absolute;
width:360px;
height:360px;
border:1px solid rgba(198,255,61,.12);
border-radius:50%;
right:-140px;
top:-140px;
pointer-events:none;
}
.property-management-about .dark-section-title{
margin:15px 0 0;
}
.property-management-lede{
color:#d2d2d5;
font-size:clamp(1.05rem,1.4vw,1.2rem);
line-height:1.8;
max-width:700px;
margin:0 0 28px;
}
.management-capability-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0;
border-top:1px solid var(--line);
border-left:1px solid var(--line);
}
.management-capability{
min-height:76px;
display:flex;
align-items:center;
gap:14px;
padding:17px 18px;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
transition:background .25s ease, transform .25s ease;
}
.management-capability:hover{
background:rgba(198,255,61,.06);
transform:translateY(-2px);
}
.management-capability span{
color:var(--volt);
font-family:'JetBrains Mono',monospace;
font-size:.68rem;
letter-spacing:.08em;
}
.management-capability strong{
color:#fff;
font-size:.9rem;
font-weight:600;
}
.reveal-on-scroll{
opacity:0;
transform:translateY(22px);
transition:opacity .7s ease, transform .7s var(--ease);
}
.reveal-on-scroll.is-visible{
opacity:1;
transform:translateY(0);
}
.specialization-card.reveal-on-scroll{
transition:opacity .7s ease, transform .7s var(--ease), border-color .3s ease;
}
@media (max-width:991.98px){
.management-capability-grid{
grid-template-columns:1fr 1fr;
}
}
@media (max-width:575.98px){
.management-capability-grid{
grid-template-columns:1fr;
}
.management-capability{
min-height:68px;
}
.property-management-lede{
font-size:1rem;
}
}
@media (prefers-reduced-motion:reduce){
.reveal-on-scroll{
opacity:1;
transform:none;
transition:none;
}
}
/* =========================================================
FEATURED PORTFOLIO — CURATED PROPERTY PRESENTATION
Client-requested cleanup:
- No repeated property imagery
- No generic/random portfolio tiles
- One representative image per identified property
========================================================= */
.portfolio-grid--curated{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-rows:minmax(420px,48vw);
max-width:1180px;
margin-left:auto;
margin-right:auto;
gap:18px;
}
.portfolio-grid--curated .portfolio-property{
grid-column:span 1;
grid-row:span 1;
min-height:420px;
border:1px solid #d8d8d3;
background:#151517;
isolation:isolate;
}
.portfolio-grid--curated .portfolio-property img{
position:absolute;
inset:0;
z-index:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
.portfolio-property-overlay{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(
180deg,
rgba(10,10,11,.02) 20%,
rgba(10,10,11,.08) 45%,
rgba(10,10,11,.82) 82%,
rgba(10,10,11,.97) 100%
);
pointer-events:none;
}
.portfolio-property-info{
position:absolute;
left:28px;
right:80px;
bottom:27px;
z-index:3;
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
color:#fff;
pointer-events:none;
}
.portfolio-property-info .portfolio-property-label{
margin-bottom:8px;
color:var(--volt);
font-family:'JetBrains Mono',monospace;
font-size:.68rem;
font-weight:600;
letter-spacing:.16em;
line-height:1.4;
text-transform:uppercase;
}
.portfolio-property-info strong{
color:#fff;
font-family:'Anton',sans-serif;
font-size:clamp(2rem,3.2vw,3.3rem);
font-weight:400;
letter-spacing:.015em;
line-height:.98;
text-transform:uppercase;
}
.portfolio-property-info > span:last-child{
margin-top:8px;
color:#e5e5e5;
font-family:'Archivo',sans-serif;
font-size:.92rem;
line-height:1.4;
}
.portfolio-grid--curated .portfolio-property::after{
opacity:1;
background:
linear-gradient(
180deg,
rgba(10,10,11,0) 25%,
rgba(10,10,11,.14) 50%,
rgba(10,10,11,.88) 100%
);
}
.portfolio-grid--curated .portfolio-property:hover img{
transform:scale(1.045);
filter:brightness(.82);
}
.portfolio-grid--curated .portfolio-property:hover{
border-color:var(--volt);
}
.portfolio-grid--curated .portfolio-overlay{
opacity:1;
transform:translateY(0);
right:24px;
bottom:24px;
}
.portfolio-curated-note{
max-width:1180px;
margin:24px auto 0;
display:flex;
align-items:center;
justify-content:center;
gap:14px;
color:#707176;
font-family:'JetBrains Mono',monospace;
font-size:.62rem;
font-weight:500;
letter-spacing:.09em;
line-height:1.5;
text-align:center;
text-transform:uppercase;
}
.portfolio-curated-note-line{
width:34px;
height:1px;
flex:0 0 34px;
background:#c8c8c3;
}
.portfolio-lightbox button[hidden]{
display:none !important;
}
@media (max-width:991.98px){
.portfolio-grid--curated{
grid-template-columns:repeat(2,minmax(0,1fr));
grid-auto-rows:minmax(360px,52vw);
}
.portfolio-property-info{
left:22px;
right:68px;
bottom:22px;
}
.portfolio-property-info strong{
font-size:clamp(1.75rem,4vw,2.7rem);
}
}
@media (max-width:767.98px){
.portfolio-grid--curated{
grid-template-columns:1fr;
grid-auto-rows:360px;
gap:12px;
}
.portfolio-grid--curated .portfolio-property{
min-height:360px;
}
.portfolio-property-info{
left:20px;
right:64px;
bottom:20px;
}
.portfolio-property-info strong{
font-size:clamp(1.9rem,9vw,2.7rem);
}
.portfolio-curated-note{
align-items:flex-start;
font-size:.58rem;
padding:0 8px;
}
.portfolio-curated-note-line{
display:none;
}
}
@media (max-width:480px){
.portfolio-grid--curated{
grid-auto-rows:320px;
}
.portfolio-grid--curated .portfolio-property{
min-height:320px;
}
.portfolio-property-info{
left:17px;
right:58px;
bottom:17px;
}
.portfolio-property-info .portfolio-property-label{
font-size:.61rem;
}
.portfolio-property-info strong{
font-size:clamp(1.65rem,9vw,2.25rem);
}
.portfolio-property-info > span:last-child{
font-size:.82rem;
}
}/* End custom CSS */