/* ========================================================= EIDER ELEVATORS — homepage Direction: industrial editorial. Midnight ground, warm cream floors, orange as structure. Vertical-motion motif. ========================================================= */ :root{ /* palette */ --orange:#FF7433; /* the same hue darkened, for orange text on cream or white cards: #FF7433 there is only 2.5:1, this is 5.1:1 */ --orange-d:#B14A12; /* secondary accent. Sits 27 degrees of hue off the orange so the two read as distinct rather than as two shades of the same thing. Only ever used on ink or as a fill behind ink text — yellow type on cream is around 1.5:1 and unreadable. */ --yellow:#FFD23F; --ink:#161616; --ink-2:#0D0D0D; --ink-3:#232323; --cream:#FEF8E8; --grey:#E4E2E3; --stone:#A8AAAC; /* type */ --display:'Archivo','Helvetica Neue',Helvetica,sans-serif; --body:'Hanken Grotesk','Helvetica Neue',Helvetica,sans-serif; --mono:'Martian 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); } *,*::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:96px} /* ---------- 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 ========================================================= */ .nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .45s var(--swift),border-color .45s var(--swift)} .nav__in{ max-width:var(--shell);margin:0 auto;padding:18px 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:#0D0D0D} .nav.stuck .nav__in{padding-block:11px;border-bottom-color:rgba(168,170,172,.18)} .nav__brand img{width:auto;height:clamp(38px,3.4vw,52px)} .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}} .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:#0D0D0D} .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)} .eyebrow--dark{color:var(--ink)} .eyebrow--dark .eyebrow__bar{background:var(--ink)} .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,#C3371A,#8E240C) !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)} @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} .hero__sub strong{color:var(--cream);font-weight:600} .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 */ .sect::after,.hero::after,.quote::after{ content:"";position:absolute;left:0;right:0;bottom:0;z-index:5; height:3px;background:var(--yellow);pointer-events:none; } .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)} .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{ 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); background:#fff;border:2px solid var(--ink);border-radius:16px; transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .why__c:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(22,22,22,.5)} .why__i{ display:grid;place-items:center;width:52px;height:52px;margin-bottom:2px; border-radius:14px;background:var(--ink);color:var(--yellow); } .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:#4A4A4A;white-space:normal} /* ---------- catalogue: lifts & escalators ---------- */ .cat{display:grid;gap:clamp(12px,1.3vw,20px);grid-template-columns:1fr} @media (min-width:560px){.cat{grid-template-columns:repeat(2,1fr)}} @media (min-width:900px){.cat{grid-template-columns:repeat(3,1fr)}} @media (min-width:1280px){.cat{grid-template-columns:repeat(4,1fr)}} /* orange outline at rest on every card, not revealed by hover — hover only lifts the card */ .cat__c{ position:relative;display:flex;flex-direction:column;overflow:hidden; background:#fff;border:2px solid var(--orange);border-radius:16px; transition:transform .5s var(--ease),box-shadow .5s var(--ease); } .cat__c:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(22,22,22,.45)} .cat__c .ph{border:0;border-bottom:2px solid var(--orange);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} .reel__track{ --rg:clamp(12px,1.3vw,20px); display:grid;grid-auto-flow:column; /* two per row from the smallest screens up */ grid-auto-columns:calc((100% - var(--rg)) / 2);gap:var(--rg); overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none; } .reel__track::-webkit-scrollbar{display:none} @media (min-width:700px){.reel__track{grid-auto-columns:calc((100% - var(--rg)) / 2)}} @media (min-width:1150px){.reel__track{grid-auto-columns:calc((100% - 3 * var(--rg)) / 4)}} .reel__s{scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;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 */ .reel__f{border-width:2px;border-color:var(--orange);border-radius:18px} .reel__f::after{border-radius:11px} .reel__v{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;background:#000} .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)} .reel__nav{display:flex;align-items:center;gap:12px;margin-top:clamp(22px,2.6vw,34px)} .reel__nav[hidden]{display:none} .reel__arw{ width:46px;height:46px;display:grid;place-items:center;font-size:15px; border:1px solid rgba(168,170,172,.32);color:var(--cream); transition:background .3s,border-color .3s,color .3s,opacity .3s; } .reel__arw:hover:not(:disabled){background:var(--yellow);border-color:var(--yellow);color:var(--ink)} .reel__arw:disabled{opacity:.3;cursor:default} .reel__dots{display:flex;align-items:center;gap:7px;margin-left:auto} .reel__dot{width:24px;height:2px;background:rgba(168,170,172,.3);transition:background .35s var(--swift)} .reel__dot.on{background:var(--orange)} /* 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 hero strip: 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. */ .lg{position:relative;overflow:hidden;margin-top:clamp(6px,1vw,14px)} .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)} .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; border:2px solid var(--orange);border-radius:16px;background:var(--ink); transition:transform .5s var(--ease),box-shadow .5s var(--ease); } .gal__t img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)} .gal__t:hover{transform:translateY(-4px);box-shadow:0 28px 54px -30px rgba(22,22,22,.5)} .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:2px solid var(--ink);border-radius:16px;background:var(--ink); } .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__i{overflow:hidden;background:#fff;border:2px solid var(--ink);border-radius:16px} .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, and shifts to orange while open */ .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(--ink);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(--ink-3)} .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)} .tst__c{ flex:0 0 auto;width:clamp(292px,26vw,392px); display:flex;flex-direction:column;gap:14px; padding:clamp(22px,2.3vw,32px); background:var(--ink-2);border:2px solid var(--orange);border-radius:16px; } .tst__mark{font-family:var(--display);font-weight:800;font-size:44px;line-height:.7;color:var(--yellow)} .tst__c blockquote{margin:0} .tst__c p{font-size:15.4px;line-height:1.6;color:rgba(254,248,232,.86)} .tst__by{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:6px} .tst__by b{font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--cream)} .tst__by span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)} @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)}} .abt__fig{ /* 3:2 matches the source (1536x1024) exactly, so nothing is cropped */ position:relative;margin:0;overflow:hidden;aspect-ratio:3/2; border:2px solid rgba(168,170,172,.34);border-radius:16px;background:#000; } .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:var(--stone)} .abt__body p{max-width:60ch;font-size:clamp(15px,1.05vw,17px);color:rgba(254,248,232,.78)} .abt__body p + p{margin-top:18px} .abt__body strong{color:var(--cream);font-weight:600} .abt__facts{margin:clamp(28px,3vw,42px) 0 0;display:grid;border-top:1px solid rgba(168,170,172,.22)} @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(168,170,172,.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(168,170,172,.14)} } .abt__facts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);white-space:nowrap} .abt__facts dd{margin:0;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.015em;color:var(--cream);text-align:right} .abt__link{margin-top:clamp(24px,2.6vw,34px)} /* ---------- 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 ---------- */ .nums{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:clamp(8px,1.4vw,20px);background:rgba(168,170,172,.2)} @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(--ink-2);transition:background .45s var(--swift)} .num:hover{background:var(--ink-3)} .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(--orange);font-variant-numeric:tabular-nums; } .num b i{font-style:normal;color:rgba(168,170,172,.5);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(--stone);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}} .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{ 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:#fff;border:2px solid var(--ink);border-radius:16px; transition:border-color .4s var(--ease),transform .4s var(--ease); } .step:hover{border-color:var(--orange);transform:translateY(-3px)} .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(--yellow);border:2px solid var(--ink);color:var(--ink); font-family:var(--display);font-weight:800;font-size:clamp(13px,1.3vw,18px);letter-spacing:-.02em; transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease); } .step:hover .step__n{background:var(--ink);color:var(--yellow);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} /* orange outline in every view, matching the other video frames */ .proc__media .ph{border-width:2px;border-color:var(--orange);border-radius:16px} /* Mobile keeps the 4:5 crop. From 960px up the frame takes 9:16, which is the source's own ratio (478x850), so desktop shows the whole film with nothing trimmed. */ .proc__fig{max-width:440px;margin-inline:auto} @media (min-width:960px){ .proc__fig{aspect-ratio:9/16;max-width:376px} } .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:1px;background:rgba(168,170,172,.2)} @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);background:var(--ink-2);transition:background .45s var(--swift)} .svc__c:hover{background:var(--ink-3)} .svc__c:hover .card__go i{transform:translate(3px,-3px)} .svc__ix{font-size:clamp(22px,2.4vw,30px);line-height:1;color:var(--yellow)} .svc__c .card__go{color:var(--yellow)} .svc__c h3{font-size:clamp(1.25rem,1.9vw,1.75rem);letter-spacing:-.03em;color:var(--cream)} .svc__c p{font-size:15px;line-height:1.62;color:rgba(254,248,232,.72)} .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); } @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 ========================================================= */ .quote{position:relative;padding-block:var(--sect-y);background:var(--orange);color:var(--ink);overflow:hidden} .quote::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(90deg,rgba(0,0,0,.07) 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:rgba(22,22,22,.8)} .quote__list li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:1px;background:var(--ink)} .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:rgba(254,248,232,.92);border:1px solid rgba(22,22,22,.24); 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 var(--yellow)} .f input[aria-invalid="true"]{border-color:#7F1D1D;background:#fff} .form > .btn{grid-column:1/-1;justify-self:start;margin-top:6px} .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:rgba(22,22,22,.72)} .form .fine a{font-weight:600;border-bottom:1px solid rgba(22,22,22,.35)} .form .fine a:hover{border-color:var(--ink)} @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 img{width:auto;height:clamp(52px,4.6vw,72px);margin-bottom:22px} .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)} /* ========================================================= 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} }