/*
============================================================
Project Name: "The Awarded Contract" — True Shield Security Services Website Project
Description: A fully original website created using basic HTML, CSS,
and JavaScript elements for a locally owned and operated
manned security services — True Shield Security. Designed and built as a
collaborative portfolio project.
Created By:
• Alexandria S.
• Mohammed M.
Date: December 9, 2025
Location: Ontario, Canada
Ownership: This site was developed in partnership with True Shield Security Services,
with full approval and contribution from the business.
All content and design elements are original and tailored
to represent the brand's local presence and mission.
Copyright © 2025 True Shield Security Services & Molex | All Rights Reserved.
✨ Built with pride. Fueled by community. Powered by vision. ✨
============================================================
*/
:root {
--bg: #0b0b0b;
--gold: #C9A447;
--white: #ffffff;
--text: #0b1220; /* tuned body copy color for better contrast */
--gold-dark: #8f722a; /* darker gold for higher contrast when needed */
}
/* Avatar wrapper: stack photo above the LinkedIn button */
.avatar-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.team-card .avatar {
margin: 0;
}
.team-card .social-links {
margin-top: 0;
display: flex;
align-items: center;
}
/* Global resets and typography */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
color: var(--text);
font-weight: 400;
background: var(--white);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Responsive styles for the security main image */
.hero-image-wrap {
max-width: 100%;
height: auto;
}
.security-main-asset { width: 100%; height: auto; object-fit: cover; }
/* Header */
.site-header {
position: sticky;
top: 0;
left: 0;
right: 0;
background: var(--bg);
color: var(--white);
padding: 22px 0;
z-index: 9999; /* ensure header always sits above hero media */
-webkit-backdrop-filter: saturate(120%) blur(6px);
backdrop-filter: saturate(120%) blur(6px);
}
/* Header behavior is controlled by JS toggling the `.scrolled` class. */
/* keep Learn More gold by default; on hover make it high-contrast black */
.home .services-grid .card .card-body .learn-more:hover,
.home .services-grid .card .card-body a:hover { color: #000000 !important; transform:translateX(4px); }
.site-header .site-header-inner { max-width:1400px; margin:0 auto; display:flex; align-items:center; gap:20px; padding:20px 12px; padding-left:360px; min-height:80px; }
/* For .card-style-dark on the homepage: keep Learn More gold by default, black on hover */
.home .services-grid .card.card-style-dark .card-body .learn-more,
.home .services-grid .card.card-style-dark .card-body a { color: var(--gold) !important; }
.home .services-grid .card.card-style-dark .card-body .learn-more:hover,
.home .services-grid .card.card-style-dark .card-body a:hover { color: #000 !important; transform: translateX(4px); }
/* Pin the brand to the viewport left edge so the logo sits flush */
.site-header .brand { display:flex; align-items:center; flex:0 0 auto; margin-right: auto; position:absolute; left:0; top:50%; transform:translateY(-50%); padding-left:0; z-index:70; }
.site-header img { height:auto; width:auto; max-height:210px; max-width:480px; display:block; padding:1px 0 1px 0; }
.site-header img { height:auto; width:auto; max-height:140px; max-width:320px; display:block; }
nav { margin-left:auto; display:flex; gap:18px; align-items:center; align-self:center; padding-left:0; }
@media (max-width: 1000px) {
.site-header img { max-height:150px; max-width:340px; }
.site-header .site-header-inner { padding-left:280px; padding-right:0; }
}
/* Accessibility utilities (non-hero fixes) */
.fix-contrast-dark-strong { color: var(--white) !important; background: rgba(0,0,0,0.6); padding: 0 2px; }
/* Animated modern card styles for services grid */
.services-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:18px; }
.card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); border-radius:12px; overflow:hidden; transition:transform .28s cubic-bezier(.22,.9,.34,1), box-shadow .28s ease; will-change:transform;
box-shadow: 0 4px 10px rgba(4,8,12,0.04);
}
.card:hover, .card:focus-within { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 40px rgba(4,8,12,0.12); }
.card-media img { width:100%; height:140px; object-fit:cover; display:block; }
.card-body { padding:14px; }
.card .learn-more { color:var(--gold); font-weight:600; text-decoration:none; transition:transform .22s ease, color .18s ease; }
.card .learn-more:hover { transform: translateX(6px); color:#000; }
/* subtle entrance animation for cards */
@keyframes card-fade-up { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }
/* cards are invisible until JS marks them visible */
.card { --i: 0; }
.card[data-animated="true"] { opacity:0; transform: translateY(20px) scale(.98); }
.card[data-animated="true"].is-visible { opacity:1; transform: translateY(0) scale(1); animation: card-fade-up .64s cubic-bezier(.22,.9,.34,1) both; animation-delay: calc(var(--i) * 140ms); }
/* Use darker gold for card actions */
.card .learn-more { color: var(--gold-dark); font-weight:700; }
.card .learn-more:hover { color:#0b0b0b; }
/* Home page: make cards visually match services page's light/dark card styles */
.home .services-grid .card { background: var(--white); color: #071018; border-left:4px solid var(--gold); border-radius:12px; overflow:hidden; box-shadow: 0 6px 18px rgba(16,24,40,0.04); display:flex; flex-direction:column; min-height:320px; }
.home .services-grid .card.card-style-dark { background: linear-gradient(180deg, rgba(6,8,10,0.04), rgba(8,10,12,0.04)); color:#071018; border-left:4px solid var(--gold-dark); box-shadow: 0 8px 20px rgba(2,6,10,0.04); }
.home .services-grid .card.card-style-dark h3 { color: var(--gold-dark); }
.home .services-grid .card .card-body { padding:16px; display:flex; flex-direction:column; flex:1; }
.home .services-grid .card .card-body .learn-more { margin-top:auto; }
/* Hero slogan styling */
.hero-slogan { font-size: clamp(28px, 5.6vw, 56px); margin:0 0 8px 0; letter-spacing: -0.02em; color: var(--white); font-weight:700; text-transform:none; }
.hero-title { color: rgba(255,255,255,0.95); font-weight:600; margin-bottom:10px; }
.hero-sub { color: rgba(255,255,255,0.9); }
@media (max-width: 640px) {
.site-header img { max-height:72px; max-width:160px; }
.site-header .site-header-inner { padding-left:120px; padding-right:12px; }
nav { gap:8px; font-size:14px; }
/* Keep the quote CTA visible on portrait phones; hide only on very narrow landscape */
.header-cta { display:flex; margin-left:8px; }
.header-cta .btn { padding:8px 10px; font-size:14px; }
.site-header { padding:8px 0; }
}
/* Prevent header briefly switching to translucent gray on small mobile viewports */
@media (max-width: 420px) {
.site-header.scrolled, .site-header.transparent {
background: var(--bg) !important;
color: var(--white) !important;
box-shadow: none !important;
}
.site-header.scrolled nav a, .site-header.transparent nav a { color: var(--white) !important; }
}
/* Mobile fix: avoid 100vw hero + translate causing horizontal overflow and a
visible right-side band on some mobile browsers. On small screens use
full-width layout without the 100vw shift and hide any accidental overflow. */
@media (max-width: 640px) {
.hero {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
left: 0 !important;
transform: none !important;
}
.site-header .site-header-inner { padding-left: 12px !important; padding-right: 12px !important; }
html, body { overflow-x: hidden; }
/* Extra safety: ensure hero media and background never exceed viewport width */
.hero, .hero-media, .hero .hero-bg { max-width: 100% !important; overflow-x: hidden !important; }
.hero-media img, .hero-media .security-main-asset { max-width: 100% !important; width: 100% !important; height: auto !important; display: block !important; }
/* On small screens remove the heavy overlay so the image shows clearly under the slogan */
.hero-media .hero-media-overlay { background: none !important; }
/* Ensure hero and media always fill the hero area to avoid showing page background */
.hero { position: relative; min-height: 64vh; overflow: hidden !important; background: none !important; }
.hero .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; height: 100%; width: 100%; }
.hero-media { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 0; }
.hero-media .security-main-asset { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
/* Mobile framing: nudge the focal point to the right and gently zoom out so 'SECURITY' is visible */
.hero-media .security-main-asset { object-position: 65% center !important; transform: scale(0.92) translateZ(0); transform-origin: center center; }
.hero .hero-inner { position: relative; z-index: 2; }
}
@media (orientation: landscape) and (max-width: 420px) {
.header-cta { display:none; }
}
/* Ensure nav links wrap cleanly on narrow devices and remain touch-friendly */
nav { flex-wrap:wrap; }
nav a { padding:10px 8px; }
nav { margin-left:auto; display:flex; gap:18px; align-items:center; align-self:center; }
nav a { color: var(--white); text-decoration: none; font-weight:600; padding:6px 8px; letter-spacing:0.2px; }
.site-header h1, .site-header h2, h1, h2, h3 { font-weight: 600; }
h1 { font-size:32px; font-weight:700; letter-spacing: -0.4px; color: #111; margin-bottom:8px; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
h2 { font-size:22px; font-weight:600; color:#222; margin-bottom:6px; }
h3, h4 { color:#111; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.btn { display:inline-block; background:var(--gold); color:#111; padding:10px 14px; border-radius:6px; text-decoration:none; font-weight:700; }
.header-cta { margin-left:12px; }
/* Header scroll behavior: solid at top, light translucent on scroll */
.site-header { transition: background-color 240ms ease, box-shadow 240ms ease, backdrop-filter 240ms ease; }
.site-header { background: var(--bg); }
.site-header.scrolled {
/* On scroll we make the header transparent so the site content shows through.
The default (no .scrolled) state remains the dark header (var(--bg)). */
background: transparent !important;
color: #ffffff !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.site-header.scrolled nav a { color: #ffffff !important; }
.site-header.scrolled .brand img { filter: none !important; }
/* Backwards compat: normalize `.transparent` to be truly transparent so
the hero shows through and no gray band remains. */
.site-header.transparent {
background: transparent !important;
color: #ffffff !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
.site-header.transparent nav a { color: #ffffff !important; }
.site-header.transparent .brand img { filter: none !important; }
/* Hero */
/* Mobile-first hero: avoid 100vw/tranform math on small screens which can
cause horizontal overflow (mobile browser scrollbar inclusion). Width is
normal flow on mobile; desktop restores full-bleed in the media query below. */
.hero { position: relative; color: var(--white); min-height: 64vh; display:flex; align-items:center; width:100%; left:0; transform:none; margin:0; overflow:hidden; border-radius:0; }
.hero .hero-bg { position:absolute; inset:0; background-position:center; background-size:cover; filter:brightness(.45); }
/* hero-media sits on top of the hero-bg and behind the hero-inner content */
.hero-media { position:absolute; inset:0; z-index:0; display:block; overflow:hidden; border-radius:0; height:100%; width:100%; }
.hero-media .security-main-asset { width:100%; height:100%; object-fit:cover; display:block; border-radius:0; max-height:100%; }
.hero-media .hero-media-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(2,8,10,0.48) 0%, rgba(2,8,10,0.6) 100%); mix-blend-mode: normal; pointer-events: none; max-height:100%; }
.hero .hero-inner { position:relative; z-index:2; max-width:1400px; margin:0 auto; padding:24px 16px 12px 16px; text-align:left; }
/* Hero text styling when overlaid on image */
.hero .hero-inner h1 { color: #fff; text-shadow: 0 8px 30px rgba(1,6,10,0.72); font-size: clamp(28px, 4.8vw, 48px); line-height:1.02; margin-bottom:8px; font-weight:800; }
.hero .hero-inner p { color: rgba(255,255,255,0.92); text-shadow: 0 6px 18px rgba(1,6,10,0.55); font-size: clamp(14px, 1.6vw, 18px); max-width: 720px; }
.hero .hero-inner { position:relative; z-index:2; max-width:1400px; margin:0 auto; padding:40px 20px; text-align:left; }
/* Desktop-only full-bleed hero to preserve the original visual intent */
@media (min-width: 641px) {
.hero {
width: 100vw;
left: 50%;
transform: translateX(-50%);
margin-left: calc(-1 * (100vw - 100%)/2);
margin-right: calc(-1 * (100vw - 100%)/2);
}
}
/* Layout */
.container { max-width:1400px; margin:0 auto; padding:12px 12px; }
/* Ensure main content has a small bottom padding to avoid visual gap above footer
caused by margin collapse on some devices/browsers. */
/* Ensure main grows to push footer to the bottom of the viewport when content is short */
main { padding-bottom: 12px; flex: 1 0 auto; }
/* Make sure hero doesn't create accidental gaps below on some devices */
.hero { margin-bottom: 0; }
.container { margin-top: 12px; }
/* Cards */
.services-grid { display:flex; flex-direction:column; gap:18px; margin-top:18px; }
.services-page .services-grid .card { display:grid; grid-template-columns:420px 1fr; gap:16px; align-items:stretch; background:#fff; box-shadow:0 8px 22px rgba(2,2,2,0.06); border-radius:10px; overflow:hidden; border-left:6px solid rgba(201,164,71,0.04); min-height:300px; }
/* Mobile tweak: stack service cards and cap image heights so the card containers don't appear oversized */
@media (max-width: 640px) {
.services-page .services-grid .card {
grid-template-columns: 1fr;
gap: 12px;
min-height: auto;
align-items: start;
}
.services-page .services-grid .card-media {
width: 100%;
flex: 0 0 auto;
height: auto;
}
.services-page .services-grid .card-media img,
.services-grid .card img,
.card-media img {
height: 160px;
object-fit: cover;
object-position: center center;
}
.services-page .services-grid .card .card-body { padding:12px; }
}
.services-grid .card img { display:none; }
.services-page .services-grid .card .card-body { padding:16px; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:8px; }
.services-page .services-grid .card-media { width:100%; height:100%; flex:0 0 auto; }
.services-page .services-grid .card-media img { width:100%; height:100%; object-fit:cover; object-position:center center; transition: transform 180ms ease; display:block; }
/* Target the first service image on the services page to show less-cropped framing */
.services-page .services-grid .card:first-of-type .card-media img {
object-position: center 34%;
transform: scale(0.92);
}
.services-page .services-grid .card .card-body { padding:16px; flex:1; display:flex; flex-direction:column; justify-content:flex-start; gap:8px; }
.services-grid .card h3 { margin:0 0 8px 0; font-size:20px; font-weight:800; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#071018; }
.services-grid .card img { width:360px; height:100%; object-fit:cover; flex:0 0 360px; display:block; }
services-grid .card img { width:100%; height:auto; object-fit:cover; flex:0 0 360px; max-width:360px; display:block; }
.services-grid .card .card-body { padding:16px; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:8px; }
.services-grid .card-media { width:360px; flex:0 0 360px; height:100%; overflow:hidden; display:block; }
services-grid .card-media { width:360px; flex:0 0 360px; height:auto; max-height:420px; overflow:hidden; display:block; }
.services-grid .card-media img { width:100%; height:100%; object-fit:cover; display:block; }
.services-grid .card p { margin:0 0 12px 0; color:#34414a; line-height:1.6; }
.services-grid .card a { color:var(--bg); font-weight:700; text-decoration:none; margin-top:8px; }
/* Apply light card-style variant to every services page card (CSS-only, no HTML edits) */
.services-page .services-grid .card {
background: var(--white) !important;
color: #071018 !important;
border-left: 4px solid var(--gold) !important;
box-shadow: 0 10px 28px rgba(16,24,40,0.06) !important;
display:grid; grid-template-columns:420px 1fr; gap:16px; align-items:start; border-radius:10px; overflow:hidden; border-left:6px solid rgba(201,164,71,0.04); min-height:0;
}
.services-page .services-grid .card h3 { color: #071018 !important; }
.services-page .services-grid .card:hover h3 { color: var(--gold-dark) !important; }
/* Ensure links inside services cards remain legible */
.services-page .services-grid .card .card-body a { color: var(--bg) !important; }
/* Ensure the "Learn More" link sits at the bottom of the card for visual consistency */
.card .card-body .learn-more { margin-top: 14px; align-self: flex-start; display:inline-block; border-radius:6px; background:var(--gold); color:#111; font-weight:700; text-decoration:none; box-shadow:0 6px 14px rgba(16,24,40,0.06); transition: transform 140ms ease, box-shadow 140ms ease; padding:10px 14px; }
.card .card-body .learn-more:hover { transform: translateY(-2px); box-shadow:0 10px 22px rgba(16,24,40,0.10); }
/* Service pages: keep request/learn links aligned to the bottom of their content columns */
.service .content .learn-more { margin-top: auto; display:inline-block; }
/* Services listing/detail: ensure the "Request this service" links render as buttons (padded) */
.services-grid .card .card-body .learn-more {
margin-top: 14px;
align-self: flex-start;
display: inline-block;
padding: 8px 12px;
border-radius: 6px;
background: var(--gold);
color: #111;
font-weight: 700;
text-decoration: none;
box-shadow: 0 6px 14px rgba(16,24,40,0.06);
transition: transform 140ms ease, box-shadow 140ms ease;
}
.services-grid .card .card-body .learn-more:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(16,24,40,0.10);
}
/* Founder card styles (extracted from inline markup for consistency) */
.founder-card {
background:#fff;
padding:18px;
border-radius:10px;
box-shadow:0 8px 24px rgba(2,2,2,0.06);
margin-top:12px;
}
.founder-card h3 { margin:0 0 8px 0; font-size:22px; }
.founder-card .title { color:#666; font-weight:600; margin-left:12px; font-size:14px; }
.founder-card p { margin:0 0 12px 0; color:#333; line-height:1.6; }
.founder-card ul { margin:0 0 0 18px; color:#444; line-height:1.5; }
/* Avatar utility: larger, professional headshots for management */
.avatar {
width:88px;
height:88px;
min-width:88px;
border-radius:8px;
overflow:hidden;
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
background:#eee;
}
/* Strong homepage flush rules: remove any gap between the card image and the title */
.home .services-grid .card-media,
.home .services-grid .card-media img,
.home .services-grid .card .card-body {
margin: 0 !important;
padding: 0 !important;
}
.home .services-grid .card .card-body h3 {
margin: 0 !important;
padding: 0 !important;
line-height: 1.02 !important;
font-size: 17px !important;
}
.home .services-grid .card .card-body .learn-more,
.home .services-grid .card .card-body a {
margin-top: 4px !important;
}
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:1000px) {
.avatar { width:64px; height:64px; min-width:64px; }
}
/* Header responsive improvements: wrap and center nav/CTA on narrower viewports */
@media (max-width: 768px) {
.site-header .site-header-inner {
flex-wrap: wrap;
}
nav {
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.header-cta {
width: 100%;
justify-content: center;
margin-top: 8px;
}
}
/* Use aspect-ratio for predictable media containers on the services page */
.services-page .services-grid .card-media { aspect-ratio: 16 / 9; overflow: hidden; }
.services-page .services-grid .card-media img { width:100%; height:100%; object-fit:cover; display:block; }
/* Progressive enhancement: use background-image on small viewports for select cards
while keeping the ![]()
in the DOM for accessibility. JavaScript will toggle
`body.use-bg` on small screens and apply the background image from the
element's `data-bg-src` attribute. */
.bg-enhance { background-repeat: no-repeat; background-size: cover; background-position: center center; }
/* When JS enables the enhancement, hide the original ![]()
visually but keep it available
to screen readers and assistive tech (preserve DOM order and alt attribute). */
body.use-bg .bg-enhance img {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
}
/* Mobile-specific background positioning for top-aligned heads */
@media (max-width: 640px) {
body.use-bg .bg-enhance { background-position: center top !important; }
}
@media (max-width:640px) {
.avatar { width:48px; height:48px; min-width:48px; }
}
.about-teaser { display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
/* Very narrow devices: stack header rows and make CTA full-width under nav to avoid overlap */
@media (max-width: 420px) {
.site-header .site-header-inner { display:flex; flex-direction:column; align-items:stretch; gap:6px; padding-left:12px; padding-right:12px; }
.site-header .brand { position:static; transform:none; padding-left:0; margin:0; }
.site-header nav { order:2; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.header-cta { order:3; display:block; width:100%; padding:0 12px 12px 12px; margin-left:0; }
.header-cta .btn { display:block; width:100%; text-align:center; padding:10px 12px; }
.site-header .site-header-inner nav a { padding:8px 6px; }
}
.cta-banner { background:var(--bg); color:var(--white); text-align:center; padding:28px 20px; margin-top:28px; }
/* Services page */
.service { display:flex; gap:18px; margin-bottom:26px; align-items:stretch; flex-wrap:wrap; }
.service img { width:360px; height:220px; object-fit:cover; border-radius:8px; }
.service .content { flex:1; min-width:260px; }
.btn-quote { background:var(--gold); color:#111; padding:10px 14px; border-radius:6px; text-decoration:none; font-weight:700; display:inline-block; margin-top:12px; }
/* Reduce hero min-height on short viewports/landscape phones to avoid overflow gaps */
.hero { min-height: 40vh; }
/* Ensure hero media image doesn't create overflow on short landscape devices */
/* Allow hero media to fully fill the hero on narrow screens */
.hero-media { position:absolute; inset:0; height:100%; }
.hero-media .security-main-asset { width:100%; height:100%; object-fit:cover; max-height:none !important; }
/* Increase touch target sizes and ensure nav wraps cleanly */
nav a { padding:12px 10px; }
/* Slightly increase bottom padding to avoid footer gap on small devices */
main { padding-bottom: 18px; flex: 1 0 auto; }
main > *:last-child { margin-bottom: 0; }
footer { flex-shrink: 0; padding-top: 8px; }
/* Orientation-specific stability tweaks */
@media (orientation: landscape) and (max-width: 900px) {
/* Landscape phones/tablets: reduce hero height and increase content stacking */
.hero { min-height: 38vh; }
.hero-media .security-main-asset { max-height: 48vh; }
.site-header .site-header-inner { padding-left: 140px; }
}
/* Contact page */
.contact-grid { display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start; }
/* Legal / Privacy page styling */
.legal-page main.container { max-width:960px; margin:24px auto; padding:24px; background: #fff; border-radius:10px; box-shadow: 0 8px 20px rgba(2,8,12,0.04); }
.legal-page h1 { font-size:28px; margin-bottom:6px; }
.legal-page .muted { color:#68727a; margin-bottom:18px; }
.legal-page h2 { margin-top:18px; margin-bottom:8px; font-size:18px; }
.legal-page p, .legal-page li { color:#34414a; line-height:1.7; }
.legal-page ul { margin-left:20px; }
.legal-page section { margin-bottom:16px; }
form { background:#fff; padding:18px; border-radius:8px; box-shadow:0 6px 18px rgba(2,2,2,0.06); }
label { display:block; margin:8px 0 6px; font-weight:600; color:#222; }
input[type="text"], input[type="email"], input[type="tel"], textarea { width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; font-size:14px; }
textarea { min-height:140px; resize:vertical; }
.submit { background:var(--gold); color:#111; padding:10px 14px; border-radius:6px; border:none; font-weight:700; cursor:pointer; margin-top:12px; display:inline-block; }
.map-placeholder { background:#e9e9e9; border-radius:8px; height:220px; display:flex; align-items:center; justify-content:center; color:#666; font-weight:600; }
.contact-info { background:#fff;padding:14px;border-radius:8px;box-shadow:0 6px 18px rgba(2,2,2,0.06); }
.contact-info { padding:18px 20px; }
/* Polished contact form and map styling */
.map-wrapper { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:10px; min-height:220px; }
.map-wrapper iframe { position:absolute; left:0; top:0; width:100%; height:100%; border:0; }
form { max-width:960px; }
form input[type="text"], form input[type="email"], form input[type="tel"], form textarea {
background: #fff;
border: 1px solid #e3e6e9;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
transition: box-shadow 160ms ease, border-color 160ms ease;
}
form input:focus, form textarea:focus { outline: none; border-color: rgba(201,164,71,0.9); box-shadow: 0 6px 18px rgba(201,164,71,0.08); }
label { color:#223; }
.contact-grid form { padding:22px; }
.contact-grid .contact-info { padding:18px; }
.submit { background: linear-gradient(180deg,var(--gold), color-mix(in srgb,var(--gold) 72%, black)); box-shadow: 0 8px 18px rgba(16,24,40,0.08); }
/* Unified primary button used for request CTAs */
.btn-primary, .submit { display:inline-block; background:var(--gold); color:#111; padding:10px 14px; border-radius:6px; border:none; font-weight:700; text-decoration:none; box-shadow:0 8px 18px rgba(16,24,40,0.08); transition: transform 160ms ease, box-shadow 160ms ease; }
.btn-primary:hover, .submit:hover { transform: translateY(-2px); box-shadow:0 14px 28px rgba(16,24,40,0.12); }
.map-fallback { display:flex; justify-content:center; }
.map-static-link svg { max-width:320px; width:100%; height:auto; border-radius:8px; display:block; }
.contact-info .btn-primary { padding:8px 12px; font-size:14px; }
/* Map direction CTA buttons (small) */
.map-cta-group { display:flex; gap:8px; justify-content:center; margin-top:8px; }
.map-cta-btn { display:inline-block; padding:6px 10px; border-radius:6px; font-weight:700; text-decoration:none; font-size:13px; border:1px solid rgba(16,24,40,0.06); box-shadow: 0 6px 14px rgba(16,24,40,0.04); transition: transform 140ms ease, box-shadow 140ms ease; }
.map-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16,24,40,0.08); }
.map-cta-btn.google { background: linear-gradient(180deg,var(--gold), color-mix(in srgb,var(--gold) 72%, black)); color:#111; }
.map-cta-btn.apple { background:#111; color:#fff; }
.map-cta-btn.waze { background:#ff6f00; color:#fff; }
/* Circular logo-only CTA buttons for map directions (used inside .contact-info) */
.map-cta-logos { display:block; }
.map-cta-logos .map-cta-note { color: #334148; }
.map-cta-icons { display:flex; gap:12px; align-items:center; }
.map-cta-logo { display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center; border-radius:50%; background:#ffffff; border:1px solid rgba(16,24,40,0.06); box-shadow: 0 8px 18px rgba(16,24,40,0.06); transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; text-decoration:none; overflow:hidden; }
.map-cta-logo img { width:72%; height:72%; object-fit:contain; display:block; border-radius:0; transform: translateZ(0); }
.map-cta-logo:focus { box-shadow: 0 0 0 5px rgba(143,114,42,0.14), 0 10px 22px rgba(16,24,40,0.08); outline: none; }
.map-cta-logo:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16,24,40,0.12), 0 0 0 4px rgba(201,164,71,0.10); background: color-mix(in srgb, var(--gold) 12%, white); }
/* Inner faint gold stroke that shows on hover/focus for visual polish */
.map-cta-logo::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,0); transition: box-shadow 180ms ease, opacity 180ms ease; opacity: 0; }
.map-cta-logo:hover::after, .map-cta-logo:focus::after { box-shadow: inset 0 0 0 2px rgba(201,164,71,0.14); opacity: 1; }
/* Waze: prefer an inline SVG/image element that uses preserveAspectRatio="xMidYMid slice"
so the raster logo fills the circular CTA and crops consistently.
The actual