@font-face{font-family:Manrope;src:url('../fonts/manrope-var.woff2') format('woff2-variations');font-weight:600 800;font-style:normal;font-display:swap}@font-face{font-family:'Manrope Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:104.1%;ascent-override:102.4%;descent-override:28.8%;line-gap-override:0%}@font-face{font-family:Inter;src:url('../fonts/inter-var.woff2') format('woff2-variations');font-weight:400 700;font-style:normal;font-display:swap}@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:104.6%;ascent-override:92.6%;descent-override:23.1%;line-gap-override:0%}@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:'IBM Plex Mono Fallback';src:local('Courier New'),local('Liberation Mono');size-adjust:99.5%;ascent-override:103.0%;descent-override:27.6%;line-gap-override:0%}:root{--o-50:#FBF4E9;--o-100:#F5E7C8;--o-200:#EAD3A0;--o-300:#E9B457;--o-400:#EE9B00;--o-500:#CA6702;--o-600:#BB3E03;--o-700:#AE2012;--o-800:#9B2226;--c-100:#DDE3E5;--c-300:#A6B2B7;--c-500:#47565E;--c-600:#3A474E;--c-700:#2B363C;--ink:#001219;--ink-2:#05262F;--paper:#F8F4EA;--sheet:#FFFDF8;--desk:#DCCFB6;--band:#EFE6D4;--band-sand:#F1E8D2;--band-clay:#F0E8DB;--band-linen:#ECE6D8;--band-taupe:#EAE3D6;--line:#ECE4D4;--line-2:#DCD2BE;--line-warm:#F0DFC2;--text-strong:#14202A;--text-body:#33424A;--text-mut:#5E6B70;--text-soft:#9AA4A7;--shadow-rgb:4,20,26;--shadow-brand-rgb:150,46,12;--tint-1:color-mix(in srgb, var(--o-600) 5%, transparent);--tint-2:color-mix(in srgb, var(--o-600) 12%, transparent);--tint-3:color-mix(in srgb, var(--o-600) 28%, transparent);--r-sm:10px;--r-md:14px;--r-lg:18px;--r-btn:14px;--ease:cubic-bezier(.22, 1, .36, 1);--brand:var(--o-700);--brand-soft:var(--o-300);--route-sky:var(--c-700);--route-teal:var(--c-600);--o-btn:#E85D04;--o-btn-hover:#C94B02;--icon-mono:var(--o-600);--wedge-top:44%;--wedge-bot:31%}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}body{font-family:Inter,'Inter Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;background-color:var(--desk);font-feature-settings:"cv05" 1,"cv11" 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(135deg,color-mix(in srgb,var(--c-500) 9%,transparent) 0,transparent 40%,transparent 60%,color-mix(in srgb,var(--o-600) 9%,transparent) 100%);background-size:100% 100%}@media (min-width:1360px){body::before{background-image:linear-gradient(135deg,color-mix(in srgb,var(--c-500) 7%,transparent) 0,transparent 40%,transparent 60%,color-mix(in srgb,var(--o-600) 8%,transparent) 100%),linear-gradient(180deg,rgba(90,74,50,.13) 0,transparent 26%,transparent 74%,rgba(90,74,50,.1) 100%),linear-gradient(rgba(220,207,182,.72),rgba(220,207,182,.72)),url(../img/desk.webp);background-size:100% 100%,100% 100%,100% 100%,cover;background-position:center,center,center,center;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat}.page-sheet{box-shadow:0 0 0 1px rgba(var(--shadow-rgb),.09),0 2px 6px rgba(var(--shadow-rgb),.1),0 40px 90px -55px rgba(var(--shadow-rgb),.5)}}::selection{background:color-mix(in srgb,var(--o-600) 18%,transparent)}:focus-visible{outline:2px solid var(--c-600);outline-offset:3px;border-radius:6px}.panel-dark :focus-visible,footer :focus-visible{outline-color:var(--c-300)}#mobile-menu>div,header nav{display:none}.font-display{font-family:Manrope,'Manrope Fallback',Inter,sans-serif;letter-spacing:-.015em}.font-mono{font-family:'IBM Plex Mono','IBM Plex Mono Fallback',monospace;font-variant-numeric:tabular-nums}.tel-num{font-family:Manrope,'Manrope Fallback',Inter,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.font-mono .text-sm{font-family:inherit;font-size:.68em;font-weight:600;letter-spacing:0}dd,li,p,td{overflow-wrap:break-word}.brand-ribbon{height:3px;background-color:var(--o-600)}.section{margin-top:3.25rem}@media (min-width:768px){.section{margin-top:4.5rem}}.sec-title{font-family:Manrope,'Manrope Fallback',Inter,sans-serif;font-weight:800;letter-spacing:-.015em;line-height:1.16;font-size:clamp(1.6875rem, 1.15rem + 2vw, 2.375rem);text-wrap:balance}.sec-lead{font-size:.9375rem;line-height:1.75;color:var(--text-mut);text-wrap:pretty;max-width:68ch}.eyebrow{display:inline-flex;align-items:center;gap:.625rem;font-size:.75rem;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.09em;color:var(--text-mut)}.eyebrow::before{content:"";width:20px;height:2px;border-radius:999px;background-color:var(--o-600)}.eyebrow-cool::before{background-color:var(--c-700)}.eyebrow-light{color:var(--text-soft)}.eyebrow-light::before{background-color:var(--o-500)}.eyebrow-sky{color:var(--text-soft)}.eyebrow-sky::before{background-color:var(--c-500)}.eyebrow-teal{color:var(--text-soft)}.eyebrow-teal::before{background-color:var(--c-500)}.page-sheet .card.p-8{padding-top:2rem;padding-bottom:2rem}.page-sheet .panel-dark.relative{padding-top:2.25rem;padding-bottom:2.25rem}.page-sheet section>.text-center.max-w-2xl{margin-bottom:2rem}.marquee span{font-size:1.0625rem;letter-spacing:.01em}.marquee-track>div{gap:2.75rem;padding-right:2.75rem}section:has(> .marquee)>p:first-child{font-size:10px;margin-bottom:1.125rem}.page-sheet{max-width:1300px;margin:0 auto;padding:0;display:flow-root;background:var(--paper);box-shadow:0 0 0 1px rgba(var(--shadow-rgb),.07),0 50px 90px -50px rgba(var(--shadow-rgb),.4)}.page-sheet>:not(.panel){padding-left:2rem;padding-right:2rem}.page-sheet>.panel{margin-left:2rem;margin-right:2rem}.page-sheet>.hd{padding-left:0;padding-right:0}.page-sheet>:first-child:not(.hd){margin-top:2rem}.page-sheet>:last-child{padding-bottom:2rem}.ok-ink{color:var(--c-600)}.ok-bg{background-color:#f5ecdc}.ok-dot{background-color:#ebdcc2}.ok-line{border-color:#e3d3b6}.page-sheet>.band{background:var(--band);padding-top:1.75rem;padding-bottom:1.75rem}.page-sheet>.band-sand{background:var(--band-sand)}.page-sheet>.band-clay{background:var(--band-clay)}.page-sheet>.band-linen{background:var(--band-linen)}.page-sheet>.band-taupe{background:var(--band-taupe)}body>footer{margin-top:0!important}.hd{position:relative;overflow:hidden;display:flex;align-items:center;width:100%;min-height:560px;background:#1e1710;box-shadow:0 26px 52px -40px rgba(var(--shadow-rgb),.34),0 -18px 40px -34px rgba(var(--shadow-rgb),.14)}.hd::after,.hd::before{content:"";position:absolute;left:0;right:0;height:56px;z-index:4;pointer-events:none}.hd::before{top:0;background:linear-gradient(to bottom,rgba(var(--shadow-rgb),.13),transparent)}.hd::after{bottom:0;background:linear-gradient(to top,rgba(var(--shadow-rgb),.13),transparent)}.hd-media{position:absolute;inset:0;z-index:0}.hd-media picture{display:block;width:100%;height:100%}.hero-shot{width:100%;height:100%;object-fit:cover;object-position:right}.hd-wedge{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(30,23,16,.95) 0,rgba(33,25,17,.91) 60%,rgba(38,29,19,.86) 100%);clip-path:polygon(0 0,var(--wedge-top) 0,var(--wedge-bot) 100%,0 100%)}.hd-seam{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,var(--o-400) 0,var(--o-500) 45%,#6e3a12 100%);clip-path:polygon(var(--wedge-top) 0,calc(var(--wedge-top) + .5%) 0,calc(var(--wedge-bot) + .5%) 100%,var(--wedge-bot) 100%)}.hd-text{position:relative;z-index:3;padding:2.75rem 1.5rem}@media (min-width:768px){.hd-text{padding:3rem 3.25rem}}@media (min-width:1024px){.hd{min-height:620px}.hd-text{padding:3rem 1rem 3rem 3rem;max-width:27rem}}@media (min-width:1024px) and (max-width:1279px){:root{--wedge-top:51%;--wedge-bot:39%}.hd-text{padding-left:3rem;padding-right:1rem;max-width:25.5rem}.hd-title{font-size:2.5rem}}.hd-eyebrow{margin:0 0 1.1rem;font-size:.75rem;font-weight:700;letter-spacing:.05em;color:#b9a991}.hd-title{font-family:Manrope,'Manrope Fallback',Inter,sans-serif;font-weight:800;color:#fbf7f0;font-size:2.125rem;line-height:1.07;letter-spacing:-.032em;margin:0}@media (min-width:768px){.hd-title{font-size:2.75rem}}.hd-title span{color:#a08a6e}.hd-lead{margin:1.25rem 0 0;font-size:.9375rem;line-height:1.6;color:#cbbfaf;max-width:19rem}.hd-cta{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.7rem}.hd .btn-outline{background:0 0;border-color:rgba(255,255,255,.4);color:#fff}@media (max-width:1023px){.page-sheet>:not(.panel){padding-left:1.5rem;padding-right:1.5rem}.page-sheet>.band{padding-top:1.5rem;padding-bottom:1.5rem}.page-sheet>.panel{margin-left:1.5rem;margin-right:1.5rem}.hd{display:block;min-height:0}.hd-media{position:relative;height:260px}.hd-wedge{top:0;height:260px;bottom:auto;clip-path:none;background:linear-gradient(172deg,rgba(30,23,16,0) 26%,rgba(30,23,16,.3) 46%,rgba(30,23,16,.68) 66%,rgba(30,23,16,.9) 84%,#1e1710 100%)}.hd-seam{display:none}.hd-text{padding:1.5rem 1.5rem 2rem;max-width:none}}.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.04)}.card-hover{transition:transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease}.card-hover:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.05),0 16px 32px -20px rgba(var(--shadow-rgb),.28)}.panel{border-radius:var(--r-lg)}.panel-dark{background:var(--ink);border-radius:var(--r-lg);box-shadow:0 20px 44px -34px rgba(var(--shadow-rgb),.7)}.panel-light{background-color:var(--sheet);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.04),0 18px 40px -32px rgba(var(--shadow-rgb),.22)}.blueprint{background-image:radial-gradient(58% 76% at 90% 8%,color-mix(in srgb,var(--c-500) 6%,transparent),transparent 62%),radial-gradient(56% 70% at 5% 95%,color-mix(in srgb,var(--o-600) 8%,transparent),transparent 60%)}.panel-warm{background-color:var(--o-50);border:1px solid var(--line-warm);border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(var(--shadow-brand-rgb),.04),0 18px 40px -32px rgba(var(--shadow-brand-rgb),.2)}.glow-warm{background-image:radial-gradient(circle at top right,var(--o-200),transparent 62%)}.hero-panel--about,.hero-panel--fleet,.hero-panel--services{position:relative;overflow:hidden}.hero-panel--services{background-color:var(--o-50);border-color:var(--line-warm);background-image:radial-gradient(60% 80% at 92% 6%,color-mix(in srgb,var(--o-500) 18%,transparent),transparent 62%),radial-gradient(56% 70% at 5% 95%,color-mix(in srgb,var(--o-600) 11%,transparent),transparent 60%)}.hero-panel--about{background-color:var(--ink);border-color:var(--ink-2);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.1),0 20px 44px -34px rgba(var(--shadow-rgb),.7);background-image:radial-gradient(60% 80% at 92% 6%,color-mix(in srgb,var(--c-500) 22%,transparent),transparent 62%),radial-gradient(56% 70% at 5% 95%,color-mix(in srgb,var(--o-500) 16%,transparent),transparent 60%)}.hero-panel--about .hero-copy .text-slate-900,.hero-panel--about .hero-copy h1.sec-title{color:#fff}.hero-panel--about .hero-copy .sec-lead{color:color-mix(in srgb,#fff 74%,var(--c-100))}.hero-panel--about .hero-copy .eyebrow{color:var(--o-300)}.hero-panel--about .hero-copy .eyebrow::before{background-color:var(--o-400)}.hero-panel--about .hero-copy .btn-outline{background-color:transparent;border-color:rgba(255,255,255,.28);color:#fff}.hero-panel--about .hero-copy .btn-outline:hover{border-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)}.hero-watermark{position:absolute;right:-1.75rem;bottom:-2.25rem;width:17.5rem;height:17.5rem;color:var(--ink);opacity:.1;pointer-events:none;user-select:none}.hero-watermark svg{width:100%;height:100%;display:block}.hero-panel--services .hero-watermark{width:24rem;height:24rem;right:-2.5rem;bottom:-3rem}.hero-panel--about .hero-watermark{color:#fff;opacity:.12}@media (max-width:640px){.marquee span{font-size:.9375rem}.marquee-track>div{gap:2rem;padding-right:2rem}.page-sheet>:not(.panel){padding-left:1.25rem;padding-right:1.25rem}.page-sheet>.panel{margin-left:1rem;margin-right:1rem}.hero-watermark{width:10.5rem;height:10.5rem;right:-1rem;bottom:-1.25rem;opacity:.09}.hero-panel--services .hero-watermark{width:13rem;height:13rem;right:-1.25rem;bottom:-1.5rem}}@media (min-width:1024px){.hero-panel--about,.hero-panel--fleet,.hero-panel--services{min-height:34.5rem;display:flex;flex-direction:column;justify-content:center}}.hero-panel--about h1.sec-title,.hero-panel--fleet h1.sec-title,.hero-panel--services h1.sec-title{font-size:2.25rem;line-height:1.05;letter-spacing:-.02em}@media (min-width:768px){.hero-panel--about h1.sec-title,.hero-panel--fleet h1.sec-title,.hero-panel--services h1.sec-title{font-size:3.25rem}}.hero-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border-radius:9999px;background:#fff;border:1px solid var(--line);font-size:.8125rem;font-weight:700;color:var(--text-body);transition:border-color .2s,background-color .2s,transform .15s}.hero-chip::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--a);flex:none}.hero-chip:hover{border-color:var(--a);background:color-mix(in srgb,var(--a) 12%,#fff);transform:translateY(-1px)}.about-badge{background:var(--sheet)}.about-badge .badge-year{font-family:Manrope,'Manrope Fallback',Inter,sans-serif;letter-spacing:-.02em}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--r-btn);font-weight:600;font-size:.875rem;letter-spacing:-.005em;padding:.75rem 1.375rem;white-space:nowrap;border:1px solid transparent;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s var(--ease),filter .18s ease}.btn-primary{background:linear-gradient(155deg,var(--o-400) 0,var(--o-btn) 55%,var(--o-600) 100%);background-origin:border-box;color:#fff;border-color:transparent;box-shadow:0 1px 1px rgba(var(--shadow-rgb),.1),0 16px 28px -16px rgba(var(--shadow-brand-rgb),.6)}.btn-primary:focus-visible,.btn-primary:hover{filter:brightness(.92);box-shadow:0 2px 3px rgba(var(--shadow-rgb),.14),0 20px 34px -16px rgba(var(--shadow-brand-rgb),.68);transform:translateY(-1px)}.btn-ink{background:linear-gradient(155deg,var(--ink-2) 0,var(--ink) 70%);background-origin:border-box;color:#fff;border-color:transparent;box-shadow:0 1px 1px rgba(var(--shadow-rgb),.14),0 16px 28px -18px rgba(var(--shadow-rgb),.55)}.btn-ink:focus-visible,.btn-ink:hover{filter:brightness(1.2);box-shadow:0 2px 3px rgba(var(--shadow-rgb),.18),0 20px 32px -16px rgba(var(--shadow-rgb),.6);transform:translateY(-1px)}.btn-outline{background-color:#fff;border-color:var(--line-2);color:var(--text-strong);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.05);position:relative;overflow:hidden;isolation:isolate}.btn-outline:focus-visible,.btn-outline:hover{border-color:var(--text-strong);box-shadow:0 6px 16px -10px rgba(var(--shadow-rgb),.3);transform:translateY(-1px)}.btn-sm{padding:.5rem 1rem;border-radius:9999px}.btn-compact{padding:.5625rem .9375rem;font-size:.8125rem}.btn-go svg{flex-shrink:0;transition:transform .18s var(--ease)}.btn-go:focus-visible svg,.btn-go:hover svg{transform:translateX(3px)}@media (prefers-reduced-motion:reduce){body::before{animation:none;transform:none}.btn-go svg{transition:none}}.btn:active{transform:translateY(1px);transition-duration:.05s}.btn-ink,.btn-primary{position:relative;overflow:hidden;isolation:isolate}.btn-ink::after,.btn-primary::after{content:'';position:absolute;top:0;left:-35%;width:35%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.45) 45%,transparent 80%);transform:skewX(-18deg);pointer-events:none;opacity:0}@media (hover:hover) and (pointer:fine){.btn-ink:hover::after,.btn-primary:hover::after{opacity:1;animation:btn-shine .85s var(--ease)}}.btn-ink:focus-visible::after,.btn-primary:focus-visible::after{opacity:1;animation:btn-shine .85s var(--ease)}@keyframes btn-shine{from{left:-35%}to{left:135%}}.btn-outline::after{content:'';position:absolute;inset:0;background:var(--tint-2);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);z-index:-1}.btn-outline:focus-visible::after,.btn-outline:hover::after{transform:scaleX(1)}.acc-brand{--a:var(--o-700);--a-2:var(--o-500);--a-bg:var(--tint-2)}.acc-sky{--a:var(--c-700);--a-2:var(--c-500);--a-bg:color-mix(in srgb, var(--c-700) 9%, transparent)}.acc-teal{--a:var(--c-600);--a-2:var(--c-300);--a-bg:color-mix(in srgb, var(--c-600) 9%, transparent)}.acc-ink{--a:#45525A;--a-2:#5E6B70;--a-bg:color-mix(in srgb, #45525A 8%, transparent)}.svc-icon{background:#fff;border:1px solid var(--line);color:var(--a);transition:transform .3s var(--ease)}.group:hover .svc-icon{transform:scale(1.08)}.svc-link{color:var(--a)}.svc-link svg{transition:transform .25s var(--ease)}.group:hover .svc-link svg{transform:translateX(4px)}.svc-modal{position:fixed;inset:0;z-index:90;display:none}.svc-modal.is-visible{display:block}.svc-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,32,.6);opacity:0;transition:opacity .28s var(--ease)}.svc-modal.is-open .svc-modal-backdrop{opacity:1}.svc-modal-dialog{--m-pad-t:2rem;--m-pad-x:1.75rem;position:relative;z-index:1;width:calc(100% - 2.5rem);max-width:640px;max-height:88vh;overflow-y:auto;margin:6vh auto 0;background:#fff;border-radius:1.75rem;box-shadow:0 30px 70px -28px rgba(var(--shadow-rgb),.55);padding:var(--m-pad-t) var(--m-pad-x) 1.75rem;opacity:0;transform:translateY(22px) scale(.96);transition:opacity .3s var(--ease),transform .32s var(--ease)}.svc-modal.is-open .svc-modal-dialog{opacity:1;transform:translateY(0) scale(1)}.svc-modal-close{position:absolute;top:.5rem;right:.5rem;width:2.25rem;height:2.25rem;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--text-body);box-shadow:0 2px 10px rgba(var(--shadow-rgb),.16);cursor:pointer;transition:background-color .2s,color .2s}.svc-modal-close:hover{background:var(--tint-3,#e2e8f0);color:var(--text-strong)}.svc-modal-body .ph{--edge-gap:.5rem;border-radius:1.25rem;min-height:140px;margin:calc(var(--edge-gap) - var(--m-pad-t)) calc(var(--edge-gap) - var(--m-pad-x)) 0 0;width:calc(100% + var(--m-pad-x) - var(--edge-gap));-webkit-mask-image:radial-gradient(circle at calc(100% - 1.125rem) 1.125rem,transparent 1.625rem,#000 calc(1.625rem + 1px));mask-image:radial-gradient(circle at calc(100% - 1.125rem) 1.125rem,transparent 1.625rem,#000 calc(1.625rem + 1px))}.svc-modal-body .sec-title{font-size:1.375rem}.svc-modal-body .sec-lead{font-size:.875rem;line-height:1.6}.svc-modal-body .card table{font-size:.8125rem}body.modal-open{overflow:hidden}@media (max-width:640px){.svc-modal-dialog{width:100%;max-height:100vh;height:100%;margin:0;border-radius:0;padding:1.5rem 1.25rem 2rem}.svc-modal-body .ph{margin:-1rem -1rem 0 0;width:calc(100% + 1rem);-webkit-mask-image:radial-gradient(circle at calc(100% - 1.375rem) 1.125rem,transparent 1.625rem,#000 calc(1.625rem + 1px));mask-image:radial-gradient(circle at calc(100% - 1.375rem) 1.125rem,transparent 1.625rem,#000 calc(1.625rem + 1px))}}@media (prefers-reduced-motion:reduce){.svc-modal-backdrop,.svc-modal-dialog{transition:none}.svc-modal.is-visible .svc-modal-backdrop{opacity:1}.svc-modal.is-visible .svc-modal-dialog{opacity:1;transform:none}}.counter{font-variant-numeric:tabular-nums}#stats .font-display{font-family:Manrope,'Manrope Fallback',Inter,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}#stats p.text-xs{letter-spacing:.06em}.stat-rule{display:block;width:2rem;height:2px;border-radius:999px;margin:0 auto 1rem;background-color:var(--o-600);transform:scaleX(1);transition:transform .7s var(--ease) .1s}.reveal:not(.visible) .stat-rule{transform:scaleX(.2)}.route-steps{position:relative}.route-steps>*{position:relative;z-index:1}@media (min-width:1024px){.route-steps::before{content:"";position:absolute;z-index:0;left:8%;right:8%;top:3.5rem;height:2px;background-image:repeating-linear-gradient(90deg,var(--line-2) 0 9px,transparent 9px 19px)}}h2,h3,h4{font-family:Manrope,'Manrope Fallback',Inter,sans-serif;letter-spacing:-.01em}details.acc{position:relative;transition:background-color .3s,border-color .3s;transition:transform .22s var(--ease),box-shadow .22s ease,border-color .22s ease;transform-origin:center}details.acc>summary{list-style:none;cursor:pointer;transition:background-color .25s}details.acc>summary::-webkit-details-marker{display:none}details.acc>summary:hover{background:var(--tint-1)}details.acc:not([open]):hover{transform:scale(1.014);border-color:var(--line-2);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.05),0 18px 34px -22px rgba(var(--shadow-rgb),.3)}details.acc>summary>span:first-child{transition:transform .25s var(--ease)}details.acc>summary:hover>span:first-child{transform:translateX(3px)}details.acc>summary:focus-visible{outline:2px solid var(--o-600);outline-offset:-4px;border-radius:var(--r-md)}details.acc>summary:focus:not(:focus-visible){outline:0}details.acc-dark>summary:focus-visible{outline-color:var(--o-300)}details.acc::before{content:"";position:absolute;left:5px;top:1.125rem;bottom:1.125rem;width:3px;border-radius:999px;background-color:var(--o-600);opacity:0;transform:translateX(-3px);transition:opacity .3s ease,transform .3s var(--ease)}details.acc.is-open::before{opacity:1;transform:none}details.acc.is-open{border-color:var(--line-warm);background:#fffdfa}details.acc>summary .font-mono{transition:color .3s}details.acc.is-open>summary .font-mono{color:var(--o-700)}.acc-plus{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:9999px;flex:none;border:1px solid var(--line-2);color:var(--text-mut);font-size:0;transition:transform .42s var(--ease),background-color .25s,border-color .25s,color .25s}.acc-plus::after,.acc-plus::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:2px;border-radius:999px;background:currentColor}.acc-plus::before{transform:translate(-50%,-50%)}.acc-plus::after{transform:translate(-50%,-50%) rotate(90deg)}details.acc>summary:hover .acc-plus{border-color:var(--tint-3);color:var(--o-700)}details.acc.is-open .acc-plus{transform:rotate(45deg);background:var(--tint-2);border-color:transparent;color:var(--o-700)}details.acc-dark .acc-plus{border-color:rgba(255,255,255,.18);color:var(--text-soft)}details.acc-dark.is-open .acc-plus{background:color-mix(in srgb,var(--o-600) 18%,transparent);border-color:transparent;color:var(--o-300)}.acc-body{overflow:hidden;transition:height .34s cubic-bezier(.4,0,.2,1)}.acc-body>*{position:relative;opacity:0;transform:translateY(-6px);transition:opacity .3s ease .08s,transform .4s var(--ease) .08s}details.acc.is-open .acc-body>*{opacity:1;transform:none}.acc-body>::before{content:"";position:absolute;left:1rem;right:1rem;top:0;height:2px;border-radius:999px;background:var(--line-warm);transform:scaleX(0);transform-origin:left center;transition:transform .34s var(--ease) .06s}details.acc.is-open .acc-body>::before{transform:scaleX(1)}.acc-body p,.acc-body ul{max-width:64ch}#faq details.acc>summary,#tral details.acc>summary,#vacancies details.acc>summary{padding:1.25rem 1.5rem}#faq details.acc>summary>span:not(.acc-plus),#tral details.acc>summary>span:first-child>span:last-child,#vacancies details.acc>summary>span:not(.acc-plus){font-size:.9375rem}#faq details.acc>summary>.acc-plus,#tral details.acc>summary>.acc-plus,#vacancies details.acc>summary>.acc-plus{font-size:0}#faq .acc-body>div,#tral .acc-body>div,#vacancies .acc-body>div{padding:0 1.5rem 1.375rem}#faq .acc-body>::before,#tral .acc-body>::before,#vacancies .acc-body>::before{left:1.5rem;right:1.5rem}#faq .acc-body>div{max-width:68ch}#tral div:has(> details.acc){display:block;max-width:48rem;margin-inline:auto}#tral div:has(> details.acc)>details.acc{margin-bottom:.75rem}#tral div:has(> details.acc)>details.acc:last-child{margin-bottom:0}#tral .mt-14>h3{max-width:48rem;margin-inline:auto}#shpunt .items-center{align-items:flex-start}.cargo-grid{background-image:radial-gradient(60% 80% at 88% 10%,color-mix(in srgb,var(--c-500) 18%,transparent),transparent 62%),radial-gradient(58% 72% at 6% 94%,color-mix(in srgb,var(--o-600) 14%,transparent),transparent 60%)}.glow-cool{background-image:radial-gradient(circle at top right,var(--c-500),transparent 58%),radial-gradient(circle at bottom left,var(--o-500),transparent 52%)}.glow-cool-b{background-image:radial-gradient(circle at bottom right,var(--c-500),transparent 58%),radial-gradient(circle at top left,var(--o-500),transparent 52%)}.step-num{font-family:Manrope,'Manrope Fallback',sans-serif;font-weight:800;line-height:.8;user-select:none;color:#f2ede6;letter-spacing:-.03em}@supports (background-clip:text) or (-webkit-background-clip:text){.step-num-warm{background-image:linear-gradient(160deg,var(--o-200),var(--o-100) 55%,rgba(253,246,240,0) 92%);-webkit-background-clip:text;background-clip:text;color:transparent}}.ph{position:relative;overflow:hidden;background-color:var(--tint-1);background-size:cover;background-position:center;background-repeat:no-repeat}.ph::after,.ph::before{content:"";position:absolute;inset:0;background-image:inherit;background-position:center;background-repeat:no-repeat}.ph::before{background-size:cover;filter:blur(13px) saturate(.85) brightness(.94);transform:scale(1.14)}.ph::after{background-size:contain}.ph:has(> picture,> img)::after{content:none}.ph>img,.ph>picture,.ph>picture>img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain}.ph>picture{position:absolute;inset:0}.ph-fit{aspect-ratio:var(--ar,16 / 9);width:100%;min-height:0;content-visibility:auto}.cta-strip{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 1.75rem;padding:1.5rem}.cta-strip-icon{width:3.25rem;height:3.25rem;flex-shrink:0;border-radius:1rem;display:flex;align-items:center;justify-content:center;background:var(--tint-1);border:1px solid var(--line);color:var(--o-700)}.cta-strip-icon svg{width:1.5rem;height:1.5rem}.cta-strip-text{flex:1 1 18rem;min-width:0}.cta-strip-text .sec-title{font-size:1.375rem}.cta-strip-text .sec-lead{font-size:.875rem}.cta-strip-actions{display:flex;flex-wrap:wrap;gap:.625rem;flex-shrink:0}@media (min-width:1024px){.cta-strip{padding:1.75rem 2rem;flex-wrap:nowrap}}.form-card{position:relative;overflow:hidden}.form-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--o-700),#f5762b 55%,transparent)}.form-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:.75rem 1rem}.form-badge{display:inline-flex;align-items:center;gap:.375rem;flex-shrink:0;padding:.3125rem .625rem;border-radius:9999px;background:var(--tint-1);border:1px solid var(--line);font-size:.6875rem;font-weight:700;color:var(--text-mut);white-space:nowrap}.form-badge svg{width:.875rem;height:.875rem;flex-shrink:0}.form-opt{font-weight:500;color:var(--text-mut)}.sec-divider{height:2rem;border:0;margin:0;background:0 0}.card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;padding:.875rem 1rem .875rem 1.25rem;background-color:var(--tint-1)}.card-foot p{flex:1 1 15rem;margin:0;font-size:.8125rem;line-height:1.6;color:var(--text-mut)}.w-3\.5{width:.875rem}.h-3\.5{height:.875rem}.text-red-700{color:#b91c1c}.bg-red-50{background-color:#fef2f2}.border-red-100{border-color:#fee2e2}.split-shot{aspect-ratio:var(--ar,16 / 10)}.split-shot::before{filter:blur(18px) saturate(.75) brightness(.92);transform:scale(1.18)}@media (min-width:1024px){.split-shot{aspect-ratio:auto;height:100%}}.ph-tral{background-image:url(../img/hero.webp)}.ph-evak1{background-image:url(../img/evakuator-1.webp)}.ph-manip{background-image:url(../img/manipulyator.webp)}.ph-evak2{background-image:url(../img/avtopark-2.webp)}.ph-manip2{background-image:url(../img/tral.webp)}.ph-emkosti{background-image:url(../img/rabota-tral-emkosti.webp)}.ph-drobilka{background-image:url(../img/rabota-tral-drobilka.webp)}.ph-katok{background-image:url(../img/rabota-tral-jcb-katok.webp)}.ph-2jcb{background-image:url(../img/rabota-tral-2jcb.webp)}.ph-gusenica{background-image:url(../img/rabota-tral-gusenica.webp)}.works-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}@media (min-width:768px){.works-grid{grid-template-columns:1fr 1fr}.works-grid>.work-wide{grid-column:1/-1}}.work-card{overflow:hidden;margin:0}.work-shot{position:relative;overflow:hidden;aspect-ratio:var(--ar,16 / 9);background-color:var(--tint-1)}.work-shot::before{content:"";position:absolute;inset:0;background-image:var(--src);background-size:cover;background-position:center;filter:blur(13px) saturate(.85) brightness(.94);transform:scale(1.18)}.work-shot img{position:relative;display:block;width:100%;height:100%;object-fit:contain}form button,form input,form textarea{font-family:inherit}form input::placeholder,form textarea::placeholder{color:var(--text-soft)}form input:focus,form textarea:focus{box-shadow:0 0 0 3px rgba(var(--shadow-rgb),.06)}.cselect{position:relative}.cselect-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:#faf6ec;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.8125rem 1rem;font-size:.875rem;color:var(--text-body);text-align:left;font-family:inherit;transition:border-color .2s,background-color .2s,box-shadow .2s}.cselect-btn:hover{border-color:color-mix(in srgb,var(--line-2) 70%,var(--text-mut))}.cselect.open .cselect-btn{border-color:var(--text-strong);background:#fff;box-shadow:0 0 0 3px rgba(var(--shadow-rgb),.06)}.cselect-chev{width:1rem;height:1rem;color:var(--text-soft);flex:none;transition:transform .3s var(--ease)}.cselect.open .cselect-chev{transform:rotate(180deg)}.cselect-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + .5rem);background:#fff;border:1px solid var(--line);border-radius:14px;padding:.375rem;box-shadow:0 18px 40px -18px rgba(var(--shadow-rgb),.32),0 2px 6px rgba(var(--shadow-rgb),.06);max-height:17rem;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;opacity:0;visibility:hidden;transform:translateY(-6px);transform-origin:top center;transition:opacity .18s ease,transform .22s var(--ease),visibility .22s}.cselect-list::-webkit-scrollbar{width:6px}.cselect-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}.cselect.open .cselect-list{opacity:1;visibility:visible;transform:translateY(0)}.cselect-list li{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem .75rem;border-radius:8px;font-size:.875rem;color:var(--text-body);cursor:pointer;transition:background-color .15s,color .15s}.cselect-list li.is-active{background:var(--tint-1);color:var(--text-strong)}.cselect-list li[aria-selected=true]{color:var(--text-strong);font-weight:700}.cselect-list li[aria-selected=true]::after{content:"✓";color:var(--o-700);font-weight:700;font-size:.8125rem}.card table thead th{font-size:.6875rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-mut)}.card table tbody tr{transition:background-color .18s}.card table tbody tr:hover{background-color:var(--tint-1)}.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s var(--ease)}.js .reveal.visible{opacity:1;transform:translateY(0)}.js .reveal-up{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s var(--ease)}.js .reveal-up.visible{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.js .reveal,.js .reveal-up{opacity:1;transform:none;transition:none}}@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.hero-in{opacity:0;animation:heroIn .55s var(--ease) forwards}.nav-dropdown{visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .28s var(--ease),visibility .28s}.group:focus-within .nav-dropdown,.group:hover .nav-dropdown{visibility:visible;opacity:1;transform:translateY(0)}.nav-dropdown a{opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .3s var(--ease),background-color .2s}.group:focus-within .nav-dropdown a,.group:hover .nav-dropdown a{opacity:1;transform:none}.m-sub{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}.m-sub-icon{transition:transform .3s var(--ease)}footer ul a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--ease),color .2s ease}footer ul a:hover{background-size:100% 1px}footer h4{letter-spacing:-.005em}#to-top{transform:scale(.8);transition:opacity .3s ease,transform .35s var(--ease),background-color .2s}#to-top:not(.opacity-0){transform:scale(1)}#to-top:hover{transform:scale(1.08)}.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.marquee-track{display:flex;width:max-content;animation:34s linear infinite marquee}.marquee-track .font-display{letter-spacing:.045em}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}.freight-layer{will-change:transform}.tab-island{position:relative;width:100%;max-width:30rem;display:flex;align-items:stretch;gap:4px;background:var(--sheet);border:1px solid var(--line);border-radius:9999px;padding:6px;box-sizing:border-box}.tab-indicator{position:absolute;top:6px;left:6px;width:calc((100% - 12px - 12px)/ 4);height:calc(100% - 12px);border-radius:9999px;background:linear-gradient(155deg,var(--o-300) 0,var(--o-btn) 48%,var(--o-700) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -8px 12px -8px rgba(var(--shadow-brand-rgb),.35),0 1px 1px rgba(var(--shadow-rgb),.1),0 10px 22px -9px rgba(var(--shadow-brand-rgb),.65);transition:transform .4s var(--ease);will-change:transform;z-index:1}.tab-island:has(:where(.tab-btn:nth-child(2)[aria-current=page])) .tab-indicator{transform:translateX(0)}.tab-island:has(:where(.tab-btn:nth-child(3)[aria-current=page])) .tab-indicator{transform:translateX(calc(100% + 4px))}.tab-island:has(:where(.tab-btn:nth-child(4)[aria-current=page])) .tab-indicator{transform:translateX(calc(200% + 8px))}.tab-island:has(:where(.tab-btn:nth-child(5)[aria-current=page])) .tab-indicator{transform:translateX(calc(300% + 12px))}html[data-tab-from="0"] .tab-island .tab-indicator{transform:translateX(0)}html[data-tab-from="1"] .tab-island .tab-indicator{transform:translateX(calc(100% + 4px))}html[data-tab-from="2"] .tab-island .tab-indicator{transform:translateX(calc(200% + 8px))}html[data-tab-from="3"] .tab-island .tab-indicator{transform:translateX(calc(300% + 12px))}html[data-tab-from] .tab-island .tab-indicator{transition:none}.tab-btn{position:relative;z-index:2;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:9999px;padding:.5rem .75rem;font-size:.875rem;font-weight:600;letter-spacing:-.005em;color:var(--text-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:color .25s,transform .12s}.tab-btn:hover{color:var(--text-body)}.tab-btn:active{transform:scale(.95)}.tab-btn:focus-visible{outline:2px solid var(--o-btn);outline-offset:2px}.tab-btn[aria-current=page]{color:#fff;cursor:default}.tab-btn[aria-current=page]:hover{color:#fff}.tabpanel[hidden]{display:none}.tabpanel>section:first-child{margin-top:2rem}.tabpanel>section#hero:first-child{margin-top:0}@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.tabpanel.is-entering{animation:panelIn .45s var(--ease) both}@media (prefers-reduced-motion:no-preference){.tab-indicator{animation:tabHere .3s var(--ease)}@keyframes tabHere{from{opacity:.6}to{opacity:1}}}#fleet-modes .panel-dark,#shpunt .panel-dark{background:var(--sheet);border:1px solid var(--line);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.04),0 18px 40px -32px rgba(var(--shadow-rgb),.22);--c-300:#2B363C}#fleet-modes .cargo-grid,#shpunt .cargo-grid{background-image:radial-gradient(58% 76% at 90% 8%,color-mix(in srgb,var(--c-500) 7%,transparent),transparent 62%),radial-gradient(56% 70% at 5% 95%,color-mix(in srgb,var(--o-600) 9%,transparent),transparent 60%)}#fleet-modes .text-white,#shpunt .text-white{color:var(--text-strong)}#fleet-modes .text-slate-400,#shpunt .text-slate-400{color:var(--text-mut)}#shpunt .text-slate-300{color:var(--text-body)}#fleet-modes .eyebrow-sky,#shpunt .eyebrow-sky{color:var(--text-mut)}#fleet-modes .eyebrow-sky::before,#shpunt .eyebrow-sky::before{background-color:var(--c-700)}#shpunt details.acc-dark{background:#fff;border-color:var(--line)}#shpunt details.acc-dark.is-open{background:#fffdfa;border-color:var(--line-warm)}#shpunt details.acc-dark>summary:hover{background:var(--tint-1)}#shpunt details.acc-dark:not([open]):hover{transform:scale(1.014)}#shpunt details.acc-dark .acc-plus{border-color:var(--line-2);color:var(--text-mut)}#shpunt details.acc-dark>summary:hover .acc-plus{border-color:var(--tint-3);color:var(--o-700)}#shpunt details.acc-dark.is-open .acc-plus{background:var(--tint-2);border-color:transparent;color:var(--o-700)}#shpunt .acc-body li::marker{color:var(--line-2)}#about .panel-dark{background:var(--o-50);border:1px solid var(--line-warm);box-shadow:0 1px 2px rgba(var(--shadow-brand-rgb),.04),0 18px 40px -32px rgba(var(--shadow-brand-rgb),.2);--c-300:#2B363C}#about .glow-cool{background-image:radial-gradient(circle at top right,var(--o-200),transparent 62%)}#about .text-white{color:var(--text-strong)}#about .text-slate-300{color:var(--text-body)}#about .eyebrow-light{color:#93693a}#about .eyebrow-light::before{background-color:var(--o-600)}@media (prefers-reduced-motion:reduce){#to-top,.acc-body,.acc-body>*,.acc-body>::before,.acc-plus,.btn,.btn-ink::after,.btn-outline::after,.btn-primary::after,.card table tbody tr,.cselect-list,.cselect-list li,.nav-dropdown,.nav-dropdown a,.stat-rule,.svc-icon,.tab-btn,.tab-indicator,details.acc,details.acc::before,footer ul a{transition:none}.btn-ink:focus-visible::after,.btn-ink:hover::after,.btn-primary:focus-visible::after,.btn-primary:hover::after{animation:none}.btn-outline:focus-visible::after,.btn-outline:hover::after{transform:scaleX(1)}.reveal,.reveal-up{opacity:1!important;transform:none!important;transition:none}.hero-in{animation:none;opacity:1}.marquee-track{animation:none}.freight-layer{transform:none!important}#hero .animate-pulse{animation:none}#shpunt details.acc-dark:not([open]):hover,#to-top:hover,.acc-body>::before,.btn:hover,.card-hover:hover,.group:hover .svc-icon,.stat-rule,details.acc.is-open::before,details.acc:not([open]):hover{transform:none}.tab-indicator,.tabpanel.is-entering{animation:none}}#site-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#fff;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s,visibility .28s}#site-loader.is-shown{opacity:1;visibility:visible;pointer-events:auto}#site-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}#site-loader .loader{width:fit-content;height:fit-content;display:flex;align-items:center;justify-content:center}#site-loader .truckWrapper{width:200px;height:100px;display:flex;flex-direction:column;position:relative;align-items:center;justify-content:flex-end;overflow-x:hidden}#site-loader .truckBody{width:130px;height:fit-content;margin-bottom:6px;animation:1s linear infinite truckMotion}@keyframes truckMotion{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}#site-loader .truckTires{width:108px;height:fit-content;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 15px;position:absolute;bottom:0}#site-loader .truckTires svg{width:24px}#site-loader .truckTires svg:first-child{margin-left:-10px}#site-loader .truckTires svg:last-child{margin-right:-11px}#site-loader .road{width:100%;height:1.5px;background-color:#282828;position:relative;bottom:0;align-self:flex-end;border-radius:3px}#site-loader .road::before{content:"";position:absolute;width:20px;height:100%;background-color:#282828;right:-50%;border-radius:3px;animation:1.4s linear infinite truckRoad;border-left:10px solid #fff}#site-loader .road::after{content:"";position:absolute;width:10px;height:100%;background-color:#282828;right:-65%;border-radius:3px;animation:1.4s linear infinite truckRoad;border-left:4px solid #fff}#site-loader .lampPost{position:absolute;bottom:0;right:-90%;height:90px;animation:1.4s linear infinite truckRoad}@keyframes truckRoad{0%{transform:translateX(0)}100%{transform:translateX(-350px)}}.route-map{display:block;width:100%;max-width:27rem;height:auto;margin-inline:auto;overflow:visible}.route-pin-ring{transform-origin:462px 60px;animation:2.2s ease-out infinite routePing}@keyframes routePing{0%{transform:scale(.6);opacity:.55}100%,70%{transform:scale(1.9);opacity:0}}.route-label{font-family:'IBM Plex Mono','IBM Plex Mono Fallback',monospace;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;fill:var(--o-600)}@media (prefers-reduced-motion:reduce){#site-loader .lampPost,#site-loader .road::after,#site-loader .road::before,#site-loader .truckBody{animation:none}.route-pin-ring{animation:none;opacity:0}}.svc-card{--a:var(--o-700)}.svc-card .svc-icon{width:3.25rem;height:3.25rem;border-radius:var(--r-md);background:linear-gradient(150deg,var(--o-50) 0,color-mix(in srgb,var(--o-300) 26%,#fff) 100%);border-color:color-mix(in srgb,var(--o-500) 22%,transparent);color:var(--icon-mono);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(var(--shadow-brand-rgb),.06)}.svc-card .svc-icon svg{width:1.75rem;height:1.75rem}.svc-card:hover .svc-icon{background:linear-gradient(150deg,var(--o-100) 0,color-mix(in srgb,var(--o-400) 26%,#fff) 100%);border-color:color-mix(in srgb,var(--o-500) 38%,transparent)}.hero-facts{display:flex;flex-wrap:wrap;gap:0 2.25rem}.hero-facts>div{padding-right:2.25rem;border-right:1px solid var(--line-2)}.hero-facts>div:last-child{border-right:0;padding-right:0}.hero-facts dt{font-family:Manrope,'Manrope Fallback',Inter,sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--text-strong)}.hero-facts dd{margin:.25rem 0 0;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-mut)}@media (max-width:640px){.hero-facts{gap:0 1.25rem}.hero-facts>div{padding-right:1.25rem}.ph-gusenica{background-image:url(../img/rabota-tral-gusenica-sm.webp)}.ph-emkosti{background-image:url(../img/rabota-tral-emkosti-sm.webp)}.ph-drobilka{background-image:url(../img/rabota-tral-drobilka-sm.webp)}.ph-katok{background-image:url(../img/rabota-tral-jcb-katok-sm.webp)}.ph-2jcb{background-image:url(../img/rabota-tral-2jcb-sm.webp)}.ph-tral{background-image:url(../img/hero-sm.webp)}.ph::before,.work-shot::before{filter:none;transform:none;background-image:none;background-color:var(--tint-1)}.section{margin-top:3.25rem}.cta-strip{padding:1.25rem;gap:1rem}.cta-strip-actions{width:100%}.cta-strip-actions .btn{flex:1 1 100%;justify-content:center}.cta-strip-text .sec-title{font-size:1.25rem}.form-badge{font-size:.625rem}.marquee-track{animation-duration:52s}}@media (max-width:1023px),(hover:none){.freight-layer{will-change:auto;transform:none!important}}.map-embed{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;flex:1 1 auto;width:100%;height:100%;min-height:12rem;padding:1.5rem;border:0;cursor:pointer;text-align:center;color:var(--text-mut);background-color:var(--tint-1);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;z-index:1;transition:background-color .2s,opacity .3s}.map-embed:hover{background-color:#efece7}.map-embed:focus-visible{outline:2px solid var(--o-700);outline-offset:-3px}.map-embed-pin{width:1.875rem;height:1.875rem;color:var(--o-700)}.map-embed-text{font-size:.9375rem;font-weight:700;line-height:1.45;color:var(--text-strong)}.map-embed-hint{font-size:.75rem;font-weight:600}.map-embed.is-loading{cursor:default}.map-embed.is-loading:hover{background-color:var(--tint-1)}.map-embed--dark.is-loading:hover{background-color:rgba(255,255,255,.04)}.map-embed.is-loading .map-embed-hint{animation:1.6s ease-in-out infinite map-hint}@keyframes map-hint{0%,100%{opacity:.45}50%{opacity:1}}.map-embed.is-done{opacity:0;pointer-events:none}@media (prefers-reduced-motion:reduce){.map-embed{transition:none}.map-embed.is-loading .map-embed-hint{animation:none;opacity:.7}}.map-embed--dark{color:#a9a29a;background-color:rgba(255,255,255,.04);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px)}.map-embed--dark:hover{background-color:rgba(255,255,255,.08)}.map-embed--dark .map-embed-text{color:#fff}.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.link-accent{color:var(--o-700);font-weight:600;text-decoration:underline;text-decoration-color:var(--o-300);text-underline-offset:2px;text-decoration-thickness:1px;transition:text-decoration-color .2s}.link-accent:hover{text-decoration-color:var(--o-600)}.js .ph-defer:not(.is-near){background-image:none!important}.js .ph-defer::after,.js .ph-defer::before{opacity:0;transition:opacity .5s}.js .ph-defer.is-loaded::after,.js .ph-defer.is-loaded::before{opacity:1}@media (prefers-reduced-motion:reduce){.js .ph-defer::after,.js .ph-defer::before{transition:none}}@media (pointer:coarse){.btn{min-height:44px}.btn-compact,.btn-sm{min-height:42px}#mobile-menu a,#mobile-menu button{min-height:44px;display:flex;align-items:center}.hero-chip{min-height:38px}.svc-modal-close{min-width:44px;min-height:44px}} /* =================================================================== v34 — ЭМБЛЕМЫ МАРОК + СИСТЕМА ГЛУБИНЫ Блок дописан в конец файла, поэтому переопределяет всё, что выше. =================================================================== */ /* ------------------------------------------------------------------- 1. ПЕРЕСВЕДЁННАЯ ПАЛИТРА ФОНОВЫХ ПОЛОС Тон и насыщенность оставлены почти исходные (хрома 31 → 29, тон 43° → 41°) — песочный характер листа никуда не делся. Работает другой рычаг: светлота. Было 88.4 при 94.5 у листа — шаг настолько мелкий, что глаз списывал разницу на краску, а не на глубину, и полоса читалась «жёлтой заливкой». Стало 86.1: шаг от листа вырос с 0.095 до 0.148 по яркости, и та же самая теплота теперь читается как тень, упавшая на тот же лист. ------------------------------------------------------------------- */ :root { --band: #E9E0D0; --band-sand: #EAE1CD; --band-clay: #E9DFD0; --band-linen: #E7E1D4; --band-taupe: #E3DDD3; /* Граница карточки, лежащей на полосе. Обычная --line (#ECE4D4) на фоне полосы почти сливается — карточка выглядела наклеенной. */ --line-band: #D4CBB9; /* Тень для тёплых поверхностей. Основная --shadow-rgb холодная (4,20,26) — на песочном фоне она даёт грязно-серый ореол. Здесь тёплый нейтральный коричневый той же светлоты. */ --shadow-warm-rgb: 82, 64, 44; } /* ------------------------------------------------------------------- 2. ПОЛОСА = ВЫЕМКА В ЛИСТЕ (второй план) Волосяная линия сверху и снизу + мягкая внутренняя тень по краям. Тени внутренние, поэтому лэйаут не смещается ни на пиксель. ------------------------------------------------------------------- */ .page-sheet > .band { box-shadow: inset 0 1px 0 0 rgba(var(--shadow-warm-rgb), .15), inset 0 -1px 0 0 rgba(var(--shadow-warm-rgb), .12), inset 0 12px 16px -13px rgba(var(--shadow-warm-rgb), .38), inset 0 -12px 16px -13px rgba(var(--shadow-warm-rgb), .24); } /* Полоса потемнела, поэтому приглушённый текст, лежащий прямо на ней (.sec-lead, .eyebrow), надо подтянуть следом. На исходной полосе --text-mut давал 4.51:1 — впритык к порогу AA; на новой было бы 4.24 и порог бы не прошёл. Переопределяем саму переменную на полосе: 4.64:1. Внутри белых карточек это тоже подействует, но там контраст только вырастет — с 5.59 до 6.03. */ .page-sheet > .band { --text-mut: #586569; } /* Чуть больше воздуха: карточки не должны упираться в края выемки, иначе полоса читается не как поверхность, а как рамка. */ @media (min-width: 1024px) { .page-sheet > .band { padding-top: 2.25rem; padding-bottom: 2.25rem; } } /* ------------------------------------------------------------------- 3. КАРТОЧКА НА ПОЛОСЕ = ПЕРВЫЙ ПЛАН Три слоя тени: контактная (1px), ближняя (форма) и дальняя (отрыв). Всё тёплое, потому что и подложка тёплая. ------------------------------------------------------------------- */ .page-sheet > .band .card { border-color: var(--line-band); box-shadow: 0 1px 1px rgba(var(--shadow-warm-rgb), .06), 0 3px 6px -2px rgba(var(--shadow-warm-rgb), .08), 0 16px 28px -14px rgba(var(--shadow-warm-rgb), .18); } .page-sheet > .band .card-hover:hover { border-color: var(--line-2); box-shadow: 0 1px 1px rgba(var(--shadow-warm-rgb), .07), 0 6px 12px -4px rgba(var(--shadow-warm-rgb), .10), 0 30px 50px -22px rgba(var(--shadow-warm-rgb), .26); } /* Аккордеоны в FAQ стоят стопкой по семь штук. Отдельно стоящей карточке отрыв идёт на пользу, а стопке — нет: семь одинаковых ореолов подряд создают грязь. Им тень короче и мягче. */ .page-sheet > .band details.acc.card { box-shadow: 0 1px 1px rgba(var(--shadow-warm-rgb), .05), 0 2px 4px -2px rgba(var(--shadow-warm-rgb), .07), 0 9px 18px -11px rgba(var(--shadow-warm-rgb), .15); } /* ------------------------------------------------------------------- 4. КАРТОЧКА НА ЧИСТОМ ЛИСТЕ Лист сам по себе — первый план, поэтому тень здесь тише, чем на полосе: разница в силе тени и создаёт ощущение двух планов. ------------------------------------------------------------------- */ .card { box-shadow: 0 1px 1px rgba(var(--shadow-rgb), .04), 0 2px 4px -2px rgba(var(--shadow-rgb), .05); } /* ------------------------------------------------------------------- 5. МАРКИ: ЭМБЛЕМЫ ВМЕСТО НАДПИСЕЙ Файлы кладутся в /assets/img/brands/. Если файла нет или он не загрузился — атп3.js снимает и на его месте остаётся текстовое начертание, так что строка не разваливается никогда. ------------------------------------------------------------------- */ .brand-row { display: flex; align-items: center; gap: 3.25rem; padding-right: 3.25rem; margin: 0; list-style: none; } .brand-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; /* --s — индивидуальная оптическая подгонка: круглая эмблема при одинаковой высоте выглядит крупнее, чем вытянутый логотип. */ height: calc(2.15rem * var(--s, 1)); /* Резерв ширины, чтобы лента не дёргалась, пока файлы грузятся. */ min-width: 5.25rem; } .brand-logo img { display: block; width: auto; height: 100%; max-width: 9.5rem; object-fit: contain; /* Обесцвечиваем: полтора десятка фирменных цветов подряд перетянули бы на себя всё внимание с заголовка. */ filter: grayscale(1) opacity(.52); transition: filter .35s var(--ease); } .marquee:hover .brand-logo img { filter: grayscale(1) opacity(.66); } .brand-logo:hover img { filter: grayscale(0) opacity(1); } /* Текстовый запасной вариант. По умолчанию скрыт; boot.js вешает .is-txt на плашку, если файл эмблемы не загрузился. Через :has() не делаем: в браузере без его поддержки правило отвалится целиком и текст полез бы поверх логотипов. */ .brand-logo-txt { display: none; font-family: Manrope, 'Manrope Fallback', system-ui, sans-serif; font-size: 1.0625rem; font-weight: 800; letter-spacing: .045em; line-height: 1; white-space: nowrap; text-transform: uppercase; color: var(--text-soft); } .brand-logo.is-txt { min-width: 0; } .brand-logo.is-txt .brand-logo-txt { display: block; } /* Подпись и сноска под лентой. Селектор повторяет старое правило section:has(> .marquee) > p:first-child один в один по весу, но идёт ниже по файлу — иначе прежний margin-bottom перебил бы новый. */ section:has(> .marquee) > p.brands-caption { text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: var(--text-mut); margin-bottom: 1.375rem; } .brands-note { max-width: 38rem; margin: 1.25rem auto 0; text-align: center; font-size: .8125rem; line-height: 1.6; color: var(--text-soft); } @media (max-width: 640px) { .brand-row { gap: 2.25rem; padding-right: 2.25rem; } .brand-logo { height: calc(1.75rem * var(--s, 1)); min-width: 4rem; } .brand-logo img { max-width: 7rem; } .brand-logo-txt { font-size: .9375rem; } .brands-note { font-size: .75rem; } } /* На тач-экранах ховера нет — держим логотипы чуть контрастнее. */ @media (hover: none) { .brand-logo img { filter: grayscale(1) opacity(.62); } } /* Марок стало больше, поэтому увеличиваем период прохода — иначе лента поедет заметно быстрее прежнего при той же длительности. */ .marquee-track { animation-duration: 48s; } @media (max-width: 640px) { .marquee-track { animation-duration: 68s; } } /* =================================================================== v35 — СТАТИЧНЫЙ ФОН, ПЕРЕСВЕДЁННЫЕ ШАПКИ «УСЛУГ» И «АВТОПАРКА» Блок дописан в конец файла, поэтому переопределяет всё, что выше. =================================================================== */ /* ------------------------------------------------------------------- 1. ФОН САЙТА: ТА ЖЕ ПОДЛОЖКА, НО РОВНАЯ И СВЕТЛЕЕ Подложка остаётся прежней: на экранах шире 1360 px это по-прежнему фотография тягача с тралом (desk.webp) под тёплой заливкой, ниже — плоский тон --desk. Ничего не удаляется. Снимаются только два слоя, из-за которых поле «играло»: диагональный цветовой градиент (холодный угол сверху слева, тёплый снизу справа) и вертикальная виньетка сверху и снизу. Без них фон читается как одна ровная поверхность. Светлее — за счёт плотности заливки поверх фото: было 72 %, стало 80 %. Средняя яркость подложки поднимается с L* 74.1 до 77.0. Плоский тон --desk поднят на столько же: L* 83.7 → 86.6. ------------------------------------------------------------------- */ :root { --desk: #E3D8C2; } body::before { background: none; } @media (min-width: 1360px) { body::before { background-image: linear-gradient(rgba(220, 207, 182, .8), rgba(220, 207, 182, .8)), url(../img/desk.webp); background-size: 100% 100%, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; } } /* ------------------------------------------------------------------- 4. ПОИМЁННЫЙ СОСТАВ ДЕЖУРНОЙ ГРУППЫ Было: таблица на всю ширину, одиннадцать строк, высота ~530 px — почти вдвое выше двух карточек над ней, и набрана она другим языком (шапка, разлиновка, подвал). Стало: та же карточка, что и у соседей (белый фон, p-6, заголовок, лид), а машины — двумя колонками по одной строке на борт. Высота ~330 px, вровень с соседями. grid-auto-flow:column раскладывает список по колонкам, а не по строкам: борта 1–6 слева, 7–11 справа. Число строк задано жёстко — при добавлении машины поправьте repeat(6, auto). */ .duty-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; column-gap: 2.5rem; } .duty-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .625rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .8125rem; line-height: 1.55; } .duty-list li:last-child { border-bottom: 0; } .duty-list li > span:first-child { flex: 0 0 auto; font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace; font-weight: 600; color: var(--text-strong); } .duty-list li > span:last-child { flex: 1 1 12rem; min-width: 0; color: var(--text-mut); } @media (min-width: 768px) { .duty-list { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); grid-auto-flow: column; } .duty-list li:nth-child(6) { border-bottom: 0; } } /* =================================================================== v38 — ШАПКИ РАЗДЕЛОВ Услуги — вариант Г: светлая панель, чертёжная сетка, фирменная линия по верхней кромке, карточка с цифрами справа. Рисунка в углу нет вовсе. О нас — вариант В: тёмная панель с приглушённой фотографией внутри и тёплым отсветом сверху справа. =================================================================== */ /* --------------------- УСЛУГИ (Г) --------------------- */ .hero-panel--services { position: relative; overflow: hidden; /* Панель набирает высоту содержимым: групповое правило выше подпирает все три шапки min-height в 34.5rem, из-за чего блок стоял на 552 px при собственных ~430 и текст плавал в пустоте. */ min-height: 0; background-color: #FCF8F0; border: 1px solid #E3D6BA; background-image: radial-gradient(76% 92% at 98% 0%, #F5E7CB 0%, transparent 62%), linear-gradient(172deg, #FFFDF8 0%, #F8F1E3 62%, #F2E8D6 100%); box-shadow: 0 1px 2px rgba(90, 74, 50, .10), 0 8px 18px -8px rgba(90, 74, 50, .16), 0 44px 70px -36px rgba(90, 74, 50, .44); } /* Сетка гаснет маской к дальнему углу: сплошная читается как обои, затухающая — как фактура чертёжного листа. */ .hero-panel--services::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(120, 96, 58, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 96, 58, .10) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(120% 100% at 100% 0, #000 6%, rgba(0, 0, 0, .35) 48%, transparent 82%); mask-image: radial-gradient(120% 100% at 100% 0, #000 6%, rgba(0, 0, 0, .35) 48%, transparent 82%); } /* Тот же приём, что у .form-card */ .hero-panel--services::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--o-700) 0%, var(--o-btn) 30%, var(--o-400) 54%, rgba(238, 155, 0, 0) 100%); } /* Псевдоэлементы позиционированы и без этого легли бы поверх текста */ .hero-panel--services > * { position: relative; z-index: 1; } .hero-badge { background: var(--sheet); } .hero-badge .badge-num { font-family: Manrope, 'Manrope Fallback', Inter, sans-serif; letter-spacing: -.02em; line-height: 1; } /* --------------------- О НАС --------------------- Шапка возвращена к исходной: тёмная панель с водяным знаком-графиком, свет с двух сторон — холодная сталь сверху справа, тёплый янтарь снизу слева. Меняется только сила градиента. Было: c-500 на 22 % и o-500 на 16 %, оба пятна узкие. На почти чёрном фоне такие проценты дают разницу в пару пунктов яркости — градиент есть в коде, но глазом не читается. Стало: пятна шире, ядро плотнее (52 % и 38 %), плюс диагональная подложка, которая задаёт вертикальную глубину. Верхний правый угол уходит в сталь #283C45, нижний левый — в янтарную охру #513615, середина остаётся почти чёрной. Структура света та же, просто теперь её видно. ------------------------------------------------- */ .hero-panel--about { background-color: var(--ink); border-color: var(--ink-2); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .1), 0 24px 52px -34px rgba(var(--shadow-rgb), .72); background-image: radial-gradient(78% 96% at 94% 2%, color-mix(in srgb, var(--c-500) 52%, transparent) 0%, color-mix(in srgb, var(--c-500) 20%, transparent) 38%, transparent 68%), radial-gradient(70% 88% at 2% 100%, color-mix(in srgb, var(--o-500) 38%, transparent) 0%, color-mix(in srgb, var(--o-600) 14%, transparent) 40%, transparent 68%), linear-gradient(158deg, #06202A 0%, var(--ink) 52%, #071820 100%); } @media (max-width: 1023px) { .hero-panel--services::before { background-size: 26px 26px; } } /* --------------------- АВТОПАРК (К5-2) --------------------- Заголовок во всю ширину, под ним линейка, ниже три колонки: лид с кнопками, цифры, кадр. Колонки растягиваются на общую высоту, поэтому обрываются на одной линии. ВАЖНО про отступы. Tailwind здесь собран заранее и содержит только те классы, что были в исходной вёрстке: py-10, py-14, py-16, md:py-16, md:py-20. Классов py-12 и md:py-12 в сборке НЕТ — они молча не применяются, и панель остаётся с нулевым вертикальным отступом. Поэтому отступы шапки заданы здесь, а не утилитами. */ .hero-panel--fleet { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 2.5rem 1.5rem; /* Групповое правило выше ставит min-height:34.5rem всем трём шапкам. Из-за него разворот растягивался на 348 px при собственных 210, колонки распирало, а между числами возникали просветы по 43 px. Панель должна набирать высоту содержимым. */ min-height: 0; background-color: #FCF8F0; border: 1px solid #E3D6BA; background-image: radial-gradient(76% 92% at 98% 0%, #F5E7CB 0%, transparent 62%), linear-gradient(172deg, #FFFDF8 0%, #F8F1E3 62%, #F2E8D6 100%); box-shadow: 0 1px 2px rgba(90, 74, 50, .10), 0 8px 18px -8px rgba(90, 74, 50, .16), 0 44px 70px -36px rgba(90, 74, 50, .44); } .hero-panel--fleet::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--o-700) 0%, var(--o-btn) 28%, var(--o-400) 52%, rgba(238, 155, 0, 0) 100%); } .hero-panel--fleet > * { position: relative; z-index: 1; } .hero-head .sec-title { margin-top: .75rem; } .hero-split { display: grid; grid-template-columns: 1fr; gap: 2rem; /* gap работает между элементами сетки, но не отделяет её от заголовка выше — на узком экране лид иначе липнет к h1 */ margin-top: 1.75rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.75rem; } .hero-nums { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .875rem; } .hero-nums > div { border-top: 2px solid var(--line-2); padding-top: .625rem; } .hero-nums dt { font-family: Manrope, 'Manrope Fallback', Inter, sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--text-strong); } .hero-nums dd { margin: .125rem 0 0; font-size: .625rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mut); } .hero-shot { margin: 0; border-radius: 14px; overflow: hidden; background: var(--band); aspect-ratio: 16 / 10; box-shadow: 0 1px 3px rgba(90, 74, 50, .16), 0 18px 32px -20px rgba(90, 74, 50, .5); } .hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 768px) { .hero-panel--fleet { padding: 3.5rem; } } @media (min-width: 1024px) { .hero-head { padding-bottom: 1.75rem; border-bottom: 1px solid var(--line); } /* Панель — колонка, разворот тянется на весь остаток высоты, поэтому кадр заполняет её до низа и воздуха не остаётся. */ .hero-split { flex: 1; grid-template-columns: 1fr 13rem 20rem; gap: 0; align-items: stretch; margin-top: 0; padding-top: 1.75rem; } .hero-lead { padding-right: 2.25rem; } /* Кнопки идут обычным потоком за текстом. Прижимать их к низу колонки (margin-top:auto) пробовали — вставали заподлицо с кадром и читались как проваленные. Просвет фиксированный. */ .hero-lead .hero-actions { margin-top: 3rem; } .hero-nums { display: flex; flex-direction: column; justify-content: flex-start; gap: 1.125rem; border-left: 1px solid var(--line); padding: 0 2.25rem; } .hero-nums > div { border-top: 1px solid var(--line); padding-top: 1.125rem; } .hero-nums > div:first-child { border-top: 0; padding-top: 0; } .hero-nums dt { font-size: 1.625rem; } .hero-nums dd { font-size: .6875rem; letter-spacing: .06em; } /* Кадр вынут из расчёта высоты. Иначе картинка 520×520 при ширине колонки 320 навязывала развороту свои 320 px, и панель раздувалась до 582 при собственных 216. Теперь высоту задают текст и цифры, а снимок просто заполняет колонку. */ .hero-shot-col { position: relative; min-height: 14rem; } .hero-shot { position: absolute; inset: 0; aspect-ratio: auto; } } /* Карточка тянется на высоту текстовой колонки, содержимое внутри центрируется — колонки заканчиваются на одной линии. */ @media (min-width: 1024px) { .hero-panel--services > .grid { align-items: stretch; } .hero-badge { display: flex; flex-direction: column; justify-content: center; } } /* --------------------- УСЛУГИ: воздух --------------------- Блок читался сжатым: при 408 px высоты на содержимое приходилось 248, а внутренние просветы шли 17 / 20 / 32 — первые два глаз не различает. Раздвигаем и рамку, и ритм внутри. */ .hero-panel--services { padding-top: 4rem; padding-bottom: 4rem; } .hero-panel--services .hero-copy .sec-lead { margin-top: 1.75rem; } .hero-panel--services .hero-actions { margin-top: 2.5rem; } .hero-panel--services .hero-badge { padding: 2.5rem; } @media (min-width: 768px) { .hero-panel--services { padding-top: 6rem; padding-bottom: 6rem; } } /* ------------------------------------------------------------------- СОГЛАСИЕ НА ОБРАБОТКУ ПЕРСОНАЛЬНЫХ ДАННЫХ (форма заявки) Галочка, а не строка мелким шрифтом под кнопкой: по 152-ФЗ согласие должно быть конкретным и осознанным, а молчание согласием не считается. Поэтому input стоит перед кнопкой отправки и имеет required — форма не уйдёт, пока посетитель сам не отметит. Своя разметка вместо системного чекбокса: у него не задать размер и цвет, а в 11-м кегле стандартный квадрат выглядит инородно. Реальный input оставлен на месте и скрыт визуально — фокус с клавиатуры, озвучивание экранным диктором и :checked работают как обычно. ------------------------------------------------------------------- */ .consent { position: relative; /* якорь для скрытого input: без него он уедет к ближайшему позиционированному предку (.form-card), и браузер при фокусе с клавиатуры прокрутит страницу к верху карточки вместо самой галочки */ display: flex; align-items: flex-start; gap: .625rem; cursor: pointer; font-size: .75rem; line-height: 1.55; color: var(--text-mut); } .consent input { position: absolute; opacity: 0; width: 1.125rem; height: 1.125rem; margin: 0; } /* Рисованный квадрат. flex:none — иначе при длинном тексте ужимается */ .consent-box { position: relative; flex: none; width: 1.125rem; height: 1.125rem; margin-top: .0625rem; border: 1.5px solid var(--line-2); border-radius: 5px; background: #fff; transition: background-color .18s, border-color .18s; } .consent-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.5); opacity: 0; transition: opacity .16s, transform .2s var(--ease); } .consent:hover .consent-box { border-color: color-mix(in srgb, var(--line-2) 60%, var(--text-mut)); } .consent input:checked + .consent-box { background: var(--o-700); border-color: var(--o-700); } .consent input:checked + .consent-box::after { opacity: 1; transform: rotate(45deg) scale(1); } /* Обводка фокуса: своя, потому что настоящий input не виден */ .consent input:focus-visible + .consent-box { outline: 2px solid var(--c-600); outline-offset: 2px; } /* Браузер подсвечивает незаполненное обязательное поле после попытки отправки. :user-invalid, а не :invalid — иначе квадрат красный с первой секунды, ещё до того как посетитель что-то сделал. */ .consent input:user-invalid + .consent-box { border-color: #b91c1c; } @media (prefers-reduced-motion: reduce) { .consent-box, .consent-box::after { transition: none; } } /* ------------------------------------------------------------------- ПРАВОВЫЕ СТРАНИЦЫ (политика обработки персональных данных) Длинный сплошной текст — единственное место на сайте, где нужна обычная типографика документа. Стили заданы по тегам внутри .legal, чтобы разметка осталась семантической: правки в тексте не требуют раскладывать классы по каждому абзацу. ------------------------------------------------------------------- */ .legal { max-width: 46rem; margin-inline: auto; color: var(--text-body); font-size: .9375rem; line-height: 1.75; } .legal h2 { margin: 2.75rem 0 .875rem; font-size: 1.1875rem; font-weight: 800; line-height: 1.3; color: var(--text-strong); scroll-margin-top: 6rem; } .legal h2:first-child { margin-top: 0; } /* Номер раздела моноширинным, как подписи в остальном интерфейсе */ .legal h2 > span { font-family: 'IBM Plex Mono', 'IBM Plex Mono Fallback', monospace; font-size: .8125rem; font-weight: 600; color: var(--o-700); margin-right: .5rem; } .legal p { margin: 0 0 .875rem; text-wrap: pretty; } .legal ul { margin: 0 0 .875rem; padding: 0; list-style: none; } .legal li { position: relative; padding-left: 1.125rem; margin-bottom: .4375rem; } .legal li::before { content: ""; position: absolute; left: 0; top: .6875rem; width: 6px; height: 2px; border-radius: 999px; background: var(--o-500); } .legal strong { color: var(--text-strong); font-weight: 700; } /* Карточка с реквизитами оператора и датой редакции */ .legal-meta { display: grid; gap: .625rem 1.5rem; margin-bottom: 2.5rem; padding: 1.375rem 1.5rem; font-size: .875rem; } @media (min-width: 640px) { .legal-meta { grid-template-columns: 11rem 1fr; } } .legal-meta dt { color: var(--text-mut); } .legal-meta dd { margin: 0; color: var(--text-strong); font-weight: 600; } /* Незаполненный реквизит виден и в вёрстке, и на странице: пропустить такое при публикации сложнее, чем аккуратный прочерк. */ .legal-todo { background: #fff4d6; border-bottom: 2px solid #e0a800; padding: 0 .25rem; font-weight: 700; color: #7a4b00; } /* Строка про политику под галочкой. Ознакомление с политикой — это информирование, а не согласие: своей отметки оно не требует, поэтому идёт обычным текстом. Отступ выровнен по тексту галочки (ширина квадрата 1.125rem + зазор .625rem), чтобы обе строки читались как один блок, а не как случайная подпись под кнопкой. */ .consent-note { margin: -.25rem 0 0 1.75rem; font-size: .6875rem; line-height: 1.55; color: var(--text-soft); } /* ------------------------------------------------------------------- v35 — ТОН ТЁПЛЫХ ПОДЛОЖЕК Тёплый ряд идёт от песочного к кирпичному: o-100 стоит на 87°, o-400 на 71°, o-600 уже на 39°, o-700 на 30°. Это нормальная шкала — светлые ступени жёлтые, тёмные красные. Ошибка была в том, откуда брались светлые подложки. Все мягкие поверхности (--tint-1/2/3) подмешивались из o-600, то есть из красного конца шкалы. На 5–12 % поверх белого от него остаётся только тон, и плитка под иконкой выходила на 47° — розовой, рядом с синими плитками соседних карточек это читалось как брак, а не как акцент. Лист сайта при этом стоит на 88°. Подмешиваем из o-500 (54°) — ступенью выше по той же шкале. Фирменная теплота сохраняется, розовый уходит: плитка встаёт на 68°, подвал карточки и подложка кадра — на 68°. Один токен, ничего нового в палитру не добавлено. ------------------------------------------------------------------- */ :root { --tint-1: color-mix(in srgb, var(--o-500) 5%, transparent); --tint-2: color-mix(in srgb, var(--o-500) 12%, transparent); --tint-3: color-mix(in srgb, var(--o-500) 28%, transparent); } /* ------------------------------------------------------------------- v36 — ОДИН ЦВЕТ ДЛЯ ВСЕХ ПОЛОС Пять оттенков полосы (sand / clay / linen / taupe и базовый) стояли в пределах dE 0.5–1.8 друг от друга — разница, которую глаз не берёт даже при прямом сравнении, а на разных страницах и подавно. Вместо пяти почти одинаковых значений оставляем одно — песочное, с полосы статистики на главной. Побочно закрывается дыра по контрасту: на самой тёмной полосе (taupe, автопарк) приглушённый текст давал 4.47 — ниже порога AA. На песочной 4.64. Токены-модификаторы оставлены и указывают на --band: разметку трогать не нужно, а если понадобится вернуть вариативность — достаточно переопределить нужный токен здесь. ------------------------------------------------------------------- */ :root { --band: #EAE1CD; --band-sand: var(--band); --band-clay: var(--band); --band-linen: var(--band); --band-taupe: var(--band); } /* ------------------------------------------------------------------- ЦИФРЫ-СЧЁТЧИКИ: без вспышки настоящего значения перед отсчётом Разметка содержит настоящее число (28, 60, 40) — так его видит поисковик и человек с выключенным JS. Раньше скрипт обнулял его уже после первой отрисовки, и на страницах, где блок попадает на первый экран (автопарк), читалось: «40 → 0 → отсчёт → 40». Со стороны это выглядело сбоем, а не анимацией. Теперь при работающем JS число ждёт своей очереди невидимым и проявляется вместе с началом отсчёта. Класс js ставится в до первого кадра (boot.js), поэтому промежуточного состояния, когда правило ещё не применилось, не существует. Подстраховки на случай, если atp3.js не доехал: класс is-counted через 5 с ставит boot.js, а он лежит отдельным файлом в . Если и его нет — нет и класса js, и правило просто не работает. min-width скрипт выставляет в ch по длине конечного значения: при tabular-nums цифры одинаковой ширины, поэтому «+» и « т» рядом с числом стоят на месте, пока оно набирает разряды. ------------------------------------------------------------------- */ .counter { display: inline-block; font-variant-numeric: tabular-nums; } .js .counter:not(.is-counted) { opacity: 0; } .js .counter { transition: opacity .28s ease; } @media (prefers-reduced-motion: reduce) { .js .counter { transition: none; } } /* ------------------------------------------------------------------- КАРТА: подложка под фотографию Заглушка умеет показывать снимок карты вместо клетчатого поля. Снимок подставляется переменной, а не правится в CSS, — чтобы на главной и в «О нас» можно было поставить разные кадры: