/* ========================================================================== DAVID'S LOCK AND KEY: site-v5 One stylesheet, all 17 pages. WHERE THE DESIGN COMES FROM The master asset is the real van photo (img/davids-van.jpg): a black and white Chevy Express with hard orange shards slashing across the panels. Everything here is taken off that vehicle: - near-black body, white cab, one hot orange, nothing else - ANGULAR SHARDS on a single consistent lean, never a curve - condensed heavy caps, the way the wrap sets AUTOMOTIVE / RESIDENTIAL ONE LEAN, EVERYWHERE. --lean is -12deg. Every slit, shard, heading underline and cut on this site uses it. The header's clip-path polygons encode the same 12 degrees (a ~30px run over a 140px header). NOTHING gets clip-path on a container that holds a dropdown. clip-path clips descendants and silently ate the whole nav panel once already. Every shape is a pseudo-element with pointer-events:none. ANIMATION SAFETY RULE (this is not optional) Every element on this site is FULLY VISIBLE by default in this file. Scroll reveal only applies inside `html.anim`, and that class is added by a tiny inline script in that removes itself again if the main JS never checks in. No JS, broken JS, slow JS: the page still reads perfectly. ========================================================================== */ :root{ /* ---- colour: straight off the van ---- */ --ink:#0d0d0d; --ink-2:#141416; --ink-3:#1c1d20; --ink-deep:#080809; --orange:#ee6127; --orange-hi:#ff7f45; --orange-dk:#c2490f; --white:#fff; --paper:#f3f3f2; --text:#141416; --muted:#5d626a; --muted-d:#9ba2aa; --line:#e2e5e8; --line-d:rgba(255,255,255,.13); /* ---- one shadow scale, one radius token, sitewide ---- */ --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.10); --shadow-lift:0 2px 6px rgba(0,0,0,.09),0 20px 44px rgba(0,0,0,.18); --shadow-dark:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.45); --radius:3px; /* ---- the single lean ---- */ --lean:-12deg; /* ---- motion: snappy, slight overshoot, nothing drifts ---- */ --ease:170ms cubic-bezier(.2,.7,.3,1); --pop:cubic-bezier(.17,.86,.31,1.06); /* ---- type: ONE display, ONE body, nothing else ---- Barlow Condensed is the wrap's own voice: the van sets AUTOMOTIVE, RESIDENTIAL, COMMERCIAL and 801-834-0453 in heavy condensed caps. Inter is the workhorse underneath it and never competes. */ --display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; /* ---- rhythm. Space BETWEEN groups must beat space INSIDE groups. ---- */ --sec:96px; --sec-s:64px; --wrap:1240px; } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} html,body{overflow-x:hidden;overflow-x:clip} body{ font-family:var(--body);font-size:17px;line-height:1.6;font-weight:400; color:var(--text);background:var(--white); -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul,ol{list-style:none} b,strong{font-weight:600} /* orange accent bar across the very top of every page */ body::before{content:"";display:block;height:4px;background:var(--orange)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} .wrap-w{max-width:1500px;margin:0 auto;padding:0 28px} .center{text-align:center} .sec{padding:var(--sec) 0;position:relative} .sec-s{padding:var(--sec-s) 0;position:relative} .band-white{background:var(--white)} .band-paper{background:var(--paper)} .band-dark{background:var(--ink);color:#e8eaed} /* ========================================================================== TYPE Scale 13 / 14 / 17 / 18 / 22 / 30 / 44 / 64. The gap between display and body is the whole reason this does not read as a template. ========================================================================== */ h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.02em;text-transform:uppercase} .h1{font-size:clamp(40px,6.2vw,64px)} .h2{font-size:clamp(30px,4.4vw,46px);position:relative;color:var(--text)} .band-dark .h2,.cta-band .h2,.showpiece .h2{color:#fff} .h2 em{font-style:normal;color:var(--orange)} /* heading underline shard, on the site lean. Decorative only. */ .h2::after{ content:"";position:absolute;left:0;bottom:-20px;width:70px;height:5px; background:var(--orange);transform:skewX(var(--lean));transform-origin:0 50%; } .center .h2::after{left:50%;margin-left:-35px} .h2.no-rule::after{display:none} .h2{margin-bottom:34px} .eyebrow{ display:inline-flex;align-items:center;gap:11px; font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.14em; text-transform:uppercase;color:var(--orange);margin-bottom:16px;line-height:1.2; } .eyebrow::before{content:"";width:24px;height:3px;background:currentColor;transform:skewX(var(--lean));flex-shrink:0} .center .eyebrow{justify-content:center} /* The keyword strap above an H1. Deliberately NOT orange: the eyebrow above it already is, and two orange micro-lines stacked reads as clutter. */ .kw{ display:block;font-family:var(--body);font-weight:500;font-size:13px; letter-spacing:.15em;text-transform:uppercase;color:var(--muted); margin-bottom:18px;line-height:1.5; } .hero .kw,.chero .kw,.band-dark .kw{color:#8f959d} .lede{font-size:18px;line-height:1.6;color:var(--muted);max-width:68ch} .center .lede{margin-left:auto;margin-right:auto} .lede b{color:var(--text)} .band-dark .lede,.lede.on-dark,.cta-band .lede{color:var(--muted-d)} .band-dark .lede b,.lede.on-dark b,.cta-band .lede b{color:#fff} .lede+.lede{margin-top:16px} .prose p{max-width:68ch;margin-bottom:18px;color:var(--muted)} .prose p b{color:var(--text)} .prose h2{font-size:clamp(26px,3.4vw,34px);margin:52px 0 18px} .prose h2:first-child{margin-top:0} .prose h3{font-size:22px;margin:32px 0 12px} .prose ul{margin:0 0 20px;max-width:68ch} .prose ul li{position:relative;padding-left:24px;margin-bottom:11px;color:var(--muted)} .prose ul li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:3px;background:var(--orange);transform:skewX(var(--lean))} .prose a{color:var(--orange-dk);text-decoration:underline;text-underline-offset:3px} /* legal pages: same language, no photography, maximum readability */ .legal-head{background:var(--ink);color:#fff;padding:72px 0 64px;position:relative;overflow:hidden} .legal-head::before{content:"";position:absolute;top:-40px;right:7%;width:18px;height:180%;background:var(--orange);opacity:.22;transform:skewX(var(--lean));pointer-events:none} .legal-head::after{content:"";position:absolute;top:-40px;right:calc(7% + 40px);width:5px;height:180%;background:var(--orange);opacity:.4;transform:skewX(var(--lean));pointer-events:none} .legal-head .wrap{position:relative;z-index:2} .legal-head h1{font-size:clamp(38px,5.6vw,60px);color:#fff} .updated{margin-top:18px;font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d)} .legal{max-width:860px;margin:0 auto;padding:72px 28px 88px} .legal hr{border:0;border-top:1px solid var(--line);margin:44px 0} .legal h2:first-of-type{margin-top:0} /* ========================================================================== BUTTONS. The phone is never orange text on an orange field. ========================================================================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.045em; text-transform:uppercase;padding:15px 30px;border-radius:var(--radius); border:2px solid transparent;cursor:pointer;white-space:nowrap;line-height:1.1; transition:background var(--ease),color var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease); } .btn-orange{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 1px 2px rgba(30,18,10,.16),0 8px 20px rgba(30,18,10,.20)} .btn-orange:hover{background:var(--orange-dk);border-color:var(--orange-dk);transform:translateY(-3px);box-shadow:0 2px 5px rgba(30,18,10,.2),0 16px 30px rgba(30,18,10,.26)} .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(0,0,0,.28)} .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-3px)} .btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)} .btn-dark:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-3px)} .btn-line{border-color:var(--ink);color:var(--ink);background:transparent} .btn-line:hover{background:var(--ink);color:#fff;transform:translateY(-3px)} .btnrow{display:flex;gap:14px;flex-wrap:wrap} .center .btnrow{justify-content:center} /* on a phone the call button is the page, so it gets the full width */ @media(max-width:560px){ .btn{width:100%} .btnrow,.hero-ctas,.chero-ctas{flex-direction:column;align-items:stretch} } /* ========================================================================== UTILITY BAR + HEADER Carried forward from the build the client asked to keep: angled plates with bright slits cut between them. Same lean on every cut. ========================================================================== */ .util{ background:var(--ink-2);color:#b9c0c8;font-size:14px;padding:9px 24px; display:flex;justify-content:center;gap:38px;flex-wrap:wrap;position:relative;overflow:hidden; } .util span{display:inline-flex;align-items:center;gap:8px} .util b{color:#fff;font-weight:600} .util svg{color:var(--orange);flex-shrink:0} /* the util slit is the top of the header's right-hand slash: same lean, same distance from the right edge, so the two read as one cut through both bars */ .util::after{content:"";position:absolute;top:0;bottom:0;right:0;width:60px;background:#fff;clip-path:polygon(18px 0,44px 0,36px 100%,10px 100%);pointer-events:none} @media(max-width:900px){.util::after{display:none}} @media(max-width:600px){.util{gap:6px 18px;font-size:12.5px;padding:8px 14px}} .site-head{position:sticky;top:0;z-index:80;background:var(--ink);display:flex;align-items:stretch;min-height:140px} /* the brand block stays black. The logo is chrome and orange on transparency and needs a dark field; the white in this header comes from the slits. */ .brand-block{background:var(--ink);display:flex;align-items:center;padding:6px 58px 6px 30px;flex-shrink:0;position:relative;clip-path:polygon(0 0,100% 0,calc(100% - 34px) 100%,0 100%)} .brand-block img{height:126px;width:auto} .nav-band{flex:1;position:relative;display:flex;align-items:center;justify-content:flex-end;gap:26px;padding:0 92px 0 60px;margin-left:-30px} /* the orange plate is painted by ::before, never by clip-path on the element */ .nav-band::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ff8148 0 5px,transparent 5px),linear-gradient(0deg,#cf4d17 0 6px,transparent 6px),var(--orange);clip-path:polygon(46px 0,100% 0,100% 100%,12px 100%);z-index:0} /* SLIT 1: white wedge between the black brand block and the orange plate */ .nav-band::after{content:"";position:absolute;top:0;bottom:0;left:-8px;width:64px;background:#fff;clip-path:polygon(38px 0,54px 0,20px 100%,4px 100%);z-index:0;pointer-events:none} /* SLIT 2: white slash near the right end, cutting the orange in two. Sits in the padding the nav-band reserves for it, so it never lands on a link. */ .site-head::after{content:"";position:absolute;top:0;bottom:0;right:0;width:110px;background:#fff;clip-path:polygon(60px 0,86px 0,56px 100%,30px 100%);z-index:2;pointer-events:none} .nav-band>*{position:relative;z-index:3} .nav-band nav{display:block} .menu{display:flex;align-items:center;gap:26px;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:#fff} .menu>li{position:relative} .menu>li>a{display:inline-block;padding:58px 0;position:relative} .menu>li>a::after{content:"";position:absolute;left:0;right:100%;bottom:50px;height:2px;background:#fff;transition:right .2s} .menu>li:hover>a::after,.menu>li:focus-within>a::after{right:0} .menu>li.has-sub>a{padding-right:24px} .caret{position:absolute;right:0;top:50%;transform:translateY(-50%);width:20px;height:26px;background:none;border:0;cursor:pointer;padding:0} .caret::after{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);transition:transform .2s} .has-sub.open>.caret::after{transform:rotate(-135deg)} .submenu{position:absolute;top:100%;left:-18px;min-width:252px;background:var(--ink);border-top:3px solid var(--orange);box-shadow:0 18px 40px rgba(0,0,0,.45);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility .18s;z-index:90} .menu>li:hover>.submenu,.menu>li:focus-within>.submenu,.has-sub.open>.submenu{opacity:1;visibility:visible;transform:none} .submenu a{display:block;padding:11px 22px;font-family:var(--body);font-weight:400;font-size:14.5px;letter-spacing:.03em;text-transform:none;color:#d7dce1;white-space:nowrap;transition:background .14s,color .14s} .submenu a:hover{background:var(--ink-3);color:var(--orange-hi)} /* THE PHONE TREATMENT: white on near-black with an orange accent edge, so it never sits orange-on-orange against the nav plate. */ .head-num{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.01em;color:#fff;white-space:nowrap;display:flex;align-items:center;gap:10px;background:var(--ink);border-left:4px solid var(--orange);border-radius:0 var(--radius) var(--radius) 0;padding:11px 18px 11px 15px;transition:background var(--ease)} .head-num:hover{background:var(--ink-3)} .head-num svg{flex-shrink:0;color:var(--orange)} .nav-toggle{display:none;background:none;border:0;cursor:pointer;width:38px;height:34px;padding:6px 4px;flex-direction:column;justify-content:space-between} .nav-toggle span{display:block;height:3px;background:#fff;border-radius:2px;transition:transform .22s,opacity .18s} .site-head.nav-open .nav-toggle span:nth-child(1){transform:translateY(10px) rotate(45deg)} .site-head.nav-open .nav-toggle span:nth-child(2){opacity:0} .site-head.nav-open .nav-toggle span:nth-child(3){transform:translateY(-10px) rotate(-45deg)} @media(max-width:1280px){ .nav-band{justify-content:space-between;padding:0 74px 0 52px} .site-head::after{width:88px;clip-path:polygon(50px 0,70px 0,44px 100%,24px 100%)} .nav-toggle{display:flex;order:-1} .nav-band nav{position:absolute;top:100%;left:0;right:0;background:var(--ink);border-top:3px solid var(--orange);max-height:0;overflow:hidden;transition:max-height .28s ease;z-index:95} .site-head.nav-open .nav-band nav{max-height:84vh;overflow-y:auto} .menu{flex-direction:column;align-items:stretch;gap:0;padding:6px 0} .menu>li{border-top:1px solid var(--line-d)} .menu>li:first-child{border-top:none} .menu>li>a{display:block;padding:15px 24px} .menu>li>a::after{display:none} /* on a phone the submenu sits inline and open, so nothing is two taps deep */ .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:0;min-width:0;padding:0 0 8px;background:var(--ink-2)} .submenu a{padding:11px 24px 11px 42px} .caret{display:none} } @media(max-width:600px){ .site-head{min-height:0} .brand-block{padding:6px 34px 6px 16px;clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%)} .brand-block img{height:82px} .nav-band{padding:0 52px 0 40px;margin-left:-18px} .nav-band::before{clip-path:polygon(30px 0,100% 0,100% 100%,8px 100%)} .nav-band::after{left:-6px;width:44px;clip-path:polygon(24px 0,36px 0,14px 100%,2px 100%)} .site-head::after{width:60px;clip-path:polygon(34px 0,48px 0,30px 100%,16px 100%)} .head-num{font-size:19px;padding:9px 12px 9px 10px} } /* Small phones. Measured: at the 600px sizes the brand plate, the burger, the reserved slash gutter and the phone chip add up to about 420px of unshrinkable width, which overflows a 390px screen. Everything below trims that to ~300px. The phone number stays; the icon beside it goes, because the number is the thing that has to survive. */ @media(max-width:430px){ .brand-block{padding:6px 26px 6px 12px} .brand-block img{height:62px} .nav-band{padding:0 40px 0 26px;gap:12px;margin-left:-14px} .nav-band::before{clip-path:polygon(24px 0,100% 0,100% 100%,6px 100%)} .nav-band::after{left:-5px;width:34px;clip-path:polygon(19px 0,28px 0,11px 100%,2px 100%)} .site-head::after{width:44px;clip-path:polygon(24px 0,34px 0,20px 100%,10px 100%)} .head-num{font-size:17px;padding:8px 10px 8px 8px;border-left-width:3px} .head-num svg{display:none} .util{font-size:11.5px;gap:4px 14px} .callbar{font-size:17px} } /* ========================================================================== HOME HERO: the van, whole, every time. The client, twice: "it's way too zoomed in, and you can't see the full van's wrap." So the van is NOT a background, NOT object-fit:cover, and NOT in a fixed-height box. It is an at width:100%, height:auto, on a near-black field. Cropping it is structurally impossible here. Depth comes from moving the TYPE against the van on scroll, not from moving the van. Parallaxing the van inside an overflow-hidden box is exactly how it got cropped last time. ========================================================================== */ .hero{background:var(--ink);color:#fff;position:relative;overflow:hidden} .hero-top{position:relative;padding:78px 0 62px;z-index:2} /* shard field: the van's own graphic language, low contrast, behind the type */ .hero-shards{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .hero-shards i{position:absolute;display:block;background:var(--orange);transform:skewX(var(--lean));opacity:.16} .hero-shards i:nth-child(1){top:-40px;right:8%;width:16px;height:150%} .hero-shards i:nth-child(2){top:-40px;right:calc(8% + 40px);width:5px;height:150%;opacity:.3} .hero-shards i:nth-child(3){top:-40px;right:calc(8% + 62px);width:2px;height:150%;opacity:.5} .hero-shards i:nth-child(4){top:-40px;left:-30px;width:150px;height:150%;opacity:.05} @media(max-width:900px){ .hero-shards i:nth-child(1),.hero-shards i:nth-child(2),.hero-shards i:nth-child(3){right:-10px} /* on a narrow screen the shards land behind the spec list, so they drop back */ .hero-shards i{opacity:.08} .hero-shards i:nth-child(2){opacity:.16} .hero-shards i:nth-child(3){opacity:.26} .hero-shards i:nth-child(4){opacity:.03} } .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:end;position:relative;z-index:2} .hero h1{font-size:clamp(42px,6.4vw,66px);color:#fff} .hero h1 em{font-style:normal;display:block;color:var(--orange)} .hero .lede{color:#c3c8ce;margin-top:22px;max-width:56ch;font-size:19px} .hero .lede b{color:#fff} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} /* the spec column: four short facts, hairline separated, wide-tracked */ .hero-specs{border-top:1px solid var(--line-d);padding-top:6px} .hero-specs div{border-bottom:1px solid var(--line-d);padding:14px 0;display:flex;gap:12px;align-items:baseline} .hero-specs b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.16em;color:var(--orange);flex-shrink:0;width:56px} .hero-specs span{font-size:14.5px;line-height:1.45;color:#aeb4bb} /* THE VAN. Full width, natural aspect, uncropped, on black. */ .hero-van{position:relative;background:var(--ink-deep);border-top:3px solid var(--orange);z-index:2} .hero-van img{width:100%;height:auto;max-width:1600px;margin:0 auto} .hero-van figcaption{ position:absolute;left:0;bottom:0;z-index:3;background:var(--ink); font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.17em; text-transform:uppercase;color:#fff;padding:11px 26px 11px 18px; border-left:4px solid var(--orange); } @media(max-width:700px){.hero-van figcaption{font-size:12px;letter-spacing:.12em;padding:8px 16px 8px 12px}} /* the shard rule under the van: orange with hard dark slashes on the lean */ .shardrule{height:14px;background:var(--orange);position:relative;overflow:hidden} .shardrule::before{content:"";position:absolute;inset:-6px -30px;background:repeating-linear-gradient(102deg,transparent 0 30px,var(--ink) 30px 37px)} @media(max-width:980px){ .hero-grid{grid-template-columns:1fr;gap:36px;align-items:start} .hero-top{padding:56px 0 46px} .hero-specs{max-width:520px} } /* ========================================================================== INTERIOR PAGE HERO: same language, deliberately quieter than home. ========================================================================== */ .chero{position:relative;background:var(--ink);color:#fff;overflow:hidden} .chero-media{position:absolute;inset:0;z-index:0} .chero-media img{width:100%;height:100%;object-fit:cover} .chero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(94deg,rgba(9,9,10,.95) 0%,rgba(9,9,10,.86) 42%,rgba(9,9,10,.42) 76%,rgba(9,9,10,.3) 100%)} .chero .wrap{position:relative;z-index:2} .chero-inner{padding:86px 0 78px;max-width:760px} .chero h1{font-size:clamp(36px,5.4vw,58px);color:#fff} .chero h1 em{font-style:normal;display:block;color:var(--orange)} .chero p{margin-top:20px;font-size:18px;line-height:1.6;color:#c3c8ce;max-width:62ch} .chero p b{color:#fff} .chero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px} .chero-facts{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:32px;padding-top:22px;border-top:1px solid var(--line-d)} .fact{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#d3d8dd} .fact::before{content:"";width:14px;height:3px;background:var(--orange);transform:skewX(var(--lean));flex-shrink:0} @media(max-width:700px){.chero-inner{padding:56px 0 52px}.chero-media::after{background:linear-gradient(180deg,rgba(9,9,10,.8) 0%,rgba(9,9,10,.92) 100%)}} /* breadcrumb-ish tag row */ .chero-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:16px} .chero-tag::before{content:"";width:24px;height:3px;background:currentColor;transform:skewX(var(--lean))} /* ========================================================================== TICKER: a running strip of what he does. Static text, CSS marquee only. ========================================================================== */ .ticker{background:var(--ink-2);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);overflow:hidden;padding:13px 0} .ticker-track{display:flex;gap:44px;white-space:nowrap;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:#8f959d;padding-left:24px} .ticker-track span{display:inline-flex;align-items:center;gap:14px;flex-shrink:0} .ticker-track span::before{content:"";width:12px;height:3px;background:var(--orange);transform:skewX(var(--lean))} /* ========================================================================== CALL STRIP ========================================================================== */ .callstrip{background:var(--ink-2);padding:22px 0;border-bottom:3px solid var(--orange)} .callstrip .wrap{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap} .callstrip p{color:#a9afb7;font-size:16px;margin:0} .cs-btn{display:inline-flex;align-items:center;gap:11px;background:var(--orange);color:#fff;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.03em;text-transform:uppercase;padding:13px 28px;border-radius:var(--radius);box-shadow:0 1px 2px rgba(30,18,10,.2),0 8px 20px rgba(30,18,10,.24);transition:background var(--ease),transform var(--ease)} .cs-btn:hover{background:var(--orange-dk);transform:translateY(-3px)} /* ========================================================================== CARDS: photography-led. The photo fills the card edge to edge; it never sits in a padded box. ========================================================================== */ .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} @media(max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}} @media(max-width:720px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;gap:20px}} .card{ display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow); transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease); text-align:left; } .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:#d2d6db} .card-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)} .card-photo img{width:100%;height:100%;object-fit:cover;transition:transform 420ms var(--pop)} .card:hover .card-photo img{transform:scale(1.045)} .card-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,transparent,rgba(8,8,9,.55));pointer-events:none} /* orange shard tucked into the photo's bottom-left corner, on the site lean */ .card-photo::before{content:"";position:absolute;left:-6px;bottom:0;width:26px;height:74px;background:var(--orange);transform:skewX(var(--lean));z-index:2;transition:height var(--ease)} .card:hover .card-photo::before{height:104px} /* badge over a photo card, e.g. "Home Base" on Grantsville */ .card-tag{ position:absolute;left:0;top:18px;z-index:3;background:var(--ink);color:#fff; font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.15em; text-transform:uppercase;padding:7px 16px 7px 12px;border-left:4px solid var(--orange); } .card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1} .card-body h3{font-size:23px;color:var(--text);margin-bottom:11px} .card-body p{font-size:15.5px;line-height:1.6;color:var(--muted);margin-bottom:18px} /* a card with no trailing link should not reserve space for one */ .card-body p:last-child{margin-bottom:0} .card-more{margin-top:auto;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.09em;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:8px} .card:hover .card-more{color:var(--orange-dk)} .band-dark .card{background:var(--ink-2);border-color:#282a2e;box-shadow:var(--shadow-dark)} .band-dark .card-body h3{color:#fff} .band-dark .card-body p{color:var(--muted-d)} /* numbered trust cards, no photo */ .tcard{ position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:30px 26px 28px;box-shadow:var(--shadow); transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease); } .tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--orange)} .tcard .tnum{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.2em;color:var(--orange);display:block;margin-bottom:16px} .tcard h3{font-size:22px;margin-bottom:12px;color:var(--text)} .tcard p{font-size:15.5px;line-height:1.62;color:var(--muted)} .tcard::after{content:"";position:absolute;right:0;top:0;bottom:0;width:5px;background:var(--orange);transform:skewX(var(--lean));opacity:0;transition:opacity var(--ease)} .tcard:hover::after{opacity:1} .band-dark .tcard{background:var(--ink-2);border-color:#282a2e} .band-dark .tcard h3{color:#fff} .band-dark .tcard p{color:var(--muted-d)} /* There is deliberately NO icon-led card in this stylesheet. A small line icon stacked over a heading in a white box is the single most recognisable generated-UI pattern, and the client named it on sight: "just blank white cards, looks like AI came up with those pages." Every content card on every page is .card, and .card cannot exist without a photograph. */ /* ========================================================================== CUTOUT ACCENTS Isolated objects on transparency, used oversized and faint behind a section heading so a page has depth without another rectangle in it. Decoration only: aria-hidden, empty alt, pointer-events:none, and never over body copy. The section clips them, so one can never widen the page on a phone. ========================================================================== */ .has-cut{overflow:hidden} .has-cut>.wrap,.has-cut>.wrap-w{position:relative;z-index:2} .cut-accent{position:absolute;z-index:0;pointer-events:none;width:330px;opacity:.075} .cut-accent img{width:100%;height:auto} .band-dark .cut-accent,.cta-band .cut-accent,.showpiece .cut-accent{opacity:.12} .cut-tr{top:-46px;right:-72px;transform:rotate(-12deg)} .cut-br{bottom:-56px;right:-72px;transform:rotate(12deg)} .cut-bl{bottom:-56px;left:-84px;transform:rotate(12deg)} @media(max-width:900px){.cut-accent{width:210px;opacity:.05}} /* the town plate inside a split panel */ .split-city{font-family:var(--display);font-weight:700;font-size:clamp(38px,6vw,60px);line-height:.94;color:#fff;text-transform:uppercase;letter-spacing:-.015em} .split-city span{display:block;color:var(--orange)} .split-rule{height:0;border:0;border-top:1px solid var(--line-d);position:relative;margin:24px 0} .split-rule::after{content:"";position:absolute;left:50%;top:-4px;width:18px;height:5px;background:var(--orange);transform:translateX(-50%) skewX(var(--lean))} /* a bordered highlight, for the one paragraph on a page that must be read */ .callout{ border-left:5px solid var(--orange);background:var(--paper); padding:24px 28px;margin:32px 0;font-size:17px;line-height:1.65;color:var(--muted); border-radius:0 var(--radius) var(--radius) 0;text-align:left; } .callout b{color:var(--text)} .band-dark .callout{background:var(--ink-2);color:var(--muted-d)} .band-dark .callout b{color:#fff} /* ========================================================================== FEATURE: photo beside copy, photo bleeds past the container edge. ========================================================================== */ .feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center} .feat-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lift);aspect-ratio:4/3;background:var(--ink-2)} .feat-media img{width:100%;height:100%;object-fit:cover} .feat-media::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(8,8,9,.5));pointer-events:none} .feat-media::before{content:"";position:absolute;left:-8px;bottom:0;width:32px;height:110px;background:var(--orange);transform:skewX(var(--lean));z-index:2} /* bleed the media out to the viewport edge on wide screens */ .feat.bleed-l .feat-media{margin-left:calc(-1 * max(0px,(100vw - var(--wrap)) / 2) - 28px);border-radius:0} .feat.bleed-r .feat-media{margin-right:calc(-1 * max(0px,(100vw - var(--wrap)) / 2) - 28px);border-radius:0} .feat.rev .feat-media{order:2} @media(max-width:980px){ .feat{grid-template-columns:1fr;gap:34px} .feat.rev .feat-media{order:0} .feat.bleed-l .feat-media,.feat.bleed-r .feat-media{margin-left:-28px;margin-right:-28px} } .checks{margin-top:26px} .checks li{position:relative;padding-left:30px;margin-bottom:16px;font-size:16.5px;line-height:1.6;color:var(--muted)} .checks li b{color:var(--text)} .checks li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:4px;background:var(--orange);transform:skewX(var(--lean))} .checks.on-dark li,.band-dark .checks li{color:var(--muted-d)} .checks.on-dark li b,.band-dark .checks li b{color:#fff} /* promise list, used on the safes page */ .promise li{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.6;color:var(--muted)} .promise li:last-child{border-bottom:0} .promise li b{color:var(--text)} .promise .ico{color:var(--orange);flex-shrink:0;margin-top:3px} .band-dark .promise li{border-color:var(--line-d);color:var(--muted-d)} .band-dark .promise li b{color:#fff} /* ========================================================================== STATS: figures count up on enter. The real number is in the HTML, so it is correct with JS off; JS only animates from zero to what is already there. ========================================================================== */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stat{padding:34px 26px;border-left:1px solid var(--line)} .stat:first-child{border-left:0} .stat b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(44px,5.4vw,64px);line-height:1;letter-spacing:-.02em;color:var(--text)} .stat b i{font-style:normal;font-size:.4em;letter-spacing:.06em;margin-left:4px;color:var(--orange)} .stat span{display:block;margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--muted)} .band-dark .stats{border-color:var(--line-d)} .band-dark .stat{border-color:var(--line-d)} .band-dark .stat b{color:#fff} .band-dark .stat span{color:var(--muted-d)} @media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}.stat{border-top:1px solid var(--line)}.stat:nth-child(-n+2){border-top:0}.stat:nth-child(odd){border-left:0}.band-dark .stat{border-top-color:var(--line-d)}} @media(max-width:460px){.stat{padding:26px 16px}} /* proof strip: the same idea, three wide-tracked figures, used on interiors */ .proof-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:54px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:left} .proof-strip.four{grid-template-columns:repeat(4,1fr)} .proof-strip .pnum{padding:30px 26px;border-left:1px solid var(--line)} .proof-strip .pnum:first-child{border-left:0;padding-left:0} .pnum b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(38px,4.6vw,54px);line-height:1;color:var(--orange);letter-spacing:-.01em} .pnum b i{font-style:normal;font-size:.4em;letter-spacing:.06em;margin-left:4px} .pnum span{display:block;margin-top:11px;font-size:14.5px;line-height:1.5;color:var(--muted)} .band-dark .proof-strip,.band-dark .proof-strip .pnum{border-color:var(--line-d)} .band-dark .pnum span{color:var(--muted-d)} @media(max-width:900px){.proof-strip.four{grid-template-columns:repeat(2,1fr)}.proof-strip.four .pnum{border-top:1px solid var(--line)}.proof-strip.four .pnum:nth-child(-n+2){border-top:0}.proof-strip.four .pnum:nth-child(odd){border-left:0;padding-left:0}.band-dark .proof-strip.four .pnum{border-top-color:var(--line-d)}} @media(max-width:600px){.proof-strip,.proof-strip.four{grid-template-columns:1fr}.proof-strip .pnum{border-left:0;padding-left:0;border-top:1px solid var(--line)}.proof-strip .pnum:first-child{border-top:0}.band-dark .proof-strip .pnum{border-top-color:var(--line-d)}} /* ========================================================================== ★ THE SHOWPIECE: GOVERNMENT SAFE CERTIFIED The only section on the site allowed to shout. Full-bleed near-black band with hard edges top and bottom, the safe photo behind it heavily darkened, the largest type anywhere on the site, an orange hairline full width above and below, and one oversized padlock bleeding off the right edge. Impact comes from scale and contrast. Its only motion is a fade and rise. ========================================================================== */ .showpiece{ position:relative;background:var(--ink-deep);color:#fff;overflow:hidden; border-top:2px solid var(--orange);border-bottom:2px solid var(--orange); padding:118px 0 104px; } .showpiece-bg{position:absolute;inset:0;z-index:0} .showpiece-bg img{width:100%;height:100%;object-fit:cover;object-position:66% 50%;opacity:.5} /* heavy on the left where the type lives, lighter on the right so the safe reads */ .showpiece-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(6,6,7,.97) 0%,rgba(6,6,7,.9) 44%,rgba(6,6,7,.5) 74%,rgba(6,6,7,.36) 100%)} /* oversized padlock, texture only, never over body copy */ .showpiece-mark{position:absolute;right:-140px;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;opacity:.07;color:#fff} .showpiece-mark svg{width:660px;height:660px;display:block} .showpiece .wrap{position:relative;z-index:2} .sp-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:26px} .sp-eyebrow::before{content:"";width:34px;height:3px;background:currentColor;transform:skewX(var(--lean))} .sp-title{ font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(48px,9.4vw,132px);line-height:.92;letter-spacing:-.025em;color:#fff; } /* stacked deliberately, so the break never depends on the viewport */ .sp-title span{display:block} .sp-line{margin-top:30px;font-size:20px;line-height:1.55;color:#c9ced4;max-width:56ch} .sp-line b{color:#fff;font-weight:600} .sp-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;border-top:1px solid rgba(238,97,39,.45)} .sp-fig{padding:32px 24px 6px;border-left:1px solid rgba(255,255,255,.11)} .sp-fig:first-child{border-left:0;padding-left:0} .sp-fig b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:.02em;color:var(--orange)} .sp-fig span{display:block;margin-top:14px;font-family:var(--body);font-weight:500;font-size:12.5px;letter-spacing:.19em;text-transform:uppercase;line-height:1.65;color:#a7adb5} .sp-cta{margin-top:52px} @media(max-width:1100px){.showpiece-mark svg{width:460px;height:460px}.showpiece-mark{right:-120px}} @media(max-width:860px){ .showpiece{padding:78px 0 70px} .showpiece-mark{display:none} .sp-figs{grid-template-columns:repeat(2,1fr)} .sp-fig{padding:26px 18px 6px;border-top:1px solid rgba(255,255,255,.11)} .sp-fig:nth-child(-n+2){border-top:0} .sp-fig:nth-child(odd){border-left:0;padding-left:0} .sp-line{font-size:18px} } /* ========================================================================== SPLIT: dark copy panel beside a photo panel (interior pages) ========================================================================== */ .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch} .split-copy{padding:var(--sec) 6% var(--sec) max(28px,calc((100vw - var(--wrap)) / 2 + 28px))} .split-panel{position:relative;display:flex;align-items:center;justify-content:center;padding:60px 34px;background:var(--ink-deep);overflow:hidden;min-height:400px} .split-panel .sp-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28} /* Flat scrim over the photo. Without it the warm highlights in the image drop the small note text under 4.5:1, which showed up in the QA render. */ .split-panel::after{content:"";position:absolute;inset:0;background:rgba(8,8,9,.5);z-index:1;pointer-events:none} .split-panel>*:not(.sp-bg){position:relative;z-index:2} .split-mark{font-family:var(--display);font-weight:700;letter-spacing:.01em;font-size:30px;line-height:1.05;color:#fff;text-transform:uppercase} .split-note{margin-top:14px;color:#b8bec5;font-size:15px;line-height:1.65} @media(max-width:980px){ .split{grid-template-columns:1fr} .split-copy{padding:var(--sec-s) 28px} .split-panel{min-height:320px} } /* ========================================================================== AREAS / CHIPS ========================================================================== */ .areagrp{margin-top:44px} .areagrp h3{font-size:20px;letter-spacing:.12em;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:22px} .areagrp h3::before,.areagrp h3::after{content:"";height:1px;width:56px;background:var(--line)} .band-dark .areagrp h3{color:var(--muted-d)} .band-dark .areagrp h3::before,.band-dark .areagrp h3::after{background:var(--line-d)} .chips{display:flex;flex-wrap:wrap;gap:11px;justify-content:center} .chip{display:inline-flex;align-items:center;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.07em;text-transform:uppercase;padding:9px 18px;border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);background:#fff} a.chip.lit{background:var(--ink);border-color:var(--ink);color:#fff;transition:background var(--ease),transform var(--ease),border-color var(--ease)} a.chip.lit:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-3px)} .band-dark .chip{background:var(--ink-2);border-color:#2b2d31;color:var(--muted-d)} .band-dark a.chip.lit{background:var(--orange);border-color:var(--orange);color:#fff} .note{margin:26px auto 0;max-width:64ch;font-size:15.5px;line-height:1.6;color:var(--muted)} .band-dark .note{color:var(--muted-d)} /* nearby link row */ .nearby{display:flex;flex-wrap:wrap;gap:10px 12px;justify-content:center;margin-top:22px} .nearby a{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.07em;text-transform:uppercase;padding:9px 17px;border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);transition:background var(--ease),color var(--ease),border-color var(--ease)} .nearby a:hover{background:var(--ink);border-color:var(--ink);color:#fff} /* ========================================================================== FAQ ========================================================================== */ .faq{max-width:880px;margin:0 auto;text-align:left;border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line);padding:28px 0 26px} .faq-item h3{font-size:22px;margin-bottom:12px;color:var(--text);display:flex;gap:14px;align-items:flex-start} .faq-item h3::before{content:"";width:16px;height:4px;background:var(--orange);transform:skewX(var(--lean));flex-shrink:0;margin-top:11px} .faq-item p{font-size:16.5px;line-height:1.65;color:var(--muted);padding-left:30px} .faq-item p b{color:var(--text)} .band-dark .faq,.band-dark .faq-item{border-color:var(--line-d)} .band-dark .faq-item h3{color:#fff} .band-dark .faq-item p{color:var(--muted-d)} @media(max-width:600px){.faq-item p{padding-left:0}.faq-item h3::before{margin-top:9px}} /* ========================================================================== STEPS / PRICE ROWS ========================================================================== */ .steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:left} .step{border-top:3px solid var(--orange);padding-top:20px} .step::before{counter-increment:s;content:"0" counter(s);display:block;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.2em;color:var(--orange);margin-bottom:12px} .step h3{font-size:20px;margin-bottom:10px;color:var(--text)} .step p{font-size:15.5px;line-height:1.6;color:var(--muted)} .steps.three{grid-template-columns:repeat(3,1fr)} .band-dark .step h3{color:#fff} .band-dark .step p{color:var(--muted-d)} .band-dark .step p b{color:#fff} @media(max-width:900px){.steps,.steps.three{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.steps,.steps.three{grid-template-columns:1fr}} .pricelist{max-width:900px;margin:0 auto;text-align:left;border-top:1px solid var(--line)} .price-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)} .price-row h3{font-size:23px;margin-bottom:9px;color:var(--text)} .price-row p{font-size:16px;line-height:1.6;color:var(--muted)} .price-tag{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1;color:var(--orange);white-space:nowrap;letter-spacing:-.01em} .price-tag small{display:block;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px;text-align:right} @media(max-width:640px){.price-row{grid-template-columns:1fr}.price-tag small{text-align:left}} /* ========================================================================== CTA BAND + PARTNER + FOOTER ========================================================================== */ .cta-band{background:var(--ink);color:#fff;padding:88px 0;position:relative;overflow:hidden} .cta-band::before{content:"";position:absolute;top:-40px;right:6%;width:20px;height:170%;background:var(--orange);opacity:.2;transform:skewX(var(--lean));pointer-events:none} .cta-band::after{content:"";position:absolute;top:-40px;right:calc(6% + 46px);width:5px;height:170%;background:var(--orange);opacity:.35;transform:skewX(var(--lean));pointer-events:none} .cta-band .wrap{position:relative;z-index:2} .cta-band .h2::after{background:var(--orange)} .cta-num{display:inline-block;font-family:var(--display);font-weight:700;font-size:clamp(42px,6vw,72px);line-height:1;letter-spacing:-.02em;color:#fff;margin-top:30px;transition:color var(--ease)} .cta-num:hover{color:var(--orange)} .partner{background:var(--ink-2);color:#b0b6bd;text-align:center;padding:20px 24px;font-size:15.5px;border-top:1px solid var(--line-d)} .partner b{color:#fff} .p-link{color:var(--orange-hi);font-weight:600;text-decoration:underline;text-underline-offset:3px} footer{background:var(--ink-deep);color:#9ba2aa;padding:72px 0 0;font-size:15.5px} .foot-grid{max-width:var(--wrap);margin:0 auto;padding:0 28px 56px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:48px} .foot-logo{display:block;margin-bottom:20px} .foot-logo img{height:108px;width:auto} footer h4{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.1em;color:#fff;margin-bottom:18px;text-transform:uppercase;position:relative;padding-bottom:12px} footer h4::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:3px;background:var(--orange);transform:skewX(var(--lean))} footer ul li{margin-bottom:9px} footer ul li a{transition:color var(--ease)} footer ul li a:hover{color:var(--orange-hi)} .foot-contact li{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;line-height:1.6} .foot-contact svg{color:var(--orange);flex-shrink:0;margin-top:4px} .foot-contact b{color:#fff;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:.01em} .foot-contact a:hover{color:var(--orange-hi)} .foot-bottom{border-top:1px solid var(--line-d);padding:26px 28px 30px;text-align:center;font-size:14px;line-height:1.9;color:#767c84} .foot-bottom a{color:#9ba2aa;text-decoration:underline;text-underline-offset:3px} .foot-bottom a:hover{color:var(--orange-hi)} @media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;gap:38px}} @media(max-width:600px){.foot-grid{grid-template-columns:1fr;gap:32px}footer{padding-top:52px}} /* sticky call bar, phones only */ .callbar{display:none} @media(max-width:760px){ .callbar{ display:flex;align-items:center;justify-content:center;gap:10px; position:fixed;left:0;right:0;bottom:0;z-index:120; background:var(--orange);color:#fff;font-family:var(--display);font-weight:700; font-size:20px;letter-spacing:.05em;text-transform:uppercase;padding:15px 16px; box-shadow:0 -6px 22px rgba(0,0,0,.3); } body{padding-bottom:58px} } /* ========================================================================== SCROLL REVEAL: enhancement only. Everything above renders at full opacity with no transform. The rules below only bite inside `html.anim`, which is set by an inline script in and stripped again by that same script's watchdog if main.js never reports in. JS off, JS broken, JS slow: the page is complete. ========================================================================== */ .anim [data-rev]{ opacity:0;transform:translateY(26px); transition:opacity 460ms cubic-bezier(.2,.7,.3,1),transform 560ms var(--pop); } .anim [data-rev].in{opacity:1;transform:none} .anim [data-rev="2"]{transition-delay:80ms} .anim [data-rev="3"]{transition-delay:160ms} .anim [data-rev="4"]{transition-delay:240ms} .anim [data-rev="5"]{transition-delay:320ms} .anim [data-rev="6"]{transition-delay:400ms} /* grids deal their own cards in sequence; higher specificity than the manual delays */ .anim .grid-4>:nth-child(2),.anim .grid-3>:nth-child(2),.anim .grid-2>:nth-child(2){transition-delay:70ms} .anim .grid-4>:nth-child(3),.anim .grid-3>:nth-child(3){transition-delay:140ms} .anim .grid-4>:nth-child(4),.anim .grid-3>:nth-child(4){transition-delay:210ms} .anim .grid-3>:nth-child(5){transition-delay:280ms} .anim .grid-3>:nth-child(6){transition-delay:350ms} /* the heading shard draws itself in. Pure decoration, safe to depend on JS. */ .anim .h2[data-rev]::after{transform:skewX(var(--lean)) scaleX(0);transition:transform 560ms 180ms var(--pop)} .anim .h2[data-rev].in::after{transform:skewX(var(--lean)) scaleX(1)} /* hero type sits at a different depth to the van. The VAN NEVER MOVES: parallaxing it inside a clipped box is exactly how it got cropped before. */ .hero-copy,.hero-specs{will-change:transform} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .anim [data-rev]{opacity:1;transform:none;transition:none} .anim .h2[data-rev]::after{transform:skewX(var(--lean))} .card,.tcard,.btn,.chip,.cs-btn{transition:none} .card:hover,.tcard:hover,.btn:hover{transform:none} } /* print: strip the furniture */ @media print{ .util,.site-head,.callbar,.cta-band,.partner{display:none} body{font-size:12pt;color:#000} } /* PHOTO WALL - real photos from David's phone, added 2026-08-12 */ .pw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px} .pw-grid figure{margin:0;position:relative;overflow:hidden} .pw-grid img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.96)} .pw-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));text-align:left} .pw-grid .pw-tall img{aspect-ratio:3/4} @media(max-width:900px){.pw-grid{grid-template-columns:repeat(2,1fr)}} /* Hero sizing pass - 2026-08-13, GIB's calls: smaller on desktop, photo-first on mobile */ .hero-van img{max-height:74vh;width:auto;max-width:100%;display:block;margin:0 auto} @media(max-width:900px){ .hero{display:flex;flex-direction:column} .hero-van{order:-1} .hero-van img{max-height:none;width:100%} .hero-top{padding:34px 0 40px} } /* Partner slots - 2026-08-13 */ .partner-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:940px;margin:48px auto 0;text-align:left} @media(max-width:700px){.partner-grid{grid-template-columns:1fr}} .partner-grid .tcard a.plink{display:inline-block;margin-top:14px;font-weight:700;color:var(--orange);text-decoration:none;letter-spacing:.04em} .partner-grid .tcard a.plink:hover{text-decoration:underline} /* Bigger header logo on desktop - 2026-08-13 */ @media(min-width:1200px){.brand-block img{height:150px}} /* Tow referral in the utility bar - 2026-08-13, mirrors Casey's ribbon for David */ .util .tow{color:inherit;text-decoration:none;font-weight:400;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;opacity:.92} .util .tow b{color:inherit;font-weight:600} .util .tow:hover{color:#8de533} .util .tow:hover b{color:#8de533} .util .tow:hover{text-decoration:underline} @media(max-width:700px){.util .tow{display:none}}