/* ════════════════════════════════════════════════════════════════ RAG GLOBAL - DESIGN SYSTEM Qatar Gov-inspired burgundy + gold visual language ════════════════════════════════════════════════════════════════ */ /* Safety: the HTML `hidden` attribute should always hide, regardless of any later `display:` rules. Browsers handle this via UA stylesheet `[hidden] { display: none }`, but our flex/grid rules override it. */ [hidden] { display: none !important; } :root { --burgundy: #670042; --burgundy-deep: #4a002f; --burgundy-darker: #2e001f; --burgundy-soft: rgba(103, 0, 66, 0.08); --burgundy-tint: #faf5f8; --gold: #b8924b; --gold-deep: #9a7838; --gold-soft: rgba(184, 146, 75, 0.12); --ink: #1a1d24; --ink-2: #2d3139; --ink-3: #4a4f59; --ink-mute: #6b7280; --ink-faint: #9ca3af; --paper: #ffffff; --bg: #fafaf7; --bg-2: #f4f3ee; --rule: rgba(26, 29, 36, 0.10); --rule-soft: rgba(26, 29, 36, 0.06); --wa-green: #25D366; --wa-green-darker: #1da851; --wa-soft: rgba(37, 211, 102, 0.12); --font: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif; --font-ar: 'Noto Naskh Arabic', serif; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Match html background to footer ink color. This prevents the cream body background from showing through below the footer on short pages or during iOS elastic overscroll. The header/utility/ticker bars all have their own backgrounds so the top of the page is unaffected. */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--ink); } body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.55; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: inherit; } ::selection { background: var(--burgundy); color: #fff; } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ─── ANIMATIONS ─── */ @keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fadeUpSmall { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideRight { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes ticker { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 146, 75, 0.6); } 50% { box-shadow: 0 0 0 8px rgba(184, 146, 75, 0); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulseRing { 0% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } } .reveal { opacity: 0; } .reveal.in { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .reveal-delay-1.in { animation-delay: 0.1s; } .reveal-delay-2.in { animation-delay: 0.2s; } .reveal-delay-3.in { animation-delay: 0.3s; } .reveal-delay-4.in { animation-delay: 0.4s; } /* Mobile: lighter reveal — smaller travel, slightly shorter duration so the cascade feels brisk rather than heavy on a small screen. */ @media (max-width: 720px) { .reveal.in { animation: fadeUpSmall 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; } .reveal.in, .reveal-delay-1.in, .reveal-delay-2.in, .reveal-delay-3.in, .reveal-delay-4.in { animation: none; } .ticker-track { animation: none !important; } } /* ─── UTILITY BAR ─── */ /* ─── PRESENCE BAR (above-header, hides on scroll) ─── */ .presence-bar { background: linear-gradient(90deg, #2e001f 0%, #4a002f 50%, #2e001f 100%); color: rgba(255,255,255,0.9); font-size: 12px; padding: 8px 0; overflow: hidden; max-height: 60px; transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1), padding 380ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease; } .presence-bar.is-hidden { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; } .presence-bar .wrap { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; } .presence-bar .pb-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .presence-bar .pb-list { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255,255,255,0.92); } .presence-bar .pb-item { color: #fff; font-weight: 600; } .presence-bar .pb-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.65; display: inline-block; } @media (max-width: 600px) { .presence-bar { font-size: 11px; padding: 6px 0; } .presence-bar .wrap { gap: 10px; } .presence-bar .pb-list { gap: 8px; } } /* ─── UTILITY BAR (MOCI badge, centered) ─── */ .utility-bar { background: var(--ink); color: rgba(255,255,255,0.9); padding: 10px 0; position: relative; overflow: hidden; } .utility-bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; } .utility-bar .util-cities { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); white-space: nowrap; } .utility-bar .util-cities .uc-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: 0.5; } @media (max-width: 720px) { .utility-bar .util-cities { display: none; } .utility-bar .wrap { justify-content: center; } } .utility-bar .moci-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px; background: linear-gradient(135deg, var(--gold) 0%, #d4a85e 50%, var(--gold-deep) 100%); color: var(--ink); border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; box-shadow: 0 2px 10px rgba(184, 146, 75, 0.35), inset 0 1px 0 rgba(255,255,255,0.3); position: relative; overflow: hidden; } .utility-bar .moci-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: rgba(46, 0, 31, 0.18); border-radius: 50%; color: var(--burgundy-deep); flex-shrink: 0; } .utility-bar .moci-icon svg { width: 13px; height: 13px; } .utility-bar .moci-text { white-space: nowrap; } .utility-bar .moci-text strong { font-weight: 800; letter-spacing: 0.06em; } .utility-bar .moci-shine { position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); animation: moci-shine 4.5s ease-in-out infinite; } @keyframes moci-shine { 0% { left: -100%; } 50% { left: 200%; } 100% { left: 200%; } } @media (max-width: 600px) { .utility-bar .moci-badge { font-size: 11px; padding: 5px 14px; } } @media (max-width: 720px) { .utility-bar .regions { display: none; } } /* ─── ANNOUNCEMENTS TICKER ─── */ .ticker-bar { background: var(--paper); border-bottom: 1px solid var(--rule); padding: 12px 0; overflow: hidden; display: flex; align-items: center; } .ticker-label { background: var(--burgundy); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 14px; margin-left: 32px; margin-right: 24px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 3px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; } .ticker-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2.4s ease-in-out infinite; } .ticker-window { flex: 1; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%); } .ticker-track { display: inline-flex; gap: 64px; animation: ticker 60s linear infinite; font-size: 13.5px; color: var(--ink-2); } .ticker-track .item { display: inline-flex; align-items: center; gap: 10px; } .ticker-track .item::before { content: '◆'; color: var(--burgundy); font-size: 8px; } .ticker-track:hover { animation-play-state: paused; } /* Mobile ticker: smaller text, tighter spacing so the label doesn't eat the row */ @media (max-width: 720px) { .ticker-bar { padding: 8px 0; } .ticker-label { margin-left: 16px; margin-right: 14px; font-size: 9.5px; padding: 4px 10px; letter-spacing: 0.08em; gap: 6px; } .ticker-label::before { width: 5px; height: 5px; } .ticker-track { font-size: 11.5px; gap: 36px; animation-duration: 45s; } .ticker-track .item { gap: 8px; } } /* ─── HEADER + MEGA MENU ─── */ header.main { background: var(--paper); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 100; transition: box-shadow 280ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 280ms ease; } header.main.scrolled { box-shadow: 0 2px 16px rgba(26, 29, 36, 0.08); } .header-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; gap: 32px; transition: padding 280ms ease; } header.main.scrolled .header-row { padding: 12px 0; } .brand-mark { display: flex; align-items: center; gap: 16px; } .emblem { position: relative; width: 56px; height: 56px; flex: 0 0 56px; background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-deep) 100%); display: flex; align-items: center; justify-content: center; border-radius: 4px; box-shadow: 0 1px 2px rgba(103, 0, 66, 0.12), 0 4px 16px rgba(103, 0, 66, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .emblem::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,0.18); border-radius: 3px; } .emblem .crown { color: var(--gold); font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; font-family: var(--font); z-index: 1; } .emblem .star { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; background: var(--gold); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); z-index: 2; } .brand-logo { height: 44px; width: auto; display: block; flex: 0 0 auto; } .foot-brand .brand-logo { height: 40px; } @media (max-width: 600px) { .brand-logo { height: 36px; } } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-text .name { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); } .brand-text .ar { font-family: var(--font-ar); font-size: 13px; color: var(--burgundy); margin-top: 1px; font-weight: 600; } .brand-text .sub { font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; font-weight: 600; } .header-nav { display: flex; gap: 2px; font-size: 14px; font-weight: 500; } .header-nav > li { position: relative; list-style: none; } .header-nav .nav-item { padding: 10px 14px; color: var(--ink-2); border-radius: 3px; position: relative; transition: color 200ms ease; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .header-nav .nav-item::after { content: ''; position: absolute; bottom: 4px; left: 14px; right: 14px; height: 2px; background: var(--burgundy); transform: scaleX(0); transform-origin: left center; transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1); } .header-nav .nav-item:hover { color: var(--burgundy); } .header-nav .nav-item:hover::after { transform: scaleX(1); } .header-nav .nav-item .chev { font-size: 10px; opacity: 0.6; } .mega { position: absolute; top: calc(100% + 4px); left: -24px; width: 760px; background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--burgundy); border-radius: 4px; padding: 24px; box-shadow: 0 12px 48px rgba(26,29,36,0.12); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 240ms, transform 240ms, visibility 240ms; z-index: 200; } .mega.mega-services { width: 820px; left: -120px; } @media (max-width: 1180px) { .mega.mega-services { width: 760px; left: -140px; } } .has-mega-right > .mega { left: 50%; right: auto; margin-left: -380px; } .header-nav > li:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); } .mega-grid { display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 28px; } .mega-grid-services { grid-template-columns: 1fr 1fr 1.1fr; gap: 28px; } .mega-col h5 { font-size: 10px; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); } .mega-col ul { list-style: none; display: flex; flex-direction: column; gap: 1px; } .mega-col a { display: block; padding: 6px 8px; margin-left: -8px; font-size: 13.5px; color: var(--ink-2); border-radius: 3px; transition: all 200ms; } .mega-col a:hover { color: var(--burgundy); background: var(--burgundy-tint); padding-left: 14px; } .mega-col .feat { background: var(--burgundy-tint); padding: 16px; border-radius: 4px; border-left: 3px solid var(--burgundy); } .mega-col .feat .feat-l { font-size: 10.5px; color: var(--burgundy); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; } .mega-col .feat .feat-h { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: 1.2; } .mega-col .feat .feat-p { font-size: 12px; color: var(--ink-mute); line-height: 1.45; } .header-cta { display: flex; gap: 10px; align-items: center; } /* ─── HEADER PHONE CTA ─── */ .header-phone { display: inline-flex; align-items: center; gap: 14px; padding: 6px 16px 6px 6px; border-radius: 999px; transition: background 240ms ease; text-decoration: none; } .header-phone:hover { background: var(--burgundy-soft); } .header-phone .hph-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--burgundy); color: #fff; border-radius: 50%; flex-shrink: 0; box-shadow: 0 6px 16px rgba(103, 0, 66, 0.25), inset 0 0 0 1px rgba(255,255,255,0.08); transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 360ms ease; position: relative; } .header-phone .hph-icon::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; transition: opacity 280ms ease, transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1); transform: scale(0.92); pointer-events: none; } .header-phone:hover .hph-icon { transform: rotate(-10deg) scale(1.04); box-shadow: 0 8px 22px rgba(103, 0, 66, 0.32); } .header-phone:hover .hph-icon::after { opacity: 1; transform: scale(1); } .header-phone .hph-icon svg { width: 24px; height: 24px; } .header-phone .hph-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; } .header-phone .hph-label { font-size: 12px; color: var(--ink-mute); font-weight: 500; letter-spacing: 0.005em; } .header-phone .hph-label strong { color: var(--ink-2); font-weight: 700; letter-spacing: 0; } .header-phone .hph-num { font-size: 20px; color: var(--ink); font-weight: 800; letter-spacing: -0.005em; } @media (max-width: 720px) { .header-phone .hph-text { display: none; } .header-phone { padding: 4px; } .header-phone .hph-icon { width: 44px; height: 44px; } .header-phone .hph-icon svg { width: 20px; height: 20px; } } .lang-toggle { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--rule); border-radius: 3px; font-size: 11px; font-weight: 700; } .lang-toggle span { padding: 4px 8px; border-radius: 2px; cursor: pointer; transition: all 200ms; color: var(--ink-mute); } .lang-toggle .on { background: var(--burgundy); color: #fff; } .btn { font-family: var(--font); font-size: 14px; font-weight: 600; padding: 11px 22px; border-radius: 3px; border: 1px solid transparent; cursor: pointer; transition: all 240ms cubic-bezier(0.2, 0.8, 0.2, 1); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; letter-spacing: 0.005em; position: relative; overflow: hidden; text-decoration: none; } .btn-primary { background: var(--burgundy); color: #fff; border-color: var(--burgundy); } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent); transition: left 600ms ease; } .btn-primary:hover { background: var(--burgundy-deep); border-color: var(--burgundy-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(103, 0, 66, 0.28); } .btn-primary:hover::before { left: 100%; } .btn .arr { transition: transform 240ms ease; } .btn:hover .arr { transform: translateX(3px); } .btn-outline { background: var(--paper); color: var(--ink); border-color: var(--rule); } .btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-1px); } .btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); } .btn-gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; } .btn-wa { background: #fff; color: var(--wa-green-darker); border-color: var(--wa-green); } .btn-wa:hover { background: var(--wa-green); color: #fff; border-color: var(--wa-green); transform: translateY(-1px); } .btn-wa svg, .btn-wa .wa-img { width: 18px; height: 18px; display: block; } .btn-wa-outline { background: var(--paper); color: var(--wa-green-darker); border-color: var(--wa-green); } .btn-wa-outline:hover { background: var(--wa-green); color: #fff; } .menu-toggle { display: none; background: none; border: 1px solid var(--rule); border-radius: 3px; padding: 8px; cursor: pointer; } .menu-toggle svg { width: 22px; height: 22px; color: var(--ink); } @media (max-width: 1100px) { .header-nav { display: none; } .menu-toggle { display: inline-flex; } } /* Mobile header: keep all three brand-text lines (English name, Arabic tagline, "BUSINESS SETUP · PRO SERVICES") visible but compact, with no wrapping on the English name. */ @media (max-width: 600px) { .header-row { padding: 12px 0; gap: 12px; } .brand-mark { gap: 10px; min-width: 0; flex: 1 1 auto; } .brand-logo { height: 32px; } .brand-text { min-width: 0; flex: 1 1 auto; } .brand-text .name { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; } .brand-text .ar { font-size: 11px; margin-top: 0; } .brand-text .sub { font-size: 8.5px; letter-spacing: 0.08em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Phone button: keep the burgundy circle as the tap target, hide the "Talk to a Setup Specialist" label so the brand has room to breathe. */ .header-phone { gap: 0; padding: 0; flex-shrink: 0; } .header-phone .hph-text { display: none; } .header-phone .hph-icon { width: 42px; height: 42px; } .header-phone .hph-icon svg { width: 20px; height: 20px; } } /* ─── HERO ─── */ .hero { padding: 50px 0 60px; background: var(--bg); position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 72px; align-items: start; position: relative; z-index: 1; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } } .section-marker { display: flex; align-items: center; gap: 12px; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--burgundy); font-weight: 700; margin-bottom: 18px; } .section-marker .num { color: var(--gold); font-size: 13px; font-weight: 700; } .section-marker::after { content: ''; flex: 0 0 48px; height: 1px; background: var(--burgundy); transform-origin: left; animation: slideRight 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } .hero h1 { font-size: clamp(40px, 5.4vw, 68px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 24px; } .hero h1 .accent { color: var(--burgundy); position: relative; display: inline-block; } .hero h1 .accent::after { content: ''; position: absolute; bottom: 4px; left: 0; right: 0; height: 8px; background: var(--gold-soft); z-index: -1; } .hero-lede { font-size: 17px; color: var(--ink-3); line-height: 1.6; margin-bottom: 32px; max-width: 540px; } .hero-lede strong { color: var(--ink); font-weight: 600; } .hero-actions { display: flex; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; } .hero-actions .btn { padding: 14px 26px; font-size: 14.5px; } .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule); border-top: 2px solid var(--burgundy); background: var(--paper); } .hero-stats .item { padding: 22px 20px; border-right: 1px solid var(--rule); transition: background 240ms ease; } .hero-stats .item:last-child { border-right: none; } .hero-stats .item:hover { background: var(--burgundy-tint); } .hero-stats .label { font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; font-weight: 600; } .hero-stats .val { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 2px; } .hero-stats .val .plus { color: var(--burgundy); margin-left: 1px; } @media (max-width: 720px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } .hero-stats .item:nth-child(2) { border-right: none; } .hero-stats .item:nth-child(1), .hero-stats .item:nth-child(2) { border-bottom: 1px solid var(--rule); } } .hero-pathways { margin-top: 24px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 20px 22px; } .hero-pathways-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; } .hero-pathways-head .lbl { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--burgundy); } .hero-pathways-head .hint { font-size: 12px; color: var(--ink-mute); } .hero-pathways-head .link-btn { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--burgundy); transition: color 200ms ease; } .hero-pathways-head .link-btn:hover { color: var(--burgundy-deep); text-decoration: underline; } .pathways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } @media (max-width: 540px) { .pathways-grid { grid-template-columns: 1fr; } } .path-tile { padding: 4px 0; border-left: 2px solid var(--burgundy-soft); padding-left: 12px; transition: all 240ms ease; cursor: pointer; } .path-tile:hover { border-left-color: var(--burgundy); padding-left: 14px; } .path-tile-name { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; } .path-tile-desc { font-size: 12px; color: var(--ink-mute); line-height: 1.45; } .hero-trust { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--burgundy-tint); border: 1px solid var(--burgundy-soft); border-radius: 4px; padding: 16px 20px; } @media (max-width: 600px) { .hero-trust { grid-template-columns: 1fr; gap: 10px; } } .hero-trust-item { display: flex; align-items: center; gap: 10px; } .hero-trust-item svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--burgundy); } .hero-trust-item .lbl { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.2; } .hero-trust-item .sub { font-size: 11px; color: var(--ink-mute); margin-top: 1px; } /* ─── NAV HIGHLIGHT ITEMS (Cost Calculator button + 100% Ownership pill) ─── */ .nav-pill { display: inline-flex !important; align-items: center; gap: 6px; padding: 7px 14px !important; background: var(--gold-soft); border: 1px solid rgba(184,146,75,0.32); border-radius: 18px; color: var(--gold-deep) !important; font-weight: 700 !important; font-size: 12.5px !important; transition: all 220ms cubic-bezier(0.2,0.8,0.2,1); } .nav-pill::before { content: '★'; color: var(--gold); font-size: 11px; } .nav-pill:hover { background: var(--gold); color: var(--ink) !important; border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(184,146,75,0.32); } .nav-pill::after { display: none !important; } .nav-btn { display: inline-flex !important; align-items: center; gap: 6px; padding: 8px 14px !important; background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-deep) 100%) !important; color: #fff !important; font-weight: 700 !important; font-size: 12.5px !important; border-radius: 4px; box-shadow: 0 2px 8px rgba(103,0,66,0.22); transition: all 220ms cubic-bezier(0.2,0.8,0.2,1); position: relative; overflow: hidden; } .nav-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); transform: translateX(-100%); transition: transform 600ms; } .nav-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(103,0,66,0.32); color: #fff !important; } .nav-btn:hover::before { transform: translateX(100%); } .nav-btn::after { display: none !important; } .nav-btn .nav-btn-icon { width: 13px; height: 13px; } /* ─── HERO CALCULATOR CARD ─── */ .calc-highlight { position: relative; display: block; width: 100%; background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--burgundy); border-radius: 4px; padding: 32px; cursor: pointer; text-align: left; font-family: var(--font); box-shadow: 0 1px 2px rgba(26,29,36,0.04), 0 12px 32px rgba(26,29,36,0.06); transition: transform 280ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 280ms; overflow: hidden; } .calc-highlight::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; background-image: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(184, 146, 75, 0.08) 30deg, transparent 60deg); border-radius: 50%; pointer-events: none; } .calc-highlight:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(26,29,36,0.04), 0 20px 40px rgba(26,29,36,0.10); } .calc-highlight-pulse { position: absolute; top: 24px; right: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); } .calc-highlight-pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--gold); animation: pulseRing 2s ease-out infinite; } .calc-tag { font-size: 11px; color: var(--burgundy); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; } .calc-tag::before { content: '◆'; color: var(--gold); font-size: 10px; } .calc-highlight h3 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; line-height: 1.15; } .calc-highlight h3 .accent { color: var(--burgundy); } .calc-highlight .lede { font-size: 14px; color: var(--ink-3); line-height: 1.55; margin-bottom: 22px; } .calc-preview { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 4px; padding: 18px 20px; margin-bottom: 20px; } .calc-preview-label { font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; } .calc-preview-amount { display: flex; align-items: baseline; gap: 4px; font-feature-settings: "tnum" 1; } .calc-preview-amount .currency { font-size: 13px; color: var(--ink-mute); font-weight: 600; } .calc-preview-amount .num { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } .calc-preview-amount .range { font-size: 16px; color: var(--burgundy); font-weight: 700; } .calc-cta { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--rule); } .calc-cta-text { font-size: 13px; color: var(--ink-2); font-weight: 600; } .calc-cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--burgundy); color: #fff; border-radius: 50%; transition: all 280ms; } .calc-highlight:hover .calc-cta-arrow { transform: translateX(4px); background: var(--burgundy-deep); } /* ─── SECTIONS ─── */ section.s { padding: 56px 0; border-bottom: 1px solid var(--rule); position: relative; } section.s.alt { background: var(--paper); } .section-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; margin-bottom: 36px; align-items: end; } @media (max-width: 900px) { .section-head { grid-template-columns: 1fr; gap: 16px; } } .section-head h2 { font-size: clamp(32px, 3.8vw, 48px); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); position: relative; padding-bottom: 18px; } .section-head h2 .accent { color: var(--burgundy); } .section-head h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 64px; height: 3px; background: var(--burgundy); } .section-head h2::before { content: ''; position: absolute; bottom: 0; left: 64px; width: 16px; height: 3px; background: var(--gold); } .section-head p { font-size: 15.5px; color: var(--ink-3); line-height: 1.6; max-width: 540px; } /* ─── SERVICES GRID ─── */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } @media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } } .service { padding: 24px 22px; background: var(--paper); transition: background 280ms cubic-bezier(0.2, 0.8, 0.2, 1); cursor: default; position: relative; overflow: hidden; display: flex; flex-direction: column; } .service::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--burgundy); transform: scaleX(0); transform-origin: left; transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1); } .service:hover { background: var(--burgundy-tint); } .service:hover::before { transform: scaleX(1); } .service:hover .service-icon { transform: rotate(-6deg) scale(1.05); } .service:hover .service-link { gap: 10px; } .service-icon { width: 48px; height: 48px; background: var(--burgundy-tint); border: 1px solid var(--burgundy-soft); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--burgundy); margin-bottom: 22px; transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1); } .service-icon svg { width: 24px; height: 24px; } .service-num { font-size: 11px; color: var(--gold); font-weight: 700; letter-spacing: 0.1em; margin-bottom: 8px; display: inline-block; } .service h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 10px; line-height: 1.2; } .service p { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; margin-bottom: 16px; flex: 1; } .service-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--rule); margin-top: auto; } .service-price { font-size: 12px; color: var(--ink-mute); font-weight: 600; } .service-price strong { color: var(--burgundy); font-weight: 700; } .service-link { font-size: 11.5px; font-weight: 700; color: var(--burgundy); display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.06em; text-transform: uppercase; transition: gap 280ms ease; } .services-filter { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; } .filter-chip { padding: 8px 16px; border: 1px solid var(--rule); border-radius: 20px; background: var(--paper); font-size: 12.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: all 200ms; } .filter-chip:hover, .filter-chip.active { background: var(--burgundy); color: #fff; border-color: var(--burgundy); } /* ─── INDUSTRIES GRID ─── */ .industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .industries-grid { grid-template-columns: 1fr; } } .industry { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 28px; cursor: pointer; transition: all 280ms cubic-bezier(0.2, 0.8, 0.2, 1); overflow: hidden; } .industry::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--burgundy); transform: scaleY(0); transform-origin: top; transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1); } .industry:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(26,29,36,0.08); border-color: var(--burgundy-soft); } .industry:hover::before { transform: scaleY(1); } .industry-tag { font-size: 10.5px; color: var(--gold); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; } .industry h3 { font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.015em; } .industry p { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; margin-bottom: 18px; } .industry-stats { display: flex; gap: 16px; padding-top: 16px; border-top: 1px solid var(--rule); } .industry-stats .stat { display: flex; flex-direction: column; gap: 2px; } .industry-stats .stat-val { font-size: 18px; font-weight: 700; color: var(--burgundy); } .industry-stats .stat-lbl { font-size: 11px; color: var(--ink-mute); } .industry-link { font-size: 11.5px; font-weight: 700; color: var(--burgundy); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; } /* ─── WHY RAG ─── */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } } .why-tile { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 32px 28px; position: relative; transition: all 280ms; } .why-tile:hover { border-color: var(--burgundy); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(103,0,66,0.10); } .why-num { font-size: 48px; font-weight: 700; color: var(--burgundy); letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px; } .why-num .plus, .why-num .x { color: var(--gold); font-size: 32px; } .why-num-lbl { font-size: 11px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); } .why-tile h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; } .why-tile p { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; } /* ─── PROCESS TIMELINE ─── */ .process-table { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--burgundy); } .process-row { display: grid; grid-template-columns: 96px 1fr 0.5fr; padding: 28px 32px; border-bottom: 1px solid var(--rule); align-items: start; gap: 32px; transition: all 280ms ease; cursor: pointer; position: relative; } .process-row:last-child { border-bottom: none; } .process-row::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--burgundy); transform: scaleY(0); transform-origin: top; transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1); } .process-row:hover { background: var(--bg); padding-left: 40px; } .process-row:hover::before { transform: scaleY(1); } .process-row:hover .process-num { color: var(--burgundy); } .process-num { font-size: 36px; font-weight: 300; color: var(--ink-faint); letter-spacing: -0.02em; line-height: 1; transition: color 280ms ease; } .process-content h3 { font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.015em; } .process-content p { font-size: 14.5px; color: var(--ink-3); line-height: 1.55; max-width: 580px; } .process-content p strong { color: var(--ink); font-weight: 600; } .process-meta { font-size: 13px; color: var(--ink-mute); text-align: right; } .process-meta .day { display: inline-block; padding: 4px 12px; background: var(--burgundy-tint); color: var(--burgundy); border: 1px solid var(--burgundy-soft); border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } @media (max-width: 720px) { .process-row { grid-template-columns: 60px 1fr; gap: 16px; padding: 22px; } .process-row:hover { padding-left: 26px; } .process-meta { grid-column: 1 / -1; text-align: left; margin-top: 8px; } .process-num { font-size: 28px; } } /* ─── CALCULATOR DEEP SECTION ─── */ .calc-deep { background: var(--burgundy-darker); color: #fff; position: relative; overflow: hidden; } .calc-deep::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background-image: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(184,146,75,0.12) 30deg, transparent 60deg); border-radius: 50%; animation: spin 240s linear infinite; opacity: 0.6; } .calc-deep::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 35%, transparent 35%, transparent 65%, var(--gold) 65%, var(--gold) 100%); } .calc-deep .section-head { position: relative; z-index: 1; } .calc-deep .section-head h2 { color: #fff; } .calc-deep .section-head h2 .accent { color: var(--gold); } .calc-deep .section-head h2::after { background: var(--gold); } .calc-deep .section-head h2::before { background: #fff; } .calc-deep .section-head p { color: rgba(255,255,255,0.78); } .calc-deep .section-marker { color: var(--gold); } .calc-deep .section-marker::after { background: var(--gold); } .calc-deep .section-marker .num { color: #fff; } .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; position: relative; z-index: 1; } @media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; gap: 32px; } } .calc-steps { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 36px; } .calc-step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .calc-step:last-child { border-bottom: none; } .calc-step-num { width: 32px; height: 32px; flex: 0 0 32px; border: 1.5px solid var(--gold); color: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .calc-step-text h4 { font-size: 14.5px; font-weight: 700; color: #fff; margin-bottom: 3px; } .calc-step-text p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; } .calc-result { background: rgba(255,255,255,0.04); border: 1px solid rgba(184,146,75,0.3); border-top: 3px solid var(--gold); border-radius: 6px; padding: 36px; } .calc-result-label { font-size: 11px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; } .calc-result-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; } .calc-result-amount .currency { font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 600; } .calc-result-amount .num { font-size: 42px; font-weight: 800; color: #fff; letter-spacing: -0.025em; } .calc-result-amount .range { font-size: 24px; color: var(--gold); font-weight: 700; } .calc-result-note { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); } .calc-result-incl { font-size: 11px; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; } .calc-result-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; } .calc-result-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,0.82); } .calc-result-list li::before { content: '✓'; color: var(--gold); font-weight: 700; } .calc-btn-row { display: flex; gap: 10px; } .calc-btn-row .btn { flex: 1; justify-content: center; padding: 14px; } .calc-btn-row .btn-primary { background: var(--gold); color: var(--ink); border-color: var(--gold); } .calc-btn-row .btn-primary:hover { background: #fff; border-color: #fff; } .calc-btn-row .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); } .calc-btn-row .btn-outline:hover { background: #fff; color: var(--burgundy); border-color: #fff; } /* ─── VIDEO TESTIMONIALS ─── */ .vt-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .vt-track { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .vt-track { grid-template-columns: 1fr; } } .vt-card { aspect-ratio: 3 / 4; background: linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy-deep) 100%); border-radius: 6px; position: relative; overflow: hidden; cursor: pointer; transition: transform 280ms cubic-bezier(0.2,0.8,0.2,1); } .vt-card:hover { transform: translateY(-4px); } .vt-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%); pointer-events: none; } .vt-thumb { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.75; } .vt-thumb.t1 { background-image: linear-gradient(135deg, #2a1a3e 0%, #4a2b4f 100%); } .vt-thumb.t2 { background-image: linear-gradient(135deg, #1e2a3e 0%, #2b3f4f 100%); } .vt-thumb.t3 { background-image: linear-gradient(135deg, #3e2a1e 0%, #4f3b2b 100%); } .vt-thumb.t4 { background-image: linear-gradient(135deg, #2a3e2a 0%, #2b4f3b 100%); } .vt-thumb.t5 { background-image: linear-gradient(135deg, #3e1e2a 0%, #4f2b3b 100%); } .vt-thumb.t6 { background-image: linear-gradient(135deg, #2a2a3e 0%, #3b3b4f 100%); } .vt-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; background: rgba(255,255,255,0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all 280ms; } .vt-card:hover .vt-play { transform: translate(-50%, -50%) scale(1.1); background: var(--gold); } .vt-play svg { width: 22px; height: 22px; color: var(--burgundy); margin-left: 3px; } .vt-card:hover .vt-play svg { color: var(--ink); } .vt-meta { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; color: #fff; } .vt-meta .client { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em; } .vt-meta .role { font-size: 12px; color: rgba(255,255,255,0.75); margin-bottom: 10px; } .vt-meta .quote { font-size: 12px; color: rgba(255,255,255,0.9); line-height: 1.45; font-style: italic; border-left: 2px solid var(--gold); padding-left: 8px; } /* ─── GOOGLE REVIEWS ─── */ .reviews-band { background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 40px; display: grid; grid-template-columns: 0.6fr 1fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .reviews-band { grid-template-columns: 1fr; gap: 32px; } } .reviews-sum { display: flex; flex-direction: column; gap: 12px; } .reviews-google { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 8px; } .reviews-google::before { content: ''; width: 14px; height: 14px; background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC05 75%, #EA4335 100%); border-radius: 50%; } .reviews-sum .score { font-size: 64px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1; } .reviews-sum .stars { font-size: 22px; color: var(--gold); letter-spacing: 4px; } .reviews-sum .count { font-size: 13px; color: var(--ink-mute); } .reviews-sum .count a { color: var(--burgundy); font-weight: 600; } .reviews-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 720px) { .reviews-list { grid-template-columns: 1fr; } } .review { background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: 18px; } .review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .review-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--burgundy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: 0 0 32px; } .review-name { font-size: 13.5px; font-weight: 700; color: var(--ink); } .review-date { font-size: 11.5px; color: var(--ink-mute); } .review-stars { font-size: 12px; color: var(--gold); letter-spacing: 2px; margin-bottom: 8px; } .review-text { font-size: 13px; color: var(--ink-3); line-height: 1.55; } /* ─── CASE STUDIES ─── */ .cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .cases-grid { grid-template-columns: 1fr; } } .case { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; transition: all 280ms; cursor: pointer; } .case:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(26,29,36,0.08); border-color: var(--burgundy-soft); } .case-img { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-deep) 100%); position: relative; overflow: hidden; } .case-img::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent 0 30px, rgba(255,255,255,0.04) 30px 31px); } .case-img-2 { background: linear-gradient(135deg, #4a3a1e 0%, #6a5a2e 100%); } .case-img-3 { background: linear-gradient(135deg, #1e3a4a 0%, #2e5a6a 100%); } .case-tag { position: absolute; top: 14px; left: 14px; padding: 4px 10px; background: rgba(0,0,0,0.6); color: #fff; border-radius: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; z-index: 1; } .case-body { padding: 24px; } .case h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.25; } .case p { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; margin-bottom: 18px; } .case-outcome { padding-top: 16px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; } .case-outcome .met { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; } .case-outcome .val { font-size: 19px; color: var(--burgundy); font-weight: 700; } .case-link { font-size: 11.5px; color: var(--burgundy); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; } /* ─── FAQ ─── */ .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } @media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; gap: 14px; } } .faq-col { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--burgundy); border-radius: 4px; height: fit-content; } .faq-item { border-bottom: 1px solid var(--rule); } .faq-item:last-child { border-bottom: none; } .faq-q { width: 100%; text-align: left; background: none; border: none; padding: 18px 22px; font-family: var(--font); font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: all 280ms; line-height: 1.35; } .faq-q:hover { background: var(--bg); color: var(--burgundy); padding-left: 28px; } .faq-q-arr { width: 28px; height: 28px; border: 1px solid var(--rule); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--burgundy); transition: all 280ms; flex: 0 0 28px; } .faq-item.open .faq-q-arr { background: var(--burgundy); color: #fff; transform: rotate(45deg); } .faq-q-arr::before { content: '+'; font-size: 16px; font-weight: 700; } .faq-a { max-height: 0; overflow: hidden; transition: max-height 360ms cubic-bezier(0.2,0.8,0.2,1); } .faq-item.open .faq-a { max-height: 400px; } .faq-a-inner { padding: 0 22px 22px; font-size: 13.5px; color: var(--ink-3); line-height: 1.6; } .faq-a-inner a { color: var(--burgundy); border-bottom: 1px solid transparent; transition: border-color 200ms; } .faq-a-inner a:hover { border-bottom-color: var(--burgundy); } /* ─── BLOG FEED ─── */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; transition: all 280ms; cursor: pointer; } .blog-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(26,29,36,0.08); } .blog-img { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--bg-2) 0%, var(--burgundy-tint) 100%); position: relative; overflow: hidden; } .blog-img::before { content: ''; position: absolute; inset: 0; background-image: repeating-conic-gradient(from 0deg at 30% 30%, transparent 0deg, rgba(103,0,66,0.06) 30deg, transparent 60deg); } .blog-img.alt1 { background: linear-gradient(135deg, #f0e5ea 0%, #e5d5dd 100%); } .blog-img.alt2 { background: linear-gradient(135deg, #f5ede0 0%, #e8dbc5 100%); } .blog-tag { position: absolute; top: 14px; left: 14px; padding: 4px 10px; background: var(--burgundy); color: #fff; border-radius: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .blog-body { padding: 24px; } .blog-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-mute); margin-bottom: 12px; letter-spacing: 0.02em; } .blog-meta .sep { width: 3px; height: 3px; background: var(--ink-mute); border-radius: 50%; } .blog-card h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.01em; line-height: 1.3; } .blog-card p { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; margin-bottom: 16px; } .blog-link { font-size: 11.5px; color: var(--burgundy); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; } /* ─── CONTACT / LEAD CAPTURE ─── */ .contact { padding: 56px 0; background: var(--bg); border-bottom: 1px solid var(--rule); } .contact-paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 56px; } @media (max-width: 1100px) { .contact-paths { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .contact-paths { grid-template-columns: 1fr; } } .contact-path { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--rule); border-radius: 4px; padding: 22px; display: flex; align-items: center; gap: 14px; cursor: pointer; text-decoration: none; color: inherit; transition: all 280ms cubic-bezier(0.2,0.8,0.2,1); box-shadow: 0 1px 2px rgba(26,29,36,0.04); } .contact-path:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(26,29,36,0.04), 0 12px 28px rgba(26,29,36,0.10); } .contact-path-calc { border-top-color: var(--burgundy); } .contact-path-calc .contact-path-icon { background: var(--burgundy-tint); color: var(--burgundy); } .contact-path-calc:hover { border-color: var(--burgundy); } .contact-path-calc:hover .contact-path-icon { background: var(--burgundy); color: #fff; } .contact-path-call { border-top-color: var(--gold); } .contact-path-call .contact-path-icon { background: var(--gold-soft); color: var(--gold-deep); } .contact-path-call:hover { border-color: var(--gold); } .contact-path-call:hover .contact-path-icon { background: var(--gold); color: var(--ink); } .contact-path-wa { border-top-color: var(--wa-green); } .contact-path-wa .contact-path-icon { background: var(--wa-soft); color: var(--wa-green-darker); } .contact-path-wa:hover { border-color: var(--wa-green); } .contact-path-wa:hover .contact-path-icon { background: var(--wa-green); color: #fff; } .contact-path-form { border-top-color: var(--ink); } .contact-path-form .contact-path-icon { background: var(--bg-2); color: var(--ink-2); } .contact-path-form:hover { border-color: var(--ink); } .contact-path-form:hover .contact-path-icon { background: var(--ink); color: #fff; } .contact-path-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 280ms; } .contact-path-icon svg { width: 20px; height: 20px; } .contact-path-icon .wa-img { width: 28px; height: 28px; display: block; } .contact-path-wa .contact-path-icon { background: #fff !important; color: var(--wa-green-darker); } .contact-path-text { flex: 1; } .contact-path-text .lbl { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; } .contact-path-text .desc { font-size: 11.5px; color: var(--ink-mute); line-height: 1.4; } .contact-path .arr { font-size: 16px; color: var(--ink-faint); transition: all 280ms; } .contact-path:hover .arr { color: var(--burgundy); transform: translateX(4px); } .contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .form-card { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--burgundy); border-radius: 4px; padding: 36px; box-shadow: 0 1px 2px rgba(26,29,36,0.04), 0 12px 28px rgba(26,29,36,0.06); } .form-card h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; } .form-card .form-sub { font-size: 14px; color: var(--ink-mute); margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } } .field { margin-bottom: 18px; } .field label { display: block; font-size: 12px; color: var(--ink-2); font-weight: 600; margin-bottom: 6px; letter-spacing: 0.02em; } .field input, .field textarea, .field select { width: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 3px; font-family: var(--font); font-size: 14.5px; color: var(--ink); background: var(--paper); transition: all 200ms; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--burgundy); box-shadow: 0 0 0 3px rgba(103,0,66,0.1); } .field textarea { resize: vertical; min-height: 100px; } .field-helper { font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; display: flex; align-items: center; gap: 6px; } .field-helper::before { content: '🇶🇦'; font-size: 12px; } .form-card .btn-primary { width: 100%; justify-content: center; padding: 14px; font-size: 14.5px; } .form-trust { display: flex; justify-content: space-around; gap: 16px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 11.5px; color: var(--ink-mute); flex-wrap: wrap; } .form-trust .trust-item { display: flex; align-items: center; gap: 6px; } .form-trust .trust-item svg { width: 14px; height: 14px; color: var(--burgundy); } .contact-info h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; } .contact-info > p { font-size: 14.5px; color: var(--ink-3); line-height: 1.55; margin-bottom: 28px; } .contact-list-info { list-style: none; display: flex; flex-direction: column; } .contact-list-info li { padding: 18px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 100px 1fr; gap: 24px; align-items: start; transition: padding-left 220ms; } .contact-list-info li:first-child { border-top: 1px solid var(--rule); } .contact-list-info li:hover { padding-left: 8px; } .contact-list-info .ll { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--burgundy); padding-top: 2px; } .contact-list-info .rr { font-size: 14.5px; color: var(--ink); line-height: 1.45; } .contact-list-info .rr a { color: var(--burgundy); border-bottom: 1px solid transparent; transition: border-color 200ms; } .contact-list-info .rr a:hover { border-bottom-color: var(--burgundy); } /* ─── FOOTER ─── */ footer.main { background: var(--ink); color: rgba(255,255,255,0.85); padding: 56px 0 24px; position: relative; } footer.main::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--burgundy) 0%, var(--burgundy) 25%, var(--gold) 25%, var(--gold) 35%, var(--burgundy) 35%, var(--burgundy) 100%); } .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 60px; padding-bottom: 4px; } @media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } } .foot-brand .brand-mark { gap: 14px; margin-bottom: 16px; } .foot-brand .brand-text .name { color: #fff; } .foot-brand .brand-text .ar { color: var(--gold); } .foot-brand .brand-text .sub { color: rgba(255,255,255,0.5); } .foot-brand p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.55; margin-bottom: 8px; max-width: 320px; } .foot-brand .small { font-size: 11.5px; color: rgba(255,255,255,0.4); line-height: 1.5; margin-top: 12px; } .foot-col h4 { font-size: 11px; color: var(--gold); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; } .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .foot-col a { font-size: 13px; color: rgba(255,255,255,0.72); transition: all 200ms; display: inline-block; } .foot-col a:hover { color: #fff; padding-left: 6px; } .foot-contact .lbl { font-size: 10.5px; color: rgba(255,255,255,0.4); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .foot-contact .contact-line { font-size: 13.5px; color: rgba(255,255,255,0.85); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; } .foot-contact li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; } .foot-contact .wa-line svg { width: 16px; height: 16px; color: var(--wa-green); flex-shrink: 0; } .foot-contact .wa-line .wa-img { width: 16px; height: 16px; flex-shrink: 0; display: block; } .foot-offices { padding: 22px 0 24px; margin: 6px 0 16px; border-top: 1px solid rgba(255,255,255,0.10); border-bottom: 1px solid rgba(255,255,255,0.10); } .foot-offices-title { font-size: 11px; color: var(--gold); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; } /* ─── World map sequential route animation (14s cycle, infinite) ─── */ .route-pin, .route-label { opacity: 0; } .route-line { stroke-dashoffset: 100; } .world-map.is-active .route-pin-1, .world-map.is-active .route-label-1 { animation: rtShow1 8s ease 1 forwards; } .world-map.is-active .route-pin-2, .world-map.is-active .route-label-2 { animation: rtShow2 8s ease 1 forwards; } .world-map.is-active .route-pin-3, .world-map.is-active .route-label-3 { animation: rtShow3 8s ease 1 forwards; } .world-map.is-active .route-pin-4, .world-map.is-active .route-label-4 { animation: rtShow4 8s ease 1 forwards; } .world-map.is-active .route-line-1 { animation: rtDraw1 8s ease 1 forwards; } .world-map.is-active .route-line-2 { animation: rtDraw2 8s ease 1 forwards; } .world-map.is-active .route-line-3 { animation: rtDraw3 8s ease 1 forwards; } @keyframes rtShow1 { 0%,5%{opacity:0} 12%,100%{opacity:1} } @keyframes rtShow2 { 0%,25%{opacity:0} 32%,100%{opacity:1} } @keyframes rtShow3 { 0%,50%{opacity:0} 57%,100%{opacity:1} } @keyframes rtShow4 { 0%,75%{opacity:0} 82%,100%{opacity:1} } @keyframes rtDraw1 { 0%,10%{stroke-dashoffset:100} 25%,100%{stroke-dashoffset:0} } @keyframes rtDraw2 { 0%,35%{stroke-dashoffset:100} 50%,100%{stroke-dashoffset:0} } @keyframes rtDraw3 { 0%,60%{stroke-dashoffset:100} 75%,100%{stroke-dashoffset:0} } @media (prefers-reduced-motion: reduce) { .world-map.is-active .route-pin, .world-map.is-active .route-label { animation: none; opacity: 1; } .world-map.is-active .route-line { animation: none; stroke-dashoffset: 0; } } .world-map-wrap { margin: 4px 0 20px; padding: 10px 0; } .world-map { width: 100%; height: auto; display: block; max-height: 300px; } .world-map text { font-family: 'Figtree', system-ui, sans-serif; } @media (max-width: 720px) { .world-map-wrap { margin: 2px 0 14px; padding: 6px 0; } .world-map { max-height: 180px; } .world-map text { display: none; } } .offices-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 1000px) { .offices-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .offices-grid { grid-template-columns: 1fr; } } .office-card { display: flex; flex-direction: column; gap: 10px; } .office-head { display: flex; align-items: center; gap: 6px; } .office-head .pin { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; } .office-name { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.005em; } .office-flag { font-size: 16px; line-height: 1; } .office-addr { font-size: 12.5px; color: rgba(255,255,255,0.62); line-height: 1.55; } .foot-bot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 16px; } .foot-bot a { color: rgba(255,255,255,0.7); transition: color 200ms; } .foot-bot a:hover { color: #fff; } .foot-bot .legal { display: flex; gap: 18px; } .foot-credit { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.55); } .foot-credit .bragyst-link { display: inline-flex; align-items: center; line-height: 0; opacity: 0.78; transition: opacity 220ms ease, transform 220ms ease; } .foot-credit .bragyst-link:hover { opacity: 1; transform: translateY(-1px); } .foot-credit .bragyst-logo { height: 22px; width: auto; display: block; } @media (max-width: 720px) { .foot-credit .bragyst-logo { height: 20px; } } @media (max-width: 720px) { .foot-bot { flex-direction: column; align-items: flex-start; gap: 10px; } } /* ─── STICKY MOBILE CTA RAIL ─── */ .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: var(--paper); border-top: 1px solid var(--rule); padding: 10px 16px; display: none; z-index: 90; box-shadow: 0 -4px 16px rgba(26,29,36,0.08); } .sticky-cta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .sticky-cta .btn { width: 100%; justify-content: center; padding: 10px; font-size: 12px; } @media (max-width: 720px) { .sticky-cta { display: block; } /* Clearance for the fixed CTA rail. We add it to the footer (not the body) so the clearance space stays dark — matching the footer background — rather than showing a cream stripe between the dark footer and the white CTA bar. */ footer.main { padding-bottom: 88px; } } /* ─── PREVIEW BADGE ─── */ .preview-badge { position: fixed; top: 10px; right: 10px; background: var(--ink); color: var(--gold); padding: 6px 12px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } @media (max-width: 720px) { .preview-badge { display: none; } } /* ═══════════════════════════════════════════════════════════ REVISION ADDITIONS (Round 2) ═══════════════════════════════════════════════════════════ */ /* ─── SERVICE DURATION PILL (replaces price) ─── */ .service-duration { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--burgundy-tint); border: 1px solid var(--burgundy-soft); border-radius: 14px; font-size: 11.5px; color: var(--burgundy); font-weight: 700; letter-spacing: 0.02em; } .service-duration svg { width: 12px; height: 12px; flex: 0 0 12px; } .service-duration .dot-anim { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2.4s ease-in-out infinite; } /* ─── SERVICES VIEW-MORE ─── */ .services-grid .service.hidden-srv { display: none; } .services-grid.expanded .service.hidden-srv { display: flex; animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .services-more-row { margin-top: 32px; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; } .services-more-row .more-count { font-size: 13px; color: var(--ink-mute); } .services-more-row .more-count strong { color: var(--burgundy); font-weight: 700; } .btn-view-more { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--paper); border: 1.5px solid var(--burgundy); color: var(--burgundy); border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: all 240ms cubic-bezier(0.2,0.8,0.2,1); font-family: var(--font); } .btn-view-more:hover { background: var(--burgundy); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(103,0,66,0.22); } .btn-view-more .arr-down { transition: transform 280ms; display: inline-block; } .btn-view-more.expanded .arr-down { transform: rotate(180deg); } /* ─── ENHANCED WHY-RAG TILES (Round 2) ─── */ .why-tile { overflow: hidden; } .why-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--burgundy) 0%, var(--gold) 100%); transform: scaleX(0); transform-origin: left; transition: transform 360ms cubic-bezier(0.2,0.8,0.2,1); } .why-tile:hover::before { transform: scaleX(1); } .why-tile::after { content: ''; position: absolute; bottom: -40px; right: -40px; width: 120px; height: 120px; background-image: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(184,146,75,0.08) 30deg, transparent 60deg); border-radius: 50%; opacity: 0; transition: opacity 480ms; pointer-events: none; } .why-tile:hover::after { opacity: 1; animation: spin 12s linear infinite; } .why-tile-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .why-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: linear-gradient(135deg, var(--burgundy-tint) 0%, var(--gold-soft) 100%); display: inline-flex; align-items: center; justify-content: center; color: var(--burgundy); border: 1px solid var(--burgundy-soft); transition: all 360ms cubic-bezier(0.2,0.8,0.2,1); } .why-tile:hover .why-icon { transform: rotate(-8deg) scale(1.06); background: var(--burgundy); color: var(--gold); border-color: var(--burgundy); } .why-icon svg { width: 22px; height: 22px; } .why-tile .why-num { background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-deep) 60%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .why-tile .why-num .plus, .why-tile .why-num .x { -webkit-text-fill-color: var(--gold); } .why-tile .why-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 5px 10px; background: var(--gold-soft); border: 1px solid rgba(184,146,75,0.22); border-radius: 12px; font-size: 11px; color: var(--gold-deep); font-weight: 700; letter-spacing: 0.04em; } .why-tile .why-badge svg { width: 10px; height: 10px; } /* ─── CALC-DEEP ESTIMATE BADGE + IMPROVEMENTS ─── */ .estimate-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--gold); color: var(--burgundy-darker); border-radius: 16px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; box-shadow: 0 4px 12px rgba(184,146,75,0.32); } .estimate-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--burgundy); animation: pulse 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(103,0,66,0.6); } .calc-disclaimer { font-size: 12px; color: rgba(255,255,255,0.55); font-style: italic; margin-top: 10px; display: flex; align-items: center; gap: 6px; } .calc-disclaimer svg { width: 12px; height: 12px; flex: 0 0 12px; } .calc-result { position: relative; overflow: hidden; } .calc-result::before { content: ''; position: absolute; inset: 0; padding: 1px; background: linear-gradient(135deg, var(--gold) 0%, transparent 40%, transparent 60%, var(--gold) 100%); border-radius: inherit; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: spin 24s linear infinite; } .calc-step { position: relative; transition: all 280ms cubic-bezier(0.2,0.8,0.2,1); padding-left: 8px; border-left: 2px solid transparent; } .calc-step:hover { border-left-color: var(--gold); padding-left: 14px; background: rgba(184,146,75,0.04); } .calc-step-num { position: relative; transition: all 280ms; } .calc-step:hover .calc-step-num { background: var(--gold); color: var(--burgundy-darker); transform: scale(1.08); } .calc-step-icon { width: 18px; height: 18px; color: var(--gold); opacity: 0.7; margin-top: 8px; flex: 0 0 18px; } .calc-pillrow { display: flex; gap: 8px; margin: 14px 0 28px; flex-wrap: wrap; } .calc-mini-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; font-size: 11px; color: rgba(255,255,255,0.78); font-weight: 600; } .calc-mini-pill .ck { color: var(--gold); } /* ─── COUNTRY CODE + PHONE ─── */ .phone-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; } /* ─── Country combobox ─── */ .country-combo { position: relative; flex: 0 0 auto; } .country-combo > select[data-country] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); } .cc-trigger { display: inline-flex; align-items: center; gap: 6px; height: 100%; min-height: 44px; padding: 8px 10px 8px 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); font-family: var(--font); font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color 200ms; white-space: nowrap; } .cc-trigger:hover { border-color: var(--ink-mute); } .cc-trigger:focus-visible { outline: none; border-color: var(--burgundy); box-shadow: 0 0 0 3px rgba(103,0,66,0.12); } .country-combo.is-open .cc-trigger { border-color: var(--burgundy); } .cc-flag { font-size: 16px; line-height: 1; } .cc-code { font-weight: 500; font-feature-settings: "tnum" 1; letter-spacing: 0.01em; font-size: 13.5px; } .cc-chev { color: var(--ink-mute); font-size: 10px; margin-left: 1px; transition: transform 200ms; } .country-combo.is-open .cc-chev { transform: rotate(180deg); color: var(--burgundy); } /* Popup */ .cc-popup { position: absolute; top: calc(100% + 6px); left: 0; z-index: 200; width: 340px; max-width: calc(100vw - 32px); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 12px 48px rgba(26,29,36,0.14), 0 2px 8px rgba(26,29,36,0.06); overflow: hidden; display: flex; flex-direction: column; max-height: 360px; } .cc-popup[hidden] { display: none; } .cc-search-wrap { position: relative; padding: 10px 10px 8px; border-bottom: 1px solid var(--rule); flex-shrink: 0; } .cc-popup .cc-search-icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink-mute); pointer-events: none; z-index: 1; } /* Specificity note: `.field input` (0,1,1) would otherwise win against `.cc-search` (0,1,0) since `.cc-search` sits inside a `.field`. We scope with `.cc-popup .cc-search` (0,2,0) so our padding + focus styles take precedence over the generic form-field styling. */ .cc-popup .cc-search { width: 100%; padding: 9px 10px 9px 36px; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); font-family: var(--font); font-size: 13px; color: var(--ink); transition: border-color 200ms; box-sizing: border-box; } .cc-popup .cc-search:focus { outline: none; border-color: var(--burgundy); background: var(--paper); box-shadow: none; } .cc-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; min-height: 0; } .cc-list::-webkit-scrollbar { width: 8px; } .cc-list::-webkit-scrollbar-track { background: transparent; } .cc-list::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; } .cc-list::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); } .cc-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; transition: background 120ms; font-size: 13.5px; color: var(--ink); line-height: 1.3; } .cc-item:hover, .cc-item.is-active { background: rgba(103,0,66,0.06); } .cc-item.is-selected { background: rgba(184,146,75,0.10); font-weight: 500; } .cc-item-flag { font-size: 16px; line-height: 1; flex-shrink: 0; width: 20px; } .cc-item-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-item-code { color: var(--ink-mute); font-size: 12.5px; font-feature-settings: "tnum" 1; flex-shrink: 0; letter-spacing: 0.01em; } .cc-item.is-selected .cc-item-code { color: var(--burgundy); } .cc-empty { padding: 20px 14px; text-align: center; color: var(--ink-mute); font-size: 13px; } .phone-row .phone-input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); font-size: 14px; font-family: var(--font); color: var(--ink); transition: border-color 200ms; font-feature-settings: "tnum" 1; letter-spacing: 0.01em; } .phone-row .phone-input:focus { outline: none; border-color: var(--burgundy); box-shadow: none; } .phone-row .phone-input:-webkit-autofill, .phone-row .phone-input:-webkit-autofill:hover, .phone-row .phone-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--paper) inset; transition: background-color 5000s ease-in-out 0s; } @media (max-width: 600px) { .phone-row { flex-wrap: wrap; } .country-combo { flex: 1 1 100%; } .cc-trigger { width: 100%; justify-content: space-between; } .cc-popup { left: 0; right: 0; width: auto; } .phone-row .phone-input { flex: 1 1 100%; } } /* ─── HERO RIGHT-COLUMN SIDE CARDS (fills empty space below calculator) ─── */ aside.hero-aside { display: flex; flex-direction: column; gap: 16px; } .hero-side-card { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 20px 22px; transition: all 280ms cubic-bezier(0.2,0.8,0.2,1); position: relative; overflow: hidden; cursor: pointer; } .hero-side-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--burgundy) 0%, var(--gold) 100%); transform: scaleY(0); transform-origin: top; transition: transform 360ms cubic-bezier(0.2,0.8,0.2,1); } .hero-side-card:hover { transform: translateX(-2px); box-shadow: 0 8px 24px rgba(26,29,36,0.08); border-color: var(--burgundy-soft); } .hero-side-card:hover::before { transform: scaleY(1); } .hsc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .hsc-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--burgundy-tint); color: var(--burgundy); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--burgundy-soft); } .hsc-icon svg { width: 16px; height: 16px; } .hsc-eyebrow { font-size: 11px; color: var(--burgundy); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .hsc-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 6px; letter-spacing: -0.01em; } .hsc-desc { font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; } .hsc-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); } .hsc-stars { display: inline-flex; gap: 1px; color: var(--gold); font-size: 13px; } .hsc-rating { font-size: 12.5px; font-weight: 700; color: var(--ink); } .hsc-rcount { font-size: 11.5px; color: var(--ink-mute); } .hsc-cta { font-size: 12px; font-weight: 700; color: var(--burgundy); display: inline-flex; align-items: center; gap: 4px; margin-left: auto; } .hsc-cta::after { content: '→'; transition: transform 220ms; } .hero-side-card:hover .hsc-cta::after { transform: translateX(3px); } .avatar-stack { display: flex; align-items: center; } .avatar-stack .av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-deep) 100%); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 2px solid var(--paper); } .avatar-stack .av:not(:first-child) { margin-left: -10px; } .avatar-stack .av:nth-child(2) { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--burgundy); } .avatar-stack .av:nth-child(3) { background: linear-gradient(135deg, var(--burgundy-deep) 0%, var(--burgundy-darker) 100%); } .avatar-stack .av:nth-child(4) { background: linear-gradient(135deg, var(--ink-2) 0%, var(--ink) 100%); color: var(--gold); } /* Featured offer card with gold border */ .hero-side-card.offer { background: linear-gradient(135deg, var(--burgundy-tint) 0%, var(--paper) 100%); border-color: rgba(184,146,75,0.32); } .hero-side-card.offer::after { content: 'LIMITED'; position: absolute; top: 10px; right: 10px; background: var(--gold); color: var(--burgundy-darker); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; padding: 3px 7px; border-radius: 2px; } /* Schedule Consultation card variant - button-styled, gold accent */ .hero-side-card.consult { background: linear-gradient(135deg, #fff 0%, var(--burgundy-tint) 100%); border: 1px solid rgba(103,0,66,0.18); cursor: pointer; text-align: left; font-family: var(--font); width: 100%; padding: 20px 22px; } .hero-side-card.consult::before { background: linear-gradient(180deg, var(--gold) 0%, var(--burgundy) 100%); } .hero-side-card.consult::after { content: 'FREE'; position: absolute; top: 14px; right: 14px; background: var(--gold); color: var(--burgundy-darker); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 12px; } .hero-side-card.consult .hsc-icon { background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-deep) 100%); color: var(--gold); border-color: var(--burgundy-deep); } .hero-side-card.consult .hsc-eyebrow { color: var(--gold-deep); } .hero-side-card.consult .hsc-title { padding-right: 56px; } .hsc-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); } .hsc-cta-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--burgundy); color: #fff; font-size: 12.5px; font-weight: 700; border-radius: 3px; transition: all 220ms; letter-spacing: 0.01em; } .hero-side-card.consult:hover .hsc-cta-pill { background: var(--burgundy-deep); } .hsc-cta-arrow { font-size: 18px; color: var(--burgundy); font-weight: 700; transition: transform 220ms; } .hero-side-card.consult:hover .hsc-cta-arrow { transform: translateX(4px); } /* Mini benefits row inside offer */ .hsc-benefits { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; padding: 0; } .hsc-benefits li { font-size: 11.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; } .hsc-benefits li::before { content: '✓'; color: var(--gold-deep); font-weight: 800; font-size: 11px; } /* ─── MEGA-MENU MARKETING PANELS (Services + Resources) ─── */ .mega-feat-stack { display: flex; flex-direction: column; gap: 12px; } /* Cost Calculator featured card inside Services dropdown */ .mega-cta-calc { display: block; background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-deep) 100%); color: #fff; padding: 18px 18px 16px; border-radius: 4px; position: relative; overflow: hidden; cursor: pointer; transition: transform 240ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 240ms; text-align: left; border: none; font-family: var(--font); width: 100%; } .mega-cta-calc::before { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: var(--gold); border-radius: 50%; opacity: 0.16; pointer-events: none; transition: transform 600ms; } .mega-cta-calc:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(103,0,66,0.32); } .mega-cta-calc:hover::before { transform: scale(1.4) rotate(20deg); } .mega-cta-calc .mc-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--gold); color: var(--burgundy-darker); border-radius: 6px; margin-bottom: 12px; } .mega-cta-calc .mc-icon svg { width: 18px; height: 18px; } .mega-cta-calc .mc-eyebrow { font-size: 10px; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; margin-bottom: 6px; } .mega-cta-calc .mc-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; line-height: 1.25; letter-spacing: -0.01em; } .mega-cta-calc .mc-desc { font-size: 11.5px; color: rgba(255,255,255,0.75); line-height: 1.45; margin-bottom: 12px; } .mega-cta-calc .mc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--gold); color: var(--burgundy-darker); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; border-radius: 3px; transition: all 220ms; } .mega-cta-calc:hover .mc-btn { background: #fff; gap: 10px; } /* 100% Foreign Ownership featured card inside Services dropdown */ .mega-cta-ownership { display: block; background: var(--paper); border: 1px solid rgba(184,146,75,0.4); border-radius: 4px; padding: 16px; position: relative; overflow: hidden; transition: all 240ms cubic-bezier(0.2,0.8,0.2,1); cursor: pointer; } .mega-cta-ownership::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold) 0%, var(--burgundy) 100%); } .mega-cta-ownership:hover { background: var(--gold-soft); border-color: var(--gold); transform: translateX(2px); } .mega-cta-ownership .mo-eyebrow { font-size: 10px; color: var(--gold-deep); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .mega-cta-ownership .mo-eyebrow::before { content: '★'; color: var(--gold); } .mega-cta-ownership .mo-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: 1.25; } .mega-cta-ownership .mo-desc { font-size: 11.5px; color: var(--ink-mute); line-height: 1.45; margin-bottom: 8px; } .mega-cta-ownership .mo-link { font-size: 11.5px; font-weight: 700; color: var(--burgundy); display: inline-flex; align-items: center; gap: 4px; } .mega-cta-ownership .mo-link::after { content: '→'; transition: transform 220ms; } .mega-cta-ownership:hover .mo-link::after { transform: translateX(3px); } /* Latest blogs panel inside Resources dropdown */ .mega-blog-panel .mb-eyebrow { font-size: 10.5px; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); } .mega-blog-list { display: flex; flex-direction: column; gap: 4px; } .mega-blog-item { display: block; padding: 10px 10px; margin-left: -10px; margin-right: -10px; border-radius: 4px; transition: all 220ms; cursor: pointer; border-bottom: 1px solid var(--rule); } .mega-blog-item:last-child { border-bottom: none; } .mega-blog-item:hover { background: var(--burgundy-tint); padding-left: 14px; } .mb-cat { display: inline-block; padding: 2px 7px; background: var(--burgundy); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; margin-bottom: 6px; } .mega-blog-item:nth-child(2) .mb-cat { background: var(--gold-deep); } .mega-blog-item:nth-child(3) .mb-cat { background: var(--ink-2); } .mb-title { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 4px; letter-spacing: -0.01em; transition: color 220ms; } .mega-blog-item:hover .mb-title { color: var(--burgundy); } .mb-meta { font-size: 10.5px; color: var(--ink-mute); display: flex; align-items: center; gap: 8px; } .mb-meta .mb-dot { width: 2px; height: 2px; border-radius: 50%; background: var(--ink-faint); } .mega-blog-view { display: block; text-align: center; padding: 10px 0 4px; margin-top: 8px; border-top: 1px solid var(--rule); font-size: 11.5px; font-weight: 700; color: var(--burgundy); letter-spacing: 0.04em; transition: all 220ms; } .mega-blog-view:hover { color: var(--burgundy-deep); letter-spacing: 0.08em; } .mega-blog-view::after { content: ' →'; transition: margin-left 200ms; } .mega-blog-view:hover::after { margin-left: 4px; } /* ─── ABOUT MENU STATS CARD ─── */ .mega-stats-card { background: linear-gradient(160deg, var(--burgundy) 0%, var(--burgundy-deep) 100%); color: #fff; border-radius: 4px; padding: 18px 16px; position: relative; overflow: hidden; } .mega-stats-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 120px; height: 120px; background: var(--gold); border-radius: 50%; opacity: 0.10; pointer-events: none; } .mega-stats-card::after { content: ''; position: absolute; bottom: -30px; left: -30px; width: 70px; height: 70px; background: var(--gold); border-radius: 50%; opacity: 0.06; pointer-events: none; } .mega-stats-header { position: relative; z-index: 1; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.12); } .mega-stats-eyebrow { font-size: 9.5px; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; margin-bottom: 4px; } .mega-stats-title { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 2px; } .mega-stats-sub { font-size: 10.5px; color: rgba(255,255,255,0.65); } .mega-stats-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .mega-stat { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,0.08); } .mega-stat:last-child { border-bottom: none; } .mega-stat-icon { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: rgba(184,146,75,0.16); border: 1px solid rgba(184,146,75,0.32); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; } .mega-stat-icon svg { width: 12px; height: 12px; } .mega-stat-text { line-height: 1.2; } .mega-stat-val { font-size: 12.5px; font-weight: 800; color: #fff; letter-spacing: -0.01em; } .mega-stat-val .accent-g { color: var(--gold); } .mega-stat-lbl { font-size: 9.5px; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; margin-top: 1px; } .mega-stats-cta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; background: var(--gold); color: var(--burgundy-darker); border-radius: 3px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; transition: all 220ms; } .mega-stats-cta:hover { background: #fff; gap: 10px; } .mega-stats-cta::after { content: '→'; font-weight: 700; } /* ─── MENU ITEMS WITH ICONS (Services & Resources) ─── */ .mega-col .mega-link { display: flex; align-items: center; gap: 8px; padding: 7px 8px; margin-left: -8px; font-size: 13px; color: var(--ink-2); border-radius: 3px; transition: all 200ms; line-height: 1.2; position: relative; } .mega-col .mega-link::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--burgundy); transform: translateY(-50%); transition: width 240ms cubic-bezier(0.2,0.8,0.2,1); } .mega-col .mega-link:hover { color: var(--burgundy); background: var(--burgundy-tint); padding-left: 18px; } .mega-col .mega-link:hover::before { width: 8px; } .mega-col .mega-link .ml-text { flex: 1; } .mega-col .mega-link .ml-tag { font-size: 8.5px; padding: 1px 5px; background: var(--gold); color: var(--burgundy-darker); font-weight: 800; letter-spacing: 0.06em; border-radius: 2px; } .mega-col .mega-link .ml-tag.new { background: var(--burgundy); color: #fff; } /* Compact blog items so Resources balances better */ .mega-blog-item { padding: 9px 10px; } .mb-title { font-size: 12.5px; } .mb-meta { font-size: 10px; } /* ─── HERO DECORATIVE LAYER (Option B: refined curves + skyline + wave) ─── */ .hero-curve { position: absolute; top: 0; right: 0; bottom: 0; width: 38%; max-width: 600px; min-width: 320px; pointer-events: none; z-index: 0; } .hero-curve svg { width: 100%; height: 100%; display: block; } .hero-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70px; pointer-events: none; z-index: 2; } .hero-wave svg { width: 100%; height: 100%; display: block; } @media (max-width: 980px) { .hero-curve { width: 50%; opacity: 0.5; } } /* ─── FLOATING WHATSAPP BUTTON ─── */ .wa-fab { position: fixed; bottom: 24px; left: 24px; width: 58px; height: 58px; border-radius: 50%; background: var(--wa-green); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37,211,102,0.32), 0 2px 6px rgba(0,0,0,0.12); z-index: 95; transition: all 240ms cubic-bezier(0.2,0.8,0.2,1); text-decoration: none; } .wa-fab::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--wa-green); z-index: -1; animation: pulseRing 2.4s ease-out infinite; } .wa-fab:hover { transform: scale(1.06); background: var(--wa-green-darker); box-shadow: 0 12px 32px rgba(37,211,102,0.42); } .wa-fab svg { width: 30px; height: 30px; } .wa-tooltip { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(-4px); white-space: nowrap; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 4px; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: all 220ms; } .wa-tooltip::before { content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: var(--ink); border-left: 0; } .wa-fab:hover .wa-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); } @media (max-width: 900px) { .wa-fab { display: none; } } /* ═══ DARK PREMIUM LUXURY HERO (Option 5) ═══════════════════════════ */ .hero { background: var(--burgundy-darker); border-top: 3px solid var(--gold); } /* Hide previous decorative curve (invisible on dark anyway) */ .hero-curve { display: none; } /* Faint grid + skyline watermark on the right */ .hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 119px, rgba(184,146,75,0.06) 119px, rgba(184,146,75,0.06) 120px); pointer-events: none; z-index: 0; } .hero::after { content: ''; position: absolute; top: 12%; right: 0; width: 32%; height: 78%; background: linear-gradient(transparent 70%, rgba(184,146,75,0.05) 100%), repeating-linear-gradient(90deg, transparent 0, transparent 30px, rgba(184,146,75,0.04) 30px, rgba(184,146,75,0.04) 50px, transparent 50px, transparent 80px, rgba(184,146,75,0.05) 80px, rgba(184,146,75,0.05) 110px, transparent 110px, transparent 140px, rgba(184,146,75,0.04) 140px, rgba(184,146,75,0.04) 165px); mask-image: linear-gradient(to top, #000 50%, transparent 100%); -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 100%); pointer-events: none; z-index: 0; } /* Section marker */ .hero .section-marker { color: var(--gold); } .hero .section-marker .num { color: rgba(255,255,255,0.55); } .hero .section-marker::after { background: var(--gold); } /* H1 */ .hero h1 { color: #fff; } .hero h1 .accent { color: var(--gold); } .hero h1 .accent::after { background: rgba(184,146,75,0.20); } /* Lede */ .hero-lede { color: rgba(255,255,255,0.82); } .hero-lede strong { color: #fff; } /* Primary CTA → gold filled with dark burgundy text (high contrast) */ .hero-actions .btn-primary { background: var(--gold); color: var(--burgundy-darker); border-color: var(--gold); } .hero-actions .btn-primary:hover { background: #d4a955; border-color: #d4a955; color: var(--burgundy-darker); } .hero-actions .btn-primary .arr { color: var(--burgundy-darker); } /* Stats card → transparent on dark with gold top border */ .hero-stats { background: transparent; border-color: rgba(184,146,75,0.32); border-top: 2px solid var(--gold); } .hero-stats .item { border-right-color: rgba(184,146,75,0.28); } .hero-stats .item:hover { background: rgba(184,146,75,0.10); } .hero-stats .label { color: rgba(255,255,255,0.68); font-weight: 700; } .hero-stats .val { color: #fff; } .hero-stats .val .plus { color: var(--gold); } @media (max-width: 720px) { .hero-stats .item:nth-child(1), .hero-stats .item:nth-child(2) { border-bottom-color: rgba(184,146,75,0.28); } } /* Trust band - extra top margin since pathways are gone */ .hero-trust { margin-top: 28px !important; background: rgba(184,146,75,0.09); border-color: rgba(184,146,75,0.32); } .hero-trust-item svg { color: var(--gold); } .hero-trust-item .lbl { color: #fff; } .hero-trust-item .sub { color: rgba(255,255,255,0.72); } /* Wave divider fade - gold tracer line a bit more visible against dark hero */ .hero-wave path[stroke="#b8924b"] { opacity: 0.55; stroke-width: 1.4; } /* ═══ COMPACT INDUSTRIES CHIPS ══════════════════════════════════════ */ .industries-compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 880px) { .industries-compact { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .industries-compact { grid-template-columns: 1fr; } } .ind-chip { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; transition: all 220ms ease; } .ind-chip:hover { border-color: var(--burgundy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(103,0,66,0.08); } .ind-chip-num { font-size: 14px; font-weight: 700; color: var(--gold); letter-spacing: 0.05em; flex: 0 0 28px; } .ind-chip-body { flex: 1; min-width: 0; } .ind-chip-name { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; line-height: 1.2; } .ind-chip-sub { font-size: 12px; color: var(--ink-mute); line-height: 1.35; } .ind-chip-stat { font-size: 12.5px; font-weight: 700; color: var(--burgundy); white-space: nowrap; } .ind-chip-stat span { font-weight: 500; color: var(--ink-mute); margin-left: 2px; } /* ═══ CLIENT VOICES - VIDEOS + REVIEWS COMPACT ════════════════════════ */ /* Corporate video - landscape 16:9 */ .corp-video { position: relative; width: 100%; max-width: 920px; margin: 0 auto 28px; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #2e001f 0%, #4a002b 50%, #2e001f 100%); border-radius: 6px; overflow: hidden; cursor: pointer; border: 1px solid rgba(184,146,75,0.32); box-shadow: 0 18px 50px rgba(46,0,31,0.18); } .corp-video-poster { position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 40%, rgba(184,146,75,0.18) 0%, transparent 55%), radial-gradient(ellipse at 78% 60%, rgba(103,0,66,0.55) 0%, transparent 60%), linear-gradient(135deg, #1a000f 0%, #2e001f 50%, #420029 100%); } .corp-video-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.6) 100%); } .corp-video-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(184,146,75,0.05) 39px, rgba(184,146,75,0.05) 40px), repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(184,146,75,0.04) 39px, rgba(184,146,75,0.04) 40px); mix-blend-mode: overlay; } .corp-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,0.95); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 320ms cubic-bezier(0.2,0.8,0.2,1); box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 0 8px rgba(255,255,255,0.08); } .corp-video-play svg { width: 30px; height: 30px; color: var(--burgundy); margin-left: 4px; } .corp-video:hover .corp-video-play, .corp-video:focus-visible .corp-video-play { background: var(--gold); transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 14px 50px rgba(184,146,75,0.5), 0 0 0 12px rgba(184,146,75,0.18); } .corp-video:hover .corp-video-play svg { color: var(--burgundy-darker); } .corp-video-meta { position: absolute; bottom: 22px; left: 26px; right: 26px; color: #fff; z-index: 2; } .corp-video-pill { display: inline-block; padding: 5px 12px; margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--gold); background: rgba(46,0,31,0.75); border: 1px solid rgba(184,146,75,0.4); border-radius: 999px; backdrop-filter: blur(6px); } .corp-video-title { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 4px; text-shadow: 0 2px 12px rgba(0,0,0,0.4); } .corp-video-sub { font-size: 13px; color: rgba(255,255,255,0.78); text-shadow: 0 1px 6px rgba(0,0,0,0.4); } .corp-video-corner { position: absolute; top: 18px; right: 20px; display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255,255,255,0.78); padding: 5px 10px; background: rgba(0,0,0,0.4); border: 1px solid rgba(184,146,75,0.25); border-radius: 3px; backdrop-filter: blur(6px); } .corp-video-corner .dot { display: none; } @keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } @media (max-width: 600px) { .corp-video-title { font-size: 16px; } .corp-video-sub { font-size: 11.5px; } .corp-video-play { width: 64px; height: 64px; } .corp-video-play svg { width: 22px; height: 22px; } } /* Portrait testimonial videos - 9:16 reels-style */ .pv-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 32px; } @media (max-width: 980px) { .pv-row { grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } .pv-card { scroll-snap-align: start; } } .pv-card { position: relative; aspect-ratio: 9 / 16; background: linear-gradient(160deg, #2e001f 0%, #4a002b 100%); border-radius: 6px; overflow: hidden; cursor: pointer; border: 1px solid rgba(184,146,75,0.22); transition: transform 320ms cubic-bezier(0.2,0.8,0.2,1), border-color 240ms; } .pv-card:hover { transform: translateY(-4px); border-color: var(--gold); } .pv-poster { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%); } .pv-card .pv-poster::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.06) 0%, transparent 50%), repeating-linear-gradient(45deg, transparent 0, transparent 24px, rgba(184,146,75,0.03) 24px, rgba(184,146,75,0.03) 25px); } /* Per-card gradient variety */ .pv-c1 .pv-poster { background-image: linear-gradient(160deg, rgba(184,146,75,0.4) 0%, rgba(103,0,66,0.6) 70%), linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%); } .pv-c2 .pv-poster { background-image: linear-gradient(160deg, rgba(60,90,140,0.4) 0%, rgba(103,0,66,0.6) 70%), linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%); } .pv-c3 .pv-poster { background-image: linear-gradient(160deg, rgba(140,60,140,0.4) 0%, rgba(46,0,31,0.65) 70%), linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%); } .pv-c4 .pv-poster { background-image: linear-gradient(160deg, rgba(200,120,40,0.4) 0%, rgba(103,0,66,0.6) 70%), linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%); } .pv-c5 .pv-poster { background-image: linear-gradient(160deg, rgba(80,140,100,0.35) 0%, rgba(103,0,66,0.6) 70%), linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%); } .pv-play { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.94); display: flex; align-items: center; justify-content: center; transition: all 280ms cubic-bezier(0.2,0.8,0.2,1); box-shadow: 0 6px 24px rgba(0,0,0,0.4); } .pv-play svg { width: 18px; height: 18px; color: var(--burgundy); margin-left: 2px; } .pv-card:hover .pv-play { background: var(--gold); transform: translate(-50%, -50%) scale(1.12); } .pv-duration { position: absolute; top: 12px; right: 12px; padding: 3px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: rgba(0,0,0,0.55); border-radius: 3px; backdrop-filter: blur(4px); } .pv-meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 14px 16px; color: #fff; z-index: 2; } .pv-client { font-size: 13.5px; font-weight: 700; line-height: 1.2; margin-bottom: 2px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .pv-role { font-size: 10.5px; color: var(--gold); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 8px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .pv-quote { font-size: 11.5px; line-height: 1.42; color: rgba(255,255,255,0.95); font-style: italic; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } /* Compact Google reviews band */ .rc-band { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 18px 28px; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; flex-wrap: wrap; } .rc-google { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.02em; } .rc-divider { width: 1px; height: 36px; background: var(--rule); } .rc-score { font-size: 32px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1; } .rc-rating { display: flex; flex-direction: column; gap: 2px; } .rc-stars { font-size: 16px; color: var(--gold); letter-spacing: 2px; line-height: 1; } .rc-count { font-size: 11.5px; color: var(--ink-mute); } .rc-count strong { color: var(--ink); font-weight: 700; } .rc-link { color: var(--burgundy); font-size: 13px; font-weight: 600; text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(103,0,66,0.32); transition: all 200ms; } .rc-link:hover { color: var(--burgundy-deep); border-bottom-color: var(--burgundy); } @media (max-width: 700px) { .rc-band { gap: 12px; padding: 14px 18px; } .rc-divider { display: none; } .rc-score { font-size: 26px; } } /* ═══ COMPACT SECTION HEAD ═══════════════════════════════════════════ */ .section-head.sh-compact { margin-bottom: 28px; gap: 36px; } /* ═══ CLIENT LOGO WALL ═══════════════════════════════════════════════ */ .logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; } @media (max-width: 980px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 540px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } } .logo-cell { background: var(--paper); min-height: 108px; display: flex; align-items: center; justify-content: center; padding: 22px 18px; position: relative; transition: background 280ms; } .logo-cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--burgundy); transform: scaleX(0); transform-origin: left; transition: transform 320ms cubic-bezier(0.2,0.8,0.2,1); } .logo-cell:hover { background: var(--bg); } .logo-cell:hover::before { transform: scaleX(1); } /* Uploaded client logo images: contain within the cell, max height, slight grayscale by default that lifts to full color on hover, matching the visual treatment of the original wordmark mockups. */ .client-logo-img { max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%); opacity: 0.65; transition: filter 320ms, opacity 320ms; } .logo-cell:hover .client-logo-img { filter: grayscale(0%); opacity: 1; } /* Fallback wordmark for client entries with a title but no uploaded image */ .wm-fallback { font-family: var(--font); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; color: var(--ink-mute); text-align: center; } /* Wordmark base */ .wm { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-mute); transition: color 320ms; line-height: 1; text-align: center; } .logo-cell:hover .wm { color: var(--burgundy); } /* Wordmark variations - each client gets a distinct visual identity */ .wm-1 { font-family: var(--font); font-weight: 800; font-size: 17px; letter-spacing: 0.18em; } .wm-1 .wm-sub { font-size: 8.5px; font-weight: 600; letter-spacing: 0.4em; margin-top: 3px; color: var(--gold); } .wm-2 { font-family: 'Times New Roman', serif; font-weight: 700; font-size: 24px; letter-spacing: -0.01em; flex-direction: row; align-items: baseline; gap: 5px; } .wm-2 em { font-style: italic; } .wm-2 .wm-tag { font-family: var(--font); font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: 0.3em; padding: 3px 6px; border: 1px solid currentColor; } .wm-3 { font-family: 'Times New Roman', serif; font-weight: 400; font-size: 20px; letter-spacing: 0.01em; flex-direction: row; align-items: baseline; gap: 4px; } .wm-3 .wm-accent { color: var(--gold); font-size: 22px; } .wm-3 .wm-rest { font-style: italic; } .wm-4 { font-family: var(--font); font-weight: 300; font-size: 26px; letter-spacing: -0.03em; flex-direction: row; align-items: baseline; gap: 4px; text-transform: lowercase; } .wm-4 .wm-dot { color: var(--gold); font-weight: 700; } .wm-4 .wm-rest2 { font-weight: 700; } .wm-5 { font-family: var(--font); font-weight: 700; font-size: 16px; letter-spacing: 0.18em; } .wm-5 .wm-italic { font-family: 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 13px; letter-spacing: 0.04em; margin-top: 4px; text-transform: lowercase; color: var(--gold); } .wm-6 { font-family: var(--font); font-weight: 800; font-size: 18px; letter-spacing: 0.12em; } .wm-6 .wm-thin { font-weight: 300; font-size: 9.5px; letter-spacing: 0.42em; margin-top: 4px; } /* Logo footer line */ .logo-foot { display: flex; align-items: center; gap: 16px; margin-top: 24px; font-size: 12.5px; color: var(--ink-mute); letter-spacing: 0.04em; justify-content: center; } .logo-foot .lf-line { flex: 1; max-width: 200px; height: 1px; background: var(--rule); } .logo-foot .lf-text strong { color: var(--burgundy); font-weight: 700; } /* ═══ GOVERNMENT PARTNERS WALL ═══════════════════════════════════════ */ .gov-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; } @media (max-width: 980px) { .gov-wall { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 540px) { .gov-wall { grid-template-columns: repeat(2, 1fr); } } .gov-cell { background: var(--paper); min-height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 14px; position: relative; transition: background 280ms; text-align: center; } .gov-cell::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 320ms cubic-bezier(0.2,0.8,0.2,1); } .gov-cell:hover { background: var(--burgundy-tint); } .gov-cell:hover::before { transform: scaleX(1); } .gov-emblem { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; opacity: 0.88; transition: opacity 280ms; } .gov-cell:hover .gov-emblem { opacity: 1; } /* Uploaded gov logo images: contained, larger than the inline SVG default, desaturated → full color on hover (matches client marquee treatment). Now that we render logos only (no acronym/name text), the box can be generous so each authority's identity reads clearly. */ .gov-emblem-img { width: 100px; height: 80px; } .gov-logo-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(40%); opacity: 0.85; transition: filter 320ms, opacity 320ms; } .gov-cell:hover .gov-logo-img { filter: grayscale(0%); opacity: 1; } /* Blank-state emblem when an entry has no image and no SVG: shows a circle with the first letter of the acronym, in the brand gold. */ .gov-emblem-blank { background: var(--gold-soft); border-radius: 50%; color: var(--gold-deep); font-weight: 700; font-size: 14px; letter-spacing: 0; } .gov-emblem-initial { font-family: var(--font); line-height: 1; } .gov-acronym { font-size: 14px; font-weight: 800; color: var(--burgundy); letter-spacing: 0.12em; margin-top: 2px; } .gov-name { font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.02em; line-height: 1.35; max-width: 110px; } /* ═══ LOGO MARQUEES (left & right sliding) ═══════════════════════════ */ .logo-marquee, .gov-marquee { overflow: hidden; position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%); } .logo-track, .gov-track { display: flex; width: max-content; will-change: transform; } .logo-track { animation: marqueeLeft 36s linear infinite; } .gov-track { animation: marqueeRight 36s linear infinite; } .logo-marquee:hover .logo-track, .gov-marquee:hover .gov-track { animation-play-state: paused; } @keyframes marqueeLeft { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @keyframes marqueeRight { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .logo-track, .gov-track { animation: none; } } /* Cells inside marquees: fixed width so they actually scroll */ .logo-marquee .logo-cell { flex-shrink: 0; width: 220px; min-height: 116px; border-right: 1px solid var(--rule); border-bottom: none; } .gov-marquee .gov-cell { flex-shrink: 0; width: 220px; min-height: 148px; border-right: 1px solid var(--rule); border-bottom: none; } .logo-marquee .logo-cell::before, .gov-marquee .gov-cell::before { display: none; } @media (max-width: 540px) { .logo-marquee .logo-cell, .gov-marquee .gov-cell { width: 180px; } .logo-track { animation-duration: 28s; } .gov-track { animation-duration: 28s; } } /* ─── New wordmark variants (wm-7, wm-8) ─── */ .wm-7 { font-family: var(--font); font-weight: 800; font-size: 16px; letter-spacing: 0.22em; flex-direction: column; align-items: center; gap: 0; position: relative; } .wm-7 .wm-7-line { display: block; width: 34px; height: 2px; background: var(--gold); margin: 4px 0; } .wm-7 .wm-7-sub { font-size: 8.5px; font-weight: 600; letter-spacing: 0.36em; color: var(--gold); } .wm-8 { font-family: 'Times New Roman', serif; font-weight: 400; font-size: 22px; letter-spacing: 0.01em; flex-direction: row; align-items: baseline; gap: 0; position: relative; } .wm-8 .wm-8-init { font-size: 32px; font-style: italic; color: var(--gold); font-weight: 400; line-height: 0.7; } .wm-8 .wm-8-rest { font-style: italic; } .wm-8 .wm-8-tag { font-family: var(--font); font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; margin-left: 8px; padding-left: 8px; border-left: 1px solid currentColor; } /* ═══ HERO CALC - INTERACTIVE STEP 1 ═════════════════════════════════ */ .calc-interactive { cursor: default; padding: 26px 26px 22px; } .calc-interactive:hover { transform: none; box-shadow: 0 1px 2px rgba(26,29,36,0.04), 0 12px 32px rgba(26,29,36,0.06); } .ci-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; } .ci-tag { font-size: 11px; font-weight: 700; color: var(--burgundy); letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; } .ci-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(184,146,75,0.18); } .ci-progress { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink-mute); } .cp-step { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); transition: all 320ms cubic-bezier(0.2,0.8,0.2,1); } .cp-step.cp-active { width: 22px; border-radius: 3px; background: var(--burgundy); } .cp-text { margin-left: 6px; font-weight: 700; letter-spacing: 0.06em; color: var(--burgundy); } .ci-eyebrow { font-size: 10.5px; font-weight: 700; color: var(--gold-deep); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; } .ci-question { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; color: var(--ink); margin-bottom: 20px; } .ci-question .accent { color: var(--burgundy); } .ci-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .ci-opt { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1.5px solid var(--rule); border-radius: 6px; background: #fff; cursor: pointer; transition: all 220ms cubic-bezier(0.2,0.8,0.2,1); position: relative; } .ci-opt:hover { border-color: var(--burgundy-soft); background: var(--burgundy-tint); transform: translateX(2px); } .ci-opt.ci-opt-selected { border-color: var(--burgundy); background: var(--burgundy-tint); box-shadow: 0 0 0 3px rgba(103,0,66,0.06); } .ci-opt input { position: absolute; opacity: 0; pointer-events: none; } .ci-tick { width: 18px; height: 18px; border: 1.5px solid var(--rule); border-radius: 50%; flex-shrink: 0; position: relative; background: #fff; transition: border-color 220ms; } .ci-tick::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--burgundy); transform: scale(0); transition: transform 240ms cubic-bezier(0.2,0.8,0.2,1); } .ci-opt:hover .ci-tick { border-color: var(--burgundy); } .ci-opt.ci-opt-selected .ci-tick { border-color: var(--burgundy); } .ci-opt.ci-opt-selected .ci-tick::after { transform: scale(1); } .ci-opt-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .ci-opt-title { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; } .ci-opt-sub { font-size: 11.5px; color: var(--ink-mute); line-height: 1.35; } .ci-next { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 18px; background: var(--burgundy); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-family: var(--font); font-size: 14.5px; font-weight: 700; letter-spacing: 0.01em; transition: all 240ms cubic-bezier(0.2,0.8,0.2,1); box-shadow: 0 4px 12px rgba(103,0,66,0.18); margin-bottom: 14px; } .ci-next:hover { background: var(--burgundy-deep); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(103,0,66,0.32); } .ci-next:active { transform: translateY(0); } .ci-next-arrow { transition: transform 240ms; display: inline-block; } .ci-next:hover .ci-next-arrow { transform: translateX(4px); } .ci-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.02em; } .ci-foot-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .ci-foot-item svg { width: 11px; height: 11px; color: var(--gold); flex-shrink: 0; } @media (max-width: 600px) { .calc-interactive { padding: 22px 20px 18px; } .ci-question { font-size: 20px; } .ci-foot { flex-direction: column; align-items: flex-start; gap: 6px; } } /* ═══ 2-OPTION CALC: ATTENTION-GRABBING PULSE ════════════════════════ */ .ci-options-two { gap: 10px; } .ci-options-two .ci-opt { padding: 14px 16px; overflow: hidden; position: relative; } /* Glow layer (sits behind content, animates) */ .ci-opt-glow { position: absolute; inset: -2px; border-radius: 8px; background: linear-gradient(135deg, rgba(184,146,75,0.0) 0%, rgba(184,146,75,0.0) 100%); pointer-events: none; z-index: 0; opacity: 0; } /* The pulse animation: 3.4s loop, staggered between the two options Goes through: idle → soft glow → soft accent border → idle */ @keyframes ciPulseAttn { 0%, 80%, 100% { box-shadow: 0 0 0 0 rgba(184,146,75,0); border-color: var(--rule); } 8% { box-shadow: 0 0 0 6px rgba(184,146,75,0.0); border-color: rgba(184,146,75,0.55); } 22% { box-shadow: 0 0 0 8px rgba(184,146,75,0.0); border-color: rgba(184,146,75,0.35); } 40% { box-shadow: 0 0 0 0 rgba(184,146,75,0); border-color: var(--rule); } } @keyframes ciGlowSweep { 0%, 80%, 100% { opacity: 0; transform: translateX(-100%); } 8% { opacity: 1; transform: translateX(-100%); } 30% { opacity: 1; transform: translateX(100%); } 40% { opacity: 0; transform: translateX(100%); } } .ci-opt-pulse { animation: ciPulseAttn 3.4s ease-in-out infinite; } .ci-opt-pulse .ci-opt-glow { background: linear-gradient(110deg, transparent 30%, rgba(184,146,75,0.20) 45%, rgba(184,146,75,0.32) 50%, rgba(184,146,75,0.20) 55%, transparent 70%); animation: ciGlowSweep 3.4s ease-in-out infinite; } .ci-opt-pulse:nth-child(2) { animation-delay: 1.2s; } .ci-opt-pulse:nth-child(2) .ci-opt-glow { animation-delay: 1.2s; } /* Once user hovers or selects, kill the pulse (attention served) */ .ci-options-two:hover .ci-opt-pulse, .ci-options-two:hover .ci-opt-pulse .ci-opt-glow, .ci-opt-pulse.ci-opt-selected, .ci-opt-pulse.ci-opt-selected .ci-opt-glow { animation: none; } .ci-opt-pulse.ci-opt-selected .ci-opt-glow { opacity: 0; } /* Bring tick / body / cta above the glow layer */ .ci-options-two .ci-tick, .ci-options-two .ci-opt-body, .ci-options-two .ci-opt-cta { position: relative; z-index: 1; } /* The right-side "Choose" affordance (becomes "Selected ✓" on click) */ .ci-opt-cta { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); padding: 5px 10px; border: 1px solid rgba(184,146,75,0.42); border-radius: 999px; white-space: nowrap; transition: all 240ms cubic-bezier(0.2,0.8,0.2,1); } .ci-opt:hover .ci-opt-cta { color: #fff; background: var(--gold); border-color: var(--gold); } .ci-opt.ci-opt-selected .ci-opt-cta { color: #fff; background: var(--burgundy); border-color: var(--burgundy); } .ci-opt.ci-opt-selected .ci-opt-cta::after { content: ' ✓'; } .ci-opt.ci-opt-selected .ci-opt-cta::before { content: 'Selected'; } .ci-opt.ci-opt-selected .ci-opt-cta-original { display: none; } /* Override the .ci-opt-cta content via JS swap on selection */ @media (prefers-reduced-motion: reduce) { .ci-opt-pulse, .ci-opt-pulse .ci-opt-glow { animation: none; } } @media (max-width: 600px) { .ci-opt-cta { display: none; } } /* ═══ ABOUT SECTION ═══════════════════════════════════════════════════ */ .about-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; align-items: stretch; margin-bottom: 40px; } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 28px; } } .about-video-col { display: flex; align-items: stretch; } .about-corp-video { margin: 0; max-width: none; width: 100%; aspect-ratio: 16 / 10; } .about-stats-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(184, 146, 75, 0.20); border-top: 3px solid var(--gold); border-radius: 4px; overflow: hidden; align-content: stretch; } @media (max-width: 540px) { .about-stats-col { grid-template-columns: 1fr; } } .about-stat { background: var(--burgundy-darker); border: none; border-radius: 0; padding: 22px 22px 18px; display: flex; flex-direction: column; justify-content: center; gap: 6px; transition: background 280ms; position: relative; } .about-stat:hover { background: #3a0026; transform: none; box-shadow: none; } .about-stat-lbl { font-size: 9.5px; font-weight: 700; color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 2px; } .about-stat-val { font-size: 38px; font-weight: 800; color: var(--gold); letter-spacing: -0.03em; line-height: 1; font-feature-settings: "tnum" 1; margin-bottom: 2px; } .about-stat-val .plus { color: #fff; font-size: 24px; font-weight: 600; margin-left: 2px; } .about-stat-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.72); line-height: 1.45; letter-spacing: 0.01em; margin-top: 2px; } .about-footer { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 24px 28px; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; border-left: 3px solid var(--gold); } @media (max-width: 820px) { .about-footer { flex-direction: column; align-items: flex-start; gap: 20px; padding: 22px; } } .about-pillars { display: flex; gap: 36px; flex-wrap: wrap; flex: 1; } @media (max-width: 600px) { .about-pillars { gap: 18px; flex-direction: column; } } .about-pillar { display: flex; align-items: flex-start; gap: 12px; } .ap-num { font-size: 13px; font-weight: 800; color: var(--gold); letter-spacing: 0.04em; padding-top: 2px; } .ap-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; } .ap-desc { font-size: 12px; color: var(--ink-mute); line-height: 1.45; max-width: 200px; } .about-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--burgundy); color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; border-radius: 4px; white-space: nowrap; transition: all 240ms; box-shadow: 0 4px 12px rgba(103,0,66,0.18); } .about-cta:hover { background: var(--burgundy-deep); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(103,0,66,0.28); } /* ═══ GOOGLE REVIEW CARDS (3-card layout under testimonial videos) ════ */ .rev-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; margin-bottom: 16px; flex-wrap: wrap; } .rev-header-left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .rev-google-mark { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.02em; padding-right: 22px; border-right: 1px solid var(--rule); } .rev-score-row { display: flex; align-items: baseline; gap: 10px; } .rev-score { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } .rev-stars { font-size: 14px; color: var(--gold); letter-spacing: 2px; } .rev-count { font-size: 12px; color: var(--ink-mute); } .rev-count strong { color: var(--ink); font-weight: 700; } .rev-header-link { font-size: 12.5px; font-weight: 600; color: var(--burgundy); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(103,0,66,0.32); transition: all 200ms; white-space: nowrap; } .rev-header-link:hover { color: var(--burgundy-deep); border-bottom-color: var(--burgundy); } @media (max-width: 600px) { .rev-header { padding: 14px 16px; } .rev-google-mark { padding-right: 0; border-right: none; } } /* ════════════════════════════════════════════════════════════════════════ Reviews marquee (v1.2.3+) — replaces the older 3-column grid (.rev-cards) with a horizontal scrolling track that pauses on hover. Mirrors the client-logo marquee mechanic. - .rev-marquee overflow container with edge fade mask - .rev-track flex row, animated translateX 0 → -50%, paused on hover - .rev-card fixed width so the track has measurable size When fewer than 3 reviews exist, the template renders only one pass and adds .rev-marquee-static — we disable the animation and center the row so two reviews don't look weirdly off-center while scrolling. ════════════════════════════════════════════════════════════════════════ */ .rev-marquee { position: relative; overflow: hidden; margin-bottom: 18px; /* Soft fade at left and right edges so cards fade in/out of the track rather than getting hard-cut. */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); } .rev-track { display: flex; width: max-content; gap: 16px; will-change: transform; animation: revMarquee 50s linear infinite; padding: 12px 0; /* breathing room so hover-lift has space and shadows don't clip */ } .rev-marquee:hover .rev-track, .rev-marquee:focus-within .rev-track { animation-play-state: paused; } @keyframes revMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .rev-track { animation: none; } } /* Static mode (< 3 reviews) — center the row, no scroll. */ .rev-marquee-static { -webkit-mask-image: none; mask-image: none; } .rev-marquee-static .rev-track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; } .rev-card { flex-shrink: 0; width: 360px; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 12px; transition: all 280ms cubic-bezier(0.2,0.8,0.2,1); } .rev-card:hover { transform: translateY(-3px); border-color: var(--burgundy-soft); box-shadow: 0 12px 28px rgba(26,29,36,0.08); } /* Tighter card width on small screens so two don't try to share a phone viewport */ @media (max-width: 600px) { .rev-card { width: 300px; } .rev-track { gap: 12px; animation-duration: 40s; } } .rev-card-head { display: flex; align-items: center; gap: 12px; } .rev-avatar { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; } /* Photo variant: when the testimonial has a featured image, we render the avatar as the photo (background-image set inline). Hides the initials text since the photo carries the identity. */ .rev-avatar.rev-avatar-photo { background-size: cover; background-position: center; color: transparent; } .rev-author { flex: 1; min-width: 0; } .rev-name { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; } .rev-meta { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.01em; margin-top: 2px; } .rev-card-google { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--rule); background: #fff; flex-shrink: 0; opacity: 0.7; } .rev-stars-row { font-size: 14px; color: var(--gold); letter-spacing: 3px; line-height: 1; } .rev-body { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0; font-style: italic; flex: 1; } .rev-tag-row { display: flex; flex-wrap: wrap; gap: 6px; } .rev-tag { font-size: 10.5px; font-weight: 600; color: var(--burgundy); background: var(--burgundy-tint); padding: 3px 8px; border-radius: 999px; letter-spacing: 0.02em; } .rev-footer { display: flex; align-items: center; gap: 16px; margin-top: 22px; justify-content: center; } .rev-footer-line { flex: 1; max-width: 180px; height: 1px; background: var(--rule); } .rev-footer-link { font-size: 12px; font-weight: 600; color: var(--burgundy); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; transition: all 220ms; } .rev-footer-link:hover { background: var(--burgundy); color: #fff; border-color: var(--burgundy); } /* ═══ PROCESS STEPPER ═══════════════════════════════════════════════ */ .stepper { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--burgundy); border-radius: 4px; display: grid; grid-template-columns: 260px 1fr; overflow: hidden; min-height: 380px; } @media (max-width: 820px) { .stepper { grid-template-columns: 1fr; } } /* Left rail */ .stepper-rail { background: rgba(26, 29, 36, 0.02); border-right: 1px solid var(--rule); padding: 6px 0; display: flex; flex-direction: column; } @media (max-width: 820px) { .stepper-rail { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--rule); padding: 8px; gap: 6px; scroll-snap-type: x mandatory; } .stepper-rail::-webkit-scrollbar { height: 4px; } } .stepper-rail-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; background: transparent; border: none; border-left: 3px solid transparent; cursor: pointer; font-family: var(--font); text-align: left; width: 100%; transition: all 220ms cubic-bezier(0.2,0.8,0.2,1); position: relative; } .stepper-rail-item:hover { background: rgba(103,0,66,0.04); } .stepper-rail-item.stepper-rail-active { background: var(--paper); border-left-color: var(--burgundy); } .srl-num { width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); color: var(--ink-mute); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 240ms; } .stepper-rail-item:hover .srl-num { border-color: var(--burgundy-soft); color: var(--burgundy); } .stepper-rail-active .srl-num { background: var(--burgundy); border-color: var(--burgundy); color: var(--gold); } .srl-title { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink-3); line-height: 1.3; transition: color 240ms; } .stepper-rail-active .srl-title { font-weight: 700; color: var(--ink); } .srl-day { font-size: 10px; font-weight: 700; color: var(--gold-deep); letter-spacing: 0.04em; white-space: nowrap; opacity: 0; transition: opacity 240ms; } .stepper-rail-active .srl-day { opacity: 1; } @media (max-width: 820px) { .stepper-rail-item { flex-shrink: 0; min-width: 200px; border-left: none; border-bottom: 3px solid transparent; border-radius: 4px; scroll-snap-align: start; } .stepper-rail-item.stepper-rail-active { border-left: none; border-bottom-color: var(--burgundy); } } /* Right panel */ .stepper-panels { padding: 0; position: relative; } .stepper-panel { display: none; grid-template-columns: 1fr 240px; gap: 0; animation: stepperFadeIn 320ms cubic-bezier(0.2,0.8,0.2,1); min-height: 380px; } .stepper-panel.stepper-panel-active { display: grid; } @media (max-width: 900px) { .stepper-panel { grid-template-columns: 1fr; min-height: auto; } } .sp-main { padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; } .sp-side { background: rgba(184,146,75,0.05); border-left: 1px solid var(--rule); padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; } @media (max-width: 900px) { .sp-side { border-left: none; border-top: 1px solid var(--rule); padding: 22px 24px; } .sp-main { padding: 24px 24px 8px; } } .sp-side-eyebrow { font-size: 10px; font-weight: 700; color: var(--gold-deep); letter-spacing: 0.18em; text-transform: uppercase; } .sp-fact { display: flex; flex-direction: column; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid rgba(184,146,75,0.18); } .sp-fact:last-child { border-bottom: none; padding-bottom: 0; } .sp-fact-lbl { font-size: 10.5px; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.05em; text-transform: uppercase; } .sp-fact-val { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; } @keyframes stepperFadeIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } .sp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; } .sp-eyebrow { font-size: 10px; font-weight: 700; color: var(--gold-deep); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .sp-progress { flex: 1; height: 2px; background: var(--rule); border-radius: 1px; overflow: hidden; position: relative; } .sp-progress-bar { display: block; height: 100%; background: linear-gradient(90deg, var(--burgundy) 0%, var(--gold) 100%); border-radius: 1px; transition: width 360ms cubic-bezier(0.2,0.8,0.2,1); } .sp-title { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.018em; line-height: 1.2; } .sp-body { font-size: 14px; color: var(--ink-3); line-height: 1.65; margin: 0; flex: 1; } .sp-body strong { color: var(--ink); font-weight: 700; } .sp-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .stepper-prev, .stepper-next { font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 9px 16px; border-radius: 4px; cursor: pointer; transition: all 200ms; letter-spacing: 0.01em; } .stepper-prev { background: var(--paper); color: var(--ink-3); border: 1px solid var(--rule); } .stepper-prev:hover:not(.stepper-disabled) { border-color: var(--burgundy); color: var(--burgundy); } .stepper-next { background: var(--burgundy); color: #fff; border: 1px solid var(--burgundy); } .stepper-next:hover:not(.stepper-disabled) { background: var(--burgundy-deep); border-color: var(--burgundy-deep); } .stepper-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ═══ STEP 8 - POST-PROCESS CTA CARD ═════════════════════════════════ */ .sp-cta-card { margin-top: 18px; padding: 26px 28px 24px; background: linear-gradient(135deg, var(--burgundy-darker) 0%, var(--burgundy) 100%); border-radius: 6px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 18px 38px rgba(46,0,31,0.18); } .sp-cta-card::before { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(184,146,75,0.18) 0%, transparent 70%); pointer-events: none; } .sp-cta-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 40%, transparent 40%, transparent 60%, var(--gold) 60%, var(--gold) 100%); } .sp-cta-eye { font-size: 10.5px; font-weight: 700; color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; position: relative; } .sp-cta-title { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.18; margin: 0 0 10px; position: relative; } .sp-cta-title .accent { color: var(--gold); } .sp-cta-sub { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.55; margin: 0 0 18px; max-width: 480px; position: relative; } .sp-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; position: relative; } .sp-cta-primary, .sp-cta-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 4px; font-family: var(--font); font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; text-decoration: none; transition: all 240ms cubic-bezier(0.2,0.8,0.2,1); border: none; } .sp-cta-primary { background: var(--gold); color: var(--burgundy-darker); box-shadow: 0 6px 18px rgba(184,146,75,0.32); } .sp-cta-primary:hover { background: #d4a955; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(184,146,75,0.46); } .sp-cta-primary svg { width: 16px; height: 16px; transition: transform 240ms; } .sp-cta-primary:hover svg { transform: translateX(3px); } .sp-cta-secondary { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.22); } .sp-cta-secondary:hover { background: rgba(37,211,102,0.18); border-color: #25D366; color: #fff; } .sp-cta-secondary svg { width: 14px; height: 14px; color: #25D366; } .sp-cta-trust { display: flex; gap: 18px; flex-wrap: wrap; position: relative; padding-top: 16px; border-top: 1px solid rgba(184,146,75,0.22); } .sp-cta-trust-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,0.78); letter-spacing: 0.02em; } .sp-cta-trust-item svg { width: 12px; height: 12px; color: var(--gold); flex-shrink: 0; } /* Back / Restart row below the CTA card */ .sp-actions-back { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule); } .stepper-restart { font-family: var(--font); font-size: 12px; font-weight: 600; padding: 8px 14px; background: transparent; color: var(--ink-mute); border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; transition: all 200ms; letter-spacing: 0.01em; } .stepper-restart:hover { color: var(--burgundy); border-color: var(--burgundy-soft); } @media (max-width: 600px) { .sp-cta-card { padding: 22px 20px 20px; } .sp-cta-title { font-size: 18px; } .sp-cta-actions { flex-direction: column; } .sp-cta-primary, .sp-cta-secondary { width: 100%; justify-content: center; } .sp-cta-trust { flex-direction: column; gap: 8px; } } /* ─── Cloudflare Turnstile widget ─── */ .turnstile-wrap { margin: 18px 0 12px; display: flex; flex-direction: column; gap: 8px; } .turnstile-wrap .cf-turnstile { min-height: 65px; } .turnstile-error { font-size: 12.5px; color: #c0392b; display: flex; align-items: center; gap: 6px; letter-spacing: 0.01em; } .turnstile-error[hidden] { display: none !important; } .turnstile-error::before { content: '!'; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #c0392b; color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; } .btn[disabled], .btn.is-loading { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .btn.is-loading .arr { animation: btnSpin 700ms linear infinite; } @keyframes btnSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn.is-loading .arr { animation: none; } } .form-conditional { transition: opacity 220ms ease; } .form-conditional[hidden] { display: none !important; } .form-conditional .field optgroup { font-weight: 600; color: var(--burgundy); } .form-conditional .field optgroup option { font-weight: 400; color: var(--ink); } /* ─── Hero clientele strip (premium audience signal) ─── */ .hero-clientele { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(184, 146, 75, 0.22); font-size: 13px; letter-spacing: 0.01em; } .hero-clientele-label { font-weight: 700; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; font-size: 10.5px; margin-right: 8px; } .hero-clientele-list { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .hero-clientele-list span:not(.dot) { color: rgba(255, 255, 255, 0.88); font-weight: 500; } .hero-clientele-list .dot { color: var(--gold); font-weight: 700; opacity: 0.7; } /* ── Inquiry form: success and error states ──────────────────── */ .form-success { background: #e6f9ed; color: #0f5132; padding: 16px 20px; border-radius: 12px; border: 1px solid #b6e3c5; margin-top: 16px; font-weight: 500; } .form-error { background: #fff0f0; color: #842029; padding: 14px 20px; border-radius: 12px; border: 1px solid #f5c2c7; margin-top: 16px; } .btn[disabled], .btn.is-loading { opacity: 0.6; pointer-events: none; cursor: wait; } /* ════════════════════════════════════════════════════════════════ Form confirmation card (shown after successful submission) ════════════════════════════════════════════════════════════════ */ .form-confirm { padding: 8px 0 4px; animation: confirmIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes confirmIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .form-confirm-icon { width: 56px; height: 56px; border-radius: 50%; background: #e6f9ed; color: #0f7a3a; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 0 0 6px rgba(15, 122, 58, 0.06); } .form-confirm-icon svg { width: 28px; height: 28px; } .form-confirm-title { font-family: var(--font); font-size: 26px; font-weight: 600; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; } .form-confirm-title [data-confirm-name] { color: var(--burgundy); } .form-confirm-lede { color: var(--ink-mute); font-size: 15px; line-height: 1.6; margin: 0 0 24px; max-width: 520px; } .form-confirm-steps { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 18px 0; display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; } .form-confirm-step { display: flex; gap: 14px; align-items: flex-start; } .form-confirm-step .step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--burgundy); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; letter-spacing: 0; } .form-confirm-step .step-title { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; letter-spacing: 0.005em; } .form-confirm-step .step-desc { font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; } .form-confirm-ref { font-size: 13px; color: var(--ink-mute); margin-bottom: 16px; padding: 10px 14px; background: var(--bg); border-radius: 8px; letter-spacing: 0.01em; } .form-confirm-ref strong { color: var(--ink); font-weight: 600; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; } .form-confirm-meta { font-size: 13.5px; color: var(--ink-mute); line-height: 1.6; } .form-confirm-meta a { color: var(--burgundy); text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(103, 0, 66, 0.3); transition: border-color 200ms; } .form-confirm-meta a:hover { border-bottom-color: var(--burgundy); } .form-confirm-wa { display: inline-flex; align-items: center; gap: 4px; } .form-confirm-wa .wa-img-sm { width: 16px; height: 16px; vertical-align: middle; margin-right: 2px; } @media (max-width: 680px) { .form-confirm-title { font-size: 22px; } .form-confirm-icon { width: 48px; height: 48px; } .form-confirm-icon svg { width: 24px; height: 24px; } } /* ════════════════════════════════════════════════════════════════ Footer credit — Designed & developed by Bragyst Subtle signature in the footer bottom row. ════════════════════════════════════════════════════════════════ */ .footer-credit { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.4); text-decoration: none; transition: color 200ms ease; border-bottom: none; } .footer-credit:hover { color: var(--gold); } .footer-credit-label { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; letter-spacing: 0.05em; line-height: 1; } .footer-credit-logo { height: 18px; width: auto; display: block; filter: invert(1) brightness(1.6); opacity: 0.55; transition: opacity 200ms ease, filter 200ms ease; } .footer-credit:hover .footer-credit-logo { opacity: 1; filter: invert(1) brightness(1.6); } /* The .legal cell already overrides anchor colors; make sure the credit keeps its own color even though it lives inside .legal. */ .foot-bot .legal .footer-credit { color: rgba(255, 255, 255, 0.4); } .foot-bot .legal .footer-credit:hover { color: var(--gold); } @media (max-width: 720px) { /* On narrow screens the foot-bot stacks vertically; let the legal cell wrap so Privacy and the credit don't overflow the row. */ .foot-bot .legal { flex-wrap: wrap; gap: 12px 18px; } } /* ════════════════════════════════════════════════════════════════ Mobile: hide third-party plugin floating buttons (FABs) The theme provides its own .sticky-cta rail at the bottom on mobile. The Cost Calculator and Smart Schedule plugins ALSO inject their own floating buttons (.qcc-floating, .bgss-fab-mount) which overlap and bury the theme's CTA rail. We hide the plugin FABs on mobile so only the theme's rail shows. In-page trigger elements (e.g. the hero's .bgss-trigger schedule card) are unaffected — those don't use position: fixed. Specificity note: the Cost Calculator plugin injects its own `.qcc-floating { display: inline-flex !important }` via a