/* ========================================================= EIDER ELEVATORS — homepage Direction: industrial editorial. Midnight ground, warm cream floors, orange as structure. Vertical-motion motif. ========================================================= */ :root{ /* palette */ --orange:#F26430; /* the same hue darkened, for orange text on cream or white cards: #F26430 there is ~3:1, this hits 5.3:1 */ --orange-d:#A63C10; /* secondary accent. An amber-gold instead of a highway yellow: sits ~24 degrees of hue off the orange so the two still read as distinct, but sits in the same warm family so the pair feels considered rather than sign-shop. Contrast on ink is ~8.5:1; never used on cream (yellow on cream is unreadable). */ --yellow:#F0B429; --ink:#141210; --ink-2:#0B0A08; --ink-3:#221F1B; --cream:#FBF3E1; --grey:#E4E1DB; --stone:#A5A6A2; /* Card accent — a deep navy that anchors the light-blue credential cards on the Why Us band: dark enough to carry a cream icon at full contrast, cool enough that it never reads as a second brand orange. */ --navy:#173A5E; /* Card-outline accent — a deep, cabinet-grade forest green that reads as a considered fourth colour beside the orange / yellow / ink / cream system: rich enough to hold its own on cream, dark enough not to bleed on ink, and never used for section backgrounds. */ --forest:#1F4636; --forest-d:#153024; /* type */ --display:'Archivo','Helvetica Neue',Helvetica,sans-serif; --body:'Hanken Grotesk','Helvetica Neue',Helvetica,sans-serif; --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace; /* layout */ --shell:1760px; --pad:clamp(20px,5vw,80px); --sect-y:clamp(72px,10vw,152px); /* motion */ --ease:cubic-bezier(.22,1,.36,1); --swift:cubic-bezier(.4,0,.2,1); /* elevation — one system so every card reads as the same object at the same depth, rather than a flat outline that only lifts on hover */ --radius:16px; --shadow-rest:0 1px 2px rgba(28,20,10,.07),0 12px 26px -18px rgba(28,20,10,.34); --shadow-lift:0 2px 4px rgba(28,20,10,.06),0 30px 56px -26px rgba(28,20,10,.52); --shadow-rest-dark:0 2px 6px rgba(0,0,0,.4),0 20px 44px -26px rgba(0,0,0,.75); --shadow-lift-dark:0 3px 8px rgba(0,0,0,.45),0 34px 60px -26px rgba(0,0,0,.82); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html:focus-within{scroll-behavior:smooth} body{ margin:0; background:var(--ink); color:var(--cream); font-family:var(--body); font-size:clamp(15px,.55vw + 13px,17px); line-height:1.62; font-weight:400; /* clip, not hidden: never turns into a scroll container */ overflow-x:clip; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} ul,ol{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.028em;line-height:.95} p{margin:0} ::selection{background:var(--orange);color:var(--ink)} /* yellow rings read on all three grounds; orange vanished into the orange sections */ :focus-visible{outline:3px solid var(--yellow);outline-offset:2px} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);color:var(--ink);padding:12px 18px;font-family:var(--mono);font-size:12px} .skip:focus{left:12px;top:12px} .shell{width:100%;max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)} /* keep anchored headings clear of the fixed nav */ [id]{scroll-margin-top:124px} /* ---------- grain + scroll rail ---------- */ /* No fixed full-viewport texture layer: every extra fixed layer is another surface the compositor has to keep in sync while scrolling. */ .rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;background:rgba(168,170,172,.16)} .rail__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--yellow))} /* ========================================================= NAV ========================================================= */ /* The bar carries a solid dark background at all times, not only once stuck. The animated mark is a bright logo on a black ground, and the bar is its own stacking context, so mix-blend-mode cannot reach past it to the hero — against a transparent bar the clip's black ground would read as a plate. On this background it disappears exactly. */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--ink-2);transition:background .45s var(--swift),border-color .45s var(--swift)} /* yellow rule closing the header — only while the bar has a background; invisible over the hero when the header is transparent */ .nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;z-index:1;transition:background .45s var(--swift)} .nav.stuck::after{background:var(--yellow)} .nav__in{ max-width:var(--shell);margin:0 auto;padding:10px var(--pad); display:flex;align-items:center;gap:clamp(16px,3vw,56px); border-bottom:1px solid transparent;transition:padding .4s var(--swift),border-color .4s var(--swift); } /* Opaque rather than backdrop-filter: a blurred fixed bar has to re-sample the page under it on every scroll frame, which is the other common source of smeared or stale bands. */ .nav.stuck{background:var(--ink-2)} .nav.stuck .nav__in{padding-block:6px} /* sized off the artwork, not the box: at these heights the mark inside the clip lands at roughly the 54-74px the still logo used to occupy */ .nav__brand .mark{height:clamp(96px,8.6vw,132px)} .nav__links{display:none;gap:clamp(14px,1.9vw,30px);margin-right:auto;font-size:14px;font-weight:500} .nav__links a{position:relative;padding:6px 0;color:rgba(254,248,232,.72);transition:color .3s} .nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--yellow);transition:width .35s var(--ease)} .nav__links a:hover{color:var(--cream)} .nav__links a:hover::after{width:100%} .nav__act{display:none;align-items:center;gap:18px;margin-left:auto} .ghost{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--stone);transition:color .3s} .ghost:hover{color:var(--cream)} .ghost__dot{width:6px;height:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pulse 2.4s infinite} @keyframes pulse{70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}} @media (min-width:1024px){ .nav__links,.nav__act{display:flex} /* three columns so the page links sit dead-centre of the header regardless of the logo and action-group widths */ .nav__in{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,56px)} .nav__brand{justify-self:start} .nav__links{margin:0;justify-self:center} .nav__act{margin:0;justify-self:end} } .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:34px;margin-left:auto} .burger i{display:block;height:2px;width:22px;margin-left:auto;background:var(--cream);transition:transform .35s var(--ease),width .35s var(--ease)} .burger i:last-child{width:14px} .burger[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)} .burger[aria-expanded="true"] i:last-child{width:22px;transform:translateY(-3.5px) rotate(-45deg)} @media (min-width:1024px){.burger{display:none}} /* Shown and hidden with display, never with an animated height: the menu must be fully usable the instant it opens, even if animation never runs. The stagger animates transform only, and fills 'both', so a stalled animation leaves links visible, just slightly offset — it can never hide them. */ .drawer{display:none;background:var(--ink-2)} .drawer.open{display:block;max-height:80vh;overflow-y:auto;border-bottom:1px solid rgba(168,170,172,.18)} @media (min-width:1024px){.drawer,.drawer.open{display:none}} .drawer > a{ display:block;padding:14px var(--pad);font-family:var(--display);font-size:19px;font-weight:600; border-top:1px solid rgba(168,170,172,.12); } .drawer.open > a{animation:linkIn .42s var(--ease) both} .drawer.open > a:nth-child(2){animation-delay:.04s} .drawer.open > a:nth-child(3){animation-delay:.08s} .drawer.open > a:nth-child(4){animation-delay:.12s} .drawer.open > a:nth-child(5){animation-delay:.16s} .drawer.open > a:nth-child(6){animation-delay:.2s} .drawer.open > a:nth-child(7){animation-delay:.24s} .drawer.open > a:nth-child(8){animation-delay:.28s} @keyframes linkIn{from{transform:translateY(-7px)}} .drawer > a:last-child{color:var(--yellow);font-family:var(--mono);font-size:13px} /* ========================================================= SHARED BITS ========================================================= */ .eyebrow{ display:flex;align-items:center;gap:12px;margin-bottom:clamp(20px,2.4vw,32px); font-family:var(--mono);font-size:clamp(9.5px,.6vw,11px);letter-spacing:.2em;text-transform:uppercase; color:var(--orange); } .eyebrow__bar{display:block;width:clamp(26px,4vw,54px);height:2px;background:var(--orange);transform-origin:left;animation:barIn 1s var(--ease) both} /* on ink the rule turns yellow, so every dark section opens on the accent while the label itself stays brand orange */ .sect--ink .eyebrow__bar,.hero .eyebrow__bar{background:var(--yellow)} @keyframes barIn{from{transform:scaleX(0)}} /* on cream and white grounds the light logo orange is unreadable at this size, so eyebrows there use the darkened variant */ .sect--cream .eyebrow{color:var(--orange-d)} .sect--cream .eyebrow .eyebrow__bar{background:var(--orange-d)} /* eyebrows on the orange sections (Why-choose-us, Free-site-survey) read in yellow — the rule bar and label carry the same accent that the checklists and inline links use elsewhere on the orange ground */ .eyebrow--dark{color:var(--yellow)} .eyebrow--dark .eyebrow__bar{background:var(--yellow)} .h2{font-size:clamp(2.05rem,5.4vw,4.6rem);letter-spacing:-.035em;line-height:.94;color:var(--ink)} .h2--light{color:var(--cream)} .h2--dark{color:var(--ink)} /* fill rises from the bottom on hover — done with background-size so plain text nodes stay above it without any z-index juggling */ .btn{ position:relative;display:inline-flex;align-items:center;gap:10px; padding:15px 26px;color:var(--ink); background-color:var(--orange); background-image:linear-gradient(var(--yellow),var(--yellow)); background-repeat:no-repeat;background-position:50% 100%;background-size:100% 0%; font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.005em; box-shadow:0 0 0 rgba(255,210,63,0); transition:background-size .45s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease); } .btn:hover{background-size:100% 100%;transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(255,210,63,.6)} .btn__ar{display:inline-block;transition:transform .35s var(--ease)} .btn:hover .btn__ar{transform:translate(3px,-3px)} .btn--sm{padding:11px 18px;font-size:13.5px} .btn--ink{background-color:var(--ink);color:var(--cream);background-image:linear-gradient(var(--yellow),var(--yellow))} .btn--ink:hover{color:var(--ink)} .btn--ink:hover{color:var(--ink);box-shadow:0 14px 30px -16px rgba(22,22,22,.6)} .link-u{ position:relative;font-weight:600;font-size:15px;padding-bottom:3px; background-image:linear-gradient(var(--orange),var(--orange)); background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%; transition:background-size .4s var(--ease),color .3s; } .link-u:hover{background-size:0 1px;color:var(--yellow)} .card__go{ display:inline-flex;align-items:center;gap:7px;margin-top:auto; font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange); } .card__go i{font-style:normal;transition:transform .35s var(--ease)} .fine{margin-top:14px;font-size:12px;line-height:1.55;color:var(--stone)} /* ---------- placeholders ---------- */ .ph{ position:relative;margin:0;overflow:hidden; background: repeating-linear-gradient(135deg,rgba(168,170,172,.16) 0 1px,transparent 1px 9px), linear-gradient(160deg,#1D1D1D,#101010); border:1px solid rgba(168,170,172,.22); display:flex;align-items:flex-end; } .ph::after{ content:"";position:absolute;inset:9px;pointer-events:none; border:1px dashed rgba(168,170,172,.2); } .ph__tag{ position:absolute;top:0;left:0;z-index:2;padding:6px 11px;background:var(--yellow);color:var(--ink); font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase; } .ph__note{ position:relative;z-index:2;padding:16px 18px;max-width:38ch; font-family:var(--mono);font-size:10px;line-height:1.7;letter-spacing:.05em; color:rgba(254,248,232,.66);text-transform:uppercase; } .ph img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block} .ph--16x9{aspect-ratio:16/9} .ph--21x9{aspect-ratio:21/9} .ph--4x3{aspect-ratio:4/3} .ph--3x4{aspect-ratio:3/4} .ph--4x5{aspect-ratio:4/5} .ph--9x16{aspect-ratio:9/16} /* once a real file loads, drop the stand-in note and dashed inset */ .ph.has-media::after,.ph.has-media .ph__note,.ph.has-media .ph__tag{display:none} .hero__fig{border-width:2px;border-color:rgba(168,170,172,.34);border-radius:18px} .hero__v{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;background:#000} .ph--onDark{background: repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 1px,transparent 1px 9px), linear-gradient(160deg,#B84520,#7A1E08) !important; border-color:rgba(255,255,255,.3) !important} .ph--onDark::after{border-color:rgba(255,255,255,.26) !important} .ph--onDark .ph__note{color:rgba(255,255,255,.82) !important} .ph--onDark .ph__tag{background:var(--ink)} /* ========================================================= HERO — full-bleed video, text over a light veil ========================================================= */ .hero{ position:relative;isolation:isolate;overflow:hidden; min-height:100svh;display:grid;align-items:center; background:var(--ink); } .hero__v{ position:absolute;inset:0;z-index:0; width:100%;height:100%;object-fit:cover;object-position:center; } /* just enough to hold the type: dark at the very top so the nav reads, a soft wash from the left behind the copy, and a floor at the bottom */ .hero__veil{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg,rgba(13,13,13,.62) 0%,rgba(13,13,13,0) 24%,rgba(13,13,13,0) 58%,rgba(13,13,13,.62) 100%), linear-gradient(90deg,rgba(13,13,13,.66) 0%,rgba(13,13,13,.28) 52%,rgba(13,13,13,.06) 100%); } .hero__in{ position:relative;z-index:2; padding-top:clamp(120px,15vh,180px);padding-bottom:clamp(64px,9vh,120px); } .hero__h1{ max-width:16ch; font-size:clamp(2.9rem,8.4vw,7.2rem); line-height:.88;letter-spacing:-.042em;font-weight:800; margin-bottom:clamp(24px,3vw,38px); text-shadow:0 2px 30px rgba(0,0,0,.4); } .hero__h1 .line{display:block;overflow:hidden} .hero__h1 .line > span{display:block;transform:translateY(105%);animation:lineUp 1.05s var(--ease) forwards} .hero__h1 .line:nth-child(1) > span{animation-delay:.1s} .hero__h1 .line:nth-child(2) > span{animation-delay:.2s} .hero__h1 .line:nth-child(3) > span{animation-delay:.3s} .line--accent > span{color:var(--orange)} /* hero eyebrow in yellow — matches its yellow bar, pops on the dark video */ .hero .eyebrow{color:var(--yellow)} @keyframes lineUp{to{transform:translateY(0)}} .hero__sub{max-width:52ch;font-size:clamp(15.5px,1.15vw,18.5px);color:rgba(254,248,232,.86);line-height:1.66} /* key facts in yellow bring the third colour into the hero copy (no underline) */ .hero__sub strong{color:var(--yellow);font-weight:600} /* the secondary CTA gets a yellow underline, so yellow sits beside the orange primary button too */ .hero .link-u{background-image:linear-gradient(var(--yellow),var(--yellow))} .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2.5vw,32px);margin-top:clamp(28px,3.4vw,42px)} @media (prefers-reduced-motion:reduce){ .hero__h1 .line > span{transform:none;animation:none} } /* ========================================================= SECTIONS ========================================================= */ .sect{position:relative;padding-block:var(--sect-y)} /* yellow rule closing every section — sits on top of the section's own background layers, and above the hero video. Deliberately heavy: it is the one element every section shares, so it reads as the page's spine rather than a hairline between panels. */ .sect::after,.hero::after,.quote::after{ content:"";position:absolute;left:0;right:0;bottom:0;z-index:5; height:5px;background:var(--yellow);pointer-events:none; box-shadow:0 -1px 0 rgba(22,22,22,.32); } @media (max-width:620px){ .sect::after,.hero::after,.quote::after{height:4px} } .sect--cream{background:var(--cream);color:var(--ink)} /* Why Us is a full orange band — white credential cards read hard against it, and it breaks the ink/cream alternation near the top */ .sect--grey{background:var(--grey);color:var(--ink)} .sect--orange{background:var(--orange);color:var(--ink)} .sect--orange .sect__note{color:rgba(22,22,22,.82)} /* Testimonials band — a light, washed orange. Lighter than --orange so the cream cards still separate from it, warm enough that the section still reads as part of the orange family rather than a new colour. */ /* Process band — a very light red. The step cards already carry a bold forest frame and an orange number disc, and both hold their own against a warm pink ground, so only the section's own note colour moves. */ .sect--blush{background:linear-gradient(170deg,#FDEDEA 0%,#F8D8D2 100%);color:var(--ink)} .sect--blush .eyebrow{color:#A32E1C} .sect--blush .eyebrow__bar{background:#A32E1C} .sect--blush .sect__note{color:rgba(22,22,22,.72)} /* Previous-works band — a pale mint drawn from the forest accent, so the light section still belongs to the palette. Photo frames switch from yellow to forest here: yellow on mint goes muddy. */ /* About band — flat black. The section carries no background gradient at all: the only colour in it is the type and the moving ring on the photograph, which is what makes them read. */ .sect--night{background:#000;color:var(--cream)} .sect--night::before{ content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(90deg,rgba(251,243,225,.07) 1px,transparent 1px); background-size:clamp(70px,9vw,132px) 100%; } .sect--night .eyebrow{color:var(--orange)} .sect--night .eyebrow__bar{background:var(--orange)} .sect--mint{background:linear-gradient(170deg,#E4F2E6 0%,#CFE6D6 100%);color:var(--ink)} .sect--mint .eyebrow{color:var(--forest)} .sect--mint .eyebrow__bar{background:var(--forest)} .sect--mint .sect__note{color:rgba(22,22,22,.72)} .sect--mint .gal__t{border-color:var(--forest);box-shadow:0 3px 6px rgba(20,60,40,.16),0 20px 38px -18px rgba(20,60,40,.34)} .sect--mint .gal__t:hover{box-shadow:0 5px 10px rgba(20,60,40,.2),0 30px 56px -22px rgba(20,60,40,.44)} .sect--peach{background:linear-gradient(170deg,#FFE9D6 0%,#FDD9BB 100%);color:var(--ink)} .sect--peach .eyebrow{color:var(--orange-d)} .sect--peach .eyebrow__bar{background:var(--orange-d)} .sect--peach .sect__note{color:rgba(22,22,22,.72)} .sect--ink{background:var(--ink-2);color:var(--cream)} .sect--ink::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.6; background-image:linear-gradient(90deg,rgba(168,170,172,.07) 1px,transparent 1px); background-size:clamp(70px,9vw,132px) 100%; } .sect > .shell{position:relative} .sect__head{margin-bottom:clamp(40px,5.4vw,78px)} .sect__head--split{display:grid;gap:clamp(22px,3vw,56px);align-items:end} @media (min-width:900px){.sect__head--split{grid-template-columns:1.15fr .85fr}} .sect__note{margin-top:clamp(20px,2.4vw,30px);max-width:62ch;font-size:clamp(15px,1.05vw,17px);color:#4A4A4A} .sect__note--light{margin-top:0;color:rgba(254,248,232,.72)} .sect__note--flush{margin-top:0} /* ---------- why us: icon cards on an infinite belt ---------- Reuses the logo-belt machinery below (row cloned in JS, belt slides exactly -50%), so the loop is seamless with no JS ticking per frame. */ .lg--why{margin-top:clamp(6px,1vw,16px)} .lg--why .lg__belt{animation-duration:44s} .why__c{ position:relative;display:flex;flex-direction:column;gap:12px; /* a fixed width, not min-width: the belt is width:max-content, so a flex item with only a floor stretches to fit its paragraph on one line and the card balloons */ flex:0 0 auto;width:clamp(258px,22vw,320px);padding:clamp(22px,2.2vw,30px); /* light blue face on the light orange band — the one cool/warm pairing on the page, so the credential cards separate from the section without needing a heavier border or a darker shadow */ background:linear-gradient(160deg,#F2F8FD 0%,#DCEBF7 100%); border:2px solid var(--ink);border-top-width:6px;border-top-color:var(--navy);border-radius:var(--radius); box-shadow:0 3px 6px rgba(23,58,94,.14),0 20px 38px -18px rgba(23,58,94,.3); transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .why__c:hover{transform:translateY(-6px);box-shadow:0 5px 10px rgba(23,58,94,.18),0 30px 56px -22px rgba(23,58,94,.4)} .why__i{ display:grid;place-items:center;width:52px;height:52px;margin-bottom:2px; border-radius:14px;background:var(--navy);color:var(--cream);border:2px solid var(--ink); } .why__i svg{width:24px;height:24px;display:block} .why__c h3{font-size:clamp(1.02rem,1.2vw,1.22rem);letter-spacing:-.022em;line-height:1.18;color:var(--ink)} .why__c p{font-size:13.5px;line-height:1.56;color:#3E4A55;white-space:normal} /* ---------- catalogue: lifts & escalators ---------- Infinite continuous belt (same seamless-loop machinery as the client and testimonials belts), no navigation controls. Each card carries a moving conic-gradient border so the outline itself is in motion. */ .lg--cat{margin-top:clamp(6px,1vw,16px)} .lg--cat .lg__belt{animation-duration:60s} .lg--cat .lg__row{gap:clamp(14px,1.6vw,24px);padding-block:24px;align-items:stretch} .lg--cat .cat__c{flex:0 0 clamp(260px,22vw,340px);min-width:0} /* Soft dusty peach face with a subtle diagonal wash. The outline is not a fixed border — it is a conic-gradient ring (::after) that rotates through orange, yellow and forest so the card edge itself is always in motion. The mask trick paints only the padding ring; the interior stays transparent so the card face reads through. */ @property --cat-angle { syntax: ''; initial-value: 0deg; inherits: false; } .cat__c{ position:relative;display:flex;flex-direction:column;overflow:hidden;isolation:isolate; background:linear-gradient(155deg,#FCE8D5 0%,#F4D5B6 100%); border:none;border-radius:var(--radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(100,60,20,.14), 0 12px 22px -12px rgba(90,55,20,.28); transition:transform .5s var(--ease),box-shadow .5s var(--ease); } .cat__c::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:3; padding:3px;border-radius:inherit; background:conic-gradient(from var(--cat-angle, 0deg), var(--orange) 0deg,var(--yellow) 120deg,var(--orange) 240deg,var(--yellow) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; animation:catBorderSpin 5s linear infinite; } @keyframes catBorderSpin{ to { --cat-angle: 360deg; } } .cat__c:hover{ transform:translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 6px rgba(100,60,20,.18), 0 20px 34px -14px rgba(90,55,20,.38); } /* browsers without @property support skip the angle animation — fall back to a static three-colour ring, so the outline still reads */ @supports not (background: paint(worklet)) { .cat__c::after{animation:none} } @media (prefers-reduced-motion:reduce){.cat__c::after{animation:none}} .cat__c .ph{border:0;border-bottom:1px solid rgba(242,100,48,.3);border-radius:0} .cat__b{display:flex;flex-direction:column;gap:10px;flex:1;padding:clamp(16px,1.45vw,22px)} .cat__k{ align-self:flex-start;padding:5px 9px;border-radius:100px; /* one chip colour across every card — the People/Goods wording still carries the distinction, the colour no longer splits the grid */ background:var(--yellow);color:var(--ink); font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase; } .cat__c h3{font-size:clamp(1.02rem,1.2vw,1.26rem);letter-spacing:-.022em;line-height:1.14;color:var(--ink)} .cat__c p{font-size:13.5px;line-height:1.56;color:#4A4A4A} .cat__x{padding-top:2px;border-top:1px solid rgba(22,22,22,.1)} .cat__x[hidden]{display:none} .cat__x p{margin-top:10px} .cat__more{ margin-top:auto;display:inline-flex;align-items:center;gap:7px;padding-top:4px;align-self:flex-start; font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d); } .cat__more i{font-style:normal;transition:transform .35s var(--ease)} .cat__more[aria-expanded="true"] i{transform:rotate(90deg)} .cat__more:hover i{transform:translate(2px,-2px)} .cat__more[aria-expanded="true"]:hover i{transform:rotate(90deg) translateY(-2px)} .cat__foot{margin-top:clamp(22px,2.6vw,34px);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#4A4A4A;text-transform:uppercase;line-height:2} .cat__foot strong{color:var(--ink);font-weight:500} /* ---------- video reel ---------- */ .reel{position:relative} /* plain responsive grid, no carousel: two clips per row on mobile, four across on wide desktop */ .reel__grid{display:grid;gap:clamp(12px,1.3vw,20px);grid-template-columns:repeat(2,1fr)} @media (min-width:1150px){.reel__grid{grid-template-columns:repeat(4,1fr)}} .reel__s{display:flex;flex-direction:column;min-width:0} /* bolder outline + soft corners, matching the card treatment used across the catalogue, process, client and partner sections */ /* the orange outline is the resting state, not a hover reveal — every clip carries it at all times */ /* the outline is not a fixed border — it is a conic-gradient ring (::before) that rotates through orange and yellow, so every clip edge is in motion even while the video below it is paused */ @property --reel-angle { syntax: ''; initial-value: 0deg; inherits: false; } .reel__f{position:relative;border:none;border-radius:var(--radius);box-shadow:var(--shadow-rest-dark);transition:transform .5s var(--ease),box-shadow .5s var(--ease)} /* the ring rides ::after — ::before is already the hover play cue. This also replaces the .ph dashed inner frame on these clips, which was a placeholder artifact sitting under the footage anyway. */ /* A plain yellow border sits on the frame itself, so there is a solid yellow outline on every browser no matter what else is supported. The rotating ring is painted over it. */ .reel__f{border:3px solid var(--yellow)} .reel__f::after{ content:"";position:absolute;inset:-3px;pointer-events:none;z-index:3; border:0;padding:3px;border-radius:inherit; /* background-COLOR and background-IMAGE are set separately on purpose: if a browser cannot parse the conic gradient, the flat yellow still paints and the outline survives as a solid ring */ background-color:var(--yellow); background-image:conic-gradient(from var(--reel-angle, 0deg), var(--yellow) 0deg,#FFF3CC 66deg,var(--yellow) 132deg, #A8760C 228deg,var(--yellow) 312deg,var(--yellow) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; animation:reelBorderSpin 3.4s linear infinite; } @keyframes reelBorderSpin{ to { --reel-angle: 360deg; } } /* browsers without @property support cannot animate the angle; the fallback angle in the gradient above keeps the ring painting as a static outline rather than dropping out altogether */ @supports not (background: paint(worklet)) { .reel__f::after{animation:none} } @media (prefers-reduced-motion:reduce){.reel__f::after{animation:none}} .reel__s:hover .reel__f{transform:translateY(-6px);box-shadow:var(--shadow-lift-dark)} .reel__s:hover .reel__f::after{animation-duration:1.7s;padding:5px} .reel__v{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;background:#000} /* inline sound toggle — still used by the process/etiquette video */ .reel__snd{ position:absolute;right:12px;bottom:12px;z-index:4; display:inline-flex;align-items:center;gap:8px;padding:9px 13px; background:rgba(13,13,13,.84);border:1px solid rgba(254,248,232,.28);border-radius:999px;color:var(--cream); font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; transition:background .3s,border-color .3s,color .3s; } .reel__snd:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)} .reel__snd svg{width:14px;height:14px;flex:none;display:block} .reel__snd .on,.reel__snd[aria-pressed="true"] .off{display:none} .reel__snd[aria-pressed="true"] .on{display:block} .reel__snd[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--ink)} /* clicking a clip opens it in the lightbox at its own size */ .reel__grid .reel__v{cursor:pointer} /* a faint play cue on hover so the frame reads as clickable, without a permanent icon sitting over the footage */ .reel__f::before{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(13,13,13,.28),transparent 42%); opacity:0;transition:opacity .4s var(--ease); } .reel__s:hover .reel__f::before{opacity:1} /* ---------- video lightbox ---------- */ .vmodal{ position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(14px,3vw,40px); animation:vfade .25s var(--ease) both; } .vmodal[hidden]{display:none} @keyframes vfade{from{opacity:0}} .vmodal__backdrop{position:absolute;inset:0;background:rgba(6,6,6,.9);cursor:zoom-out} .vmodal__box{position:relative;z-index:1;display:flex;max-width:100%;max-height:100%} .vmodal__v{ display:block;width:auto;height:auto;max-width:92vw;max-height:86vh; background:#000;border:2px solid var(--yellow);border-radius:var(--radius); box-shadow:0 40px 90px -30px rgba(0,0,0,.9); } .vmodal__x{ position:absolute;top:-14px;right:-14px;z-index:2; width:44px;height:44px;display:grid;place-items:center;border-radius:50%; background:var(--yellow);color:var(--ink);cursor:pointer; box-shadow:0 8px 20px -8px rgba(0,0,0,.7); transition:background .3s var(--ease),transform .3s var(--ease); } .vmodal__x:hover{background:var(--orange);transform:scale(1.06)} .vmodal__x svg{width:20px;height:20px;display:block} @media (max-width:560px){.vmodal__x{top:-10px;right:-10px;width:40px;height:40px}} /* image lightbox reuses the video-lightbox shell */ .imodal__i{ display:block;width:auto;height:auto;max-width:92vw;max-height:86vh; background:#000;border:2px solid var(--forest);border-radius:var(--radius); box-shadow:0 40px 90px -30px rgba(0,0,0,.9);object-fit:contain; } .gal__t{cursor:zoom-in} /* Drives all three belts. Each belt's row is cloned in JS, so shifting the belt by exactly -50% lands the copy where the original began and the loop never shows a seam. */ @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- logo belts (clients, partners) ---------- Same seamless trick as the other belts: the row is cloned in JS and the belt slides exactly -50%, so the seam never shows. Edges are faded with a mask on a non-fixed, non-scrolling element, which is safe here. */ /* negative margin cancels the row's vertical padding so the belt does not gain apparent height — the padding exists only to keep card resting shadows from being clipped by overflow:hidden */ /* the row carries 22px of vertical padding so card resting shadows are not clipped by overflow:hidden; negative margins here pull that back out so the belt keeps its original position and height */ /* draggable: pan-y lets the page still scroll vertically through the belt, while horizontal drags are captured for manual sliding */ .lg{position:relative;overflow:hidden;margin-top:calc(clamp(6px,1vw,14px) - 22px);margin-bottom:-22px; cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent} .lg.is-drag{cursor:grabbing} /* while JS drives the belt it stops the CSS keyframes; the keyframe animation stays as the no-JS fallback */ .lg.is-js .lg__belt{animation:none} .lg__belt{display:flex;width:max-content;will-change:transform;animation:slide 52s linear infinite} .lg--rev .lg__belt{animation-direction:reverse} .lg:hover .lg__belt{animation-play-state:paused} .lg__row{display:flex;align-items:stretch;gap:clamp(12px,1.3vw,20px);padding-inline:clamp(6px,.65vw,10px);padding-block:22px} .lg__t{ display:flex;flex-direction:column;justify-content:center;gap:7px; flex:0 0 auto;width:clamp(200px,17vw,264px);padding:clamp(20px,2vw,30px) clamp(18px,1.8vw,28px); border:2px solid rgba(168,170,172,.34);border-radius:16px; transition:border-color .4s var(--ease),background .4s var(--ease); } .lg__t:hover{border-color:var(--orange)} .sect--ink .lg__t:hover{border-color:var(--yellow)} .lg__mark{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;margin-bottom:4px;border-radius:10px; border:1px dashed rgba(168,170,172,.4); font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone); } .lg__t b{font-family:var(--display);font-weight:700;font-size:clamp(14px,1.05vw,17px);letter-spacing:-.015em;line-height:1.2;white-space:nowrap} .lg__t i{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)} .sect--cream .lg__t{border-color:var(--ink);background:#fff} .sect--cream .lg__t:hover{border-color:var(--orange)} .sect--cream .lg__mark{border-color:rgba(22,22,22,.24);color:#6A6A6A} @media (prefers-reduced-motion:reduce){ .lg__belt{animation:none} .lg{overflow-x:auto} } /* ---------- previous works gallery ---------- */ /* rides the shared belt, same as the other carousels */ .lg--gal{margin-top:clamp(6px,1vw,16px)} .gal__t{ position:relative;overflow:hidden;flex:0 0 auto; /* 3:4 matches eight of the nine sources exactly */ width:clamp(232px,20vw,300px);aspect-ratio:3/4; /* medium-weight yellow frame sits outside a thin white mat: the yellow carries the accent, the narrow white keeps the "framed photograph" read without dominating the card */ border:4px solid var(--yellow);border-radius:var(--radius);background:#fff;padding:3px; box-shadow:var(--shadow-rest); transition:transform .5s var(--ease),box-shadow .5s var(--ease); } /* the belt itself is grab-to-drag; the tile says "this opens" */ .gal__t{cursor:zoom-in} .lg--gal.is-drag .gal__t{cursor:grabbing} .gal__t img{width:100%;height:100%;object-fit:cover;display:block;border-radius:calc(var(--radius) - 9px);transition:transform .7s var(--ease)} .gal__t:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)} .gal__t:hover img{transform:scale(1.05)} @media (prefers-reduced-motion:reduce){ .gal__t:hover img{transform:none} } /* ---------- faq ---------- */ .faq{display:grid;gap:clamp(26px,3.4vw,56px);align-items:start} @media (min-width:960px){.faq{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}} .faq__fig{ position:relative;margin:0;overflow:hidden; /* 3:4 matches the source (561x748) exactly — no crop */ aspect-ratio:3/4;max-width:460px; border:4px solid var(--forest);border-radius:var(--radius);background:var(--ink); box-shadow:var(--shadow-rest); } .faq__fig img{width:100%;height:100%;object-fit:cover;display:block} .faq__list{display:grid;gap:clamp(10px,1.1vw,14px);align-content:start} /* FAQ image + question cards share the forest-green frame so the whole Common Questions block reads as one paired unit — medium 4px weight so the green sits visibly around every card without turning into a slab. Card face is a warm cream wash to sit distinct from the section cream. */ .faq__i{overflow:hidden;background:linear-gradient(155deg,#FBF6E4 0%,#F1E4C0 100%);border:4px solid var(--forest);border-radius:var(--radius);box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 4px rgba(80,55,15,.12), 0 12px 20px -12px rgba(60,45,15,.28)} .faq__h{margin:0;font-size:inherit;letter-spacing:normal;line-height:inherit} /* the question segment is its own colour block, distinct from the answer beneath it: closed reads in forest green with cream label, open flips to brand orange with ink label — three colours in dialogue instead of black-on-orange alone */ .faq__q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:clamp(15px,1.5vw,21px) clamp(15px,1.6vw,23px); background:var(--forest);color:var(--cream);text-align:left;cursor:pointer; font-family:var(--display);font-weight:700;font-size:clamp(.98rem,1.1vw,1.16rem);line-height:1.3; transition:background .35s var(--ease),color .35s var(--ease); } .faq__q:hover{background:var(--forest-d)} .faq__q[aria-expanded="true"]{background:var(--orange);color:var(--ink)} /* the cross is drawn, not typed: a "+" in a text font sits slightly off optical centre and renders soft at this size */ .faq__q i{ position:relative;flex:none;width:32px;height:32px;border-radius:50%; background:var(--yellow);font-size:0; transition:transform .35s var(--ease),background .3s var(--ease); } .faq__q i::before,.faq__q i::after{ content:"";position:absolute;left:50%;top:50%; background:var(--ink);border-radius:2px;transform:translate(-50%,-50%); transition:background .3s var(--ease); } .faq__q i::before{width:14px;height:2.5px} .faq__q i::after{width:2.5px;height:14px} /* open: rotate the cross and flip the disc to ink, since yellow on the orange header bar is only 1.9:1 */ .faq__q[aria-expanded="true"] i{transform:rotate(45deg);background:var(--ink)} .faq__q[aria-expanded="true"] i::before, .faq__q[aria-expanded="true"] i::after{background:var(--yellow)} .faq__a{padding:clamp(14px,1.5vw,19px) clamp(15px,1.6vw,23px) clamp(17px,1.8vw,23px)} .faq__a[hidden]{display:none} .faq__a p{font-size:14.6px;line-height:1.64;color:#4A4A4A} /* ---------- testimonials ---------- Rides the same belt as the other carousels: the row is cloned in JS and paced by measured width, so all of them scroll at one speed. */ .lg--tst{margin-top:clamp(6px,1vw,16px)} @property --tst-angle { syntax: ''; initial-value: 0deg; inherits: false; } .tst__c{ position:relative;isolation:isolate; flex:0 0 auto;width:clamp(292px,26vw,392px); display:flex;flex-direction:column;gap:14px; padding:clamp(22px,2.3vw,32px); /* cream-to-beige diagonal wash gives each card a warm gradient face; the paired inset highlight (top) and inset shadow (bottom) plus a deep drop shadow lift it off the peach section like a pressed tile */ background:linear-gradient(155deg,#FCF5E4 0%,var(--cream) 42%,#E9DDBE 100%); border:none;border-radius:var(--radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -14px 22px -14px rgba(120,90,40,.28), 0 3px 6px rgba(120,70,30,.20), 0 22px 44px -18px rgba(120,70,30,.38); transition:transform .5s var(--ease),box-shadow .5s var(--ease); } /* Bold moving outline: a 4px conic-gradient ring that rotates through ink, orange and yellow. The mask paints only the padding ring, so the card face reads through untouched. Same technique as .cat__c, thicker and darker here because it sits on a light orange band. */ .tst__c::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:3; padding:4px;border-radius:inherit; background:conic-gradient(from var(--tst-angle, 0deg), var(--ink) 0deg,var(--orange) 90deg,var(--yellow) 180deg,var(--orange) 270deg,var(--ink) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; animation:tstBorderSpin 4.5s linear infinite; } @keyframes tstBorderSpin{ to { --tst-angle: 360deg; } } /* browsers without @property support skip the angle animation — the static ring still reads as a bold outline */ @supports not (background: paint(worklet)) { .tst__c::after{animation:none} } @media (prefers-reduced-motion:reduce){.tst__c::after{animation:none}} .tst__c:hover{ transform:translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -14px 22px -14px rgba(120,90,40,.32), 0 4px 8px rgba(120,70,30,.24), 0 32px 60px -22px rgba(120,70,30,.46); } .tst__c:hover::after{animation-duration:2.2s;padding:5px} /* light-cream cards on the peach testimonials section: quote mark and role tag stay in the darkened brand orange (yellow on cream fails contrast); copy sits on ink so the whole card reads at editorial weight */ .tst__mark{font-family:var(--display);font-weight:800;font-size:44px;line-height:.7;color:var(--orange-d)} .tst__c blockquote{margin:0} .tst__c p{font-size:15.4px;line-height:1.6;color:#3A3A3A} .tst__by{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:8px;border-top:1px solid rgba(22,22,22,.12)} .tst__by b{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--ink)} .tst__by span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-d)} @media (prefers-reduced-motion:reduce){.tst--live .tst__c.on{animation:none}} /* ---------- about ---------- */ .abt{display:grid;gap:clamp(28px,3.6vw,58px);align-items:start} @media (min-width:900px){.abt{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}} @property --abt-angle { syntax: ''; initial-value: 0deg; inherits: false; } .abt__fig{ /* 3:2 matches the source (1536x1024) exactly, so nothing is cropped */ position:relative;margin:0;overflow:hidden;aspect-ratio:3/2; border:none;border-radius:var(--radius);background:#000; box-shadow:var(--shadow-rest-dark); } /* the photograph's frame is a rotating conic ring, same treatment as the clips in the reel, but drawn fine rather than bold and kept entirely within the yellow: a pale highlight and a deeper shade of the same hue give the rotation something to read against, with no second colour entering the section */ .abt__fig::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:2; padding:2px;border-radius:inherit; background:conic-gradient(from var(--abt-angle, 0deg), var(--yellow) 0deg,#FFF0C2 74deg,var(--yellow) 148deg, #B8860B 236deg,var(--yellow) 318deg,var(--yellow) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; animation:abtBorderSpin 3.4s linear infinite; } @keyframes abtBorderSpin{ to { --abt-angle: 360deg; } } @supports not (background: paint(worklet)) { .abt__fig::after{animation:none} } @media (prefers-reduced-motion:reduce){.abt__fig::after{animation:none}} .abt__media:hover .abt__fig::after{animation-duration:1.9s;padding:3px} .abt__fig img{width:100%;height:100%;object-fit:cover;display:block} .abt__cap{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;line-height:1.85;color:rgba(203,224,209,.6)} .abt__body p{max-width:60ch;font-size:clamp(15px,1.05vw,17px);color:rgba(251,243,225,.8)} .abt__body p + p{margin-top:18px} .abt__body strong{color:var(--yellow);font-weight:700} /* facts table: one accent, not three. Orange labels against cream values on quiet cream hairlines — the row reads left-to-right instead of every element competing for the same warm yellow */ .abt__facts{margin:clamp(28px,3vw,42px) 0 0;display:grid;border-top:1px solid rgba(242,100,48,.45)} @media (min-width:620px){.abt__facts{grid-template-columns:1fr 1fr}} .abt__facts > div{ display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:13px 0;border-bottom:1px solid rgba(251,243,225,.14); } @media (min-width:620px){ .abt__facts > div:nth-child(odd){padding-right:clamp(16px,2vw,30px)} .abt__facts > div:nth-child(even){padding-left:clamp(16px,2vw,30px);border-left:1px solid rgba(251,243,225,.14)} } .abt__facts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);white-space:nowrap} .abt__facts dd{margin:0;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.015em;color:var(--yellow);text-align:right} .abt__link{margin-top:clamp(24px,2.6vw,34px)} /* the survey link sits in the same column as the yellow fact values, so it takes the same colour rather than reading as a stray white line */ .abt__link .link-u{color:var(--yellow);background-image:linear-gradient(var(--yellow),var(--yellow))} /* ---------- product cards ---------- */ /* Uniform tiles: no card spans, and grid-auto-rows:1fr makes every row the same height, so all nine cards match regardless of copy length. Five across on wide desktops. */ .cards{display:grid;gap:clamp(12px,1.3vw,20px);grid-template-columns:1fr;grid-auto-rows:1fr} @media (min-width:560px){.cards{grid-template-columns:repeat(2,1fr)}} @media (min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}} @media (min-width:1200px){ .cards{grid-template-columns:repeat(5,1fr)} /* tighter type at five-up, where each tile is ~240px wide */ .card__body{gap:9px;padding:clamp(14px,1.15vw,19px)} .card h3{font-size:clamp(1rem,1.15vw,1.2rem)} .card p{font-size:13.5px;line-height:1.5} .card__go{font-size:9.5px;letter-spacing:.12em} .price{font-size:clamp(1.25rem,1.5vw,1.62rem)} .fine{margin-top:10px;font-size:11px} } .card{ position:relative;display:flex;flex-direction:column;overflow:hidden; background:#fff;border:1px solid rgba(22,22,22,.1); transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease); } .card::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--orange);transition:width .5s var(--ease)} .card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(22,22,22,.42);border-color:rgba(22,22,22,.2)} .card:hover::after{width:100%} .card:hover .card__go i{transform:translate(3px,-3px)} .card .ph{border:0;border-bottom:1px solid rgba(22,22,22,.1)} .card__body{display:flex;flex-direction:column;flex:1;gap:11px;padding:clamp(18px,1.9vw,28px)} .card__ix{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--stone)} .card h3{font-size:clamp(1.12rem,1.5vw,1.5rem);letter-spacing:-.025em;line-height:1.06} .card h3 em{font-style:normal;font-weight:500;color:var(--stone)} .card p{font-size:14.5px;line-height:1.58;color:#4A4A4A} .card--accent{background:var(--orange);border-color:var(--orange)} .card--accent h3,.card--accent .card__body{color:#fff} .card--accent p{color:rgba(255,255,255,.88)} .card--accent .card__ix{color:rgba(255,255,255,.72)} .card--accent .card__go{color:#fff} .card--accent::after{background:var(--ink)} .card--price{background:var(--ink);border-color:var(--ink)} .card--price h3{color:var(--cream)} .card--price p{color:rgba(254,248,232,.76)} .card--price .fine{color:var(--stone)} .price{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.2vw,2.05rem);letter-spacing:-.035em;color:var(--orange) !important} .price span{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)} .price em{font-style:normal;font-size:.6em;vertical-align:super} .cards__foot{margin-top:clamp(22px,2.6vw,34px);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#4A4A4A;text-transform:uppercase;line-height:2} .cards__foot strong{color:var(--ink);font-weight:500} /* ---------- numbers band ---------- Full yellow ground: the whole stats belt becomes the section's brand accent, with ink figures/labels reading crisp against it and a darkened brand orange for the "/" slash */ .nums{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(6px,.8vw,12px);margin-top:clamp(8px,1.4vw,20px);background:transparent} @media (min-width:820px){.nums{grid-template-columns:repeat(4,1fr)}} .num{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);padding:clamp(24px,3vw,40px) clamp(16px,2vw,28px);background:var(--yellow);border:2px solid var(--orange);border-radius:12px;transition:background .45s var(--swift),border-color .45s var(--swift)} .num:hover{background:#FFC94D;border-color:var(--orange-d)} .num b{ font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,7.6vw,6.4rem); line-height:.82;letter-spacing:-.055em;color:var(--ink);font-variant-numeric:tabular-nums; } .num b i{font-style:normal;color:var(--orange-d);font-size:.55em;vertical-align:.1em;padding-inline:.02em} .num span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1.9} .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,40px)} .badges span{ padding:9px 15px;border:1px solid rgba(168,170,172,.26); font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone); transition:border-color .35s,color .35s; } .badges span:hover{border-color:var(--orange);color:var(--orange)} /* ---------- process ---------- */ .proc{display:grid;gap:clamp(34px,4.5vw,68px);align-items:start} @media (min-width:960px){.proc{grid-template-columns:1.32fr .68fr;align-items:stretch}} .steps{position:relative;counter-reset:s;display:grid;gap:clamp(12px,1.3vw,18px)} /* the connecting spine belongs to a timeline, not to separated cards */ .steps::before{display:none} /* Step cards: soft cream-to-sand gradient face reads as its own object against the cream section, with a bold forest frame paired to the number disc so the row feels like one considered system */ .step{ position:relative;display:grid;grid-template-columns:clamp(52px,7vw,86px) 1fr; gap:clamp(14px,2.2vw,34px);align-items:start; padding:clamp(18px,2.1vw,28px) clamp(18px,2vw,26px); background:linear-gradient(155deg,#FBF6E4 0%,#F1E4C0 100%); border:3px solid var(--forest);border-radius:var(--radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(80,55,15,.14), 0 12px 22px -12px rgba(60,45,15,.3); transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease); } .step:hover{ border-color:var(--forest-d);transform:translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 8px rgba(80,55,15,.18), 0 22px 40px -16px rgba(60,45,15,.42); } /* number disc: brand orange with cream numerals and a forest ring — the two brand colours meet on the step marker so the section reads as green + orange, not yellow + black */ .step__n{ position:relative;z-index:1;width:clamp(44px,6.2vw,76px);height:clamp(44px,6.2vw,76px); display:grid;place-items:center;border-radius:50%; background:var(--orange);border:2px solid var(--forest);color:var(--cream); font-family:var(--display);font-weight:800;font-size:clamp(13px,1.3vw,18px);letter-spacing:-.02em; box-shadow:0 4px 12px -4px rgba(120,50,20,.55); transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease); } .step:hover .step__n{background:var(--forest);color:var(--yellow);border-color:var(--forest-d);transform:scale(1.06)} .step h3{font-size:clamp(1.12rem,1.7vw,1.6rem);letter-spacing:-.028em;margin-bottom:8px} .step p{max-width:52ch;font-size:14.8px;line-height:1.6;color:#4A4A4A} .proc__media{position:sticky;top:120px} /* bold dark-green frame, matching the step cards in this section so the video and the timeline read as one paired block */ .proc__media .ph{border-width:4px;border-color:var(--forest);border-radius:16px} /* Mobile keeps the 4:5 crop. On desktop the frame drops its aspect ratio and stretches to match the height of the step stack on the left — the video covers via object-fit so nothing distorts. */ .proc__fig{max-width:440px;margin-inline:auto} @media (min-width:960px){ /* stretch to match the step-stack height on the left; figure grows, caption keeps its natural size at the foot of the column */ .proc__media{position:static;display:flex;flex-direction:column;height:100%} .proc__fig{aspect-ratio:auto;max-width:none;flex:1;margin:0} .proc__v{object-fit:cover} } .proc__v{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;background:#000} .proc__media .ph::after{border-radius:9px} .proc__cap{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#4A4A4A;line-height:1.9} /* ---------- services ---------- */ .svc{display:grid;gap:clamp(10px,1.2vw,16px)} @media (min-width:860px){.svc{grid-template-columns:repeat(3,1fr)}} .svc__c{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3.2vw,44px);border-radius:14px;overflow:hidden;transition:filter .45s var(--swift)} .svc__c:hover{filter:brightness(1.08)} .svc__c:hover .card__go i{transform:translate(3px,-3px)} .svc__ix{font-size:clamp(22px,2.4vw,30px);line-height:1} .svc__c h3{font-size:clamp(1.25rem,1.9vw,1.75rem);letter-spacing:-.03em} .svc__c p{font-size:15px;line-height:1.62} /* three distinct card colours across the row — brand orange, cabinet green, and cream — so the services block reads as three separate offers rather than one dark strip */ .svc__c:nth-child(1){background:var(--orange);color:var(--ink)} .svc__c:nth-child(1) .svc__ix,.svc__c:nth-child(1) h3{color:var(--ink)} .svc__c:nth-child(1) p{color:rgba(22,22,22,.82)} .svc__c:nth-child(1) .card__go{color:var(--ink)} .svc__c:nth-child(2){background:var(--forest);color:var(--cream)} .svc__c:nth-child(2) .svc__ix,.svc__c:nth-child(2) h3{color:var(--yellow)} .svc__c:nth-child(2) p{color:rgba(254,248,232,.82)} .svc__c:nth-child(2) .card__go{color:var(--yellow)} .svc__c:nth-child(3){background:var(--cream);color:var(--ink)} .svc__c:nth-child(3) .svc__ix,.svc__c:nth-child(3) h3{color:var(--ink)} .svc__c:nth-child(3) p{color:#4A4A4A} .svc__c:nth-child(3) .card__go{color:var(--orange-d)} .sos{ display:grid;gap:clamp(18px,2.4vw,34px);align-items:center; margin-top:clamp(14px,1.8vw,24px);padding:clamp(24px,3vw,40px); background:var(--yellow);color:var(--ink); border-radius:var(--radius); } @media (min-width:820px){.sos{grid-template-columns:1fr auto}} .sos__lab{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.2vw,2rem);letter-spacing:-.032em;line-height:1} .sos__txt{margin-top:8px;font-size:15px;color:rgba(22,22,22,.82)} .sos__nums{display:flex;flex-wrap:wrap;gap:10px} .sos__nums a{ padding:12px 18px;border:1px solid rgba(22,22,22,.42);border-radius:100px; font-family:var(--mono);font-size:12px;letter-spacing:.02em;white-space:nowrap; transition:background .3s,color .3s,transform .3s var(--ease); } .sos__nums a:hover{background:var(--ink);color:var(--yellow);border-color:var(--ink);transform:translateY(-2px)} /* ---------- proof ---------- */ .rate{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,26px)} .rate__c{display:flex;align-items:center;gap:14px;padding:clamp(16px,1.8vw,22px);border:1px solid rgba(22,22,22,.14);background:#fff} .rate__c b{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.4vw,2.9rem);line-height:.9;letter-spacing:-.045em;color:var(--orange)} .rate__c span{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#4A4A4A;line-height:1.8} .stars{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--orange)} .segs{padding-block:clamp(28px,3.4vw,48px);border-top:1px solid rgba(22,22,22,.14)} .segs__lab{margin-bottom:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)} .segs ul{display:flex;flex-wrap:wrap;gap:clamp(8px,1.2vw,14px)} .segs li{ font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,2.4vw,1.85rem);letter-spacing:-.03em;color:var(--ink); transition:color .3s; } .segs li:hover{color:var(--orange)} .segs li:not(:last-child)::after{content:"/";margin-left:clamp(8px,1.2vw,14px);color:rgba(22,22,22,.22)} .logos{padding-block:clamp(28px,3.4vw,48px);border-top:1px solid rgba(22,22,22,.14)} .logos__g{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(22,22,22,.12)} @media (min-width:700px){.logos__g{grid-template-columns:repeat(3,1fr)}} @media (min-width:1080px){.logos__g{grid-template-columns:repeat(4,1fr)}} .logos__g span{ display:grid;place-items:center;min-height:clamp(76px,8vw,104px);padding:16px;background:var(--cream); font-family:var(--display);font-weight:600;font-size:clamp(12.5px,1.05vw,15px);letter-spacing:-.01em; text-align:center;color:#3A3A3A;transition:background .4s var(--swift),color .4s var(--swift); } .logos__g span:hover{background:var(--ink);color:var(--cream)} .vend{padding-top:clamp(28px,3.4vw,48px);border-top:1px solid rgba(22,22,22,.14)} .vend__g{display:flex;flex-wrap:wrap;gap:10px} .vend__g span{ display:inline-flex;align-items:baseline;gap:7px;padding:11px 16px;background:#fff;border:1px solid rgba(22,22,22,.12); font-family:var(--display);font-weight:700;font-size:14.5px;letter-spacing:-.015em; } .vend__g i{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)} /* ========================================================= QUOTE ========================================================= */ /* Enquiry band on light blue — the one cool surface on the page, which is what makes the orange submit button the loudest thing in the section. Every yellow accent that worked on the old orange face is remapped to the darkened orange or ink here; yellow on a pale ground is unreadable (see the token note at the top). */ .quote{position:relative;padding-block:var(--sect-y);background:linear-gradient(170deg,#E8F2FA 0%,#CFE3F2 100%);color:var(--ink);overflow:hidden} .quote::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(90deg,rgba(20,45,70,.09) 1px,transparent 1px); background-size:clamp(70px,9vw,132px) 100%; } .quote__in{position:relative;display:grid;gap:clamp(38px,4.6vw,72px);align-items:start} @media (min-width:960px){.quote__in{grid-template-columns:1fr 1fr}} .quote__note{margin-top:clamp(18px,2.2vw,28px);max-width:48ch;font-size:clamp(15px,1.05vw,17px);color:rgba(22,22,22,.82)} .quote__list{margin-top:clamp(22px,2.6vw,32px);display:grid;gap:9px} .quote__list li{position:relative;padding-left:26px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .quote__list li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:3px;border-radius:2px;background:var(--orange-d)} /* Free-site-survey block reads on ink: the "10 — Free site survey" label and the checklist all sit black on orange (the yellow accent is still used elsewhere in the section for the bullets and rule bar). */ .quote .eyebrow--dark{color:var(--orange-d)} .quote .eyebrow--dark .eyebrow__bar{background:var(--orange-d);box-shadow:none} .form{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,18px);align-items:start} .f{display:flex;flex-direction:column;gap:7px} .f--full{grid-column:1/-1} .f label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(22,22,22,.66)} .f input,.f select,.f textarea{ width:100%;padding:13px 15px;background:#fff;border:1px solid rgba(22,22,22,.28); color:var(--ink);font-size:15px;font-family:var(--body); transition:border-color .3s,background .3s,box-shadow .3s; } .f textarea{resize:vertical;min-height:88px} .f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .f input::placeholder,.f textarea::placeholder{color:rgba(22,22,22,.4)} .f input:focus,.f select:focus,.f textarea:focus{outline:0;border-color:var(--ink);background:#fff;box-shadow:0 0 0 3px rgba(242,100,48,.55)} .f input[aria-invalid="true"]{border-color:#7F1D1D;background:#fff} .form > .btn{grid-column:1/-1;justify-self:start;margin-top:6px} /* orange primary button — the strongest thing on the cream band, so the submit still carries the section; fills to ink (cream label) on hover */ .form .btn--ink{background-color:var(--orange);color:var(--ink);background-image:linear-gradient(var(--ink),var(--ink)); box-shadow:0 10px 26px -12px rgba(120,60,20,.5)} .form .btn--ink:hover{color:var(--cream)} .form__msg{grid-column:1/-1;min-height:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.7} .form .fine{grid-column:1/-1;margin-top:0;color:#4F5A63} .form .fine a{font-weight:600;color:var(--orange-d);border-bottom:1px solid rgba(166,60,16,.45)} .form .fine a:hover{border-color:var(--orange-d)} @media (max-width:520px){.form{grid-template-columns:1fr}} /* ========================================================= FOOTER ========================================================= */ .foot{position:relative;background:var(--ink);padding-top:var(--sect-y);overflow:hidden} .foot__top{display:grid;gap:clamp(30px,3.6vw,54px)} @media (min-width:760px){.foot__top{grid-template-columns:repeat(2,1fr)}} @media (min-width:1080px){.foot__top{grid-template-columns:1.5fr 1fr 1fr .8fr}} .foot__brand .mark{height:clamp(132px,11.4vw,186px);margin-bottom:10px} .foot__brand p{max-width:40ch;font-size:14.5px;line-height:1.65;color:rgba(254,248,232,.68)} .foot__prop{margin-top:14px !important;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone) !important} .foot__col h4{font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px} .foot__col h4 + h4{margin-top:26px} .foot__col address{font-style:normal;font-size:14.5px;line-height:1.72;color:rgba(254,248,232,.68)} .foot__col > a{display:block;padding-block:4px;font-size:14.8px;color:rgba(254,248,232,.72);transition:color .3s,transform .3s var(--ease)} .foot__col > a:hover{color:var(--orange);transform:translateX(3px)} .foot__hrs{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);line-height:2} .foot__word{margin-top:clamp(40px,5vw,76px);overflow:hidden;line-height:.78;text-align:center} .foot__word span{ display:block;font-family:var(--display);font-weight:900; font-size:clamp(3.4rem,15.5vw,17.5rem);letter-spacing:-.05em; color:transparent;-webkit-text-stroke:1px rgba(168,170,172,.34); transition:-webkit-text-stroke-color .6s,color .6s; } .foot__word:hover span{color:rgba(255,116,51,.09);-webkit-text-stroke-color:rgba(255,116,51,.6)} .foot__bar{ display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between; margin-top:clamp(22px,2.6vw,34px);padding-block:24px;border-top:1px solid rgba(168,170,172,.18); } .foot__bar p{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--stone);line-height:1.9} .foot__up{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)} .foot__up i{font-style:normal;transition:transform .35s var(--ease)} .foot__up:hover i{transform:translateY(-4px)} .foot__credit{ padding:18px 0 26px;text-align:center; border-top:1px solid rgba(168,170,172,.14); } .foot__credit p{ font-family:var(--display);font-weight:700;font-size:clamp(13px,1vw,15px); letter-spacing:.02em;color:var(--cream); } .foot__credit a{ color:var(--yellow);font-weight:800;padding-bottom:2px; background-image:linear-gradient(var(--yellow),var(--yellow)); background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%; transition:color .3s var(--ease),background-size .35s var(--ease); } .foot__credit a:hover{color:var(--orange);background-image:linear-gradient(var(--orange),var(--orange))} /* ========================================================= REVEAL ========================================================= */ /* Reveals are visible by default and only hidden once JS has taken control (html.anim). If the script never runs, or the browser cannot drive the animation, the content simply shows — no blank sections, ever. */ .reveal{transition:opacity .85s var(--ease),transform .85s var(--ease)} html.anim .reveal{opacity:0;transform:translateY(26px)} html.anim .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html:focus-within{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} html.anim .reveal{opacity:1;transform:none} .hero__h1 .line > span{transform:none} .marq{animation:none} } /* ---------- preloader ---------- A full-screen muted clip that plays once over the page, painted above everything including the lightboxes. The body keeps its scroll locked only while the class is on, so nothing below can be reached past it. */ .pre{ position:fixed;inset:0;z-index:500; display:grid;place-items:center; background:#000; opacity:1;transition:opacity .6s var(--ease); } /* contain, not cover: the clip is a logo animation, and cropping it to fill a phone screen cuts the mark in half. It fades up as playback begins rather than snapping in on the first decoded frame. */ .pre__v{ width:100%;height:100%;object-fit:contain;display:block; background:#000; opacity:0;transition:opacity .5s var(--ease); } .pre.is-playing .pre__v{opacity:1} /* buffering bar: a hairline across the foot of the overlay that tracks how much of the clip has actually arrived, so the wait before it can start reads as progress rather than a dead black screen. It fades out the moment playback begins. */ .pre__load{ position:absolute;left:0;right:0;bottom:0;height:2px; background:rgba(251,243,225,.14); opacity:1;transition:opacity .4s var(--ease); } .pre__bar{ display:block;height:100%;width:0; background:linear-gradient(90deg,var(--orange),var(--yellow)); transition:width .35s var(--ease); } .pre.is-playing .pre__load{opacity:0} /* the fade-out: opacity first, then the element is taken out of the layout entirely so it can never swallow a click */ .pre.is-done{opacity:0} .pre.is-gone{display:none} body.is-loading{overflow:hidden} /* no intro for anyone who has asked for less motion — the markup stays in place, it simply never shows */ @media (prefers-reduced-motion:reduce){ .pre{display:none} body.is-loading{overflow:auto} } /* ---------- animated brand mark ---------- The same clip the preloader runs, looping quietly in the header and the footer. The still logo underneath sets the box and carries the alt text, so the mark is always present and correctly sized; the video is laid over it and only swapped in once it is genuinely playing. If it never plays — no autoplay, a decode failure, reduced motion — the still logo simply stays, and nothing moves or shifts. */ /* The box carries the clip's own 16:9 ratio and nothing is clipped or zoomed: the full frame is always visible. The artwork inside the clip only fills about 69% of the frame's width and 55% of its height (the rest is its own margin), so the box has to be sized generously for the mark to read at logo size. */ .mark{position:relative;display:block;line-height:0;aspect-ratio:16/9} /* the still logo is centred inside that same 16:9 box, so swapping to the clip does not move or resize anything */ .mark img{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:69%;height:auto;display:block; transition:opacity .45s var(--ease); } .mark__v{ position:absolute;inset:0; width:100%;height:100%;object-fit:contain; /* contain and no transform: the frame is shown whole, never cropped */ /* screen drops the clip's black ground against the bar behind it, which is what keeps this from reading as a black plate */ mix-blend-mode:screen; opacity:0;transition:opacity .45s var(--ease); pointer-events:none; } .mark.is-live img{opacity:0} .mark.is-live .mark__v{opacity:1} /* the artwork sits 15.9% in from the left edge of its own frame; pulling the box back by that much lands the mark on the page gutter rather than floating indented from it */ .mark{margin-left:-15.9%} /* no looping animation for anyone who asked for less motion */ @media (prefers-reduced-motion:reduce){ .mark__v{display:none} .mark.is-live img{opacity:1} }