/* ============================================================ AMEGROUP Diversified Services — stylesheet 1. Tokens 2. Base 3. Layout 4. Components 5. Sections 6. Modal 7. Responsive 8. Reduced motion ============================================================ */ /* ---------- 1. Tokens ---------- */ :root{ --navy:#152C5B; --navy-deep:#0E1D3F; --navy-soft:#2A4480; --gold:#C9A227; --gold-light:#E3C567; --green:#1E7A46; --green-dark:#166237; --ink:#1A1A1A; --muted:#5B6580; --line:#E2E7F0; --bg:#FFFFFF; --bg-alt:#F5F7FB; --red:#C0392B; --font-head:"Poppins","Segoe UI",Tahoma,sans-serif; --font-body:"Inter","Segoe UI",Tahoma,sans-serif; --wrap:1180px; --radius:14px; --radius-sm:9px; --shadow:0 6px 24px rgba(21,44,91,.08); --shadow-lg:0 18px 50px rgba(21,44,91,.16); --t:.22s ease; } /* ---------- 2. Base ---------- */ *,*::before,*::after{box-sizing:border-box} /* overflow-x on propagates to the viewport, so the off-canvas nav drawer parked at translateX(100%) cannot create a horizontal scrollbar. Applying it here rather than on keeps the sticky header working. */ html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:hidden} body{ margin:0;font-family:var(--font-body);font-size:16px;line-height:1.65; color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--font-head);line-height:1.18;margin:0 0 .5em;color:var(--navy)} h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;letter-spacing:-.02em} h2{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:800;letter-spacing:-.01em} h3{font-size:1.15rem;font-weight:700} h4{font-size:1rem;font-weight:700} p{margin:0 0 1rem} a{color:var(--navy);text-decoration:none;transition:color var(--t)} a:hover{color:var(--gold)} ul,ol{margin:0;padding:0;list-style:none} img,svg,iframe{max-width:100%} button{font:inherit;cursor:pointer} :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px} .sprite{position:absolute;width:0;height:0;overflow:hidden} .ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em} .ico--lg{width:1.7em;height:1.7em} .ico--xl{width:2rem;height:2rem} .skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy); padding:.7rem 1.2rem;font-weight:700;z-index:200} .skip-link:focus{left:0} .note{font-size:.82rem;color:var(--muted);font-style:italic;margin-top:1rem} .note--light{color:rgba(255,255,255,.75)} /* ---------- 3. Layout ---------- */ /* Grid items default to an automatic minimum size, which makes 1fr tracks come out unequal when content is wide. min-width:0 restores true equal columns. */ .stats__grid>*,.cards>*,.divisions>*,.pillars>*,.steps>*,.quotes>*, .contact__info>*,.footer__grid>*,.form__row>*{min-width:0} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px} .wrap--narrow{max-width:860px} .section{padding:clamp(56px,8vw,96px) 0} .section--alt{background:var(--bg-alt)} .section--navy{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff} .section--navy h2,.section--navy h3{color:#fff} .sechead{text-align:center;max-width:680px;margin:0 auto clamp(32px,5vw,56px)} .sechead__lead{color:var(--muted);font-size:1.05rem;margin:0} .sechead--light .sechead__lead{color:rgba(255,255,255,.78)} .eyebrow{font-family:var(--font-head);font-weight:700;letter-spacing:.22em; text-transform:uppercase;font-size:.72rem;color:var(--gold);margin:0 0 .35rem} .eyebrow--dark{color:var(--gold)} .eyebrow span{color:var(--navy);letter-spacing:.1em} /* ---------- 4. Components ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--font-head);font-weight:700;font-size:.95rem; padding:.72rem 1.4rem;border:2px solid transparent;border-radius:100px; cursor:pointer;transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t); text-align:center;line-height:1.2; } .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .btn:active{transform:translateY(0)} .btn--gold{background:var(--gold);color:var(--navy)} .btn--gold:hover{background:var(--gold-light);color:var(--navy)} .btn--green{background:var(--green);color:#fff} .btn--green:hover{background:var(--green-dark);color:#fff} .btn--navy{background:var(--navy);color:#fff} .btn--navy:hover{background:var(--navy-soft);color:#fff} .btn--sm{padding:.5rem 1.05rem;font-size:.85rem} .btn--lg{padding:.9rem 1.9rem;font-size:1.02rem} .btn--block{width:100%} .btn[disabled]{opacity:.7;cursor:not-allowed;transform:none} .ticklist li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.55rem;color:var(--muted)} .ticklist .ico{color:var(--green);margin-top:.28em} .ticklist--light li{color:rgba(255,255,255,.85)} .ticklist--light .ico{color:var(--gold)} /* ---------- Banner (the original printed artwork) ---------- */ .topbar{background:var(--navy-deep);color:rgba(255,255,255,.82);font-size:.82rem} .topbar__in{display:flex;align-items:center;justify-content:space-between; gap:1rem 1.6rem;flex-wrap:wrap;min-height:40px;padding-block:.35rem} .topbar__contacts{display:flex;align-items:center;gap:.5rem 1.5rem;flex-wrap:wrap} .topbar a{display:inline-flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.82)} .topbar a:hover{color:var(--gold-light)} .topbar .ico{color:var(--gold);width:1em;height:1em} .topbar__who{opacity:.75} .topbar__who::after{content:"\00a0\2014\00a0"} .topbar b{font-weight:600;color:#fff;letter-spacing:.01em} .topbar__tag{margin:0;font-family:var(--font-head);font-weight:600;font-size:.7rem; letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light)} /* ---------- Header ---------- */ .header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--line); transition:box-shadow var(--t)} /* The blur lives on a pseudo-element, not on .header itself: backdrop-filter would make the header a containing block for the position:fixed mobile nav drawer, trapping it inside the header instead of filling the viewport. */ .header::before{content:"";position:absolute;inset:0;z-index:-1; background:rgba(255,255,255,.97);backdrop-filter:blur(8px)} .header.is-stuck{box-shadow:0 4px 18px rgba(21,44,91,.1)} .header__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px} .brand{display:inline-flex;align-items:center;gap:.7rem} .brand__mark{width:auto;height:46px;flex:none;object-fit:contain} .brand__text{display:flex;flex-direction:column;line-height:1.05} .brand__text strong{font-family:var(--font-head);font-weight:800;font-size:1.3rem; letter-spacing:.01em;color:var(--navy)} .brand__text small{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gold);font-weight:600} .brand--light .brand__text strong{color:#fff} .nav{display:flex;align-items:center;gap:1.4rem} .nav a{font-weight:600;font-size:.93rem;color:var(--navy);position:relative;padding:.2rem 0} .nav a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px; background:var(--gold);transition:width var(--t)} .nav a:hover::after,.nav a.is-active::after{width:100%} .nav a.is-active{color:var(--gold)} .navtoggle{display:none;background:none;border:0;color:var(--navy);padding:.4rem} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;color:#fff; background:linear-gradient(150deg,var(--navy) 0%,var(--navy-deep) 65%,#0A1630 100%)} /* The tricolour ribbon sits along the bottom edge only, so the hero copy above it keeps full contrast against the navy. Hero padding-bottom reserves its space. */ /* Capped, not just a percentage: the mobile hero is ~1060px tall, and 38% of that made a 400px ribbon whose saffron edge climbed 125px into the tick list and made it unreadable. */ .hero__ribbon{position:absolute;inset:auto 0 0 0;width:100%;height:min(32%,230px); pointer-events:none} /* the generous bottom padding is what keeps the tick row clear of the ribbon */ .hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .65fr; gap:2.5rem;align-items:center; padding:clamp(28px,4vw,56px) 20px clamp(165px,20vw,225px)} .hero h1{color:#fff;margin-bottom:.35rem;display:flex;flex-direction:column} .hero h1 span{font-size:.3em;font-weight:600;letter-spacing:.3em;text-transform:uppercase; color:var(--gold);margin-top:.5rem} .hero__kicker{font-family:var(--font-head);font-weight:600;letter-spacing:.1em; color:var(--gold-light);text-transform:uppercase;font-size:.82rem;margin-bottom:1rem} .hero__lead{font-size:1.08rem;color:rgba(255,255,255,.86);max-width:56ch} .hero__cta{display:flex;gap:.85rem;flex-wrap:wrap;margin:1.6rem 0 1.5rem} .hero__ticks{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.88rem;color:rgba(255,255,255,.88)} .hero__ticks li{display:flex;align-items:center;gap:.45rem} .hero__ticks .ico{color:var(--gold)} .hero__seal{display:flex;justify-content:center} /* padding keeps the wide 'OUR COMMITMENT' line off the ring, where a circle is at its narrowest */ .seal{width:210px;height:210px;padding:0 16px;border-radius:50%;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.15rem;text-align:center; background:radial-gradient(circle,rgba(255,255,255,.09),rgba(255,255,255,.02)); border:2px solid var(--gold);box-shadow:0 0 0 8px rgba(201,162,39,.12)} .seal__mark{width:auto;height:88px;margin-bottom:.5rem;object-fit:contain} .seal__top,.seal__bot{font-family:var(--font-head);font-weight:700;letter-spacing:.14em; text-transform:uppercase;font-size:.72rem;color:#fff} .seal__bot{color:var(--gold-light)} /* ---------- Stats ---------- */ /* The ribbon SVG's clipped bottom edge anti-aliases against the navy hero, leaving a 1px darker line. Pull this band up over it — and make it positioned, because .hero is position:relative and would otherwise paint above a static sibling and keep covering the join. Both are the same gold, so it reads as one continuous colour. */ .stats{background:var(--gold);padding:clamp(14px,2vw,22px) 0; margin-top:-1px;position:relative;z-index:1} .stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center} .stat{display:flex;flex-direction:column} .stat__num{font-family:var(--font-head);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.5rem); color:var(--navy);line-height:1.1} .stat__lbl{font-size:.8rem;letter-spacing:.13em;text-transform:uppercase; font-weight:600;color:var(--navy-deep);opacity:.8} /* ---------- Services ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:1.8rem 1.5rem 1.5rem;overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t)} .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent} .card__icon{width:60px;height:60px;border-radius:var(--radius-sm);display:grid;place-items:center; background:var(--accent);color:#fff;margin-bottom:1.1rem;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 40%,transparent)} .card h3{color:var(--accent);margin-bottom:.4rem;font-size:1.18rem} .card p{color:var(--muted);font-size:.94rem;margin-bottom:1.1rem} .card__link{background:none;border:0;padding:0;font-family:var(--font-head);font-weight:700; font-size:.88rem;color:var(--navy);display:inline-flex;align-items:center;gap:.4rem; transition:gap var(--t),color var(--t)} .card__link:hover{color:var(--accent);gap:.7rem} /* ---------- Divisions ---------- */ .divisions{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem} .division{display:flex;gap:1.3rem;background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding:1.9rem;box-shadow:var(--shadow)} .division__mark{width:120px;height:auto;flex:none;align-self:flex-start;object-fit:contain} .division h3{font-size:1.5rem;display:flex;flex-direction:column;margin-bottom:1rem} .division h3 span{font-size:.55em;font-weight:600;color:var(--navy-soft);letter-spacing:.02em} .division .btn{margin-top:.6rem} /* ---------- Global reach band ---------- */ .reach{padding:clamp(28px,4vw,48px) 0 0} .reach img{display:block;width:100%;height:auto} .reach__cap{margin:.4rem 0 0;text-align:center;font-family:var(--font-head); font-size:.92rem;font-weight:600;color:var(--muted);letter-spacing:.02em} .reach__cap strong{color:var(--navy)} /* ---------- About / Pillars ---------- */ .about{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center} .about__copy p{color:var(--muted)} .about h2 em{color:var(--gold);font-style:normal} .about__slogan{font-family:var(--font-head);font-weight:700;font-size:1.15rem; color:var(--navy)!important;border-left:4px solid var(--gold);padding-left:1rem;margin-top:1.5rem} .pillars{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .pillar{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius); padding:1.4rem;text-align:center;transition:transform var(--t),background var(--t)} .pillar:hover{transform:translateY(-4px);background:#fff;box-shadow:var(--shadow)} .pillar .ico{color:var(--gold);margin-bottom:.6rem} .pillar h3{font-size:.97rem;margin-bottom:.25rem} .pillar p{font-size:.83rem;color:var(--muted);margin:0} /* ---------- Process ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:step;position:relative} .steps::before{content:"";position:absolute;top:26px;left:12%;right:12%;height:2px; background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 18px);opacity:.5} .step{position:relative;text-align:center;padding-top:0} .step__num{position:relative;z-index:1;display:grid;place-items:center;width:54px;height:54px; margin:0 auto 1rem;border-radius:50%;background:var(--gold);color:var(--navy); font-family:var(--font-head);font-weight:800;font-size:1.35rem; box-shadow:0 0 0 6px rgba(201,162,39,.18)} .step p{color:rgba(255,255,255,.75);font-size:.92rem;margin:0} /* ---------- Testimonials ---------- */ /* A scroll-snap track rather than a grid, so the list scales to any number of testimonials without stretching the page. Native scrolling means it swipes on touch and still works with JavaScript off — the arrows and dots are the only parts that need JS. */ .carousel{position:relative} .quotes{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding:4px;margin:-4px; scrollbar-width:none;-ms-overflow-style:none} .quotes::-webkit-scrollbar{display:none} .quotes>.quote{flex:0 0 calc((100% - 2.8rem) / 3);scroll-snap-align:start} .carousel__nav{display:flex;align-items:center;justify-content:center;gap:1rem; margin-top:1.5rem} .carousel__btn{width:42px;height:42px;flex:none;border-radius:50%; border:1.5px solid var(--line);background:#fff;color:var(--navy); display:grid;place-items:center;transition:all var(--t)} .carousel__btn:hover:not(:disabled){background:var(--navy);border-color:var(--navy);color:#fff} .carousel__btn:disabled{opacity:.3;cursor:not-allowed} .carousel__btn[data-dir="-1"] .ico{transform:rotate(180deg)} .carousel__dots{display:flex;align-items:center;gap:.4rem} .carousel__dot{width:8px;height:8px;padding:0;border:0;border-radius:50%; background:#CBD3E1;cursor:pointer;transition:all var(--t)} .carousel__dot.is-on{background:var(--gold);width:22px;border-radius:4px} .quote{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:1.7rem;position:relative;box-shadow:var(--shadow)} .quote::before{content:"\201C";position:absolute;top:.1rem;right:1.1rem;font-family:Georgia,serif; font-size:5rem;color:var(--gold);opacity:.2;line-height:1} .quote__stars{display:flex;gap:.15rem;color:var(--gold);margin-bottom:.8rem} .quote blockquote{margin:0 0 1.1rem;color:var(--ink);font-size:.96rem;line-height:1.7} .quote figcaption{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:.8rem} .quote figcaption strong{font-family:var(--font-head);color:var(--navy)} .quote figcaption span{font-size:.82rem;color:var(--muted)} /* ---------- FAQ ---------- */ .faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm); margin-bottom:.7rem;overflow:hidden;transition:box-shadow var(--t)} .faq details[open]{box-shadow:var(--shadow);border-color:var(--gold)} .faq summary{cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.2rem; font-family:var(--font-head);font-weight:600;color:var(--navy);position:relative} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%); font-size:1.5rem;font-weight:400;color:var(--gold);transition:transform var(--t)} .faq details[open] summary::after{content:"\2212"} .faq summary:hover{background:var(--bg-alt)} .faq p{margin:0;padding:0 1.2rem 1.2rem;color:var(--muted);font-size:.95rem} /* ---------- Contact ---------- */ .contact{display:grid;grid-template-columns:1.1fr .9fr;gap:1.8rem;align-items:start} /* One card holding a divided list — five separate boxes in a 2-up grid left an orphan on the last row and gave every card a different height. */ .contact__info{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:0 1.5rem;box-shadow:var(--shadow)} .crow{display:flex;align-items:center;gap:1.1rem;padding:1.15rem 0; border-bottom:1px solid var(--line)} .crow:last-child{border-bottom:0} .crow__ico{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center; background:rgba(201,162,39,.13);color:var(--gold)} .crow__body{flex:1;min-width:0} .crow__body h3{margin:0 0 .15rem;font-family:var(--font-body);font-size:.74rem;font-weight:600; letter-spacing:.11em;text-transform:uppercase;color:var(--muted)} .crow__body p{margin:0;font-family:var(--font-head);font-weight:700;font-size:1.02rem; color:var(--navy);line-height:1.4} .crow__body a{color:var(--navy)} .crow__body a:hover{color:var(--gold)} .crow__body span{font-weight:500;color:var(--muted);font-size:.92rem} .crow__wa{flex:none;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem; border:1.5px solid rgba(30,122,70,.35);border-radius:100px;color:var(--green); font-family:var(--font-head);font-weight:700;font-size:.82rem;transition:all var(--t)} .crow__wa:hover{background:var(--green);border-color:var(--green);color:#fff} .map{margin-top:1.8rem;border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow)} .map iframe{display:block;width:100%;height:330px;border:0;filter:grayscale(.2)} /* Narrow screens: the WhatsApp pill squeezes the name and number into two-line wraps, so give it its own line indented under the text. */ @media (max-width:560px){ .contact__info{padding:0 1.1rem} .crow{flex-wrap:wrap;row-gap:.75rem} .crow__body{flex:1 1 55%} .crow__wa{flex:1 0 100%;max-width:11rem;justify-content:center; margin-left:calc(46px + 1.1rem)} } .contact__cta{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%); color:#fff;border-radius:var(--radius);padding:2rem;text-align:center;box-shadow:var(--shadow-lg)} .contact__mark{width:auto;height:70px;margin:0 auto .8rem;object-fit:contain} .contact__cta h3{color:#fff;font-size:1.4rem} .contact__cta p{color:rgba(255,255,255,.8);font-size:.95rem} .contact__cta .ticklist{text-align:left;margin:1.3rem 0 1.6rem} /* ---------- Footer ---------- */ .footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding-top:clamp(48px,6vw,72px)} .footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2rem;padding-bottom:2.5rem} .footer h4{color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;margin-bottom:1rem} .footer a{color:rgba(255,255,255,.7);font-size:.92rem} .footer a:hover{color:var(--gold-light)} .footer li{margin-bottom:.5rem} .footer__blurb{font-size:.9rem;margin-top:1rem;max-width:38ch} .footer .btn{margin-top:.6rem} .footer__bar{background:var(--gold);color:var(--navy);text-align:center;margin:0; padding:.8rem;font-family:var(--font-head);font-weight:700;letter-spacing:.16em; text-transform:uppercase;font-size:.78rem} .footer__copy{text-align:center;margin:0;padding:1.1rem;font-size:.83rem;background:#08122A} /* ---------- Back to top ---------- */ .totop{position:fixed;right:22px;bottom:22px;z-index:90;width:46px;height:46px; display:grid;place-items:center;border:0;border-radius:50%; background:var(--navy);color:var(--gold);box-shadow:0 6px 18px rgba(10,22,48,.3); opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity var(--t),transform var(--t),background var(--t),color var(--t)} .totop.is-on{opacity:1;transform:none;pointer-events:auto} .totop:hover{background:var(--gold);color:var(--navy)} .totop .ico{width:1.25rem;height:1.25rem;transform:rotate(-90deg)} /* ---------- Mobile action bar ---------- */ .actionbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99; background:var(--navy-deep);border-top:2px solid var(--gold)} .actionbar a,.actionbar button{flex:1;display:flex;flex-direction:column;align-items:center; gap:.15rem;padding:.6rem;background:none;border:0;color:#fff;font-size:.75rem;font-weight:600} .actionbar .ico{color:var(--gold);width:1.35em;height:1.35em} /* ---------- 6. Modal ---------- */ .modal{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0; border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:auto;color:var(--ink)} .modal::backdrop{background:rgba(10,22,48,.62);backdrop-filter:blur(3px)} .modal__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem; padding:1.5rem 1.6rem;background:linear-gradient(160deg,var(--navy),var(--navy-deep));color:#fff; position:sticky;top:0;z-index:2} .modal__head h2{color:#fff;font-size:1.4rem;margin-bottom:.2rem} .modal__head p{margin:0;font-size:.86rem;color:rgba(255,255,255,.75)} .modal__close{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:50%; width:38px;height:38px;display:grid;place-items:center;transition:background var(--t)} .modal__close:hover{background:var(--gold);color:var(--navy)} .form{padding:1.6rem} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .field{margin-bottom:1rem;display:flex;flex-direction:column} .field label{font-family:var(--font-head);font-weight:600;font-size:.85rem; color:var(--navy);margin-bottom:.35rem} .req{color:var(--red)} .field input,.field select,.field textarea{ font:inherit;font-size:.95rem;padding:.7rem .85rem;border:1.5px solid var(--line); border-radius:var(--radius-sm);background:#fff;color:var(--ink); transition:border-color var(--t),box-shadow var(--t);width:100%} .field input:focus,.field select:focus,.field textarea:focus{ outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.2)} .field textarea{resize:vertical;min-height:96px} .field [aria-invalid="true"]{border-color:var(--red);background:#FEF6F5} .err{margin:.3rem 0 0;font-size:.78rem;color:var(--red);min-height:0} .err:empty{display:none} .field--check{margin-top:.3rem} .check{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:.6rem; font-family:var(--font-body)!important;font-weight:400!important;font-size:.88rem!important; color:var(--muted)!important;cursor:pointer} .check input{width:18px;height:18px;flex:none;margin-top:.15rem;accent-color:var(--gold)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form__actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem} .form__actions .btn{flex:1;min-width:190px} .form__foot{margin:1rem 0 0;font-size:.85rem;color:var(--muted);text-align:center} .form__foot a{font-weight:700;color:var(--navy)} .spinner{display:none;width:16px;height:16px;border:2px solid rgba(21,44,91,.3); border-top-color:var(--navy);border-radius:50%;animation:spin .7s linear infinite} .is-sending .spinner{display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} .result{padding:2.4rem 1.8rem;text-align:center} .result h3{font-size:1.4rem} .result p{color:var(--muted)} .result__ico{width:56px;height:56px;color:#fff;background:var(--green);border-radius:50%; padding:12px;margin-bottom:1rem} .result--bad h3{color:var(--red)} .result__actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem} /* ---------- 7. Responsive ---------- */ @media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} .quotes>.quote{flex-basis:calc((100% - 1.4rem) / 2)} .steps{grid-template-columns:repeat(2,1fr);row-gap:2.2rem} .steps::before{display:none} .divisions,.about,.contact{grid-template-columns:1fr} .footer__grid{grid-template-columns:1fr 1fr} } @media (max-width:900px){ .navtoggle{display:block} .nav{position:fixed;inset:0 0 0 auto;width:min(300px,84vw);background:#fff; flex-direction:column;align-items:stretch;gap:0; /* --header-bottom is measured in main.js; the fallback covers a no-JS load */ padding:calc(var(--header-bottom,112px) + .75rem) 1.4rem 2rem; box-shadow:-10px 0 40px rgba(10,22,48,.2);transform:translateX(100%); z-index:110;overflow-y:auto; /* visibility:hidden keeps the closed drawer's links out of the tab order; delaying it by the slide duration lets the close animation still play. */ visibility:hidden;transition:transform var(--t),visibility 0s linear .22s} .nav.is-open{transform:translateX(0);visibility:visible; transition:transform var(--t),visibility 0s} .nav a{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:1rem} .nav a::after{display:none} .nav__cta{margin-top:1.2rem} .navtoggle{position:relative;z-index:120} body.nav-open{overflow:hidden} .hero__in{grid-template-columns:1fr;text-align:center} .hero h1{align-items:center} .hero__lead{margin-inline:auto} .hero__cta,.hero__ticks{justify-content:center} /* a shorter ribbon here keeps the tick list clear of the tricolour and cuts the block of gold that used to sit between it and the stats */ .hero__ribbon{height:180px} .hero__ticks{font-size:.92rem;gap:.55rem 1.3rem} .hero__seal{order:-1} /* the circle shrank but its contents did not, so the caption ran into the ring; scale the mark and type down with it */ .seal{width:190px;height:190px;padding:0 14px} .seal__mark{height:62px;margin-bottom:.3rem} .seal__top,.seal__bot{font-size:.6rem;letter-spacing:.08em} } /* Topbar: drop the tagline, then the owners' names, keeping the numbers tappable */ @media (max-width:900px){ .topbar__tag{display:none} .topbar__in{justify-content:center} } @media (max-width:620px){ .topbar{font-size:.78rem} .topbar__who{display:none} .topbar__contacts{gap:.3rem 1.1rem;justify-content:center} } @media (max-width:768px){ .stats__grid{grid-template-columns:1fr 1fr;gap:1.4rem} .form__row{grid-template-columns:1fr;gap:0} .map iframe{height:260px} } @media (max-width:640px){ body{padding-bottom:62px} .actionbar{display:flex} /* lift it clear of the fixed Call/WhatsApp/Enquire bar */ .totop{right:14px;bottom:74px;width:42px;height:42px} .cards{grid-template-columns:1fr} .quotes>.quote{flex-basis:100%} .pillars{grid-template-columns:1fr 1fr} .footer__grid{grid-template-columns:1fr;gap:1.6rem} .division{flex-direction:column;align-items:center;text-align:center} /* the base rule pins the logo left beside the text; once stacked it must override itself back to centre, or align-items:center has no effect on it */ .division__mark{width:150px;align-self:center} .division .ticklist li{text-align:left} .form__actions .btn{min-width:100%} .modal{width:100vw;max-width:100vw;height:100%;max-height:100%;border-radius:0} } /* ============================================================ 9. Motion — scroll reveals, progress, icon play, journey rail Every effect here is additive: with JS off or reduced motion on, the page renders exactly as it did before (see section 10). ============================================================ */ /* ---------- Scroll reveal ---------- */ .reveal{opacity:0;transform:translateY(20px); transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); transition-delay:calc(var(--d,0) * 70ms)} .reveal.is-in{opacity:1;transform:none} /* ---------- Scroll progress, riding the sticky header ---------- */ .header__progress{position:absolute;left:0;right:0;bottom:-1px;height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-light)); transform:scaleX(var(--p,0));transform-origin:left; transition:transform .08s linear} /* ---------- Rotating hero verb ---------- */ .hero__rotate{font-family:var(--font-head);font-weight:600;font-size:1.05rem; color:rgba(255,255,255,.9);margin-bottom:.6rem} /* sized to the longest word so the rest of the line does not jitter */ .rotator{display:inline-block;min-width:6ch;text-align:left} .rotator b{display:inline-block;color:var(--gold-light);font-weight:800; transition:opacity .28s ease,transform .28s ease} .rotator.is-out b{opacity:0;transform:translateY(-8px)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- Service card: pointer tilt + icon play ---------- */ .cards{perspective:1100px} .card{transform:translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d;will-change:transform} .card:hover{transform:translateY(-5px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))} /* These play once and return to rest. They used to be static transforms, which left the icon sitting shifted and tilted for as long as the pointer was over the card — it read as misaligned rather than animated. */ @keyframes ico-fly{ /* climbs straight up, returns from below */ 0%{transform:none;opacity:1} 40%{transform:translateY(-24px);opacity:0} 41%{transform:translateY(24px);opacity:0} 100%{transform:none;opacity:1} } @keyframes ico-drive{ /* drives out right, re-enters from left */ 0%{transform:none;opacity:1} 45%{transform:translateX(22px);opacity:0} 46%{transform:translateX(-22px);opacity:0} 100%{transform:none;opacity:1} } @keyframes ico-toss{ 0%,100%{transform:none} 35%{transform:translateY(-8px) rotate(-9deg)} 70%{transform:translateY(0) rotate(3deg)} } @keyframes ico-pop{ 0%,100%{transform:none} 40%{transform:scale(1.18)} 72%{transform:scale(.96)} } @keyframes ico-push{ /* pulls back, then shoves forward */ 0%,100%{transform:none} 25%{transform:translateX(-5px) rotate(-4deg)} 60%{transform:translateX(9px) rotate(3deg)} 85%{transform:translateX(-1px)} } @keyframes ico-shake{ 0%,100%{transform:none} 20%{transform:rotate(-8deg)} 50%{transform:rotate(7deg)} 80%{transform:rotate(-3deg)} } .card[data-anim="plane"]:hover .card__icon svg{animation:ico-fly .85s ease-in-out} .card[data-anim="cap"]:hover .card__icon svg{animation:ico-toss .7s ease} .card[data-anim="chat"]:hover .card__icon svg{animation:ico-pop .5s ease} .card[data-anim="cart"]:hover .card__icon svg{animation:ico-push .6s ease} .card[data-anim="shake"]:hover .card__icon svg{animation:ico-shake .6s ease} .card[data-anim="truck"]:hover .card__icon svg{animation:ico-drive .85s ease-in-out} /* ---------- Process line drawing itself ---------- */ .js .steps::before{transform:scaleX(0);transform-origin:left; transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .15s} .js .steps.is-in::before{transform:scaleX(1)} .js .steps .step__num{transform:scale(.4);opacity:0; transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s ease; transition-delay:calc(var(--d,0) * 140ms + .3s)} .js .steps.is-in .step__num{transform:scale(1);opacity:1} /* ---------- Journey rail ---------- */ /* Hidden by default; main.js only switches it on when there is margin beside the content to hold it, and never under reduced motion. */ .rail{display:none;position:fixed;top:0;bottom:0;left:34px;width:64px; z-index:60;pointer-events:none} .rail.is-on{display:block} .rail__svg{width:100%;height:100%;overflow:visible} /* gold at low alpha reads on both the navy hero and the white sections */ .rail__track{stroke:rgba(201,162,39,.32);stroke-width:2;stroke-dasharray:2 7; stroke-linecap:round} .rail__drawn{stroke:url(#railGrad);stroke-width:2.5;stroke-linecap:round} .rail__plane{color:var(--gold);filter:drop-shadow(0 2px 4px rgba(21,44,91,.35))} /* The flip lives on an inner group so it can transition on its own; the outer group is repositioned every scroll frame and must not be transitioned or the plane would lag behind the path. fill-box pins the pivot to the plane centre. */ .rail__flip{transform-box:fill-box;transform-origin:50% 50%; transition:transform .32s cubic-bezier(.34,1.4,.64,1)} .rail__flip.is-rev{transform:rotate(180deg)} /* ---------- 10. Reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important} .btn:hover,.card:hover,.pillar:hover{transform:none} /* nothing may start hidden or part-drawn when motion is off */ .reveal{opacity:1;transform:none} .totop{transition:none} .quotes{scroll-behavior:auto} .steps::before{transform:scaleX(1)} .steps .step__num{transform:scale(1);opacity:1} .card{transform:none} .rail{display:none!important} }