/* ============================================================ Sidhu Automobiles — Landing Page Typeface: Poppins only. Icons: inline SVG sprite (line style). ============================================================ */ :root{ --red:#E11B22; --red-dark:#B8141A; --red-soft:#FDEFEF; --ink:#0C0D0F; --ink-2:#15171A; --grey:#63696F; --grey-2:#93999F; --line:rgba(12,13,15,.10); --line-2:rgba(12,13,15,.065); --line-dark:rgba(255,255,255,.09); --light:#F6F7F8; --cream:#FCF5EE; --rose:#FDF2F2; --container:1400px; --gutter:40px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --shadow-sm:0 2px 10px rgba(12,13,15,.05); --shadow-md:0 16px 44px -18px rgba(12,13,15,.20); --shadow-lg:0 34px 76px -28px rgba(12,13,15,.30); --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%} body{ font-family:'Poppins',system-ui,-apple-system,sans-serif; font-weight:400;font-size:16px;line-height:1.65; color:var(--ink);background:#fff; -webkit-font-smoothing:antialiased; } /* Horizontal clipping without turning into a scroll container, which would break every position:fixed element on the page. */ html,body{overflow-x:clip} @supports not (overflow:clip){ html{overflow-x:hidden} body{overflow-x:visible} } img{max-width:100%;display:block} a{text-decoration:none;color:inherit} ul,ol{list-style:none} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px} ::selection{background:var(--red);color:#fff} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .section{padding:88px 0} .text-red{color:var(--red)} .left{text-align:left} section#about-us { padding: 56px 0 0; } /* ---------- Icon sprite ---------- */ .sprite{position:absolute;width:0;height:0;overflow:hidden} .sprite symbol{ fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round; } .sprite symbol.sym-solid{fill:currentColor;stroke:none} /* Presentation attributes on the paths do the real work — CSS can't reach inside a shadow tree. These are belt-and-braces. */ .ic--solid{fill:currentColor;stroke:none} .sprite symbol.sym-colour{fill:none;stroke:none} .ic{ width:20px;height:20px;flex:none;display:block; fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round; } /* Logo wordmark fallback — only shows if the logo PNG is missing */ .logo{display:flex;align-items:center} .logo__fallback{ font-size:19px;font-weight:300;letter-spacing:.02em;color:var(--ink);white-space:nowrap; } .logo__fallback b{font-weight:700;color:var(--red)} .logo__fallback--light{color:#fff;font-size:17px} .logo img + .logo__fallback{display:none} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; padding:14px 26px;border:1px solid transparent;border-radius:var(--r-sm); cursor:pointer; transition:background .3s var(--ease),color .3s var(--ease), border-color .3s var(--ease),transform .3s var(--ease), box-shadow .3s var(--ease); } .btn .ic{width:17px;height:17px} .btn__arrow{transition:transform .3s var(--ease)} .btn:hover .btn__arrow{transform:translateX(5px)} .btn--primary{background:var(--red);color:#fff;box-shadow:0 8px 22px -12px rgba(225,27,34,.9)} .btn--primary:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(225,27,34,.85)} .btn--primary:disabled{opacity:.6;cursor:not-allowed;transform:none} .btn--ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.32)} .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px)} .btn--white{background:#fff;color:var(--red)} .btn--white:hover{background:var(--ink);color:#fff;transform:translateY(-2px)} .btn--block{width:100%} /* ---------- Header call button ---------- Deliberately NOT a .btn. It has its own class so no button rule in this file can alter its geometry. */ .call-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; flex:none;box-sizing:border-box; background:var(--red);color:#fff; border-radius:100px;padding:9px 20px 9px 9px; font-size:15px;font-weight:600;line-height:1;white-space:nowrap; transition:background .3s var(--ease),transform .3s var(--ease); } .call-btn:hover{background:var(--red-dark);transform:translateY(-2px)} .call-btn__icon{ width:32px;height:32px;flex:none;border-radius:50%; background:rgba(255,255,255,.18); display:grid;place-items:center; } .call-btn__icon .ic{width:15px;height:15px} /* ---------- Eyebrows & heads ---------- */ .eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red)} .eyebrow--light{position:relative;padding-bottom:14px} .eyebrow--light::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:2px;background:var(--red)} .eyebrow--dashed{display:flex;align-items:center;justify-content:center;gap:14px} .eyebrow--dashed::before,.eyebrow--dashed::after{content:"";width:28px;height:1px;background:var(--red)} .eyebrow--dashed-right{display:flex;align-items:center;gap:14px} .eyebrow--dashed-right::after{content:"";width:28px;height:1px;background:var(--red)} .section__head{text-align:center;margin-bottom:52px} .section__title{font-size:clamp(28px,3.3vw,46px);font-weight:600;line-height:1.15;letter-spacing:-.025em;margin:12px 0 14px} .section__title--light{color:#fff} .section__sub{color:var(--grey);max-width:600px;margin-inline:auto;font-weight:300;font-size:16px} .section__rule{display:block;width:44px;height:2px;background:var(--red);margin:22px auto 0} /* ============================================================ HEADER + NAV ============================================================ */ .header{ position:fixed;inset:0 0 auto 0;z-index:100; background:#fff; border-bottom:1px solid var(--line-2); isolation:isolate; transition:box-shadow .35s var(--ease),background .35s var(--ease); } .header.is-stuck{box-shadow:0 1px 26px rgba(12,13,15,.08)} .header__inner{display:flex;align-items:center;gap:28px;height:88px;position:relative;z-index:1} /* Red slanted accent block behind the logo. Sized to always reach from the true viewport edge to just past the logo, however the centred .container happens to be positioned at the current width. top/bottom are pushed 2px past the header's own edges so no seam (a thin white line) can appear between the accent and the header's top edge or its bottom border, regardless of subpixel rounding at different zoom levels/screen densities. */ .header__accent{ position:absolute; left:0;top:-2px;bottom:-2px; width:calc(max(0px,(100vw - var(--container)) / 2) + var(--gutter) + 230px); background:var(--red); clip-path:polygon(0 0,100% 0,calc(100% - 46px) 100%,0 100%); z-index:0; pointer-events:none; } .logo{flex:none} .logo--onred{position:relative;z-index:1} .logo img{height:84px;width:auto} .nav{margin-left:auto;display:flex;align-items:center} .nav__head{display:none} .nav__list{display:flex;align-items:center;gap:6px} .nav__link{ display:block;position:relative; font-size:14.5px;font-weight:400;color:var(--ink); padding:9px 15px;border-radius:100px;white-space:nowrap; transition:color .25s var(--ease),background .25s var(--ease); } .nav__link:hover{color:var(--red);background:var(--red-soft)} .nav__link.active{color:var(--red);font-weight:500} .nav__link.active::after{ content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0; width:16px;height:2px;border-radius:2px;background:var(--red); } .nav__cta{display:none} .nav__toggle,.nav__close{ display:none;background:none;border:0;cursor:pointer;color:var(--ink); padding:10px;margin:-10px;border-radius:8px; } .nav__toggle .ic,.nav__close .ic{width:26px;height:26px} .nav-scrim{ position:fixed;inset:0;z-index:99; background:rgba(8,9,10,.45);backdrop-filter:blur(3px); opacity:0;transition:opacity .35s var(--ease); } .nav-scrim.is-on{opacity:1} /* ============================================================ HERO ============================================================ */ .hero{position:relative;padding-top:88px;background:var(--ink);isolation:isolate} .hero__bg{position:absolute;inset:88px 0 0 0;overflow:hidden;z-index:0} .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:65% center;transform:scale(1.04)} .hero__bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(96deg,#0A0B0C 6%,rgba(10,11,12,.94) 34%,rgba(10,11,12,.55) 60%,rgba(10,11,12,.18) 88%), linear-gradient(180deg,rgba(10,11,12,.5),transparent 28%); } .hero__inner{position:relative;z-index:2;padding:76px var(--gutter) 112px} .hero__content{max-width:660px} .hero__title{font-size:clamp(33px,4.5vw,62px);font-weight:700;line-height:1.05;letter-spacing:-.035em;color:#fff;margin-top:20px} .hero__title-accent{color:var(--red);font-style:italic;display:inline-block} .hero__rule{display:block;width:64px;height:1px;background:rgba(255,255,255,.35);margin:22px 0 18px} .hero__text{color:rgba(255,255,255,.78);font-weight:300;font-size:16px;max-width:470px;line-height:1.7} .hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px} /* Feature strip */ .features{ position:relative;z-index:3; display:grid;grid-template-columns:repeat(4,1fr); background:#fff;border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:28px 12px;margin-bottom:-58px; } .feature{display:flex;gap:15px;align-items:center;padding:0 24px} .feature + .feature{border-left:1px solid var(--line-2)} .feature__icon{ flex:none;width:46px;height:46px;border-radius:12px; background:var(--red-soft);color:var(--red);display:grid;place-items:center; transition:background .3s var(--ease),color .3s var(--ease); } .feature__icon .ic{width:21px;height:21px} @media (hover:hover){ .feature:hover .feature__icon{background:var(--red);color:#fff} } .feature h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3} .feature p{font-size:13.5px;font-weight:300;color:var(--grey);line-height:1.45;margin-top:2px} /* ============================================================ SERVICES ============================================================ */ .services{padding-top:146px} .svc{ display:grid;grid-template-columns:1fr 1.05fr; border-radius:var(--r-xl);overflow:hidden; margin-bottom:28px;border:1px solid var(--line-2); } .svc--light{background:var(--light)} .svc--cream{background:var(--cream)} .svc--rose{background:var(--rose)} .svc--reverse{grid-template-columns:1.05fr 1fr} .svc__body{padding:40px 42px;align-self:center} .svc__num{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;color:var(--red);letter-spacing:.04em} .svc__num span{width:34px;height:1px;background:var(--red);display:block} .svc__title{font-size:clamp(23px,2.3vw,31px);font-weight:600;letter-spacing:-.025em;margin:6px 0 10px} .svc__text{color:var(--grey);font-weight:300;font-size:15px;max-width:430px;line-height:1.6} .svc__text + .svc__text{margin-top:14px} .svc__list{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;margin:22px 0 26px} .svc__list li{ display:flex;align-items:center;gap:12px; font-size:14px;padding:9px 0; border-bottom:1px solid var(--line-2); } .svc__list li span{ flex:none;width:32px;height:32px;border-radius:9px; background:#fff;color:var(--red);display:grid;place-items:center; border:1px solid var(--line-2); transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease); } .svc__list li span .ic{width:16px;height:16px} @media (hover:hover){ .svc__list li:hover span{background:var(--red);color:#fff;border-color:var(--red)} } .svc__media{position:relative;overflow:hidden;min-height:0;background:var(--ink)} .svc__media > img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform 1.1s var(--ease)} @media (hover:hover){ .svc:hover .svc__media > img{transform:scale(1.04)} } .svc__media--pad{display:grid;place-items:center;padding:28px;background:transparent} /* Maintenance benefit strip */ .benefits{ position:absolute;left:0;right:0;bottom:0;z-index:2; display:grid;grid-template-columns:repeat(4,1fr); background:linear-gradient(180deg,rgba(10,11,12,0),rgba(10,11,12,.9) 34%); padding:46px 10px 20px; } .benefit{text-align:center;padding:0 10px;color:#fff} .benefit + .benefit{border-left:1px solid rgba(255,255,255,.12)} .benefit .ic{ width:34px;height:34px;padding:8px;border-radius:50%; background:rgba(225,27,34,.2);color:var(--red); margin:0 auto 8px;box-sizing:border-box; } .benefit h4{font-size:13px;font-weight:600;line-height:1.3} .benefit p{font-size:11px;font-weight:300;color:rgba(255,255,255,.6);line-height:1.4} /* ---------- Before / After ---------- */ .ba{ position:relative;overflow:hidden;border-radius:var(--r-md); aspect-ratio:16/10;user-select:none;background:var(--ink-2); touch-action:pan-y;width:100%;box-shadow:var(--shadow-md); cursor:ew-resize; } .ba.is-dragging{cursor:ew-resize} .ba.is-dragging *{cursor:ew-resize} .ba__img{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;object-position:center; pointer-events:none;display:block; } .ba__before{position:absolute;inset:0;clip-path:inset(0 50% 0 0);pointer-events:none} .ba.is-dragging .ba__before{will-change:clip-path} /* Optional: add class "ba--placeholder" to a slider to desaturate the BEFORE half. Not used now that both halves are real photographs. */ .ba--placeholder .ba__before .ba__img{filter:grayscale(.9) brightness(.72) contrast(1.08) saturate(.4)} .ba__handle{ position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:3; width:42px;height:42px;border-radius:50%;background:#fff; display:grid;place-items:center;color:var(--ink);cursor:ew-resize; box-shadow:0 5px 18px rgba(0,0,0,.3); transition:transform .25s var(--ease); } .ba__handle:hover{scale:1.08} .ba.is-dragging .ba__handle{scale:1.08;cursor:ew-resize} .ba__handle .ic{width:18px;height:18px} .ba__handle::before{ content:"";position:absolute;top:50%;left:50%;translate:-50% -50%; width:1.5px;height:250vh;background:rgba(255,255,255,.9);z-index:-1; } .ba__tag{ position:absolute;bottom:14px;z-index:2; background:rgba(10,11,12,.78);color:#fff; font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; padding:6px 13px;border-radius:100px; } .ba__tag--left{left:14px} .ba__tag--right{right:14px} /* ============================================================ ABOUT US ============================================================ */ .about{background:#fff} .about__stats{ display:grid;grid-template-columns:repeat(2,1fr); gap:20px 26px;margin:26px 0 30px; } .about__stat{padding-top:16px;border-top:1px solid var(--line-2)} .about__stat h4{font-size:30px;font-weight:700;color:var(--red);letter-spacing:-.02em;line-height:1.1} .about__stat p{font-size:13px;font-weight:300;color:var(--grey);margin-top:5px} /* ============================================================ PROCESS ============================================================ */ .process{background:var(--light);border-block:1px solid var(--line-2);margin-block:-1px;padding-block:calc(88px + 1px)} .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .step{text-align:center;position:relative;padding:0 8px} .step::after{ content:"";position:absolute;top:42px;left:calc(50% + 54px);right:calc(-50% + 54px); border-top:1px dashed #C6CBD1; } .step:last-child::after{display:none} .step__icon{ width:84px;height:84px;border-radius:50%;margin:0 auto; background:#fff;border:1px solid var(--line); display:grid;place-items:center;color:var(--red);position:relative;z-index:2; transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease); } .step__icon .ic{width:30px;height:30px;stroke-width:1.35} @media (hover:hover){ .step:hover .step__icon{transform:translateY(-7px);box-shadow:var(--shadow-md);background:var(--red);color:#fff;border-color:var(--red)} } .step__num{ display:grid;place-items:center;width:30px;height:30px;border-radius:50%; background:var(--red);color:#fff;font-size:11.5px;font-weight:600; margin:-15px auto 14px;position:relative;z-index:3;border:3px solid var(--light); } .step h3{font-size:15.5px;font-weight:600;margin-bottom:7px;letter-spacing:-.01em} .step p{font-size:13.5px;font-weight:300;color:var(--grey);line-height:1.6} /* ============================================================ GALLERY ============================================================ */ .gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} /* ============================================================ REVIEWS ============================================================ */ .reviews{background:var(--ink);position:relative;isolation:isolate;overflow:hidden} .reviews__bg{position:absolute;inset:0;z-index:-1} .reviews__bg img{width:100%;height:100%;object-fit:cover;opacity:.13} .reviews__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),rgba(12,13,15,.86) 50%,var(--ink))} .reviews__viewport{overflow:hidden} .reviews__track{display:flex;transition:transform .6s var(--ease)} .review{ flex:0 0 calc(33.333% - 16px);margin-right:24px; background:rgba(255,255,255,.035);border:1px solid var(--line-dark); border-radius:var(--r-lg);padding:28px 26px; } .review__quote{width:26px;height:26px;color:var(--red)} .review__stars{display:flex;gap:3px;color:#FFB400;margin-top:12px} .review__stars .ic{width:14px;height:14px;fill:#FFB400;stroke:#FFB400} .review__text{color:rgba(255,255,255,.8);font-weight:300;font-size:14.5px;margin:14px 0 22px;line-height:1.7} .review__person{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line-dark)} .review__person > img:first-child{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none} .review__person h4{font-size:14.5px;font-weight:600;color:#fff;line-height:1.3} .review__person p{font-size:12px;font-weight:300;color:var(--grey-2);line-height:1.3} .review__google{width:22px;height:22px;margin-left:auto;flex:none;display:block} .reviews__dots{display:flex;justify-content:center;gap:9px;margin-top:32px} .reviews__dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.25);transition:.3s var(--ease)} .reviews__dots button.active{background:var(--red);width:24px;border-radius:100px} /* ============================================================ APPOINTMENT ============================================================ */ .appointment{background:var(--light);border-top:1px solid var(--line-2)} .appointment__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start} .appointment__text{color:var(--grey);font-weight:300;font-size:15px;margin-bottom:30px;max-width:380px} .usp li{display:flex;gap:16px;margin-bottom:20px} .usp__icon{flex:none;width:46px;height:46px;border-radius:12px;background:var(--red-soft);color:var(--red);display:grid;place-items:center} .usp__icon .ic{width:20px;height:20px} .usp h4{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.35} .usp p{font-size:13.5px;font-weight:300;color:var(--grey);line-height:1.5} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .form__group{margin-bottom:18px;position:relative} .form input,.form select,.form textarea{ width:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm); padding:15px 18px;font-size:14.5px;font-weight:300; transition:border-color .25s var(--ease),box-shadow .25s var(--ease); } .form select{ appearance:none;color:var(--grey-2);cursor:pointer; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363696F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;background-size:18px; } .form select.has-value{color:var(--ink)} .form textarea{resize:vertical;min-height:104px} .form input::placeholder,.form textarea::placeholder{color:var(--grey-2)} .form input:focus,.form select:focus,.form textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(225,27,34,.08);outline:none} .form__group.is-invalid input,.form__group.is-invalid select{border-color:var(--red);background:#FFFAFA} .form__error{display:block;color:var(--red);font-size:12px;font-weight:300;margin-top:6px} .form__status{margin-top:16px;font-size:14px;text-align:center} .form__status.ok{color:#12703A} .form__status.err{color:var(--red)} .hp{position:absolute;left:-9999px;opacity:0} /* ---------- CTA banner ---------- */ .cta{position:relative;overflow:hidden;border-radius:var(--r-xl);margin-top:64px;background:var(--red);display:flex;align-items:center} .cta__bg{position:absolute;inset:0} .cta__bg img{width:100%;height:100%;object-fit:cover;object-position:right center} .cta__bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(94deg,var(--red) 4%,rgba(225,27,34,.96) 40%,rgba(225,27,34,.6) 70%,rgba(225,27,34,.25) 100%); } .cta__content{position:relative;z-index:2;padding:42px 46px;max-width:680px;color:#fff} .cta__kicker{font-size:15px;font-weight:300;opacity:.9} .cta__title{font-size:clamp(26px,2.9vw,38px);font-weight:600;letter-spacing:-.03em;margin-top:4px} .cta__rule{display:block;width:52px;height:1px;background:rgba(255,255,255,.55);margin:16px 0 18px} .cta__points{display:flex;flex-wrap:wrap;gap:22px;font-size:13.5px;margin-bottom:26px} .cta__points li{display:flex;align-items:center;gap:9px} .cta__points li .ic{width:26px;height:26px;padding:6px;border-radius:8px;background:rgba(255,255,255,.16);box-sizing:border-box} .cta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px} .cta__call{display:flex;align-items:center;gap:13px;padding-left:26px;border-left:1px solid rgba(255,255,255,.3)} .cta__call-icon{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;flex:none} .cta__call p{font-size:12px;font-weight:300;opacity:.9;line-height:1.3} .cta__call a{font-size:20px;font-weight:600;letter-spacing:-.01em} /* ============================================================ FOOTER ============================================================ */ .footer{background:#08090A;color:rgba(255,255,255,.6);padding-top:64px} .footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1.3fr;gap:48px;padding-bottom:48px} .footer__brand img{height:56px;margin-bottom:18px} .footer__brand p{font-size:14px;font-weight:300;max-width:290px;line-height:1.7} .socials{display:flex;gap:11px;margin-top:22px} .socials a{ width:40px;height:40px;border-radius:50%;border:1px solid var(--line-dark); display:grid;place-items:center;color:#fff; transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease); } .socials a .ic{width:18px;height:18px} .socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)} .footer__col h4{color:#fff;font-size:16px;font-weight:600;margin-bottom:20px;letter-spacing:-.01em} .footer__col li{margin-bottom:11px;font-size:14px;font-weight:300} .footer__col a{transition:color .25s var(--ease)} .footer__col a:hover{color:var(--red)} .footer__contact li{display:flex;align-items:center;gap:12px} .footer__contact .ic{width:16px;height:16px;color:var(--red)} .footer__bottom{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; border-top:1px solid var(--line-dark);padding-block:20px;font-size:13px;font-weight:300; } .footer__bottom span{margin-inline:8px;opacity:.35} .footer__bottom a:hover{color:var(--red)} /* WhatsApp float */ .whatsapp-float{ position:fixed;z-index:95; right:calc(24px + env(safe-area-inset-right,0px)); bottom:calc(24px + env(safe-area-inset-bottom,0px)); width:54px;height:54px;border-radius:50%; background:#25D366;color:#fff;display:grid;place-items:center; box-shadow:0 12px 30px -10px rgba(37,211,102,.65); transition:transform .3s var(--ease); } .whatsapp-float .ic{width:27px;height:27px} .whatsapp-float:hover{transform:scale(1.09)} /* Get out of the way while the mobile drawer is open */ body.is-nav-open .whatsapp-float{opacity:0;pointer-events:none} /* ---------- Scroll reveal ---------- */ /* Scoped to .js so content is never stuck invisible if the script fails */ .js .reveal{ opacity:0;transform:translateY(14px); transition:opacity .5s var(--ease),transform .5s var(--ease); } .js .reveal.is-visible{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1400px){ :root{--gutter:32px} } @media (max-width:1060px){ .call-btn{width:40px;height:40px;padding:0;gap:0;border-radius:50%;font-size:0} .call-btn__text{display:none} .call-btn__icon{width:100%;height:100%;background:transparent;border-radius:50%} .call-btn__icon .ic{width:17px;height:17px} } @media (max-width:1280px){ .header__inner{gap:18px} .nav__list{gap:2px} .nav__link{padding:9px 12px;font-size:14px} } /* Only while the number is still visible */ @media (max-width:1280px) and (min-width:1061px){ .call-btn{font-size:14px;padding:8px 16px 8px 8px} .call-btn__icon{width:28px;height:28px} } @media (max-width:1150px){ .svc__body{padding:34px 30px} .footer__grid{grid-template-columns:1.4fr 1fr 1fr;gap:36px} .footer__col:last-child{grid-column:2 / -1} } @media (max-width:1080px){ .features{grid-template-columns:repeat(2,1fr);row-gap:26px} .feature:nth-child(odd){border-left:0} .steps{grid-template-columns:repeat(3,1fr);row-gap:44px} .step::after{display:none} .review{flex-basis:calc(50% - 12px)} .gallery__grid{grid-template-columns:repeat(2,1fr)} .appointment__grid{grid-template-columns:1fr;gap:44px} .appointment__text{max-width:none} } /* ---------- Mobile navigation ---------- */ @media (max-width:960px){ :root{--gutter:24px} html{scroll-padding-top:78px} .section{padding:68px 0} .services{padding-top:126px} .header__inner{height:78px;gap:12px} .header__accent{ width:calc(max(0px,(100vw - var(--container)) / 2) + var(--gutter) + 150px); clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%); } .logo img{height:46px} .nav__toggle{display:block;order:2;margin-left:auto} .call-btn{order:3;margin-left:14px} .logo__fallback{font-size:16px} .nav{ position:fixed;top:0;right:0;bottom:0; width:min(330px,86vw); background:#fff;z-index:110;margin-left:0; display:flex;flex-direction:column;align-items:stretch; padding:0 22px 26px; transform:translateX(103%); transition:transform .38s var(--ease); box-shadow:-24px 0 60px rgba(0,0,0,.2); overflow-y:auto; } .nav.is-open{transform:none} .nav__head{ display:flex;align-items:center;justify-content:space-between; height:70px;margin-inline:-22px;padding-inline:22px; border-bottom:1px solid var(--line-2);margin-bottom:8px; } .nav__head-title{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-2)} .nav__close{display:block} .nav__list{flex-direction:column;align-items:stretch;gap:0} .nav__list li + li{border-top:1px solid var(--line-2)} .nav__link{ display:flex;align-items:center;justify-content:space-between; font-size:16px;padding:15px 4px;border-radius:0; } .nav__link:hover{background:transparent} .nav__link.active::after{ position:static;translate:none;width:7px;height:7px;border-radius:50%; } .nav__cta{display:inline-flex;margin-top:24px} .hero{padding-top:78px} .hero__bg{inset:78px 0 0 0} .hero__bg img{object-position:60% center} .hero__bg::after{background:linear-gradient(180deg,rgba(10,11,12,.86),rgba(10,11,12,.78))} .hero__inner{padding:56px var(--gutter) 88px} /* Centred hero on phones — desktop keeps the left-aligned layout so the car in the background photo still reads on the right. */ .hero__content{max-width:none;text-align:center;margin-inline:auto} .hero__content .eyebrow--light::after{left:50%;translate:-50% 0} .hero__rule{margin-left:auto;margin-right:auto} .hero__text{margin-inline:auto} .hero__actions{justify-content:center} .svc,.svc--reverse{grid-template-columns:1fr} .svc__media{min-height:280px;order:-1} .svc--reverse .svc__media{order:-1} .svc__media--pad{padding:20px 20px 0;min-height:0} .svc__body{padding:30px 24px 34px} .svc__text{max-width:none} .about__stats{grid-template-columns:repeat(2,1fr)} .cta__bg::after{background:linear-gradient(180deg,var(--red) 24%,rgba(225,27,34,.75))} .cta__content{padding:34px 26px;max-width:none} } @media (max-width:640px){ .section{padding:56px 0} .services{padding-top:120px} .section__head{margin-bottom:36px} .features{ grid-template-columns:repeat(2,1fr); padding:14px 6px;margin-bottom:-48px;border-radius:var(--r-md); } .feature{ flex-direction:column;align-items:flex-start;gap:9px; padding:14px 12px;border-left:0; } .feature:nth-child(even){border-left:1px solid var(--line-2)} .feature:nth-child(n+3){border-top:1px solid var(--line-2)} .feature__icon{width:40px;height:40px;border-radius:11px} .feature__icon .ic{width:19px;height:19px} .hero__inner{padding:44px var(--gutter) 72px} .hero__actions{gap:10px;flex-wrap:nowrap} .hero__actions .btn{ flex:1 1 0;min-width:0; padding:12px 8px;font-size:10.5px;letter-spacing:.03em;gap:6px; } .hero__actions .btn .ic{width:15px;height:15px} .hero__actions .btn__arrow{display:none} .hero__text{font-size:16px} .svc{border-radius:var(--r-lg)} .svc__list{grid-template-columns:1fr 1fr;column-gap:14px;margin:20px 0 24px} .svc__list li{gap:9px} .svc__list li span{width:28px;height:28px;border-radius:8px} .svc__list li span .ic{width:14px;height:14px} .svc__media{min-height:0;display:flex;flex-direction:column} .svc__media > img{position:static;height:220px} .benefits{ position:static;grid-template-columns:repeat(2,1fr); gap:16px 0;padding:20px 4px;background:var(--ink-2); } .benefit:nth-child(odd){border-left:0} .benefit:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1);padding-top:16px} .about__stats{grid-template-columns:repeat(2,1fr);gap:16px 18px} .about__stat h4{font-size:25px} .steps{grid-template-columns:1fr;row-gap:34px} .gallery__grid{grid-template-columns:1fr;gap:16px} .review{flex-basis:100%;margin-right:14px;padding:24px 20px} .form__row{grid-template-columns:1fr;gap:0} .cta__points{gap:12px 18px;font-size:13px} .cta__actions{flex-direction:column;align-items:stretch;gap:20px} .cta__actions .btn{width:100%} .cta__call{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.28);padding-top:18px} .footer{padding-top:48px} .footer__grid{grid-template-columns:1fr;gap:30px;padding-bottom:36px} .footer__col:last-child{grid-column:auto} .footer__bottom{flex-direction:column;text-align:center} .whatsapp-float{ width:50px;height:50px; right:calc(16px + env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); } /* Mobile type scale — smaller and tighter reads more premium on a phone */ body{font-size:15px} .section__title{font-size:26px;letter-spacing:-.02em} .section__sub{font-size:14.5px} .eyebrow{font-size:11px;letter-spacing:.18em} .hero__title{font-size:34px;letter-spacing:-.03em} .hero__text{font-size:15px;line-height:1.65} .btn{font-size:12px;padding:13px 22px;letter-spacing:.06em} .svc__title{font-size:21px} .svc__text{font-size:14px} .svc__list li{font-size:12.5px;padding:8px 0;line-height:1.35} .feature h3{font-size:14.5px} .feature p{font-size:12.5px} .step h3{font-size:15px} .step p{font-size:13px} .review__text{font-size:14px} .cta__title{font-size:25px} .cta__kicker{font-size:14px} .cta__call a{font-size:18px} .footer__col h4{font-size:15px} .footer__col li,.footer__brand p{font-size:13.5px} }