/* Made in China Easy — red, navy & gold theme (loaded after site.css on public pages).
   Motion is decorative only and switches off with prefers-reduced-motion. */
:root {
  --navy: #0B1F3A; --navy-2: #12305C; --navy-3: #1C4380;
  --red: #C8102E; --red-2: #A50D26;
  --gold: #D4A72C; --gold-2: #F2D27A; --gold-ink: #7A5A00;
  --ink: var(--navy); --ink-2: #1E3557;
  --harbor: var(--navy-2); --harbor-2: var(--navy);
  --seal: var(--red); --seal-2: var(--red-2);
  --paper: #FAF8F3; --tint: #F1EEE6; --mist: #E3DED2;
  --r-lg: 18px; --r-md: 12px;
}
body { background: var(--paper); }
a { color: var(--navy-3); }

/* ---- Header: navy with a gold rule ---- */
.site-header { background: var(--navy); border-bottom: 0; box-shadow: 0 2px 0 var(--gold); }
.brand, .brand:hover { color: #fff; }
.brand-text small { color: var(--gold-2); }
.brand-mark { background: linear-gradient(135deg, var(--red), var(--red-2)); box-shadow: 0 0 0 2px var(--gold); }
.site-nav a { color: #fff; }
.site-nav ul a:hover { background: rgba(255,255,255,.08); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold); }
.menu-toggle { color: #fff; }
.menu-toggle:hover { background: rgba(255,255,255,.1); }
.site-nav .submenu { background: #fff; }
.site-nav .submenu a { color: var(--navy) !important; }
.nav-account { color: var(--gold-2) !important; }
.bars, .bars::before, .bars::after { background: #fff; }
.lang-switch { position: relative; }
.lang-switch select { min-height: 38px; width: auto; padding: 6px 30px 6px 10px; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); border-radius: 999px; font-weight: 600; font-size: .9rem; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.lang-switch select option { color: var(--navy); }
@media (max-width: 1240px) {
  .site-nav { background: var(--navy); border-bottom: 3px solid var(--gold); max-height: calc(100vh - 68px); overflow-y: auto; }
  .site-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--gold); }
  .site-nav .submenu { background: transparent; border-left-color: rgba(212,167,44,.5); }
  .site-nav .submenu a { color: #fff !important; font-size: 1rem !important; }
  .lang-switch select { width: 100%; min-height: 46px; }
}

/* ---- Buttons: red CTA with a moving gold shine ---- */
.btn { border-radius: 999px; }
.btn-seal { background: linear-gradient(135deg, var(--red), var(--red-2)); position: relative; overflow: hidden; box-shadow: 0 8px 22px -12px rgba(200,16,46,.8); isolation: isolate; }
.btn-seal::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,236,170,.55), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; z-index: -1; pointer-events: none; }
.btn-seal:hover { background: linear-gradient(135deg, var(--red-2), #7E0A1D); }
.btn-primary { background: var(--navy-2); }
.btn-primary:hover { background: var(--navy); }
.btn-outline { border-color: var(--navy-2); color: var(--navy-2); }
.btn-outline:hover { background: var(--navy-2); color: #fff; }
.btn-gold { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--navy); }
@keyframes shine { 0% { left: -75%; } 55%, 100% { left: 130%; } }

/* ---- Dark animated heroes ---- */
.hero, .page-hero, .svc-hero {
  background: radial-gradient(1200px 500px at 85% -10%, rgba(212,167,44,.22), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(200,16,46,.28), transparent 60%),
              linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, #0E2748 100%);
  background-size: 140% 140%, 140% 140%, 200% 200%;
  animation: heroDrift 18s ease-in-out infinite alternate;
  color: #DCE5F2; border-bottom: 0; position: relative; overflow: hidden;
}
.hero::before, .page-hero::before, .svc-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle, rgba(242,210,122,.9) 0 1.2px, transparent 1.6px), radial-gradient(circle, rgba(255,255,255,.6) 0 1px, transparent 1.4px);
  background-size: 140px 140px, 90px 90px; background-position: 0 0, 40px 60px;
  animation: sparkle 30s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.hero > .container, .page-hero > .container, .svc-hero > .container { position: relative; z-index: 1; }
@keyframes heroDrift { 0% { background-position: 0% 0%, 100% 100%, 0% 50%; } 100% { background-position: 100% 30%, 0% 70%, 100% 50%; } }
@keyframes sparkle { from { background-position: 0 0, 40px 60px; } to { background-position: 140px 280px, 130px 240px; } }
.hero h1, .page-hero h1, .svc-hero h1 { color: #fff; }
.hero h1 { background: linear-gradient(100deg, #fff 0%, #fff 40%, var(--gold-2) 50%, #fff 60%, #fff 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: textShine 6s ease-in-out infinite; }
@keyframes textShine { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }
.hero-sub, .hero .hero-sub, .svc-hero .hero-sub, .page-hero .hero-sub { color: #fff; }
.hero p, .page-hero p, .svc-hero p { color: #D3DDEB; }
.svc-line, .hero .svc-line { color: var(--gold-2); letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.svc-line a { color: var(--gold-2); }
.hero .btn-outline, .page-hero .btn-outline, .svc-hero .btn-outline { border-color: rgba(255,255,255,.7); color: #fff; }
.hero .btn-outline:hover, .page-hero .btn-outline:hover, .svc-hero .btn-outline:hover { background: #fff; color: var(--navy); }
.svc-hero-media img { box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(242,210,122,.35); }
.page-hero .hub-banner img { border-radius: var(--r-lg); }
.page-hero a:not(.btn) { color: var(--gold-2); }

/* ---- Section headings: a short gold rule ---- */
.section-head h2::after, .est-card h3::after { content: ''; display: block; width: 56px; height: 3px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.section-tint { background: var(--tint); }
.closing { background: linear-gradient(135deg, var(--navy), var(--navy-2)); border-top: 3px solid var(--gold); }
.site-footer { background: var(--navy); border-top: 3px solid var(--gold); }
.footer-h { color: var(--gold-2) !important; }

/* ---- Cards ---- */
.svc-card, .pkg, .cat, .group, .profile, .five-steps li { transition: transform .2s ease, box-shadow .2s ease; }
.svc-card:hover, .pkg:hover, .cat:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(11,31,58,.45); }
.pkg.is-popular { border: 2px solid var(--gold); box-shadow: 0 20px 44px -26px rgba(212,167,44,.8); }
.pkg-flag { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--navy); }
.pkg-level, .est-up-k { color: var(--red); }
.pkg-price { color: var(--navy); }
.est-card { border-color: var(--navy-2); }
.est-total td, .est-opt-total strong { color: var(--red); }
.ticks .tick, .pkg-list .tick, .tick { color: var(--gold); }
.chip-nav { background: #fff; }
.chip-nav a:hover, .chip-nav a:focus-visible { border-color: var(--gold); color: var(--navy); background: #FFF8E3; }
.compare thead th { background: var(--navy); }
.price-table thead th { background: #F6EFD9; color: var(--gold-ink); }

/* ---- Forms: bigger, friendlier, easy to read ---- */
.cg-form, .est-form { background: #fff; border: 0; border-radius: var(--r-lg); padding: 30px; box-shadow: 0 2px 0 var(--gold), 0 24px 50px -30px rgba(11,31,58,.45); }
@media (max-width: 640px) { .cg-form, .est-form { padding: 22px 16px; border-radius: var(--r-md); } }
.field label, .field legend { font-size: 1rem; color: var(--navy); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=date], input[type=url], select, textarea {
  min-height: 52px; padding: 12px 14px; font-size: 1.02rem; border: 1.5px solid #CFC8B8; border-radius: 12px; background: #FFFDF8; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: 4px solid rgba(212,167,44,.25); background: #fff; }
.check { padding: 10px 12px; border: 1.5px solid var(--mist); border-radius: 12px; background: #FFFDF8; transition: border-color .15s, background .15s; }
.check:hover { border-color: var(--gold); }
.check:has(input:checked) { border-color: var(--navy-2); background: #EEF2FA; }
.check input { accent-color: var(--red); }
.btn-submit { width: 100%; min-height: 56px; font-size: 1.08rem; border-radius: 999px; background: linear-gradient(135deg, var(--red), var(--red-2)); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.btn-submit::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,236,170,.5), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; z-index: -1; }
.form-success { border-radius: 12px; border-left: 5px solid #2E7D5B; }

/* ---- Phones: bigger tap targets, simpler spacing ---- */
@media (max-width: 640px) {
  .btn { min-height: 52px; }
  .cta-row .btn { width: 100%; }
  .section { padding: 44px 0; }
  .hero h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
}

/* ---- Right-to-left (Arabic) ---- */
[dir="rtl"] body { font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; letter-spacing: 0; font-stretch: 100%; }
[dir="rtl"] .ticks li, [dir="rtl"] .pkg-list li { text-align: right; }
[dir="rtl"] .price-table th, [dir="rtl"] .price-table td, [dir="rtl"] .compare th, [dir="rtl"] .compare td, [dir="rtl"] .est-table th { text-align: right; }
[dir="rtl"] .est-table td { text-align: left; }
[dir="rtl"] .section-head h2::after { margin-left: auto; margin-right: 0; }
[dir="rtl"] .site-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold); }
@media (max-width: 1240px) { [dir="rtl"] .site-nav a[aria-current="page"] { box-shadow: inset -4px 0 0 var(--gold); } }
[dir="rtl"] .svc-link::after, [dir="rtl"] .eco-arrow { transform: scaleX(-1); }
[lang="zh-Hans"] body, [lang="zh-Hans"] h1, [lang="zh-Hans"] h2, [lang="zh-Hans"] h3 { font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', var(--body); letter-spacing: 0; font-stretch: 100%; }

@media (prefers-reduced-motion: reduce) {
  .hero, .page-hero, .svc-hero, .hero::before, .page-hero::before, .svc-hero::before, .hero h1, .btn-seal::after, .btn-submit::after { animation: none !important; }
  .hero h1 { color: #fff; background: none; }
}

/* ---- News page ---- */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 20px 0; }
.news-grid .news-card { background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 12px 30px -22px rgba(11,31,58,.5); }
.news-grid .news-card h3 { font-size: 1.05rem; } .news-grid .news-card h3 a { color: var(--navy); text-decoration: none; } .news-grid .news-card h3 a:hover { text-decoration: underline; }
.news-topic { display: inline-block; background: #FFF3D1; color: var(--gold-ink); font-weight: 700; font-size: .75rem; padding: 2px 8px; border-radius: 999px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chip-row a { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--mist); text-decoration: none; color: var(--navy); font-weight: 600; background: #fff; }
.chip-row a[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff !important; font-weight: 600; font-size: .9rem; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #3FD07F; box-shadow: 0 0 0 0 rgba(63,208,127,.7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(63,208,127,0); } 100% { box-shadow: 0 0 0 0 rgba(63,208,127,0); } }
.news-all { font-weight: 700; color: var(--red); }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; } }

/* ---- About: people and places ---- */
.people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.places-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.person, .place { margin: 0; background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 12px 30px -22px rgba(11,31,58,.5); }
.person img, .soon-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.place img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.person figcaption, .place figcaption { padding: 12px 14px; display: grid; gap: 2px; }
.person strong { color: var(--navy); }
.soon-img { background: radial-gradient(circle at 50% 38%, #E9E2CF 0 18%, transparent 19%), radial-gradient(ellipse at 50% 92%, #E9E2CF 0 34%, transparent 35%), linear-gradient(160deg, #F7F1E1, #EFE6CC); }
.places-grid .soon .soon-img { aspect-ratio: 16 / 10; }
@media (max-width: 900px) { .people-grid { grid-template-columns: 1fr 1fr; } .places-grid { grid-template-columns: 1fr; } }
.site-nav .btn, .nav-actions .btn { border-radius: 999px !important; }

/* RTL: keep Latin brand headings (e.g. "Made in China Easy.") in their own reading order */
[dir="rtl"] .hero h1, [dir="rtl"] .footer-brand, [dir="rtl"] .brand-name { unicode-bidi: plaintext; text-align: right; }
[dir="rtl"] a[href^="mailto:"], [dir="rtl"] .b-dates, [dir="rtl"] .pc-dates, [dir="rtl"] time { unicode-bidi: isolate; direction: ltr; display: inline-block; }
[dir="rtl"] .site-footer li { unicode-bidi: plaintext; text-align: right; }
.addr { display: inline-block; text-align: start; }

/* ---- Language globe: always visible, phone and laptop ---- */
.header-row .brand { margin-inline-end: auto; }
.header-row .site-nav { order: 2; }
.lang-globe { order: 3; position: relative; flex: none; }
.lang-globe summary { white-space: nowrap; }
.nav-toggle { order: 4; }
.lang-globe summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 6px 14px 6px 11px; border-radius: 999px; cursor: pointer;
  color: #fff; font-weight: 700; font-size: .95rem; border: 1.5px solid var(--gold); background: rgba(212,167,44,.12); box-shadow: 0 0 0 0 rgba(212,167,44,.5); animation: globePulse 3.2s ease-out 1.2s 2; }
.lang-globe summary::-webkit-details-marker { display: none; }
.lang-globe summary:hover, .lang-globe[open] summary { background: rgba(212,167,44,.25); }
.lang-globe .globe-ico { color: var(--gold-2); flex: none; }
.lang-globe .lang-cur { display: none; }
.lang-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 190px; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 14px; border-top: 3px solid var(--gold);
  box-shadow: 0 18px 40px -12px rgba(11,31,58,.45); z-index: 60; }
.lang-menu a { display: block; padding: 12px 14px; border-radius: 10px; color: var(--navy) !important; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.lang-menu a:hover { background: #F4EFE2; }
.lang-menu a[aria-current="true"] { background: var(--navy); color: #fff !important; }
.lang-menu a[aria-current="true"]::after { content: ' ✓'; color: var(--gold-2); }
@keyframes globePulse { 0% { box-shadow: 0 0 0 0 rgba(212,167,44,.55); } 70% { box-shadow: 0 0 0 12px rgba(212,167,44,0); } 100% { box-shadow: 0 0 0 0 rgba(212,167,44,0); } }
@media (max-width: 1240px) {
  .lang-globe summary { padding: 6px 12px 6px 9px; min-height: 40px; }
  .lang-globe .lang-full { display: none; }
  .lang-globe .lang-cur { display: inline; }
}
@media (max-width: 380px) { .brand-text { font-size: .95rem; } }

/* ---- "View in your language?" suggestion bar ---- */
.lang-suggest { background: linear-gradient(90deg, var(--gold), var(--gold-2)); color: var(--navy); font-weight: 700; }
.lang-suggest .container { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 10px; padding-bottom: 10px; }
.lang-suggest .container > span { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: auto; }
.lang-suggest .lang-suggest-no { color: var(--navy); font-weight: 600; }

/* ---- Contact buttons (email form + WhatsApp) ---- */
.contact-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.btn svg { vertical-align: -3px; margin-inline-end: 6px; }
.btn-wa { background: #1FA855; color: #fff !important; border-color: #1FA855; }
.btn-wa:hover { background: #178A45; border-color: #178A45; }
.footer-contact { display: inline-flex; align-items: center; gap: 8px; }
.form-title { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.form-title svg { color: var(--red); width: 26px; height: 26px; }

/* ---- Customer request page ---- */
.req-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .req-grid { grid-template-columns: 1fr; } }
.req-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; counter-reset: s; }
.req-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: .85rem; font-weight: 600; color: #6B7785; position: relative; }
.req-steps li::before { content: ''; position: absolute; top: 15px; inset-inline-start: -50%; width: 100%; height: 3px; background: #E2DDCF; z-index: 0; }
.req-steps li:first-child::before { display: none; }
.req-steps li.done::before, .req-steps li.now::before { background: var(--gold); }
.req-steps .dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #D5CFBF; font-weight: 800; position: relative; z-index: 1; }
.req-steps li.done .dot { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.req-steps li.now { color: var(--navy); }
.req-steps li.now .dot { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 5px rgba(200,16,46,.15); }
.thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.msg { max-width: 88%; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid #E6E1D3; }
.msg-in { align-self: flex-end; background: #F6F3EA; border-end-end-radius: 4px; }
.msg-out { align-self: flex-start; background: #fff; border-inline-start: 4px solid var(--gold); border-end-start-radius: 4px; }
.msg-meta { margin: 0 0 6px; font-size: .82rem; color: #6B7785; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.req-side .card { margin-bottom: 16px; }
.btn-block { display: block; width: 100%; text-align: center; }

/* ---- Remembered details + address block ---- */
.prefill-note { font-size: .9rem; background: #F4EFE2; border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; }
.linklike { background: none; border: 0; padding: 0; color: var(--red); font-weight: 700; text-decoration: underline; cursor: pointer; font: inherit; }
.addr-block { margin: 6px 0 16px; border: 1.5px dashed #D5CFBF; border-radius: 12px; padding: 10px 14px; }
.addr-block summary { cursor: pointer; font-weight: 700; color: var(--navy); }
.addr-block[open] summary { margin-bottom: 10px; }

/* =================== Business Insights =================== */
.ins-hero-main h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
.ins-bar { position: sticky; top: 68px; z-index: 30; background: #fff; border-bottom: 1px solid #E6E1D3; box-shadow: 0 6px 18px -14px rgba(11,31,58,.5); }
.ins-bar .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 8px; padding-bottom: 8px; }
.ins-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.ins-nav::-webkit-scrollbar { display: none; }
.ins-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; white-space: nowrap; text-decoration: none; color: var(--navy); font-weight: 700; font-size: .95rem; }
.ins-nav a .ico { width: 18px; height: 18px; color: var(--red); }
.ins-nav a:hover { background: #F4EFE2; }
.ins-nav a[aria-current="page"] { background: var(--navy); color: #fff; }
.ins-nav a[aria-current="page"] .ico { color: var(--gold-2); }
.ins-search { display: flex; gap: 6px; flex: 1 1 260px; max-width: 380px; }
.ins-search input { flex: 1; min-height: 42px; border-radius: 999px; padding: 8px 16px; }
.ins-search .btn { padding: 8px 14px; }
.ins-search .ico { width: 18px; height: 18px; margin: 0; }
@media (max-width: 700px) { .ins-bar { top: 60px; } .ins-search { max-width: none; } }
.inline-search { display: flex; gap: 8px; max-width: 520px; margin: 0 0 14px; }
.inline-search input { flex: 1; min-height: 44px; border-radius: 999px; padding: 8px 16px; }
.chip-row + .chip-row { margin-top: -6px; }

.ins-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ins-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid #E6E1D3; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.ins-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(11,31,58,.45); }
.ins-tile .ico { width: 30px; height: 30px; color: var(--red); }
.ins-tile strong { font-size: 1.15rem; color: var(--navy); }
.ins-tile span { font-size: .93rem; color: #5C6B7A; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.row-head h2 { display: flex; align-items: center; gap: 8px; }
.row-head h2 .ico, .section-head h2 .ico { width: 26px; height: 26px; color: var(--red); vertical-align: -4px; }
.row-head a { font-weight: 700; }

.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.ins-card { background: #fff; border: 1px solid #E6E1D3; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.ins-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(11,31,58,.5); }
.ins-card-img img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.ins-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ins-card h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; }
.ins-card h3 a { color: var(--navy); text-decoration: none; }
.ins-card h3 a:hover { text-decoration: underline; }
.ins-card p { margin: 0; color: #4A5868; font-size: .95rem; }
.ins-meta { font-size: .85rem; color: #6B7785; }
.ins-type { display: inline-block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 999px; background: #F4EFE2; color: var(--gold-ink); text-decoration: none; }
.t-checklist, .t-suppliers { background: #E8F3EC; color: #1E6B3C; }
.t-story, .t-canton-fair { background: #FDE8EB; color: #9A0D24; }
.t-tips { background: #EAF0F8; color: #1F3F6B; }
.ins-dl { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .9rem; color: var(--red); text-decoration: none; }
.ins-dl .ico { width: 16px; height: 16px; }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.media-card { margin: 0; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #E6E1D3; display: flex; flex-direction: column; }
.media-card img, .media-card video { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #0B1F3A; }
.media-card figcaption { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.media-card figcaption strong { color: var(--navy); font-size: 1.05rem; }
.media-card figcaption > span:not(.ins-type) { color: #4A5868; font-size: .93rem; }
.ins-more { font-weight: 700; font-size: .92rem; color: var(--red); text-decoration: none; margin-top: auto; }
.media-play { position: relative; display: block; }
.media-play .play-ico { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; color: #fff; filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.media-tip { padding: 18px; gap: 8px; background: linear-gradient(160deg, var(--navy), #13325C); color: #fff; border: 0; }
.media-tip h3 { margin: 0; color: #fff; font-size: 1.12rem; }
.media-tip p { margin: 0; color: #D6DEE8; }
.media-tip .ins-more { color: var(--gold-2); }
.media-tip .ins-type { align-self: flex-start; }

.wp-band { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: center; padding: 26px; border-radius: 20px; background: linear-gradient(120deg, var(--navy), #163866); color: #fff; border-bottom: 4px solid var(--gold); }
.wp-band h2 { color: #fff; margin: 4px 0 8px; } .wp-band p { color: #D6DEE8; margin: 0; }
.wp-band .svc-line { color: var(--gold-2); }
@media (max-width: 760px) { .wp-band { grid-template-columns: 1fr; } }

.calc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.calc-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #E6E1D3; border-top: 4px solid var(--red); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.calc-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(11,31,58,.5); }
.calc-card strong { font-size: 1.2rem; color: var(--navy); } .calc-card span { color: #4A5868; } .calc-card em { font-style: normal; font-weight: 800; color: var(--red); margin-top: auto; }
.calc-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 900px) { .calc-split { grid-template-columns: 1fr; } }
.ic-result { position: sticky; top: 140px; }
@media (max-width: 900px) { .ic-result { position: static; } }
.ic-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.ic-big div { background: #F4EFE2; border-radius: 12px; padding: 10px; text-align: center; }
.ic-big span { display: block; font-size: .8rem; color: #5C6B7A; } .ic-big strong { font-size: 1.1rem; color: var(--navy); }
@media (max-width: 480px) { .ic-big { grid-template-columns: 1fr; } }
.rd-q legend { font-weight: 700; color: var(--navy); margin-bottom: 6px; display: flex; gap: 8px; align-items: baseline; }
.rd-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .85rem; flex: none; }
.rd-opt { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1.5px solid #E2DDCF; border-radius: 12px; margin-bottom: 6px; cursor: pointer; background: #fff; }
.rd-opt:has(input:checked) { border-color: var(--red); background: #FFF6F7; }
.rd-score { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; margin: 6px 0 10px; background: conic-gradient(var(--red) calc(var(--pp, 0) * 1%), #EDE7D8 0); }
.rd-score strong { width: 100px; height: 100px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.7rem; color: var(--navy); }
.rd-score.p-0 { --pp: 0 } .rd-score.p-10 { --pp: 10 } .rd-score.p-20 { --pp: 20 } .rd-score.p-30 { --pp: 30 } .rd-score.p-40 { --pp: 40 } .rd-score.p-50 { --pp: 50 }
.rd-score.p-60 { --pp: 60 } .rd-score.p-70 { --pp: 70 } .rd-score.p-80 { --pp: 80 } .rd-score.p-90 { --pp: 90 } .rd-score.p-100 { --pp: 100 }
.rd-next li { margin-bottom: 6px; } .rd-next a { font-weight: 700; }

.connect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.connect-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid #E6E1D3; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.connect-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(11,31,58,.5); border-color: var(--gold); }
.connect-card .ico { width: 30px; height: 30px; color: var(--red); }
.connect-card strong { font-size: 1.12rem; color: var(--navy); } .connect-card span { color: #4A5868; font-size: .95rem; }

.art-hero { position: relative; background: var(--navy); color: #fff; padding-bottom: 28px; }
.art-hero > img { display: block; width: 100%; max-height: 380px; object-fit: cover; opacity: .55; }
.art-hero .container { margin-top: -120px; position: relative; }
.art-hero h1 { color: #fff; font-size: clamp(1.8rem, 5vw, 2.7rem); margin: 8px 0; }
.art-hero .hero-sub { color: #E1E7EF; }
.art-hero .ins-meta, .art-hero .ins-meta a { color: #D6DEE8; }
.art-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.art-hero .btn-outline { border-color: #fff; color: #fff; }
.art-body { padding-top: 28px; padding-bottom: 40px; font-size: 1.08rem; }
.art-body h2 { margin-top: 1.6em; }
.art-note { background: #FFF3D6; border-radius: 10px; padding: 10px 14px; font-size: .95rem; }
.checklist { list-style: none; padding: 0; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed #E2DDCF; }
.checklist .box { flex: none; width: 22px; height: 22px; border: 2px solid var(--navy); border-radius: 5px; margin-top: 2px; display: grid; place-items: center; color: var(--red); font-weight: 800; }
@media print { .site-header, .site-footer, .ins-bar, .lang-suggest, .connect-grid, .art-actions { display: none !important; } .art-hero { background: #fff; color: #000; } .art-hero > img { display: none; } .art-hero .container { margin-top: 0; } .art-hero h1, .art-hero .hero-sub { color: #000; } }
.art-hero a.ins-type { color: var(--gold-ink); }
@media (max-width: 900px) { .calc-split.has-result > .est-card { order: -1; } }

/* ---- Company logo (logo 3) ---- */
.brand-logo { height: 40px; width: auto; flex: none; display: block; }
.a-side .brand-logo { height: 32px; }
.footer-brand img { width: 240px; max-width: 100%; height: auto; display: block; }
@media (max-width: 420px) { .brand-logo { height: 32px; } .brand-text { font-size: 1rem; } .brand-text small { font-size: .62rem; } }
@media (max-width: 360px) { .brand-text small { display: none; } }

/* ---- Client request page: projects ---- */
.case-card { background: #fff; border: 1px solid #E6E1D3; border-radius: 16px; padding: 18px; margin: 0 0 18px; border-top: 4px solid var(--red); }
.case-card h3 { margin: 2px 0 12px; color: var(--navy); }
.case-card h4 { margin: 16px 0 6px; font-size: 1rem; color: var(--navy); }
.case-card .stage-bar { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 8px; }
.case-card .stage-bar li { flex: 1 1 100px; padding: 7px 9px; border-radius: 8px; background: #F1EEE6; color: #6B7785; font-size: .8rem; font-weight: 700; }
.case-card .stage-bar li.done { background: #E9DDB8; color: #5A4300; }
.case-card .stage-bar li.now { background: var(--navy); color: #fff; }
.case-now { margin: 0 0 6px; }
.case-card .doc-list { list-style: none; padding: 0; margin: 0 0 10px; } .case-card .doc-list li { padding: 6px 0; border-bottom: 1px solid #EEE9DC; }
.upload-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; background: #F7F4EC; border-radius: 12px; padding: 10px 12px; }
.upload-row label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .9rem; }
.upload-row .hint { flex-basis: 100%; margin: 0; }
.inv-paid { background: #E8F3EC; color: #1E6B3C; } .inv-unpaid { background: #FDE8EB; color: #9A0D24; } .inv-partly_paid { background: #FFF3D6; color: #7A4E00; }
.vid-list { display: grid; gap: 10px; margin-top: 8px; }
.vid-list video { width: 100%; border-radius: 12px; background: #000; }
.vid-link { display: block; position: relative; border-radius: 12px; overflow: hidden; background: var(--navy); color: #fff; text-decoration: none; font-weight: 700; }
.vid-link img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .8; }
.vid-link span { display: block; padding: 10px 12px; }
.h-vids { font-size: 1.15rem; margin: 18px 0 6px; }

/* Quotes on the client's request page */
.quote-list { display: grid; gap: 10px; margin: 8px 0 16px; }
.quote-card { border: 1px solid #dfe3ea; border-radius: 12px; padding: 12px 14px; background: #fff; }
.quote-card.q-sent { border-color: var(--gold); background: #fffaf0; }
.quote-card p { margin: 0 0 6px; }
.quote-card .quote-total { font-size: 1.4rem; font-weight: 800; color: var(--navy); }
.quote-card .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.quote-card form.inline { display: inline; }
.badge.q-sent { background: #fff3cd; color: #7a5b00; } .badge.q-accepted { background: #dff3e4; color: #1d6b35; } .badge.q-declined { background: #f1f1f1; color: #555; }

/* Floating WhatsApp chat (gold, opens only when tapped) */
.wa-chat { position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wa-fab { display: inline-flex; align-items: center; gap: 8px; min-height: 58px; padding: 0 20px 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--navy); font-weight: 800; font-size: 1rem; background: linear-gradient(135deg, #f6dc8b 0%, #d4a72c 55%, #b8891b 100%);
  box-shadow: 0 10px 26px -8px rgba(11,31,58,.55), 0 0 0 0 rgba(212,167,44,.55); animation: waGlow 2.8s ease-out infinite; }
.wa-fab:hover, .wa-fab:focus-visible { filter: brightness(1.06); }
.wa-chat.open .wa-fab { animation: none; }
@keyframes waGlow { 0% { box-shadow: 0 10px 26px -8px rgba(11,31,58,.55), 0 0 0 0 rgba(212,167,44,.6); } 70% { box-shadow: 0 10px 26px -8px rgba(11,31,58,.55), 0 0 0 16px rgba(212,167,44,0); } 100% { box-shadow: 0 10px 26px -8px rgba(11,31,58,.55), 0 0 0 0 rgba(212,167,44,0); } }
@media (prefers-reduced-motion: reduce) { .wa-fab { animation: none; } }
.wa-panel { width: min(340px, calc(100vw - 32px)); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 24px 50px -16px rgba(11,31,58,.55); border: 1px solid rgba(212,167,44,.5); animation: waIn .18s ease-out; }
.wa-panel[hidden] { display: none; }
@keyframes waIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wa-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 16px; color: #fff; background: linear-gradient(135deg, var(--navy) 0%, #183a66 70%, #8a6d16 140%); }
.wa-head div { flex: 1; display: grid; } .wa-head span { font-size: .78rem; color: #f2dc9a; }
.wa-close { border: 0; background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.wa-body { padding: 14px; background: linear-gradient(180deg, #fffaf0 0%, #fff 60%); max-height: 60vh; overflow: auto; }
.wa-bubble { background: #fff; border: 1px solid #efe3bd; border-radius: 4px 14px 14px 14px; padding: 9px 12px; margin: 0 0 8px; max-width: 92%; color: var(--navy); }
.wa-bubble.wa-small { font-size: .9rem; }
.wa-topics { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.wa-topics a { display: block; padding: 10px 12px; border-radius: 12px; border: 1px solid #e9d9a6; background: #fff; color: var(--navy) !important; text-decoration: none; font-weight: 700; }
.wa-topics a:hover, .wa-topics a:focus-visible { background: linear-gradient(90deg, #fbeec4, #fff); border-color: var(--gold); }
.wa-foot { display: block; padding: 10px 14px; text-align: center; font-size: .9rem; border-top: 1px solid #eee; color: var(--navy) !important; }
@media (max-width: 480px) { .wa-fab-label { display: none; } .wa-fab { padding: 0; width: 58px; justify-content: center; } }
@media print { .wa-chat { display: none; } }
.wa-face { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; background: #fff; display: grid; place-items: center; }
.wa-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.wa-face.wa-noface { background: #25d366; color: #fff; }
.wa-online { position: absolute; inset-inline-end: -1px; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #25d366; border: 2px solid #fff; }
.wa-fab { padding-inline-start: 6px; }
.wa-head .wa-face { width: 42px; height: 42px; border-color: #d4a72c; }
@media (max-width: 480px) { .wa-fab { width: 62px; min-height: 62px; padding: 0; } .wa-fab .wa-face { width: 52px; height: 52px; } }
/* Regional pages */
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 24px; }
.chip-list li { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--mist); font-weight: 600; color: var(--navy); }
.market-grid { margin-top: 8px; } .link-card { text-decoration: none; color: inherit; } .link-card:hover h3, .link-card:focus-visible h3 { color: var(--gold-2, #b98a14); }
.link-card .card-img { width: 100%; height: auto; border-radius: 10px; margin-bottom: 10px; aspect-ratio: 16 / 10; object-fit: cover; }
.note-line { background: #fffaf0; border-inline-start: 4px solid var(--gold); padding: 10px 14px; border-radius: 8px; margin-top: 20px; }
@media (min-width: 861px) { .footer-grid { grid-template-columns: 1.3fr 1fr 0.9fr 1.2fr 1fr; } }
/* Media articles: byline, photos inside articles, brand footer */
.art-byline { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 6px 0 12px; }
.art-byline img { background: var(--navy); border-radius: 6px; padding: 4px 6px; width: 52px; height: auto; }
.art-fig { margin: 18px 0 22px; } .art-fig img { width: 100%; height: auto; border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; }
.art-brand { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; margin: 36px 0 8px; padding: 22px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, #183a66 70%, #8a6d16 150%); border-top: 4px solid var(--gold); }
.art-brand img { width: 100%; height: auto; } .art-brand p { margin: 0 0 8px; color: #e9edf4; } .art-brand .art-brand-h { color: #f2dc9a; font-weight: 800; }
.art-brand .art-brand-offices { font-size: .9rem; letter-spacing: .02em; color: #c9d3e3; }
.btn-outline-light { border: 1.5px solid #f2dc9a; color: #fff !important; background: transparent; }
@media (max-width: 640px) { .art-brand { grid-template-columns: 1fr; } .art-brand img { max-width: 200px; } }
.lead-line { font-size: 1.12rem; max-width: 70ch; margin: 0 0 22px; }

/* ---------- Home: "Where are you starting from?" postcards ---------- */
.postcards { display: grid; gap: 22px; }
.postcard { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; border-radius: 22px; color: #fff;
  background: radial-gradient(700px 300px at 0% 0%, rgba(212,167,44,.18), transparent 60%), linear-gradient(135deg, #0B1F3A 0%, #12335F 55%, #1B4683 100%);
  border: 3px solid var(--gold); box-shadow: 0 0 0 6px rgba(212,167,44,.12), 0 24px 50px -24px rgba(11,31,58,.65); position: relative; }
.postcard::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(242,210,122,.45); border-radius: 15px; pointer-events: none; }
.pc-body { padding: 30px 32px; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.pc-who { display: inline-block; align-self: flex-start; margin: 0 0 4px; padding: 5px 14px; border-radius: 999px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem;
  color: #0B1F3A; background: linear-gradient(100deg, #f6dc8b, #d4a72c 60%, #f2d27a); }
.postcard h3 { color: #fff; font-size: 1.55rem; margin: 2px 0 4px; }
.postcard p { color: #E3EAF5; margin: 0 0 8px; }
.pc-ticks { list-style: none; padding: 0; margin: 4px 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.pc-ticks li { display: flex; gap: 8px; align-items: flex-start; color: #fff; font-weight: 600; }
.pc-ticks .tick { color: #F2D27A; flex: none; margin-top: 3px; }
.pc-media { position: relative; padding: 18px 18px 18px 0; }
.pc-media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; border-radius: 14px; border: 2px solid rgba(242,210,122,.6); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.btn-gold { align-self: flex-start; margin-top: auto; color: #0B1F3A !important; font-weight: 800; border: 0; background: linear-gradient(100deg, #f6dc8b, #d4a72c 55%, #f2d27a); box-shadow: 0 8px 20px -10px rgba(212,167,44,.8); }
.btn-gold:hover, .btn-gold:focus-visible { filter: brightness(1.07); }
[dir="rtl"] .pc-media { padding: 18px 0 18px 18px; }
@media (max-width: 820px) { .postcard { grid-template-columns: 1fr; } .pc-media { order: -1; padding: 14px 14px 0; } .pc-media img { min-height: 190px; } .pc-body { padding: 20px 22px 24px; } .pc-ticks { grid-template-columns: 1fr; } }

/* ---------- Home: Media strip drifting left to right ---------- */
.media-strip { padding-top: 40px; padding-bottom: 40px; overflow: hidden; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marqueeLR 70s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marqueeLR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mc-card { width: 240px; flex: none; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--navy); background: #fff; border: 1px solid var(--mist); border-radius: 14px; padding: 8px 8px 12px; box-shadow: 0 10px 24px -18px rgba(11,31,58,.5); }
.mc-card img { width: 100%; height: 136px; object-fit: cover; border-radius: 10px; }
.mc-card strong { font-size: .95rem; line-height: 1.3; padding: 0 4px; }
.mc-type { align-self: flex-start; margin: 0 4px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a6d16; }
.mc-card:hover, .mc-card:focus-visible { border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee-track { animation: none; } }

/* ---------- Home: How it works with photo circles and the bubble chart ---------- */
.jshow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px; align-items: center; }
.jshow-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: none; }
.jshow-steps li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; }
.jshow-steps li > span:last-child { display: grid; gap: 2px; } .jshow-steps strong { color: var(--navy); font-size: 1.05rem; } .jshow-steps li > span:last-child span { color: var(--ink-2); font-size: .93rem; }
.jshow-photo { position: relative; width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #f6dc8b, #d4a72c 50%, #9c7614); box-shadow: 0 8px 18px -10px rgba(11,31,58,.6); }
.jshow-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; display: block; }
.jshow-photo b { position: absolute; inset-inline-end: -4px; top: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #F2D27A; font: 800 .8rem/26px var(--body); text-align: center; border: 2px solid #fff; }
.bubble-chart { margin: 0; background: radial-gradient(420px 320px at 50% 40%, rgba(212,167,44,.10), transparent 70%), linear-gradient(160deg, #0B1F3A, #102a4f); border-radius: 26px; padding: 14px; border: 2px solid rgba(212,167,44,.55); box-shadow: 0 30px 60px -30px rgba(11,31,58,.7); }
.bubble-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.bb-track { fill: none; stroke: rgba(242,210,122,.25); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.bb-flow { fill: none; stroke: url(#bbGold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60 1400; animation: bbFlow 14s linear infinite; filter: drop-shadow(0 0 6px rgba(242,210,122,.9)); }
@keyframes bbFlow { from { stroke-dashoffset: 60; } to { stroke-dashoffset: -1400; } }
.bb-num { fill: #F2D27A; font: 800 22px/1 Archivo, Arial, sans-serif; }
.bb-label { fill: #E3EAF5; font: 700 13px/1 'Source Sans 3', Arial, sans-serif; letter-spacing: .02em; }
.bb-halo { fill: rgba(242,210,122,.0); stroke: none; transform-box: fill-box; transform-origin: center; }
.bb-step { animation: bbLight 14s ease-in-out infinite; }
.bb-step .bb-halo { animation: bbHalo 14s ease-in-out infinite; }
.bb-step:nth-of-type(1), .bb-step:nth-of-type(1) .bb-halo { animation-delay: 0s; }
.bb-step:nth-of-type(2), .bb-step:nth-of-type(2) .bb-halo { animation-delay: 2s; }
.bb-step:nth-of-type(3), .bb-step:nth-of-type(3) .bb-halo { animation-delay: 4s; }
.bb-step:nth-of-type(4), .bb-step:nth-of-type(4) .bb-halo { animation-delay: 6s; }
.bb-step:nth-of-type(5), .bb-step:nth-of-type(5) .bb-halo { animation-delay: 8s; }
.bb-step:nth-of-type(6), .bb-step:nth-of-type(6) .bb-halo { animation-delay: 10s; }
.bb-step:nth-of-type(7), .bb-step:nth-of-type(7) .bb-halo { animation-delay: 12s; }
@keyframes bbLight { 0%, 18%, 100% { filter: none; } 4%, 12% { filter: drop-shadow(0 0 14px rgba(242,210,122,.95)); } }
@keyframes bbHalo { 0%, 18%, 100% { fill: rgba(242,210,122,0); transform: scale(.9); } 6%, 12% { fill: rgba(242,210,122,.28); transform: scale(1.08); } }
.bb-glare { filter: drop-shadow(0 0 10px #F2D27A); }
@media (prefers-reduced-motion: reduce) { .bb-flow, .bb-step, .bb-step .bb-halo { animation: none; } .bb-glare { display: none; } }
@media (max-width: 900px) { .jshow { grid-template-columns: 1fr; } .bubble-chart { max-width: 520px; margin: 0 auto; } }

/* ---------- Header wordmark: gold, bold and shining like an enamel pin ---------- */
.brand-text { font-family: 'Montserrat', var(--display); font-weight: 800; font-stretch: 100%; letter-spacing: .005em;
  background: linear-gradient(100deg, #9C7614 0%, #D4A72C 18%, #F6DC8B 32%, #FFF6D6 40%, #E9C25A 50%, #B8891B 66%, #F2D27A 82%, #9C7614 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)) drop-shadow(0 0 6px rgba(212,167,44,.25)); animation: pinShine 6s ease-in-out infinite; }
.brand-text small { font-family: 'Montserrat', var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: .6rem;
  background: none; -webkit-text-fill-color: #DCE7FF; color: #DCE7FF; }
@keyframes pinShine { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .brand-text { animation: none; background-position: 40% 0; } }
.brand { flex: none; } .brand-text { font-size: 1.02rem; }
@media (min-width: 1241px) and (max-width: 1440px) { .site-nav a { padding: 10px 7px; font-size: .93rem; } .site-nav ul { gap: 0; } .header-row { gap: 12px; } }