/* ============================================================ Hama Services Limited — hamaservices.co.uk Design system: deep-navy brand + per-division accent. Cleaning = teal · Security = gold · Home/Contact = brand blue. ABM-inspired: full-bleed photography, angular accents, bold display type. Mobile-first. No build step, no framework. ============================================================ */ /* ---------- Tokens ---------- */ :root { /* Brand navy */ --navy-900: #07182f; --navy-800: #0b2545; --navy-700: #123059; --navy-600: #1b3e6f; --navy-050: #eef2f8; /* Neutrals */ --ink: #0e1c30; --body: #41506a; --muted: #6b7890; --line: #e4e9f1; --bg: #ffffff; --bg-soft: #f4f6fa; --bg-softer: #eef1f7; /* Default accent = brand blue (home + contact) */ --accent: #1f6feb; --accent-600: #1a5fd0; --accent-700: #164fac; --accent-tint: #e9f1fe; --accent-rgb: 31, 111, 235; --on-accent: #ffffff; /* Radius / shadow / motion */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 30px; --sh-sm: 0 1px 2px rgba(7, 24, 47, .06); --sh: 0 14px 34px rgba(7, 24, 47, .10); --sh-lg: 0 30px 70px rgba(7, 24, 47, .20); --ease: cubic-bezier(.22, .61, .36, 1); --maxw: 1200px; --gut: clamp(20px, 4vw, 40px); --display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* Per-division theming — applied to */ body.theme-cleaning { --accent: #0ea5a4; --accent-600: #0c8e8d; --accent-700: #0a7574; --accent-tint: #e4f6f6; --accent-rgb: 14, 165, 164; --on-accent: #ffffff; } body.theme-security { --accent: #c9a227; --accent-600: #ad8a1c; --accent-700: #8f7115; --accent-tint: #faf3dd; --accent-rgb: 201, 162, 39; --on-accent: #1b1606; /* dark text on gold for contrast */ } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; } body { margin: 0; font-family: var(--text); font-size: 17px; line-height: 1.65; color: var(--body); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-700); } button { font-family: inherit; cursor: pointer; } ul { margin: 0; padding: 0; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.1; color: var(--ink); margin: 0 0 .5em; letter-spacing: -0.02em; } h1 { font-size: clamp(2.1rem, 5.2vw, 4rem); font-weight: 800; } h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); } h3 { font-size: 1.2rem; letter-spacing: -0.01em; } p { margin: 0 0 1em; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -48px; left: 0; z-index: 200; background: var(--navy-900); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r-sm) 0; } .skip-link:focus { top: 0; } /* ---------- Shared bits ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--text); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; } .on-dark .eyebrow, .eyebrow.on-dark { color: #8fb4ff; } .theme-cleaning .on-dark .eyebrow, .theme-cleaning .eyebrow.on-dark { color: #6fe3e1; } .theme-security .on-dark .eyebrow, .theme-security .eyebrow.on-dark { color: #ecc94b; } .lead { font-size: 1.18rem; color: var(--muted); } .section { padding: clamp(60px, 9vw, 110px) 0; position: relative; } .section-soft { background: var(--bg-soft); } .section-navy { background: radial-gradient(1200px 700px at 88% -10%, rgba(var(--accent-rgb), .22), transparent 60%), linear-gradient(165deg, var(--navy-800), var(--navy-900)); color: #cdd8ea; } .section-navy h2, .section-navy h3 { color: #fff; } .section-head { max-width: 760px; margin: 0 0 clamp(36px, 5vw, 60px); } .section-head.center { margin-inline: auto; text-align: center; } .section-head p { font-size: 1.1rem; color: var(--muted); margin: 0; } .section-navy .section-head p { color: #a9b8d0; } .grid { display: grid; gap: clamp(18px, 2.4vw, 28px); } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font-family: var(--text); font-weight: 600; font-size: 1rem; line-height: 1; border: 1.5px solid transparent; white-space: nowrap; transition: transform .12s var(--ease), background-color .18s, color .18s, border-color .18s, box-shadow .18s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg { width: 18px; height: 18px; } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 26px rgba(var(--accent-rgb), .34); } .btn-primary:hover { background: var(--accent-600); color: var(--on-accent); box-shadow: 0 16px 34px rgba(var(--accent-rgb), .42); } .btn-navy { background: var(--navy-800); color: #fff; } .btn-navy:hover { background: var(--navy-700); color: #fff; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } .btn-outline-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.45); } .btn-outline-light:hover { background: #fff; color: var(--navy-900); border-color: #fff; } .btn-lg { padding: 17px 34px; font-size: 1.06rem; } .btn-sm { padding: 10px 18px; font-size: .9rem; } .btn-block { width: 100%; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); } .brand:hover { color: var(--ink); } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(150deg, var(--navy-700), var(--navy-900)); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .5px; box-shadow: var(--sh-sm); } .brand-text { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--display); font-weight: 700; font-size: 1.06rem; } .brand-sub { font-family: var(--text); font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .nav { display: flex; align-items: center; gap: 6px; } .nav-list { display: flex; align-items: center; gap: 4px; list-style: none; } .nav-list > li { position: relative; } .nav-list > li > a, .nav-list > li > button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 15px; border-radius: 10px; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: .97rem; } .nav-list > li > a:hover, .nav-list > li > button:hover, .nav-list > li.active > a { color: var(--accent); background: var(--accent-tint); } .nav-caret { width: 14px; height: 14px; transition: transform .2s var(--ease); } /* Dropdown */ .has-menu .submenu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px); width: 320px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-lg); padding: 10px; list-style: none; opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), transform .2s var(--ease); z-index: 120; } .has-menu:hover .submenu, .has-menu:focus-within .submenu, .has-menu .submenu.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .has-menu:hover .nav-caret, .has-menu:focus-within .nav-caret { transform: rotate(180deg); } .submenu a { display: flex; gap: 13px; align-items: flex-start; padding: 13px 14px; border-radius: 10px; color: var(--ink); } .submenu a:hover { background: var(--bg-soft); } .submenu .si { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; } .submenu .si svg { width: 21px; height: 21px; } .si-clean { background: linear-gradient(150deg, #12c1c0, #0a7574); } .si-secure { background: linear-gradient(150deg, #d9b431, #8f7115); } .submenu .st { font-family: var(--display); font-weight: 700; font-size: .98rem; line-height: 1.2; } .submenu .sd { font-size: .82rem; color: var(--muted); line-height: 1.35; } .nav-phone { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; color: var(--ink); border-radius: 10px; } .nav-phone svg { width: 17px; height: 17px; color: var(--accent); } .nav-phone:hover { color: var(--accent); } .nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 11px; background: #fff; position: relative; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px auto; transition: .2s var(--ease); } /* ---------- Hero ---------- */ .hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; min-height: clamp(540px, 82vh, 820px); display: flex; align-items: center; } .hero.hero-sm { min-height: clamp(340px, 50vh, 500px); } .hero-media { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; animation: kenburns 26s ease-in-out infinite alternate; } @keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.13); } } .hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,24,47,.62) 0%, rgba(7,24,47,.46) 40%, rgba(7,24,47,.78) 100%), linear-gradient(90deg, rgba(7,24,47,.86) 0%, rgba(7,24,47,.30) 60%, rgba(7,24,47,.10) 100%); } .hero-inner { padding: clamp(70px, 11vw, 120px) 0; max-width: 760px; } .hero h1 { color: #fff; text-wrap: balance; margin-bottom: .35em; } .hero .lead { color: #dde6f4; max-width: 600px; font-size: clamp(1.05rem, 1.6vw, 1.28rem); } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 0; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: rgba(var(--accent-rgb), .9); padding: 7px 15px; border-radius: 999px; margin-bottom: 22px; } .theme-security .hero-eyebrow { color: #1b1606; } /* Angular accent shapes (ABM-style) */ .hero-accents { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .hero-accents span { position: absolute; bottom: -60px; height: 240px; transform: skewX(-22deg); opacity: .9; } .hero-accents .a1 { right: -40px; width: 320px; background: var(--accent); opacity: .85; } .hero-accents .a2 { right: 180px; width: 150px; background: var(--navy-600); opacity: .8; } .hero-accents .a3 { right: 360px; width: 70px; background: #fff; opacity: .12; } @media (max-width: 760px){ .hero-accents { display: none; } } /* Hero trust strip */ .hero-trust { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); list-style: none; font-size: .92rem; color: #cdd8ea; } .hero-trust li { display: inline-flex; align-items: center; gap: 9px; } .hero-trust svg { width: 18px; height: 18px; color: var(--accent); } .theme-security .hero-trust svg { color: #ecc94b; } .hero-trust strong { color: #fff; font-weight: 700; } /* ---------- Stats band ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .stat { background: #fff; padding: 30px 26px; text-align: center; } .stat .n { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--ink); letter-spacing: -.02em; } .stat .l { font-size: .88rem; color: var(--muted); margin-top: 4px; } .section-navy .stats { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.14); } .section-navy .stat { background: transparent; } .section-navy .stat .n { color: #fff; } .section-navy .stat .l { color: #a9b8d0; } /* ---------- Division split (home) ---------- */ .divisions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 30px); } .division { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; color: #fff; isolation: isolate; box-shadow: var(--sh); } .division-media { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform .6s var(--ease); } .division:hover .division-media { transform: scale(1.06); } .division::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,24,47,.15) 0%, rgba(7,24,47,.55) 55%, rgba(7,24,47,.92) 100%); } .division-body { padding: clamp(26px, 3vw, 40px); width: 100%; } .division .tag { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; margin-bottom: 14px; } .division.clean .tag { background: #0ea5a4; color: #fff; } .division.secure .tag { background: #c9a227; color: #1b1606; } .division h3 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .3em; } .division p { color: #dde6f4; margin-bottom: 18px; } .division ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 22px; } .division li { font-size: .92rem; color: #eef2f8; display: inline-flex; align-items: center; gap: 7px; } .division li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); } .division.clean li::before { background: #2ed3d1; } .division.secure li::before { background: #e6c34a; } .division-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: #fff; padding: 12px 22px; border-radius: 999px; } .division.clean .division-link { background: #0ea5a4; } .division.clean .division-link:hover { background: #0c8e8d; color: #fff; } .division.secure .division-link { background: #c9a227; color: #1b1606; } .division.secure .division-link:hover { background: #ad8a1c; color: #1b1606; } .division-link svg { width: 18px; height: 18px; transition: transform .2s var(--ease); } .division:hover .division-link svg { transform: translateX(4px); } /* ---------- Service cards (with images) ---------- */ .svc { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; } .svc:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: rgba(var(--accent-rgb), .4); } .svc-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .svc:hover .svc-img img { transform: scale(1.06); } .svc-tag { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.94); color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .svc-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; } .svc-body h3 { margin-bottom: .4em; } .svc-body p { font-size: .98rem; margin-bottom: 16px; } .svc-list { list-style: none; margin-top: auto; display: grid; gap: 7px; } .svc-list li { position: relative; padding-left: 26px; font-size: .92rem; color: var(--body); } .svc-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 17px; height: 17px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 17px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 17px no-repeat; } /* ---------- Feature / alternating media rows ---------- */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; } .feature + .feature { margin-top: clamp(48px, 7vw, 96px); } .feature.flip .feature-media { order: 2; } .feature-media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); aspect-ratio: 4 / 3.2; } .feature-media img { width: 100%; height: 100%; object-fit: cover; } .feature-badge { position: absolute; left: 22px; bottom: 22px; background: rgba(255,255,255,.95); border-radius: var(--r); padding: 14px 18px; box-shadow: var(--sh); display: flex; align-items: center; gap: 12px; max-width: 78%; } .feature-badge .fb-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; flex: 0 0 40px; } .feature-badge .fb-ic svg { width: 22px; height: 22px; } .feature-badge .fb-t { font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--ink); line-height: 1.15; } .feature-badge .fb-s { font-size: .8rem; color: var(--muted); } .feature-list { list-style: none; display: grid; gap: 14px; margin-top: 6px; } .feature-list li { display: flex; gap: 14px; align-items: flex-start; } .feature-list .ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; } .feature-list .ic svg { width: 20px; height: 20px; } .feature-list h4 { font-family: var(--display); font-size: 1.02rem; margin: 2px 0 3px; color: var(--ink); } .feature-list p { font-size: .94rem; margin: 0; } /* ---------- Sectors ---------- */ .sector { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r); padding: 26px 24px; transition: border-color .2s, background .2s, transform .2s var(--ease); } .sector:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .6); background: rgba(255,255,255,.06); } .sector .ic { width: 46px; height: 46px; border-radius: 11px; background: rgba(var(--accent-rgb), .18); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .theme-security .sector .ic { color: #ecc94b; } .sector .ic svg { width: 23px; height: 23px; } .sector h3 { color: #fff; font-size: 1.12rem; } .sector p { color: #a9b8d0; margin: 0; font-size: .95rem; } /* On-light sector variant */ .sector-light { background: #fff; border: 1px solid var(--line); } .sector-light:hover { border-color: rgba(var(--accent-rgb), .5); } .sector-light .ic { background: var(--accent-tint); color: var(--accent); } .sector-light h3 { color: var(--ink); } .sector-light p { color: var(--muted); } /* ---------- Process steps ---------- */ .steps { counter-reset: step; display: grid; gap: clamp(18px, 2.4vw, 26px); } .step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px 26px 26px; } .step::before { counter-increment: step; content: "0" counter(step); font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .04em; color: var(--accent); display: inline-block; margin-bottom: 12px; } .step h3 { font-size: 1.1rem; margin-bottom: .3em; } .step p { font-size: .95rem; margin: 0; } /* ---------- CTA band ---------- */ .cta-band { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); color: #fff; padding: clamp(40px, 6vw, 70px); } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; } .cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(7,24,47,.94), rgba(7,24,47,.62)); } .cta-band.has-bg::before { background-image: linear-gradient(0deg, rgba(7,24,47,.2), rgba(7,24,47,.2)), var(--cta-img); } .cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; } .cta-inner h2 { color: #fff; max-width: 18ch; margin: 0; } .cta-inner p { color: #cdd8ea; margin: 8px 0 0; max-width: 46ch; } .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 52px); align-items: start; } .contact-cards { display: grid; gap: 16px; } .cc { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--sh-sm); } .cc .ic { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; } .cc .ic svg { width: 22px; height: 22px; } .cc .l { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; } .cc a.big, .cc .big { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--ink); } .cc a:hover { color: var(--accent); } .cc address { font-style: normal; color: var(--body); line-height: 1.55; } .cc .meta { font-size: .85rem; color: var(--muted); margin: 6px 0 0; } .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 38px); box-shadow: var(--sh-lg); } .form-row { margin-bottom: 16px; } .form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-row label { display: block; font-size: .86rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm); font: inherit; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15); } .form-row textarea { resize: vertical; min-height: 120px; } .form-note { margin: 14px 0 0; font-size: .82rem; color: var(--muted); text-align: center; } /* ---------- Footer ---------- */ .site-footer { background: linear-gradient(180deg, var(--navy-900), #050f1f); color: #aebbd0; padding: clamp(56px, 7vw, 80px) 0 28px; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; } .footer-brand .brand-mark { background: linear-gradient(150deg, var(--accent), var(--accent-700)); } .footer-brand .brand-text, .footer-brand .brand { color: #fff; } .footer-brand p { margin: 18px 0 0; color: #9fb0c9; max-width: 34ch; font-size: .95rem; } .footer-social { display: flex; gap: 10px; margin-top: 20px; } .footer-social a { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; color: #cdd8ea; } .footer-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .footer-social svg { width: 19px; height: 19px; } .footer-h { color: #fff; font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; } .footer-list { list-style: none; display: grid; gap: 10px; } .footer-list a { color: #aebbd0; font-size: .95rem; } .footer-list a:hover { color: #fff; } .footer-address { font-style: normal; line-height: 1.6; font-size: .95rem; color: #aebbd0; } .footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .85rem; color: #7e8da6; } .footer-bottom p { margin: 0; } .footer-bottom a { color: #9fb0c9; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; } .cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .feature, .divisions, .contact-grid { grid-template-columns: 1fr; } .feature.flip .feature-media { order: 0; } .feature-media { aspect-ratio: 16 / 10; } .cols-2, .cols-3 { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .form-2 { grid-template-columns: 1fr; } /* Mobile nav */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; } .nav { position: fixed; inset: 76px 0 auto; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sh); padding: 14px var(--gut) 22px; flex-direction: column; align-items: stretch; gap: 4px; display: none; max-height: calc(100vh - 76px); overflow-y: auto; } .nav.open { display: flex; } .nav-list { flex-direction: column; align-items: stretch; gap: 0; } .nav-list > li > a, .nav-list > li > button { width: 100%; justify-content: space-between; padding: 15px 6px; border-radius: 8px; font-size: 1.05rem; } .has-menu .submenu { position: static; width: 100%; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; border-left: 2px solid var(--accent-tint); border-radius: 0; margin: 2px 0 8px 6px; padding: 4px 0 4px 8px; display: none; } .has-menu .submenu.open { display: block; } .nav-phone { justify-content: flex-start; padding: 15px 6px; font-size: 1.05rem; } .nav .btn { margin-top: 8px; } } @media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } .cta-inner { flex-direction: column; align-items: flex-start; } .hero-cta .btn { flex: 1 1 auto; } .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } }