/* ============================================================
SIGNATURE RESIN PAVING — DARK DESIGN SYSTEM
Palette sampled directly from the SRP mark: brushed steel on plate black.
Monochrome only — no colour accent anywhere.
STEEL = structural / technical layer (labels, data, hairlines)
SILVER = action layer only (primary CTA, active state)
The diagonal slice through the S/R is reused as --slice on image frames.
============================================================ */
:root{
--ink: #08090A; /* plate black — sampled from the logo ground */
--charcoal: #0B0D0F; /* mid panel */
--stone-2: #0F1214; /* elevated panel */
--slate: #14171B; /* highest panel */
--concrete: #262B30; /* solid hairline / muted numerals */
--edge: #2A2F34;
--grey: #8A929A; /* secondary text */
--stone: #E6E9EC; /* primary light */
--green-deep: #182C13; /* section ground, brand hue */
--green-edge: #2A4220; /* hairlines on green */
--logo-green: #81A647; /* sampled from the SRP mark */
--green-lift: #94BC58; /* hover / small text on dark */ /* the green from the mark's rules */
--btn-green: #6EA43D; /* all buttons — deliberately distinct from --logo-green */
--btn-green-lift: #80B84D; /* button hover */
/* brushed-metal green — same anisotropic sheen technique as --brushed,
recoloured around the specified #6EA43D rather than flat fill */
--brushed-green: linear-gradient(100deg,#4C7A2C 0%,#6EA43D 17%,#A3DB68 32%,#5C8A31 52%,#8FCB54 71%,#456024 100%);
--steel: #9AA3AB; /* brushed steel — technical layer */
--steel-dim: #5E666D;
--silver: #E6E9EC; /* polished silver — action layer */
--white-hot: #F7F9FA;
--sand: var(--steel); /* legacy alias */
--sand-lift: var(--steel);
/* anisotropic brushed-metal sheen, taken from the mark's surface */
--brushed: linear-gradient(100deg,#838485 0%,#CACACA 17%,#F0F0F0 32%,#989999 52%,#E2E2E1 71%,#8A8B8C 100%);
--steel-mid: #ACACAD; /* logo steel, mid tone */
/* brushed gunmetal — same sheen technique, darkened toward black/silver */
--brushed-black: linear-gradient(100deg,#151617 0%,#3B3D3F 17%,#6C7075 32%,#232426 52%,#5A5D61 71%,#0E0F10 100%);
--rule-light: rgba(230,233,236,.12);
--rule-dark: rgba(230,233,236,.12);
--display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, monospace;
/* image frames were cut with the mark's diagonal slice; now kept square */
--slice: none;
--pad: clamp(20px, 5vw, 76px);
--maxw: 1560px;
--nav-h: 92px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--ink);
/* Sticky nav overlays the page, so offset anchor jumps by its height —
without this every in-page link buries the target section's heading. */
scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
margin:0; background:var(--ink); color:var(--stone);
font-family:var(--body); font-size:15px; line-height:1.62;
-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,canvas{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
::selection{background:var(--edge); color:var(--white-hot)}
/* --- Type roles --- */
.display{
font-family:var(--display); font-weight:700;
font-variation-settings:"wdth" 118;
text-transform:uppercase; line-height:.92;
letter-spacing:-.02em; margin:0;
}
h1.display{font-size:clamp(38px,7.4vw,112px); letter-spacing:-.03em}
h2.display{font-size:clamp(22px,3vw,42px); letter-spacing:-.024em}
h3.display{font-size:clamp(17px,1.7vw,25px); font-variation-settings:"wdth" 110; letter-spacing:-.014em}
.lede{font-size:clamp(14.5px,1.05vw,17.5px); font-weight:500; line-height:1.55; color:rgba(230,233,236,.82); max-width:34ch}
.body-copy{color:rgba(230,233,236,.72); max-width:56ch}
.body-copy p{margin:0 0 1.1em}
.mono{font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase}
/* Honest placeholder marker */
.ph{
font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--steel); border:1px solid rgba(154,163,171,.36);
padding:3px 7px; display:inline-block; line-height:1.2; white-space:nowrap;
}
/* --- Layout --- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.sec{padding-top:clamp(76px,10vw,158px); padding-bottom:clamp(76px,10vw,158px)}
.sec-tight{padding-top:clamp(56px,6vw,92px); padding-bottom:clamp(56px,6vw,92px)}
.on-dark{background:var(--charcoal)}
.on-charcoal{background:#22252A}
/* --- Buttons --- */
.btn{
display:inline-flex; align-items:center; gap:14px;
font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
padding:16px 26px; border:1px solid var(--silver); background:var(--silver); color:var(--ink);
transition:background .35s, color .35s, border-color .35s; cursor:pointer;
}
.btn{position:relative; overflow:hidden}
.btn::before{content:""; position:absolute; inset:0; background:var(--brushed); opacity:0; transition:opacity .4s; z-index:0}
.btn:hover::before{opacity:.16}
.btn>*{position:relative; z-index:1}
.btn .ar{transition:transform .35s}
.btn:hover .ar{transform:translateX(6px)}
.btn:hover{background:transparent; color:var(--silver); border-color:var(--silver)}
.btn-green{
font-family:var(--display); font-weight:800; letter-spacing:.06em;
background:var(--brushed-green); border-color:var(--btn-green); color:#FFFFFF;
text-shadow:0 1px 3px rgba(0,0,0,.5); border-radius:999px;
box-shadow:0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.3);
transition:filter .35s, box-shadow .35s;
}
/* Continuous silver light sweep, like light catching brushed metal. */
.btn-green::after,.btn-black::after{
content:""; position:absolute; top:0; left:-60%; width:36%; height:100%;
background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
transform:skewX(-18deg); pointer-events:none;
animation:btn-shimmer 3.4s ease-in-out infinite;
}
@keyframes btn-shimmer{
0%{left:-60%} 32%{left:130%} 100%{left:130%}
}
@media (prefers-reduced-motion: reduce){ .btn-green::after,.btn-black::after{animation:none} }
.btn-green:hover{background:var(--brushed-green); color:#FFFFFF; filter:brightness(1.1); box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 5px rgba(0,0,0,.3)}
.btn-black{
font-family:var(--display); font-weight:800; letter-spacing:.06em;
background:var(--brushed-black); border-color:var(--steel-mid); color:#FFFFFF;
text-shadow:0 1px 3px rgba(0,0,0,.6); border-radius:999px;
box-shadow:0 4px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 5px rgba(0,0,0,.4);
transition:filter .35s, box-shadow .35s;
}
.btn-black:hover{background:var(--brushed-black); color:#FFFFFF; filter:brightness(1.2); box-shadow:0 6px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 5px rgba(0,0,0,.4)}
.btn-ghost{background:transparent; color:var(--stone); border-color:rgba(230,233,236,.34)}
.btn-ghost:hover{background:var(--stone); color:var(--ink); border-color:var(--stone)}
.on-dark .btn-ghost:hover,.finale .btn-ghost:hover{background:var(--stone); color:var(--ink)}
.btn-row{display:flex; flex-wrap:wrap; gap:14px}
.txtlink{
display:inline-flex; align-items:center; gap:11px; font-family:var(--mono);
font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
padding-bottom:7px; border-bottom:1px solid var(--steel); color:inherit;
}
.txtlink .ar{transition:transform .35s}
.txtlink:hover{color:var(--steel)}
.txtlink:hover .ar{transform:translateX(6px)}
:focus-visible{outline:2px solid var(--silver); outline-offset:3px}
/* ============================================================
NAV
============================================================ */
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:var(--stone); color:var(--ink); padding:12px 18px}
.nav{
position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
display:flex; align-items:center; color:var(--stone);
transition:background .45s, border-color .45s, height .45s;
border-bottom:1px solid transparent;
}
.nav.solid{background:rgba(10,11,12,.88); backdrop-filter:blur(16px); border-bottom-color:var(--rule-light); height:76px}
.nav-in{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); display:flex; align-items:center; gap:30px}
.mark{display:flex; align-items:center; gap:12px; flex:none}
.mark-lockup{display:block}
.mark-lockup img{width:min(272px,68vw); height:auto}
.mark-lockup-nav{height:56px; width:auto; transition:height .45s}
.nav.solid .mark-lockup-nav{height:46px}
.nav-links{display:flex; gap:clamp(11px,1.35vw,23px); margin-left:auto; align-items:center}
.nav-links a{
font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
font-size:clamp(11.5px,1.05vw,13.5px); letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
color:var(--stone); opacity:.9; position:relative; padding:7px 0; transition:opacity .3s, color .3s;
}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--logo-green); transition:right .4s}
.nav-links a:hover{opacity:1; color:var(--logo-green)}
.nav-drop{position:relative}
.nav-drop>a{display:inline-flex; align-items:center; gap:5px}
.nav-drop-chev{width:8px; height:8px; flex:none; transition:transform .3s}
.nav-drop:hover .nav-drop-chev,.nav-drop:focus-within .nav-drop-chev{transform:rotate(180deg)}
.nav-drop-menu{
/* No gap between the trigger and the menu — a margin/offset here would
be dead space with nothing hoverable in it, so moving the mouse down
into the menu breaks :hover and closes it before a click can land. */
position:absolute; top:100%; left:50%; z-index:5;
min-width:184px; padding:16px 8px 8px;
background:rgba(10,11,12,.97); backdrop-filter:blur(16px);
border:1px solid var(--rule-light);
opacity:0; visibility:hidden; pointer-events:none;
transform:translate(-50%,6px);
transition:opacity .3s, transform .3s, visibility .3s;
}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{
opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
}
.nav-drop-menu a{
display:block; padding:11px 14px;
font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
font-size:12px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
color:var(--stone); opacity:.82; transition:opacity .25s, color .25s, background .25s;
}
.nav-drop-menu a:hover{opacity:1; color:var(--logo-green); background:rgba(255,255,255,.045)}
.nav-links a:hover::after{right:0}
.nav-phone{
display:inline-flex; align-items:center; gap:9px; flex:none; white-space:nowrap;
font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
font-size:clamp(12px,1.1vw,14.5px); letter-spacing:.04em;
color:var(--stone); padding-left:clamp(12px,1.6vw,24px); margin-left:clamp(8px,1.2vw,18px);
border-left:1px solid var(--rule-light); transition:color .3s;
}
.nav-phone svg{width:16px; height:16px; color:var(--green-lift); flex:none}
.nav-phone:hover{color:var(--logo-green)}
.nav-phone-mobile{display:none}
.drawer-phone{
font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:16px; letter-spacing:.05em; color:var(--logo-green);
padding-top:6px; display:inline-block;
}
.nav-cta,.btn-diamond{
font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 100;
font-size:12px; letter-spacing:.09em; text-transform:uppercase;
border:0; color:#FFFFFF; text-shadow:0 1px 3px rgba(0,0,0,.5); background:var(--brushed-green);
box-shadow:0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 5px rgba(0,0,0,.3);
display:inline-flex; align-items:center; justify-content:center;
padding:14px 34px; flex:none; text-align:center; margin-left:clamp(12px,1.6vw,24px);
border-radius:999px;
transition:filter .35s, letter-spacing .35s, box-shadow .35s;
}
.nav .nav-cta:hover,.btn-diamond:hover{filter:brightness(1.1); letter-spacing:.13em; box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 5px rgba(0,0,0,.3)}
.nav .nav-cta:focus-visible,.btn-diamond:focus-visible{outline:0; background:var(--white-hot); color:var(--ink)}
.burger{display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer}
.burger span{display:block; width:21px; height:1.5px; background:currentColor; margin:4.5px 0; transition:transform .35s, opacity .35s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{
position:fixed; inset:0; z-index:99; background:var(--ink);
padding:calc(var(--nav-h) + 34px) var(--pad) 40px; display:flex; flex-direction:column;
transform:translateY(-100%); transition:transform .6s cubic-bezier(.7,0,.2,1); visibility:hidden;
overflow-y:auto;
}
.drawer.open{transform:translateY(0); visibility:visible}
.drawer nav{display:flex; flex-direction:column; border-top:1px solid var(--rule-light)}
.drawer nav a{
font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 115;
text-transform:uppercase; font-size:clamp(19px,5.2vw,26px); line-height:1;
padding:18px 0; border-bottom:1px solid var(--rule-light);
display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.drawer-group{border-bottom:1px solid var(--rule-light)}
.drawer-group-head{display:flex; align-items:stretch; gap:8px}
.drawer-group-head a{flex:1; padding:18px 0; border-bottom:0}
.drawer-group a{border-bottom:0}
/* Separate tap target from the label link, so the chevron toggles the
submenu while the text itself still navigates to the hub page. */
.drawer-toggle{
display:flex; align-items:center; justify-content:center;
width:44px; flex:none; margin:0 -10px 0 0; background:none; border:0; padding:0;
color:var(--steel); cursor:pointer;
}
.drawer-toggle-chev{width:12px; height:8px; transition:transform .4s cubic-bezier(.4,0,.2,1), color .3s}
.drawer-group.is-open .drawer-toggle-chev{transform:rotate(180deg); color:var(--logo-green)}
.drawer-sub{
max-height:0; overflow:hidden;
transition:max-height .45s cubic-bezier(.4,0,.2,1), border-color .4s;
border-left:1px solid transparent; margin-left:2px;
}
.drawer-group.is-open #drawer-sub-services{max-height:520px}
.drawer-group.is-open #drawer-sub-solutions{max-height:130px}
.drawer-group.is-open .drawer-sub{border-left-color:var(--rule-light)}
.drawer-sub-in{display:flex; flex-direction:column; padding:2px 0 16px}
/* Scoped with an extra class so this beats .drawer nav a's specificity —
without it, the submenu links inherited the top-level item size. */
.drawer .drawer-sub-in a{
font-family:var(--display); font-weight:600; text-transform:none;
font-size:14.5px; letter-spacing:0; padding:10px 0 10px 22px; border-bottom:0;
color:rgba(230,233,236,.62); display:block;
}
.drawer .drawer-sub-in a:hover{color:var(--logo-green)}
.drawer .drawer-sub-in a.is-current{color:var(--logo-green)}
.drawer-foot{margin-top:auto; padding-top:34px; display:grid; gap:14px; justify-items:stretch}
.drawer-foot .btn-diamond{padding:16px 40px}
/* ============================================================
HERO
============================================================ */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; background:var(--ink); overflow:hidden}
.hero-slides{position:absolute; inset:0}
.hero-slide{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:56% 54%;
opacity:0; transform:scale(1.045);
/* Tuned to the 1.5s interval: the fade has to finish well inside a slide's
turn or every frame is a crossfade. Zoom shortened to match. */
transition:opacity .55s cubic-bezier(.4,0,.2,1), transform 1.9s linear;
}
.hero-slide.is-active{opacity:1; transform:scale(1)}
.hero-slide:nth-child(1){object-position:48% 58%}
.hero-slide:nth-child(2){object-position:52% 60%}
/* Taller 3:2 source than the other two — bias down so the driveway fills the
frame and the house sits behind the headline rather than under it. */
.hero-slide:nth-child(3){object-position:50% 62%}
/* Wide 16:9 source: bias up so the house and garage stay in frame. */
.hero-slide:nth-child(4){object-position:50% 44%}
.hero-dots{position:absolute; right:var(--pad); bottom:clamp(28px,4vw,52px); display:flex; gap:10px; z-index:3}
.hero-dot{
width:30px; height:2px; padding:0; border:0; cursor:pointer;
background:rgba(230,233,236,.3); transition:background .4s, width .4s;
}
.hero-dot.is-on{background:var(--green-lift); width:46px}
.hero-dot:hover{background:rgba(230,233,236,.6)}
.hero-dot.is-on:hover{background:var(--logo-green)}
.hero-veil{
position:absolute; inset:0;
background:
/* True black rather than a visible green cast — reads as premium
rather than tinted. The brand colour survives only as a faint
glow at the very top, near the logo. */
radial-gradient(58% 42% at 50% 38%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.58) 46%, rgba(0,0,0,.2) 82%, rgba(0,0,0,0) 100%),
linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 24%, rgba(0,0,0,.2) 58%, rgba(0,0,0,.32) 78%, rgba(0,0,0,.7) 100%),
radial-gradient(90% 55% at 50% 6%, rgba(129,166,71,.06) 0%, rgba(0,0,0,0) 60%);
}
.hero-in{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); flex:1; display:flex; flex-direction:column; justify-content:flex-start; padding-bottom:clamp(34px,4.6vw,62px); padding-top:calc(var(--nav-h) + 32px)}
.hero h1{max-width:16ch; margin-bottom:26px}
.hero h1 .ln{display:block; overflow:hidden; padding-bottom:.05em; margin-bottom:-.05em}
.hero h1 .ln>span{display:block; transform:translateY(102%); animation:rise 1.15s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.12s}
.hero h1 .ln.is-accent>span{display:inline-block; border-bottom:4px solid var(--logo-green); padding-bottom:.09em}
@keyframes rise{to{transform:translateY(0)}}
.hero-sub{max-width:46ch; font-size:clamp(15px,1.25vw,18.5px); line-height:1.6; color:rgba(230,233,236,.8); margin:0 0 34px; opacity:0; animation:fade 1s ease .5s forwards}
@keyframes fade{to{opacity:1}}
/* --- Hero, art-directed to the supplied reference --- */
.hero-in{align-items:center; text-align:center}
.hero-copy{margin:auto; max-width:min(860px,94%); display:flex; flex-direction:column; align-items:center}
.hero-mark{height:clamp(46px,6vw,74px); width:auto; margin:0 0 clamp(18px,2.4vw,30px); filter:drop-shadow(0 4px 24px rgba(10,11,12,.55))}
.hero h1{
color:#FFFFFF;
max-width:15ch; margin:0 auto 22px; font-weight:700;
font-variation-settings:"wdth" 108; letter-spacing:-.022em; line-height:1.02;
font-size:clamp(34px,5.4vw,74px);
}
.hero-sub{
max-width:none; margin:0 auto clamp(20px,2.4vw,30px);
font-family:var(--display); font-weight:600; font-variation-settings:"wdth" 100;
text-transform:uppercase; letter-spacing:.17em;
font-size:clamp(11px,1.15vw,15px); line-height:1.5; color:rgba(230,233,236,.9);
text-shadow:0 1px 16px rgba(10,11,12,.85);
}
.hero-sub i{font-style:normal; color:var(--green-lift); padding:0 clamp(6px,.7vw,11px)}
.hero-place{
text-shadow:0 2px 20px rgba(10,11,12,.9);
display:flex; align-items:center; justify-content:center;
margin:0; color:var(--btn-green);
font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
text-transform:uppercase; letter-spacing:.13em; line-height:1;
font-size:clamp(20px,2.8vw,34px);
opacity:0; animation:fade 1s ease .68s forwards;
}
/* Continuous marquee ticker — thin black band, content scrolls seamlessly.
Two identical copies of the track sit side by side; animating the first
copy from 0 to -100% always has the second copy filling in behind it,
so the loop point is invisible. */
.marks-band{
position:relative; overflow:hidden; background:#22252A; color:#D6D7D8;
border-top:1px solid var(--green-lift); border-bottom:1px solid var(--green-lift);
}
.marks-band .wrap{display:flex; padding-top:0; padding-bottom:0; max-width:none; padding-left:0; padding-right:0}
.marks-track{display:flex; width:max-content; animation:marks-scroll 26s linear infinite}
.marks-band:hover .marks-track,.marks-band:focus-within .marks-track{animation-play-state:paused}
.marks{
list-style:none; margin:0; padding:0; flex:none;
display:flex; align-items:center; gap:0;
}
.marks li{
flex:none; display:flex; align-items:center; gap:11px;
padding:13px clamp(20px,2.6vw,40px); position:relative; text-align:left; white-space:nowrap;
}
.marks li::after{
content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
width:1px; height:16px; background:rgba(230,233,236,.18);
}
.mk-ico{width:18px; height:18px; color:var(--logo-green); flex:none}
.mk-ico svg{width:100%; height:100%; display:block}
.mk-txt{
font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
color:rgba(230,233,236,.82); white-space:nowrap;
}
@keyframes marks-scroll{ from{transform:translateX(0)} to{transform:translateX(-100%)} }
@media (prefers-reduced-motion: reduce){ .marks-track{animation:none} }
@media (max-width:980px){
.hero-slide{object-position:58% 52%}
}
@media (max-width:640px){
.hero-copy{max-width:100%}
/* 12ch was narrower than "resurfacing." at this size — ch tracks the "0"
glyph, and the caps in this display face are wider. Because .ln is
overflow:hidden for the rise-in animation, the overflow hard-clipped the
word instead of wrapping. 15ch clears the longest word at every phone
width while still forcing the three-line stack. */
.hero h1{font-size:clamp(30px,8.6vw,42px); max-width:15ch}
.hero-mark{height:34px; margin-bottom:14px}
.hero-veil{
background:
radial-gradient(70% 46% at 50% 40%, rgba(0,0,0,.68) 0%, rgba(0,0,0,.44) 46%, rgba(0,0,0,.12) 82%, rgba(0,0,0,0) 100%),
linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.26) 24%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.2) 78%, rgba(0,0,0,.58) 100%),
radial-gradient(90% 55% at 50% 6%, rgba(129,166,71,.06) 0%, rgba(0,0,0,0) 60%);
}
.marks-track{animation-duration:18s}
.marks li{padding:11px 18px}
.mk-txt{font-size:10px}
.mk-ico{width:16px; height:16px}
.hero-dots{position:static; justify-content:center; margin-top:26px}
}
@media (prefers-reduced-motion: reduce){
.marks-track{animation:none}
}
/* ============================================================
INTRO
============================================================ */
/* Copy sits on flat ground with the photo as a contained panel. The old
full-bleed background image forced a heavy scrim over every paragraph,
which is what made this section read as muddy at any size. */
/* Same deep cool graphite as the services section. Both run the gradient in
the same direction, so the join between them leaves a faint step rather
than merging the two into one undifferentiated block. */
.intro{background:var(--ink)}
.split.intro-split{align-items:start}
.intro-title{margin:0 0 26px; padding-bottom:20px; position:relative}
.intro-title::after{
content:""; position:absolute; left:0; bottom:0;
width:98px; height:3px; background:var(--logo-green);
}
.intro-copy p{
margin:0 0 1.1em; max-width:52ch;
color:var(--stone);
font-size:clamp(15px,1.06vw,16.5px); line-height:1.66;
}
.intro-copy p.intro-lead{color:var(--stone)}
.intro-copy p:last-child{margin-bottom:0}
.intro-label{
display:block; margin:32px 0 18px;
font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
font-size:11px; letter-spacing:.14em;
text-transform:uppercase; color:var(--logo-green);
}
.intro-checks{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:14px}
.intro-checks:last-child{margin-bottom:0}
.intro-checks li{
display:flex; align-items:flex-start; gap:14px;
color:var(--stone); font-weight:600; font-size:clamp(15px,1.04vw,16.5px); line-height:1.45;
}
/* Border-drawn tick rather than a glyph, so it stays crisp and identical
across fonts and platforms. */
.intro-checks li::before{
content:""; flex:none; width:15px; height:8px; margin-top:5px;
border-left:2px solid var(--logo-green);
border-bottom:2px solid var(--logo-green);
transform:rotate(-45deg);
}
/* ============================================================
SPLIT SECTIONS
============================================================ */
.split{display:grid; gap:clamp(34px,5vw,80px); align-items:center}
.split-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split .media{position:relative; aspect-ratio:4/5; background:var(--slate); overflow:hidden; clip-path:var(--slice)}
.split .media canvas,.split .media img{width:100%; height:100%; position:absolute; inset:0; object-fit:cover}
.media-tag{position:absolute; left:16px; bottom:16px; z-index:2; background:rgba(10,11,12,.6); backdrop-filter:blur(6px)}
.media-frame{display:none}
/* ============================================================
OUR SOLUTIONS
Two full-bleed tiles that become the entry points to the
residential and commercial pages.
============================================================ */
.solutions-sec{background:var(--ink)}
.solutions-head{text-align:center; margin-bottom:clamp(28px,3.4vw,44px)}
.solutions-title{display:inline-block; margin:0; padding-bottom:18px; position:relative}
.solutions-title::after{
content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0;
width:98px; height:3px; background:var(--logo-green);
}
.solutions{display:grid; grid-template-columns:1fr 1fr; gap:0}
.solution{position:relative; display:block; aspect-ratio:16/11; overflow:hidden; text-decoration:none}
.solution img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.solution:hover img{transform:scale(1.05)}
.solution-veil{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(10,11,12,.20) 0%, rgba(10,11,12,.46) 100%);
transition:background .45s;
}
.solution:hover .solution-veil{background:linear-gradient(180deg, rgba(10,11,12,.08) 0%, rgba(10,11,12,.34) 100%)}
.solution-label{
position:absolute; inset:0; z-index:2;
display:flex; align-items:center; justify-content:center; gap:12px;
font-family:var(--display); font-weight:700; text-transform:uppercase;
font-size:clamp(17px,2vw,28px); letter-spacing:.035em; color:var(--stone);
/* Tighter inner shadow plus the wide one: the wide glow alone stopped
holding the type once the tile veil was lightened. */
text-shadow:0 1px 4px rgba(10,11,12,.9), 0 2px 30px rgba(10,11,12,.75);
}
.solution .ar{display:inline-block; transition:transform .45s cubic-bezier(.16,1,.3,1)}
.solution:hover .ar{transform:translateX(7px)}
/* Keyboard focus needs to be visible on a photographic ground. */
.solution:focus-visible{outline:2px solid var(--logo-green); outline-offset:-4px}
@media (max-width:760px){
.solutions{grid-template-columns:1fr}
.solution{aspect-ratio:16/10}
}
.hlist{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--rule-light)}
.hlist li{
list-style:none; border-bottom:1px solid var(--rule-light);
padding:16px 4px 16px 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
display:flex; align-items:center; gap:12px; transition:color .3s;
}
.hlist li::before{content:""; width:5px; height:5px; background:var(--steel); flex:none; transition:background .3s}
.hlist li:hover::before{background:var(--silver)}
/* ============================================================
BEFORE / AFTER
============================================================ */
.ba{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--slate); user-select:none; touch-action:pan-y}
.ba canvas{position:absolute; inset:0; width:100%; height:100%}
.ba .after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-lbl{
position:absolute; top:18px; z-index:3; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
background:rgba(10,11,12,.66); color:var(--stone); padding:7px 12px; backdrop-filter:blur(6px);
border-left:2px solid var(--steel-dim);
}
.ba-lbl.l{left:18px}
.ba-lbl.r{right:18px; border-left:0; border-right:2px solid var(--silver)}
.ba-handle{position:absolute; top:0; bottom:0; left:var(--pos,50%); width:1px; background:var(--stone); z-index:4; pointer-events:none}
.ba-knob{
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:56px; height:56px; border:1px solid var(--stone); border-radius:50%;
background:rgba(10,11,12,.46); backdrop-filter:blur(6px);
display:flex; align-items:center; justify-content:center; gap:7px; color:var(--stone);
}
.ba-knob::before,.ba-knob::after{content:""; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent}
.ba-knob::before{border-right:6px solid currentColor}
.ba-knob::after{border-left:6px solid currentColor}
.ba-range{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:5; margin:0}
/* ============================================================
PERFORMANCE
============================================================ */
.perf{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--rule-light)}
.perf .cell{border-bottom:1px solid var(--rule-light); border-right:1px solid var(--rule-light); padding:30px 26px 34px; min-height:210px; display:flex; flex-direction:column; transition:background .4s}
.perf .cell:hover{background:var(--charcoal)}
.perf .cell:nth-child(4n){border-right:0}
.perf .num{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--steel); margin-bottom:22px}
.perf h3{font-family:var(--display); font-weight:600; font-variation-settings:"wdth" 112; text-transform:uppercase; font-size:15px; margin:0 0 12px; line-height:1.1}
.perf p{margin:0; font-size:13.2px; line-height:1.55; color:rgba(230,233,236,.62)}
.perf .cell-note{margin-top:auto; padding-top:20px}
/* ============================================================
SERVICES
============================================================ */
/* Deep cool graphite ground. Separated from its neighbours by value and
temperature rather than by a new hue, so the section reads as its own
plane without a second accent colour competing with the brand green.
The faint top-to-bottom gradient gives it depth on large screens. */
.services-sec{
--svc-panel:#26292E; /* photo backing, one step deeper */
--svc-rule:rgba(230,233,236,.11); /* cool steel hairline */
background:#22252A; /* charcoal grey, distinct from the near-black sections around it */
}
.services-sec .svc-index{border-top-color:var(--svc-rule)}
.services-sec .svc-row{border-bottom-color:var(--svc-rule)}
.services-sec .svc-stage{background:var(--svc-panel)}
.services-sec .svc-frame{border-color:rgba(230,233,236,.16)}
.svc-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:24px; margin-bottom:clamp(32px,3.8vw,52px)}
.svc-head .lede{max-width:38ch}
.svc{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:clamp(28px,3.6vw,64px); align-items:start}
/* preview */
.svc-stage{position:relative; aspect-ratio:4/5; background:var(--slate); overflow:hidden; clip-path:var(--slice); position:sticky; top:calc(var(--nav-h) + 26px)}
.svc-canvas{position:absolute; inset:0; width:100%; height:100%; opacity:0; transform:scale(1.05); transition:opacity .7s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.16,1,.3,1)}
.svc-canvas.is-on{opacity:1; transform:scale(1)}
/* Real photography in a stage slot: crop to fill rather than stretch, and
retire the "to be supplied" badge for that slot. */
img.svc-canvas{object-fit:cover; object-position:center}
.svc-stage.has-photo .svc-ph{opacity:0; visibility:hidden; transition:opacity .35s}
.svc-frame{display:none}
.svc-ph{position:absolute; left:18px; bottom:18px; background:rgba(10,11,12,.62); backdrop-filter:blur(6px)}
/* index */
.svc-index{border-top:1px solid var(--rule-light)}
.svc-row{
width:100%; background:none; border:0; cursor:pointer; text-align:left;
display:grid; grid-template-columns:46px minmax(0,1fr) 18px; align-items:start; gap:16px;
padding:19px 0; border-bottom:1px solid var(--rule-light);
transition:padding-left .45s cubic-bezier(.16,1,.3,1);
}
.svc-row:hover{padding-left:8px}
.svc-row.is-on{padding-left:8px}
.svc-n{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--steel-dim); padding-top:5px; transition:color .35s}
.svc-row.is-on .svc-n{color:var(--logo-green)}
.svc-title{
display:block; font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
text-transform:uppercase; font-size:clamp(13px,1.15vw,16px); letter-spacing:.04em; line-height:1.18;
color:rgba(230,233,236,.72); transition:color .35s;
}
.svc-row:hover .svc-title{color:var(--stone)}
.svc-row.is-on .svc-title{color:var(--stone)}
.svc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1)}
.svc-row.is-on .svc-body{grid-template-rows:1fr}
.svc-body>*{min-height:0}
.svc-desc{
display:block; overflow:hidden; font-size:14px; line-height:1.58;
color:rgba(230,233,236,.66); max-width:46ch;
opacity:0; transition:opacity .4s ease .1s; padding-top:0;
}
.svc-row.is-on .svc-desc{opacity:1; padding-top:11px}
.svc-tags{display:flex; flex-wrap:wrap; gap:8px; opacity:0; transition:opacity .4s ease .16s; padding-top:0}
.svc-row.is-on .svc-tags{opacity:1; padding-top:13px}
.svc-tags span{
font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
color:var(--green-lift); border:1px solid rgba(148,188,88,.36); padding:4px 9px; line-height:1.2;
}
.svc-mark{position:relative; width:13px; height:13px; margin-top:8px; flex:none}
.svc-mark::before,.svc-mark::after{
content:""; position:absolute; background:var(--steel-dim); transition:transform .45s cubic-bezier(.16,1,.3,1), background .35s;
}
.svc-mark::before{left:0; top:6px; width:13px; height:1px}
.svc-mark::after{left:6px; top:0; width:1px; height:13px}
.svc-row.is-on .svc-mark::before,.svc-row.is-on .svc-mark::after{background:var(--logo-green)}
.svc-row.is-on .svc-mark::after{transform:scaleY(0)}
/* mobile-only card grid — every photo visible at once, no accordion, no
scroll-dependent state. Swaps in for .svc below the nav's own breakpoint. */
.svc-grid{display:none}
.svc-card{display:flex; flex-direction:column}
.svc-card-media{position:relative; aspect-ratio:4/3; background:var(--svc-panel); overflow:hidden; clip-path:var(--slice)}
.svc-card-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center}
.svc-card-title{
display:block; margin:18px 0 0; font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
text-transform:uppercase; font-size:clamp(13.5px,1.1vw,16px); letter-spacing:.04em; line-height:1.22;
color:var(--stone);
}
.svc-card-desc{margin:10px 0 0; font-size:13.4px; line-height:1.58; color:rgba(230,233,236,.66)}
@media (max-width:900px){
.svc{display:none}
.svc-grid{display:grid; grid-template-columns:1fr; gap:34px}
}
/* ============================================================
THE SRP DIFFERENCE
============================================================ */
/* Dark aggregate ground replaces the flat green. Every child here was
coloured for dark-on-green, so the whole set inverts back to light. The
scrim keeps the copy legible over the texture's brighter patches. */
.diff-sec{
position:relative; color:var(--stone);
background:#0C0D0E url("../images/dark-resin-aggregate-texture.jpg") center/cover no-repeat;
}
.diff-sec::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(10,11,12,.78) 0%, rgba(10,11,12,.66) 45%, rgba(10,11,12,.82) 100%);
}
.diff-sec>*{position:relative; z-index:1}
.diff-sec h2{color:var(--stone)}
.diff-sec .lede{color:rgba(230,233,236,.82)}
.diff{border-top-color:rgba(230,233,236,.16)}
.diff-item{border-bottom-color:rgba(230,233,236,.13)}
.diff-item .n{color:var(--logo-green)}
.diff-item h3{color:var(--stone)}
.diff-item p{color:rgba(230,233,236,.72)}
.diff-note{color:rgba(230,233,236,.6)}
.diff-sec .ph{color:var(--grey); border-color:rgba(230,233,236,.3)}
.diff{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(30px,5vw,86px); border-top:1px solid var(--rule-light)}
.diff-item{display:grid; grid-template-columns:46px minmax(0,1fr); column-gap:16px; align-items:start; padding:22px 0 24px; border-bottom:1px solid var(--rule-light)}
.diff-item .n{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--steel); padding-top:3px}
.diff-item h3{font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100; text-transform:uppercase; font-size:clamp(12.5px,1.05vw,14.5px); letter-spacing:.045em; line-height:1.2; margin:0 0 7px; color:var(--stone)}
.diff-item p{margin:0; font-size:13.2px; line-height:1.55; color:rgba(230,233,236,.62)}
.diff-note{margin:22px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey)}
@media (max-width:900px){ .diff{grid-template-columns:1fr} }
/* ---- animated slide variant, homepage "SRP Difference" only ---- */
.diff-slider{position:relative}
.diff-viewport{overflow:hidden; border-top:1px solid var(--rule-light)}
.diff-track{display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1)}
.diff-slide{flex:0 0 100%; padding-right:clamp(16px,4vw,60px)}
.diff-slide .diff-item{border-bottom:0; padding:clamp(28px,4vw,46px) 0; max-width:640px}
.diff-slide .diff-item .n{font-size:13px}
.diff-slide .diff-item h3{font-size:clamp(17px,2vw,24px); margin-bottom:12px}
.diff-slide .diff-item p{font-size:clamp(14px,1.15vw,16px); line-height:1.6}
.diff-dots{display:flex; gap:9px; margin-top:clamp(4px,1vw,10px); flex-wrap:wrap}
.diff-dot{width:8px; height:8px; padding:0; border:0; border-radius:50%; background:rgba(230,233,236,.25); cursor:pointer; transition:background .3s, transform .3s}
.diff-dot:hover{background:rgba(230,233,236,.45)}
.diff-dot.is-on{background:var(--btn-green); transform:scale(1.35)}
@media (max-width:640px){ .diff-item{grid-template-columns:34px minmax(0,1fr); column-gap:12px; padding:18px 0 20px} }
/* ============================================================
APPLICATIONS
============================================================ */
.apps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--concrete)}
.app{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--slate); display:block}
.app canvas{position:absolute; inset:0; width:100%; height:100%; transition:transform .9s cubic-bezier(.16,1,.3,1)}
.app:hover canvas{transform:scale(1.055)}
.app .shade{position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,11,12,0) 34%,rgba(10,11,12,.88) 100%)}
.app .name{
position:absolute; left:20px; right:20px; bottom:18px; color:var(--stone);
font-family:var(--display); font-weight:600; font-variation-settings:"wdth" 112;
text-transform:uppercase; font-size:13px; line-height:1.1; z-index:2;
}
.app .name::after{content:""; display:block; width:22px; height:2px; background:var(--steel); margin-top:12px; transition:width .5s cubic-bezier(.16,1,.3,1), background .4s}
.app:hover .name::after{width:56px; background:var(--silver)}
.app .idx{position:absolute; top:16px; left:20px; z-index:2; font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:rgba(230,233,236,.66)}
/* ============================================================
PROJECTS
============================================================ */
.projects{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.4vw,38px)}
.proj .thumb{position:relative; aspect-ratio:5/6; overflow:hidden; background:var(--slate); margin-bottom:20px; display:block; clip-path:var(--slice)}
.proj .thumb canvas{position:absolute; inset:0; width:100%; height:100%; transition:transform .9s cubic-bezier(.16,1,.3,1)}
.proj:hover .thumb canvas{transform:scale(1.05)}
.proj .thumb .ph{position:absolute; left:14px; top:14px; z-index:2; background:rgba(10,11,12,.6); backdrop-filter:blur(6px)}
.proj h3{margin:0 0 6px}
.proj .loc{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--grey)}
.proj .specs{margin-top:16px; padding-top:14px; border-top:1px solid var(--rule-light); display:flex; justify-content:space-between; gap:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey)}
.proj .specs b{font-weight:400; color:var(--steel)}
/* ============================================================
MATERIALS
============================================================ */
.swatches{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,30px)}
.sw .chip{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--slate)}
.sw .chip canvas{position:absolute; inset:0; width:100%; height:100%}
.sw .chip .gloss{position:absolute; inset:0; background:linear-gradient(122deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 42%)}
.sw .meta{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:14px; margin-top:14px; border-top:1px solid var(--rule-light)}
.sw .meta strong{font-family:var(--display); font-weight:600; font-variation-settings:"wdth" 112; text-transform:uppercase; font-size:12.5px}
.sw .meta span{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey)}
/* ============================================================
RESOURCE ROWS
============================================================ */
.rows{border-top:1px solid var(--rule-light)}
.rows .row{
display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:20px; align-items:center;
border-bottom:1px solid var(--rule-light); padding:22px 0; transition:padding-left .4s;
}
.rows .row:hover{padding-left:10px}
.rows .row .n{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--steel)}
.rows .row .t{font-family:var(--display); font-weight:500; font-variation-settings:"wdth" 112; text-transform:uppercase; font-size:clamp(13.5px,1.3vw,18px); line-height:1.1}
/* ============================================================
PROCESS
============================================================ */
.process{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--rule-light)}
.step{border-right:1px solid var(--rule-light); padding:26px 20px 40px; position:relative}
.step:last-child{border-right:0}
.step .n{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--steel); display:block; margin-bottom:44px}
.step h3{font-family:var(--display); font-weight:600; font-variation-settings:"wdth" 112; text-transform:uppercase; font-size:13.5px; line-height:1.12; margin:0 0 10px}
.step p{margin:0; font-size:12.8px; line-height:1.5; color:rgba(230,233,236,.6)}
.step::after{content:""; position:absolute; left:20px; top:64px; width:9px; height:9px; background:var(--steel-dim)}
.step:last-child::after{background:var(--silver)}
/* ============================================================
TRUST
============================================================ */
.trust-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule-light); border:1px solid var(--rule-light)}
.trust-cell{background:var(--ink); min-height:132px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; gap:14px}
.trust-cell .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey)}
.stat{display:flex; flex-direction:column; gap:6px}
.stat b{font-family:var(--display); font-weight:600; font-variation-settings:"wdth" 118; font-size:clamp(24px,2.6vw,36px); line-height:1; color:var(--concrete)}
/* ============================================================
ENQUIRY FORMS
============================================================ */
.tabs{display:flex; gap:0; border:1px solid var(--rule-light); width:fit-content; margin-bottom:44px; flex-wrap:wrap}
.tab{
background:none; border:0; padding:15px 26px; cursor:pointer;
font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
color:var(--grey); transition:background .3s,color .3s;
}
.tab:hover{color:var(--stone)}
.tab[aria-selected="true"]{background:var(--silver); color:var(--ink)}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 30px}
.field{display:flex; flex-direction:column; gap:9px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--grey)}
.field input,.field select,.field textarea{
background:transparent; border:0; border-bottom:1px solid var(--rule-light);
padding:11px 0; font-size:14.5px; border-radius:0; width:100%; color:var(--stone);
transition:border-color .3s;
}
.field textarea{resize:vertical; min-height:104px}
.field input::placeholder,.field textarea::placeholder{color:rgba(230,233,236,.32)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0; border-bottom-color:var(--silver)}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%); background-position:calc(100% - 11px) 20px,calc(100% - 6px) 20px; background-size:5px 5px; background-repeat:no-repeat}
.field select option{background:var(--charcoal); color:var(--stone)}
.drop{
grid-column:1/-1; border:1px dashed rgba(230,233,236,.26); padding:26px; text-align:center;
font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
transition:border-color .3s, color .3s;
}
.drop:hover{border-color:var(--steel); color:var(--stone)}
.form-foot{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; margin-top:6px}
.hidden{display:none !important}
/* ============================================================
REVIEWS
Stars render muted until verified ratings are supplied — add
.is-live to .stars to switch them to the brand green.
============================================================ */
.reviews-sec{background:var(--concrete)}
.reviews-head{text-align:center; margin-bottom:clamp(34px,4vw,54px)}
.reviews-title{margin:0 0 22px; display:inline-block; padding-bottom:18px; position:relative}
.reviews-title::after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:98px; height:3px; background:var(--logo-green)}
.rating{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px}
.rating-score{font-family:var(--display); font-weight:700; font-size:clamp(28px,3vw,40px); line-height:1; color:var(--stone)}
.rating-meta{color:var(--grey); font-size:15px}
.rating-meta b{color:var(--stone); font-weight:600}
.stars{display:inline-flex; gap:3px; font-size:17px; line-height:1; color:var(--concrete); letter-spacing:.04em}
.stars.is-live{color:var(--logo-green)}
.reviews{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.6vw,22px)}
.review{
background:var(--stone-2); border:1px solid var(--rule-light);
padding:clamp(20px,2vw,26px); display:flex; flex-direction:column; gap:16px;
clip-path:var(--slice);
}
.review-top{display:flex; align-items:center; gap:13px}
.avatar{
width:40px; height:40px; flex:none; border-radius:50%; background:var(--slate);
border:1px solid var(--edge); display:grid; place-items:center;
font-family:var(--mono); font-size:14px; color:var(--grey);
}
.review-name{display:block; color:var(--stone); font-weight:600; font-size:15px; margin-bottom:6px}
.review-body{margin:0; color:rgba(230,233,236,.74); font-size:15px; line-height:1.6; flex:1}
/* Below tablet width, three columns no longer fit — swipe through the
reviews one at a time instead of squeezing or stacking them. */
@media (max-width:900px){
.reviews{
display:flex; grid-template-columns:none; overflow-x:auto;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
margin:0 calc(var(--pad) * -1); padding:0 var(--pad) 6px;
scrollbar-width:none;
}
.reviews::-webkit-scrollbar{display:none}
.review{scroll-snap-align:center; flex:0 0 100%; min-width:0}
}
/* ============================================================
FINAL CTA + FOOTER
============================================================ */
.finale{position:relative; min-height:76vh; display:flex; align-items:center; background:var(--ink); overflow:hidden}
.finale canvas{position:absolute; inset:0; width:100%; height:100%}
.finale-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.finale .veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,11,12,.7) 0%,rgba(10,11,12,.38) 40%,rgba(10,11,12,.96) 100%)}
.finale .inner{position:relative; width:100%; max-width:var(--maxw); margin:0 auto; padding:clamp(60px,9vw,120px) var(--pad); text-align:center}
.finale h2{max-width:15ch; margin:0 auto 24px}
.finale .lede{margin-left:auto; margin-right:auto}
.finale .btn-row{justify-content:center}
.foot{background:var(--ink); border-top:1px solid var(--rule-light)}
.foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:24px 40px; padding-top:40px; padding-bottom:32px}
.foot h4{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); margin:0 0 13px; font-weight:500}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.foot ul a,.foot ul li{font-size:12.8px; color:rgba(230,233,236,.7)}
.foot ul a:hover{color:var(--stone)}
.foot-bar{border-top:1px solid var(--rule-light); padding:14px 0 18px; display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(230,233,236,.45)}
.foot-bar .spacer{margin-left:auto}
.foot .mark{margin-bottom:14px}
/* ============================================================
SCROLL PROGRESS
Pinned to the bottom edge, fills left to right as the page scrolls.
Sits below the drawer (99) so the open menu covers it, and below the
nav (100). 3px to match the intro heading accent.
============================================================ */
.scroll-prog{
/* Anchored inside the nav, welded to its bottom edge, so it tracks the
header as .solid animates the nav height. bottom:-1px lays it over the
nav's hairline border rather than doubling up with it. */
position:absolute; left:0; right:0; bottom:-1px; z-index:3;
height:3px; background:transparent; pointer-events:none;
}
.scroll-prog span{
display:block; width:100%; height:100%;
transform:scaleX(0); transform-origin:0 50%;
background:var(--logo-green);
}
/* ============================================================
REVEAL
============================================================ */
.rv{opacity:0; transform:translateY(16px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1; transform:none}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:1180px){
.perf{grid-template-columns:repeat(2,minmax(0,1fr))}
.perf .cell:nth-child(4n){border-right:1px solid var(--rule-light)}
.perf .cell:nth-child(2n){border-right:0}
.apps{grid-template-columns:repeat(2,minmax(0,1fr))}
.process{grid-template-columns:repeat(3,minmax(0,1fr))}
.step:nth-child(3n){border-right:0}
.foot-top{grid-template-columns:1fr 1fr; gap:26px 30px}
}
@media (max-width:1300px){
.nav-links,.nav-cta,.nav-phone{display:none}
.burger{display:block; margin-left:14px}
.nav-phone-mobile{
display:inline-flex; align-items:center; gap:7px; margin-left:auto;
font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
font-size:clamp(13px,3.4vw,16px); letter-spacing:.05em; text-transform:uppercase; color:var(--stone);
white-space:nowrap; transition:color .3s;
}
.nav-phone-mobile svg{width:15px; height:15px; color:var(--green-lift); flex:none}
.nav-phone-mobile:hover,.nav-phone-mobile:focus-visible{color:var(--logo-green)}
}
@media (max-width:980px){
.split-2{grid-template-columns:1fr}
.split .media{aspect-ratio:5/4}
.projects{grid-template-columns:1fr; gap:52px}
.proj .thumb{aspect-ratio:4/3}
.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid{grid-template-columns:1fr}
.ba{aspect-ratio:4/3}
}
@media (max-width:640px){
:root{--nav-h:72px}
.mark-lockup-nav{height:42px}
.nav.solid .mark-lockup-nav{height:38px}
.nav-in{gap:14px}
.burger{margin-left:8px}
.hero{min-height:92svh}
.perf{grid-template-columns:1fr}
.perf .cell{min-height:0; padding:26px 0 30px; border-right:0 !important}
.perf .cell:hover{background:transparent}
.apps{grid-template-columns:repeat(2,minmax(0,1fr))}
.app{aspect-ratio:1/1}
.process{grid-template-columns:1fr}
.step{border-right:0; border-bottom:1px solid var(--rule-light); padding:22px 0 30px}
.step .n{margin-bottom:34px}
.step::after{left:0; top:52px}
.step:last-child{border-bottom:0}
.hlist{grid-template-columns:1fr}
.swatches{grid-template-columns:1fr 1fr; gap:14px}
.intro-copy p{font-size:15.5px}
.rows .row{grid-template-columns:34px minmax(0,1fr); gap:14px}
.rows .row:hover{padding-left:0}
.rows .row .ph{grid-column:2; justify-self:start}
.btn{width:100%; justify-content:space-between}
.btn-row{gap:11px}
.ba{aspect-ratio:3/4}
.ba-knob{width:46px; height:46px}
.foot-top{grid-template-columns:1fr; gap:24px}
.foot-top>div:nth-child(2){display:none}
.trust-grid{grid-template-columns:1fr}
.tabs{width:100%}
.tab{flex:1; padding:14px 10px; text-align:center}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important}
.rv{opacity:1; transform:none}
.hero h1 .ln>span{transform:none}
.hero-sub,.hero-place, .hero-slide{transform:none !important}
}
/* ============================================================
INNER PAGES
Shared furniture for every page other than the homepage.
Same palette, type scale and spacing as the homepage — these
add layout only, no new visual language.
============================================================ */
/* Active nav state */
.nav-links a.is-current{color:var(--stone)}
.nav-links a.is-current::after{right:0}
.drawer nav a.is-current{color:var(--stone)}
/* Page hero — shorter than the homepage hero, same construction */
.phero{
position:relative; display:flex; align-items:flex-end;
min-height:clamp(340px,46vh,520px);
padding-top:calc(var(--nav-h) + 40px); padding-bottom:clamp(62px,5.2vw,84px);
background:var(--ink); overflow:hidden; border-bottom:1px solid var(--rule-light);
}
.phero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.phero-veil{
position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(10,11,12,.72) 0%, rgba(10,11,12,.44) 42%, rgba(10,11,12,.86) 100%);
}
.phero-in{position:relative; z-index:2; width:100%}
/* Visible marker for the supplied hero image, so an empty hero never looks
like a finished design. Remove the span once the image is dropped in. */
.phero-mark{
position:absolute; z-index:3; right:var(--pad); bottom:16px;
font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
color:var(--steel); border:1px dashed rgba(230,233,236,.22); background:rgba(10,11,12,.55);
padding:5px 11px; white-space:nowrap; max-width:calc(100% - 2*var(--pad));
overflow:hidden; text-overflow:ellipsis;
}
.phero .eyebrow{
display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
text-transform:uppercase; color:var(--logo-green); margin-bottom:16px;
}
/* Match the homepage hero exactly. h1.display tops out at 112px, which the
homepage overrides down to 58px — the inner hero never did, so it rendered
roughly twice the size and broke the flow between pages. */
.phero h1{
margin:0; max-width:20ch;
font-weight:700; font-variation-settings:"wdth" 108;
letter-spacing:-.022em; line-height:1.02;
font-size:clamp(29px,4.3vw,58px);
}
.phero .lede{margin:20px 0 0; max-width:58ch; color:rgba(230,233,236,.8)}
/* Centred hero variant — used on Stones. Content is vertically centred in a
taller frame, with a short rule under the eyebrow. */
.phero.is-centred{
align-items:center; text-align:center;
min-height:clamp(420px,62vh,660px);
padding-top:calc(var(--nav-h) + 56px); padding-bottom:clamp(70px,6vw,96px);
}
.phero.is-centred .phero-in{display:flex; flex-direction:column; align-items:center}
.phero.is-centred .eyebrow{
margin-bottom:0; letter-spacing:.24em; color:rgba(230,233,236,.86);
}
.phero.is-centred .eyebrow::after{
content:""; display:block; width:74px; height:2px;
background:var(--logo-green); margin:18px auto 26px;
}
.phero.is-centred h1{max-width:16ch; margin:0 auto}
.phero.is-centred .lede{margin:24px auto 0; max-width:44ch; text-align:center}
/* Darker through the centre so the stacked type holds against a busy photo. */
.phero.is-centred .phero-veil{
background:
radial-gradient(62% 58% at 50% 50%, rgba(10,11,12,.62) 0%, rgba(10,11,12,.34) 58%, rgba(10,11,12,0) 100%),
linear-gradient(180deg, rgba(10,11,12,.60) 0%, rgba(10,11,12,.30) 38%, rgba(10,11,12,.72) 100%);
}
/* Breadcrumb */
.crumb{
font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
color:var(--grey); padding:16px 0; border-bottom:1px solid var(--rule-light);
}
.crumb a{color:var(--grey)}
.crumb a:hover{color:var(--stone)}
.crumb i{font-style:normal; margin:0 8px; color:var(--concrete)}
/* Generic prose block */
.prose{max-width:62ch}
.prose p{margin:0 0 1.1em; color:rgba(230,233,236,.74); font-size:clamp(15px,1.06vw,16.5px); line-height:1.68}
/* Legal pages run smaller than standard prose */
.policy p{font-size:13px; line-height:1.65}
.policy h2{
font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
text-transform:uppercase; font-size:13.5px; letter-spacing:.05em; color:var(--stone);
margin:2.2em 0 .8em;
}
.policy a{color:var(--green-lift)}
.policy a:hover{color:var(--logo-green)}
.prose p:last-child{margin-bottom:0}
.prose p.lead{color:var(--stone)}
/* Section heading with the green accent rule */
.sec-title{margin:0; padding-bottom:18px; position:relative; display:inline-block}
.sec-title::after{content:""; position:absolute; left:0; bottom:0; width:98px; height:3px; background:var(--logo-green)}
.sec-head{margin-bottom:clamp(30px,3.6vw,50px)}
.sec-head.centred{text-align:center}
.sec-head.centred .sec-title::after{left:50%; transform:translateX(-50%)}
/* Image placeholder — marks where supplied imagery goes */
.imgreq{
position:relative; display:grid; place-items:center; text-align:center;
background:var(--stone-2); border:1px dashed rgba(230,233,236,.20);
color:var(--steel); min-height:220px; padding:24px;
}
.imgreq span{
font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
color:var(--grey); line-height:1.7;
}
.imgreq.tall{aspect-ratio:4/5; min-height:0}
.imgreq.wide{aspect-ratio:16/9; min-height:0}
.imgreq.square{aspect-ratio:1/1; min-height:0}
/* Two-column feature rows, alternating */
.feature{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,4vw,70px); align-items:center}
.feature + .feature{margin-top:clamp(48px,6vw,96px)}
.feature.flip .feature-media{order:2}
.feature-media{position:relative; clip-path:var(--slice); overflow:hidden}
.feature-media img{width:100%; height:100%; object-fit:cover; display:block}
/* Card grid */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule-light); border:1px solid var(--rule-light)}
.card{background:var(--ink); padding:clamp(24px,2.4vw,34px); display:flex; flex-direction:column; gap:12px}
.card .n{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--logo-green)}
.card h3{margin:0; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:15px; letter-spacing:.03em; color:var(--stone)}
.card p{margin:0; color:rgba(230,233,236,.7); font-size:14.5px; line-height:1.6}
/* Service tiles on the services landing page */
.stiles{display:grid; gap:clamp(28px,3.4vw,56px)}
.stile{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(24px,3vw,54px); align-items:center}
.stile:nth-child(even) .stile-media{order:2}
.stile-media{position:relative; clip-path:var(--slice); overflow:hidden}
.stile-media img{width:100%; height:100%; object-fit:cover; display:block}
.stile h3{margin:0 0 14px; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(17px,1.7vw,24px); letter-spacing:.03em; color:var(--stone)}
.stile .applies{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.stile .applies li{
font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
color:var(--green-lift); border:1px solid rgba(148,188,88,.36); padding:4px 9px; line-height:1.2;
}
/* Tick list, reused from the homepage intro */
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.ticks li{display:flex; align-items:flex-start; gap:13px; color:var(--stone); font-size:15.5px; line-height:1.5}
.ticks li::before{
content:""; flex:none; width:15px; height:8px; margin-top:5px;
border-left:2px solid var(--logo-green); border-bottom:2px solid var(--logo-green);
transform:rotate(-45deg);
}
/* FAQ */
.faq{border-top:1px solid var(--rule-light)}
.faq details{border-bottom:1px solid var(--rule-light)}
.faq summary{
cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
font-family:var(--display); font-weight:700; text-transform:uppercase;
font-size:14.5px; letter-spacing:.03em; color:rgba(230,233,236,.82); transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--stone)}
.faq summary::after{
content:""; position:absolute; right:4px; top:50%; width:12px; height:12px; margin-top:-6px;
background:
linear-gradient(var(--logo-green),var(--logo-green)) center/12px 1px no-repeat,
linear-gradient(var(--logo-green),var(--logo-green)) center/1px 12px no-repeat;
transition:transform .35s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 22px; color:rgba(230,233,236,.7); font-size:15px; line-height:1.66; max-width:66ch}
/* ============================================================
STONES
Cards hold a real ![]()
pointing at images/stones/.jpg.
Until that file exists the img fails and .no-img reveals the
placeholder underneath — so supplying artwork needs no HTML edit.
============================================================ */
.stones{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,1.8vw,26px)}
.stone{display:flex; flex-direction:column; gap:14px; margin:0}
.stone-btn{
display:block; width:100%; padding:0; border:1px solid var(--rule-light);
background:var(--stone-2); cursor:pointer; position:relative; overflow:hidden;
aspect-ratio:1/1; clip-path:var(--slice);
transition:border-color .35s, transform .5s cubic-bezier(.16,1,.3,1);
}
.stone-btn:hover{border-color:var(--edge); transform:translateY(-3px)}
.stone-btn:focus-visible{outline:2px solid var(--logo-green); outline-offset:3px}
.stone-btn img{width:100%; height:100%; object-fit:cover; display:block}
.stone-ph{
position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:16px;
font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
color:var(--steel); background:var(--stone-2);
background-image:repeating-linear-gradient(45deg, rgba(230,233,236,.03) 0 8px, transparent 8px 16px);
}
/* Placeholder is the default state; a successful load reveals the photo.
Inverted deliberately — waiting for an error event means a flash of empty
box, and with lazy loading that error may not fire until scroll. */
.stone-btn img{visibility:hidden}
.stone.has-img .stone-ph{display:none}
.stone.has-img .stone-btn img{visibility:visible}
.stone .meta{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.stone .meta b{
font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
color:var(--stone); font-weight:500;
}
.stone .meta span{font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--steel)}
.stone-note{
margin-top:clamp(34px,4vw,56px); padding-top:24px; border-top:1px solid var(--rule-light);
color:var(--grey); font-size:13.5px; line-height:1.7; max-width:74ch;
}
/* Lightbox */
.lb{
position:fixed; inset:0; z-index:120; display:none;
align-items:center; justify-content:center; padding:clamp(16px,3vw,48px);
background:rgba(6,7,8,.86); backdrop-filter:blur(10px);
}
.lb.open{display:flex}
.lb-panel{
position:relative; width:min(880px,100%); max-height:100%; overflow:auto;
background:var(--charcoal); border:1px solid var(--edge);
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
}
.lb-media{position:relative; aspect-ratio:1/1; background:var(--stone-2)}
.lb-media img{width:100%; height:100%; object-fit:cover; display:block}
.lb-body{padding:clamp(24px,2.6vw,38px); display:flex; flex-direction:column; gap:18px; justify-content:center}
.lb-code{
font-family:var(--mono); font-size:clamp(20px,2.4vw,30px); letter-spacing:.14em;
color:var(--stone); margin:0;
}
.lb-sub{margin:0; color:var(--grey); font-size:14px; line-height:1.65}
.lb-actions{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.lb-close{
position:absolute; top:10px; right:10px; z-index:2; width:38px; height:38px;
background:rgba(10,11,12,.6); border:1px solid var(--edge); color:var(--stone);
font-size:18px; line-height:1; cursor:pointer; transition:background .3s, border-color .3s;
}
.lb-close:hover{background:rgba(10,11,12,.9); border-color:var(--logo-green)}
@media (max-width:1100px){ .stones{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){
.stones{grid-template-columns:repeat(2,minmax(0,1fr))}
.lb-panel{grid-template-columns:1fr}
}
/* Gallery */
.gal-filter{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(26px,3vw,42px)}
.gal-filter button{
font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
color:var(--grey); background:none; border:1px solid var(--rule-light);
padding:9px 18px; cursor:pointer; transition:color .3s, border-color .3s, background .3s;
}
.gal-filter button:hover{color:var(--stone); border-color:var(--edge)}
.gal-filter button.is-on{
color:var(--ink); background:var(--brushed-green); border-color:var(--btn-green);
box-shadow:0 2px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.25);
}
/* Project gallery: one titled block per project, its photos in a
swipeable snap strip so each project reads as a single slide. */
.proj-block{margin-bottom:clamp(48px,6vw,84px)}
.proj-block:last-of-type{margin-bottom:0}
.proj-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 22px; margin-bottom:18px}
.proj-head h2{margin:0; font-size:clamp(19px,2.2vw,30px)}
.proj-meta{margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel)}
.proj-stage{position:relative; aspect-ratio:16/9; background:var(--stone-2); border:1px solid var(--rule-light); overflow:hidden}
.proj-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .7s cubic-bezier(.4,0,.2,1)}
.proj-stage img.is-on{opacity:1}
.proj-arrow{
position:absolute; top:50%; transform:translateY(-50%); z-index:2;
width:clamp(36px,3.4vw,46px); height:clamp(36px,3.4vw,46px); border-radius:50%;
border:1px solid rgba(230,233,236,.28); background:rgba(10,11,12,.55); color:var(--stone);
display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(8px);
transition:color .3s, border-color .3s, background .3s;
}
.proj-arrow svg{width:11px; height:17px}
.proj-arrow.prev{left:clamp(10px,1.2vw,18px)}
.proj-arrow.next{right:clamp(10px,1.2vw,18px)}
.proj-arrow:hover{color:var(--green-lift); border-color:var(--green-lift); background:rgba(10,11,12,.75)}
.proj-count{
position:absolute; right:clamp(10px,1.2vw,16px); bottom:clamp(8px,1vw,13px); z-index:2;
font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:rgba(230,233,236,.8);
background:rgba(10,11,12,.55); padding:5px 11px; backdrop-filter:blur(8px);
}
.proj-thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.proj-thumbs::-webkit-scrollbar{display:none}
.proj-thumbs button{flex:none; width:clamp(74px,7vw,96px); aspect-ratio:3/2; padding:0; border:1px solid var(--rule-light); background:var(--stone-2); cursor:pointer; opacity:.45; transition:opacity .3s, border-color .3s}
.proj-thumbs button img{width:100%; height:100%; object-fit:cover; display:block}
.proj-thumbs button:hover{opacity:.85}
.proj-thumbs button.is-on{opacity:1; border-color:var(--logo-green)}
@media (max-width:640px){ .proj-stage{aspect-ratio:4/3} }
.gal{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.4vw,20px)}
.gal-item{position:relative; overflow:hidden; clip-path:var(--slice); grid-column:span 4}
.gal-item.w6{grid-column:span 6}
.gal-item.w8{grid-column:span 8}
.gal-item img{width:100%; height:100%; object-fit:cover; display:block}
.gal-item .imgreq{height:100%}
.gal-cap{
display:flex; justify-content:space-between; gap:12px; padding-top:10px;
font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel);
}
.gal-empty{
border:1px dashed rgba(230,233,236,.2); background:var(--stone-2);
padding:clamp(34px,4vw,58px); text-align:center; color:var(--grey);
}
/* CTA band */
.cta-band{background:var(--stone-2); border-top:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light)}
.cta-band .inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px}
.cta-band h2{margin:0; max-width:20ch}
.cta-band p{margin:10px 0 0; color:rgba(230,233,236,.7); max-width:46ch; font-size:15px}
/* Contact page */
.contact-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(34px,4vw,72px); align-items:start}
.contact-aside{border:1px solid var(--rule-light); background:var(--stone-2); padding:clamp(24px,2.4vw,32px)}
.contact-aside h3{margin:0 0 16px; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:14px; letter-spacing:.05em; color:var(--stone)}
.contact-aside ul{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:11px}
.contact-aside li{color:rgba(230,233,236,.72); font-size:14.5px}
.contact-aside li:last-child{margin-bottom:0}
.upload{
border:1px dashed rgba(230,233,236,.24); background:rgba(10,11,12,.35);
padding:20px; text-align:center; cursor:pointer; transition:border-color .3s, background .3s;
}
.upload:hover{border-color:rgba(148,188,88,.5); background:rgba(10,11,12,.5)}
.upload input{display:block; width:100%; margin-top:10px; color:var(--grey); font-size:13px}
.upload .hint{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel)}
@media (max-width:980px){
.feature,.stile,.contact-grid{grid-template-columns:1fr}
.feature.flip .feature-media,.stile:nth-child(even) .stile-media{order:0}
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.stones{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal-item,.gal-item.w6,.gal-item.w8{grid-column:span 6}
}
@media (max-width:640px){
.cards{grid-template-columns:1fr}
.stones{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal-item,.gal-item.w6,.gal-item.w8{grid-column:span 12}
.phero h1{max-width:none; font-size:clamp(26px,7.6vw,36px)}
.cta-band .inner{display:block}
.cta-band .btn{margin-top:20px}
}
/* ============================================================
FEATURES & BENEFITS
Staggered reveal driven by --i on each card. The existing .rv
IntersectionObserver adds .in; the delay creates the cascade
without any extra JS.
============================================================ */
.fb-sec{background:#22252A}
.fb-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:24px; margin-bottom:clamp(32px,3.8vw,54px)}
.fb-head .sec-title{margin:0}
.fb{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.3vw,18px)}
.fb-card{
position:relative; overflow:hidden;
background:var(--stone-2); border:1px solid var(--rule-light);
padding:clamp(28px,2.6vw,40px) clamp(18px,1.8vw,26px);
display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
/* staggered entrance */
opacity:0; transform:translateY(22px);
transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1),
border-color .4s, background .4s;
transition-delay:calc(var(--i, 0) * 70ms);
}
.fb.in .fb-card{opacity:1; transform:none}
.fb-card:hover{background:var(--slate); border-color:var(--edge)}
/* green wipe along the top edge on hover */
.fb-card::before{
content:""; position:absolute; left:0; top:0; height:2px; width:100%;
background:var(--logo-green); transform:scaleX(0); transform-origin:0 50%;
transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.fb-card:hover::before{transform:scaleX(1)}
.fb-ico{width:46px; height:46px; color:var(--stone); flex:none; transition:color .4s, transform .55s cubic-bezier(.16,1,.3,1)}
.fb-ico svg{width:100%; height:100%; display:block; stroke-width:1.4}
.fb-card:hover .fb-ico{color:var(--logo-green); transform:translateY(-4px) scale(1.06)}
.fb-card h3{
margin:0; font-family:var(--display); font-weight:700; text-transform:uppercase;
font-size:13.5px; letter-spacing:.05em; color:var(--logo-green);
}
.fb-card p{margin:0; color:rgba(230,233,236,.72); font-size:14.5px; line-height:1.55}
@media (prefers-reduced-motion:reduce){
.fb-card{opacity:1; transform:none; transition-delay:0s}
.fb-card:hover .fb-ico{transform:none}
}
@media (max-width:980px){ .fb{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .fb{grid-template-columns:1fr} }
/* ============================================================
APPLICATION ROWS (Residential / Commercial solution pages)
============================================================ */
.appns{border-top:1px solid var(--rule-light)}
.appn{
display:grid; grid-template-columns:52px minmax(0,1fr) 24px; align-items:start; gap:18px;
padding:24px 0 26px; border-bottom:1px solid var(--rule-light); text-decoration:none;
transition:padding-left .45s cubic-bezier(.16,1,.3,1), background .35s;
}
.appn:hover{padding-left:10px; background:linear-gradient(90deg, rgba(148,188,88,.05), transparent 60%)}
.appn-n{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--logo-green); padding-top:5px}
.appn-title{
display:block; font-family:var(--display); font-weight:700; text-transform:uppercase;
font-size:clamp(14px,1.3vw,18px); letter-spacing:.035em; color:rgba(230,233,236,.78);
margin-bottom:7px; transition:color .35s;
}
.appn:hover .appn-title{color:var(--stone)}
.appn-copy{display:block; color:rgba(230,233,236,.68); font-size:14.5px; line-height:1.55; max-width:62ch}
.appn-ar{color:var(--steel-dim); font-size:16px; padding-top:3px; transition:color .35s, transform .45s cubic-bezier(.16,1,.3,1)}
.appn:hover .appn-ar{color:var(--logo-green); transform:translateX(6px)}
@media (max-width:640px){
.appn{grid-template-columns:36px minmax(0,1fr); gap:12px}
.appn-ar{display:none}
}
/* ============================================================
SOLUTION PAGE — statement band + application image cards
============================================================ */
.statement{position:relative; overflow:hidden; min-height:clamp(320px,44vh,480px); display:flex; align-items:center}
.statement img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.statement::after{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(90deg, rgba(10,11,12,.90) 0%, rgba(10,11,12,.72) 45%, rgba(10,11,12,.42) 100%);
}
.statement .wrap{position:relative; z-index:2}
.statement q{
display:block; quotes:none; max-width:24ch;
font-family:var(--display); font-weight:700; text-transform:uppercase;
font-size:clamp(22px,3vw,42px); line-height:1.06; letter-spacing:-.022em; color:var(--stone);
}
.statement .attrib{
display:block; margin-top:22px; font-family:var(--mono); font-size:10px;
letter-spacing:.2em; text-transform:uppercase; color:var(--logo-green);
}
/* application cards */
.appgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px)}
.appcard{
position:relative; display:block; overflow:hidden; text-decoration:none;
aspect-ratio:4/5; clip-path:var(--slice); background:var(--stone-2);
}
.appcard:nth-child(4),.appcard:nth-child(5){aspect-ratio:16/10}
.appcard:nth-child(4){grid-column:span 2}
.appcard img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
transition:transform 1s cubic-bezier(.16,1,.3,1);
}
.appcard:hover img{transform:scale(1.06)}
.appcard::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(10,11,12,.12) 0%, rgba(10,11,12,.30) 42%, rgba(10,11,12,.88) 100%);
transition:background .45s;
}
.appcard:hover::after{background:linear-gradient(180deg, rgba(10,11,12,.04) 0%, rgba(10,11,12,.22) 42%, rgba(10,11,12,.84) 100%)}
.appcard-in{
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:clamp(20px,2vw,28px); display:flex; flex-direction:column; gap:9px;
}
.appcard-n{font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--logo-green)}
.appcard-t{
font-family:var(--display); font-weight:700; text-transform:uppercase;
font-size:clamp(15px,1.5vw,20px); letter-spacing:.03em; color:var(--stone);
display:flex; align-items:center; gap:11px;
}
.appcard-t .ar{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.appcard:hover .appcard-t .ar{transform:translateX(7px)}
.appcard-c{
color:rgba(230,233,236,.74); font-size:14px; line-height:1.5; max-width:40ch;
max-height:0; opacity:0; overflow:hidden;
transition:max-height .5s cubic-bezier(.16,1,.3,1), opacity .4s;
}
.appcard:hover .appcard-c{max-height:120px; opacity:1}
/* assurance list as a bordered panel */
.assure{border:1px solid var(--rule-light); background:var(--stone-2); padding:clamp(26px,2.6vw,38px)}
.assure h3{
margin:0 0 20px; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
text-transform:uppercase; color:var(--logo-green); font-weight:500;
}
@media (max-width:900px){
.appgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.appcard:nth-child(4){grid-column:span 2}
.appcard-c{max-height:120px; opacity:1}
}
@media (max-width:560px){
.appgrid{grid-template-columns:1fr}
.appcard,.appcard:nth-child(4),.appcard:nth-child(5){aspect-ratio:16/11; grid-column:auto}
}
/* ============================================================
LIGHT BAND
A white section on an otherwise dark site. Every text colour
inside has to invert, so it is scoped rather than global.
============================================================ */
.sec-light{background:#FFFFFF; color:var(--ink)}
.sec-light .prose p{color:rgba(10,11,12,.72)}
.sec-light .prose p.lead{color:var(--ink)}
.sec-light .sec-title{color:var(--ink)}
.sec-light .sec-title::after{background:var(--logo-green)}
/* centred prose, used in the light band */
.prose-mid{max-width:none; text-align:center}
.prose-mid p{margin-left:auto; margin-right:auto; max-width:74ch}
.prose-mid p:last-child{margin-bottom:0}
/* ============================================================
PROCESS — horizontal numbered steps
============================================================ */
.process{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(22px,2.6vw,32px); border-top:1px solid var(--rule-light); padding-top:clamp(30px,3.2vw,42px)}
.process-step{position:relative; padding-top:26px}
.process-step::before{content:""; position:absolute; top:-1px; left:0; width:34px; height:2px; background:var(--logo-green)}
.process-step .n{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--steel); margin-bottom:14px}
.process-step h3{margin:0 0 8px; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:15px; letter-spacing:.03em; color:var(--stone)}
.process-step p{margin:0; color:rgba(230,233,236,.68); font-size:14px; line-height:1.55}
@media (max-width:980px){ .process{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:34px} }
@media (max-width:640px){ .process{grid-template-columns:1fr; row-gap:28px} }
/* fb grid, 3-column variant */
.fb-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){ .fb-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ============================================================
STONE TEASER — link-through swatches, no lightbox binding
============================================================ */
.stones-teaser{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px)}
.stone-teaser{display:flex; flex-direction:column; gap:12px; margin:0; text-decoration:none}
.stone-teaser .img{
display:block; width:100%; padding:0; border:1px solid var(--rule-light);
background:var(--stone-2); position:relative; overflow:hidden;
aspect-ratio:1/1; clip-path:var(--slice);
transition:border-color .35s, transform .5s cubic-bezier(.16,1,.3,1);
}
.stone-teaser:hover .img{border-color:var(--edge); transform:translateY(-3px)}
.stone-teaser img{width:100%; height:100%; object-fit:cover; display:block}
.stone-teaser span{
font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
color:var(--steel); text-align:center;
}
@media (max-width:980px){ .stones-teaser{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .stones-teaser{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ============================================================
PHOTO CTA — full-bleed image band with heading, copy, buttons
============================================================ */
.photo-cta{position:relative; overflow:hidden; min-height:clamp(420px,52vh,600px); display:flex; align-items:center}
.photo-cta img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.photo-cta::after{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(90deg, rgba(10,11,12,.92) 0%, rgba(10,11,12,.76) 45%, rgba(10,11,12,.4) 100%);
}
.photo-cta .wrap{position:relative; z-index:2}
.photo-cta h2{margin:0 0 18px; max-width:15ch}
.photo-cta p{margin:0 0 30px; max-width:48ch; color:rgba(230,233,236,.78); font-size:clamp(15px,1.1vw,17px); line-height:1.6}
/* ============================================================
STONE FEATURE — interactive material selector
============================================================ */
.stone-stage{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(20px,3vw,36px); align-items:start}
.stone-stage-media{
position:relative; width:100%; aspect-ratio:16/10.5; overflow:hidden; clip-path:var(--slice);
background:var(--stone-2);
}
.stone-stage-slide{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transform:scale(1.035);
transition:opacity 1.1s cubic-bezier(.4,0,.2,1), transform 1.8s cubic-bezier(.16,1,.3,1);
}
.stone-stage-slide.is-active{opacity:1; transform:scale(1)}
.stone-stage-scrim{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(0deg, rgba(10,11,12,.7) 0%, rgba(10,11,12,.14) 42%, transparent 62%);
}
.stone-stage-name{position:absolute; left:0; bottom:0; z-index:2; padding:clamp(20px,2.8vw,38px)}
.stone-stage-name h3{
margin:0; font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 108;
text-transform:uppercase; letter-spacing:-.01em; line-height:.98;
font-size:clamp(19px,2.3vw,30px); color:var(--stone);
}
.stone-rail{
display:flex; flex-direction:column; gap:1px;
max-height:clamp(320px,32vw,460px); overflow-y:auto; padding-right:6px;
scrollbar-width:thin; scrollbar-color:rgba(230,233,236,.22) transparent;
}
.stone-rail::-webkit-scrollbar{width:5px}
.stone-rail::-webkit-scrollbar-track{background:transparent}
.stone-rail::-webkit-scrollbar-thumb{background:rgba(230,233,236,.2); border-radius:0}
.stone-swatch{
display:flex; align-items:center; gap:16px; width:100%; padding:11px 8px;
background:none; border:0; border-left:2px solid transparent; text-align:left; cursor:pointer;
opacity:.5; transition:opacity .45s, border-color .45s, background-color .45s;
}
.stone-swatch .thumb{
width:52px; height:52px; flex:none; overflow:hidden; clip-path:var(--slice);
background:var(--stone-2);
}
.stone-swatch .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.stone-swatch .label{
font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
text-transform:uppercase; letter-spacing:.02em; font-size:14px; color:var(--stone);
}
.stone-swatch:hover{opacity:.82}
.stone-swatch.is-active{opacity:1; border-left-color:var(--logo-green); background:rgba(148,188,88,.06)}
.stone-cta{text-align:center; margin-top:clamp(30px,3.6vw,48px)}
@media (max-width:900px){
.stone-stage{grid-template-columns:1fr; gap:22px}
.stone-stage-media{aspect-ratio:4/3}
.stone-rail{
flex-direction:row; overflow-x:auto; gap:16px; padding:2px 2px 8px;
scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.stone-rail::-webkit-scrollbar{display:none}
.stone-swatch{
flex-direction:column; align-items:center; gap:9px; flex:none; width:78px; padding:2px 0 6px;
border-left:0; border-bottom:2px solid transparent; scroll-snap-align:start;
}
.stone-swatch .thumb{width:74px; height:74px}
.stone-swatch .label{font-size:10px; letter-spacing:.05em; text-align:center; white-space:nowrap}
.stone-swatch.is-active{border-left-color:transparent; border-bottom-color:var(--logo-green); background:none}
}
/* ============================================================
BEFORE / AFTER — toggle crossfade, no swipe
============================================================ */
.ba2-media{position:relative; aspect-ratio:3/2; overflow:hidden; clip-path:var(--slice); background:var(--stone-2)}
.ba2-badge{
position:absolute; top:0; left:0; z-index:2;
padding:12px 22px; background:var(--btn-green); color:var(--ink);
font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 100;
font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.ba2-slide{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transform:scale(1.03);
transition:opacity .4s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.ba2-slide.is-active{opacity:1; transform:scale(1)}
/* ============================================================
QUOTE BAND — thin CTA strip between Before/After and Performance
============================================================ */
.quote-band{position:relative; overflow:hidden; background:var(--ink); border-top:1px solid rgba(230,233,236,.1); border-bottom:1px solid rgba(230,233,236,.1)}
.quote-band::before{
content:""; position:absolute; top:0; left:-40%; width:40%; height:2px;
background:linear-gradient(90deg, transparent, var(--logo-green) 45%, var(--silver) 55%, transparent);
animation:quote-band-sweep 6s ease-in-out infinite;
}
@keyframes quote-band-sweep{0%{left:-40%} 55%{left:100%} 100%{left:100%}}
@media (prefers-reduced-motion: reduce){ .quote-band::before{animation:none} }
.quote-band-in{
display:flex; align-items:center; justify-content:center;
padding:26px 0;
}
.quote-band-actions{display:flex; align-items:center; justify-content:center; gap:clamp(28px,4vw,48px); flex-wrap:wrap}
.quote-band-phone{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.01em; color:var(--stone); transition:color .3s}
.quote-band-phone svg{width:18px; height:18px; color:var(--logo-green); flex:none; transition:transform .3s}
.quote-band-phone:hover{color:var(--green-lift)}
.quote-band-phone:hover svg{transform:scale(1.12)}
@media (max-width:640px){
.quote-band-in{padding:22px 0}
.quote-band-actions{flex-direction:column; gap:18px}
}
/* ============================================================
PERFORMANCE — continuous auto-scrolling marquee of stat cards
Same seamless two-track loop technique as .marks-track: both
tracks animate in lockstep, so the join is invisible.
============================================================ */
/* Photo ground behind the section — same scrim technique as .diff-sec.
The cards are solid panels, so the scrim only has to keep the intro
copy legible; it stays heavier at the edges to hold the section frame. */
.perf-sec{
position:relative;
background:#0C0D0E url("../images/cream-resin-bound-driveway-melbourne.jpg") center/cover no-repeat;
}
.perf-sec::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(10,11,12,.88) 0%, rgba(10,11,12,.74) 50%, rgba(10,11,12,.9) 100%);
}
.perf-sec>*{position:relative; z-index:1}
.perf-marquee{position:relative; overflow:hidden; display:flex; padding:6px 0 10px}
.perf-track{display:flex; flex:none; gap:clamp(14px,1.6vw,22px); width:max-content; animation:perf-scroll 32s linear infinite; padding-left:clamp(14px,1.6vw,22px)}
.perf-marquee:hover .perf-track{animation-play-state:paused}
.perf-card{
flex:none; width:clamp(220px,22vw,280px); padding:clamp(24px,2.4vw,32px);
background:var(--stone-2); border:1px solid var(--rule-light);
display:flex; flex-direction:column; gap:14px;
}
.perf-ico{width:34px; height:34px; color:var(--btn-green); flex:none}
.perf-ico svg{width:100%; height:100%; display:block; stroke-width:1.4}
.perf-n{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--steel); margin-top:-6px}
.perf-card h3{
margin:0; font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
text-transform:uppercase; font-size:15px; letter-spacing:.03em; color:var(--stone);
}
.perf-card p{margin:0; color:rgba(230,233,236,.66); font-size:13.6px; line-height:1.55}
@keyframes perf-scroll{ from{transform:translateX(0)} to{transform:translateX(-100%)} }
@media (prefers-reduced-motion: reduce){ .perf-track{animation:none} }
/* Netlify's edge-injected "Powered by Netlify" badge (iframe#nl-badge-frame)
and its owner toolbar variant — permanently hidden site-side. */
#nl-badge-frame,#nl-hud-frame{display:none!important;visibility:hidden!important;pointer-events:none!important}
/* ============================================================
QUOTE FORM — premium card treatment on the contact page.
Warm charcoal section, lighter card, filled inputs.
============================================================ */
.quote-sec{background:#292A28}
.qcard{
max-width:1100px; margin:0 auto; background:#343532;
border:1px solid #4A4B47; border-radius:4px;
box-shadow:0 22px 48px rgba(0,0,0,.28);
padding:clamp(26px,4.5vw,62px);
}
.qcard-head{margin-bottom:clamp(24px,3vw,36px)}
.qcard-title{
margin:0 0 14px; padding-bottom:14px; position:relative; display:inline-block;
font-family:var(--display); font-weight:700; font-variation-settings:"wdth" 100;
text-transform:uppercase; font-size:clamp(17px,1.6vw,22px); letter-spacing:.06em; color:var(--stone);
}
.qcard-title::after{content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; background:var(--logo-green)}
.qcard-sub{margin:0; color:#B9BCB5; font-size:15px; line-height:1.6; max-width:62ch}
.qform{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 22px}
.qf-full{grid-column:1/-1}
.qf label{display:block; margin:0 0 8px; font-size:13.5px; font-weight:600; letter-spacing:.02em; color:#C9CCC6}
.qf-hint{font-weight:400; color:#8F938C; margin-left:8px; font-size:12.5px}
.qf input,.qf select,.qf textarea{
width:100%; background:#3D3E3A; border:1px solid #565752; border-radius:4px;
color:#FFFFFF; font-size:15px; padding:0 16px; height:56px;
transition:border-color .25s, background .25s;
}
.qf textarea{min-height:150px; padding:15px 16px; height:auto; resize:vertical; line-height:1.55}
.qf input::placeholder,.qf textarea::placeholder{color:#9A9D97}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:0; border-color:var(--btn-green)}
.qf select{
appearance:none; -webkit-appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23C9CCC6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px;
padding-right:42px;
}
.qf input[type="file"]{height:auto; padding:12px 16px; cursor:pointer; color:#B9BCB5; font-size:14px}
.qf input[type="file"]::file-selector-button{
background:#2E2F2C; border:1px solid #565752; border-radius:3px; color:#DDE0DA;
font:inherit; font-size:13px; font-weight:600; padding:9px 16px; margin-right:14px; cursor:pointer;
transition:border-color .25s, color .25s;
}
.qf input[type="file"]::file-selector-button:hover{border-color:var(--btn-green); color:#FFFFFF}
.qbtn{
width:100%; height:58px; border:0; border-radius:4px; cursor:pointer;
background:var(--btn-green); color:#0B0D0F;
font-family:var(--display); font-weight:800; font-variation-settings:"wdth" 100;
text-transform:uppercase; font-size:14.5px; letter-spacing:.09em;
transition:filter .25s, transform .2s, box-shadow .25s;
}
.qbtn:hover{filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 10px 22px rgba(110,164,61,.28)}
.qbtn:active{transform:translateY(0)}
.qform-note{margin:14px 0 0; text-align:center; color:#8F938C; font-size:12.5px}
.qmeta{
max-width:1100px; margin:28px auto 0; display:grid;
grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 34px;
}
.qmeta h3{margin:0 0 12px; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:12.5px; letter-spacing:.06em; color:#C9CCC6}
.qmeta ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.qmeta li{color:#9A9D97; font-size:13.5px; line-height:1.55}
.qmeta a{color:#B9BCB5}
.qmeta a:hover{color:var(--green-lift)}
@media (max-width:760px){
.qform{grid-template-columns:1fr; gap:18px}
.qmeta{grid-template-columns:1fr; gap:26px}
}
/* Contact / quote page only: compact hero and card so visitors arriving from
ads see the start of the form without scrolling. Scoped by the
.phero-compact and .quote-sec-compact classes, which only contact.html uses. */
.phero-compact{
min-height:clamp(260px,32vh,360px);
padding-top:calc(var(--nav-h) + 28px); padding-bottom:clamp(36px,3.5vw,52px);
}
.phero-compact .eyebrow{margin-bottom:12px}
.quote-sec-compact{padding-top:clamp(36px,4vw,56px); padding-bottom:clamp(56px,7vw,110px)}
.quote-sec-compact .qcard{padding:clamp(18px,3.4vw,44px)}
.quote-sec-compact .qcard-head{margin-bottom:clamp(16px,2vw,24px)}
.quote-sec-compact .qcard-sub{font-size:15.5px}
@media (max-width:640px){
.phero-compact{min-height:200px; padding-top:calc(var(--nav-h) + 18px); padding-bottom:24px}
.phero-compact .eyebrow{margin-bottom:8px}
.quote-sec-compact{padding-top:22px}
.quote-sec-compact .qform{gap:16px}
.quote-sec-compact .qf input,.quote-sec-compact .qf select,.quote-sec-compact .qf textarea{font-size:16px}
.quote-sec-compact .qf input,.quote-sec-compact .qf select{height:52px}
.quote-sec-compact .qf input[type="file"]{height:auto}
}