/* ============================================================ MD Security & Patrol — Design System Brand: navy #041a4f · red #e8292b · steel #677f95 · gold #d68400 ============================================================ */ /* ---------- 1. Tokens ---------- */ :root{ /* Brand */ --navy-900:#03102f; --navy-800:#041a4f; --navy-700:#0a2668; --navy-600:#123382; --red-600:#c81e21; --red-500:#e8292b; --red-400:#f2494b; --gold-500:#d68400; --steel-500:#677f95; /* Neutrals */ --ink:#0c1322; --ink-2:#1f2a3d; --slate:#55637a; --slate-2:#7d8aa0; --line:#e3e8f0; --surface:#ffffff; --surface-2:#f6f8fc; --surface-3:#eef2f9; /* Dark surfaces */ --dark:#050d21; --dark-2:#0a1733; --dark-line:rgba(255,255,255,.12); --on-dark:#eaf0fb; --on-dark-mute:#a8b6d0; /* Type */ --font-display:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif; --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; /* Space & shape */ --radius:14px; --radius-lg:22px; --radius-sm:9px; --shadow-sm:0 1px 2px rgba(4,26,79,.06),0 2px 6px rgba(4,26,79,.05); --shadow:0 10px 30px -12px rgba(4,26,79,.22),0 3px 10px -4px rgba(4,26,79,.10); --shadow-lg:0 30px 70px -28px rgba(4,26,79,.42),0 10px 24px -12px rgba(4,26,79,.18); --maxw:1200px; --gutter:clamp(1.15rem,4vw,2.5rem); --header-h:78px; --ease:cubic-bezier(.22,.72,.28,1); } /* ---------- 2. Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{margin:0} ul[class],ol[class]{list-style:none;padding:0} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)} body{ font-family:var(--font-body); font-size:1rem;line-height:1.65;color:var(--slate); background:var(--surface); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* `hidden` would turn into a scroll container, which breaks position:sticky repainting. `clip` clips without scrolling. */ overflow-x:hidden; } @supports (overflow-x: clip){ body{overflow-x:clip} } img,svg,video{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} :focus-visible{outline:3px solid var(--red-500);outline-offset:3px;border-radius:4px} ::selection{background:var(--red-500);color:#fff} /* ---------- 3. Typography ---------- */ h1,h2,h3,h4,h5,.display{ font-family:var(--font-display); color:var(--navy-800); line-height:1.12; letter-spacing:-.022em; font-weight:800; text-wrap:balance; } h1,.h1{font-size:clamp(2.35rem,1.35rem + 3.9vw,4.15rem)} h2,.h2{font-size:clamp(1.85rem,1.15rem + 2.55vw,3rem)} h3,.h3{font-size:clamp(1.28rem,1.06rem + .82vw,1.66rem)} h4,.h4{font-size:1.12rem;letter-spacing:-.012em} p{text-wrap:pretty} .lead{font-size:clamp(1.05rem,.98rem + .34vw,1.24rem);line-height:1.7;color:var(--slate)} strong{color:var(--ink);font-weight:650} .eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-family:var(--font-display); font-size:.775rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--red-500);margin-bottom:1rem; } .eyebrow::before{ content:"";width:26px;height:2px;background:var(--red-500);border-radius:2px;flex:none; } .eyebrow--center{justify-content:center} /* Dark-context typography */ .on-dark,.on-dark p,.on-dark li{color:var(--on-dark-mute)} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark .display{color:#fff} .on-dark strong{color:#fff} .on-dark .lead{color:var(--on-dark-mute)} /* ---------- 4. Layout ---------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .wrap--wide{max-width:1340px} .wrap--narrow{max-width:860px} .section{padding-block:clamp(3.75rem,2rem + 7vw,7rem)} .section--tight{padding-block:clamp(2.75rem,1.5rem + 5vw,5rem)} .section--alt{background:var(--surface-2)} .section--dark{background:var(--dark);position:relative;overflow:hidden} .section--dark::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(900px 480px at 12% -10%,rgba(18,51,130,.55),transparent 60%), radial-gradient(700px 420px at 92% 108%,rgba(232,41,43,.20),transparent 62%); } .section--dark > *{position:relative;z-index:1} .stack > * + *{margin-top:1.1rem} .grid{display:grid;gap:clamp(1.15rem,2.4vw,1.9rem)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} .center{text-align:center} .section-head{max-width:720px;margin-bottom:clamp(2.1rem,1.2rem + 2.4vw,3.25rem)} .section-head--center{margin-inline:auto;text-align:center} .section-head p{margin-top:1rem} /* ---------- 5. Buttons ---------- */ .btn{ --btn-bg:var(--red-500);--btn-fg:#fff;--btn-bd:var(--red-500); display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:var(--font-display);font-weight:750;font-size:.95rem;letter-spacing:.005em; padding:.92rem 1.65rem;border-radius:var(--radius-sm); background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd); transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s; box-shadow:0 8px 20px -10px rgba(232,41,43,.75); cursor:pointer;white-space:nowrap; } .btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(232,41,43,.85);--btn-bg:var(--red-600);--btn-bd:var(--red-600)} .btn:active{transform:translateY(0)} .btn svg{flex:none;width:1.05em;height:1.05em} .btn--navy{--btn-bg:var(--navy-800);--btn-bd:var(--navy-800);box-shadow:0 8px 20px -10px rgba(4,26,79,.6)} .btn--navy:hover{--btn-bg:var(--navy-700);--btn-bd:var(--navy-700);box-shadow:0 14px 28px -12px rgba(4,26,79,.7)} .btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy-800);--btn-bd:var(--line);box-shadow:none} .btn--ghost:hover{--btn-bg:var(--surface-2);--btn-bd:var(--navy-800);box-shadow:var(--shadow-sm)} .btn--outline-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.42);box-shadow:none;backdrop-filter:blur(6px)} .btn--outline-light:hover{--btn-bg:rgba(255,255,255,.12);--btn-bd:#fff;box-shadow:none} .btn--lg{padding:1.08rem 2rem;font-size:1.01rem} .btn--block{width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center} /* Text link with arrow */ .link-arrow{ display:inline-flex;align-items:center;gap:.45rem; font-family:var(--font-display);font-weight:750;font-size:.92rem; color:var(--red-500);transition:gap .25s var(--ease),color .2s; } .link-arrow svg{width:1em;height:1em;transition:transform .25s var(--ease)} .link-arrow:hover{gap:.7rem;color:var(--red-600)} .link-arrow:hover svg{transform:translateX(2px)} /* ---------- 6. Header ---------- */ .skip{ position:absolute;left:1rem;top:-100px;z-index:200; background:var(--navy-800);color:#fff;padding:.8rem 1.25rem;border-radius:0 0 10px 10px; font-weight:700;transition:top .2s; } .skip:focus{top:0} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .topbar{ background:var(--navy-900);color:var(--on-dark-mute); font-size:.83rem;border-bottom:1px solid rgba(255,255,255,.08); } .topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;flex-wrap:wrap} .topbar__list{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap} .topbar__item,.topbar__item > a{display:inline-flex;align-items:center;gap:.5rem} .topbar__item svg{width:14px;height:14px;color:var(--red-400);flex:none} .topbar__item span{white-space:nowrap} .topbar a:hover{color:#fff} .topbar__badge{ display:inline-flex;align-items:center;gap:.45rem; color:#fff;font-weight:650;letter-spacing:.02em; } .topbar__dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.22);flex:none} .site-header{ position:sticky;top:0;z-index:100; /* Opaque on purpose. A translucent bar + backdrop-filter leaves stale blurred pixels behind when you scroll back up, which reads as the section below "overlapping" the header. */ background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .3s var(--ease); } .site-header.is-stuck{box-shadow:0 8px 28px -18px rgba(4,26,79,.5)} .nav{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:var(--header-h)} .brand{display:flex;align-items:center;flex:none} .brand img{height:44px;width:auto} .nav__menu{display:flex;align-items:center;gap:.28rem;margin-left:auto} .nav__link{ position:relative;display:block;padding:.62rem .95rem;border-radius:8px; font-family:var(--font-display);font-weight:700;font-size:.9rem; letter-spacing:.04em;text-transform:uppercase;color:var(--navy-800); transition:color .2s,background .2s; } .nav__link::after{ content:"";position:absolute;left:.95rem;right:.95rem;bottom:.34rem;height:2px; background:var(--red-500);border-radius:2px;transform:scaleX(0);transform-origin:left; transition:transform .28s var(--ease); } .nav__link:hover{color:var(--red-500)} .nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)} .nav__link[aria-current="page"]{color:var(--red-500)} .nav__cta{margin-left:.85rem} .nav__toggle{ display:none;width:46px;height:46px;border-radius:10px;border:1.5px solid var(--line); align-items:center;justify-content:center;color:var(--navy-800);background:#fff; } .nav__toggle span{position:relative;display:block;width:19px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),background .15s} .nav__toggle span::before,.nav__toggle span::after{ content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor;border-radius:2px; transition:transform .3s var(--ease),top .2s .12s,bottom .2s .12s; } .nav__toggle span::before{top:-6px} .nav__toggle span::after{bottom:-6px} .nav__toggle[aria-expanded="true"] span{background:transparent} .nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);transition:top .2s,transform .3s .15s var(--ease)} .nav__toggle[aria-expanded="true"] span::after{bottom:0;transform:rotate(-45deg);transition:bottom .2s,transform .3s .15s var(--ease)} /* ---------- 7. Hero ---------- */ .hero{position:relative;isolation:isolate;background:var(--dark);color:#fff;overflow:hidden} .hero__media{position:absolute;inset:0;z-index:-2} .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 28%} .hero::after{ content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(100deg,rgba(3,16,47,.96) 0%,rgba(4,26,79,.88) 42%,rgba(4,26,79,.52) 72%,rgba(3,16,47,.68) 100%), linear-gradient(to top,rgba(3,16,47,.95) 2%,transparent 42%); } .hero__inner{padding-block:clamp(4rem,2.2rem + 9vw,8.5rem);position:relative} .hero__content{max-width:760px} .hero__eyebrow{ display:inline-flex;align-items:center;gap:.65rem; padding:.5rem 1rem .5rem .6rem;border-radius:999px; background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18); font-size:.79rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff; backdrop-filter:blur(8px);margin-bottom:1.6rem; } .hero__eyebrow b{ background:var(--red-500);color:#fff;padding:.22rem .6rem;border-radius:999px; font-size:.7rem;letter-spacing:.1em; } .hero h1{color:#fff;margin-bottom:1.35rem} .hero h1 .accent{ color:var(--red-400); background:linear-gradient(120deg,var(--red-400),#ff8a5c); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .hero__lead{font-size:clamp(1.05rem,.99rem + .42vw,1.25rem);color:#cdd9f0;max-width:640px;margin-bottom:2.1rem} .hero .btn-row{margin-bottom:2.6rem} .hero__assure{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.14)} .hero__assure li{display:inline-flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:600;color:#dbe5f7} .hero__assure svg{width:17px;height:17px;color:#3ddc84;flex:none} /* Floating stat card */ .hero__card{ position:absolute;right:var(--gutter);bottom:-46px;z-index:3; width:min(330px,88vw);padding:1.5rem 1.6rem;border-radius:var(--radius-lg); background:rgba(255,255,255,.97);backdrop-filter:blur(10px); box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.7); } .hero__card .h4{color:var(--navy-800);margin-bottom:.15rem} .hero__card p{font-size:.86rem;color:var(--slate-2);margin-bottom:1.1rem} .hero__card-row{display:flex;align-items:center;gap:.85rem;margin-bottom:1.05rem} .hero__card-icon{ width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center; background:linear-gradient(140deg,var(--red-500),var(--red-600));color:#fff; box-shadow:0 8px 18px -8px rgba(232,41,43,.8); } .hero__card-icon svg{width:20px;height:20px} .hero__card .btn{width:100%} .hero__card small{display:block;margin-top:.7rem;font-size:.74rem;color:var(--slate-2);text-align:center} /* ---------- 8. Page hero (inner pages) ---------- */ .page-hero{position:relative;isolation:isolate;background:var(--dark);color:#fff;overflow:hidden} .page-hero__media{position:absolute;inset:0;z-index:-2} .page-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 30%} .page-hero::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(95deg,rgba(3,16,47,.95),rgba(4,26,79,.82) 55%,rgba(4,26,79,.6)); } .page-hero__inner{padding-block:clamp(3.1rem,2rem + 5.5vw,5.6rem)} .page-hero h1{color:#fff;margin-bottom:.9rem} .page-hero p{color:#cdd9f0;max-width:620px;font-size:1.08rem} .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.85rem;color:#a8b6d0;margin-bottom:1.1rem} .crumbs a{color:#a8b6d0;transition:color .2s} .crumbs a:hover{color:#fff} .crumbs span[aria-current]{color:var(--red-400);font-weight:650} .crumbs svg{width:13px;height:13px;opacity:.6} /* ---------- 9. Trust / brand strip ---------- */ .trust{background:var(--surface-2);border-block:1px solid var(--line);padding-block:2.6rem} .trust__label{text-align:center;font-size:.86rem;color:var(--slate-2);margin-bottom:.35rem;font-weight:600} .trust__sub{text-align:center;font-size:.8rem;color:var(--slate-2);opacity:.85;margin-bottom:1.9rem} .trust__grid{ display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;align-items:center; } .trust__item{ text-align:center;font-family:var(--font-display);font-weight:800; font-size:clamp(.86rem,.72rem + .42vw,1.08rem); letter-spacing:.02em;color:var(--navy-800);opacity:.52; padding:.7rem .4rem;border-radius:10px; transition:opacity .3s var(--ease),transform .3s var(--ease),background .3s; } .trust__item:hover{opacity:1;transform:translateY(-2px);background:#fff;box-shadow:var(--shadow-sm)} /* ---------- 10. Stats ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem)} .stat{position:relative;padding-left:1.5rem} .stat::before{content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;width:3px;border-radius:3px;background:linear-gradient(var(--red-500),rgba(232,41,43,.15))} .stat__num{ font-family:var(--font-display);font-weight:800;line-height:1; font-size:clamp(2.1rem,1.4rem + 2.6vw,3.1rem);color:var(--navy-800); letter-spacing:-.03em;display:flex;align-items:baseline;gap:.05em; } .stat__num .suffix{color:var(--red-500)} .stat__label{margin-top:.45rem;font-size:.9rem;font-weight:600;color:var(--slate)} .on-dark .stat__num{color:#fff} .on-dark .stat__label{color:var(--on-dark-mute)} /* ---------- 11. Media + text split ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1rem + 4vw,4.25rem);align-items:center} .split--reverse .split__media{order:2} .split__media{position:relative} .split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/3.2;object-fit:cover} .split__media--stack{padding-bottom:3.5rem;padding-right:3.5rem} .split__media--stack .img-main{aspect-ratio:4/3.4} .split__media--stack .img-sub{ position:absolute;right:0;bottom:0;width:52%;border-radius:var(--radius); border:6px solid #fff;box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover; } .split__badge{ position:absolute;left:-14px;top:26px;z-index:2; display:flex;align-items:center;gap:.8rem; background:#fff;padding:.9rem 1.2rem;border-radius:14px;box-shadow:var(--shadow-lg); } .split__badge img{width:44px;height:44px;object-fit:contain;border-radius:0;box-shadow:none;aspect-ratio:auto} .split__badge b{display:block;font-family:var(--font-display);font-size:.92rem;color:var(--navy-800);line-height:1.2} .split__badge span{font-size:.76rem;color:var(--slate-2)} /* ---------- 12. Cards ---------- */ .card{ position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); overflow:hidden;display:flex;flex-direction:column; transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s; box-shadow:var(--shadow-sm); } .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent} .card__media{position:relative;aspect-ratio:16/10.5;overflow:hidden;background:var(--navy-900)} .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),opacity .4s} .card:hover .card__media img{transform:scale(1.07)} .card__media::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(3,16,47,.78),rgba(3,16,47,.12) 55%,transparent); } .card__icon{ position:absolute;left:1.25rem;bottom:1.25rem;z-index:2; width:48px;height:48px;border-radius:13px;display:grid;place-items:center; background:linear-gradient(140deg,var(--red-500),var(--red-600));color:#fff; box-shadow:0 10px 22px -10px rgba(232,41,43,.9); transition:transform .35s var(--ease); } .card:hover .card__icon{transform:translateY(-3px) scale(1.05)} .card__icon svg{width:22px;height:22px} .card__body{padding:1.5rem 1.5rem 1.65rem;display:flex;flex-direction:column;flex:1;gap:.7rem} .card__body h3{font-size:1.2rem} .card__body p{font-size:.94rem;line-height:1.62} .card__body .link-arrow{margin-top:auto;padding-top:.35rem} /* Feature card (why choose us) */ .feature{ background:rgba(255,255,255,.045);border:1px solid var(--dark-line); border-radius:var(--radius-lg);padding:1.85rem 1.6rem; transition:transform .35s var(--ease),background .35s,border-color .35s; backdrop-filter:blur(6px); } .feature:hover{transform:translateY(-5px);background:rgba(255,255,255,.085);border-color:rgba(232,41,43,.45)} .feature__icon{ width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.15rem; background:linear-gradient(140deg,rgba(232,41,43,.22),rgba(232,41,43,.06)); border:1px solid rgba(232,41,43,.35);color:var(--red-400); } .feature__icon svg{width:24px;height:24px} .feature h3{font-size:1.1rem;color:#fff;margin-bottom:.55rem} .feature p{font-size:.92rem;line-height:1.62;color:var(--on-dark-mute)} /* Value / pillar card (light) */ .pillar{ background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:1.9rem 1.7rem;box-shadow:var(--shadow-sm); transition:transform .35s var(--ease),box-shadow .35s var(--ease); position:relative;overflow:hidden; } .pillar::before{ content:"";position:absolute;left:0;top:0;height:3px;width:100%; background:linear-gradient(90deg,var(--red-500),var(--navy-600)); transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease); } .pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .pillar:hover::before{transform:scaleX(1)} .pillar__icon{ width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.1rem; background:linear-gradient(140deg,var(--navy-800),var(--navy-600));color:#fff; box-shadow:0 10px 22px -12px rgba(4,26,79,.85); } .pillar__icon svg{width:23px;height:23px} .pillar h3{font-size:1.12rem;margin-bottom:.55rem} .pillar p{font-size:.94rem;line-height:1.62} /* ---------- 13. Service detail rows ---------- */ .svc{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(1.8rem,1rem + 3.5vw,3.75rem);align-items:center; padding-block:clamp(2.25rem,1.4rem + 3vw,3.5rem); } .svc + .svc{border-top:1px solid var(--line)} .svc:nth-child(even) .svc__media{order:2} .svc__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;aspect-ratio:4/3;object-fit:cover} .svc__media{position:relative} .svc__num{ position:absolute;left:1.1rem;top:1.1rem; font-family:var(--font-display);font-weight:800;font-size:.8rem;letter-spacing:.1em; background:rgba(3,16,47,.72);color:#fff;padding:.42rem .8rem;border-radius:999px; backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2); } .svc h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);margin-bottom:.9rem} .svc p{margin-bottom:1.35rem} .checks{display:grid;gap:.8rem} .checks li{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem;color:var(--ink-2);line-height:1.55} .checks svg{width:20px;height:20px;flex:none;margin-top:.14rem;color:var(--red-500)} .on-dark .checks li{color:var(--on-dark)} /* ---------- 13b. Process steps ---------- */ .steps{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.15rem,2.4vw,2rem);counter-reset:step;position:relative; } .step{ position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:2.4rem 1.7rem 1.9rem;box-shadow:var(--shadow-sm); transition:transform .35s var(--ease),box-shadow .35s var(--ease); } .step:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .step__num{ position:absolute;top:1.35rem;right:1.5rem; font-family:var(--font-display);font-weight:800;font-size:2.6rem;line-height:1; color:var(--navy-800);opacity:.09;letter-spacing:-.04em; } .step__icon{ width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:1.15rem; background:linear-gradient(140deg,var(--red-500),var(--red-600));color:#fff; box-shadow:0 10px 22px -10px rgba(232,41,43,.85); } .step__icon svg{width:23px;height:23px} .step h3{font-size:1.14rem;margin-bottom:.55rem} .step p{font-size:.94rem;line-height:1.62} /* connector line between steps */ .step:not(:last-child)::after{ content:"";position:absolute;top:50%;right:calc(-1 * clamp(1.15rem,2.4vw,2rem)); width:clamp(1.15rem,2.4vw,2rem);height:2px; background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 11px); } /* ---------- 14. Accordion (FAQ) ---------- */ .faq{display:grid;gap:.85rem} .faq__item{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;transition:box-shadow .3s var(--ease),border-color .3s; } .faq__item.is-open{box-shadow:var(--shadow);border-color:rgba(232,41,43,.35)} .faq__q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.25rem; padding:1.2rem 1.4rem;text-align:left; font-family:var(--font-display);font-weight:750;font-size:1.02rem;color:var(--navy-800); line-height:1.4;transition:color .2s; } .faq__q:hover{color:var(--red-500)} .faq__sign{ width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center; background:var(--surface-3);color:var(--navy-800); transition:background .3s,color .3s,transform .35s var(--ease); } .faq__item.is-open .faq__sign{background:var(--red-500);color:#fff;transform:rotate(180deg)} .faq__sign svg{width:16px;height:16px} .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)} .faq__item.is-open .faq__a{grid-template-rows:1fr} .faq__a > div{overflow:hidden} .faq__a p{padding:0 1.4rem 1.35rem;font-size:.96rem;line-height:1.7;max-width:70ch} /* ---------- 15. Contact ---------- */ .contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.75rem,1rem + 3vw,3.25rem);align-items:start} .info-card{ display:flex;gap:1.05rem;padding:1.4rem 1.35rem;background:#fff; border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .info-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .info-card__icon{ width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center; background:linear-gradient(140deg,var(--navy-800),var(--navy-600));color:#fff; } .info-card__icon svg{width:21px;height:21px} .info-card > div{min-width:0} .info-card h3{font-size:1rem;margin-bottom:.3rem} .info-card p,.info-card a{font-size:.94rem;line-height:1.55;color:var(--slate);overflow-wrap:anywhere} .info-card a:hover{color:var(--red-500)} .info-card b{display:block;font-family:var(--font-display);color:var(--navy-800);font-size:1.05rem} .form-panel{ background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(1.5rem,1rem + 2vw,2.5rem);box-shadow:var(--shadow); } .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .field{display:flex;flex-direction:column;gap:.42rem} .field--full{grid-column:1/-1} .field label{font-family:var(--font-display);font-size:.83rem;font-weight:700;color:var(--navy-800);letter-spacing:.02em} .field label .req{color:var(--red-500)} .field input,.field textarea,.field select{ width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:10px; background:var(--surface-2);font-size:.95rem;color:var(--ink); transition:border-color .2s,background .2s,box-shadow .2s; } .field textarea{resize:vertical;min-height:140px} .field input::placeholder,.field textarea::placeholder{color:var(--slate-2);opacity:.75} .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--navy-600);background:#fff; box-shadow:0 0 0 4px rgba(18,51,130,.1); } .field .err{font-size:.78rem;color:var(--red-600);font-weight:600;min-height:1em} .field.has-error input,.field.has-error textarea{border-color:var(--red-500);background:#fff5f5} .form-note{font-size:.8rem;color:var(--slate-2);margin-top:1rem;display:flex;gap:.5rem;align-items:flex-start} .form-note svg{width:15px;height:15px;flex:none;margin-top:.18rem;color:var(--steel-500)} .form-status{ margin-top:1rem;padding:.9rem 1.1rem;border-radius:10px;font-size:.9rem;font-weight:600; background:#e9f8ef;color:#12683c;border:1px solid #b8e6cd;display:none; } .form-status.is-visible{display:block} .form-status.is-error{background:#fff4f4;color:#a4191c;border-color:#f3c9ca} .map-embed{ border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line); box-shadow:var(--shadow);line-height:0;background:var(--surface-3); } .map-embed iframe{width:100%;height:400px;border:0;display:block} /* ---------- 16. CTA band ---------- */ .cta-band{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-800);color:#fff} .cta-band__media{position:absolute;inset:0;z-index:-2} .cta-band__media img{width:100%;height:100%;object-fit:cover} .cta-band::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(95deg,rgba(4,26,79,.96),rgba(3,16,47,.82) 60%,rgba(200,30,33,.55)); } .cta-band__inner{ padding-block:clamp(3rem,2rem + 4vw,4.75rem); display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap; } .cta-band h2{color:#fff;font-size:clamp(1.65rem,1.2rem + 1.9vw,2.5rem);margin-bottom:.6rem;max-width:22ch} .cta-band p{color:#cdd9f0;max-width:50ch} /* ---------- 17. Footer ---------- */ .site-footer{position:relative;background:var(--dark);color:var(--on-dark-mute);overflow:hidden} .site-footer::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(760px 400px at 8% 0%,rgba(18,51,130,.5),transparent 62%), radial-gradient(600px 340px at 96% 100%,rgba(232,41,43,.15),transparent 62%); } .site-footer > *{position:relative;z-index:1} .footer__top{ display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:clamp(1.75rem,1rem + 3vw,3rem); padding-block:clamp(3rem,2rem + 3.5vw,4.5rem); } .footer__brand img{height:52px;width:auto;margin-bottom:1.15rem;background:#fff;padding:.55rem .8rem;border-radius:10px} .footer__brand p{font-size:.92rem;line-height:1.68;max-width:38ch;margin-bottom:1.4rem} .footer h4{ color:#fff;font-size:.86rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.15rem; } .footer__links{display:grid;gap:.7rem} .footer__links a{font-size:.93rem;color:var(--on-dark-mute);transition:color .2s,padding-left .25s var(--ease);display:inline-block} .footer__links a:hover{color:#fff;padding-left:5px} .footer__contact{display:grid;gap:.85rem;margin-bottom:1.5rem} .footer__contact li{display:flex;gap:.7rem;font-size:.92rem;line-height:1.5;overflow-wrap:anywhere} .footer__contact svg{width:17px;height:17px;flex:none;margin-top:.2rem;color:var(--red-400)} .footer__contact a:hover{color:#fff} .newsletter{display:flex;gap:.55rem;flex-wrap:wrap} .newsletter input{ flex:1 1 195px;min-width:0;padding:.8rem 1rem;border-radius:9px;font-size:.9rem; background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);color:#fff; transition:border-color .2s,background .2s; } .newsletter input::placeholder{color:var(--on-dark-mute)} .newsletter input:focus{outline:none;border-color:var(--red-400);background:rgba(255,255,255,.11)} .newsletter .btn{padding-inline:1.4rem;flex:1 1 auto} .socials{display:flex;gap:.6rem;margin-top:1.4rem} .socials a{ width:40px;height:40px;border-radius:11px;display:grid;place-items:center; background:rgba(255,255,255,.07);border:1px solid var(--dark-line);color:var(--on-dark-mute); transition:background .25s,color .25s,transform .25s var(--ease),border-color .25s; } .socials a:hover{background:var(--red-500);color:#fff;transform:translateY(-3px);border-color:var(--red-500)} .socials svg{width:17px;height:17px} .footer__bottom{ border-top:1px solid var(--dark-line);padding-block:1.5rem; display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-size:.85rem; } .footer__legal{display:flex;gap:1.4rem;flex-wrap:wrap} .footer__legal a:hover{color:#fff} /* ---------- 17b. Long-form legal prose ---------- */ .prose{max-width:76ch} .prose h2{font-size:clamp(1.35rem,1.15rem + .75vw,1.72rem);margin-top:2.6rem;margin-bottom:.85rem} .prose h2:first-child{margin-top:0} .prose h3{font-size:1.08rem;margin-top:1.7rem;margin-bottom:.5rem} .prose p{margin-bottom:1rem} .prose ul{margin:0 0 1.15rem;padding-left:0;list-style:none;display:grid;gap:.6rem} .prose ul li{position:relative;padding-left:1.6rem;font-size:.97rem;line-height:1.65} .prose ul li::before{ content:"";position:absolute;left:.35rem;top:.62em;width:6px;height:6px;border-radius:50%; background:var(--red-500); } .prose a{color:var(--red-500);font-weight:600;text-decoration:underline;text-underline-offset:3px} .prose a:hover{color:var(--red-600)} .prose__meta{ display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;padding:1rem 1.25rem;margin-bottom:2.25rem; background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius); font-size:.88rem; } .prose__meta b{font-family:var(--font-display);color:var(--navy-800)} .legal-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(2rem,1rem + 3vw,3.5rem);align-items:start} .legal-toc{position:sticky;top:calc(var(--header-h) + 24px)} .legal-toc h2{font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);margin-bottom:.9rem} .legal-toc ol{list-style:none;padding:0;display:grid;gap:.15rem;counter-reset:toc} .legal-toc a{ display:block;padding:.5rem .7rem;border-radius:8px;font-size:.9rem;font-weight:600; color:var(--slate);border-left:2px solid var(--line);transition:all .2s; } .legal-toc a:hover{color:var(--navy-800);background:var(--surface-2);border-left-color:var(--red-500)} @media (max-width:900px){ .legal-layout{grid-template-columns:1fr} .legal-toc{position:static;padding-bottom:1.5rem;border-bottom:1px solid var(--line)} .legal-toc ol{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));display:grid} } /* ---------- 18. Back to top ---------- */ .to-top{ position:fixed;left:1.15rem;bottom:1.15rem;z-index:90; width:46px;height:46px;border-radius:13px;display:grid;place-items:center; background:var(--navy-800);color:#fff;box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .3s,visibility .3s,transform .3s var(--ease),background .2s; } .to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)} .to-top:hover{background:var(--red-500)} .to-top svg{width:19px;height:19px} /* ---------- 18c. Floating contact widget ---------- */ .chatw{ position:fixed;right:1.15rem;bottom:1.15rem;z-index:97; display:flex;flex-direction:column;align-items:flex-end;gap:.85rem; } .chatw__row{display:flex;align-items:center;gap:.7rem} /* --- the pulsing button --- */ .chatw__fab{ position:relative;isolation:isolate;flex:none; width:62px;height:62px;border-radius:50%; display:grid;place-items:center; background:linear-gradient(140deg,var(--red-500),var(--red-600));color:#fff; box-shadow:0 12px 26px -10px rgba(232,41,43,.85),0 3px 10px -4px rgba(4,26,79,.3); transition:transform .28s var(--ease),box-shadow .28s var(--ease); } .chatw__fab:hover{transform:scale(1.06)} .chatw__fab:active{transform:scale(.97)} .chatw__fab::before,.chatw__fab::after{ content:"";position:absolute;inset:0;border-radius:50%;z-index:-1; background:var(--red-500); animation:chatw-pulse 2.8s cubic-bezier(.25,.6,.35,1) infinite; } .chatw__fab::after{animation-delay:1.4s} @keyframes chatw-pulse{ 0% {transform:scale(1);opacity:.55} 70% {transform:scale(1.75);opacity:0} 100% {transform:scale(1.75);opacity:0} } .chatw__fab-ic{position:absolute;display:grid;place-items:center;transition:opacity .25s var(--ease),transform .35s var(--ease)} .chatw__fab-ic svg{width:27px;height:27px} .chatw__fab-ic--x{opacity:0;transform:rotate(-90deg) scale(.6)} .chatw.is-open .chatw__fab-ic--chat{opacity:0;transform:rotate(90deg) scale(.6)} .chatw.is-open .chatw__fab-ic--x{opacity:1;transform:none} .chatw.is-open .chatw__fab::before, .chatw.is-open .chatw__fab::after{animation:none;opacity:0} /* --- typing speech bubble --- */ .chatw__bubble{ position:relative;max-width:min(72vw,250px); padding:.62rem .95rem;border-radius:14px; background:#fff;border:1px solid var(--line); box-shadow:0 12px 28px -14px rgba(4,26,79,.45); font-family:var(--font-display);font-weight:700;font-size:.9rem; color:var(--navy-800);line-height:1.35; opacity:0;transform:translateX(8px) scale(.96);transform-origin:right center; transition:opacity .32s var(--ease),transform .32s var(--ease); pointer-events:none; } .chatw__bubble.is-shown{opacity:1;transform:none} .chatw__bubble::after{ content:"";position:absolute;right:-6px;top:50%;margin-top:-6px; width:12px;height:12px;background:#fff; border-right:1px solid var(--line);border-top:1px solid var(--line); transform:rotate(45deg);border-radius:2px; } .chatw__caret{ display:inline-block;width:2px;height:1em;margin-left:2px; background:var(--red-500);vertical-align:-.14em; animation:chatw-caret 1s steps(2,start) infinite; } @keyframes chatw-caret{0%,100%{opacity:1}50%{opacity:0}} .chatw.is-open .chatw__bubble{opacity:0;transform:translateX(8px) scale(.96)} /* --- the panel --- */ .chatw__panel{ width:min(84vw,318px);border-radius:18px;overflow:hidden;background:#fff; border:1px solid var(--line); box-shadow:0 28px 60px -22px rgba(4,26,79,.5),0 8px 20px -12px rgba(4,26,79,.25); transform-origin:bottom right; } .chatw__panel[hidden]{display:none} .chatw.is-open .chatw__panel{animation:chatw-in .32s var(--ease) both} @keyframes chatw-in{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}} .chatw__head{ display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem; background:linear-gradient(135deg,var(--navy-800),var(--navy-600));color:#fff; } .chatw__avatar{ width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center; background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25); } .chatw__avatar svg{width:20px;height:20px} .chatw__who{flex:1;min-width:0;line-height:1.3} .chatw__who b{display:block;font-family:var(--font-display);font-size:.94rem} .chatw__who span{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:#c7d4ee} .chatw__dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;flex:none;box-shadow:0 0 0 3px rgba(61,220,132,.25)} .chatw__close{ width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center; color:#fff;background:rgba(255,255,255,.12);transition:background .2s; } .chatw__close:hover{background:rgba(255,255,255,.26)} .chatw__close svg{width:15px;height:15px} .chatw__greeting{ margin:0;padding:1.05rem 1.1rem .35rem;font-size:.9rem;line-height:1.55;color:var(--slate); } .chatw__opt{ display:flex;align-items:center;gap:.85rem;margin:.6rem .8rem;padding:.85rem .95rem; border-radius:13px;border:1px solid var(--line);background:var(--surface-2); transition:transform .22s var(--ease),border-color .22s,background .22s,box-shadow .22s; } .chatw__opt:last-child{margin-bottom:.95rem} .chatw__opt:hover{transform:translateX(3px);background:#fff;border-color:var(--red-500);box-shadow:var(--shadow-sm)} .chatw__opt-icon{ width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;color:#fff; background:linear-gradient(140deg,var(--red-500),var(--red-600)); box-shadow:0 8px 16px -8px rgba(232,41,43,.8); } .chatw__opt--call .chatw__opt-icon{background:linear-gradient(140deg,var(--navy-800),var(--navy-600));box-shadow:0 8px 16px -8px rgba(4,26,79,.8)} .chatw__opt-icon svg{width:19px;height:19px} .chatw__opt-text{flex:1;min-width:0;line-height:1.3} .chatw__opt-text b{display:block;font-family:var(--font-display);font-size:.98rem;color:var(--navy-800)} .chatw__opt-text small{font-size:.8rem;color:var(--slate-2)} .chatw__opt > svg{width:15px;height:15px;color:var(--slate-2);flex:none} @media (max-width:560px){ .chatw__row{flex-direction:column;align-items:flex-end;gap:.6rem} .chatw__bubble{transform-origin:bottom right} .chatw__bubble::after{right:20px;top:auto;bottom:-6px;margin-top:0;transform:rotate(135deg)} .chatw__fab{width:56px;height:56px} .chatw__fab-ic svg{width:24px;height:24px} } @media (prefers-reduced-motion:reduce){ .chatw__fab::before,.chatw__fab::after{animation:none;opacity:0} .chatw__caret{animation:none} } /* ---------- 19. Scroll reveal ---------- */ [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} [data-reveal].is-in{opacity:1;transform:none} [data-reveal][data-delay="1"]{transition-delay:.09s} [data-reveal][data-delay="2"]{transition-delay:.18s} [data-reveal][data-delay="3"]{transition-delay:.27s} [data-reveal][data-delay="4"]{transition-delay:.36s} [data-reveal][data-delay="5"]{transition-delay:.45s} /* ---------- 20. Responsive ---------- */ @media (max-width:1080px){ .footer__top{grid-template-columns:1.4fr 1fr 1.4fr;} .footer__col--news{grid-column:1/-1} .hero__card{position:static;width:100%;max-width:420px;margin-top:2.5rem;bottom:auto} } @media (max-width:980px){ :root{--header-h:70px} /* Anchored to the header itself, not to a hardcoded viewport offset — the header sits lower while the topbar is still on screen, and a fixed `top:var(--header-h)` made the menu cover the logo and toggle. Selector is `.site-header .nav__menu` because the `ul[class]` reset out-specifies a lone `.nav__menu` and would zero out this padding. */ .site-header .nav__menu{ position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch; gap:.15rem;background:#fff;padding:.85rem var(--gutter) 1.5rem; border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg); transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s; max-height:min(78dvh,calc(100dvh - var(--header-h)));overflow-y:auto; overscroll-behavior:contain; } .site-header .nav__menu.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto} .nav__link{padding:.95rem .65rem;font-size:1rem;border-radius:9px;border-bottom:1px solid var(--surface-3)} .nav__link:last-of-type{border-bottom:0} .nav__link::after{display:none} .nav__cta{margin:1rem 0 0} .nav__cta .btn{width:100%} .nav__toggle{display:inline-flex} .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} .split,.svc{grid-template-columns:1fr} .split--reverse .split__media,.svc:nth-child(even) .svc__media{order:0} .contact-grid{grid-template-columns:1fr} .trust__grid{grid-template-columns:repeat(3,1fr)} .footer__top{grid-template-columns:1fr 1fr} .footer__col--brand{grid-column:1/-1} .split__media--stack{padding-bottom:0;padding-right:0} .split__media--stack .img-sub{display:none} .split__badge{left:12px} } @media (max-width:820px){ .steps{grid-template-columns:1fr} .step:not(:last-child)::after{ top:auto;bottom:calc(-1 * clamp(1.15rem,2.4vw,2rem) - 1px);right:auto;left:50%; width:2px;height:clamp(1.15rem,2.4vw,2rem); background:repeating-linear-gradient(180deg,var(--line) 0 6px,transparent 6px 11px); } } @media (max-width:640px){ .grid-3,.grid-4,.grid-2{grid-template-columns:1fr} .stats{grid-template-columns:1fr;gap:1.25rem} .trust__grid{grid-template-columns:repeat(2,1fr)} .form-grid{grid-template-columns:1fr} .topbar__inner{justify-content:center;text-align:center;padding-block:.5rem} .topbar__hide-sm{display:none} .footer__top{grid-template-columns:1fr} .footer__bottom{flex-direction:column;text-align:center} .cta-band__inner{flex-direction:column;align-items:flex-start} .brand img{height:38px} .hero__assure{gap:.6rem 1.1rem} } /* ---------- 21. Motion & print ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} [data-reveal]{opacity:1;transform:none} } @media print{ .site-header,.topbar,.to-top,.cta-band,.site-footer,.nav__toggle,.chatw{display:none !important} body{color:#000} .section{padding-block:1rem} }