/* =========================================================================
AVANT SPACES — Studio site stylesheet
-------------------------------------------------------------------------
DESIGN TOKENS live at the top of this file. To change the site's colors
or fonts everywhere at once, edit the values inside :root below —
nothing else needs to change.
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,340;9..144,440;9..144,500;9..144,600;9..144,680&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{
/* ---- COLOR ---- these are the ONLY color values used site-wide ---- */
--stone: #F6F6F3; /* page background — refined warm-neutral white */
--stone-deep: #ECECE7; /* slightly deeper panel background */
--ink: #0A0B0C; /* true near-black text */
--ink-soft: #64676A; /* secondary text */
--line: rgba(10,11,12,.10); /* hairline rules on light background */
--dark: #08090B; /* obsidian dark section background */
--dark-2: #0F1113; /* secondary dark surface */
--dark-line: rgba(255,255,255,.10);
--paper-line: #F1F1EE; /* linework stroke color on dark background */
--brass: #A9814F; /* single accent — refined brass/gold, used sparingly */
--brass-soft: #E3C795; /* lighter brass for hover / dark bg */
--brass-glow: rgba(169,129,79,.35);
/* ---- TYPE ---- */
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'Inter', -apple-system, Segoe UI, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
--wrap: 1240px;
/* ---- MOTION ---- */
--ease: cubic-bezier(.16,1,.3,1);
--ease-soft: cubic-bezier(.22,1,.36,1);
--dur-s: .35s;
--dur-m: .6s;
--dur-l: 1.1s;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
background:var(--stone);
color:var(--ink);
font-family:var(--font-body);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden; /* safety net: nothing should ever cause horizontal scroll/clipping */
animation:pageFadeIn .45s var(--ease) both;
}
@keyframes pageFadeIn{ from{ opacity:0; } to{ opacity:1; } }
body.page-leaving{ opacity:0; transition:opacity .22s ease; }
@media (prefers-reduced-motion:reduce){
body{ animation:none; }
body.page-leaving{ transition:none; opacity:1; }
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:500; letter-spacing:-0.015em; }
p{ margin:0; }
::selection{ background:var(--ink); color:var(--stone); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 40px; }
.eyebrow{
display:flex; align-items:center; gap:10px;
font-family:var(--font-mono);
font-size:11.5px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--brass);
margin-bottom:16px;
}
.eyebrow::before{
content:''; width:7px; height:7px; border-radius:50%;
background:var(--brass); flex:none;
box-shadow:0 0 0 4px var(--brass-glow);
}
/* -------------------------------------------------------------------------
GLOBAL CHROME — scroll progress bar + ambient cursor glow
(elements injected by js/main.js; purely decorative, no layout impact)
------------------------------------------------------------------------- */
.scroll-progress{
position:fixed; top:0; left:0; height:2px; width:0%;
background:linear-gradient(90deg, var(--brass), var(--brass-soft));
z-index:999; transition:width .08s linear;
box-shadow:0 0 10px var(--brass-glow);
}
.cursor-glow{
position:fixed; top:0; left:0; width:520px; height:520px;
margin:-260px 0 0 -260px;
background:radial-gradient(circle, var(--brass-glow) 0%, rgba(169,129,79,0) 70%);
pointer-events:none; z-index:1; opacity:0; will-change:transform;
transition:opacity .4s ease;
}
.cursor-glow.is-active{ opacity:.55; }
@media (max-width:980px), (pointer:coarse){ .cursor-glow{ display:none; } }
/* -------------------------------------------------------------------------
NAV — frosted, compresses on scroll
------------------------------------------------------------------------- */
.site-nav{
position:sticky; top:0; z-index:50;
background:rgba(246,246,243,.92);
border-bottom:1px solid var(--line);
transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), transform .35s var(--ease);
}
.site-nav.nav-hidden{ transform:translateY(-100%); }
.site-nav .wrap{
display:flex; align-items:center; justify-content:space-between;
height:88px;
transition:height var(--dur-s) var(--ease);
}
.site-nav.is-scrolled{
box-shadow:0 12px 34px -22px rgba(0,0,0,.35);
}
.site-nav.is-scrolled .wrap{ height:66px; }
.logo{
font-family:var(--font-display);
font-size:20px;
letter-spacing:.02em;
transition:opacity var(--dur-s) var(--ease);
}
.logo span{ color:var(--brass); }
.nav-links{ display:flex; gap:38px; align-items:center; }
.nav-links a{
font-size:13.5px; font-weight:500;
letter-spacing:.01em;
position:relative;
padding:4px 0;
}
.nav-links a:not(.btn)::after{
content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1px;
background:var(--ink); transition:right .38s var(--ease);
}
.nav-links a:not(.btn):hover::after, .nav-links a.is-active:not(.btn)::after{ right:0; }
.nav-links a.is-active:not(.btn){ color:var(--brass); }
.nav-links .btn{ padding:10px 20px; }
.nav-toggle{ display:none; }
/* -------------------------------------------------------------------------
BUTTONS — magnetic, with a sweeping fill
------------------------------------------------------------------------- */
.btn{
display:inline-flex; align-items:center; gap:10px;
position:relative; isolation:isolate; overflow:hidden;
border:1px solid var(--ink);
border-radius:999px;
padding:13px 24px;
font-family:var(--font-mono);
font-size:11.5px;
letter-spacing:.09em;
text-transform:uppercase;
transition:color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
will-change:transform;
}
.btn::before{
content:''; position:absolute; inset:0; z-index:-1;
background:var(--ink);
transform:translateY(102%);
transition:transform .45s var(--ease);
border-radius:inherit;
}
.btn:hover{ color:var(--stone); box-shadow:0 14px 30px -14px rgba(0,0,0,.35); }
.btn:hover::before{ transform:translateY(0); }
.btn-solid{ background:var(--ink); color:var(--stone); }
.btn-solid::before{ background:var(--brass); }
.btn-solid:hover{ border-color:var(--brass); color:#fff; }
.btn-arrow{ transition:transform var(--dur-s) var(--ease); display:inline-block; }
.btn:hover .btn-arrow{ transform:translateX(5px); }
.on-dark .btn{ border-color:var(--dark-line); color:var(--paper-line); }
.on-dark .btn::before{ background:var(--brass-soft); }
.on-dark .btn:hover{ border-color:var(--brass-soft); color:var(--dark); }
.on-dark .btn-solid{ background:var(--brass-soft); color:var(--dark); border-color:var(--brass-soft); }
.on-dark .btn-solid::before{ background:var(--stone); }
.on-dark .btn-solid:hover{ color:var(--dark); }
/* -------------------------------------------------------------------------
CROP-MARK FRAME — refined to a single signature device, used only
around the hero drawing rather than scattered across every card.
------------------------------------------------------------------------- */
.crop-frame{ position:relative; }
.crop-frame{ padding:0; }
.form-inner{ padding:40px; }
@media (max-width:680px){ .form-inner{ padding:30px 22px; } }
.crop-frame .corner{
position:absolute; width:20px; height:20px; pointer-events:none;
border-color:var(--brass); opacity:0;
transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.corner.tl{ top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; transform:translate(4px,4px); }
.corner.tr{ top:-1px; right:-1px; border-top:2px solid; border-right:2px solid; transform:translate(-4px,4px); }
.corner.bl{ bottom:-1px; left:-1px; border-bottom:2px solid; border-left:2px solid; transform:translate(4px,-4px); }
.corner.br{ bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; transform:translate(-4px,-4px); }
.hero-art .corner, #contact-form .corner{ opacity:1; transform:none; }
/* -------------------------------------------------------------------------
HERO
------------------------------------------------------------------------- */
.hero{ padding:120px 0 130px; position:relative; overflow:clip; }
.hero::before{
content:''; position:absolute; top:-220px; right:-160px; width:680px; height:680px;
background:radial-gradient(circle, var(--brass-glow) 0%, rgba(169,129,79,0) 68%);
pointer-events:none; z-index:0;
}
.hero .wrap{
display:grid; grid-template-columns:1.1fr .9fr; gap:72px; align-items:center;
position:relative; z-index:1;
}
.hero-copy{ opacity:0; transform:translateY(26px); animation:heroIn .9s var(--ease) .15s forwards; }
.hero-art{ opacity:0; transform:translateY(26px) scale(.97); animation:heroIn 1s var(--ease) .35s forwards; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }
.hero-kicker{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.hero-kicker .rule{ width:40px; height:1px; background:var(--brass); }
.hero-kicker .eyebrow{ margin-bottom:0; }
.hero h1{
font-size:clamp(42px,6vw,76px);
line-height:1.02;
letter-spacing:-.02em;
margin-bottom:28px;
}
.hero h1 em{ font-style:italic; color:var(--brass); }
.hero-sub{
font-size:17.5px; color:var(--ink-soft); max-width:46ch; margin-bottom:38px;
}
.hero-cta{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.hero-meta{
display:flex; gap:32px; margin-top:60px; padding-top:26px; border-top:1px solid var(--line);
font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); letter-spacing:.03em;
}
.hero-meta b{
display:block; color:var(--ink); font-size:24px; font-family:var(--font-display); font-weight:500;
font-variant-numeric:tabular-nums;
}
.hero-art{
position:relative; aspect-ratio:1/1.05; background:var(--dark); overflow:hidden;
border-radius:22px;
box-shadow:0 40px 90px -40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
transform-style:preserve-3d; will-change:transform;
transition:transform .5s var(--ease-soft);
}
.hero-art::after{
content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
background:
radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
}
.hero-art .noise{ position:absolute; inset:0; z-index:1; opacity:.05; mix-blend-mode:overlay; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
}
.hero-art svg{ position:absolute; inset:0; width:100%; height:100%; }
.hero-art .grid-dots{ position:absolute; inset:0; opacity:.4; }
.draw-line{
fill:none; stroke:var(--paper-line); stroke-width:1.4;
stroke-dasharray:2200; stroke-dashoffset:2200;
animation:draw 2.8s cubic-bezier(.65,0,.35,1) .5s forwards;
}
.draw-line.accent{ stroke:var(--brass-soft); filter:drop-shadow(0 0 6px var(--brass-glow)); }
@keyframes draw{ to{ stroke-dashoffset:0; } }
/* -------------------------------------------------------------------------
SECTION SCAFFOLDING
------------------------------------------------------------------------- */
section{ padding:130px 0; }
/* -------------------------------------------------------------------------
CLIENT MARQUEE — continuous logo scroll, pauses on hover, respects
reduced-motion. Edge fade via mask so logos scroll in/out smoothly.
------------------------------------------------------------------------- */
.client-marquee-section{ padding:64px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.marquee-label{
text-align:center; font-family:var(--font-mono); font-size:12px;
letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
margin-bottom:36px;
}
.marquee-track-wrap{
overflow:hidden; width:100%;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{ display:flex; width:max-content; will-change:transform; }
.marquee-set{ display:flex; align-items:center; gap:56px; padding-right:56px; }
.logo-box{
height:64px; width:150px; display:flex; align-items:center; justify-content:center;
flex:0 0 auto;
}
.logo-box img{
max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain;
transition:transform .35s var(--ease), filter .35s var(--ease);
}
.logo-box img:hover{
transform:translateY(-4px) scale(1.08);
filter:drop-shadow(0 10px 16px rgba(20,22,20,.14));
}
@media (max-width:680px){
.marquee-set{ gap:36px; padding-right:36px; }
.logo-box{ height:46px; width:110px; }
}
@media (prefers-reduced-motion:reduce){
.marquee-track-wrap{ overflow-x:auto; }
}
.section-head{
display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
margin-bottom:64px; padding-bottom:30px; border-bottom:1px solid var(--line);
position:relative;
}
.section-head::after{
content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0;
background:var(--brass); transition:width 1s var(--ease);
}
.section-head.is-visible::after{ width:64px; }
.section-head h2{ font-size:clamp(30px,3.6vw,44px); letter-spacing:-.02em; }
.section-head p{ color:var(--ink-soft); max-width:36ch; font-size:15px; }
.on-dark{ background:var(--dark); color:var(--stone); position:relative; }
.on-dark::before{
content:''; position:absolute; inset:0; opacity:.4; pointer-events:none; z-index:0;
background-image:url("data:image/svg+xml;utf8,");
}
.on-dark .wrap{ position:relative; z-index:1; }
.on-dark .section-head{ border-color:var(--dark-line); }
.on-dark .section-head p{ color:#9A9D9F; }
.on-dark .eyebrow{ color:var(--brass-soft); }
.on-dark .eyebrow::before{ background:var(--brass-soft); }
/* -------------------------------------------------------------------------
FOCUS / SERVICES — spec-sheet style list (deliberately not numbered:
these run in parallel, not in sequence)
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
WHY GRID — short, honest differentiators (About page). Deliberately
not testimonials — no fabricated client quotes.
------------------------------------------------------------------------- */
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--dark-line); border:1px solid var(--dark-line); }
.why-card{ background:var(--dark); padding:36px 34px; }
.why-card .num{ font-family:var(--font-mono); font-size:12px; color:var(--brass-soft); letter-spacing:.08em; display:block; margin-bottom:16px; }
.why-card h3{ font-size:21px; margin-bottom:10px; }
.why-card p{ color:#9A9D9F; font-size:15px; max-width:44ch; }
@media (max-width:680px){
.why-grid{ grid-template-columns:1fr; }
.why-card{ padding:28px 24px; }
}
/* -------------------------------------------------------------------------
EXPERTISE LIST — the trades/capabilities list (About page), styled
as a tag cloud so 15 short items read as a scope of work, not a
wall of bullet points.
------------------------------------------------------------------------- */
.expertise-list{ display:flex; flex-wrap:wrap; gap:12px; }
.expertise-list li{
font-family:var(--font-mono); font-size:13px; letter-spacing:.03em;
color:var(--ink); background:var(--stone-deep);
border:1px solid var(--line); border-radius:999px;
padding:10px 20px; transition:border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.expertise-list li:hover{ border-color:var(--brass); color:var(--brass); }
/* -------------------------------------------------------------------------
CLIENTELE — real named clients, two columns (Residential /
Commercial), from the client's own brochure.
------------------------------------------------------------------------- */
.clientele-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:56px; }
.clientele-grid h3{ font-size:19px; margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid var(--dark-line); }
.clientele-grid ul{ display:flex; flex-direction:column; gap:13px; }
.clientele-grid li{ font-size:15.5px; color:#C9CBC9; }
.clientele-grid .more-tag{
display:block; margin-top:18px; font-family:var(--font-mono); font-size:12px;
color:#8A8D8B; letter-spacing:.03em; font-style:italic;
}
/* Commercial-only variant (Residential column removed): one full-width
column, with the list flowing into two columns on desktop. */
.clientele-grid.single{ grid-template-columns:1fr; }
.clientele-grid.single ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:13px 56px; }
@media (max-width:680px){
.clientele-grid{ grid-template-columns:1fr; gap:36px; }
.clientele-grid.single ul{ grid-template-columns:1fr; }
}
.spec-list{ border-top:1px solid var(--line); }
.spec-row{
display:grid; grid-template-columns:220px 1fr 140px; gap:24px; align-items:baseline;
padding:32px 0; border-bottom:1px solid var(--line);
position:relative; overflow:hidden;
transition:padding-left var(--dur-m) var(--ease);
}
.spec-row::before{
content:''; position:absolute; inset:0 auto 0 0; width:2px; background:var(--brass);
transform:scaleY(0); transform-origin:top; transition:transform var(--dur-m) var(--ease);
}
.spec-row:hover{ padding-left:20px; }
.spec-row:hover::before{ transform:scaleY(1); }
.spec-row h3{ font-size:23px; transition:color var(--dur-s) var(--ease); }
.spec-row:hover h3{ color:var(--brass); }
.spec-row p{ color:var(--ink-soft); font-size:15px; max-width:52ch; }
.spec-row .tag{ font-family:var(--font-mono); font-size:11.5px; color:var(--brass); text-align:right; letter-spacing:.05em; }
/* -------------------------------------------------------------------------
WORK GRID
------------------------------------------------------------------------- */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.work-card{
position:relative; padding:16px;
opacity:0; transform:translateY(28px);
border-radius:18px;
transition:transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
will-change:transform;
}
.work-card:hover{ box-shadow:0 34px 70px -30px rgba(0,0,0,.55); }
/* Corner brackets removed from project cards entirely — on hover they
showed as a stray-looking mark above the image, so this decoration
just doesn't belong here (kept elsewhere, like the hero drawing). */
.work-card .corner{ display:none; }
.work-thumb{
position:relative; aspect-ratio:4/5; background:var(--stone-deep); overflow:hidden; margin-bottom:18px;
border-radius:12px;
}
.work-thumb::after{
content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.32) 100%);
opacity:0; transition:opacity var(--dur-s) var(--ease);
}
.work-card:hover .work-thumb::after{ opacity:1; }
.work-thumb svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.work-thumb img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .7s var(--ease-soft), filter .7s var(--ease-soft);
filter:saturate(1);
}
.work-card:hover .work-thumb img{ transform:scale(1.07); }
.work-info{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.work-info h3{ font-size:17.5px; transition:color var(--dur-s) var(--ease); }
.work-card:hover .work-info h3{ color:var(--brass-soft); }
.work-info span{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); }
.on-dark .work-info span{ color:#9A9D9F; }
.work-type{ font-size:12.5px; color:var(--brass); font-family:var(--font-mono); margin-top:6px; display:block; }
.on-dark .work-type{ color:var(--brass-soft); }
/* -------------------------------------------------------------------------
ABOUT teaser (home) / process steps (about page)
------------------------------------------------------------------------- */
.split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:start; }
.split p + p{ margin-top:18px; }
.lede{ font-family:var(--font-display); font-size:27px; line-height:1.45; font-weight:500; letter-spacing:-.01em; }
.body-copy{ color:var(--ink-soft); font-size:15.5px; }
.process{ counter-reset:step; border-top:1px solid var(--line); }
.step{
counter-increment:step;
display:grid; grid-template-columns:80px 1fr; gap:24px;
padding:36px 0; border-bottom:1px solid var(--line);
opacity:0; transform:translateY(22px);
position:relative;
}
.step::before{
content:counter(step,decimal-leading-zero);
font-family:var(--font-mono); font-size:14px; color:var(--brass);
padding-top:4px;
}
.step h3{ font-size:21px; margin-bottom:9px; }
.step p{ color:var(--ink-soft); font-size:15px; max-width:56ch; }
.on-dark .step p{ color:#9A9D9F; }
/* -------------------------------------------------------------------------
CONTACT
------------------------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:1fr .8fr; gap:64px; }
#contact-form{
background:var(--dark-2); border-radius:20px;
box-shadow:0 30px 70px -36px rgba(0,0,0,.6), 0 0 0 1px var(--dark-line) inset;
}
.field{ margin-bottom:24px; }
.field label{
display:block; font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase;
letter-spacing:.09em; color:#9A9D9F; margin-bottom:9px;
}
.field input, .field select, .field textarea{
width:100%; background:transparent; border:none; border-bottom:1px solid var(--dark-line);
padding:11px 2px; font-family:var(--font-body); font-size:16px; color:var(--stone);
transition:border-color var(--dur-s) var(--ease);
}
.field select{ color-scheme:dark; }
/* The dropdown list itself renders with the browser's native (usually
white) background on most devices, regardless of the dark form
around it — color-scheme:dark helps on some browsers but not all
(notably iOS Safari), so force readable dark text on the options
explicitly rather than relying on that alone. */
.field select option{
color:var(--ink); background:var(--stone);
}
.field input:focus, .field select:focus, .field textarea:focus{
outline:none; border-color:var(--brass-soft);
}
.field textarea{ resize:vertical; min-height:112px; }
.field.honey{ position:absolute; left:-9999px; opacity:0; }
#contact-form .btn-solid{ margin-top:6px; }
.contact-info dl{ font-family:var(--font-mono); font-size:14px; }
.contact-info dt{ color:var(--ink-soft); font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; margin-top:28px; }
.contact-info dt:first-child{ margin-top:0; }
.contact-info dd{ margin:7px 0 0; font-size:17.5px; font-family:var(--font-body); transition:color var(--dur-s) var(--ease); }
.contact-info dd a:hover{ color:var(--brass); }
.on-dark .contact-info dt{ color:#9A9D9F; }
.on-dark .contact-info dd{ color:var(--stone); }
.on-dark .contact-info dd a:hover{ color:var(--brass-soft); }
.form-status{ font-family:var(--font-mono); font-size:13px; margin-top:20px; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ color:#7FBE9C; }
.form-status.err{ color:#E08A78; }
/* -------------------------------------------------------------------------
FOOTER
------------------------------------------------------------------------- */
footer{ background:var(--dark); color:#9A9D9F; padding:64px 0 40px; position:relative; }
.foot-top{
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
padding-bottom:36px; border-bottom:1px solid var(--dark-line); margin-bottom:26px;
}
.foot-top .logo{ color:var(--stone); }
.foot-links{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.foot-links a{ color:#9A9D9F; font-size:13px; position:relative; transition:color var(--dur-s) var(--ease); }
.foot-links a::after{
content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
background:var(--brass-soft); transition:right .3s var(--ease);
}
.foot-links a:hover{ color:var(--stone); }
.foot-links a:hover::after{ right:0; }
.foot-bottom{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11.5px; flex-wrap:wrap; gap:12px; color:#7B7E80; }
/* -------------------------------------------------------------------------
SCROLL-REVEAL (progressive enhancement — JS adds .is-visible)
------------------------------------------------------------------------- */
.reveal{
opacity:0; transform:translateY(30px);
filter:blur(6px);
transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; filter:blur(0); }
.work-card.is-visible, .step.is-visible{
opacity:1; transform:none; filter:blur(0);
transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
.draw-line{ animation:none; stroke-dashoffset:0; }
.reveal, .work-card, .step, .hero-copy, .hero-art{ opacity:1; transform:none; filter:none; animation:none; }
.scroll-progress, .cursor-glow{ display:none; }
.site-nav{ transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease); }
.site-nav.nav-hidden{ transform:none; }
}
/* -------------------------------------------------------------------------
PAGE HERO (about / contact / gallery — shorter than home hero)
------------------------------------------------------------------------- */
.page-hero{ padding:78px 0 68px; border-bottom:1px solid var(--line); position:relative; overflow:clip; }
.page-hero::before{
content:''; position:absolute; top:-200px; left:-120px; width:520px; height:520px;
background:radial-gradient(circle, var(--brass-glow) 0%, rgba(169,129,79,0) 68%);
pointer-events:none;
}
.page-hero .wrap{ position:relative; opacity:0; transform:translateY(22px); animation:heroIn .8s var(--ease) .1s forwards; }
.page-hero h1{ font-size:clamp(36px,4.8vw,58px); max-width:16ch; letter-spacing:-.02em; }
.page-hero p{ margin-top:22px; color:var(--ink-soft); max-width:52ch; font-size:16px; }
/* Split variant — used on About and Contact to seat a page-specific
architectural drawing beside the intro text (a different drawing
per page — see the SVG in each file). */
.page-hero--split{ padding-bottom:0; overflow:visible; }
.page-hero--split .wrap{
display:grid; grid-template-columns:1.2fr .8fr; gap:44px; align-items:center;
opacity:1; transform:none; animation:none; padding-bottom:56px;
}
.page-hero-copy{ opacity:0; transform:translateY(22px); animation:heroIn .8s var(--ease) .1s forwards; }
.page-hero--split .hero-art{ aspect-ratio:1/0.92; }
@media (max-width:980px){
.page-hero--split .wrap{ grid-template-columns:1fr; gap:32px; }
.page-hero--split .hero-art{ order:-1; aspect-ratio:4/3; }
}
/* Contact page's location-pin ping — a small radar-style pulse marking
"you are here" on the site plan. Distinct from the one-time draw-in
used elsewhere: this one loops gently, fitting a page about getting
in touch right now. */
.pin-ping{
transform-origin:260px 392px; transform-box:fill-box;
animation:pinPing 2.6s ease-out infinite;
}
.pin-ping.delay{ animation-delay:1.3s; }
@keyframes pinPing{
0%{ transform:scale(.5); opacity:.65; }
75%{ transform:scale(2.4); opacity:0; }
100%{ transform:scale(2.4); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
.pin-ping{ animation:none; opacity:0; }
}
/* -------------------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------------------- */
@media (max-width:980px){
.hero .wrap{ grid-template-columns:1fr; gap:48px; }
.hero-art{ order:-1; aspect-ratio:4/3; }
.split{ grid-template-columns:1fr; gap:32px; }
.work-grid{ grid-template-columns:repeat(2,1fr); }
.contact-grid{ grid-template-columns:1fr; }
.spec-row{ grid-template-columns:1fr; gap:8px; }
.spec-row .tag{ text-align:left; }
}
@media (max-width:680px){
.nav-links{
position:fixed; top:76px; right:0; bottom:0; left:0; z-index:60; background:rgba(246,246,243,.98);
backdrop-filter:blur(18px);
flex-direction:column; align-items:flex-start; padding:36px;
transform:translateY(-8px); opacity:0; pointer-events:none;
transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.nav-links.is-open{ opacity:1; pointer-events:auto; transform:none; }
.nav-links a{ font-size:21px; }
.nav-links a.btn{ font-size:12px; margin-top:10px; }
.nav-toggle{
display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
z-index:60;
}
.nav-toggle span{ width:22px; height:1px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.work-grid{
display:flex; grid-template-columns:none; gap:16px;
overflow-x:auto; overflow-y:visible; padding:4px 24px 22px;
margin:0 -24px; scroll-snap-type:x proximity; scroll-padding-left:24px;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.work-grid::-webkit-scrollbar{ display:none; }
.work-grid .work-card{
flex:0 0 78vw; scroll-snap-align:start;
}
.work-scroll-hint{
display:flex; align-items:center; gap:8px; justify-content:center;
margin-top:4px; font-family:var(--font-mono); font-size:11px;
letter-spacing:.08em; text-transform:uppercase; color:#9A9D9F;
}
.work-scroll-hint svg{ width:14px; height:14px; animation:swipeHint 1.6s ease-in-out infinite; }
@keyframes swipeHint{ 0%,100%{ transform:translateX(0); opacity:.5; } 50%{ transform:translateX(5px); opacity:1; } }
.hero-meta{ flex-wrap:wrap; row-gap:20px; }
section{ padding:84px 0; }
.foot-top{ flex-direction:column; align-items:flex-start; }
}
@media (min-width:681px){
.work-scroll-hint{ display:none; }
}
/* -------------------------------------------------------------------------
GALLERY PAGE — grouped by project, several images each
------------------------------------------------------------------------- */
.gallery-project{ padding:60px 0; border-bottom:1px solid var(--line); }
.gallery-project:last-child{ border-bottom:none; }
.gallery-project-head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.gallery-project-head h2{ font-size:27px; }
.gallery-project-head .work-type{ font-family:var(--font-mono); font-size:11.5px; color:var(--brass); letter-spacing:.05em; }
.gallery-grid{ column-count:3; column-gap:18px; }
.gallery-grid a{
display:block; break-inside:avoid; margin-bottom:18px;
border-radius:12px; overflow:hidden; position:relative;
background:var(--line); /* soft placeholder while a photo loads */
box-shadow:0 1px 2px rgba(20,22,20,.06);
}
.gallery-grid a::after{
content:''; position:absolute; inset:0; opacity:0;
background:linear-gradient(180deg, rgba(20,22,20,0) 55%, rgba(20,22,20,.35));
transition:opacity var(--dur-s) var(--ease);
}
.gallery-grid a:hover::after{ opacity:1; }
.gallery-grid img{ width:100%; height:auto; display:block; transition:transform .6s var(--ease-soft); }
.gallery-grid a:hover img{ transform:scale(1.03); }
.gallery-grid.single{ max-width:520px; }
@media (max-width:680px){
.gallery-grid{ column-count:2; }
}
/* -------------------------------------------------------------------------
LIGHTBOX — in-page image viewer for the Gallery. Opens over the
page (no new tab), supports zoom, closes on backdrop/Escape/×.
------------------------------------------------------------------------- */
.lightbox{
position:fixed; inset:0; z-index:200;
background:rgba(8,9,11,.94);
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .28s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.lightbox-stage{
width:90vw; height:88vh; display:flex; align-items:center; justify-content:center;
overflow:hidden; cursor:grab;
}
.lightbox-stage.is-zoomed{ cursor:grab; }
.lightbox-stage.is-dragging{ cursor:grabbing; }
.lightbox-stage img{
max-width:90vw; max-height:88vh; width:auto; height:auto;
object-fit:contain; border-radius:6px;
box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
transform:scale(1) translate(0,0);
transition:transform .25s var(--ease);
user-select:none; -webkit-user-drag:none;
}
.lightbox-stage.is-dragging img{ transition:none; }
.lightbox-close{
position:absolute; top:20px; right:24px; z-index:2;
width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
background:rgba(255,255,255,.06); color:var(--stone);
font-size:26px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.lightbox-close:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); }
.lightbox-zoom{
position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2;
display:flex; gap:2px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
border-radius:999px; padding:4px;
}
.lightbox-zoom button{
width:40px; height:36px; border:none; background:none; color:var(--stone);
font-family:var(--font-mono); font-size:15px; cursor:pointer; border-radius:999px;
transition:background var(--dur-s) var(--ease);
}
.lightbox-zoom button:hover{ background:rgba(255,255,255,.12); }
.lightbox-zoom button[data-zoom="reset"]{ font-size:11px; letter-spacing:.04em; }
@media (max-width:680px){
.lightbox-close{ top:14px; right:14px; width:38px; height:38px; font-size:22px; }
.lightbox-zoom{ bottom:16px; }
}
/* -------------------------------------------------------------------------
GALLERY — COLLAPSIBLE CATEGORIES
Each category (Commercial / Residential) is a collapsible card. The
default open/closed state is viewport-driven and expressed purely in
CSS off the [data-open] attribute, so the right state paints with no
flash even before js/main.js runs:
• Desktop (>680px): OPEN unless [data-open="false"] → collapse via
the toggle in the card's top-right corner.
• Mobile (<=680px): COLLAPSED unless [data-open="true"] → both
categories are visible at a glance; a tap expands one.
The height animation uses grid-template-rows 0fr↔1fr, which animates
smoothly without needing to measure the (variable) content height.
js/main.js only flips data-open + keeps aria-expanded in sync.
------------------------------------------------------------------------- */
/* Gallery cards are very tall (dozens of images). A blur() filter on an
element that size — even blur(0) once revealed — forces the browser to
repaint/composite the whole card as one layer, which makes images
flicker or blank out while scrolling (worst on phones). Fade + rise only. */
.gallery-cat.reveal, .gallery-cat.reveal.is-visible{ filter:none; }
.gallery-cats{ padding-top:40px; }
.gallery-cats .wrap{ display:flex; flex-direction:column; gap:26px; }
.gallery-cat{
position:relative;
border:1px solid var(--line);
border-radius:22px;
background:var(--stone);
padding:0 clamp(20px,3vw,36px);
transition:box-shadow var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.gallery-cat:hover{ border-color:rgba(169,129,79,.38); box-shadow:0 30px 70px -46px rgba(0,0,0,.4); }
/* clickable header */
.gallery-cat-head{
position:relative; cursor:pointer;
padding:clamp(26px,3vw,36px) 0 clamp(22px,2.4vw,30px);
-webkit-tap-highlight-color:transparent;
}
.gallery-cat-head:focus-visible{ outline:2px solid var(--brass); outline-offset:6px; border-radius:12px; }
.gallery-cat-bar{
display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
padding-right:132px; /* clear space for the corner toggle */
}
.gallery-cat-lead .eyebrow{ margin-bottom:14px; }
.gallery-cat-lead h2{ font-size:clamp(25px,3.1vw,40px); letter-spacing:-.02em; }
.gallery-cat-desc{ color:var(--ink-soft); max-width:34ch; font-size:15px; padding-bottom:5px; }
/* corner toggle control — the "option at the corner" */
.gallery-cat-toggle{
position:absolute; top:clamp(24px,2.8vw,34px); right:0;
display:flex; align-items:center; gap:14px; pointer-events:none;
}
.gallery-cat-count{
font-family:var(--font-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
color:var(--brass); white-space:nowrap;
}
.gallery-cat-icon{
width:46px; height:46px; flex:none; border-radius:50%;
border:1px solid var(--line); background:var(--stone);
display:flex; align-items:center; justify-content:center;
transition:border-color var(--dur-s) var(--ease), background var(--dur-s) var(--ease),
transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.gallery-cat-head:hover .gallery-cat-icon{
border-color:var(--brass); background:var(--brass);
transform:translateY(-2px); box-shadow:0 12px 22px -10px var(--brass-glow);
}
.gallery-cat-chevron{
width:17px; height:17px; color:var(--ink);
transition:transform .55s var(--ease), color var(--dur-s) var(--ease);
}
.gallery-cat-head:hover .gallery-cat-chevron{ color:var(--stone); }
/* preview peek — visible only when the card is collapsed */
.gallery-cat-preview{
display:flex; align-items:center; gap:10px;
margin-top:0; max-height:0; opacity:0; overflow:hidden; transform:translateY(-6px);
transition:max-height var(--dur-m) var(--ease), opacity var(--dur-m) var(--ease),
transform var(--dur-m) var(--ease), margin-top var(--dur-m) var(--ease);
}
.gallery-cat-preview img{
width:clamp(64px,17vw,96px); height:clamp(48px,12vw,70px);
object-fit:cover; border-radius:9px; flex:none;
box-shadow:0 2px 10px -4px rgba(20,22,20,.4);
}
.gallery-cat-more{
font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em;
color:var(--ink-soft); white-space:nowrap; margin-left:4px;
}
/* collapsible panel — smooth height via grid-template-rows 0fr↔1fr */
.gallery-cat-panel{
display:grid; grid-template-rows:1fr;
transition:grid-template-rows .6s var(--ease);
}
.gallery-cat-panel-inner{ min-height:0; overflow:hidden; }
.gallery-cat-panel-inner .gallery-grid{ padding:6px 0 clamp(30px,3vw,38px); }
/* ---- viewport-driven defaults + explicit toggle states ---- */
/* Desktop / laptop: OPEN by default; only [data-open="false"] collapses */
@media (min-width:681px){
.gallery-cat[data-open="false"] .gallery-cat-panel{ grid-template-rows:0fr; }
.gallery-cat:not([data-open="false"]) .gallery-cat-chevron{ transform:rotate(180deg); }
.gallery-cat[data-open="false"] .gallery-cat-preview{
max-height:120px; opacity:1; transform:none; margin-top:22px;
}
}
/* Mobile: COLLAPSED by default; only [data-open="true"] expands */
@media (max-width:680px){
.gallery-cat:not([data-open="true"]) .gallery-cat-panel{ grid-template-rows:0fr; }
.gallery-cat[data-open="true"] .gallery-cat-chevron{ transform:rotate(180deg); }
.gallery-cat:not([data-open="true"]) .gallery-cat-preview{
max-height:120px; opacity:1; transform:none; margin-top:22px;
}
.gallery-cat-bar{ flex-direction:column; align-items:flex-start; gap:12px; padding-right:64px; }
.gallery-cat-desc{ max-width:none; }
.gallery-cat-count{ display:none; }
.gallery-cat-toggle{ top:clamp(22px,6vw,30px); }
.gallery-cat-icon{ width:42px; height:42px; }
.gallery-cat-preview img{ width:23vw; height:16vw; }
}
@media (prefers-reduced-motion:reduce){
.gallery-cat-panel, .gallery-cat-chevron, .gallery-cat-preview,
.gallery-cat-icon, .gallery-cat{ transition:none; }
}
/* -------------------------------------------------------------------------
FOOTER SOCIAL — Instagram + Facebook, at the right edge of the footer.
Hairline circular icon buttons that fill with brass on hover — the same
icon-button language used by the gallery toggle, so it reads as part of
the existing design rather than an add-on.
To add another network later: copy one