.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

.announcement-bar { background: var(--color-brand, #000); color: #fff; text-align: center; padding: 0.625rem 1rem; font-size: 0.875rem; position: relative; z-index: 600; }
.announcement-bar p { margin: 0; }
.countdown-bar { text-align: center; padding: 0.7rem 1.25rem; font-size: 0.875rem; position: relative; z-index: 600; }
.countdown-inner { margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.countdown-label { font-weight: 600; font-size: 0.9rem; opacity: 0.92; white-space: nowrap; }
.countdown-units { display: flex; align-items: center; gap: 0.35rem; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: 0.3rem 0.6rem; min-width: 48px; backdrop-filter: blur(4px); }
.countdown-num { font-size: 1.35rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.countdown-unit-lbl { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-top: 0.1rem; }
.countdown-colon { font-size: 1.2rem; font-weight: 800; opacity: 0.6; line-height: 1; padding-bottom: 0.5rem; }

.site-header { background: var(--color-navbar-bg, #111827); border-bottom: 1px solid rgba(255,255,255,0.08); position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 16px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.15); }
.site-header .container { max-width: var(--navbar-max-width, 100%); padding: 0 3.5rem; }
.site-header .site-logo { background: none; -webkit-text-fill-color: #38bdf8; color: #38bdf8; }
.site-nav { display: flex; align-items: center; padding: 0.875rem 0; position: relative; }
.site-logo { font-weight: 800; font-size: 1.5rem; text-decoration: none; letter-spacing: -0.025em; display: inline-block; background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: opacity 0.2s, transform 0.2s; }
.site-nav .site-logo:hover { opacity: 0.8; transform: scale(1.04); }
.nav-right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; position: relative; z-index: 10; }
.nav-quote-btn { font-size: 0.875rem !important; padding: 0.5rem 1.1rem !important; min-height: 38px !important; background: #38bdf8 !important; color: #fff !important; }
.nav-quote-btn:hover { background: #0ea5e9 !important; color: #fff !important; }
.nav-history-btn { font-size: 0.875rem !important; padding: 0.5rem 1.1rem !important; min-height: 38px !important; background: transparent !important; color: #38bdf8 !important; border: 1.5px solid rgba(56,189,248,0.4) !important; }
.nav-history-btn:hover { background: rgba(56,189,248,0.1) !important; border-color: #38bdf8 !important; color: #38bdf8 !important; opacity: 1 !important; transform: none !important; }
/* The catalogue CTA is the one thing on this nav that has to be noticed, so it is lit and it
   blinks: two seconds of blinking, three at rest, two more, then five at rest. box-shadow is
   deliberately NOT !important here - an !important declaration beats a CSS animation, which
   would silently kill the blink. The specificity of .site-header is what beats .btn-secondary
   in components.css, which loads after this file. */
.nav-account-btn { font-size: 0.875rem !important; padding: 0.5rem 1.1rem !important; min-height: 38px !important; background: transparent !important; color: #7dd3fc !important; border: 1.5px solid rgba(125,211,252,0.85) !important; }
.site-header .nav-account-btn { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); animation: nav-account-blink 12s linear infinite; }
.nav-account-btn:hover { background: rgba(56,189,248,0.12) !important; border-color: #bae6fd !important; color: #e0f2fe !important; opacity: 1 !important; transform: none !important; }
.site-header .nav-account-btn:hover { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); animation: none; }
@keyframes nav-account-blink {
  0.0% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); }
  2.0833% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  4.1667% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); }
  6.25% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  8.3333% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); }
  10.4167% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  12.5% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); }
  14.5833% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  16.6667% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  16.6667% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); }
  41.6658% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  41.6667% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); }
  43.75% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  45.8333% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); }
  47.9167% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  50.0% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); }
  52.0833% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  54.1667% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); }
  56.25% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  58.3333% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  58.3333% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); }
  99.9992% { box-shadow: 0 0 0 rgba(56,189,248,0), inset 0 0 0 rgba(56,189,248,0); }
  100.0% { box-shadow: 0 0 16px rgba(56,189,248,0.9), 0 0 34px rgba(56,189,248,0.55), inset 0 0 16px rgba(56,189,248,0.28); }
}
/* something that blinks forever is a problem for anyone who asked the OS to stop motion */
@media (prefers-reduced-motion: reduce) { .site-header .nav-account-btn { animation: none; } }
.nav-book-btn { font-size: 0.875rem !important; padding: 0.5rem 1.1rem !important; min-height: 38px !important; background: #0ea5e9 !important; color: #fff !important; box-shadow: 0 2px 10px rgba(14,165,233,0.4) !important; }
.nav-book-btn:hover { background: #0284c7 !important; color: #fff !important; box-shadow: 0 4px 16px rgba(14,165,233,0.55) !important; }
.nav-menu-book-btn { display: block; text-align: center; background: #0ea5e9 !important; color: #fff !important; font-weight: 700 !important; border-radius: var(--radius-md); box-shadow: 0 2px 10px rgba(14,165,233,0.35); }
.nav-menu-book-btn:hover { background: #0284c7 !important; transform: scale(1.04) !important; }
.nav-menu { display: none; list-style: none; margin: 0; padding: 0.375rem; gap: 0.1rem; flex-direction: column; position: absolute; top: calc(100% + 0.25rem); right: 0; width: auto; min-width: 184px; background: var(--color-navbar-bg, #111827); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 499; }
.nav-menu.nav-open { display: flex; }
.nav-menu li { width: 100%; }
.nav-menu a { display: block; white-space: nowrap; text-decoration: none; color: #38bdf8; font-size: 1rem; font-weight: 500; padding: 0.52rem 1rem; border-radius: var(--radius-md); transition: all 0.18s ease; }
.nav-menu a:hover { background: #38bdf8; color: #fff; transform: scale(1.07); }
.nav-menu a.active { font-weight: 800; color: #fff; font-size: 1.08rem; text-decoration: none; background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); border-radius: var(--radius-md); box-shadow: 0 0 10px rgba(14,165,233,0.45), 0 0 22px rgba(99,102,241,0.35), 0 0 40px rgba(139,92,246,0.2); }
.nav-menu a.active:hover { color: #fff; }
@media (max-width: 480px) { .site-header .site-logo { font-size: 1rem !important; } .container { padding: 0 0.75rem; } .site-header .container { padding: 0 1rem; } .booking-page .container { padding: 0; } }
@media (max-width: 380px) { .site-header .container { padding: 0 1rem; } .site-header .site-logo { font-size: 0.82rem !important; } .nav-toggle-label { display: none; } }
/* Phones: the two header CTAs have long labels ("See the 21 Sites", "Contact EZWebee"), and side
   by side they wrapped onto three lines and tripled the header height. The secondary one goes -
   Front-Ends is in the hamburger menu anyway - and the contact CTA is kept and stopped from
   wrapping, because it is the whole point of the page. Below 380 there is no room for it either
   and Contact is in the menu too. Specificity has to beat .btn in components.css, which loads
   after this file. */
/* 2026-09-26: the catalogue button stays on phones under a one-word label - hiding it left the
   catalogue reachable only from inside the menu. Contact is the one that goes below 380. */
.nav-lbl-short { display: none; }
@media (max-width: 640px) {
  .nav-lbl-long { display: none; } .nav-lbl-short { display: inline; }
  .site-header .nav-account-btn { white-space: nowrap; padding: 0.45rem 0.8rem !important; font-size: 0.8rem !important; min-height: 34px !important; }
  .site-header .nav-book-btn { white-space: nowrap; padding: 0.55rem 0.9rem; font-size: 0.85rem; }
}
@media (max-width: 380px) { .site-header .nav-book-btn { display: none; } }
.nav-toggle { display: flex; flex-direction: row; align-items: center; gap: 0.45rem; background: none; border: none; padding: 0.5rem; cursor: pointer; }
.nav-bars { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.nav-toggle-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; color: #38bdf8; transition: opacity 0.25s; user-select: none; }
.nav-toggle.nav-open .nav-toggle-label { opacity: 0; pointer-events: none; }
.bar { display: block; width: 24px; height: 3px; background: #38bdf8; border-radius: 2px; transition: transform 0.35s ease, opacity 0.25s ease; }
.nav-toggle.nav-open .bar-1 { transform: translateY(8px) rotate(45deg); }
.nav-toggle.nav-open .bar-2 { opacity: 0; }
.nav-toggle.nav-open .bar-3 { transform: translateY(-8px) rotate(-45deg); }

.hero { background: #0f172a; padding: 7rem 1.5rem; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.12) 0%, transparent 65%); pointer-events: none; }
.hero-content { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.hero-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.05; margin-bottom: 1.25rem; color: #fff; letter-spacing: -0.02em; }
.hero-subtitle { font-size: clamp(1rem, 2.5vw, 1.2rem); color: rgba(255,255,255,0.6); margin-bottom: 2.5rem; max-width: 580px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.home-hero { background: #fff; padding: 2rem 1rem; }
.home-hero-inner { max-width: 1200px; margin: auto; display: grid; gap: 4rem 1rem; }
.home-hero-img { position: relative; overflow: visible; }
.home-hero-img img { width: 540px; height: 540px; object-fit: cover; margin-inline: auto; border-radius: 9999px; display: flex; box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.3); }
.home-hero-text h1 { font-size: 3.5rem; font-weight: 800; line-height: 4rem; color: var(--color-brand); margin-bottom: 1rem; text-align: center; }
.home-hero-text p { font-size: 1.15rem; font-weight: 500; line-height: 1.8rem; color: #2a8dba; text-align: center; margin-bottom: 2rem; }
.home-hero-text .hero-actions { justify-content: center; margin-bottom: 2rem; }
.hero-para { text-align: center; font-size: 1.1rem; font-weight: 600; color: #333; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
@media (min-width: 800px) { .home-hero-inner { grid-template-columns: repeat(2, 1fr); align-items: center; } .home-hero-text { grid-area: 1/1/2/2; } .home-hero-text h1, .home-hero-text p { text-align: left; } .home-hero-text .hero-actions { justify-content: flex-start; } }

.services-ticker { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); padding: 1.35rem 0; overflow: hidden; }
@keyframes servicesTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.services-ticker-track { display: flex; gap: 4rem; width: max-content; animation: servicesTicker 30s linear infinite; white-space: nowrap; }
.services-ticker-track span { font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.9); }
.benefits-ticker { background: linear-gradient(135deg, #111827 0%, #1e3a5f 100%); padding: 1.35rem 0; overflow: hidden; }
@keyframes benefitsTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.benefits-ticker-track { display: flex; gap: 4rem; width: max-content; animation: benefitsTicker 35s linear infinite; white-space: nowrap; }
.benefits-ticker-track span { font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.9); }
.hero-with-media .hero-content { position: relative; z-index: 2; }
.hero-media-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero-overlay { position: absolute; inset: 0; background: #000; pointer-events: none; z-index: 1; }
.hero-video-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-video-bg video { width: 100%; height: 100%; object-fit: cover; }
.hero-video-bg iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; pointer-events: none; border: none; }

/* Design-wall hero - the catalogue is the backdrop */
.design-wall-hero { min-height: 84vh; padding: 5rem 1.5rem; display: flex; align-items: center; justify-content: center; background: #060b18; }
.design-wall-hero::before { display: none; }
.dwh-wall { position: absolute; inset: -8%; z-index: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; transform: rotate(-4deg) scale(1.14); }
.dwh-row { overflow: hidden; }
.dwh-track { display: flex; width: max-content; will-change: transform; }
.dwh-track img { width: 260px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; display: block; flex-shrink: 0; margin-right: 16px; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,0.55); }
.dwh-row-a .dwh-track { animation: dwhDrift 72s linear infinite; }
.dwh-row-b .dwh-track { animation: dwhDrift 94s linear infinite reverse; }
.dwh-row-c .dwh-track { animation: dwhDrift 81s linear infinite; }
@keyframes dwhDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.dwh-veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 50%, rgba(6,11,24,0.90) 0%, rgba(6,11,24,0.80) 42%, rgba(6,11,24,0.96) 100%); }
.dwh-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; text-align: center; }
.dwh-badge { display: inline-flex; align-items: center; padding: 0.4rem 1.05rem; border-radius: 9999px; border: 1px solid rgba(56,189,248,0.75); box-shadow: 0 0 18px rgba(56,189,248,0.28); background: rgba(56,189,248,0.10); color: rgba(255,255,255,0.88); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(4px); margin-bottom: 1.6rem; }
.dwh-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin: 0 0 1.25rem; }
.dwh-price { background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 55%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dwh-text { font-family: 'Lora', Georgia, 'Times New Roman', serif; font-size: clamp(0.95rem, 1.6vw, 1.1rem); line-height: 1.75; color: rgba(255,255,255,0.75); margin: 0 auto 2rem; max-width: 620px; }
.dwh-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.dwh-cta a { display: inline-flex; align-items: center; justify-content: center; padding: 0.95rem 2rem; border-radius: 999px; font-weight: 700; font-size: 0.98rem; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; }
.dwh-cta a:hover { transform: translateY(-2px); }
.dwh-cta-primary { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); color: #fff; box-shadow: 0 12px 30px rgba(37,99,235,0.48); }
.dwh-cta-secondary { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.42); backdrop-filter: blur(6px); }
.dwh-cta-secondary:hover { background: rgba(255,255,255,0.18); }
.dwh-note { font-size: 0.82rem; color: rgba(186,230,253,0.92); margin: 1.6rem auto 0; max-width: 560px; line-height: 1.6; text-shadow: 0 0 16px rgba(56,189,248,0.55), 0 0 34px rgba(56,189,248,0.30); }
@media (max-width: 760px) { .design-wall-hero { min-height: 78vh; padding: 4rem 1.25rem; } .dwh-track img { width: 168px; margin-right: 11px; border-radius: 8px; } .dwh-wall { gap: 11px; } .dwh-cta a { padding: 0.8rem 1.4rem; font-size: 0.9rem; } }
@media (prefers-reduced-motion: reduce) { .dwh-track { animation: none !important; } }


.page-hero h1 { margin-bottom: 0.75rem; color: #fff; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; }
.page-hero p { color: rgba(255,255,255,0.6); margin: 0; font-size: 1rem; }

.section { padding: 5rem 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.section-header h2 { margin: 0; }

main { display: flex; flex-direction: column; }
main > *:last-child { margin-bottom: 0 !important; }

/* ── FOOTER ── */
.site-footer { background: linear-gradient(180deg, #000000 0%, #060b18 60%, #000000 100%); color: #fff; padding: 0; margin-top: 0; position: relative; }
.footer-glow-bar { height: 2px; background: linear-gradient(90deg, transparent 0%, #1d4ed8 25%, #38bdf8 50%, #7c3aed 75%, transparent 100%); box-shadow: 0 0 24px rgba(56,189,248,0.5), 0 0 48px rgba(56,189,248,0.2); }
.site-footer .container { padding-top: 4.5rem; padding-bottom: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3.5rem; }

/* Brand column */
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-logo { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.75rem; text-decoration: none; background: linear-gradient(90deg, #38bdf8, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; letter-spacing: -0.03em; }
.footer-tagline { color: rgba(255,255,255,0.4); font-size: 0.875rem; line-height: 1.7; margin: 0; max-width: 280px; }
.footer-cta { display: inline-flex; align-items: center; gap: 0.4rem; background: linear-gradient(135deg, #1d4ed8, #0ea5e9); color: #fff; font-size: 0.85rem; font-weight: 700; padding: 0.6rem 1.25rem; border-radius: 999px; text-decoration: none; width: fit-content; transition: opacity 0.2s, transform 0.2s; letter-spacing: 0.01em; }
.footer-cta:hover { opacity: 0.88; transform: translateY(-2px); }
.footer-socials { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.footer-socials a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.55); font-size: 1rem; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.footer-socials a:hover { background: #0ea5e9; border-color: #0ea5e9; color: #fff; transform: translateY(-3px); }

/* Columns */
.footer-col { display: flex; flex-direction: column; }
.footer-col-title { font-family: 'Raleway', sans-serif; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.35); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.6rem; border-bottom: 1.5px solid #38bdf8; width: fit-content; }
.footer-col-title i { color: #38bdf8; font-size: 0.9rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col ul li a,
.footer-col ul li .footer-contact-item { display: flex; align-items: center; gap: 0.55rem; color: rgba(255,255,255,0.45); font-size: 0.875rem; text-decoration: none; transition: color 0.2s, gap 0.2s; line-height: 1.4; }
.footer-col ul li a i,
.footer-col ul li .footer-contact-item i { color: #38bdf8; font-size: 0.95rem; flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s; }
.footer-col ul li a:hover { color: #fff; gap: 0.75rem; }
.footer-col ul li a:hover i { opacity: 1; }
.footer-contact-item { cursor: default; }

/* Bottom bar */
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.footer-bottom p { color: #fff; font-size: 0.78rem; margin: 0; }
.footer-legal a { color: rgba(255,255,255,0.25); text-decoration: none; font-size: 0.78rem; transition: color 0.2s; }
.footer-legal a:hover { color: rgba(255,255,255,0.7); }

/* Mailing-list capture band — sits directly above the footer on every page */
.subscribe-band { background: linear-gradient(135deg, #0a1628 0%, #1e3a8a 50%, #0a1628 100%); border-top: 1px solid rgba(255,255,255,0.06); padding: 3rem 0; }
.subscribe-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.subscribe-copy { flex: 1 1 320px; }
.subscribe-title { color: #fff; font-size: 1.5rem; margin: 0 0 0.35rem; display: flex; align-items: center; gap: 0.5rem; }
.subscribe-title i { color: #38bdf8; }
.subscribe-sub { color: rgba(255,255,255,0.7); font-size: 0.95rem; margin: 0; }
.subscribe-form { flex: 1 1 340px; display: flex; gap: 0.6rem; flex-wrap: wrap; max-width: 460px; }
.subscribe-input { flex: 1 1 200px; min-width: 0; padding: 0.85rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: #fff; font-size: 0.95rem; }
.subscribe-input::placeholder { color: rgba(255,255,255,0.4); }
.subscribe-input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.2); }
.subscribe-btn { flex: 0 0 auto; padding: 0.85rem 1.6rem; }
/* Sky blue, flat - and written after .btn-primary so it wins on ordinary
   cascade rather than on !important. The gradient is overridden explicitly
   because a background shorthand alone would leave background-image behind. */
.subscribe-btn, .subscribe-btn:link, .subscribe-btn:visited {
  background: #38bdf8; background-image: none; border-color: #38bdf8; color: #06253a;
}
.subscribe-btn:hover { background: #7dd3fc; border-color: #7dd3fc; color: #06253a; }
.subscribe-msg { flex-basis: 100%; margin: 0.6rem 0 0; font-size: 0.9rem; min-height: 1.2em; }
.subscribe-msg.is-ok { color: #4ade80; }
.subscribe-msg.is-error { color: #fca5a5; }

/* Both children carry a flex-basis for the ROW layout - 320px of copy beside 340px of
   form. The moment the container turns column, flex-basis stops meaning width and starts
   meaning HEIGHT, so those two numbers became a 320px-tall paragraph above a 340px-tall
   input box: roughly 660px of empty band on a phone. Resetting the shorthand is the whole
   fix - the items size to their content, as a stacked band should. */
@media (max-width: 720px) {
  .subscribe-inner { flex-direction: column; align-items: stretch; }
  .subscribe-copy { flex: 0 0 auto; }
  .subscribe-form { flex: 0 0 auto; max-width: 100%; justify-content: center; }
}

@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .footer-brand { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; } .footer-tagline { max-width: 100%; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-brand { flex-direction: column; } .footer-bottom { flex-direction: column; text-align: center; } }
/* Below 768px every footer block is centred: brand, columns, links and the bottom bar. */
@media (max-width: 767px) {
  .footer-grid { text-align: center; }
  .footer-brand { flex-direction: column; align-items: center; }
  .footer-tagline { margin-left: auto; margin-right: auto; max-width: 420px; }
  .footer-socials { justify-content: center; }
  .footer-col { align-items: center; }
  .footer-col ul { align-items: center; }
  .footer-col ul li a, .footer-col ul li .footer-contact-item { justify-content: center; }
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; }
  /* two columns above 560px leave the third alone on the left; it takes the full row instead */
  .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }
}

/* EZWebee logo (2026-09-27): the code bee, then "EZWe" sky blue, a "b" that fades
   from the blue into the yellow, and "ee" yellow. The old text-gradient fill is switched off so
   each part keeps its own colour. */
.site-header .site-logo, .footer-logo { display: inline-flex; align-items: center; gap: 0.45em; background: none; -webkit-text-fill-color: initial; }
.brand-mark { width: 1.4em; height: 1.4em; flex: none; display: block; }
.brand-word .bw-a { color: #38bdf8; -webkit-text-fill-color: #38bdf8; }
.brand-word .bw-c { color: #fbbf24; -webkit-text-fill-color: #fbbf24; }
.brand-word .bw-b { color: #9abe8e; background: linear-gradient(90deg, #38bdf8, #fbbf24); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }