/* ========================================================================== AMC Cleaning Co — shared stylesheet Plain CSS, no build step, mobile-first. ========================================================================== */ :root { /* Brand palette: charcoal & brass — deliberately NOT green/orange or blue/red. Those colour families carry Celtic/Rangers football and Orange Order sectarian associations in West of Scotland/Lanarkshire, which is genuinely a reputational risk for a local business here — confirmed with Mark, this replaced an earlier green/white/orange scheme for exactly that reason. Charcoal + brass reads premium and trustworthy with zero tribal colour coding. --color-accent is deliberately a deep antique brass (not bright gold) so white button text clears WCAG AA contrast (~5:1) at normal text size — --color-accent-light is the lighter gold swatch for badges, hover backgrounds and small highlights where it isn't carrying white text on its own. */ --color-primary: #4a4842; --color-primary-dark: #1e1d1a; --color-primary-light: #ede9e2; --color-accent: #8a6a2f; --color-accent-dark: #6e5424; --color-accent-light: #cca43c; --color-accent-rgb: 138, 106, 47; /* rgba() glow behind CTA buttons */ --color-bg: #faf9f6; --color-bg-alt: #f2efe9; --color-white: #ffffff; --color-text: #232420; --color-text-muted: #514d44; /* darkened from #6b675e -- the old muted grey read thin/washed-out under headings */ --color-border: #e3dfd7; /* Component tokens — deliberately differentiated so cards, badges and images don't all read as the same rounded shape. */ --radius-sm: 6px; /* small controls, form fields */ --radius-md: 12px; /* cards, callouts */ --radius-lg: 20px; /* images, hero media */ --radius-pill: 999px; /* badges/chips/buttons only */ --shadow-sm: 0 1px 3px rgba(30, 29, 26, 0.08); --shadow-md: 0 8px 24px rgba(30, 29, 26, 0.10); --shadow-lg: 0 20px 48px rgba(30, 29, 26, 0.16); /* Spacing scale — an intentional rhythm rather than one flat value reused everywhere. Section-level spacing uses --space-* directly; component-level spacing (card padding, gaps) stays as literal values close to these steps. */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 96px; --max-width: 1240px; --content-width: 1240px; /* Two-font system: Fraunces (a characterful serif) for display headings, Inter for body copy, UI and buttons. Both loaded via Google Fonts with font-display: swap and preconnect for performance — see the tags in . */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--color-primary-dark); } a:hover { color: var(--color-accent-dark); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Typography scale — CSS clamp() so headings resize deliberately between mobile and desktop rather than either overwhelming small screens or looking too small on large ones. */ h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; font-weight: 600; letter-spacing: -0.01em; color: var(--color-primary-dark); max-width: 22ch; } /* Headings are capped at 22ch above, so inside a centred section that box needs its own auto margins too -- text-align alone only centres text *within* the (already content-width) box, not the box itself. */ .text-center h1, .text-center h2, .text-center h3, .center h1, .center h2, .center h3 { margin-left: auto; margin-right: auto; } h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem); } /* ~36–64px */ .hero h1, .page-hero h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); max-width: 18ch; } /* ~40–72px */ h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 3rem); } /* ~28–48px */ h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.875rem); max-width: none; } h4 { font-family: var(--font-body); font-size: 1rem; max-width: none; letter-spacing: 0; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } /* Body copy sitting directly under a heading (cards, steps, Why Choose AMC, callouts, FAQ answers) was reading thin and small against the bold display headings above it -- bumped size/weight for a richer, less "cheap" feel across the site. */ .card p, .step p, .why-us-grid p, .callout p, .faq-item p { font-size: 1.05rem; font-weight: 500; line-height: 1.55; } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } section { padding: var(--space-xl) 0; } .section-tight { padding: var(--space-lg) 0; } .section-alt { background: var(--color-bg-alt); } .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8125rem; font-weight: 600; font-family: var(--font-body); color: var(--color-accent-dark); margin-bottom: 0.75em; display: block; } .lede { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; color: var(--color-text-muted); max-width: 58ch; } .section-head { max-width: 640px; margin-bottom: var(--space-lg); } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } /* Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 28px; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 600; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-accent); color: #fff; /* Soft warm glow behind the button so it pops off the page, independent of whatever background it's sitting on. */ box-shadow: 0 0 0 6px rgba(var(--color-accent-rgb), 0.14), 0 6px 24px rgba(var(--color-accent-rgb), 0.35); } .btn-primary:hover { background: var(--color-accent-dark); color: #fff; box-shadow: 0 0 0 8px rgba(var(--color-accent-rgb), 0.18), 0 8px 28px rgba(var(--color-accent-rgb), 0.45); } .btn-secondary { /* Solid white/cream so it actually pops against the dark hero background — charcoal on charcoal (the previous version) barely showed up. */ background: #fff; border-color: #fff; color: var(--color-primary-dark); } .btn-secondary:hover { background: var(--color-bg-alt); border-color: var(--color-bg-alt); color: var(--color-primary-dark); } .btn-outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary-dark); } .btn-outline:hover { background: var(--color-primary-light); } .btn-text { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-primary-dark); text-decoration: none; border-bottom: 1.5px solid var(--color-accent); padding-bottom: 1px; transition: gap 0.15s ease, color 0.15s ease; } .btn-text:hover { gap: 10px; color: var(--color-accent-dark); } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 1.75em; } /* Top utility bar — phone/coverage visible before the visitor even scrolls, sitting above the main header. Not sticky (only the main header is), so it scrolls away rather than permanently eating vertical space. */ .topbar { background: var(--color-primary-dark); color: #fff; } .topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 24px; font-size: 0.85rem; font-weight: 500; } .topbar-coverage { color: #f1e2cd; } .topbar a[data-biz="phone"] { color: #fff; font-weight: 700; text-decoration: none; } .topbar a[data-biz="phone"]:hover { text-decoration: underline; } @media (max-width: 560px) { .topbar .container { font-size: 0.78rem; padding: 7px 20px; } .topbar-coverage { display: none; } } /* Header / nav ----------------------------------------------------------- */ .site-header { position: sticky; top: 0; background: var(--color-accent); z-index: 50; box-shadow: 0 1px 0 rgba(0,0,0,0.15); } /* .btn-primary is the same brass as this header background elsewhere on the header it would vanish, so give the nav's CTA a dark charcoal treatment instead, for a crisp pop against the brass bar. */ .site-header .btn-primary { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .site-header .btn-primary:hover { background: var(--color-primary); } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; } .brand { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; } .brand-mark { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; /* The logo's charcoal + brass tones disappear against the brass header bar, so force it to solid white to stand out instead. */ filter: brightness(0) invert(1); } .nav-toggle { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; padding: 8px 12px; font-weight: 600; color: #fff; cursor: pointer; } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-primary-dark); box-shadow: var(--shadow); flex-direction: column; padding: 8px 20px 20px; } .nav-menu.is-open { display: flex; } .nav-menu a { padding: 12px 0; text-decoration: none; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.15); } .nav-menu a:hover { color: var(--color-accent-light); } .nav-menu a:last-of-type { border-bottom: none; } .nav-menu .btn { margin-top: 12px; text-align: center; } @media (min-width: 860px) { .nav-toggle { display: none; } .nav-menu { display: flex; position: static; flex-direction: row; align-items: center; border: none; box-shadow: none; padding: 0; background: transparent; gap: 28px; } .nav-menu a { border: none; padding: 0; } .nav-menu .btn { margin-top: 0; } /* On the brass header bar, the lighter-gold hover reads too close to the background — swap to dark charcoal for a crisp pop. */ .nav-menu a:hover { color: var(--color-primary-dark); } } /* Hero -------------------------------------------------------------- */ .hero { background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 115%); color: #fff; padding: var(--space-2xl) 0; } .hero .eyebrow { color: var(--color-accent-light); } .hero h1 { color: #fff; } .hero .lede { color: #e5e2da; } .hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid rgba(255,255,255,0.18); } .trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; color: #ece8e0; } .trust-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-accent-light); } /* Compact benefit strip beneath the hero — a distinct band, not part of the hero itself, so it reads as its own reassurance beat. */ .trust-strip { padding: var(--space-md) 0; background: var(--color-primary-light); border-bottom: 1px solid var(--color-border); } .trust-strip-row { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); justify-content: center; } .trust-strip-row span { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; color: var(--color-primary-dark); } .trust-strip-row svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-accent); } /* Full-width closing quote banner — dark, matching the hero, so the page opens and closes on the same strong note rather than trailing off in a plain white section. */ .cta-banner { background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 115%); color: #fff; } .cta-banner h2 { color: #fff; } /* Why Choose AMC: 3 columns x 2 rows on desktop (6 items), centred; 2 columns on tablet, single column on mobile. */ .why-us-grid { text-align: center; justify-items: center; } .why-us-grid .icon-tile { margin-left: auto; margin-right: auto; } @media (min-width: 700px) and (max-width: 999px) { .why-us-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (min-width: 1000px) { .why-us-grid { grid-template-columns: repeat(3, 1fr) !important; } } .badge { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 0.85rem; font-weight: 600; } /* Cards -------------------------------------------------------------- */ .grid { display: grid; gap: var(--space-md); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .card { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md) var(--space-md) 20px; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .card .icon-tile { margin-left: auto; margin-right: auto; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--color-primary-light); } .card h3 { margin-bottom: 0.4em; } .card p { color: var(--color-text-muted); } .card a.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 1em; font-weight: 600; color: var(--color-primary-dark); text-decoration: none; transition: gap 0.15s ease; } .card a.card-link:hover { gap: 10px; color: var(--color-accent-dark); } /* Featured card — used for the priority service so it doesn't read as identical to the rest of the grid. */ .card-featured { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; } .card-featured h3, .card-featured p { color: #fff; } .card-featured p { color: #ddd7c9; } .card-featured .icon-tile { background: rgba(255,255,255,0.14); color: #fff; } .card-featured a.card-link { color: var(--color-accent-light); } .card-featured a.card-link:hover { color: #fff; } .card-featured:hover { border-color: var(--color-accent); } /* Dark card variant applied to a whole grid at once (e.g. the homepage's principal-services row), instead of singling out one card as "featured" against white siblings. */ .cards-dark .card { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; } .cards-dark .card h3, .cards-dark .card p { color: #fff; } .cards-dark .card p { color: #ddd7c9; } .cards-dark .card .icon-tile { background: rgba(255,255,255,0.14); color: #fff; } .cards-dark .card a.card-link { color: var(--color-accent-light); } .cards-dark .card a.card-link:hover { color: #fff; } .cards-dark .card:hover { border-color: var(--color-accent); } .icon-tile { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--color-primary-light); color: var(--color-primary-dark); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: var(--space-sm); } /* Why Choose AMC: custom generated icon graphics, larger than the inline-SVG .icon-tile used elsewhere and with no background box of their own (the artwork already carries its own visual weight). */ .why-icon { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 auto var(--space-sm); } .icon-tile svg { width: 22px; height: 22px; } /* List with check marks --------------------------------------------- */ ul.check-list { list-style: none; margin: 0; padding: 0; } ul.check-list li { padding-left: 30px; position: relative; margin-bottom: 12px; line-height: 1.5; } ul.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-primary); font-weight: 800; } /* Steps ---------------------------------------------------------------- */ .steps { display: grid; gap: var(--space-lg) var(--space-md); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; } .step { position: relative; padding-left: 54px; } .step::before { counter-increment: step; content: counter(step); font-family: var(--font-display); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.05rem; } /* Town chips ------------------------------------------------------------ */ .town-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .town-chip { background: var(--color-white); border: 1px solid var(--color-border); padding: 9px 18px; border-radius: var(--radius-pill); font-weight: 500; font-size: 0.9rem; color: var(--color-text); text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } a.town-chip:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; } /* Callout / editorial panel ------------------------------------------ Deliberately not a filled rounded box like the cards — a left accent border on a plain background reads as an editorial pull-out rather than "content in a box", which keeps sections from all looking the same shape. */ .callout { background: transparent; border: none; border-left: 3px solid var(--color-accent); border-radius: 0; padding: 4px 0 4px 28px; } .callout h2 { margin-bottom: 0.4em; } .callout p { color: var(--color-text-muted); font-size: 1.05rem; } .callout.center { border-left: none; padding: 4px 0; text-align: center; max-width: 700px; margin: 0 auto; } .callout.center .cta-row { justify-content: center; } /* Used where a filled panel genuinely suits the content better (e.g. the contact page's "other ways to reach us" block). */ .callout-filled { background: var(--color-primary-light); border: none; border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); } .callout-filled h2 { margin-bottom: 0.4em; } /* Forms ------------------------------------------------------------- */ .form-field { margin-bottom: 18px; } .form-field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.95rem; } .form-field input, .form-field select, .form-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; background: #fff; color: var(--color-text); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; } .form-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .form-note { font-size: 0.95rem; color: var(--color-text-muted); } .honeypot-field { position: absolute; left: -9999px; top: -9999px; } /* FAQ --------------------------------------------------------------- */ .faq-item { border-bottom: 1px solid var(--color-border); padding: 18px 0; } .faq-item summary { font-weight: 700; cursor: pointer; font-size: 1.05rem; } .faq-item p { margin-top: 12px; color: var(--color-text-muted); } /* Homepage mini-FAQ: centred, per Mark's request, unlike the full FAQ page where left-aligned reads better for longer answer text. */ #mini-faq .faq-item { text-align: center; } #mini-faq .faq-item p { margin-left: auto; margin-right: auto; } /* Floating WhatsApp button ---------------------------------------- */ .whatsapp-float { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(30, 29, 26, 0.35); z-index: 60; transition: transform 0.15s ease, background 0.15s ease; text-decoration: none; } .whatsapp-float:hover { background: var(--color-accent-dark); color: #fff; transform: translateY(-2px); } .whatsapp-float svg { width: 28px; height: 28px; display: block; } @media (max-width: 480px) { .whatsapp-float { right: 14px; bottom: 14px; width: 50px; height: 50px; } .whatsapp-float svg { width: 25px; height: 25px; } } /* Footer -------------------------------------------------------------- */ .site-footer { background: var(--color-primary-dark); color: #e0dcd2; padding: 48px 0 28px; margin-top: 40px; } .site-footer a { color: #fff; text-decoration: none; } .site-footer a:hover { color: var(--color-accent-light); text-decoration: underline; } .footer-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin-bottom: 32px; text-align: center; align-items: start; } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 10px; font-size: 0.95rem; } /* Footer columns as click-to-expand accordions: the heading is a solid brass tab with white text, closed (collapsed) by default — content only shows once clicked. */ .footer-col { text-align: center; } .footer-col-heading { display: block; cursor: pointer; list-style: none; background: var(--color-accent); color: #fff; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 13px 20px; border-radius: var(--radius-pill); transition: background 0.15s ease; } .footer-col-heading::-webkit-details-marker { display: none; } .footer-col-heading::marker { content: ""; } .footer-col-heading:hover { background: var(--color-accent-dark); } .footer-col[open] .footer-col-heading { border-radius: var(--radius-md) var(--radius-md) 0 0; } .footer-col-body { padding-top: 18px; } .social-links { display: flex; gap: 12px; margin-top: 16px; justify-content: center; } .social-link { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.15s ease, color 0.15s ease; } .social-link svg { width: 17px; height: 17px; } .social-link:hover { background: var(--color-accent); color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; font-size: 0.85rem; color: #b5afa1; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; } @media (max-width: 600px) { .footer-bottom { justify-content: center; text-align: center; } } /* Utility -------------------------------------------------------------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } [hidden] { display: none !important; } .page-hero { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); padding: var(--space-xl) 0; } /* Content band: alternating image + short text, used to break up long text-only stretches on the homepage. Reuses .hero-media's rounded-corner photo treatment. */ .content-band { display: grid; gap: var(--space-xl); align-items: center; grid-template-columns: 1fr; text-align: center; } @media (min-width: 860px) { .content-band { grid-template-columns: 1fr 1fr; } .content-band-reverse .content-band-media { order: 2; } } .content-band-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); line-height: 0; } .content-band-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; } /* Hero / page-hero image layouts ---------------------------------- */ .hero-grid { display: grid; gap: var(--space-xl); align-items: center; grid-template-columns: 1fr; } @media (min-width: 860px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } } .hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); line-height: 0; } /* Homepage hero only: give the photo more visual weight and align its top edge with the H1 ("Professional...") instead of sitting centred against the whole text column. Scoped to .hero so it doesn't affect the .page-hero layout used on every other page. */ .hero .hero-grid { align-items: start; } .hero .hero-media { margin-top: 34px; align-self: stretch; } .hero .hero-media img { aspect-ratio: auto; } @media (min-width: 860px) { .hero .hero-grid { grid-template-columns: 0.85fr 1.15fr; } } .hero-trust-card { position: absolute; left: 20px; bottom: 20px; right: 20px; max-width: 260px; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 14px 18px; line-height: 1.4; } .hero-trust-card strong { display: block; font-family: var(--font-body); font-size: 0.95rem; color: var(--color-primary-dark); } .hero-trust-card span { display: block; font-size: 0.82rem; color: var(--color-text-muted); margin-top: 2px; } @media (max-width: 500px) { .hero-trust-card { left: 12px; bottom: 12px; padding: 10px 14px; max-width: calc(100% - 24px); } .hero-trust-card strong { font-size: 0.85rem; } .hero-trust-card span { font-size: 0.75rem; } } .page-hero .hero-media { box-shadow: var(--shadow-md); border: 1px solid var(--color-border); } .hero-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 5 / 4; } .breadcrumb { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 14px; } .breadcrumb a { color: var(--color-text-muted); }