/* =========================================================
   Bird Insurance — shared stylesheet
   ========================================================= */
:root {
  --navy: #1d3a8a;
  --blue: #3567c2;
  --acc: #2b8fe0;          /* bright accent used in duotone icons */
  --sky: #a8c3ea;
  --ice: #d9e6f7;
  --mist: #f2f6fc;
  --tint: #e4f2fb;         /* light blue section background (cards design) */
  --house: #d6ebf8;        /* house shape behind icons */
  --ink: #0d1b3e;
  --ink-2: #2a3b5c;
  --deep: #081330;
  --deep-2: #0f2257;
  --muted: #5a6785;
  --line: #e1e8f3;
  --ok: #1f9d6b;
  --err: #d64545;
  --radius: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: 1240px;
  --topbar: 40px;
  --nav: 80px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 150px; }
body { font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.6; }
body.loading, body.lock { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
svg { flex: none; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 700; transition: top .3s; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.eyebrow::before { content: ""; width: 24px; height: 1.5px; background: currentColor; }
.title { font-size: clamp(30px, 4vw, 50px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.title .serif { color: var(--blue); font-size: 1.08em; }
.lead { color: var(--muted); font-size: 17px; }
.section { padding: 110px 0; position: relative; }
.section.tight { padding: 80px 0; }
.bg-tint { background: var(--tint); }
.bg-mist { background: var(--mist); }
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; margin-bottom: 52px; }
.head > div { max-width: 660px; }
.head .eyebrow { margin-bottom: 14px; }
.head .lead { max-width: 46ch; }
.center { text-align: center; }
.head.center { flex-direction: column; align-items: center; }
.head.center .lead { margin: 14px auto 0; }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 15px; line-height: 1.2; overflow: hidden; isolation: isolate; white-space: nowrap; transition: color .35s var(--ease), border-color .35s var(--ease), opacity .3s; }
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover svg.go { transform: translateX(4px); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn-primary { background: var(--navy); color: #fff; } .btn-primary::before { background: var(--blue); }
.btn-outline { border: 1.5px solid var(--line); color: var(--navy); background: #fff; } .btn-outline::before { background: var(--mist); }
.btn-light { background: #fff; color: var(--navy); } .btn-light::before { background: var(--ice); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.35); color: #fff; } .btn-ghost::before { background: rgba(255,255,255,.12); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--blue); }
.link svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.link:hover svg { transform: translateX(5px); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes float { 50% { transform: translateY(-10px); } }

/* ---------- Loader (logo animation) ---------- */
.loader { position: fixed; inset: 0; z-index: 150; background: var(--deep); display: grid; place-items: center; clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease) .1s, visibility 0s linear 1.2s; }
.loader.done { clip-path: inset(0 0 100% 0); visibility: hidden; }
.loader-logo { position: relative; display: flex; align-items: center; gap: 14px; }
.loader-logo img { filter: brightness(0) invert(1); }
.loader-mark { width: 90px; height: 96px; animation: markIn 1.4s var(--ease) both; }
.loader-word { width: 159px; height: 96px; clip-path: inset(0 100% 0 0); animation: wipe .9s var(--ease) .75s forwards; }
.loader-ring { position: absolute; left: -22px; top: 50%; width: 134px; height: 134px; translate: 0 -50%; }
.loader-ring circle { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: ringDraw 1.5s var(--ease) .2s forwards; }
@keyframes ringDraw { to { stroke-dashoffset: 40; } }
@keyframes markIn { 0% { opacity: 0; transform: rotate(-300deg) scale(.3); filter: blur(6px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; } }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }

/* ---------- Top bar ---------- */
.topbar { background: var(--deep); color: rgba(255,255,255,.72); font-size: 13px; font-weight: 600; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: var(--topbar); gap: 16px; }
.topbar-l, .topbar-r { display: flex; align-items: center; gap: 22px; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: color .3s; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; color: var(--sky); }
.live { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: live 2s infinite; }
@keyframes live { to { box-shadow: 0 0 0 8px rgba(74,222,128,0); } }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); }
.lang button { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.65); }
.lang button.on { background: #fff; color: var(--navy); }
.lang button[hidden] { display: none; }
.lang button:hover { color: #fff; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: box-shadow .4s var(--ease); }
.header.scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 30px -20px rgba(13,27,62,.25); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav); gap: 20px; }
.brand { display: flex; align-items: center; gap: 4px; flex: none; }
.brand-mark { width: 45px; height: 48px; will-change: transform; }
.brand-word { width: 80px; height: 48px; }
.brand:hover .brand-mark { animation: wobble 1s var(--ease); }
@keyframes wobble { 0% { rotate: 0deg; } 40% { rotate: -40deg; scale: 1.08; } 100% { rotate: 360deg; } }
.menu { display: flex; align-items: center; gap: 2px; list-style: none; height: 100%; }
.menu > li { height: 100%; display: flex; align-items: center; }
.menu > li > a, .menu > li > button { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; transition: background .3s, color .3s; }
.menu > li > a:hover, .menu > li > button:hover, .has-mega:hover > button { background: var(--mist); color: var(--navy); }
.menu > li > a.active, .menu > li > button.active { color: var(--navy); }
.menu > li > a.active::after, .menu > li > button.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--blue); }
.menu .chev { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.has-mega:hover .chev, .has-mega.open .chev { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(13,27,62,.3); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
.has-mega:hover .mega, .has-mega.open .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega .wrap { display: grid; grid-template-columns: 1fr 1fr 300px; gap: 32px; padding-top: 28px; padding-bottom: 32px; }
.mega h6 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px 16px; }
.mega-col { display: grid; gap: 2px; align-content: start; }
.mega-item { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; transition: background .3s; }
.mega-item:hover, .mega-item.active { background: var(--mist); }
.mega-item b { display: block; font-size: 15px; }
.mega-item span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.mega-item .hicon { --s: 46px; }
.mega-promo { border-radius: 18px; padding: 24px; color: #fff; background: linear-gradient(140deg, var(--deep-2), var(--blue)); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; }
.mega-promo::before { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -70px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.3); animation: spin 30s linear infinite; }
.mega-promo b { font-size: 20px; line-height: 1.2; margin-bottom: 8px; position: relative; }
.mega-promo p { font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 16px; position: relative; }
.mega-promo .btn { align-self: flex-start; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.burger { display: none; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 26px; }
.nav-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- House icon (from the cards design) ---------- */
.hicon { --s: 64px; position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; }
.hicon .house { position: absolute; right: 0; top: 0; width: 82%; height: 82%; color: var(--house); transition: transform .5s var(--ease), color .5s; }
.hicon .glyph { position: absolute; left: 0; bottom: 0; width: 72%; height: 72%; color: var(--ink-2); --acc: #2b8fe0; transition: transform .5s var(--ease); }
.hicon.dark .house { color: rgba(168,195,234,.18); }
.hicon.dark .glyph { color: #fff; --acc: var(--sky); }

/* ---------- Included cards (attached design) ---------- */
.inc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.inc { --mx: 50%; --my: 50%; position: relative; flex: 0 1 calc((100% - 56px) / 3); min-width: 280px; background: #fff; border-radius: 14px; padding: 38px 32px 34px; box-shadow: 0 10px 30px -18px rgba(13,60,110,.25); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.inc::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(168,195,234,.28), transparent 45%); }
.inc:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(13,60,110,.35); }
.inc:hover::before { opacity: 1; }
.inc:hover .hicon .house { transform: translateY(-3px) scale(1.04); }
.inc:hover .hicon .glyph { transform: rotate(-8deg) scale(1.06); }
.inc-top { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 18px; }
.inc-top .hicon { --s: 76px; margin-top: 4px; }
.inc h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); padding-top: 8px; }
.inc p { font-size: 17px; line-height: 1.75; color: var(--ink-2); font-weight: 400; }
.inc p b { font-weight: 800; color: var(--ink); }
.inc .tag { position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: var(--mist); padding: 4px 10px; border-radius: 999px; }
.inc.lnk { display: block; }
.inc .more { margin-top: 18px; }

/* ---------- Dark banner ---------- */
.banner { position: relative; overflow: hidden; color: #fff; background: radial-gradient(900px 500px at 85% 10%, rgba(53,103,194,.45), transparent 60%), linear-gradient(160deg, var(--deep-2) 0%, var(--deep) 70%); }
.banner::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(168,195,234,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(168,195,234,.08) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 75% 40%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 75% 40%, #000 0%, transparent 70%); }
.banner .wm { position: absolute; right: -6%; top: 50%; width: min(620px, 70vw); aspect-ratio: 1; translate: 0 -50%; opacity: .06; filter: brightness(0) invert(1); background: url(../assets/bird-mark.png) center/contain no-repeat; animation: spin 120s linear infinite; pointer-events: none; }
.banner .wrap { position: relative; }
.banner-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding-block: 64px 96px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.6); margin-bottom: 26px; list-style: none; }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs li:last-child { color: #fff; }
.banner .eyebrow { color: var(--sky); }
.banner h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 800; margin: 18px 0 22px; }
.banner h1 .serif { color: var(--sky); font-size: 1.08em; letter-spacing: -0.02em; }
.banner .lead { color: rgba(255,255,255,.75); font-size: clamp(16px, 1.5vw, 19px); max-width: 52ch; margin-bottom: 32px; }
.banner .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; list-style: none; }
.ticks li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.85); }
.ticks svg { width: 18px; height: 18px; color: var(--sky); }
.banner .line { display: block; overflow: hidden; padding-bottom: .06em; }
.banner .line > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); }
.ready .banner .line > span { transform: none; }
.ready .banner .line:nth-child(2) > span { transition-delay: .1s; }
.fade { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.ready .fade { opacity: 1; transform: none; }
.ready .f1 { transition-delay: .2s; } .ready .f2 { transition-delay: .32s; } .ready .f3 { transition-delay: .44s; } .ready .f4 { transition-delay: .56s; }
.banner.small .banner-grid { grid-template-columns: 1fr; padding-block: 56px 72px; }
.banner.small h1 { font-size: clamp(36px, 4.6vw, 62px); }

/* Banner visual */
.bvis { position: relative; aspect-ratio: 1; max-width: 440px; width: 100%; margin-left: auto; }
.bvis .rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.bvis .rings circle { fill: none; stroke: rgba(168,195,234,.18); }
.bvis .rings .arc { stroke: var(--sky); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 160 1100; transform-origin: center; animation: spin 14s linear infinite; }
.bvis .rings .arc2 { stroke: rgba(168,195,234,.5); stroke-dasharray: 60 900; animation-duration: 22s; animation-direction: reverse; }
.bvis .glass { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 32px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); animation: float 6s ease-in-out infinite; }
.bvis .glass .hicon { --s: 62%; }
.bvis .pill { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 700; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); animation: float 5s ease-in-out infinite; white-space: nowrap; }
.bvis .pill i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--blue); }
.bvis .pill i svg { width: 16px; height: 16px; }
.bvis .p1 { left: 0; top: 18%; } .bvis .p2 { right: 0; top: 40%; animation-delay: -2s; } .bvis .p3 { left: 8%; bottom: 12%; animation-delay: -3.5s; }

/* ---------- Sub navigation (product pages) ---------- */
.subnav { position: sticky; top: var(--nav); z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; align-items: center; gap: 16px; height: 62px; }
.subnav-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.subnav-links::-webkit-scrollbar { display: none; }
.subnav-links a { position: relative; padding: 8px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--muted); white-space: nowrap; transition: color .3s, background .3s; }
.subnav-links a:hover { color: var(--navy); background: var(--mist); }
.subnav-links a.on { color: #fff; background: var(--navy); }
.subnav .prod { display: flex; align-items: center; gap: 10px; font-weight: 800; padding-right: 16px; border-right: 1px solid var(--line); white-space: nowrap; }
.subnav .prod .hicon { --s: 34px; }

/* ---------- Quick tiles ---------- */
.quick { position: relative; z-index: 5; margin-top: -56px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(13,27,62,.35), 0 0 0 1px var(--line); overflow: hidden; }
.tile { display: flex; gap: 14px; align-items: center; padding: 26px 24px; transition: background .4s var(--ease), color .4s var(--ease); }
.tile + .tile { border-left: 1px solid var(--line); }
.tile b { display: block; font-size: 16px; }
.tile span { font-size: 13.5px; color: var(--muted); transition: color .4s; }
.tile .hicon { --s: 50px; }
.tile .arrow { margin-left: auto; width: 18px; height: 18px; opacity: 0; transform: translateX(-6px); transition: all .4s var(--ease); }
.tile:hover { background: var(--navy); color: #fff; }
.tile:hover span { color: rgba(255,255,255,.7); }
.tile:hover .hicon .house { color: rgba(255,255,255,.15); }
.tile:hover .hicon .glyph { color: #fff; --acc: var(--sky); }
.tile:hover .arrow { opacity: 1; transform: none; }

/* ---------- Segments / generic cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.box:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -34px rgba(29,58,138,.35); }
.box h3 { font-size: 20px; letter-spacing: -0.01em; margin: 18px 0 8px; }
.box p { color: var(--muted); font-size: 15px; }
.box ul { list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.box li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 600; }
.box li svg { width: 18px; height: 18px; color: var(--ok); margin-top: 2px; }

/* Options (extras) */
.opts-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.optx { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.optx:hover { border-color: var(--sky); box-shadow: 0 16px 40px -28px rgba(29,58,138,.4); }
.optx .plus { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--mist); color: var(--blue); flex: none; }
.optx .plus svg { width: 18px; height: 18px; }
.optx b { display: block; font-size: 16px; margin-bottom: 2px; }
.optx span { color: var(--muted); font-size: 14.5px; }

/* Steps */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.steps-line { position: absolute; top: 33px; left: 34px; right: 34px; height: 2px; background: var(--line); }
.steps-line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--sky), var(--navy)); transform: scaleX(0); transform-origin: left; transition: transform 2s var(--ease); }
.steps.in .steps-line i { transform: scaleX(1); }
.step .n { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); color: var(--navy); margin-bottom: 22px; transition: background .6s var(--ease), color .6s, border-color .6s; transition-delay: var(--d2, 0s); }
.step .n svg { width: 26px; height: 26px; }
.steps.in .n { background: var(--navy); color: #fff; border-color: var(--navy); }
.step small { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--blue); }
.step h3 { font-size: 19px; margin: 4px 0 8px; }
.step p { color: var(--muted); font-size: 15px; }

/* ---------- Quote section ---------- */
.quote { background: linear-gradient(180deg, var(--mist), #fff); }
.quote-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.quote-aside .title { margin: 14px 0 18px; }
.quote-aside .lead { margin-bottom: 26px; }
.checks { list-style: none; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.checks li::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat; }
.help-card { display: flex; gap: 14px; align-items: center; margin-top: 30px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.help-card .ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; flex: none; }
.help-card .ico svg { width: 20px; height: 20px; }
.help-card small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.help-card b { font-size: 16px; }
.form-card { background: #fff; border-radius: 26px; padding: 38px; box-shadow: 0 40px 80px -50px rgba(29,58,138,.45), 0 0 0 1px var(--line); }
.form-card h3 { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 6px; }
.form-card > p { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; align-content: start; }
.field.full { grid-column: 1 / -1; }
.field label, .field .lbl { font-size: 13px; font-weight: 700; }
.field label i { font-style: normal; color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { font: inherit; font-size: 15px; color: var(--ink); width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--mist); outline: none; transition: border-color .3s, background .3s, box-shadow .3s; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(53,103,194,.12); }
.field.err input, .field.err select, .field.err textarea { border-color: var(--err); }
.field .msg { display: none; font-size: 12.5px; color: var(--err); font-weight: 600; }
.field.err .msg { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 14px; font-weight: 600; color: var(--muted); transition: all .3s var(--ease); }
.chips input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); grid-column: 1 / -1; }
.consent input { margin-top: 4px; accent-color: var(--navy); width: 16px; height: 16px; flex: none; }
.form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-top: 22px; }
.form-foot small { color: var(--muted); font-size: 13px; }
.done { display: none; text-align: center; padding: 30px 0 10px; }
.sent .done { display: block; animation: fadeIn .6s var(--ease); }
.sent .form-body { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } }
.done .tick { width: 84px; height: 84px; margin: 0 auto 20px; }
.done .tick circle { fill: none; stroke: var(--ice); stroke-width: 4; }
.done .tick path { fill: none; stroke: var(--navy); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.sent .done .tick path { animation: tick .7s var(--ease) .2s forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.done p { color: var(--muted); max-width: 42ch; margin: 8px auto 22px; }
.drop { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; border-radius: 14px; border: 1.5px dashed var(--sky); background: var(--mist); text-align: center; cursor: pointer; transition: background .3s, border-color .3s; }
.drop:hover, .drop.over { background: #fff; border-color: var(--blue); }
.drop svg { width: 28px; height: 28px; color: var(--blue); }
.drop b { font-size: 15px; }
.drop small { color: var(--muted); font-size: 13px; }
.drop input { display: none; }

/* ---------- Blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post { display: flex; flex-direction: column; }
.post-cover { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; margin-bottom: 18px; background: var(--c, linear-gradient(140deg, var(--deep-2), var(--blue))); }
.post-cover svg.art { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1s var(--ease); }
.post:hover .post-cover svg.art { transform: scale(1.08) rotate(-2deg); }
.post-cover .hicon { position: absolute; right: 18px; bottom: 16px; --s: 64px; }
.post-cover .cat { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.94); font-size: 12px; font-weight: 800; color: var(--navy); }
.post .meta { font-size: 13px; color: var(--muted); font-weight: 600; }
.post h3 { font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; margin: 6px 0 8px; }
.post h3 span { background: linear-gradient(var(--blue), var(--blue)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease); }
.post:hover h3 span { background-size: 100% 2px; }
.post p { color: var(--muted); font-size: 15px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.filters button { padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 700; font-size: 14px; color: var(--muted); transition: all .3s var(--ease); }
.filters button:hover { border-color: var(--sky); color: var(--navy); }
.filters button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.post.hide { display: none; }
.feature-post { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; margin-bottom: 56px; }
.feature-post .post-cover { aspect-ratio: 16 / 11; margin: 0; }
.feature-post h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.02em; margin: 10px 0 14px; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; }
.faq-grid .title { margin: 14px 0 16px; }
.faq-grid .lead { margin-bottom: 24px; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; text-align: left; font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em; }
.qa .pm { width: 34px; height: 34px; border-radius: 50%; background: var(--mist); position: relative; flex: none; transition: background .3s, rotate .4s var(--ease); }
.qa .pm::before, .qa .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--navy); translate: -50% -50%; transition: rotate .4s var(--ease), background .3s; }
.qa .pm::after { rotate: 90deg; }
.qa.open .pm { background: var(--navy); rotate: 180deg; }
.qa.open .pm::before, .qa.open .pm::after { background: #fff; }
.qa.open .pm::after { rotate: 0deg; }
.qa .a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.qa.open .a { grid-template-rows: 1fr; }
.qa .a > div { overflow: hidden; }
.qa .a p { color: var(--muted); padding-bottom: 22px; max-width: 64ch; }

/* ---------- Other products strip ---------- */
.others { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.other { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s, border-color .4s; }
.other:hover { transform: translateY(-4px); border-color: var(--sky); box-shadow: 0 20px 40px -30px rgba(29,58,138,.4); }
.other .hicon { --s: 52px; }
.other b { font-size: 16px; }
.other span { color: var(--muted); font-size: 13.5px; margin-top: -10px; }

/* ---------- Dark CTA band ---------- */
.cta-band { position: relative; border-radius: 28px; padding: 52px 56px; overflow: hidden; background: linear-gradient(120deg, var(--deep-2), var(--blue)); color: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.cta-band::before { content: ""; position: absolute; width: 460px; height: 460px; right: -120px; top: -240px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.22); animation: spin 30s linear infinite; }
.cta-band::after { content: ""; position: absolute; width: 300px; height: 300px; right: 140px; bottom: -220px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.14); }
.cta-band h3 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.02em; line-height: 1.15; position: relative; }
.cta-band h3 .serif { color: var(--ice); }
.cta-band p { color: rgba(255,255,255,.75); margin-top: 6px; position: relative; }
.cta-band .btns { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 1; }

/* ---------- Home specifics ---------- */
.hero-home .banner-grid { padding-block: 72px 128px; }
.orbit { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin-left: auto; container-type: inline-size; }
.orbit > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit .spin { transform-origin: 50% 50%; animation: spin 50s linear infinite; }
.orbit .rev { animation-duration: 70s; animation-direction: reverse; }
.orbit .fast { animation-duration: 14s; }
.core { position: absolute; top: 50%; left: 50%; width: 30cqw; height: 30cqw; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5), 0 0 0 10px rgba(255,255,255,.08); }
.core::before, .core::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1.5px solid var(--sky); opacity: 0; animation: ripple 3.2s var(--ease) infinite; }
.core::after { animation-delay: 1.6s; }
@keyframes ripple { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.core img { width: 48%; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-12deg) scale(1.06); } }
.ring { position: absolute; inset: 0; animation: spin 48s linear infinite; }
.node { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateX(38cqw) rotate(calc(-1 * var(--a))); }
.chip { display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; color: var(--ink); font-size: clamp(11px, 2.6cqw, 14px); font-weight: 700; box-shadow: 0 12px 30px -10px rgba(0,0,0,.4); animation: spin 48s linear infinite reverse; transition: transform .3s var(--ease); }
.chip:hover { transform: scale(1.06); }
.chip .hicon { --s: 30px; }
.segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.seg { position: relative; border-radius: 22px; padding: 34px; overflow: hidden; color: #fff; min-height: 340px; display: flex; flex-direction: column; background: linear-gradient(160deg, var(--deep-2), var(--deep)); transition: transform .5s var(--ease); }
.seg:hover { transform: translateY(-6px); }
.seg::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -90px; border-radius: 50%; border: 1.5px dashed rgba(168,195,234,.25); animation: spin 40s linear infinite; }
.seg:nth-child(2) { background: linear-gradient(160deg, var(--navy), var(--deep-2)); }
.seg:nth-child(3) { background: linear-gradient(160deg, var(--blue), var(--navy)); }
.seg small { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.seg h3 { font-size: 28px; letter-spacing: -0.02em; margin: 10px 0 10px; }
.seg p { color: rgba(255,255,255,.72); font-size: 15px; margin-bottom: 22px; }
.seg .links { display: grid; gap: 8px; margin-top: auto; position: relative; z-index: 1; }
.seg .links a { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.08); font-weight: 700; font-size: 15px; transition: background .3s; }
.seg .links a:hover { background: rgba(255,255,255,.18); }
.seg .links svg { width: 16px; height: 16px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.12); margin-top: 56px; }
.stat { padding: 28px 24px 0 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.12); }
.stat b { display: block; font-size: clamp(34px, 4.2vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.stat b sup { font-size: .45em; color: var(--sky); vertical-align: top; margin-left: 4px; }
.stat > span { display: block; margin-top: 10px; color: rgba(255,255,255,.62); font-size: 14.5px; }
.dark { background: var(--deep); color: #fff; overflow: hidden; }
.dark .eyebrow { color: var(--sky); }
.dark .title { color: #fff; } .dark .title .serif { color: var(--sky); }
.dark .lead { color: rgba(255,255,255,.7); }

/* Contact page */
.cards-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -60px; position: relative; z-index: 5; }
.cc { background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 30px 60px -36px rgba(13,27,62,.4), 0 0 0 1px var(--line); }
.cc .hicon { --s: 56px; margin-bottom: 14px; }
.cc h3 { font-size: 18px; margin-bottom: 4px; }
.cc p { color: var(--muted); font-size: 15px; margin-bottom: 12px; }
.agencies { display: grid; gap: 12px; }
.agency { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: border-color .3s; }
.agency:hover { border-color: var(--sky); }
.agency .hicon { --s: 44px; }
.agency b { display: block; }
.agency span { display: block; color: var(--muted); font-size: 14.5px; }
.map { position: relative; aspect-ratio: 1; border-radius: 26px; background: linear-gradient(160deg, var(--deep-2), var(--deep)); overflow: hidden; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .rg circle { fill: none; stroke: rgba(168,195,234,.14); }
.map .lk path { fill: none; stroke: rgba(168,195,234,.45); stroke-width: 1.5; stroke-dasharray: 4 6; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.city { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); }
.city i { width: 12px; height: 12px; border-radius: 50%; background: var(--sky); animation: ping 2.4s ease-out infinite; animation-delay: var(--dl, 0s); }
.city.hq i { width: 18px; height: 18px; background: #fff; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(168,195,234,.7); } 100% { box-shadow: 0 0 0 22px rgba(168,195,234,0); } }

/* Tabs (claims documents) */
.tabbar { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 18px; background: var(--mist); margin-bottom: 28px; }
.tabbar button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 14.5px; color: var(--muted); transition: background .3s, color .3s; }
.tabbar button .hicon { --s: 26px; }
.tabbar button.on { background: #fff; color: var(--navy); box-shadow: 0 6px 16px -10px rgba(13,27,62,.3); }
.tabpanel { display: none; animation: fadeIn .5s var(--ease); }
.tabpanel.on { display: block; }
.doclist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; list-style: none; }
.doclist li { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-weight: 600; }
.doclist svg { width: 22px; height: 22px; color: var(--blue); }

/* About */
.timeline { position: relative; display: grid; gap: 28px; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl { position: relative; }
.tl::before { content: ""; position: absolute; left: -34px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--navy); }
.tl b { display: block; font-size: 18px; }
.tl span { color: var(--muted); }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--deep); color: rgba(255,255,255,.7); overflow: hidden; }
.footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 90% 0%, rgba(53,103,194,.35), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(53,103,194,.18), transparent 60%); pointer-events: none; }
.footer .wrap { position: relative; }
.f-cta { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; padding: 72px 0 56px; border-bottom: 1px solid rgba(255,255,255,.1); }
.f-cta h2 { color: #fff; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; }
.f-cta h2 .serif { color: var(--sky); }
.f-cta .btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.f-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.f-contact a, .f-contact div { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); transition: background .3s, border-color .3s; }
.f-contact a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.f-contact i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(168,195,234,.14); color: var(--sky); flex: none; }
.f-contact i svg { width: 20px; height: 20px; }
.f-contact small { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 700; }
.f-contact b { color: #fff; font-size: 15.5px; }
.f-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 1.3fr; gap: 40px; padding: 56px 0; }
.f-brand { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.f-brand img { filter: brightness(0) invert(1); }
.f-brand .m { width: 50px; height: 54px; } .f-brand .w { width: 89px; height: 54px; }
.footer p { font-size: 15px; max-width: 34ch; }
.footer h5 { color: #fff; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.footer ul { list-style: none; display: grid; gap: 11px; font-size: 15px; }
.footer ul a { position: relative; transition: color .3s, padding .3s var(--ease); }
.footer ul a:hover { color: #fff; padding-left: 10px; }
.footer ul a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--sky); transition: width .3s var(--ease); }
.footer ul a:hover::before { width: 6px; }
.social { display: flex; gap: 8px; margin-top: 22px; }
.social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); transition: background .3s, color .3s, transform .3s var(--ease); }
.social a:hover { background: #fff; color: var(--navy); transform: translateY(-3px); }
.social svg { width: 17px; height: 17px; }
.news-f p { margin-bottom: 14px; }
.news-f form { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.news-f input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font: inherit; font-size: 14.5px; padding: 0 14px; }
.news-f input::placeholder { color: rgba(255,255,255,.45); }
.news-f .btn { padding: 10px 16px; font-size: 14px; }
.f-big { font-size: clamp(64px, 17vw, 260px); font-weight: 800; letter-spacing: -0.06em; line-height: .78; color: transparent; -webkit-text-stroke: 1px rgba(168,195,234,.2); white-space: nowrap; user-select: none; text-align: center; margin: 0 0 -.06em; background: linear-gradient(180deg, rgba(168,195,234,.12), transparent 80%); -webkit-background-clip: text; background-clip: text; }
.f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; padding: 22px 0 26px; border-top: 1px solid rgba(255,255,255,.1); }
.f-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.f-bottom a:hover { color: #fff; }

/* ---------- Floating UI ---------- */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 45; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px -10px rgba(13,27,62,.35), 0 0 0 1px var(--line); display: grid; place-items: center; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.to-top img { width: 22px; height: 24px; }
.mbar { display: none; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; translate: -50% calc(100% + 80px); visibility: hidden; padding: 16px 22px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; max-width: calc(100% - 32px); transition: translate .5s var(--ease), visibility 0s linear .5s; }
.toast.show { translate: -50% 0; visibility: visible; transition: translate .5s var(--ease); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .menu, .nav-actions .btn-outline { display: none; }
  .burger { display: block; }
  .nav-open .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .nav-open .menu { display: flex; position: fixed; top: var(--menu-top, 120px); left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 16px 24px 100px; background: #fff; overflow-y: auto; height: auto; }
  .nav-open .menu > li { height: auto; display: block; }
  .nav-open .menu > li > a, .nav-open .menu > li > button { font-size: 21px; padding: 14px 4px; width: 100%; justify-content: space-between; }
  .menu > li > a.active::after, .menu > li > button.active::after { display: none; }
  .mega { position: static; box-shadow: none; border: 0; display: none; opacity: 1; visibility: visible; transform: none; }
  .has-mega.open .mega { display: block; }
  .has-mega:hover .mega { display: none; } .has-mega.open:hover .mega { display: block; }
  .mega .wrap { grid-template-columns: 1fr; padding: 0 0 12px; gap: 12px; }
  .mega-promo { display: none; }
  .banner-grid, .hero-home .banner-grid { grid-template-columns: 1fr; padding-block: 48px 80px; }
  .bvis { max-width: 360px; margin: 0 auto; }
  .orbit { max-width: 420px; margin: 0 auto; }
  .hero-home .banner-grid { padding-bottom: 110px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .tile:nth-child(3) { border-left: 0; }
  .tile:nth-child(n+3) { border-top: 1px solid var(--line); }
  .inc { flex-basis: calc((100% - 28px) / 2); }
  .grid-3, .posts, .segs, .cards-contact { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .quote-grid, .faq-grid, .feature-post { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .steps-line { display: none; }
  .others { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .f-cta { grid-template-columns: 1fr; }
  .f-cta .btns { justify-content: flex-start; }
  .f-grid { grid-template-columns: repeat(3, 1fr); }
  .f-grid > div:first-child, .f-grid > .news-f { grid-column: 1 / -1; }
  .subnav .prod { display: none; }
}
@media (max-width: 680px) {
  :root { --nav: 70px; }
  html { scroll-padding-top: 140px; }
  .wrap { padding: 0 16px; }
  .topbar-r > a, .hide-sm, .nav-actions .btn-primary { display: none; }
  .brand-mark { width: 39px; height: 42px; } .brand-word { width: 70px; height: 42px; }
  .section { padding: 76px 0; }
  .section.tight { padding: 60px 0; }
  .head { margin-bottom: 36px; }
  .quick { margin-top: -44px; }
  .quick-grid { grid-template-columns: 1fr; }
  .tile + .tile { border-left: 0; border-top: 1px solid var(--line); }
  .tile { padding: 18px 20px; }
  .inc { flex-basis: 100%; min-width: 0; padding: 30px 24px; }
  .inc-top .hicon { --s: 64px; }
  .inc p { font-size: 16px; }
  .grid-3, .posts, .segs, .cards-contact, .opts-list, .doclist, .steps, .fields, .f-contact { grid-template-columns: 1fr; }
  .others { grid-template-columns: 1fr 1fr; }
  .chip { padding: 5px 10px 5px 5px; gap: 6px; }
  .chip .hicon { --s: 22px; }
  .node { transform: translate(-50%, -50%) rotate(var(--a)) translateX(36cqw) rotate(calc(-1 * var(--a))); }
  .form-card { padding: 26px 18px; border-radius: 20px; }
  .cta-band { padding: 34px 24px; border-radius: 22px; }
  .f-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .bvis .pill { font-size: 12px; }
  .subnav .wrap { height: 56px; }
  .subnav .btn { display: none; }
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(13,27,62,.3); padding-bottom: env(safe-area-inset-bottom); }
  .mbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
  .mbar a svg { width: 20px; height: 20px; color: var(--navy); }
  .mbar a.main { color: #fff; background: var(--navy); }
  .mbar a.main svg { color: #fff; }
  body { padding-bottom: 62px; }
  .to-top { bottom: 80px; right: 16px; width: 46px; height: 46px; }
  .toast { bottom: 80px; }
  .loader-mark { width: 68px; height: 72px; } .loader-word { width: 120px; height: 72px; }
  .loader-ring { width: 104px; height: 104px; left: -18px; }
}
/* Phones often report "reduce motion" (battery saver, accessibility settings).
   Instead of switching every animation off, tone motion down: sections fade in
   without sliding, the banner text appears without sliding, no intro screen
   and no smooth scrolling. Decorative animations keep running. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loader { display: none; }
  .reveal, .fade { transform: none !important; }
  .banner .line > span { transform: none !important; transition: opacity .8s ease; }
}

/* =========================================================
   Features adopted from reference sites
   ========================================================= */

/* Audience switch (STAR / CARTE / COMAR / Lloyd) */
.aud { display: flex; gap: 2px; height: 100%; }
.aud a { display: inline-flex; align-items: center; padding: 0 14px; height: 100%; font-weight: 700; color: rgba(255,255,255,.65); border-bottom: 2px solid transparent; transition: color .3s, border-color .3s, background .3s; }
.aud a:hover { color: #fff; background: rgba(255,255,255,.05); }
.aud a.on { color: #fff; border-color: var(--sky); background: rgba(255,255,255,.06); }

/* Search (CARTE / Olea / Lloyd) */
.search-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); transition: background .3s, border-color .3s; flex: none; }
.search-btn:hover { background: var(--mist); border-color: var(--sky); }
.search-btn svg { width: 18px; height: 18px; }
.search { position: fixed; inset: 0; z-index: 120; background: rgba(8,19,48,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.search.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.search-box { width: min(680px, 100%); background: #fff; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); overflow: hidden; transform: translateY(-16px) scale(.98); transition: transform .4s var(--ease); }
.search.open .search-box { transform: none; }
.search-in { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.search-in svg { width: 22px; height: 22px; color: var(--blue); }
.search-in input { flex: 1; border: 0; outline: none; font: inherit; font-size: 18px; font-weight: 600; color: var(--ink); min-width: 0; }
.search-in kbd { font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); }
.search-res { max-height: 56vh; overflow-y: auto; padding: 10px; }
.search-res a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; transition: background .2s; }
.search-res a:hover, .search-res a.sel { background: var(--mist); }
.search-res .hicon { --s: 38px; }
.search-res b { display: block; font-size: 15px; }
.search-res span { font-size: 13px; color: var(--muted); }
.search-res .empty { padding: 24px; text-align: center; color: var(--muted); }
.search-res h6 { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 10px 14px 6px; }

/* Floating quick rail (STAR / CARTE) */
.rail { position: fixed; right: 0; top: 50%; translate: 0 -50%; z-index: 44; display: flex; flex-direction: column; background: #fff; border-radius: 16px 0 0 16px; box-shadow: 0 20px 50px -20px rgba(13,27,62,.35), 0 0 0 1px var(--line); }
.rail > * { position: relative; display: grid; place-items: center; width: 58px; height: 58px; color: var(--navy); transition: background .3s, color .3s; }
.rail > *:first-child { border-radius: 16px 0 0 0; }
.rail > *:last-child { border-radius: 0 0 0 16px; }
.rail > * + * { border-top: 1px solid var(--line); }
.rail svg { width: 21px; height: 21px; }
.rail > *:hover { background: var(--navy); color: #fff; }
.rail .tip { position: absolute; right: 100%; top: 50%; translate: 8px -50%; margin-right: 10px; padding: 7px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s var(--ease); }
.rail > *:hover .tip, .rail > *:focus-visible .tip { opacity: 1; translate: 0 -50%; }

/* Modal: request a callback (Lloyd / CARTE) */
.modal { position: fixed; inset: 0; z-index: 110; background: rgba(8,19,48,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.modal.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal-box { position: relative; width: min(500px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 24px; padding: 34px; transform: translateY(20px) scale(.97); transition: transform .4s var(--ease); }
.modal.open .modal-box { transform: none; }
.modal-x { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); transition: background .3s; }
.modal-x:hover { background: var(--ice); }
.modal-x svg { width: 16px; height: 16px; }
.modal-box .hicon { --s: 60px; margin-bottom: 12px; }
.modal-box h3 { font-size: 24px; letter-spacing: -0.02em; }
.modal-box .form-body > p { color: var(--muted); margin: 6px 0 20px; }

/* Hero one-click quote widget (Lloyd) */
.qwidget { margin-top: 34px; padding: 8px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; gap: 8px; max-width: 560px; }
.qwidget label { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 14px; background: #fff; color: var(--ink); min-width: 0; }
.qwidget label svg { width: 18px; height: 18px; color: var(--blue); }
.qwidget select { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); padding: 14px 0; cursor: pointer; }
.qwidget-note { margin-top: 12px; font-size: 13.5px; color: rgba(255,255,255,.6); }

/* Plans / packs (STAR) */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 32px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.plan:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(29,58,138,.4); }
.plan.best { background: linear-gradient(170deg, var(--deep-2), var(--deep)); color: #fff; border-color: transparent; box-shadow: 0 40px 80px -40px rgba(8,19,48,.7); }
.plan .badge-top { position: absolute; top: 22px; right: 22px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--sky); color: var(--deep); }
.plan small { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.plan.best small { color: var(--sky); }
.plan h3 { font-size: 26px; letter-spacing: -0.02em; margin: 6px 0 8px; }
.plan > p { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
.plan.best > p { color: rgba(255,255,255,.7); }
.plan ul { list-style: none; display: grid; gap: 11px; margin-bottom: 26px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 600; }
.plan li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }
.plan.best li svg { color: var(--sky); }
.plan li.no { color: var(--muted); font-weight: 500; }
.plan.best li.no { color: rgba(255,255,255,.45); }
.plan li.no svg { color: #c3cddd; }
.plan.best li.no svg { color: rgba(255,255,255,.3); }
.plan .btn { margin-top: auto; }
.plans-note { margin-top: 18px; font-size: 13.5px; color: var(--muted); text-align: center; }

/* Industries (Olea) */
.inds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ind { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; font-weight: 700; transition: background .3s, border-color .3s, transform .4s var(--ease); }
.ind:hover { background: rgba(255,255,255,.1); border-color: rgba(168,195,234,.35); transform: translateY(-3px); }
.ind .hicon { --s: 44px; }

/* Servicing expertise (Olea) */
.exp { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.exp > div { padding: 30px 26px; transition: background .4s; }
.exp > div + div { border-left: 1px solid var(--line); }
.exp > div:hover { background: var(--mist); }
.exp .hicon { --s: 58px; margin-bottom: 16px; }
.exp h3 { font-size: 18px; margin-bottom: 6px; }
.exp p { color: var(--muted); font-size: 14.5px; }

/* Advice band with callback (Lloyd) */
.advice { display: grid; grid-template-columns: 1fr auto auto; gap: 18px 28px; align-items: center; padding: 28px 32px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -40px rgba(29,58,138,.45); }
.advice .who { display: flex; align-items: center; gap: 16px; }
.advice .hicon { --s: 58px; }
.advice b { display: block; font-size: 19px; letter-spacing: -0.01em; }
.advice span { color: var(--muted); font-size: 15px; }
.advice .tel { display: flex; flex-direction: column; text-align: right; }
.advice .tel small { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.advice .tel a { font-size: 20px; font-weight: 800; color: var(--navy); white-space: nowrap; }

/* Detail list inside included cards (CARTE guarantee lists) */
.inc .det { list-style: none; display: grid; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.inc .det li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.inc .det li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); margin-top: 9px; flex: none; }
.inc-note { margin-top: 26px; text-align: center; font-size: 14px; color: var(--muted); }

/* Who it's for */
.intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.intro .title { margin: 14px 0 18px; }
.intro .lead + .lead { margin-top: 14px; }
.for-list { display: grid; gap: 12px; }
.for { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--mist); }
.for .hicon { --s: 50px; }
.for b { display: block; font-size: 16px; }
.for span { color: var(--muted); font-size: 14.5px; }

/* Useful documents (Lloyd) */
.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.doc { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--ease); }
.doc:hover { border-color: var(--sky); transform: translateY(-3px); }
.doc .hicon { --s: 46px; }
.doc b { display: block; font-size: 15px; }
.doc span { font-size: 13px; color: var(--muted); }
.doc .dl { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--navy); flex: none; transition: background .3s, color .3s; }
.doc:hover .dl { background: var(--navy); color: #fff; }
.doc .dl svg { width: 16px; height: 16px; }

/* Help cards (COMAR) */
.helps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.helpc { display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s; }
.helpc:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -36px rgba(29,58,138,.4); }
.helpc .hicon { --s: 60px; }
.helpc b { font-size: 19px; }
.helpc span { color: var(--muted); font-size: 15px; }
.helpc .link { margin-top: auto; padding-top: 6px; }

@media (max-width: 1100px) {
  .rail, .aud { display: none; }
  .plans, .helps, .docs { grid-template-columns: 1fr 1fr; }
  .plans .plan:last-child { grid-column: 1 / -1; }
  .inds { grid-template-columns: repeat(2, 1fr); }
  .exp { grid-template-columns: 1fr 1fr; }
  .exp > div:nth-child(3) { border-left: 0; }
  .exp > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .intro { grid-template-columns: 1fr; gap: 36px; }
  .advice { grid-template-columns: 1fr; }
  .advice .tel { text-align: left; }
}
@media (max-width: 680px) {
  .search-btn { width: 40px; height: 40px; }
  .plans, .helps, .docs, .inds, .exp { grid-template-columns: 1fr; }
  .plans .plan:last-child { grid-column: auto; }
  .exp > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .qwidget { flex-direction: column; }
  .modal-box { padding: 28px 20px; }
}

[hidden] { display: none !important; }
.others.six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .others.six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .others.six { grid-template-columns: 1fr 1fr; } }

/* =========================================================
   v3 — light illustrated banner (Olea-style), audience menus
   ========================================================= */
.mega .wrap { grid-template-columns: 1fr 300px; }
.mega-items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }

.banner { --sh: clamp(150px, 17vw, 260px); color: var(--ink); padding-bottom: var(--sh);
  background: radial-gradient(700px 380px at 82% 18%, rgba(168,195,234,.45), transparent 65%), linear-gradient(180deg, #f6faff 0%, #ebf3fc 55%, #dcebf9 100%);
  border-radius: 0 0 56px 92% / 0 0 56px 150px; }
.banner::before { background-image: linear-gradient(rgba(53,103,194,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(53,103,194,.06) 1px, transparent 1px); mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%); }
.banner .wm { display: none; }
.banner-grid, .hero-home .banner-grid, .banner.small .banner-grid { grid-template-columns: 1.1fr .9fr; padding-block: 44px 8px; position: relative; z-index: 1; }
.banner .eyebrow { color: var(--blue); }
.banner h1 .serif { color: var(--blue); }
.banner .lead { color: var(--muted); }
.crumbs { color: var(--muted); }
.crumbs a:hover, .crumbs li:last-child { color: var(--navy); }
.ticks li { color: var(--ink-2); }
.ticks svg { color: var(--blue); }
.banner .btn-light { background: var(--navy); color: #fff; } .banner .btn-light::before { background: var(--blue); }
.banner .btn-ghost { border-color: var(--line); color: var(--navy); background: #fff; } .banner .btn-ghost::before { background: var(--mist); }
.qwidget { background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 50px -30px rgba(29,58,138,.35); }
.qwidget label { background: var(--mist); }
.qwidget .btn-light { background: var(--navy); color: #fff; } .qwidget .btn-light::before { background: var(--blue); }
.qwidget-note { color: var(--muted); }

/* Illustrated skyline watermark */
.scene { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sh); pointer-events: none; }
.scene svg { width: 100%; height: 100%; display: block; }
.scene .drive { animation: drive linear infinite; }
.scene .drive.rev { animation-name: driveRev; }
@keyframes drive { from { transform: translateX(-220px); } to { transform: translateX(1820px); } }
@keyframes driveRev { from { transform: translateX(1820px); } to { transform: translateX(-220px); } }
.scene .jib { animation: jib 14s ease-in-out infinite; }
@keyframes jib { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.5); } }
.scene .smoke { transform-box: fill-box; transform-origin: center; animation: smoke 4.2s ease-out infinite; }
@keyframes smoke { 0% { transform: translate(0, 0) scale(.6); opacity: .9; } 100% { transform: translate(14px, -70px) scale(2.4); opacity: 0; } }
.scene .sway { animation: sway 6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.scene .walk { animation: walk .9s ease-in-out infinite alternate; }
@keyframes walk { to { transform: translateY(-2px); } }
.scene .fly { animation: fly 34s linear infinite; }
@keyframes fly { 0% { transform: translate(-260px, 140px) rotate(-4deg); } 100% { transform: translate(1860px, 10px) rotate(-4deg); } }
.scene .cloud { animation: cloud 120s linear infinite; }
@keyframes cloud { from { transform: translateX(-400px); } to { transform: translateX(1700px); } }
.glide { animation: glide 7s ease-in-out infinite; }
@keyframes glide { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(14px, -10px); } 66% { transform: translate(-8px, 6px); } }
.flap { transform-box: fill-box; transform-origin: center; animation: flap 1s ease-in-out infinite; }
@keyframes flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.45); } }

/* Bird ring emblem */
.emblem { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin-left: auto; }
.emblem svg { width: 100%; height: 100%; overflow: visible; }
.emblem .arc-top, .emblem .arc-bot { stroke-dasharray: 480; stroke-dashoffset: 480; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.emblem .arc-bot { transition-delay: .5s; }
.ready .emblem .arc-top, .ready .emblem .arc-bot { stroke-dashoffset: 0; }
.emblem .flap { stroke: #8ea2bb; }
.emb-badge { position: absolute; right: 0; bottom: 10%; display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 15px; color: var(--navy); box-shadow: 0 20px 40px -20px rgba(29,58,138,.45), 0 0 0 1px var(--line); animation: float 5s ease-in-out infinite; }
.emb-badge .hicon { --s: 42px; }

/* Home: tiles sit below the illustrated banner */
.quick { margin-top: 28px; }

@media (max-width: 1100px) {
  .banner { border-radius: 0 0 32px 92% / 0 0 32px 90px; }
  .banner-grid, .hero-home .banner-grid, .banner.small .banner-grid { grid-template-columns: 1fr; padding-block: 36px 12px; }
  .banner-grid > :not(.emblem) { position: relative; z-index: 1; }
  .emblem { position: absolute; right: -50px; top: 6px; width: 230px; max-width: none; opacity: .45; z-index: 0; }
  .emb-badge { display: none; }
  .mega .wrap { grid-template-columns: 1fr; }
  .mega-items { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .banner { border-radius: 0 0 24px 92% / 0 0 24px 60px; }
  .emblem { width: 170px; right: -46px; top: 0; }
  .quick { margin-top: 20px; }
}

.emblem { max-width: 330px; }
.cards-contact { margin-top: 28px; }

/* =========================================================
   v4 — royal-blue banner (logo blue #3C60A8)
   ========================================================= */
:root { --royal: #3c60a8; --royal-2: #2f4f94; --royal-3: #4a72bd; --logo-lt: #a8c0d8; }
.banner { color: #fff;
  background: radial-gradient(760px 420px at 80% 12%, rgba(168,192,216,.35), transparent 62%), radial-gradient(600px 400px at 0% 100%, rgba(31,61,120,.45), transparent 60%), linear-gradient(170deg, var(--royal-3) 0%, var(--royal) 50%, var(--royal-2) 100%); }
.banner::before { background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); }
.banner .eyebrow { color: #d7e3f2; }
.banner h1 { color: #fff; }
.banner h1 .serif { color: var(--logo-lt); }
.banner .lead { color: rgba(255,255,255,.84); }
.crumbs { color: rgba(255,255,255,.7); }
.crumbs a:hover, .crumbs li:last-child { color: #fff; }
.ticks li { color: rgba(255,255,255,.9); }
.ticks svg { color: var(--logo-lt); }
.banner .btn-light { background: #fff; color: var(--royal-2); } .banner .btn-light::before { background: #e3ecf8; }
.banner .btn-ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; } .banner .btn-ghost::before { background: rgba(255,255,255,.14); }
.qwidget { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); box-shadow: 0 24px 50px -30px rgba(10,22,51,.6); }
.qwidget label { background: #fff; }
.qwidget .btn-light { background: #fff; color: var(--royal-2); } .qwidget .btn-light::before { background: #e3ecf8; }
.qwidget-note { color: rgba(255,255,255,.72); }
.emblem .flap { stroke: rgba(255,255,255,.85); }
.scene .bob { animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px) rotate(.4deg); } }
.scene .wave { animation: wave 3s linear infinite; }
@keyframes wave { to { transform: translateX(-40px); } }
.scene .pulse { transform-box: fill-box; transform-origin: center; animation: pulse 6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); opacity: .7; } }
.others.auto { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mega-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-item span { font-size: 13px; }

@media (max-width: 1100px) { .mega-items { grid-template-columns: 1fr; } }

/* Home "Our solutions": white section, dark gradient cards */
.solutions-dark { background: #fff; padding-top: 90px; }
.solutions-dark .inc { background: linear-gradient(150deg, #2f4f94 0%, #1f3d78 55%, #0f2257 100%); box-shadow: 0 24px 50px -30px rgba(15,34,87,.7); }
.solutions-dark .inc::before { background: radial-gradient(380px circle at var(--mx) var(--my), rgba(168,192,216,.28), transparent 45%); }
.solutions-dark .inc h3, .solutions-dark .inc p b { color: #fff; }
.solutions-dark .inc p { color: rgba(255,255,255,.78); }
.solutions-dark .inc .hicon .house { color: rgba(168,192,216,.22); }
.solutions-dark .inc .hicon .glyph { color: #fff; --acc: #a8c0d8; }
.solutions-dark .inc .link { color: #a8c0d8; }
.solutions-dark .inc:hover { box-shadow: 0 34px 60px -30px rgba(15,34,87,.85); }

.solutions-dark .inc .det { border-top-color: rgba(255,255,255,.18); }
.solutions-dark .inc .det li { color: rgba(255,255,255,.82); }
.solutions-dark .inc .det li::before { background: #a8c0d8; }
.solutions-dark .inc-note { color: var(--muted); }

/* Home banner: logo dark-blue gradient */
.banner.hero-home { background: radial-gradient(700px 400px at 82% 14%, rgba(60,96,168,.55), transparent 62%), radial-gradient(600px 420px at 0% 100%, rgba(10,22,51,.6), transparent 60%), linear-gradient(160deg, #3c60a8 0%, #24448a 38%, #162f6b 70%, #0d1f4d 100%); }

/* Home quick-access card: logo light blue */
.quick-grid { background: #dae0ed; box-shadow: 0 30px 70px -30px rgba(31,61,120,.35); }
.tile { color: #13285a; }
.tile span { color: #4a5f86; }
.tile + .tile { border-left-color: rgba(60,96,168,.14); }
.tile:nth-child(n+3) { border-top-color: rgba(60,96,168,.14); }
.tile .hicon .house { color: #acbcde; }
.tile .hicon .glyph { color: #1f3d78; --acc: #3c60a8; }
.tile:hover { background: #1f3d78; }
@media (max-width: 680px) { .tile + .tile { border-top-color: rgba(60,96,168,.14); } }

/* =========================================================
   Logo lock-up: Bird + "A member of" City & Commercial Insurance Group
   (wordmark image is now cropped above the old tagline line)
   ========================================================= */
.brand-wrap { display: flex; align-items: center; flex: none; }
.brand { align-items: flex-start; }
.brand-word { width: 80px; height: 41.5px; margin-top: 1px; }
.member { display: flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--line); min-height: 40px; transition: opacity .3s; }
.member:hover { opacity: .8; }
.member small, .f-member small, .loader-member small { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.member img { width: 124px; height: auto; display: block; }

.f-brand { align-items: flex-start; }
.f-brand .w { width: 89px; height: 46px; margin-top: 1px; }
.f-member { display: flex; align-items: center; gap: 12px; margin: -4px 0 18px; }
.f-member small { color: rgba(255,255,255,.55); }
.cc-chip { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px -12px rgba(0,0,0,.5); }
.cc-chip img { width: 124px; height: auto; display: block; }

.loader { align-content: center; gap: 30px; }
.loader-logo { align-items: flex-start; }
.loader-word { height: 82px; }
.loader-member { display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0; transform: translateY(8px); animation: memberIn .7s var(--ease) 1.25s forwards; }
.loader-member small { color: rgba(255,255,255,.6); }
@keyframes memberIn { to { opacity: 1; transform: none; } }

@media (max-width: 1240px) { .menu > li > a, .menu > li > button { padding: 10px 10px; } }
@media (max-width: 1180px) and (min-width: 1101px) { .nav-actions .btn-outline { display: none; } }
@media (max-width: 680px) {
  .member { margin-left: 12px; padding-left: 12px; gap: 4px; }
  .member small { font-size: 8px; letter-spacing: .12em; }
  .member img { width: 92px; }
  .brand-word { width: 70px; height: 36.3px; }
  .loader-word { height: 62px; }
}
@media (max-width: 400px) { .member { display: none; } }

/* Banners without the skyline (all pages except home) */
.banner.no-scene { padding-bottom: 72px; }
@media (max-width: 680px) { .banner.no-scene { padding-bottom: 48px; } }

/* Home "Why Bird": logo light-blue gradient instead of dark navy */
#why.dark { color: var(--ink); background: radial-gradient(700px 360px at 90% 0%, rgba(255,255,255,.55), transparent 60%), linear-gradient(160deg, #e5eaf2 0%, #dae0ed 40%, #c4cde0 75%, #acbcde 100%); }
#why .eyebrow { color: var(--royal, #3c60a8); }
#why .title { color: var(--ink); }
#why .title .serif { color: #3c60a8; }
#why .lead { color: #4a5a7a; }
#why .stats { border-top-color: rgba(31,61,120,.18); }
#why .stat + .stat { border-left-color: rgba(31,61,120,.18); }
#why .stat b { color: #1f3d78; }
#why .stat b sup { color: #3c60a8; }
#why .stat > span { color: #4a5a7a; }
#why h3 { color: var(--ink); }
#why .ind { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.8); color: #13285a; box-shadow: 0 10px 24px -18px rgba(31,61,120,.45); }
#why .ind:hover { background: #fff; border-color: #fff; }
#why .ind .hicon.dark .house { color: #acbcde; }
#why .ind .hicon.dark .glyph { color: #1f3d78; --acc: #3c60a8; }

/* .dark is a section style; keep it from painting icon backgrounds */
.hicon.dark { background: transparent; overflow: visible; }

/* Band above the footer: same background as the FAQ sections */
.f-top { background: var(--mist); border-top: 1px solid var(--line); }
.f-top .f-cta { padding: 72px 0 40px; border-bottom: 1px solid var(--line); }
.f-top .f-cta h2 { color: var(--ink); }
.f-top .f-cta h2 .serif { color: var(--royal, #3c60a8); }
.f-top .f-contact { padding: 36px 0 72px; border-bottom: 0; }
.f-top .f-contact a, .f-top .f-contact div { background: #fff; border-color: var(--line); box-shadow: 0 16px 40px -32px rgba(29,58,138,.45); }
.f-top .f-contact a:hover { background: #fff; border-color: var(--sky); transform: translateY(-3px); }
.f-top .f-contact a { transition: border-color .3s, transform .4s var(--ease); }
.f-top .f-contact i { background: var(--mist); color: var(--navy); }
.f-top .f-contact small { color: var(--muted); }
.f-top .f-contact b { color: var(--ink); }
.footer > .wrap > .f-grid { padding-top: 64px; }
/* Product pages: the FAQ sits right above; separate it from the band */
.bg-mist + .section.tight, .section.tight { position: relative; }

.f-contact b { white-space: nowrap; }
.f-top .f-contact a { min-width: 0; }

/* Band above the footer when the section above is already light blue */
.f-top.on-white { background: #fff; }
.f-top.on-white .f-contact a, .f-top.on-white .f-contact div { background: var(--mist); box-shadow: none; }
.f-top.on-white .f-contact a:hover { background: #fff; box-shadow: 0 16px 40px -32px rgba(29,58,138,.45); }
.f-top.on-white .f-contact i { background: #fff; }

/* Footer contact details */
.footer > .wrap > .f-grid { padding-top: 80px; }
.f-info { list-style: none; display: grid; gap: 12px; margin: 22px 0 4px; font-size: 15px; }
.f-info li { display: flex; align-items: center; gap: 12px; }
.f-info svg { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(168,195,234,.12); color: var(--sky); flex: none; }
.f-info a { color: #fff; font-weight: 600; transition: color .3s; }
.f-info a:hover { color: var(--sky); }
.f-info span { color: #fff; font-weight: 600; }

/* Pre-footer "Request a quote online" band (gradient blue) */
.cta-quote { background: #fff; padding: 56px 0 80px; }
.cta-q { position: relative; overflow: hidden; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 58px 72px; border-radius: 36px; color: #fff;
  background: radial-gradient(460px 280px at 50% 100%, rgba(168,192,216,.42), transparent 70%), linear-gradient(110deg, #0d1f4d 0%, #1f3d78 38%, #2f4f94 68%, #3c60a8 100%);
  box-shadow: 0 40px 80px -50px rgba(13,31,77,.7); }
.cta-q::after { content: ""; position: absolute; z-index: -1; width: 440px; height: 440px; right: -40px; top: -190px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.18); animation: spin 40s linear infinite; }
.cta-q::before { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; right: 220px; bottom: -170px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.14); }
.cta-q h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
.cta-q p { margin-top: 12px; font-size: clamp(16px, 1.4vw, 19px); color: rgba(255,255,255,.82); }
.cta-q-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 18px 34px; border-radius: 999px; font-weight: 800; font-size: 18px; color: #fff; background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s; white-space: nowrap; }
.cta-q-btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.cta-q-btn:hover { background: #fff; color: #1f3d78; border-color: #fff; }
.cta-q-btn:hover svg { transform: translateX(4px); }
@media (max-width: 900px) { .cta-q { flex-direction: column; align-items: flex-start; padding: 44px 36px; } }
@media (max-width: 680px) { .cta-quote { padding: 32px 0 56px; } .cta-q { padding: 34px 24px; border-radius: 26px; } .cta-q-btn { font-size: 16px; padding: 15px 26px; } }

/* Optional extras: light blue cards (logo light blue) */
.optx { background: #dae0ed; border-color: #cdd6e8; }
.optx:hover { border-color: #acbcde; background: #d3dbec; }
.optx .plus { background: #fff; color: #3c60a8; }
.optx span { color: #4a5a7a; }

/* Footer contact details under the newsletter */
.news-f .f-info { margin-top: 26px; }
.f-info li { align-items: flex-start; }
.f-info li > span, .f-info li > a { padding-top: 7px; line-height: 1.45; }
.f-info .tels { display: grid; gap: 4px; }
.f-info .tels a { color: #fff; font-weight: 600; }
.f-info .tels a:hover { color: var(--sky); }

/* =========================================================
   Legal pages (sticky contents + readable prose)
   ========================================================= */
.legal-grid { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: start; }
.toc { position: sticky; top: calc(var(--nav) + 24px); display: grid; gap: 2px; padding: 20px; border-radius: 18px; background: var(--mist); }
.toc b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.toc a { padding: 8px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); transition: background .3s, color .3s; }
.toc a:hover { background: #fff; color: var(--navy); }
.prose { max-width: 760px; color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.prose .updated { display: inline-block; font-size: 13px; font-weight: 700; color: var(--muted); padding: 6px 12px; border-radius: 999px; background: var(--mist); margin-bottom: 28px; }
.prose h2 { font-size: 24px; letter-spacing: -0.02em; color: var(--ink); margin: 44px 0 12px; scroll-margin-top: 150px; }
.prose h2:first-of-type { margin-top: 0; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 12px; }
.prose ul { padding-left: 20px; display: grid; gap: 6px; }
.prose a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose .card { margin-top: 14px; padding: 20px 24px; border-radius: 16px; background: var(--mist); border: 1px solid var(--line); }
.prose dl { display: grid; grid-template-columns: 200px 1fr; gap: 10px 20px; }
.prose dt { font-weight: 700; color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--mist); color: var(--ink); font-weight: 700; }
.legal-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (max-width: 1100px) { .legal-grid { grid-template-columns: 1fr; gap: 32px; } .toc { position: static; } }
@media (max-width: 680px) { .prose dl { grid-template-columns: 1fr; gap: 2px 0; } .prose dd { margin-bottom: 10px; } }

/* =========================================================
   News & Events
   ========================================================= */
.events { display: grid; gap: 16px; }
.event { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--ease), box-shadow .4s; }
.event:hover { border-color: var(--sky); transform: translateY(-3px); box-shadow: 0 24px 50px -36px rgba(29,58,138,.45); }
.date { display: grid; place-items: center; align-content: center; height: 96px; border-radius: 16px; color: #fff; background: linear-gradient(150deg, #3c60a8, #1f3d78); text-align: center; }
.date b { font-size: 32px; line-height: 1; font-weight: 800; }
.date span { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #dae0ed; margin-top: 4px; }
.event h3 { font-size: 19px; letter-spacing: -0.01em; margin-bottom: 6px; }
.event p { color: var(--muted); font-size: 15px; }
.event .meta-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.event .meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.event .meta-row svg { width: 15px; height: 15px; color: var(--blue); }
.tag-pill { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: #dae0ed; color: #1f3d78; margin-bottom: 8px; }
@media (max-width: 680px) { .event { grid-template-columns: 72px 1fr; } .event .btn { grid-column: 1 / -1; } .date { height: 72px; } .date b { font-size: 24px; } }

@media (max-width: 680px) { .prose table { display: block; overflow-x: auto; } .prose th, .prose td { min-width: 120px; } }

.legal-grid > * { min-width: 0; }

/* Pre-footer quote card uses the same .cta-band card as About's "Let's talk" */
.cta-quote { background: #fff; padding: 90px 0 110px; }
@media (max-width: 680px) { .cta-quote { padding: 60px 0 76px; } }

/* About "Our expertise": separate light-blue cards */
.exp { gap: 18px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.exp > div { background: #e5eaf2; border-radius: 20px; border: 1px solid #d3dcec; transition: background .4s, transform .5s var(--ease), box-shadow .5s; }
.exp > div + div { border-left: 1px solid #d3dcec; }
.exp > div:hover { background: #dae0ed; transform: translateY(-4px); box-shadow: 0 24px 50px -36px rgba(31,61,120,.45); }
.exp .hicon .house { color: #fff; }
@media (max-width: 1100px) { .exp > div:nth-child(n+3) { border-top: 1px solid #d3dcec; } .exp > div:nth-child(3) { border-left: 1px solid #d3dcec; } }
@media (max-width: 680px) { .exp > div + div { border-top: 1px solid #d3dcec; border-left: 1px solid #d3dcec; } }

/* Banner ring: page-specific animated illustration (all pages except home) */
.emb-g { color: #fff; --acc: #a8c0d8; transform-box: fill-box; transform-origin: center; }
.emb-float { animation: embFloat 4s ease-in-out infinite; }
@keyframes embFloat { 50% { transform: translateY(-8px); } }
.emb-drive { animation: embDrive 2.6s ease-in-out infinite; }
@keyframes embDrive { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px) translateY(-2px); } }
.emb-speed { stroke-dasharray: 26 18; animation: embDash 1s linear infinite; }
.emb-road { stroke-dasharray: 22 16; animation: embDash 1.2s linear infinite reverse; opacity: .7; }
@keyframes embDash { to { stroke-dashoffset: 44; } }
.emb-bob { animation: embBob 3.4s ease-in-out infinite; }
@keyframes embBob { 50% { transform: translateY(6px) rotate(-3deg); } }
.emb-wave { animation: embWave 2s linear infinite; }
@keyframes embWave { to { transform: translateX(-30px); } }
.emb-orbit { transform-origin: 200px 200px; animation: spin 9s linear infinite; }
.emb-coin { transform-box: fill-box; transform-origin: center; animation: embCoin 2.7s ease-in infinite; opacity: 0; }
@keyframes embCoin { 0% { transform: translateY(-20px); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(70px); opacity: 1; } 80%, 100% { transform: translateY(78px) scaleY(.3); opacity: 0; } }
.emb-beat { animation: embBeat 1.6s ease-in-out infinite; }
@keyframes embBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(.97); } 45% { transform: scale(1.05); } }
.emb-ecg { stroke-dasharray: 400; stroke-dashoffset: 400; animation: embEcg 2.4s linear infinite; }
@keyframes embEcg { 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.emb-drop { animation: embDrop 1.4s linear infinite; opacity: 0; }
@keyframes embDrop { 0% { transform: translateY(-10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
.emb-sway { transform-origin: 50% 100%; animation: embSway 5s ease-in-out infinite; }
@keyframes embSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.emb-glow { animation: embGlow 3s ease-in-out infinite; }
@keyframes embGlow { 50% { opacity: .2; } }
.emb-stack { animation: embStack 3s ease-in-out infinite; }
@keyframes embStack { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-6px) scaleY(1.06); } }
.emb-ripple { transform-box: fill-box; transform-origin: center; animation: embRipple 2.6s ease-out infinite; }
@keyframes embRipple { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.emb-tick { stroke-dasharray: 40; stroke-dashoffset: 40; animation: embTick 3s ease-in-out infinite; }
@keyframes embTick { 30%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.emb-chat { animation: embFloat 3.6s ease-in-out infinite; }
.emb-dot { transform-box: fill-box; transform-origin: center; animation: embDot 1.2s ease-in-out infinite; }
@keyframes embDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-8px); opacity: 1; } }
.emb-page2 { opacity: .45; animation: embPage 4s ease-in-out infinite; }
@keyframes embPage { 50% { transform: rotate(8deg) translateX(6px); } }
.emb-rise { animation: embRise 4s ease-in-out infinite; }
@keyframes embRise { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-6px); } }

/* About ring: Bird mark */
.emb-mark { transform-box: fill-box; transform-origin: center; animation: embMark 6s ease-in-out infinite; }
@keyframes embMark { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-10deg) scale(1.05); } }
/* Contact ring: ringing phone + envelope */
.emb-ring { transform-box: fill-box; transform-origin: 30% 70%; animation: embRing 2.4s ease-in-out infinite; }
@keyframes embRing { 0%, 40%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-12deg); } 10%, 20%, 30% { transform: rotate(10deg); } }
.emb-waves { animation: embWaves 2.4s ease-in-out infinite; }
@keyframes embWaves { 0%, 40%, 100% { opacity: 0; } 8%, 30% { opacity: 1; } }

/* Footer contact details: regular weight */
.f-info a, .f-info span, .f-info .tels a { font-weight: 400; }

/* About: Mission & Vision cards */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mv-card { position: relative; overflow: hidden; padding: 44px 40px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgba(29,58,138,.45); scroll-margin-top: 160px; }
.mv-card .hicon { --s: 70px; margin-bottom: 20px; }
.mv-card small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.mv-card h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 14px; }
.mv-card p { color: var(--muted); font-size: 16px; }
.mv-card.dark-card { color: #fff; border-color: transparent; background: radial-gradient(360px 220px at 90% 0%, rgba(168,192,216,.3), transparent 70%), linear-gradient(150deg, #2f4f94, #1f3d78 55%, #0f2257); }
.mv-card.dark-card small { color: #acbcde; }
.mv-card.dark-card p { color: rgba(255,255,255,.8); }
.mv-card.dark-card::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -110px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.2); animation: spin 40s linear infinite; }
/* About: Goals */
.goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.goal { position: relative; padding: 30px 26px; border-radius: 20px; background: #e5eaf2; border: 1px solid #d3dcec; transition: transform .5s var(--ease), box-shadow .5s, background .4s; }
.goal:hover { transform: translateY(-5px); background: #dae0ed; box-shadow: 0 24px 50px -36px rgba(31,61,120,.45); }
.goal-n { position: absolute; top: 22px; right: 24px; font-size: 13px; font-weight: 800; letter-spacing: .1em; color: #3c60a8; }
.goal .hicon { --s: 58px; margin-bottom: 18px; }
.goal .hicon .house { color: #fff; }
.goal h3 { font-size: 18px; margin-bottom: 6px; }
.goal p { color: var(--muted); font-size: 14.5px; }
@media (max-width: 1100px) { .mv-grid { grid-template-columns: 1fr; } .goals { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .goals { grid-template-columns: 1fr; } .mv-card { padding: 32px 24px; } }

/* Claims "Be prepared": document cards with light-blue background */
.doclist li { background: #e5eaf2; border-color: #d3dcec; }
.doclist li svg { color: #3c60a8; }

/* Footer: two offices */
.f-office + .f-office { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
.f-office h6 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); margin-bottom: 2px; }
.news-f .f-office:first-of-type { margin-top: 26px; }
.news-f .f-office .f-info { margin-top: 12px; }

.emb-pig { transform-box: fill-box; transform-origin: center bottom; animation: embPig 2.7s ease-in-out infinite; }
@keyframes embPig { 0%, 60%, 100% { transform: translateY(0) scale(1); } 72% { transform: translateY(3px) scale(1.03, .97); } 84% { transform: translateY(-4px) scale(.99, 1.02); } }

/* Footer: newsletter in the brand column, last column = offices only */
.f-news { margin: 24px 0 4px; }
.f-news h5 { margin-bottom: 8px; }
.f-news p { margin-bottom: 12px; }
.f-offices .f-office:first-of-type { margin-top: 0; }
.f-offices .f-info { margin-top: 12px; }

/* =========================================================
   Tighter vertical rhythm
   ========================================================= */
.section { padding: 88px 0; }
.section.tight { padding: 64px 0; }
.head { margin-bottom: 44px; }
/* Neighbouring sections with the same background: no doubled gap */
.section.join { padding-top: 0; }
/* FAQ and Articles sit closer together */
#faq + #articles, #faq + .section#articles { padding-top: 64px; }
#faq:has(+ #articles) { padding-bottom: 64px; }
.cta-quote { padding: 72px 0 88px; }
@media (max-width: 680px) {
  .section { padding: 64px 0; }
  .section.tight { padding: 48px 0; }
  .head { margin-bottom: 32px; }
  #faq + #articles { padding-top: 48px; }
  #faq:has(+ #articles) { padding-bottom: 48px; }
  .cta-quote { padding: 52px 0 64px; }
}

/* Contact: our offices */
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.office { display: flex; flex-direction: column; gap: 22px; padding: 34px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -46px rgba(29,58,138,.45); transition: transform .5s var(--ease), box-shadow .5s; }
.office:hover { transform: translateY(-4px); box-shadow: 0 34px 64px -40px rgba(29,58,138,.5); }
.office-top { display: flex; align-items: center; gap: 16px; }
.office-top .hicon { --s: 62px; }
.office-top small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.office-top h3 { font-size: 26px; letter-spacing: -0.02em; }
.office-info { list-style: none; display: grid; gap: 14px; }
.office-info li { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; color: var(--ink-2); }
.office-info svg { width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: #e5eaf2; color: #3c60a8; flex: none; }
.office-info li > span, .office-info li > a { padding-top: 8px; line-height: 1.5; }
.office-info a { color: var(--ink); font-weight: 600; }
.office-info a:hover { color: var(--blue); }
.office .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) { .offices { grid-template-columns: 1fr; } }

.cta-quote.join { padding-top: 8px; }

/* Footer: phone numbers on one line, more space above social icons */
.f-info .tels { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.f-info .tels a { white-space: nowrap; }
.f-info .tels .sep { color: rgba(255,255,255,.45); padding-top: 0; }
.footer .social { margin-top: 34px; }
.f-grid { grid-template-columns: 1.4fr .9fr 1fr .8fr 1.8fr; gap: 32px; }
.f-info .tels { flex-wrap: nowrap; font-size: 14.5px; }
@media (max-width: 1100px) {
  .f-grid { grid-template-columns: repeat(3, 1fr); }
  .f-grid > .f-offices { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .f-grid > .f-offices > h5 { grid-column: 1 / -1; }
  .f-offices .f-office + .f-office { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (max-width: 680px) {
  .f-grid { grid-template-columns: 1fr 1fr; }
  .f-grid > .f-offices { grid-template-columns: 1fr; }
  .f-offices .f-office + .f-office { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
}

.f-news form { max-width: 420px; }

/* =========================================================
   Home: partners
   ========================================================= */
.partners-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.partners-copy .eyebrow { margin-bottom: 6px; }
.big-num { font-size: clamp(120px, 16vw, 230px); font-weight: 800; line-height: .9; letter-spacing: -0.06em; margin: 6px 0 14px;
  background: linear-gradient(120deg, #3c60a8 0%, #2f4f94 40%, #1f3d78 65%, #acbcde 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.partners-copy .title { margin-bottom: 18px; }
.partners-copy .lead { max-width: 44ch; }
.logos { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.logos li { display: grid; place-items: center; aspect-ratio: 1.12; padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 14px 30px -20px rgba(29,58,138,.28), 0 0 0 1px rgba(225,232,243,.7); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.logos li:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -24px rgba(29,58,138,.4), 0 0 0 1px var(--sky); }
.logos img { max-width: 86%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 1100px) { .partners-grid { grid-template-columns: 1fr; gap: 36px; } .big-num { font-size: clamp(110px, 22vw, 180px); } }
@media (max-width: 680px) { .logos { grid-template-columns: repeat(3, 1fr); gap: 10px; } .logos li { border-radius: 14px; padding: 10px; } .logos img { max-height: 48px; } }

/* Article cards with photos */
.post-cover.has-img { background: #dae0ed; }
.post-cover.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.post:hover .post-cover.has-img img { transform: scale(1.06); }
.post-cover.has-img .cat { z-index: 1; }

/* Home: highlighted audience tabs (Individuals / Professionals & Companies) */
.solutions-dark .tabbar { gap: 10px; padding: 8px; border-radius: 22px; background: #e5eaf2; border: 1px solid #d3dcec; box-shadow: 0 20px 44px -30px rgba(31,61,120,.5); margin-bottom: 40px; }
.solutions-dark .tabbar button { gap: 12px; padding: 16px 30px; border-radius: 16px; font-size: 17px; font-weight: 800; color: #1f3d78; transition: background .35s var(--ease), color .35s, box-shadow .35s; }
.solutions-dark .tabbar button .hicon { --s: 34px; }
.solutions-dark .tabbar button:hover { background: #fff; }
.solutions-dark .tabbar button.on { color: #fff; background: linear-gradient(135deg, #3c60a8, #1f3d78); box-shadow: 0 16px 30px -14px rgba(31,61,120,.75); }
.solutions-dark .tabbar button.on .hicon .house { color: rgba(255,255,255,.22); }
.solutions-dark .tabbar button.on .hicon .glyph { color: #fff; --acc: #acbcde; }
@media (max-width: 680px) {
  .solutions-dark .tabbar { display: grid; grid-template-columns: 1fr; width: 100%; }
  .solutions-dark .tabbar button { justify-content: center; padding: 14px 18px; font-size: 16px; }
}

/* Footer: more space before the newsletter */
.f-news { margin-top: 64px; }

/* "Other solutions" cards: light blue */
.section.tight .other { background: #e5eaf2; border-color: #d3dcec; }
.section.tight .other:hover { background: #dae0ed; border-color: #acbcde; }
.section.tight .other .hicon .house { color: #fff; }

.plan .btn { white-space: normal; text-align: center; }
.plans > * { min-width: 0; }

/* =========================================================
   Motor quote questionnaire
   ========================================================= */
.mq .mq-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; margin-bottom: 26px; }
.mq-steps { list-style: none; display: flex; gap: 8px; counter-reset: none; }
.mq-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--mist); color: var(--muted); font-size: 14px; font-weight: 700; transition: background .3s, color .3s; }
.mq-steps li b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--muted); font-size: 13px; }
.mq-steps li.on { background: linear-gradient(135deg, #3c60a8, #1f3d78); color: #fff; }
.mq-steps li.on b { color: #1f3d78; }
.mq-steps li.past { background: #dae0ed; color: #1f3d78; }
.mq-steps li.past b { background: #1f3d78; color: #fff; }
.mq-step { display: none; }
.mq-step.on { display: block; animation: fadeIn .5s var(--ease); }
.mq-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); margin: 30px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.mq-step .mq-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mq-title svg { width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: #e5eaf2; color: #3c60a8; }
.mq-title small { flex-basis: 100%; font-size: 13.5px; font-weight: 500; color: var(--muted); margin-left: 42px; margin-top: -6px; }
.field input[readonly] { background: #fff; border-style: dashed; color: var(--muted); }
/* Yes / No switch */
.mq-sw { align-content: end; }
.switch { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--mist); cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.sw-track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #c9d2df; transition: background .3s; flex: none; }
.sw-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .3s var(--ease); }
.switch input:checked + .sw-track { background: #3c60a8; }
.switch input:checked + .sw-track::after { transform: translateX(18px); }
.switch input:focus-visible + .sw-track { outline: 3px solid var(--sky); outline-offset: 2px; }
.sw-state { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.sw-state::after { content: "No"; }
.switch input:checked ~ .sw-state::after { content: "Yes"; color: #1f3d78; }
/* Vehicle value with slider */
.mq-value-row { display: flex; align-items: center; gap: 10px; }
.mq-value-row input { max-width: 200px; font-weight: 800; font-size: 17px; }
.mq-value-row span { font-weight: 700; color: var(--muted); }
.mq-value input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; margin-top: 10px; background: linear-gradient(90deg, #3c60a8 var(--p, 0%), #dae0ed var(--p, 0%)); outline: none; }
.mq-value input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid #3c60a8; box-shadow: 0 4px 12px rgba(31,61,120,.35); cursor: pointer; }
.mq-value input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid #3c60a8; cursor: pointer; }
.mq-value input[type=range]:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
.mq-range-labels { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--muted); }
/* Optional extras: tick boxes */
.mq-extras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.xbox { position: relative; cursor: pointer; }
.xbox input { position: absolute; opacity: 0; pointer-events: none; }
.xbox-in { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #d3dcec; background: #e5eaf2; transition: border-color .3s, background .3s, box-shadow .3s; }
.xbox-in > svg { width: 20px; height: 20px; color: #3c60a8; flex: none; }
.xbox b { display: block; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.xbox small { display: block; font-size: 12px; color: var(--muted); }
.xbox-tick { position: relative; width: 22px; height: 22px; flex: none; border-radius: 7px; border: 2px solid #acbcde; background: #fff; transition: background .25s, border-color .25s; }
.xbox-tick::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease); }
.xbox:hover .xbox-in { border-color: #acbcde; }
.xbox input:checked + .xbox-in { background: #fff; border-color: #3c60a8; box-shadow: 0 10px 24px -18px rgba(31,61,120,.6); }
.xbox input:checked + .xbox-in .xbox-tick { background: #3c60a8; border-color: #3c60a8; }
.xbox input:checked + .xbox-in .xbox-tick::after { transform: rotate(45deg) scale(1); }
.xbox input:focus-visible + .xbox-in { outline: 3px solid var(--sky); outline-offset: 2px; }
.mq-glass { margin-top: 12px; }
/* Navigation & summary */
.mq-nav { justify-content: space-between; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.mq-summary { margin: 26px 0 18px; padding: 20px 22px; border-radius: 16px; background: #e5eaf2; border: 1px solid #d3dcec; }
.mq-summary h5 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #3c60a8; margin-bottom: 12px; }
.mq-summary dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; font-size: 14.5px; }
.mq-summary dt { font-weight: 700; color: var(--muted); }
.mq-summary dd { color: var(--ink); font-weight: 600; }
.mq-summary .link { margin-top: 12px; }
#quote .quote-aside { position: sticky; top: calc(var(--nav) + 80px); }
@media (max-width: 1100px) { #quote .quote-aside { position: static; } }
@media (max-width: 680px) {
  .mq-extras { grid-template-columns: 1fr; }
  .mq-summary dl { grid-template-columns: 1fr; gap: 0; }
  .mq-summary dd { margin-bottom: 8px; }
  .mq-nav { flex-direction: column-reverse; align-items: stretch; }
  .mq-nav .btn { width: 100%; white-space: normal; }
  .mq-title small { margin-left: 0; }
}

/* Chosen plan card */
.plan.chosen { outline: 3px solid #3c60a8; outline-offset: -3px; transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(31,61,120,.55); }
.plan.best.chosen { outline-color: #acbcde; }
.plan.chosen .btn-outline { background: #3c60a8; border-color: #3c60a8; color: #fff; }
.plan.chosen .btn-outline::before { background: #1f3d78; }

/* =========================================================
   Health simulation: members
   ========================================================= */
.hq-note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.hq-member { padding: 22px; border-radius: 18px; background: #f5f7fc; border: 1.5px solid #d3dcec; }
.hq-ages .hq-age-row { display: flex; gap: 10px; }
.hq-age-row > span { flex: 1; padding: 9px 14px; border-radius: 12px; background: #fff; border: 1.5px dashed var(--line); }
.hq-age-row small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hq-age-row b { font-size: 17px; color: #1f3d78; }
.hq-glbl { display: block; font-size: 13px; font-weight: 700; margin: 18px 0 10px; }
.hq-guar { grid-template-columns: repeat(3, 1fr); }
.hq-guar .xbox-in { background: #fff; }
.hq-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.hq-actions svg { width: 16px; height: 16px; }
.chips input:disabled + span { opacity: .4; cursor: not-allowed; }
.hq-list { display: grid; gap: 10px; }
.hq-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1.5px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.hq-row.editing { border-color: #3c60a8; box-shadow: 0 10px 24px -18px rgba(31,61,120,.6); }
.hq-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #3c60a8, #1f3d78); color: #fff; font-weight: 800; text-transform: uppercase; }
.hq-who b { display: block; font-size: 15.5px; }
.hq-who > span { display: block; font-size: 13px; color: var(--muted); }
.hq-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hq-tags span { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #e5eaf2; color: #1f3d78; }
.hq-tags .none { background: #fdecec; color: #b42318; }
.hq-row-act { display: flex; gap: 6px; }
.hq-ic { padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #1f3d78; background: #e5eaf2; transition: background .3s, color .3s; }
.hq-ic:hover { background: #3c60a8; color: #fff; }
.hq-ic.danger { color: #b42318; background: #fdecec; }
.hq-ic.danger:hover { background: #b42318; color: #fff; }
.hq-empty { margin-top: 6px; padding: 14px 16px; border-radius: 14px; border: 1.5px dashed var(--line); color: var(--muted); font-size: 14.5px; text-align: center; }
.hq-empty.err { border-color: var(--err); color: var(--err); font-weight: 600; }
.mq-edit { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
@media (max-width: 900px) { .hq-guar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
  .hq-guar { grid-template-columns: 1fr; }
  .hq-row { grid-template-columns: 40px 1fr; }
  .hq-avatar { width: 40px; height: 40px; }
  .hq-row-act { grid-column: 1 / -1; justify-content: flex-end; }
  .hq-member { padding: 16px; }
}

/* =========================================================
   Article pages (blog-*.html)
   ========================================================= */
.article-banner h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; max-width: 18ch; }
.article-banner .lead { max-width: 56ch; }
.byline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.82); }
.byline span { display: inline-flex; align-items: center; gap: 8px; }
.byline svg { width: 17px; height: 17px; color: #dae0ed; }
.art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 64px; align-items: start; }
.art-body { max-width: 780px; }
.art-hero { margin: 0 0 34px; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--mist); }
.art-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-body > p:first-of-type { font-size: 18.5px; color: var(--ink); }
.prose h3 { font-size: 18px; color: var(--ink); margin: 26px 0 8px; }
.prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose p + ol, .prose ol + p, .prose h3 + ul, .prose ul + h3 { margin-top: 12px; }
.prose li::marker { color: var(--blue); font-weight: 800; }
.prose b { color: var(--ink); }
.prose .tip { margin: 26px 0; padding: 20px 24px 20px 22px; border-radius: 16px; background: linear-gradient(135deg, #f2f6fc, #dae0ed); border-left: 4px solid var(--blue); }
.prose .tip b:first-child { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }
.prose .keys { margin-top: 40px; padding: 24px 26px; border-radius: 18px; background: linear-gradient(150deg, #3c60a8, #1f3d78); color: #fff; }
.prose .keys h2 { color: #fff; margin: 0 0 12px; font-size: 20px; }
.prose .keys ul { gap: 8px; }
.prose .keys li { color: #eef2fa; }
.prose .keys li::marker { color: #a8c0d8; }
.prose .keys a { color: #fff; }
.art-foot { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.art-note { font-size: 14px; color: var(--muted); line-height: 1.6; }
.art-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.art-actions .back { transform: rotate(180deg); }
.art-aside { position: sticky; top: calc(var(--nav) + 24px); display: grid; gap: 18px; }
.art-aside .toc { position: static; }
.art-cta { display: grid; gap: 8px; padding: 24px; border-radius: 20px; color: #fff; background: linear-gradient(150deg, #3c60a8, #1f3d78); }
.art-cta .hicon { --s: 52px; margin-bottom: 6px; }
.art-cta b { font-size: 18px; }
.art-cta span { font-size: 14.5px; color: #dae0ed; line-height: 1.55; }
.art-cta .btn { justify-self: start; margin-top: 8px; }
.art-more { display: grid; gap: 2px; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; }
.art-more b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.art-more a { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; padding: 9px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink-2); transition: background .3s, color .3s; }
.art-more a svg { width: 14px; height: 14px; margin-top: 3px; color: var(--blue); }
.art-more a:hover { background: var(--mist); color: var(--navy); }
@media (max-width: 1100px) { .art-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .art-aside { position: static; } .art-aside .toc { display: none; } }
@media (max-width: 680px) { .art-body > p:first-of-type { font-size: 17px; } .prose.art-body table { display: table; font-size: 13.5px; } .prose.art-body th, .prose.art-body td { padding: 10px 8px; min-width: 0; } .prose .keys, .prose .tip { padding: 18px; } }
.prose a.btn { text-decoration: none; } .prose a.btn-primary { color: #fff; } .prose a.btn-outline { color: var(--navy); }
.stats.five { grid-template-columns: repeat(5, 1fr); }
.stats.five .stat b { font-size: clamp(32px, 3.6vw, 52px); }
@media (max-width: 1100px) {
  .stats.five { grid-template-columns: repeat(2, 1fr); }
  .stats.five .stat:nth-child(5) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
}
/* Travel quote */


.tq-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tq-zone { position: relative; cursor: pointer; }
.tq-zone input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tq-zone span { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--mist); font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ink-2); transition: all .3s var(--ease); }
.tq-zone span::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #acbcde; background: #fff; transition: all .3s; }
.tq-zone input:checked + span { border-color: #3c60a8; background: #fff; color: #1f3d78; box-shadow: 0 0 0 4px rgba(60,96,168,.1); }
.tq-zone input:checked + span::before { border: 5px solid #3c60a8; }
.tq-zone input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.tq #m-travellers[readonly] { color: var(--muted); }
@media (max-width: 680px) { .tq-zones { grid-template-columns: 1fr; } }

/* Promo card (Retirement savings, above the FAQ) */
.promo { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; min-height: 300px; border-radius: 24px; overflow: hidden; color: #fff; background: linear-gradient(120deg, #1f3d78, #2a4c8f 55%, #3c60a8); }
.promo::before { content: ""; position: absolute; width: 380px; height: 380px; left: -140px; bottom: -230px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.2); animation: spin 30s linear infinite; }
.promo-txt { position: relative; z-index: 1; display: grid; align-content: center; gap: 30px; padding: 52px 56px; }
.promo h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.promo h2 .serif { display: block; color: #dae0ed; }
.promo-act { display: flex; align-items: center; gap: 18px; }
.promo-ico { flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 8px rgba(255,255,255,.12); animation: promoPulse 2.6s ease-in-out infinite; }
.promo-ico svg { width: 36px; height: 36px; color: #3c60a8; }
.promo-act b { display: block; font-size: 20px; margin-bottom: 6px; }
.promo-link { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a8c0d8; transition: color .3s, gap .3s var(--ease); }
.promo-link svg { width: 20px; height: 20px; }
.promo-link:hover { color: #fff; gap: 16px; }
.promo-img { position: relative; }
.promo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 40%; transition: transform 1.2s var(--ease); }
.promo-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #2a4c8f 0%, rgba(42,76,143,.55) 22%, rgba(42,76,143,0) 50%); }
.promo:hover .promo-img img { transform: scale(1.04); }
@keyframes promoPulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(255,255,255,.12); } 50% { box-shadow: 0 0 0 16px rgba(255,255,255,.04); } }
@media (max-width: 900px) {
  .promo { grid-template-columns: 1fr; }
  .promo-img { height: 220px; order: -1; }
  .promo-img::after { background: linear-gradient(0deg, #1f3d78 0%, rgba(31,61,120,0) 55%); }
  .promo-txt { padding: 30px 26px 34px; gap: 24px; }
}
@media (max-width: 480px) { .promo-ico { width: 60px; height: 60px; } .promo-ico svg { width: 28px; height: 28px; } .promo-act b { font-size: 17px; } .promo-link { display: inline; font-size: 12.5px; letter-spacing: .05em; line-height: 1.6; } .promo-link svg { display: inline-block; width: 17px; height: 17px; vertical-align: -4px; margin-left: 6px; } }
.menu .m-only { display: none; }
@media (max-width: 680px) { .nav-open .menu .m-only { display: block; } }
@media (max-width: 1100px) { .nav-open .menu .has-mega > button { text-align: left; justify-content: space-between; } }

/* =========================================================
   Retirement savings — visual tax saving simulator
   ========================================================= */
.section.ts { background: linear-gradient(180deg, #f2f6fc 0%, #fff 100%); }
.ts-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: 40px; }
.ts-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -60px rgba(31,61,120,.55), 0 0 0 1px var(--line); }
.ts-in { padding: 40px; display: grid; gap: 30px; align-content: start; }
.ts-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ts-slider label { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.ts-slider output { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; color: #1f3d78; font-variant-numeric: tabular-nums; }
.ts-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; margin: 14px 0 8px; border-radius: 99px; background: linear-gradient(90deg, #3c60a8 0 var(--p, 0%), #dae0ed var(--p, 0%) 100%); outline: none; cursor: pointer; }
.ts-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 6px solid #1f3d78; box-shadow: 0 6px 16px -4px rgba(31,61,120,.5); transition: transform .2s; }
.ts-slider input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 6px solid #1f3d78; box-shadow: 0 6px 16px -4px rgba(31,61,120,.5); }
.ts-slider input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.ts-slider input[type=range]:focus-visible { box-shadow: 0 0 0 4px rgba(60,96,168,.2); }
.ts-scale { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--muted); }
.ts-track { position: relative; }
.ts-mark { position: absolute; top: 4px; width: 0; pointer-events: none; transition: left .4s var(--ease); }
.ts-mark i { position: absolute; left: -1px; top: 4px; width: 2px; height: 22px; border-radius: 2px; background: #1e8a57; }
.ts-mark em { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1e8a57; white-space: nowrap; }
.ts-mark[hidden] { display: none; }
.ts-pill { margin-top: 12px; font: inherit; font-size: 13.5px; font-weight: 600; color: #1e6b47; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #bfe3cf; background: #eefaf3; cursor: pointer; transition: background .3s, border-color .3s; }
.ts-pill:hover { background: #dff4e8; border-color: #1e8a57; }
.ts-pill[hidden] { display: none; }
.ts-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.ts-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--mist); border: 1px solid var(--line); }
.ts-seg button { font: inherit; font-size: 14px; font-weight: 700; padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: background .3s, color .3s; }
.ts-seg button.on { background: #1f3d78; color: #fff; box-shadow: 0 6px 14px -8px rgba(31,61,120,.8); }
.ts-seg.sm button { font-size: 12.5px; padding: 6px 12px; }
.ts-family { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ts-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 16px; background: var(--mist); }
.ts-step-l { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.ts-step-l svg { flex: none; width: 20px; height: 20px; color: #3c60a8; }
.ts-step-c { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.ts-step-c button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #dae0ed; color: #1f3d78; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.ts-step-c button:hover { background: #1f3d78; color: #fff; }
.ts-step-c output { min-width: 20px; text-align: center; font-weight: 800; color: #1f3d78; }
.ts-out { position: relative; padding: 40px; color: #fff; background: radial-gradient(120% 80% at 100% 0%, #3c60a8 0%, #1f3d78 55%, #142b58 100%); display: grid; gap: 22px; align-content: start; overflow: hidden; }
.ts-out::before { content: ""; position: absolute; width: 420px; height: 420px; right: -180px; top: -200px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.16); animation: spin 40s linear infinite; pointer-events: none; }
.ts-ring-wrap { position: relative; width: 210px; height: 210px; margin: 0 auto; }
.ts-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ts-ring circle { fill: none; stroke-width: 12; }
.ts-ring-bg { stroke: rgba(255,255,255,.14); }
.ts-ring-fg { stroke: #a8c0d8; stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }
.ts-ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ts-ring-c small { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #a8c0d8; }
.ts-ring-c b { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ts-ring-c span { font-size: 13px; color: #dae0ed; }
.ts-sub { text-align: center; color: #dae0ed; font-size: 15px; margin-top: -6px; }
.ts-sub b { color: #fff; }
.ts-bars { display: grid; gap: 14px; padding: 20px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.ts-bar .ts-row span { font-size: 13.5px; color: #dae0ed; }
.ts-bar .ts-row b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ts-bar-t { position: relative; height: 12px; margin-top: 8px; border-radius: 99px; background: rgba(255,255,255,.1); }
.ts-bar-t span.b, .ts-bar-t span.a { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; transition: width .8s var(--ease); }
.ts-bar-t span.b { background: rgba(255,255,255,.55); }
.ts-bar-t span.a { background: linear-gradient(90deg, #a8c0d8, #dae0ed); }
.ts-floor { position: absolute; left: 45%; top: -4px; bottom: -4px; width: 2px; background: #f4c542; border-radius: 2px; }
.ts-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #a8c0d8; }
.ts-legend i { flex: none; width: 2px; height: 12px; background: #f4c542; }
.ts-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ts-facts div { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); }
.ts-facts small { display: block; font-size: 11.5px; color: #a8c0d8; }
.ts-facts b { display: block; font-size: 14.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ts-proj { padding: 18px 20px; border-radius: 20px; background: #fff; color: var(--ink-2); }
.ts-proj .ts-row { align-items: center; }
.ts-proj .ts-row > span { font-size: 14px; font-weight: 700; color: var(--ink); }
.ts-proj p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; }
.ts-proj p b { color: #1f3d78; }
.ts-cta { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.ts-note { margin-top: 18px; font-size: 12.5px; color: var(--muted); text-align: center; }
.ts-board:not(.has) .ts-facts, .ts-board:not(.has) .ts-proj { opacity: .45; }
@media (max-width: 1100px) { .ts-head { grid-template-columns: 1fr; } .ts-board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .ts-in, .ts-out { padding: 24px 20px; }
  .ts-family { grid-template-columns: 1fr; }
  .ts-facts { grid-template-columns: 1fr; }
  .ts-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .ts-ring-wrap { width: 180px; height: 180px; }
  .ts-ring-c b { font-size: 24px; }
  .ts-proj .ts-row { flex-wrap: wrap; }
}

/* Five plans (Protection plan): 3 + 2 centred on desktop */
.plans.p5 { grid-template-columns: repeat(6, 1fr); }
.plans.p5 .plan { grid-column: span 2; padding: 28px; }
.plans.p5 .plan:nth-child(4) { grid-column: 2 / span 2; }
.plans.p5 .plan h3 { font-size: 23px; padding-right: 0; }
.plans.p5 .plan.best h3 { padding-right: 0; }
@media (max-width: 1100px) {
  .plans.p5 { grid-template-columns: 1fr 1fr; }
  .plans.p5 .plan, .plans.p5 .plan:nth-child(4) { grid-column: auto; }
  .plans.p5 .plan:last-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .plans.p5 { grid-template-columns: 1fr; }
  .plans.p5 .plan:last-child { grid-column: auto; }
}

/* Protection quote */
.pq-hint { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--mist); color: var(--muted); font-size: 14px; font-weight: 600; }
.pq-hint svg { width: 16px; height: 16px; color: #3c60a8; transform: rotate(-90deg); }
.pq-hint[hidden], .pq-group[hidden] { display: none; }

/* Protection quote: breathing room after the plan details and extras */
.pq-group { margin-bottom: 10px; }
.pq-group .fields { padding-bottom: 8px; }
.pq-extras { margin-top: 14px; padding-bottom: 8px; }
.pq-extras .xbox[hidden] { display: none; }
.pq .form-foot.mq-nav { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }

/* =========================================================
   About — Our Group (C&C Insurance Group)
   ========================================================= */
.section.cc { position: relative; overflow: hidden; background: radial-gradient(rgba(60,96,168,.12) 1px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(180deg, #f4f5fb, #eef1f8); }
.cc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.cc-eyebrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cc-eyebrow .eyebrow { margin: 0; color: #a3236f; }
.cc-eyebrow .eyebrow::before { background: linear-gradient(90deg, #3c60a8, #a3236f); }
.cc-eyebrow img { height: 30px; width: auto; padding: 6px 10px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line); box-sizing: content-box; }
.cc-title { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; }
.cc-grad { display: block; background: linear-gradient(90deg, #3c60a8 0%, #7b4fb6 50%, #b5226e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cc-l .lead { margin-top: 18px; max-width: 54ch; }
.cc-card { position: relative; margin-top: 30px; padding: 26px 30px 30px; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -40px rgba(60,40,120,.45), 0 0 0 1px rgba(138,79,181,.12); overflow: hidden; min-height: 168px; }
.cc-count { font-size: 13px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.cc-count b { color: #b5226e; }
.cc-card h3 { font-size: 28px; letter-spacing: -0.02em; margin: 8px 0 8px; }
.cc-card p { color: var(--ink-2); font-size: 16px; max-width: 46ch; }
.cc-card.swap h3, .cc-card.swap p { animation: ccIn .6s var(--ease) both; }
.cc-card.swap p { animation-delay: .08s; }
@keyframes ccIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cc-progress { position: absolute; left: 30px; right: 30px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: rgba(138,79,181,.12); overflow: hidden; }
.cc-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3c60a8, #7b4fb6, #b5226e); }
.cc-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px; border-top: 1px solid rgba(60,96,168,.15); }
.cc-stats > div { padding: 18px 12px 16px 0; border-bottom: 1px solid rgba(60,96,168,.15); }
.cc-stats > div:nth-last-child(-n+3) { border-bottom: 0; }
.cc-stats b { display: block; font-size: clamp(28px, 2.8vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #4a54a8; }
.cc-stats b sup { font-size: .62em; vertical-align: baseline; margin-left: 1px; }
.cc-stats > div > span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.cc-src { margin-top: 14px; font-size: 12.5px; color: var(--muted); }

.cc-r { display: grid; place-items: center; }
.cc-orbit { --w: 440px; --r: 170px; position: relative; width: var(--w); height: var(--w); }
.cc-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.cc-ring .cc-dash { transform-origin: 220px 220px; animation: spin 80s linear infinite; }
.cc-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font-size: calc(var(--w) * .62); font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(123,79,182,.12); pointer-events: none; user-select: none; }
.cc-core { position: absolute; left: 50%; top: 50%; width: calc(var(--w) * .38); height: calc(var(--w) * .38); transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 12px rgba(181,34,110,.08), 0 0 0 24px rgba(123,79,182,.06), 0 30px 60px -30px rgba(90,40,120,.5); }
.cc-core::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(181,34,110,.25); animation: ccPulse 3.2s ease-in-out infinite; }
.cc-core img { width: 74%; height: auto; }
@keyframes ccPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .4; } }
.cc-node { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; transform: translate(-50%, -32px) rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.cc-dot { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #3c60a8; background: linear-gradient(145deg, #e8ebf7, #f3dbe8); box-shadow: 0 0 0 6px rgba(255,255,255,.7), 0 14px 26px -14px rgba(90,40,120,.5); transition: transform .5s var(--ease), background .4s, color .4s, box-shadow .4s; }
.cc-dot svg { width: 26px; height: 26px; }
.cc-dot img { width: 34px; height: auto; }
.cc-node em { font-style: normal; font-size: 13.5px; font-weight: 800; color: var(--ink); padding: 5px 12px; border-radius: 999px; background: #fff; box-shadow: 0 6px 16px -10px rgba(31,61,120,.4); white-space: nowrap; transition: background .4s, color .4s; }
.cc-node.bird .cc-dot { background: linear-gradient(145deg, #1f3d78, #142b58); color: #fff; }
.cc-node.on .cc-dot { transform: scale(1.22); color: #fff; background: linear-gradient(145deg, #3c60a8, #8a4fb5 60%, #c2185b); box-shadow: 0 0 0 7px rgba(255,255,255,.85), 0 18px 34px -12px rgba(138,79,181,.7); }
.cc-node.bird.on .cc-dot { background: linear-gradient(145deg, #1f3d78, #8a4fb5); }
.cc-node.on em { background: #1b2140; color: #fff; }
.cc-node:hover .cc-dot { transform: scale(1.12); }
.cc-node.on:hover .cc-dot { transform: scale(1.22); }
.cc-node:focus-visible { outline: none; }
.cc-node:focus-visible .cc-dot { outline: 3px solid #a8c0d8; outline-offset: 4px; }
@media (max-width: 1100px) { .cc-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 680px) {
  .cc-orbit { --w: 320px; --r: 124px; }
  .cc-dot { width: 50px; height: 50px; }
  .cc-dot svg { width: 22px; height: 22px; }
  .cc-dot img { width: 26px; }
  .cc-node { transform: translate(-50%, -25px) rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
  .cc-node em { font-size: 11.5px; padding: 4px 9px; }
  .cc-card { padding: 22px 22px 26px; }
  .cc-progress { left: 22px; right: 22px; }
  .cc-stats { grid-template-columns: repeat(2, 1fr); }
  .cc-stats > div:nth-last-child(-n+3) { border-bottom: 1px solid rgba(60,96,168,.15); }
  .cc-stats > div:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 380px) { .cc-orbit { --w: 290px; --r: 110px; } }
.cc-node.bird .cc-dot img { filter: brightness(0) invert(1); }

/* =========================================================
   Reinsurance — group network map
   ========================================================= */
.section.rn { position: relative; overflow: hidden; color: #fff; background: radial-gradient(70% 90% at 70% 30%, #1a2a5c 0%, #0f1a3d 55%, #0b142f 100%); }
.rn-top { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 32px; align-items: center; }
.rn-eyebrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.rn-eyebrow .eyebrow { margin: 0; color: #f08bc4; }
.rn-eyebrow .eyebrow::before { background: linear-gradient(90deg, #8a8ff0, #f08bc4); }
.rn-eyebrow img { height: 26px; width: auto; padding: 6px 10px; border-radius: 8px; background: #fff; box-sizing: content-box; }
.rn-title { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; }
.rn-grad { background: linear-gradient(90deg, #a8b4ff 0%, #c89cf0 45%, #f08bc4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rn-lead { margin-top: 18px; color: #c7d0e6; font-size: 16.5px; line-height: 1.6; max-width: 44ch; }
.rn-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.wm-dots circle { fill: rgba(168,192,216,.2); }
.wm-arc { fill: none; stroke: url(#wmArc); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.go .wm-arc { animation: wmDraw 1.6s var(--ease) var(--d) forwards; }
@keyframes wmDraw { to { stroke-dashoffset: 0; } }
.wm-spark { fill: #f7b3d7; opacity: 0; filter: drop-shadow(0 0 6px #e2559c); }
.go .wm-spark { opacity: 1; transition: opacity .4s 1.6s; }
.wm-site { opacity: 0; }
.go .wm-site { animation: wmPop .6s var(--ease) var(--d) forwards; }
@keyframes wmPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wm-halo { fill: rgba(168,180,255,.18); stroke: rgba(168,180,255,.35); stroke-width: 1.5; }
.wm-pt { fill: #fff; stroke: #8a8ff0; stroke-width: 2.5; }
.wm-sites text, .wm-hub text { fill: #fff; font: 700 21px/1 Manrope, sans-serif; paint-order: stroke; stroke: #0f1a3d; stroke-width: 5px; stroke-linejoin: round; }
.wm-hub-pt { fill: #e2559c; stroke: #fff; stroke-width: 3; }
.wm-hub-glow { transform-box: fill-box; transform-origin: center; animation: wmPulse 2.4s ease-in-out infinite; }
@keyframes wmPulse { 0%, 100% { transform: scale(.85); opacity: .8; } 50% { transform: scale(1.25); opacity: .35; } }
.rn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.rn-card { display: flex; gap: 16px; align-items: flex-start; padding: 26px 24px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); transition: background .4s, border-color .4s, transform .5s var(--ease); }
.rn-card:hover { background: rgba(255,255,255,.08); border-color: rgba(240,139,196,.45); transform: translateY(-4px); }
.rn-card > svg { flex: none; width: 34px; height: 34px; color: #f08bc4; }
.rn-card h3 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 8px; }
.rn-card p { color: #c7d0e6; font-size: 15px; line-height: 1.55; }
@media (max-width: 1100px) { .rn-top { grid-template-columns: minmax(0, 1fr); } .rn-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) { .wm-sites text, .wm-hub text { font-size: 28px; stroke-width: 7px; } .rn-card { padding: 20px; } }

/* Eight-cell expertise grid (4 × 2) */
.exp.exp8 > div:nth-child(5) { border-left: 0; }
.exp.exp8 > div:nth-child(n+5) { border-top: 1px solid var(--line); }
@media (max-width: 1100px) {
  .exp.exp8 { grid-template-columns: 1fr 1fr; }
  .exp.exp8 > div { border-left: 0; border-top: 1px solid var(--line); }
  .exp.exp8 > div:nth-child(even) { border-left: 1px solid var(--line); }
  .exp.exp8 > div:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 680px) {
  .exp.exp8 { grid-template-columns: 1fr; }
  .exp.exp8 > div:nth-child(even) { border-left: 0; }
  .exp.exp8 > div:nth-child(2) { border-top: 1px solid var(--line); }
}
.cc-more { margin-top: 22px; }

/* Home: compact group section — white, figures above the ring */
.section.cc.cc-white { background: #fff; }
.cc-white .cc-grid { align-items: start; }
.cc-white .cc-r { gap: 56px; }
@media (max-width: 680px) { .cc-white .cc-r { gap: 44px; } }
.cc-top { width: 100%; }
.cc-top .cc-stats { margin-top: 0; grid-template-columns: repeat(6, 1fr); border-top: 0; border-bottom: 1px solid rgba(60,96,168,.15); }
.cc-top .cc-stats > div { padding: 4px 8px 14px 0; border-bottom: 0; }
.cc-top .cc-stats b { font-size: clamp(22px, 2vw, 28px); }
.cc-top .cc-stats > div > span { margin-top: 6px; font-size: 12.5px; line-height: 1.3; }
.cc-top .cc-src { margin-top: 8px; font-size: 11.5px; }
.cc-white .cc-orbit { --w: 400px; --r: 154px; }
.cc-white .cc-card { margin-top: 24px; }
@media (max-width: 1100px) {
  .cc-top .cc-stats { grid-template-columns: repeat(3, 1fr); row-gap: 6px; }
  .cc-white .cc-orbit { --w: 440px; --r: 170px; }
}
@media (max-width: 680px) {
  .cc-white .cc-orbit { --w: 320px; --r: 124px; }
  .cc-top .cc-stats > div:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 380px) { .cc-white .cc-orbit { --w: 290px; --r: 110px; } }
/* Home: group figures in a card */
.cc-figs { padding: 20px 22px 18px; border-radius: 20px; background: linear-gradient(135deg, #f4f6fc, #f6eef5); border: 1px solid rgba(138,79,181,.14); box-shadow: 0 24px 50px -38px rgba(60,40,120,.45); }
.cc-figs .cc-stats { border-bottom: 0; }
.cc-figs .cc-stats > div { padding: 2px 8px 0 12px; border-left: 1px solid rgba(60,96,168,.14); }
.cc-figs .cc-stats > div:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 1100px) {
  .cc-figs .cc-stats > div { padding: 8px 8px 8px 12px; }
  .cc-figs .cc-stats > div:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .cc-figs .cc-stats > div:nth-child(-n+3) { border-bottom: 1px solid rgba(60,96,168,.14); }
}

/* Reinsurance banner: risk flowing from the insurer to three reinsurers */
.emb-flow { animation: embFlow 1.2s linear infinite; }
@keyframes embFlow { to { stroke-dashoffset: -28; } }
.emb-node { transform-box: fill-box; transform-origin: center; animation: embNode 2.4s ease-in-out infinite; }
@keyframes embNode { 50% { transform: scale(1.08); } }
.emb-core { transform-box: fill-box; transform-origin: center; animation: embBeat 3s ease-in-out infinite; }
.emb-re { font: 800 46px/1 Manrope, sans-serif; letter-spacing: -0.04em; fill: #1f3d78; }
.mq-step .pq-group > .mq-title, .mq-step .pq-extras > .mq-title { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
/* Footer offices: same muted tone as the other footer text */
.f-info a, .f-info span, .f-info .tels a { color: rgba(255,255,255,.7); }
.f-info .tels .sep { color: rgba(255,255,255,.35); }
.f-info a:hover, .f-info .tels a:hover { color: #fff; }
.topbar-l { gap: 10px; } .tb-sep { color: rgba(255,255,255,.35); }
/* Multi-risk quote */
.mr .field[hidden] { display: none; }
.mr .mr-building { display: grid; gap: 7px; }
.mr .mr-building[hidden] { display: none; }
.mr select:disabled { opacity: .6; cursor: not-allowed; }
.mr-consent { margin-top: 18px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.form-consent { margin-top: 16px; font-size: 13px; color: var(--muted); line-height: 1.5; }
/* Group protection quote */
.gp .field[hidden], .gp .fields[hidden] { display: none; }
.gp .gp-incap { margin-top: 16px; }
.pnc .field[hidden] { display: none; }
@media (max-width: 680px) { .topbar a.hide-sm, .topbar .tb-sep { display: none; } }

/* Quote preview (offline test mode) */
.qp { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; background: rgba(8,19,48,.55); backdrop-filter: blur(4px); animation: qpIn .3s ease; }
@keyframes qpIn { from { opacity: 0; } }
.qp-box { width: min(760px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: 0 40px 90px -30px rgba(8,19,48,.6); overflow: hidden; }
.qp-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.qp-badge { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a5a00; background: #fff4dc; padding: 6px 12px; border-radius: 999px; }
.qp-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; }
.qp-meta { display: grid; grid-template-columns: 96px 1fr; gap: 6px 14px; padding: 16px 22px; font-size: 14px; background: var(--mist); border-bottom: 1px solid var(--line); }
.qp-meta dt { font-weight: 700; color: var(--muted); }
.qp-meta dd { color: var(--ink); font-weight: 600; word-break: break-word; }
.qp-mail { overflow: auto; padding: 18px 22px; }
.qp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.qp-table th, .qp-table td { text-align: left; padding: 9px 12px; border: 1px solid #dfe5f0; vertical-align: top; }
.qp-table thead th { background: #1f3d78; color: #fff; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.qp-table td:first-child { width: 40%; color: var(--muted); font-weight: 600; }
.qp-table td:last-child { color: var(--ink); }
.qp-table tr.qp-sec th { background: #eef2fa; color: #1f3d78; font-size: 13px; }
.qp-foot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding: 16px 22px; border-top: 1px solid var(--line); }
@media (max-width: 680px) { .qp { padding: 10px; } .qp-meta { grid-template-columns: 1fr; } .qp-meta dt { margin-top: 6px; } .qp-table td:first-child { width: 45%; } .qp-foot .btn { flex: 1; justify-content: center; } }
.qp-body { margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; background: var(--mist); font: 500 14.5px/1.6 Manrope, sans-serif; color: var(--ink); white-space: pre-wrap; }
.qp-cap { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.qp-scroll { overflow-x: auto; border-radius: 10px; }
.qp-table.qp-row { width: auto; }
.qp-table.qp-row th, .qp-table.qp-row td { white-space: nowrap; width: auto; }
.qp-table.qp-row td:first-child { color: var(--ink); font-weight: 400; }
/* C&C group line under the Bird logo */
.brand-wrap { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.brand-cc { display: flex; align-items: center; gap: 5px; margin-left: 50px; white-space: nowrap; }
.brand-cc span { font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.brand-cc img { display: block; height: 15px; width: auto; }
@media (max-width: 680px) { .brand-cc { margin-left: 44px; gap: 4px; } .brand-cc span { font-size: 8.5px; } .brand-cc img { height: 12px; } }
@media (max-width: 1100px) { .topbar-r > a[data-soon] { display: none; } .topbar-r { gap: 16px; } }
@media (max-width: 800px) { .topbar-l > a:first-child .hide-sm { display: none; } }
/* Refined "A member of" line: small caps text, hairline divider, compact logo */
.brand-cc { gap: 0; margin-top: 1px; }
.brand-cc span { font-size: 7.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8a94ab; line-height: 1; }
.brand-cc span::after { content: ""; display: inline-block; width: 1px; height: 9px; margin: 0 7px; vertical-align: -2px; background: #cfd6e4; }
.brand-cc img { height: 11px; }
@media (max-width: 680px) { .brand-cc span { font-size: 6.5px; letter-spacing: .14em; } .brand-cc span::after { height: 8px; margin: 0 5px; } .brand-cc img { height: 9.5px; } }
/* Footer: "A member of" line under the logo (white on the dark footer) */
.f-cc { display: flex; align-items: center; margin: -10px 0 20px 56px; white-space: nowrap; }
.f-cc span { font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); line-height: 1; }
.f-cc span::after { content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 8px; vertical-align: -2px; background: rgba(255,255,255,.25); }
.f-cc img { display: block; height: 12px; width: auto; opacity: .85; }

/* ===== Languages: French default, Arabic right-to-left ===== */
html.i18n-pending body { visibility: hidden; }
html[lang=ar] body, html[lang=ar] input, html[lang=ar] select, html[lang=ar] textarea, html[lang=ar] button { font-family: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif; }
html[lang=ar] .serif { font-family: "IBM Plex Sans Arabic", serif; font-style: normal; font-weight: 600; letter-spacing: 0; }
html[lang=ar] body { letter-spacing: 0; }
html[lang=ar] h1, html[lang=ar] h2, html[lang=ar] h3 { letter-spacing: 0; line-height: 1.35; }
html[dir=rtl] .go, html[dir=rtl] [data-ic=arrow] svg { transform: scaleX(-1); }
html[dir=rtl] input[type=tel], html[dir=rtl] input[type=email], html[dir=rtl] a[href^="tel:"], html[dir=rtl] a[href^="mailto:"] { direction: ltr; unicode-bidi: plaintext; }
/* RTL: floating controls move to the left edge so they never cover the start of the text */
html[dir=rtl] .to-top { right: auto; left: 24px; }
html[dir=rtl] .rail { right: auto; left: 0; border-radius: 0 16px 16px 0; }
html[dir=rtl] .rail > *:first-child { border-radius: 0 16px 0 0; }
html[dir=rtl] .rail > *:last-child { border-radius: 0 0 16px 0; }
html[dir=rtl] .rail .tip { right: auto; left: 100%; margin-right: 0; margin-left: 10px; translate: -8px -50%; }
html[dir=rtl] .rail > *:hover .tip, html[dir=rtl] .rail > *:focus-visible .tip { translate: 0 -50%; }
html[dir=rtl] .skip { left: auto; right: 16px; }
@media (max-width: 680px) { html[dir=rtl] .to-top { left: 16px; } }
html.i18n-switching body { opacity: .6; cursor: progress; transition: opacity .2s; }

/* Top bar: language selector highlighted */
.lang { align-items: center; gap: 4px; padding: 4px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); box-shadow: 0 0 0 3px rgba(168,195,234,.14); }
.lang button { padding: 3px 12px; color: #fff; background: rgba(255,255,255,.12); font-size: 12.5px; transition: background .25s, color .25s; }
.lang button:hover, .lang button:focus-visible { background: #fff; color: var(--navy); }

/* Footer: social icons sit under the intro text, newsletter further down */
.footer .social { margin-top: 24px; }
.footer .f-news { margin-top: 56px; }

/* "A member of" — smaller */
.brand-cc span { font-size: 6.5px; letter-spacing: .14em; }
.f-cc span { font-size: 7px; letter-spacing: .14em; }
@media (max-width: 680px) { .brand-cc span { font-size: 5.5px; letter-spacing: .12em; } }
html[lang=ar] .brand-cc span, html[lang=ar] .f-cc span { letter-spacing: 0; }
html[lang=ar] .brand-cc span { font-size: 8px; } html[lang=ar] .f-cc span { font-size: 8.5px; }

/* Inner-page banners: a deeper, full-width sweeping cut (the home page keeps its own shape) */
.banner:not(.hero-home) { --cut: clamp(80px, 11vw, 160px); border-radius: 0 0 0 100% / 0 0 0 var(--cut); }
.banner:not(.hero-home) .banner-grid { padding-top: 24px; padding-bottom: 28px; }
html[dir=rtl] .banner:not(.hero-home) { border-radius: 0 0 100% 0 / 0 0 var(--cut) 0; }

/* ===== Logo lockup (crisp version built from the supplied artwork) =====
   [globe] bird / Bennour Insurance & Reinsurance Development
   ───────────────────────────────────────────────
   A PART OF  |  C&C City & Commercial Insurance Group */
.brand-wrap { align-items: stretch; gap: 0; }
.brand { align-items: center; gap: 6px; }
.brand-mark { width: 48px; height: 50px; }
.brand-word { width: 93px; height: 50px; margin-top: 0; }
.brand-cc { margin: 5px 0 0; padding-top: 5px; border-top: 1px solid #d6dce8; justify-content: space-between; }
.brand-cc span { font-size: 6.5px; letter-spacing: .2em; color: #7d879c; }
.brand-cc span::after { display: none; }
.brand-cc img { height: 10.5px; width: auto; }
.f-brand { align-items: center; gap: 6px; margin-bottom: 0; }
.f-brand .m { width: 52px; height: 54px; } .f-brand .w { width: 100px; height: 54px; margin-top: 0; }
.f-cc { width: 158px; margin: 8px 0 22px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.22); justify-content: space-between; }
.f-cc span { font-size: 7px; letter-spacing: .2em; }
.f-cc span::after { display: none; }
.f-cc img { height: 11.5px; opacity: .9; }
.loader-mark { width: 92px; height: 96px; } .loader-word { width: 178px; height: 96px; }
@media (max-width: 680px) {
  .brand-mark { width: 40px; height: 42px; } .brand-word { width: 78px; height: 42px; }
  .brand-cc { margin-top: 4px; padding-top: 4px; } .brand-cc span { font-size: 5.5px; letter-spacing: .16em; } .brand-cc img { height: 9px; }
  .loader-mark { width: 69px; height: 72px; } .loader-word { width: 134px; height: 72px; }
}
/* The logo never mirrors in Arabic */
html[dir=rtl] .brand-wrap, html[dir=rtl] .brand, html[dir=rtl] .f-brand, html[dir=rtl] .loader-logo { direction: ltr; }
html[dir=rtl] .brand-cc, html[dir=rtl] .f-cc { direction: rtl; } /* Arabic reads "جزء من" first, on the right */
html[lang=ar] .brand-cc span { font-size: 7.5px; letter-spacing: 0; } html[lang=ar] .f-cc span { font-size: 8.5px; letter-spacing: 0; }
:root { --nav: 88px; }
@media (max-width: 680px) { :root { --nav: 76px; } }
/* Logo: vertical line between "A PART OF" and the C&C logo, centred in the gap */
.brand-cc > span, .f-cc > span { display: flex; align-items: center; flex: 1; }
.brand-cc > span::after, .f-cc > span::after { display: block; content: ""; flex: none; width: 1px; margin: 0 auto; vertical-align: 0; }
.brand-cc > span::after { height: 11px; background: #c3cad8; }
.f-cc > span::after { height: 12px; background: rgba(255,255,255,.35); }
@media (max-width: 680px) { .brand-cc > span::after { height: 9px; } }
/* Main menu: always one line (French labels are longer) */
.menu > li > a, .menu > li > button { white-space: nowrap; }
@media (max-width: 1360px) and (min-width: 1101px) { .menu > li > a, .menu > li > button { padding: 10px 11px; font-size: 14.5px; } }
/* Top bar on mid-size screens: drop the second number so everything fits on one line */
@media (max-width: 1320px) { .topbar-l .tb-sep, .topbar-l a + .tb-sep + a { display: none; } }

/* ===== Touch screens (phones, tablets): no mouse, so no hover ===== */
@media (hover: none) {
  /* details that otherwise only appear on mouse-over */
  .tile .arrow { opacity: 1; transform: none; }
  /* a light "press" when a card or link block is tapped */
  .inc, .box, .plan, .other, .seg, .event, .helpc, .doc, .office, .goal, .exp > div, .rn-card, .ind, .post, .tile, .logos li { -webkit-tap-highlight-color: transparent; }
  .inc:active, .box:active, .plan:active, .other:active, .seg:active, .event:active, .helpc:active, .doc:active, .office:active,
  .goal:active, .exp > div:active, .rn-card:active, .ind:active, .post:active, .tile:active, .logos li:active { transform: scale(.98); transition: transform .12s ease; }
  .btn:active { transform: scale(.97); }
}

/* ===== Banner animations on phones and tablets =====
   Inner pages: the animated emblem sits below the text, full size and fully visible, with its badge.
   Home page: the bird ring stays behind the title as a soft backdrop, but fully on screen. */
@media (max-width: 1100px) {
  .banner:not(.hero-home) .emblem { position: relative; right: auto; top: auto; width: min(250px, 66vw); max-width: none; margin: 26px auto 6px; opacity: 1; z-index: 1; }
  .banner:not(.hero-home) .emb-badge { display: flex; right: -8%; bottom: 6%; gap: 8px; padding: 6px 14px 6px 6px; font-size: 13px; }
  .banner:not(.hero-home) .emb-badge .hicon { --s: 34px; }
  .hero-home .emblem { right: 6px; top: 10px; width: 150px; opacity: .5; }
}
@media (max-width: 680px) {
  .banner:not(.hero-home) .emblem { width: min(220px, 62vw); margin-top: 22px; }
  .hero-home .emblem { width: 128px; right: 4px; }
}
/* Home banner: bigger city scene on tablets and phones (it zooms in, so buildings, cars and the crane appear larger) */
@media (max-width: 1100px) { .banner.hero-home { --sh: 230px; } }
@media (max-width: 680px) { .banner.hero-home { --sh: 200px; } .hero-home .emblem { width: 150px; } }

/* Logo tagline: "A C&C Group Company" under the BIRD logo, same size as "Reinsurance Development",
   starting under the word "bird"; C&C in the C&C logo colours */
.brand-group { display: block; margin: 1px 0 0 54px; font-size: 8.2px; line-height: 1.2; font-weight: 600; letter-spacing: .01em; color: #7d879c; white-space: nowrap; }
.f-group { margin: 6px 0 22px 58px; font-size: 8.8px; line-height: 1.2; font-weight: 600; letter-spacing: .01em; color: rgba(255,255,255,.72); white-space: nowrap; }
.brand-group .cc-c, .f-group .cc-c { color: #cd0a72; }
.brand-group .cc-a, .f-group .cc-a { color: #6e1470; }
@media (max-width: 680px) { .brand-group { margin-left: 46px; font-size: 6.9px; } }
html[dir=rtl] .brand-group, html[dir=rtl] .f-group { direction: rtl; text-align: left; }
html[lang=ar] .brand-group { font-size: 9px; } html[lang=ar] .f-group { font-size: 10px; }
/* Home banner on phones/tablets: the bird ring gets its own row above the text instead of covering the title */
@media (max-width: 1100px) {
  .hero-home .emblem { position: relative; right: auto; top: auto; order: -1; justify-self: start; width: 120px; margin: 0 0 -26px -6px; opacity: 1; z-index: 1; }
}
@media (max-width: 680px) { .hero-home .emblem { width: 104px; right: auto; } }
@media (max-width: 1100px) { html[dir=rtl] .hero-home .emblem { margin: 0 -6px -26px 0; } }

/* Motor page: modern floating banner panel (no curved cut) */
.banner:not(.hero-home) { margin: 16px 20px 20px; border-radius: 36px; padding-bottom: 48px; box-shadow: 0 40px 80px -48px rgba(13,27,62,.55); }
.banner:not(.hero-home) .banner-grid { padding-top: 40px; padding-bottom: 12px; }
@media (max-width: 1100px) { .banner:not(.hero-home) { margin: 12px 12px 0; border-radius: 28px; padding-bottom: 44px; } }
@media (max-width: 680px) { .banner:not(.hero-home) { margin: 10px 10px 12px; border-radius: 24px; padding-bottom: 32px; } }
html[dir=rtl] .banner:not(.hero-home) { border-radius: 36px; }

/* ===== Motor banner: brand-reveal visual ===== */
.mv-banner { background: radial-gradient(700px 460px at 82% 30%, rgba(120,170,240,.35), transparent 62%), linear-gradient(155deg, #3a6cc6 0%, #1d3a8a 58%, #12265e 100%); }
.banner .mv-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.mv-guides path { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 1; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: mvDraw 2.6s cubic-bezier(.6,0,.2,1) .3s forwards; }
.mv-guides path:nth-child(n+5) { stroke: rgba(255,255,255,.09); animation-delay: .7s; }
.mv-nodes circle { fill: #fff; opacity: 0; animation: mvNode .6s ease forwards; }
@keyframes mvDraw { to { stroke-dashoffset: 0; } }
@keyframes mvNode { from { opacity: 0; transform: scale(.2); } to { opacity: .7; transform: none; } }
.mv-nodes circle { transform-box: fill-box; transform-origin: center; }

.mv { position: relative; justify-self: end; align-self: center; width: 400px; height: 330px; z-index: 1; }
.mv-stream { position: absolute; right: -40px; top: -40px; width: 320px; height: 280px; overflow: visible; }
.mv-stream path { fill: none; } .mv-trail { stroke: rgba(210,228,255,.18); stroke-width: 1; stroke-dasharray: 400; stroke-dashoffset: 400; animation: mvDraw 2s ease .8s forwards; }
.mv-pulse { stroke: rgba(225,238,255,.9); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 60 520; stroke-dashoffset: 580; animation: mvFlow 3.2s linear infinite; }
@keyframes mvFlow { to { stroke-dashoffset: 0; } }

.mv .mv-card { position: absolute; left: 30px; top: 70px; width: 330px; padding: 26px 28px 28px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(5,14,40,.6), inset 0 1px 0 rgba(255,255,255,.4);
  animation: mvRise 1s cubic-bezier(.2,.8,.2,1) .4s both; }
@keyframes mvRise { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.mv-car { position: relative; width: 120px; height: 75px; margin-bottom: 18px; }
.mv-car svg { position: relative; width: 120px; height: 75px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; z-index: 1; }
.mv-car .mv-lamp { fill: #fff; stroke: none; filter: drop-shadow(0 0 4px #bfe0ff); }
/* headlight beam streaming out from the front of the car */
.mv-beam { position: absolute; left: 110px; top: 34px; width: 220px; height: 10px; border-radius: 10px; transform-origin: left center;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(170,215,255,.55) 35%, rgba(170,215,255,0)); filter: blur(1.5px); box-shadow: 0 0 18px 4px rgba(150,205,255,.35);
  animation: mvBeam 3.6s ease-in-out 1.2s infinite both; }
@keyframes mvBeam { 0% { opacity: 0; transform: scaleX(.1); } 25%, 70% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.05); } }
.mv-k { display: block; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.mv-h { display: block; margin-top: 8px; font-size: 26px; line-height: 1.15; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.mv-h em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: #bfe0ff; }
/* light sweep across the glass */
.mv-scan { position: absolute; top: -40%; left: -60%; width: 40%; height: 180%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); animation: mvScan 5s ease-in-out 1.6s infinite; }
@keyframes mvScan { 0% { left: -60%; } 45%, 100% { left: 140%; } }

.mv-tag { position: absolute; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mv-t1 { left: -10px; top: 18px; animation: mvRise .9s ease .9s both, mvBob 6s ease-in-out 2s infinite; }
.mv-t2 { right: 0; bottom: 6px; animation: mvRise .9s ease 1.1s both, mvBob 6s ease-in-out 3s infinite; }
@keyframes mvBob { 50% { transform: translateY(-8px); } }

@media (max-width: 1100px) {
  .mv { justify-self: center; width: 340px; height: 300px; margin: 18px auto 0; }
  .mv .mv-card { left: 10px; width: 300px; }
}
@media (max-width: 680px) {
  .mv { width: 300px; height: 280px; }
  .mv .mv-card { left: 0; top: 60px; width: 290px; padding: 22px; }
  .mv-h { font-size: 22px; }
  .mv-stream { right: -30px; width: 250px; height: 220px; }
  .mv-t1 { left: 0; top: 10px; }
}
html[dir=rtl] .mv { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .mv-beam, .mv-scan, .mv-pulse { animation-duration: 6s; } }

/* ===== Motor banner: animated road scene (9 s loop) ===== */
.rd { position: relative; justify-self: end; align-self: center; width: 540px; max-width: 100%; z-index: 1; }
.rd svg { display: block; width: 100%; height: auto; overflow: hidden; }
.rd-dash { animation: rdDash 9s linear infinite; }
.rd-car { transform-box: view-box; }
.rd-a { animation: rdCarA 9s cubic-bezier(.45,0,.25,1) infinite; }
.rd-b { animation: rdCarB 9s cubic-bezier(.45,0,.25,1) infinite; }
.rd-wheel { transform-box: fill-box; transform-origin: center; animation: rdWheel 9s cubic-bezier(.2,0,.3,1) infinite; }
.rd-brake { animation: rdBrake 9s steps(1) infinite; }
.rd-haz { opacity: 0; animation: rdHaz 9s linear infinite; }
.rd-haz circle { animation: rdBlink .7s steps(1) infinite; }
.rd-burst { opacity: 0; transform-box: fill-box; transform-origin: center; animation: rdBurst 9s ease-out infinite; }
.rd-burst path, .rd-burst circle { filter: drop-shadow(0 0 8px rgba(255,209,102,.8)); }
.rd-tri { opacity: 0; animation: rdTri 9s ease-out infinite; }
.rd-tag { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: #fff; white-space: nowrap; opacity: 0;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 40px -22px rgba(5,14,40,.7); }
.rd-t1 { left: 4%; top: 6%; animation: rdTag1 9s ease-out infinite; }
.rd-t2 { right: 2%; top: 26%; animation: rdTag2 9s ease-out infinite; }
.rd-ping { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #4ade80; }
.rd-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #4ade80; animation: live 1.6s infinite; }

@keyframes rdDash { 0% { transform: translateX(0); } 38%, 100% { transform: translateX(-240px); } }
@keyframes rdCarA { 0% { transform: translateX(30px); opacity: 0; } 6% { opacity: 1; } 24% { transform: translateX(30px); } 38% { transform: translateX(182px); } 41% { transform: translateX(170px); } 44%, 88% { transform: translateX(174px); opacity: 1; } 96%, 100% { transform: translateX(174px); opacity: 0; } }
@keyframes rdCarB { 0% { transform: translateX(300px); opacity: 0; } 6% { opacity: 1; } 38% { transform: translateX(300px); } 41% { transform: translateX(316px); } 44%, 88% { transform: translateX(312px); opacity: 1; } 96%, 100% { transform: translateX(312px); opacity: 0; } }
@keyframes rdWheel { 0% { transform: rotate(0); } 38%, 100% { transform: rotate(1080deg); } }
@keyframes rdBrake { 0% { opacity: .35; } 24% { opacity: 1; } 96% { opacity: .35; } }
@keyframes rdHaz { 0%, 45% { opacity: 0; } 47%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes rdBlink { 0% { opacity: 1; } 50% { opacity: .1; } }
@keyframes rdBurst { 0%, 37% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.15); } 50% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes rdTri { 0%, 50% { opacity: 0; transform: translate(150px, 266px); } 55%, 88% { opacity: 1; transform: translate(150px, 286px); } 94%, 100% { opacity: 0; transform: translate(150px, 286px); } }
@keyframes rdTag1 { 0%, 58% { opacity: 0; transform: translateY(12px); } 63%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
@keyframes rdTag2 { 0%, 68% { opacity: 0; transform: translateY(12px); } 73%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }

@media (max-width: 1100px) { .rd { justify-self: stretch; width: auto; max-width: 520px; margin: 16px auto 0; min-width: 0; } }
@media (max-width: 680px) { .rd-tag { font-size: 11.5px; padding: 7px 11px; } .rd-t2 { top: 22%; } }
html[dir=rtl] .rd { justify-self: start; direction: ltr; }

/* Motor page banner v3: full width with a soft convex curve along the bottom, layered blue gradient */
.banner:not(.hero-home) { margin: 0; box-shadow: none; padding-bottom: 96px;
  border-radius: 0 0 50% 50% / 0 0 70px 70px;
  background: radial-gradient(640px 420px at 85% 15%, rgba(140,190,255,.45), transparent 62%),
              radial-gradient(560px 380px at 8% 105%, rgba(10,24,70,.55), transparent 65%),
              linear-gradient(140deg, #6a9cf0 0%, #3c72d8 28%, #2552b4 52%, #1d3a8a 76%, #12265e 100%); }
html[dir=rtl] .banner:not(.hero-home) { border-radius: 0 0 50% 50% / 0 0 70px 70px; }
@media (max-width: 1100px) { .banner:not(.hero-home) { margin: 0; border-radius: 0 0 50% 50% / 0 0 44px 44px; padding-bottom: 70px; } }
@media (max-width: 680px) { .banner:not(.hero-home) { margin: 0; border-radius: 0 0 50% 50% / 0 0 30px 30px; padding-bottom: 52px; } }

/* …curve goes inward: square corners, and the white page arches up into the bottom of the banner */
.banner:not(.hero-home) { border-radius: 0; --arc: 140px; padding-bottom: calc(var(--arc) - 20px); }
html[dir=rtl] .banner:not(.hero-home) { border-radius: 0; }
.banner:not(.hero-home)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--arc); z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q50 0 100 100Z' fill='%23ffffff'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
/* Section tabs sit up on the curve as a floating capsule */
.subnav { margin-top: -74px; background: transparent; border-bottom: 0; z-index: 41; pointer-events: none; }
.subnav .wrap { pointer-events: auto; max-width: 1060px; height: 60px; padding: 0 10px 0 18px; border-radius: 999px; background: #fff;
  box-shadow: 0 18px 44px -18px rgba(13,27,62,.45), 0 0 0 1px rgba(13,27,62,.06); }
@media (max-width: 1100px) { .subnav { margin-top: -52px; } .subnav .wrap { margin: 0 16px; max-width: none; } }
@media (max-width: 680px) { .subnav { margin-top: -41px; } .subnav .wrap { margin: 0 12px; height: 52px; padding: 0 6px; } }

/* Retirement savings banner scene (shares .rd layout and .rd-tag look with the motor scene) */
.rt-wave { animation: rtWave 4s linear infinite; }
.rt-line { stroke-dasharray: 260; stroke-dashoffset: 260; animation: rtLine 9s ease-out infinite; }
.rt-sun { opacity: 0; animation: rtSun 9s ease-out infinite; }
.rt-beach { opacity: 0; animation: rtBeach 9s ease-out infinite; }
.rt-t1 { left: 4%; top: 4%; animation: rdTagAt50 9s ease-out infinite; }
.rt-t2 { right: 2%; top: 24%; animation: rdTagAt70 9s ease-out infinite; }
@keyframes rtWave { to { transform: translateX(-40px); } }
@keyframes rtLine { 0%, 46% { stroke-dashoffset: 260; opacity: 1; } 56%, 90% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rtSun { 0%, 58% { opacity: 0; transform: translateY(46px); } 68%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes rtBeach { 0%, 63% { opacity: 0; transform: translateY(8px); } 70%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes rdTagAt50 { 0%, 50% { opacity: 0; transform: translateY(12px); } 55%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes rdTagAt70 { 0%, 70% { opacity: 0; transform: translateY(12px); } 75%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* Retirement heading: "Prepare a retirement" on one line, "you'll enjoy." on the next */
body[data-page="retirement-savings"] .banner h1 { font-size: clamp(30px, 4.3vw, 64px); }
body[data-page="retirement-savings"] .banner h1 .line > span { white-space: nowrap; }
@media (max-width: 680px) { body[data-page="retirement-savings"] .banner h1 { font-size: 8.2vw; } }

/* Section-tab capsule: room for long labels and up to 8 tabs */
.subnav .wrap { max-width: 1240px; }
.subnav-links a { padding: 8px 12px; }
@media (max-width: 1300px) and (min-width: 1101px) { .subnav-links a { padding: 8px 10px; font-size: 14px; } .subnav .wrap { margin: 0 20px; width: auto; } }
@media (max-width: 1100px) { .subnav .wrap { width: auto; } }
/* Quote sections never wider than the screen; the step strip scrolls if its labels don't fit */
@media (max-width: 1100px) { .quote-grid { grid-template-columns: minmax(0, 1fr); } .quote-grid > * { min-width: 0; } .mq-steps { overflow-x: auto; scrollbar-width: none; } .mq-steps::-webkit-scrollbar { display: none; } }
/* product icon only at the start of the capsule (the banner already names the product) */
.subnav .prod { font-size: 0; gap: 0; padding-right: 12px; }
.subnav .prod .hicon { --s: 34px; font-size: 16px; }

/* soft, broad grey shade along the curve (no hard line) */
.banner:not(.hero-home)::after { filter: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M0 100 Q50 0 100 100Z'/%3E%3C/clipPath%3E%3Cfilter id='f' x='-10%25' y='-60%25' width='120%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='0.8 7'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 100 Q50 0 100 100Z' fill='%23ffffff'/%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M0 100 Q50 0 100 100' fill='none' stroke='%237c88a3' stroke-width='16' opacity='.6' filter='url(%23f)'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
@media (max-width: 1100px) { .banner:not(.hero-home) { border-radius: 0; --arc: 90px; padding-bottom: calc(var(--arc) + 10px); } }
@media (max-width: 680px) { .banner:not(.hero-home) { border-radius: 0; --arc: 60px; padding-bottom: calc(var(--arc) + 10px); } }

/* ===== Animated banner scenes (js/scenes.js) ===== */
.sc-spin, .sc-pulse, .hl-heart, .pp-umb, .pp-hearts path, .gr-grow, .gp-ring, .gp-check, .cn-top, .tr-ship { transform-box: fill-box; }
.sc-t1 { left: 2%; top: 2%; animation: scIn .8s ease .8s both, mvBob 6s ease-in-out 2s infinite; }
.sc-t2 { right: 0; top: 34%; animation: scIn .8s ease 1.4s both, mvBob 6s ease-in-out 3s infinite; }
@keyframes scIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sc-bob { animation: scBob 5s ease-in-out infinite; }
.sc-bob2 { animation: scBob 6s ease-in-out 1s infinite reverse; }
@keyframes scBob { 50% { transform: translateY(-9px); } }
.sc-spin { transform-origin: center; animation: scSpin .9s linear infinite; }
@keyframes scSpin { to { transform: rotate(360deg); } }
.sc-pulse { transform-origin: center; animation: scPulse 2.2s ease-out infinite; }
@keyframes scPulse { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.sc-drift { animation: scDrift 14s ease-in-out infinite alternate; } .sc-drift2 { animation: scDrift 18s ease-in-out infinite alternate-reverse; }
@keyframes scDrift { to { transform: translateX(40px); } }
.sc-flow { animation: scFlow 1.6s linear infinite; } @keyframes scFlow { to { stroke-dashoffset: -22; } }
/* travel */
/* home */
.hm-rain path { animation: hmRain 1.2s linear infinite; } @keyframes hmRain { from { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(34px); opacity: 0; } }
.hm-dome { animation: hmDome 3.2s ease-in-out infinite; } @keyframes hmDome { 50% { opacity: .55; } }
.hm-win { animation: hmWin 4s ease-in-out infinite; } @keyframes hmWin { 50% { opacity: .75; } }
.hm-smoke circle { animation: hmSmoke 3s ease-out infinite; } .hm-smoke circle + circle { animation-delay: 1.5s; }
@keyframes hmSmoke { from { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-26px) scale(1.4); opacity: 0; } }
/* health */
.hl-ecg { stroke-dasharray: 420; stroke-dashoffset: 420; animation: hlEcg 2.6s linear infinite; } @keyframes hlEcg { 70%, 100% { stroke-dashoffset: 0; } }
.hl-heart { transform-origin: center; animation: hlBeat 1.3s ease-in-out infinite; } @keyframes hlBeat { 15% { transform: scale(1.12); } 30% { transform: scale(.98); } 45% { transform: scale(1.08); } 60%, 100% { transform: none; } }
/* protection plan */
.pp-umb { transform-origin: 50% 100%; animation: ppOpen 9s ease-in-out infinite; } @keyframes ppOpen { 0% { transform: scaleX(.25) translateY(-14px); opacity: .6; } 18%, 90% { transform: none; opacity: 1; } 100% { transform: scaleX(.25) translateY(-14px); opacity: .6; } }
.pp-rain path { animation: hmRain 1.3s linear infinite; }
.pp-hearts path { transform-origin: center; animation: ppHeart 3.3s ease-out infinite; } @keyframes ppHeart { from { transform: translateY(10px) scale(.6); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-40px) scale(1); opacity: 0; } }
/* group retirement */
.gr-grow { transform-origin: 50% 100%; animation: grGrow 9s cubic-bezier(.2,.8,.2,1) infinite; } @keyframes grGrow { 0% { transform: scaleY(.15); } 30%, 90% { transform: none; } 100% { transform: scaleY(.15); } }
.gr-line { stroke-dasharray: 320; stroke-dashoffset: 320; animation: grLine 9s ease-out infinite; } @keyframes grLine { 0%, 25% { stroke-dashoffset: 320; } 45%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 320; } }
.gr-arrow { animation: grArrow 9s ease-out infinite; } @keyframes grArrow { 0%, 42% { opacity: 0; } 48%, 90% { opacity: 1; } 100% { opacity: 0; } }
/* group protection */
.gp-ring { transform-origin: center; animation: gpRing 3s ease-out infinite; } @keyframes gpRing { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }
.gp-check { transform-origin: center; animation: gpCheck 3s ease-in-out infinite; } @keyframes gpCheck { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* construction */
.cn-hook { animation: cnHook 6s ease-in-out infinite; } @keyframes cnHook { 0%, 10% { transform: translateY(-40px); } 55%, 70% { transform: translateY(14px); } 100% { transform: translateY(-40px); } }
.cn-top { transform-origin: 50% 100%; animation: cnTop 6s ease-in-out infinite; } @keyframes cnTop { 0%, 55% { opacity: 0; transform: scaleY(.3); } 65%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* transportation */
.tr-ship { transform-origin: 50% 100%; animation: trShip 4s ease-in-out infinite; } @keyframes trShip { 25% { transform: translateY(-3px) rotate(-1deg); } 75% { transform: translateY(2px) rotate(1deg); } }
.tr-route { animation: scFlow 1.4s linear infinite; }
.tr-wake { animation: hmWin 1.6s ease-in-out infinite; }
/* agriculture */
.ag-tractor { animation: agDrive 12s linear infinite; } @keyframes agDrive { from { transform: translateX(-140px); } to { transform: translateX(600px); } }
.ag-dust circle { animation: hmSmoke 1.4s ease-out infinite; }
.ag-sun { animation: scBob 7s ease-in-out infinite; }
/* automotive */
.au-lane { animation: auLane 1.4s linear infinite; } @keyframes auLane { to { transform: translateX(-60px); } }
.au-veh { animation: auDrive 10.2s linear infinite; } @keyframes auDrive { from { transform: translateX(-130px); } to { transform: translateX(600px); } }

/* Section-tab capsule: only as wide as its content (no empty gap before "Get a quote") */
@media (min-width: 1101px) {
  .subnav .wrap { width: fit-content; max-width: calc(100% - 40px); margin-left: auto; margin-right: auto; gap: 10px; }
  .subnav-links { flex: none; }
}
/* per-scene tag placement where the default would cover the artwork */
.sc-travel-insurance .sc-t2 { top: auto; bottom: 4%; right: 0; }
.sc-health-insurance .sc-t2, .sc-group-health .sc-t2, .sc-multi-risk .sc-t2, .sc-group-protection-plan .sc-t2 { top: 6%; right: 0; }
.sc-group-retirement .sc-t2 { top: 16%; }
/* travel: cloud layer drifts a little faster than the continents */
/* agriculture: slower drive for the larger tractor; exhaust puffs rise */
.ag-tractor { animation-duration: 16s; }
@keyframes agPuff { from { transform: translateY(0) scale(.6); opacity: .8; } to { transform: translateY(-18px) scale(1.4); opacity: 0; } }
.ag-dust circle { animation: agPuff 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.ag-dust circle:nth-child(2) { animation-delay: -.8s; }
/* Home banner: straight bottom edge (no cut), flock instead of the ring, V-formation crossing the sky */
.banner.hero-home, html[dir=rtl] .banner.hero-home { border-radius: 0; }
.emb-flock .flap { stroke: #fff; }
.emb-flock svg > g:nth-child(odd) .glide { animation-duration: 9s; }
.scene .migrate { animation: migrate 30s linear infinite; }
@keyframes migrate { from { transform: translate(-120px, 120px); } to { transform: translate(1720px, 30px); } }
html[dir=rtl] .scene .migrate { animation-direction: reverse; }
/* agriculture: grazing livestock dip their heads */
.ag-graze { transform-box: fill-box; transform-origin: 0% 50%; animation: agGraze 5s ease-in-out infinite; }
@keyframes agGraze { 0%, 45%, 100% { transform: rotate(0); } 55%, 85% { transform: rotate(28deg); } }
/* Home banner: rounded bottom corners */
.banner.hero-home, html[dir=rtl] .banner.hero-home { border-radius: 0 0 56px 56px; }
@media (max-width: 680px) { .banner.hero-home, html[dir=rtl] .banner.hero-home { border-radius: 0 0 32px 32px; } }
/* Home banner: same inward curve as the inner pages; the skyline sits just above the curve's peak */
.banner.hero-home, html[dir=rtl] .banner.hero-home { border-radius: 0; --arc: 140px; padding-bottom: calc(var(--sh) + var(--arc) * .5); }
.banner.hero-home .scene { bottom: calc(var(--arc) * .5 - 2px); }
.banner.hero-home::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--arc); z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M0 100 Q50 0 100 100Z'/%3E%3C/clipPath%3E%3Cfilter id='f' x='-10%25' y='-60%25' width='120%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='0.8 7'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 100 Q50 0 100 100Z' fill='%23ffffff'/%3E%3Cg clip-path='url(%23c)'%3E%3Cpath d='M0 100 Q50 0 100 100' fill='none' stroke='%237c88a3' stroke-width='16' opacity='.6' filter='url(%23f)'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
@media (max-width: 1100px) { .banner.hero-home, html[dir=rtl] .banner.hero-home { --arc: 90px; } }
@media (max-width: 680px) { .banner.hero-home, html[dir=rtl] .banner.hero-home { --arc: 60px; } }
/* Home: the road surface continues down to the curve, so no blue band shows under it */
.banner.hero-home .scene::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--arc) * .5); background: linear-gradient(#dfe4ec, #eef1f6); }
/* Home: no shade under the road — the banner ends flat at the road */
.banner.hero-home, html[dir=rtl] .banner.hero-home { padding-bottom: var(--sh); }
.banner.hero-home .scene { bottom: 0; }
.banner.hero-home::after, .banner.hero-home .scene::after { content: none; }
/* Phones/tablets: the flock beside the heading only adds an empty gap above the text; the skyline keeps its birds */
@media (max-width: 1100px) { .hero-home .emb-flock { display: none; } }

/* =========================================================
   Motion polish (design-engineering review)
   Faster hover/press responses, asymmetric menu timing, lighter reveals,
   hover motion limited to mouse devices, and a calmer reduced-motion mode.
   ========================================================= */
:root { --ease-press: cubic-bezier(.23, 1, .32, 1); }

/* Buttons: press feedback everywhere (not just touch), quicker hover fill that leaves faster than it arrives */
.btn { transition: color .25s var(--ease), border-color .25s var(--ease), opacity .3s, transform 160ms var(--ease-press); }
.btn:active { transform: scale(.97); }
.btn::before { transition: transform 250ms var(--ease); }
.btn:not(:hover)::before { transition-duration: 160ms; }

/* Home shortcut cards: hover responds in ~200ms, only the properties that change */
.tile { transition: background 200ms ease, color 200ms ease; }
.tile span { transition: color 200ms ease; }
.tile .arrow { transition: transform 200ms var(--ease), opacity 200ms var(--ease); }

/* Mega menu: opens in 200ms, gets out of the way in 150ms */
.mega { transition: opacity 150ms var(--ease), transform 150ms var(--ease), visibility 0s linear 150ms; }
.has-mega:hover .mega, .has-mega.open .mega, .has-mega:focus-within .mega { transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s; }

/* Banner heading: lines rise in 650ms with a 60ms stagger */
.banner .line > span { transition: transform 650ms var(--ease); }
.ready .banner .line:nth-child(2) > span { transition-delay: 60ms; }
.ready .banner .line:nth-child(3) > span { transition-delay: 120ms; }

/* Scroll and load reveals: shorter travel, quicker settle, tighter stagger */
.reveal { transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: var(--d, 0s); }
.fade { transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.in, .ready .fade { transform: none; }
.ready .f1 { transition-delay: 100ms; } .ready .f2 { transition-delay: 160ms; } .ready .f3 { transition-delay: 220ms; } .ready .f4 { transition-delay: 280ms; }

/* Touch screens: a tap must not leave hover motion stuck on (lifts, slides, fills, zooms) */
@media (hover: none) {
  .btn:hover::before { transform: scaleX(0); }
  .btn:hover svg.go, .link:hover svg, .cta-q-btn:hover svg, .tile:hover .arrow { transform: none; }
  .inc:hover, .box:hover, .other:hover, .chip:hover, .seg:hover, .social a:hover, .plan:hover, .ind:hover, .doc:hover, .helpc:hover,
  .f-top .f-contact a:hover, .event:hover, .exp > div:hover, .goal:hover, .office:hover, .logos li:hover, .rn-card:hover { transform: none; }
  .inc:hover .hicon .house, .inc:hover .hicon .glyph, .post:hover .post-cover svg.art, .post:hover .post-cover.has-img img,
  .promo:hover .promo-img img, .cc-node:hover .cc-dot, .cc-node.on:hover .cc-dot { transform: none; }
  .tile:hover { background: transparent; color: inherit; }
  .tile:hover span { color: var(--muted); }
  /* keep the tap "press" (declared after the resets so it wins) */
  .inc:active, .box:active, .plan:active, .other:active, .seg:active, .event:active, .helpc:active, .doc:active, .office:active,
  .goal:active, .exp > div:active, .rn-card:active, .ind:active, .post:active, .tile:active, .logos li:active { transform: scale(.98); }
  .btn:active { transform: scale(.97); }
}

/* Reduced motion: stop things travelling across the screen; keep gentle fades */
@media (prefers-reduced-motion: reduce) {
  .scene .drive, .scene .fly, .scene .cloud, .scene .migrate, .scene .jib, .scene .walk, .scene .bob, .scene .wave, .scene .smoke,
  .scene .sway, .scene .glide, .scene .flap, .emb-flock .glide, .emb-flock .flap { animation: none !important; }
  .reveal, .fade { transition: opacity 400ms ease; }
}

/* =========================================================
   Motion polish — all pages (design-engineering review, round 2)
   ========================================================= */

/* Search: 200ms in / 150ms out; opened from the keyboard (/ or Ctrl+K) it appears instantly */
.search { transition: opacity 150ms ease, visibility 0s linear 150ms; }
.search.open { transition: opacity 200ms ease, visibility 0s; }
.search-box { transition: transform 150ms var(--ease); }
.search.open .search-box { transition: transform 200ms var(--ease); }
.search.instant, .search.instant .search-box { transition: none !important; }

/* Pop-up (Call me back, etc.): 250ms in, snaps closed in 150ms; stays centred */
.modal { transition: opacity 150ms ease, visibility 0s linear 150ms; }
.modal.open { transition: opacity 250ms ease, visibility 0s; }
.modal-box { transition: transform 150ms var(--ease); }
.modal.open .modal-box { transition: transform 250ms var(--ease); }

/* Toast: quick rise + fade in, quicker exit */
.toast { opacity: 0; transition: translate 200ms var(--ease), opacity 200ms ease, visibility 0s linear 200ms; }
.toast.show { opacity: 1; transition: translate 300ms var(--ease), opacity 300ms ease, visibility 0s; }

/* FAQ: shorter open, answer fades in; icon turns in 200ms */
.qa .a { transition: grid-template-rows 250ms var(--ease); }
.qa .a > div { opacity: 0; transition: opacity 150ms ease; }
.qa.open .a > div { opacity: 1; transition: opacity 200ms ease 60ms; }
.qa .pm { transition: background 200ms ease, rotate 200ms var(--ease); }
.qa .pm::before, .qa .pm::after { transition: rotate 200ms var(--ease), background 200ms ease; }

/* Filters, chips: only the properties that change */
.filters button, .chips span { transition: background 200ms ease, color 200ms ease, border-color 200ms ease; }

/* Quote options: crisp selection — ring drawn with an inset shadow instead of animating border width */
.tq-zone span { transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease; }
.tq-zone span::before { transition: box-shadow 180ms var(--ease-press), border-color 180ms ease; }
.tq-zone input:checked + span::before { border: 2px solid #3c60a8; box-shadow: inset 0 0 0 3px #3c60a8; }

/* Checkbox tick grows from a visible size with a fade, never from nothing */
.xbox-tick::after { opacity: 0; transform: rotate(45deg) scale(.6); transition: transform 160ms var(--ease-press), opacity 160ms ease; }
.xbox input:checked + .xbox-in .xbox-tick::after { opacity: 1; transform: rotate(45deg) scale(1); }

/* Card hovers: respond in 250ms */
.inc, .box, .plan, .helpc, .office, .logos li, .seg { transition: transform 250ms var(--ease), box-shadow 250ms var(--ease); }
.other, .event { transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), border-color 200ms ease; }
.doc { transition: transform 250ms var(--ease), border-color 200ms ease; }
.ind, .rn-card { transition: transform 250ms var(--ease), background 200ms ease, border-color 200ms ease; }
.exp > div, .goal { transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), background 200ms ease; }
.hicon .house { transition: transform 250ms var(--ease), color 250ms ease; }

/* Blog/article artwork zoom: decorative, but no longer lagging a full second */
.post-cover svg.art, .post-cover.has-img img { transition: transform 600ms var(--ease); }

/* Footer links: slide and underline with transform instead of padding/width */
.footer ul a { display: inline-block; transition: color 200ms ease, transform 200ms var(--ease); }
.footer ul a:hover { padding-left: 0; transform: translateX(10px); }
.footer ul a::before { left: -10px; width: 6px; transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease); }
.footer ul a:hover::before { width: 6px; transform: scaleX(1); }
html[dir=rtl] .footer ul a:hover { transform: translateX(-10px); }
html[dir=rtl] .footer ul a::before { left: auto; right: -10px; transform-origin: right; }

/* Savings calculator: bars scale instead of resizing; marker settles faster */
.ts-bar-t span.b, .ts-bar-t span.a { width: 100%; transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.ts-mark { transition: left 250ms var(--ease); }

/* Coin emblem: a falling drop — an accelerating curve is right for gravity */
.emb-coin { animation-timing-function: cubic-bezier(.55, 0, 1, .45); }

/* Reduced motion: product-page scenes hold a single still frame (labels still fade in) */
@media (prefers-reduced-motion: reduce) {
  .rd svg, .rd svg * { animation-delay: -4s !important; animation-play-state: paused !important; }
  .scene .sway, .scene .glide, .scene .flap { animation: none !important; }
}

/* Home banner on phones: tighter rhythm so heading, quote box and skyline fit the first screen */
@media (max-width: 680px) {
  .hero-home .banner-grid { padding-top: 20px; padding-bottom: 6px; }
  .hero-home .eyebrow { font-size: 11px; letter-spacing: .14em; }
  .hero-home h1 { font-size: clamp(30px, 9vw, 36px); line-height: 1.05; margin-top: 12px; }
  .hero-home .lead { font-size: 14.5px; line-height: 1.55; margin-top: 12px; }
  .hero-home .qwidget { margin-top: 18px; padding: 6px; gap: 6px; border-radius: 18px; }
  .hero-home .qwidget label, .hero-home .qwidget .btn { min-height: 48px; }
  .hero-home .qwidget-note { margin-top: 8px; font-size: 12.5px; }
  .banner.hero-home { --sh: 170px; }
}
@media (max-width: 380px) {
  .hero-home .lead { font-size: 14px; }
  .banner.hero-home { --sh: 150px; }
}

/* Inner banners use the same colours as the home banner */
.banner:not(.hero-home), .banner.mv-banner { background: radial-gradient(700px 400px at 82% 14%, rgba(60,96,168,.55), transparent 62%), radial-gradient(600px 420px at 0% 100%, rgba(10,22,51,.6), transparent 60%), linear-gradient(160deg, #3c60a8 0%, #24448a 38%, #162f6b 70%, #0d1f4d 100%); }

/* Inner banners on phones: same tight rhythm as the home banner so the scene shows on the first screens */
@media (max-width: 680px) {
  .banner:not(.hero-home) .banner-grid { padding-top: 18px; }
  .banner:not(.hero-home) .crumbs { margin-bottom: 14px; font-size: 12.5px; gap: 6px; }
  .banner:not(.hero-home) .eyebrow { font-size: 11px; letter-spacing: .14em; }
  .banner:not(.hero-home) h1 { font-size: clamp(30px, 9vw, 36px); line-height: 1.05; margin: 12px 0 12px; }
  .banner:not(.hero-home) .lead { font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
  .banner:not(.hero-home) .banner-grid > * { min-width: 0; }
  .banner:not(.hero-home) .ctas { display: flex; flex-wrap: wrap; gap: 8px; }
  .banner:not(.hero-home) .ctas .btn { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 12px 14px; font-size: 14px; gap: 6px; }
  .banner:not(.hero-home) .ticks { margin-top: 16px; gap: 6px 14px; }
  .banner:not(.hero-home) .ticks li { font-size: 13px; }
  .banner:not(.hero-home) .rd { margin-top: 6px; }
}
/* very narrow phones: let the two buttons stack again rather than squeeze */
@media (max-width: 350px) { .banner:not(.hero-home) .ctas { flex-wrap: wrap; } .banner:not(.hero-home) .ctas .btn { flex-basis: 100%; } }

/* Reinsurance emblem: white "Re" on the navy core, gold ring turning slowly around it */
body[data-page="reinsurance"] .emb-re { fill: #fff; }
.emb-turn { transform-box: fill-box; transform-origin: center; animation: embTurn 14s linear infinite; }
@keyframes embTurn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .emb-turn { animation: none; } }

/* Ring-emblem banners on phones (reinsurance, about, contact, claims, news…): emblem sits close under the text,
   a little smaller, with its label centred beneath the ring so nothing hides behind the bottom bar */
@media (max-width: 680px) {
  .banner:not(.hero-home):not(.mv-banner) .banner-grid { row-gap: 8px; }
  .banner:not(.hero-home):not(.mv-banner) .emblem { width: min(210px, 58vw); margin: 0 auto 26px; }
  .banner:not(.hero-home):not(.mv-banner) .emb-badge { right: auto; left: 50%; bottom: -18px; transform: translateX(-50%); animation: none; white-space: nowrap; }
}

/* About · C&C group on phones/tablets: intro → animated ring → the card describing the lit line → figures */
@media (max-width: 1100px) {
  .cc-grid { row-gap: 0; }
  .cc-l { display: contents; }
  .cc-l > * { order: 3; }
  .cc-l > .cc-eyebrow, .cc-l > .cc-title, .cc-l > .lead { order: 0; }
  .cc-r { order: 1; margin-top: 18px; }
  .cc-l > .cc-card { order: 2; margin-top: 22px; }
}
@media (max-width: 680px) {
  .cc-r { margin-top: 8px; }
  .mv-card h3 { font-size: 21px; }
  .goal, .exp > div { padding: 24px 22px; }
}

/* Contact page on phones: compact contact cards — icon beside the text instead of above it */
@media (max-width: 680px) {
  .cards-contact { gap: 12px; }
  .cards-contact .cc { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 18px 16px; border-radius: 18px; }
  .cards-contact .cc .hicon { --s: 46px; grid-row: 1 / span 3; margin: 0; }
  .cards-contact .cc h3 { font-size: 16.5px; margin: 2px 0 2px; }
  .cards-contact .cc p { font-size: 14px; margin-bottom: 8px; }
  .cards-contact .cc .link { font-size: 14.5px; overflow-wrap: anywhere; }
}

/* Phones: form fields at 16px so iOS does not zoom the page when a field is tapped (all forms) */
@media (max-width: 680px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
}

/* Phones: smaller back-to-top button, tucked closer to the edge so it covers less content */
@media (max-width: 680px) {
  .to-top { width: 40px; height: 40px; right: 10px; }
  html[dir=rtl] .to-top { right: auto; left: 10px; }
}

/* Claims · steps on phones: a compact vertical timeline — circle beside the text, the line fills top to bottom */
@media (max-width: 680px) {
  .steps { gap: 22px; }
  .steps-line { display: block; top: 24px; bottom: 24px; left: 23px; right: auto; width: 2px; height: auto; }
  .steps-line i { background: linear-gradient(180deg, var(--sky), var(--navy)); transform: scaleY(0); transform-origin: top; }
  .steps.in .steps-line i { transform: scaleY(1); }
  html[dir=rtl] .steps-line { left: auto; right: 23px; }
  .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .step .n { grid-row: 1 / span 3; width: 48px; height: 48px; margin: 0; }
  .step .n svg { width: 20px; height: 20px; }
  .step small { margin-top: 2px; }
  .step h3 { margin: 2px 0 4px; font-size: 17px; }
  .step p { font-size: 14.5px; }
}

/* Quote page on phones/tablets: the form comes first; "how it works" and the callback card follow it */
@media (max-width: 1100px) {
  body[data-page="quote"] .quote-grid { row-gap: 36px; }
  body[data-page="quote"] .quote-grid > .form-card { order: -1; }
}

/* "Our solutions" lists on phones: compact rows — icon beside the name and one-line description */
@media (max-width: 680px) {
  .others { gap: 10px; }
  .others .other { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px; border-radius: 16px; }
  .others .other .hicon { --s: 44px; grid-row: 1 / span 2; margin: 0; }
  .others .other b { font-size: 15.5px; line-height: 1.3; align-self: end; margin-bottom: 3px; }
  .others .other > span:not(.hicon) { font-size: 13.5px; line-height: 1.4; align-self: start; }
}

/* Article lists on phones: compact rows — square thumbnail beside the reading time and title (featured post stays large) */
@media (max-width: 680px) {
  .posts { gap: 12px; }
  .posts .post { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; align-content: center; }
  .posts .post .post-cover { grid-row: 1 / span 2; width: 104px; aspect-ratio: 1 / 1; height: auto; margin: 0; border-radius: 14px; }
  .posts .post .post-cover .cat { display: none; }
  .posts .post .meta { font-size: 12px; margin: 4px 0 0; }
  .posts .post h3 { font-size: 15.5px; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .posts .post p, .posts .post .link, .posts .post.hide { display: none; }

  /* Category filters: one swipeable row instead of several wrapped rows */
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; scroll-padding-inline: 16px; }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }
}

/* Announcement banner: Bird × C&C logo plate with the UK and Tunisia flags */
.ann-plate { justify-self: end; align-self: center; position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; width: min(400px, 100%); padding: 34px 36px 32px; border-radius: 28px; background: #fff;
  box-shadow: 0 40px 80px -36px rgba(5,14,40,.6), 0 0 0 8px rgba(255,255,255,.1); }
.ann-flags { display: flex; gap: 10px; }
.ann-flags svg { width: 54px; height: 36px; border-radius: 6px; box-shadow: 0 6px 14px -6px rgba(5,14,40,.45); }
.ann-flags svg:first-child { width: 72px; }
.ann-bird { display: flex; align-items: center; gap: 8px; direction: ltr; }
.ann-bird img { height: 58px; width: auto; }
.ann-x { width: 70%; height: 1px; background: linear-gradient(90deg, transparent, #c9d3e6, transparent); }
.ann-cc { height: 42px; width: auto; }
@media (max-width: 1100px) { .ann-plate { justify-self: center; margin: 20px auto 6px; } }
@media (max-width: 680px) { .ann-plate { width: 100%; max-width: 320px; padding: 24px 22px; gap: 14px; } .ann-bird img { height: 46px; } .ann-cc { height: 34px; } }