only (not the whole body) — the topbar/header/footer are chrome that should stay put through a navigation, only the content in between fades. `.js` is flipped onto by a tiny blocking inline script in (see base.html / adminhub/base.html / adminhub/login.html) before first paint, so JS-disabled visitors never see a hidden

. static/js/page-transitions.js (loaded on every page, public + Admin Hub) fades

in on load and fades it out before any same-origin link navigation. */ .js main{opacity:0;} main{transition:opacity .25s ease;} .js main.content-visible{opacity:1;} .js main.content-leaving{opacity:0;} @media (prefers-reduced-motion:reduce){ main{transition:none;} } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;overflow-x:hidden;} body{ margin:0; font-family:var(--ff-body); color:var(--ink-800); background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column; } main{flex:1 0 auto;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.2;margin:0 0 .5em;color:var(--ink-900);} p{margin:0 0 1em;} .container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;} .icon{width:18px;height:18px;fill:currentColor;flex-shrink:0;} /* ============ Buttons ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border-radius:999px;font-weight:600;font-size:.95rem; border:2px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; white-space:nowrap; } .btn--primary{background:var(--red-600);color:#fff;} .btn--primary:hover{background:var(--red-700);transform:translateY(-2px);box-shadow:var(--shadow-md);} .btn--outline{border-color:var(--ink-800);color:var(--ink-800);} .btn--outline:hover{background:var(--ink-800);color:#fff;} /* White fill, red border+text — used by "Forgot Password?" on the Admin Hub login card, sized/shaped like the primary Log In button above it rather than reading as a plain inline text link. */ .btn--outline-red{background:#fff;border-color:var(--red-600);color:var(--red-600);} .btn--outline-red:hover{background:var(--red-600);color:#fff;} .btn--outline-red:disabled{background:#fff;border-color:var(--ink-400);color:var(--ink-400);cursor:not-allowed;} .btn--ghost{border-color:rgba(255,255,255,.6);color:#fff;} .btn--ghost:hover{background:rgba(255,255,255,.12);} .btn--lg{padding:15px 30px;font-size:1rem;} .btn--block{width:100%;} .btn--icon{width:44px;height:44px;padding:0;border-radius:10px;} .btn--icon .icon{width:17px;height:17px;fill:none;} /* ============ Site header (topbar + header, both always on screen) ============ */ /* position:fixed, not sticky — html/body's overflow-x:hidden (load-bearing, see below) makes browsers compute overflow-y:auto on both, which breaks position:sticky for descendants. */ .site-header{position:fixed;top:0;left:0;width:100%;z-index:100;} /* ============ Top bar ============ */ .topbar{ background:var(--ink-900);color:#cfd3d8;font-size:.82rem; max-height:60px;overflow:hidden; transition:max-height .25s ease, opacity .2s ease; } .topbar__inner{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;flex-wrap:wrap;gap:6px;} .topbar__contact{display:flex;gap:20px;flex-wrap:wrap;} .topbar__contact a{display:flex;align-items:center;gap:6px;opacity:.9;} .topbar__contact a:hover{opacity:1;color:var(--amber-500);} .topbar__contact .icon{width:14px;height:14px;} .topbar__social{display:flex;align-items:center;gap:20px;} /* padding+negative-margin grows the tappable area to ~44x44 without changing the icon's visual size/position or affecting sibling layout (the margin box — what governs flex sizing/spacing — nets back to the original 24x24 footprint since the negative margin exactly cancels the added padding). */ .topbar__social a{display:flex;opacity:.9;transition:opacity .15s ease;padding:10px;margin:-10px;} .topbar__social a:hover{opacity:1;} .topbar__social .icon{width:24px;height:24px;} a.instagram-icon{color:var(--red-600);} a.instagram-icon:hover{color:var(--red-700);} a.whatsapp-icon{color:#25d366;} a.whatsapp-icon:hover{color:#1ebe5b;} .site-header.is-scrolled .topbar{max-height:0;opacity:0;} /* ============ Header ============ */ .header{ background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:20px;transition:padding .25s ease;} .site-header.is-scrolled .header__inner{padding:8px 16px;} .logo{display:flex;align-items:center;gap:10px;} .logo__img{height:42px;width:auto;display:block;transition:height .25s ease;} .logo--footer .logo__img{height:44px;} .site-header.is-scrolled .logo__img{height:32px;} .nav{display:flex;gap:20px;margin-left:32px;} .nav a{font-weight:500;font-size:.95rem;color:var(--ink-600);position:relative;padding:4px 0;} .nav a:hover{color:var(--red-600);} .nav a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red-600);transition:width .2s ease;} .nav a:hover::after{width:100%;} .nav a.active{color:var(--red-600);text-shadow:0 0 10px rgba(200,30,30,.55);} .nav a.active::after{width:100%;} .header__actions{display:flex;align-items:center;gap:12px;} /* Drawer-only "Get Brochure", below the link list — hidden here (desktop, where .nav is just an inline row of links); shown at the drawer breakpoint below. */ .nav__brochure-link{display:none;} /* Logo shown above the link list inside the mobile drawer — a normal-flow .nav child, so it's positioned automatically without fighting the fixed header's own stacking (see the drawer media query below for why it's hidden on desktop, where .nav is just an inline row of links). */ .nav__brand{display:none;} /* Box grown to a ~44x44 touch target (from an effective ~34x28px); flex-centering keeps the 3 visual bars (22x2px, unchanged) centered in the larger box instead of just padding out unevenly. */ .nav__toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;width:44px;height:44px;padding:0;} .nav__toggle span{width:22px;height:2px;background:var(--ink-900);border-radius:2px;transition:transform .25s ease, opacity .2s ease;} /* Hamburger-to-X: bars 1/3 rotate into an X, middle bar fades out — the visible "cancel mark" confirming the drawer is open and this same button closes it. .open is toggled by static/js/site.js alongside .nav/.nav-overlay's own .open class. 7px = span height (2px) + gap (5px), so the top/bottom bars land exactly on the middle bar's line. */ .nav__toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav__toggle.open span:nth-child(2){opacity:0;} .nav__toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ============ Hero (brand strip + intro share one bg image) ============ */ .hero{position:relative;color:#fff;padding-top:10px;overflow:hidden;} .hero__bg{position:absolute;inset:0;} /* Background slideshow: stacked layers crossfaded by site.js on a 5s interval (see the hero background slideshow block there). Each layer's image is DB-driven (HeroSlide), set as an inline background-image style by includes/hero-bg-slideshow.html rather than a fixed --N rule here. */ .hero__bg-slide{ position:absolute;inset:0;background-position:center;background-size:cover; background-repeat:no-repeat;opacity:0;transition:opacity 1.2s ease; } .hero__bg-slide.is-active{opacity:1;} .hero__overlay{ position:absolute;inset:0; background:linear-gradient(120deg, rgba(16,18,21,.92) 30%, rgba(122,14,14,.75)); } /* Brand strip is the hero's own first flow child now (not a separate section with its own white background) — sits directly on the shared bg image/overlay, so it needs the same relative+z-index treatment as .hero__content to render above them, and light-colored logo/text. */ .hero-brand{position:relative;z-index:2;padding:36px 0 16px;} .hero-brand__inner{display:flex;align-items:center;justify-content:center;gap:22px;} .hero-brand__logo .logo__img{height:76px;width:auto;display:block;} .hero-brand__text{display:flex;flex-direction:column;gap:6px;} .hero-brand__name{font-family:var(--ff-display);font-weight:700;font-size:2rem;color:#fff;line-height:1.1;} .hero-brand__tagline{ text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;font-weight:700;color:var(--amber-500); } .hero__content{position:relative;z-index:2;padding:24px 24px 120px;max-width:950px;} .eyebrow{ display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700; color:var(--red-600);margin-bottom:14px; } .eyebrow--light{color:var(--amber-500);} .hero h1{font-size:clamp(2.1rem,5vw,3.4rem);color:#fff;text-align:center;} .hero__lead{ text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;font-weight:700;color:var(--amber-500); max-width:720px;margin-left:auto;margin-right:auto;text-align:center; } .hero__cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px;justify-content:center;} /* Hidden on desktop (its own Free Consultation button already lives in the header) — shown only at the 600px breakpoint below, the same one that turns .hero__cta into a column, so this slots in as a natural third stacked button rather than needing its own separate placement logic. */ .hero__cta-mobile-only{display:none;} .stats{position:relative;z-index:2;background:var(--ink-900);border-top:1px solid rgba(255,255,255,.08);} .stats__grid{display:grid;grid-template-columns:repeat(4,1fr);padding:26px 24px;} .stats__grid--2{grid-template-columns:repeat(2,1fr);max-width:420px;margin:0 auto;} .stats__grid--3{grid-template-columns:repeat(3,1fr);max-width:620px;margin:0 auto;} .stat{text-align:center;color:#fff;border-right:1px solid rgba(255,255,255,.1);} .stat:last-child{border-right:none;} .stat__num,.stat__suffix{font-family:var(--ff-body);font-size:2rem;font-weight:700;color:var(--amber-500);} .stat__label{display:block;font-size:.82rem;color:#c7cad0;margin-top:4px;} /* ============ Sections ============ */ .section{padding:90px 0;} .section--tint{background:var(--tint);} .section--dark{background:var(--dark);} .section--flush-bottom{padding-bottom:0;} .text-light{color:#fff;} .section__sub--light{color:#c7cad0;} .section__head{max-width:640px;margin:0 auto 50px;text-align:center;} .section__head .eyebrow{display:block;} .section__sub{color:var(--ink-600);} /* ============ About intro (team photo backdrop) ============ */ .about-intro{position:relative;overflow:hidden;} /* Temporary stand-in background until the client provides a real team photo */ .about-intro__bg{position:absolute;inset:0;z-index:0;background:url(../image/brochure-equipment-lineup.jpg) center/cover no-repeat;} .about-intro__overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg, rgba(16,18,21,.6) 0%, rgba(16,18,21,.78) 55%, rgba(16,18,21,.94) 100%);} .about-intro__content{position:relative;z-index:1;margin-bottom:140px;} .about-intro__content .eyebrow{color:var(--amber-500);} .about-intro__content h1{color:#fff;} .about-intro__content .section__sub{color:#e7e5e2;} /* ============ Consultation intro (photo backdrop) ============ */ .consultation-intro{position:relative;overflow:hidden;min-height:382px;display:flex;align-items:center;} .consultation-intro__bg{position:absolute;inset:0;z-index:0;background:url(../image/consultation-intro-bg.jpg) center/cover no-repeat;} .consultation-intro__overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg, rgba(16,18,21,.6) 0%, rgba(16,18,21,.78) 55%, rgba(16,18,21,.94) 100%);} .consultation-intro__content{position:relative;z-index:1;margin:0 auto;} .consultation-intro__content h1{color:#fff;} .consultation-intro__content .section__sub{color:#e7e5e2;} /* ============ About ============ */ .about{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;} .about__media{position:relative;} .about__img{aspect-ratio:1200/551;width:100%;object-fit:cover;border-radius:var(--radius);display:block;box-shadow:var(--shadow-md);} .about__badge{ position:absolute;top:-24px;left:-24px;background:var(--ink-900);color:var(--amber-500); border-radius:var(--radius);padding:20px 40px;box-shadow:var(--shadow-md); display:flex;flex-direction:column;align-items:center;justify-content:center; line-height:1.1;min-width:160px; animation:badge-float-x 2.8s ease-in-out infinite; } @keyframes badge-float-x{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(35px);} } .about__badge strong{font-family:var(--ff-body);font-size:2.2rem;color:var(--amber-500);} .about__badge span{font-size:.85rem;opacity:.9;} .about__pic{ position:absolute;width:200px;aspect-ratio:4/3;object-fit:cover; border-radius:var(--radius);border:4px solid #fff;box-shadow:var(--shadow-md); } .about__pic--tl{top:-24px;left:-24px;} .about__pic--br{bottom:-24px;right:-24px;} .about__media .map{margin-top:40px;} .check-list li{position:relative;padding-left:28px;margin-bottom:10px;color:var(--ink-600);} .section--dark .check-list li, .fire-risk .check-list li{color:#c7cad0;} .check-list li::before{ content:'';position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%; background:var(--red-600); } .check-list li::after{ content:'';position:absolute;left:5px;top:8px;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg); } .check-list--columns{columns:2;column-gap:40px;} /* Prevents a single

splitting across the two columns at tablet widths (~861-1024px, where the 2-column layout is active); scoped to the --columns variant only, not the base .check-list used elsewhere in a single column where this can't happen anyway. */ .check-list--columns li{break-inside:avoid;-webkit-column-break-inside:avoid;} /* ============ Mission & Vision ============ */ /* Reuses includes/hero-bg-slideshow.html verbatim (same .hero__bg/ .hero__bg-slide classes, same DB-driven HeroSlide photos as the Home hero) — this section just needs position:relative to anchor it and its own dark overlay + z-index:2 content wrapper, mirroring .hero's own working stacking order (bg, then overlay, both z-index:auto painted in DOM order; content explicitly raised above both) rather than inventing a new pattern. */ .mission-vision{position:relative;overflow:hidden;} .mission-vision__overlay{ position:absolute;inset:0; background:linear-gradient(180deg, rgba(16,18,21,.6) 0%, rgba(16,18,21,.78) 55%, rgba(16,18,21,.94) 100%); } .mission-vision__content{position:relative;z-index:2;} /* Same pattern as .mission-vision — bg slideshow behind the Services page's 8 cards. border-top divides it from the Brands section above. */ .services-cards{position:relative;overflow:hidden;border-top:4px solid #000;} .services-cards__overlay{ position:absolute;inset:0; background:linear-gradient(180deg, rgba(16,18,21,.6) 0%, rgba(16,18,21,.78) 55%, rgba(16,18,21,.94) 100%); } .services-cards__content{position:relative;z-index:2;} /* Same pattern as .mission-vision/.services-cards — bg slideshow behind the Services page's Fire Risk Assessment section. */ .fire-risk{position:relative;overflow:hidden;} .fire-risk__overlay{ position:absolute;inset:0; /* Darker than .mission-vision__overlay/.services-cards__overlay's shared .6/.78/.94 gradient — this section's slide photos are busier (people, vehicles) right behind the paragraph text, which wasn't legible at the lighter opacity. */ background:linear-gradient(180deg, rgba(16,18,21,.82) 0%, rgba(16,18,21,.9) 55%, rgba(16,18,21,.96) 100%); } .fire-risk__content{position:relative;z-index:2;} .fire-risk__content .section__sub{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);} /* ============ Services grid ============ */ .grid{display:grid;gap:26px;} .grid--services{grid-template-columns:repeat(3,1fr);gap:32px;} .grid--mission{grid-template-columns:repeat(2,1fr);} .card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } /* Public Services cards are rendered as so the whole card is clickable (Admin Hub's version of .card stays a

placeholder — needs its own fixed aspect-ratio since there's no image to size it. */ div.service-detail__media{ aspect-ratio:4/3;border:2px dashed var(--line);background:var(--tint); display:flex;align-items:center;justify-content:center;text-align:center; color:var(--ink-600);font-size:.85rem;padding:20px; } /* Real photos size to their own natural aspect ratio instead of a fixed box — these are arbitrary uploaded photos (e.g. a wide collage) and a forced 4:3 box either cropped them (object-fit:cover) or left visible letterbox bands around them (object-fit:contain). Full width, natural height shows the whole image with no leftover space either way. */ img.service-detail__media{width:100%;height:auto;display:block;} /* Frames a real detail photo in the same black-card language as the /services/ cards (.grid--services .card) — bg #000, var(--radius), var(--shadow-md) — minus the link/hover-wipe behavior, since this is a static content photo, not a clickable card. */ .service-detail__media-card{ position:relative;background:#000;border-radius:var(--radius);padding:6px;box-shadow:var(--shadow-md); } .service-detail__media-card .service-detail__media{border-radius:calc(var(--radius) - 3px);} /* Small corner inset photo, bottom-right this time — same shadow/rounded language as the main card, no animation (unlike the earlier top-left floating badge on Fire Alarm System, which was removed). */ .service-detail__media-badge{ position:absolute;bottom:-24px;right:-24px; border:2px solid #fff;border-radius:var(--radius);box-shadow:var(--shadow-md); width:170px;aspect-ratio:4/3;overflow:hidden; } .service-detail__media-badge img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block;} @media (max-width:480px){ .service-detail__media-badge{bottom:-16px;right:-12px;width:120px;} } .service-detail__included{margin-top:28px;} .service-detail__included h2{margin-bottom:16px;} .service-detail__body{color:var(--ink-800);font-size:1rem;line-height:1.75;font-weight:600;} .service-detail__body p{margin:0 0 1.3em;} .service-detail__body p:last-child{margin-bottom:0;} .service-detail__body p:first-of-type::first-letter{ font-family:var(--ff-display);font-weight:700;color:var(--ink-900); font-size:3.8rem;line-height:.78;float:left;padding-right:10px; } .service-detail__included .check-list li{font-weight:600;} @media (max-width:860px){ .service-detail{grid-template-columns:1fr;gap:0;} .service-detail__media{margin-bottom:24px;} } .lead-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;} .lead-tab{ padding:10px 20px;border-radius:999px;border:2px solid var(--ink-800); background:transparent;color:var(--ink-800);font-weight:600;font-size:.9rem; cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease; } .lead-tab:hover{background:var(--ink-800);color:#fff;} .lead-tab.is-active{background:var(--red-600);border-color:var(--red-600);color:#fff;} /* .section's default 90px top/bottom padding, stacked between the tabs' section and each panel's own section, left a huge dead gap before the table (each panel also repeated its own now-removed heading — the tab button already names it) — tightened just for the Leads page instead of touching .section globally. */ .leads-header{padding-bottom:20px;} [data-lead-panel]{padding-top:20px;padding-bottom:60px;} .cert-table-wrap{overflow-x:auto;border:1px solid var(--ink-400);border-radius:var(--radius);background:#fff;} .cert-table{width:100%;border-collapse:collapse;} .cert-table th,.cert-table td{padding:16px 20px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--ink-400);overflow-wrap:anywhere;} .cert-table tr:last-child td{border-bottom:none;} .cert-table tr:target{background:var(--tint);} .cert-table th{background:var(--ink-900);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#fff;font-weight:700;} .cert-table__name{font-weight:700;color:var(--ink-900);} .cert-table__desc{color:var(--ink-600);font-size:.9rem;} .cert-table__meta{color:var(--ink-400);font-weight:600;font-size:.85rem;white-space:nowrap;} .cert-table__preview{width:1%;} .cert-table__preview a{ position:relative;display:block;width:64px;aspect-ratio:210/297;background:var(--tint); border-radius:8px;overflow:hidden;cursor:zoom-in; } .cert-table__preview img{width:100%;height:100%;object-fit:contain;} .cert-table__preview a::after{ content:"View"; position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(20,18,16,.55);color:#fff;font-size:.7rem;font-weight:600; opacity:0;transition:opacity .2s ease; } .cert-table__preview a:hover::after{opacity:1;} /* Same touch-visibility treatment as .cert-card__img::after above. */ @media (hover:none){ .cert-table__preview a::after{opacity:1;} } .cert-table__action{width:1%;white-space:nowrap;} /* Prev/Next month buttons below the Home dashboard's daily-breakdown table. justify-content:space-between pins Previous to the table's left edge and Next to its right edge, mirroring the table's own corners rather than sitting side by side. Left/Previous always renders (no bound on how far back an admin can look); when Right/Next isn't in the DOM at all (current month — see AdminHubHomeView), space-between still leaves Previous correctly pinned left with a lone flex item. */ .breakdown-nav{display:flex;justify-content:space-between;margin-top:20px;} /* Leads-page table pagination (Survey/Contact/Consultation/Resolved) — centered Prev/status/Next, unlike .breakdown-nav's corner-pinned arrows, since both ends are always meaningful here (Prev/Next disable at the bounds rather than one of them disappearing). */ .lead-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px;} .lead-pagination__status{font-size:.9rem;font-weight:600;color:var(--ink-600);} .lead-pagination__prev:disabled,.lead-pagination__next:disabled{opacity:.35;cursor:not-allowed;} .lead-pagination__prev:disabled:hover,.lead-pagination__next:disabled:hover{background:transparent;color:var(--ink-800);} /* #breakdownTable is swapped out wholesale (not diffed) whenever a Previous/Next click fetch()es a new month, so this transition targets the element itself rather than any child — see breakdown-table.html's script. */ #breakdownTable{opacity:1;transition:opacity .18s ease;} #breakdownTable.is-loading{opacity:0;} /* Same fade treatment on the Leads-page tables' Prev/Next (leads.html's script), even though that pagination is pure client-side (rows already in the DOM, just re-hidden) rather than a fetch() swap like #breakdownTable above — the fade is what actually reads as "smooth" to the user, not the network round-trip. [data-lead-panel] gets the same treatment for the Survey/Contact/Consultation/Resolved tab buttons themselves, not just pagination within one tab. */ .cert-table-wrap,[data-lead-panel]{opacity:1;transition:opacity .18s ease;} .cert-table-wrap.is-loading,[data-lead-panel].is-loading{opacity:0;} @media (prefers-reduced-motion:reduce){ #breakdownTable,.cert-table-wrap,[data-lead-panel]{transition:none;} } /* ============ Brochure ============ */ .brochure-icon{display:block;width:180px;margin:0 auto;color:var(--red-600);transition:transform .2s ease;} .brochure-icon:hover{transform:translateY(-6px);} .brochure-icon svg{width:100%;height:auto;fill:currentColor;filter:drop-shadow(var(--shadow-md));} .brochure-download{text-align:center;margin-top:32px;} /* ============ Contact ============ */ .contact{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:start;} .contact__item{display:flex;align-items:center;gap:12px;margin-bottom:16px;color:var(--ink-600);} .contact__item .icon{color:var(--red-600);width:20px;height:20px;} .map{margin-top:24px;width:100%;aspect-ratio:16/10;border:1px solid var(--ink-400);border-radius:var(--radius);} .map-open-link{display:inline-block;margin-top:10px;font-size:.85rem;font-weight:600;color:var(--red-600);text-decoration:none;} .map-open-link:hover{text-decoration:underline;} /* A same-size text link embedded inside body copy (e.g. a sentence in a