/* WisdomXpedia — site styles. All brand values are CSS variables, overridden at runtime from the theme in the admin dashboard. */
:root {
  --c-primary: #0055BC; --c-primary-dark: #00234E; --c-navy: #071B33; --c-accent: #F69320; --c-cyan: #00D1FF; --c-lime: #C1FF72;
  --c-text: #334155; --c-heading: #00234E; --c-muted: #64748B; --c-bg: #FFFFFF; --c-bg-alt: #F0F5FA; --c-surface: #FFFFFF; --c-border: #DCE6F1;
  --f-heading: 'DM Serif Display', Georgia, serif; --f-body: 'Roboto', system-ui, sans-serif; --f-ui: 'Inter', system-ui, sans-serif; --f-logo: 'Oswald', sans-serif;
  --radius: 16px; --base: 17px; --space: 96px; --container: 1200px; --btn-radius: 999px;
  --shadow-sm: 0 1px 2px rgba(7, 27, 51, .06), 0 2px 8px rgba(7, 27, 51, .05);
  --shadow: 0 10px 30px -8px rgba(7, 27, 51, .18);
  --shadow-lg: 0 24px 60px -16px rgba(7, 27, 51, .35);
  --grad: linear-gradient(135deg, var(--c-cyan), var(--c-lime));
  --pad: clamp(1rem, 4vw, 2rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--base)/1.7 var(--f-body); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--f-heading); color: var(--c-heading); font-weight: var(--hw, 400); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }
h1 em, h2 em, .hl { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.bg-default .hl, .bg-alt .hl, .bg-tint .hl, .h1-dark .hl, .bg-default h2 em, .bg-alt h2 em, .h1-dark em, .cta h2 em { background: linear-gradient(135deg, var(--c-primary), #16A6E7); -webkit-background-clip: text; background-clip: text; }
.cta-box .hl, .cta-box h2 em { background: var(--grad); -webkit-background-clip: text; background-clip: text; }
p { margin: 0 0 1em; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 820px; margin-left: auto; margin-right: auto; }
.align-center { text-align: center; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: .6rem 1rem; z-index: 200; }
.skip:focus { left: 8px; top: 8px; }
.ico { flex: none; vertical-align: -.2em; }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 .98rem/1 var(--f-ui); padding: .95rem 1.6rem; border-radius: var(--btn-radius); border: 2px solid transparent; cursor: pointer; text-decoration: none !important; transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--c-accent); color: #1a1205; box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--c-accent) 70%, transparent); }
.btn-primary:hover { box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--c-accent) 85%, transparent); filter: brightness(1.05); }
.btn-outline { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn-outline:hover { background: var(--c-primary); color: #fff; }
.btn-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .55); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: #fff; color: var(--c-primary-dark); }
.btn-light { background: #fff; color: var(--c-primary-dark); }
.btn-sm { padding: .65rem 1.1rem; font-size: .88rem; }
.btn-lg { padding: 1.1rem 2rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }
.btn-row.center { justify-content: center; }
.center-row { display: flex; justify-content: center; margin-top: 2.4rem; }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .3s, box-shadow .3s, padding .3s; padding: .7rem 0; }
body[data-hero="0"] .site-header, .site-header.scrolled, body.nav-open .site-header { background: color-mix(in srgb, var(--c-navy) 94%, transparent); backdrop-filter: blur(12px); box-shadow: 0 6px 24px rgba(0, 0, 0, .22); padding: .35rem 0; }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 1400px; }
.brand img { height: 54px; width: auto; transition: height .3s; }
.scrolled .brand img { height: 46px; }
.nav ul { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.nav { display: flex; align-items: center; gap: 1rem; }
.nav-link { color: rgba(255, 255, 255, .88); font: 500 .94rem/1 var(--f-ui); padding: .8rem .85rem; display: inline-flex; align-items: center; gap: .3rem; border-radius: 8px; text-decoration: none !important; transition: color .2s, background .2s; }
.nav-link:hover, .nav-item.active > .nav-link { color: #fff; background: rgba(255, 255, 255, .1); }
.nav-item.active > .nav-link { box-shadow: inset 0 -2px 0 var(--c-accent); border-radius: 8px 8px 0 0; }
.nav-item { position: relative; }
.caret { transition: transform .2s; }
.sub { position: absolute; left: 0; top: 100%; min-width: 260px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); padding: .5rem; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s; }
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub { opacity: 1; visibility: visible; transform: none; }
.has-sub:hover .caret { transform: rotate(180deg); }
.sub a { display: block; padding: .65rem .9rem; color: var(--c-heading); border-radius: 10px; font: 500 .92rem var(--f-ui); text-decoration: none !important; }
.sub a:hover { background: var(--c-bg-alt); color: var(--c-primary); }
.burger { display: none; background: none; border: 0; color: #fff; padding: .4rem; cursor: pointer; }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; background: var(--c-navy); }
.hero-bg { position: absolute; inset: 0; background: var(--hero-img) center right / cover no-repeat; z-index: -2; }
.hero-home { min-height: max(100svh, 680px); display: flex; align-items: center; }
.hero-home .hero-bg { background-position: 72% center; animation: slow-zoom 24s ease-in-out infinite alternate; }
.hero-home::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(3, 22, 43, .94) 0%, rgba(3, 30, 56, .78) 38%, rgba(3, 30, 56, .12) 72%, transparent 100%); }
.hero-glow { position: absolute; width: 60vw; height: 60vw; left: -18vw; top: -22vw; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c-cyan) 22%, transparent), transparent 62%); z-index: -1; pointer-events: none; }
@keyframes slow-zoom { to { transform: scale(1.06); } }
.hero-inner { padding-top: 7.5rem; padding-bottom: 5rem; }
.hero-copy { max-width: 640px; }
.hero-page { padding: 9.5rem 0 4.6rem; }
.hero-page .hero-bg { background-position: center; }
.hero-page::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(3, 22, 43, calc(var(--ov, .7) + .2)) 0%, rgba(3, 30, 56, var(--ov, .7)) 55%, rgba(3, 30, 56, calc(var(--ov, .7) * .55)) 100%); }
.hero-page .hero-inner { padding: 0 var(--pad); }
.hero-page h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.hero h1 { color: #fff; margin-bottom: .35em; text-wrap: balance; }
.hero-sub { font: 400 clamp(1.05rem, 1.6vw, 1.28rem)/1.6 var(--f-ui); color: rgba(255, 255, 255, .86); max-width: 560px; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font: 600 .78rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 1rem; }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--c-accent); border-radius: 2px; }
.eyebrow-light { color: var(--c-cyan); }
.bg-dark .eyebrow { color: var(--c-cyan); }
.badges { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; list-style: none; padding: 0; margin: 2.2rem 0 0; font: 500 .9rem var(--f-ui); color: rgba(255, 255, 255, .85); }
.badges li { display: flex; align-items: center; gap: .45rem; } .badges .ico { color: var(--c-lime); }
.scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); color: #fff; opacity: .7; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 8px); } }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font: 500 .85rem var(--f-ui); margin-bottom: 1.1rem; color: rgba(255, 255, 255, .7); }
.crumbs a { color: rgba(255, 255, 255, .85); } .crumbs .cur { color: var(--c-cyan); }
.fade-up { opacity: 0; transform: translateY(26px); animation: up .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero-copy > :nth-child(1) { animation-delay: .05s; } .hero-copy > :nth-child(2) { animation-delay: .15s; } .hero-copy > :nth-child(3) { animation-delay: .27s; }
.hero-copy > :nth-child(4) { animation-delay: .39s; } .hero-copy > :nth-child(5) { animation-delay: .5s; }
@keyframes up { to { opacity: 1; transform: none; } }
.draft-flag { display: inline-block; background: var(--c-accent); color: #1a1205; padding: .3rem .8rem; border-radius: 99px; font: 600 .8rem var(--f-ui); }

/* ---------- sections ---------- */
.sec { padding: var(--space) 0; position: relative; }
.sec-tight { padding-top: calc(var(--space) * .6); padding-bottom: calc(var(--space) * .6); }
.bg-alt { background: var(--c-bg-alt); }
.bg-dark { background: radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--c-primary) 55%, transparent), transparent 60%), radial-gradient(900px 500px at 0% 110%, color-mix(in srgb, var(--c-cyan) 16%, transparent), transparent 60%), var(--c-navy); color: rgba(255, 255, 255, .84); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #fff; }
.sec-head { max-width: 760px; margin: 0 auto 3.2rem; text-align: center; }
.sec-head .eyebrow { justify-content: center; }
.lead { font-size: 1.12rem; color: var(--c-muted); }
.bg-dark .lead { color: rgba(255, 255, 255, .72); }
.prose { font-size: 1.05rem; } .prose h2, .prose h3 { margin-top: 1.6em; } .prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin-bottom: .45em; }
.prose blockquote { margin: 1.5rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--c-accent); background: var(--c-bg-alt); border-radius: 0 12px 12px 0; font-style: italic; }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose code { background: var(--c-bg-alt); padding: .1em .4em; border-radius: 5px; font-size: .9em; }
.prose hr { border: 0; border-top: 1px solid var(--c-border); margin: 2rem 0; }
.table-wrap { overflow-x: auto; margin: 1.4rem 0; border: 1px solid var(--c-border); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; } th, td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--c-border); } th { background: var(--c-bg-alt); font: 600 .85rem var(--f-ui); color: var(--c-heading); } tr:last-child td { border-bottom: 0; }
.empty { text-align: center; color: var(--c-muted); }

[data-reveal] { transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.js [data-reveal]:not(.in) { opacity: 0; transform: translateY(28px); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.5rem; text-align: center; }
.stat { padding: .5rem; } .stat + .stat { border-left: 1px solid var(--c-border); }
.stat-v { font: 400 clamp(2.6rem, 5vw, 3.8rem)/1 var(--f-heading); background: linear-gradient(135deg, var(--c-primary), var(--c-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-l { margin-top: .5rem; font: 500 .92rem var(--f-ui); color: var(--c-muted); }
.bg-dark .stat-l { color: rgba(255, 255, 255, .7); } .bg-dark .stat-v { background: var(--grad); -webkit-background-clip: text; background-clip: text; }

/* ---------- grids & cards ---------- */
.grid { display: grid; gap: 1.6rem; }
.cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.9rem; box-shadow: var(--shadow-sm); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s; color: var(--c-text); display: block; text-decoration: none !important; }
a.card:hover, .card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-border)); }
.card h3 { margin-bottom: .45em; } .card p, .card .ct { margin: 0 0 .8em; color: var(--c-text); font-size: .98rem; }
.card-ico { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; margin-bottom: 1.1rem; color: #fff; background: linear-gradient(135deg, var(--c-primary), #16A6E7); box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--c-primary) 70%, transparent); }
.card-ico.sm { width: 40px; height: 40px; border-radius: 12px; margin: 0; }
.card-num { display: block; font: 400 3rem/1 var(--f-heading); background: linear-gradient(135deg, var(--c-primary), var(--c-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .6rem; }
.card-link { display: inline-flex; align-items: center; gap: .4rem; font: 600 .9rem var(--f-ui); color: var(--c-primary); margin-top: .4rem; } .card:hover .card-link .ico { transform: translateX(4px); } .card-link .ico { transition: transform .2s; }
.card-plain { padding: 2.2rem; border-left: 4px solid var(--c-accent); } .card-plain p { font-size: 1.05rem; font-style: italic; }
.card-image { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-img { aspect-ratio: 16 / 10; background: center / cover no-repeat; position: relative; transition: transform .6s; } .card-image:hover .card-img { transform: scale(1.04); }
.card-image > .card-img { overflow: hidden; }
.card-badge { position: absolute; left: 1rem; bottom: -1.3rem; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--c-accent); color: #1a1205; box-shadow: var(--shadow); }
.card-body { padding: 2rem 1.6rem 1.7rem; flex: 1; display: flex; flex-direction: column; } .card-body .card-link { margin-top: auto; }
.card-image { overflow: hidden; }
.card-glass, .bg-dark .card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); color: rgba(255, 255, 255, .85); }
.bg-dark .card p, .bg-dark .card .ct { color: rgba(255, 255, 255, .8); }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split.img-left .split-media { order: -1; } .split.no-img { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
.split-media { margin: 0; position: relative; } .split-media img { width: 100%; border-radius: calc(var(--radius) * 1.4); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.split-media::before { content: ''; position: absolute; inset: 18px -18px -18px 18px; border-radius: calc(var(--radius) * 1.4); background: var(--grad); opacity: .35; z-index: -1; }
.img-left .split-media::before { inset: 18px 18px -18px -18px; }
.checks { list-style: none; padding: 0; margin: 1.2rem 0 0; } .checks li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .75rem; } .checks .ico { color: #fff; background: var(--c-primary); border-radius: 50%; padding: 3px; margin-top: .22em; width: 22px; height: 22px; }

/* ---------- steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 1.6rem; counter-reset: s; position: relative; }
.step { position: relative; padding-top: 4.4rem; } .step h3 { font-size: 1.2rem; } .step p, .step .ct { font-size: .96rem; margin: 0; }
.step-n { position: absolute; top: 0; left: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 400 1.5rem var(--f-heading); color: #fff; background: linear-gradient(135deg, var(--c-primary), #16A6E7); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-primary) 18%, transparent); z-index: 1; }
.bg-dark .step-n { background: var(--grad); color: var(--c-navy); box-shadow: 0 0 0 6px rgba(255, 255, 255, .1); }
.steps-horizontal .step:not(:last-child)::after { content: ''; position: absolute; top: 27px; left: 66px; right: -1.6rem; height: 2px; background: linear-gradient(90deg, var(--c-border), transparent); }
.bg-dark .steps-horizontal .step:not(:last-child)::after { background: linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .03)); }
.step-tag { position: absolute; top: 14px; left: 72px; font: 600 .78rem var(--f-ui); letter-spacing: .06em; color: var(--c-accent); }
.steps-vertical { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; } .steps-vertical .step::after { display: none; }

/* ---------- formula / quote / chips ---------- */
.formula { font: 400 clamp(1.7rem, 4.4vw, 3.3rem)/1.2 var(--f-heading); text-align: center; margin: 0 auto 2.8rem; padding: 2rem 1.5rem; border-radius: calc(var(--radius) * 1.5); background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 92%, #000), var(--c-primary-dark)); color: #fff; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; isolation: isolate; }
.formula::after { z-index: -1; content: ''; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c-cyan) 45%, transparent), transparent 70%); }
.bg-default .card-glass, .bg-alt .card-glass { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); backdrop-filter: none; }
.quote { max-width: 880px; margin: 0 auto; text-align: center; } .quote-ico { color: var(--c-accent); margin-bottom: 1rem; opacity: .9; }
.quote blockquote { margin: 0 0 1.6rem; font: 400 clamp(1.4rem, 2.9vw, 2.15rem)/1.4 var(--f-heading); color: inherit; font-style: italic; text-wrap: balance; }
.bg-default .quote blockquote, .bg-alt .quote blockquote { color: var(--c-heading); }
.quote figcaption { display: flex; flex-direction: column; gap: .2rem; font: 500 .95rem var(--f-ui); } .quote figcaption span { opacity: .7; font-size: .85rem; } .quote figcaption strong { color: var(--c-accent); }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.chips li { padding: .6rem 1.15rem; border-radius: 99px; background: var(--c-surface); border: 1px solid var(--c-border); font: 500 .92rem var(--f-ui); color: var(--c-heading); box-shadow: var(--shadow-sm); transition: .2s; }
.chips li:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); transform: translateY(-2px); }
.bg-alt .chips li { background: #fff; }

/* ---------- tiers ---------- */
.tiers { align-items: stretch; }
.tier { position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: calc(var(--radius) * 1.3); padding: 2.2rem 1.9rem; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: .35s; }
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.tier-name { font: 400 1.9rem var(--f-heading); color: var(--c-heading); } .tier-tag { font: 600 .8rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin: .2rem 0 1.4rem; }
.tier ul { list-style: none; padding: 0; margin: 0 0 1.8rem; flex: 1; } .tier li { display: flex; gap: .6rem; margin-bottom: .75rem; font-size: .96rem; } .tier li .ico { color: var(--c-primary); margin-top: .2em; }
.tier-hi { background: linear-gradient(160deg, var(--c-primary-dark), color-mix(in srgb, var(--c-primary) 85%, #000)); border-color: transparent; color: rgba(255, 255, 255, .88); transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.tier-hi .tier-name { color: #fff; } .tier-hi .tier-tag { color: var(--c-cyan); } .tier-hi li .ico { color: var(--c-lime); } .tier-hi:hover { transform: translateY(-16px); }
.tier-silver .tier-name { background: linear-gradient(90deg, #94a3b8, #475569); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier-gold .tier-name { background: linear-gradient(90deg, #fcd34d, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier-diamond .tier-name { background: linear-gradient(90deg, #67e8f9, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- faq ---------- */
.faq details { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; margin-bottom: .8rem; overflow: hidden; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border)); }
.faq summary { cursor: pointer; list-style: none; padding: 1.2rem 1.4rem; font: 600 1.02rem var(--f-ui); color: var(--c-heading); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; } .faq summary .ico { transition: transform .25s; color: var(--c-primary); } .faq details[open] summary .ico { transform: rotate(180deg); }
.faq-a { padding: 0 1.4rem 1.3rem; color: var(--c-text); }

/* ---------- posts & courses ---------- */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.2rem; }
.chip { font: 600 .85rem var(--f-ui); padding: .55rem 1.05rem; border-radius: 99px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-heading); cursor: pointer; transition: .2s; } .chip:hover, .chip.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.post-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; color: var(--c-text); text-decoration: none !important; box-shadow: var(--shadow-sm); transition: transform .35s, box-shadow .35s; }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-cover { aspect-ratio: 16 / 9; background: center / cover no-repeat; position: relative; } .post-card:hover .post-cover { filter: saturate(1.15); }
.post-type { position: absolute; left: 1rem; top: 1rem; background: rgba(7, 27, 51, .82); backdrop-filter: blur(6px); color: #fff; font: 600 .72rem var(--f-ui); letter-spacing: .08em; text-transform: uppercase; padding: .4rem .75rem; border-radius: 99px; }
.post-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; } .post-body h3 { font-size: 1.28rem; } .post-body p { font-size: .95rem; color: var(--c-text); flex: 1; }
.post-meta { font: 500 .8rem var(--f-ui); color: var(--c-muted); margin-bottom: .5rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; } .tag { font: 600 .72rem var(--f-ui); background: var(--c-bg-alt); color: var(--c-primary); padding: .3rem .65rem; border-radius: 99px; }
.course { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: .35s; } .course:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.course-cover { aspect-ratio: 16 / 9; background: center / cover no-repeat; position: relative; }
.course-badge { position: absolute; right: .9rem; top: .9rem; background: var(--c-accent); color: #1a1205; font: 700 .72rem var(--f-ui); padding: .35rem .7rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; }
.course-cat { position: absolute; left: .9rem; bottom: .9rem; background: rgba(7, 27, 51, .82); color: #fff; font: 600 .72rem var(--f-ui); padding: .35rem .7rem; border-radius: 99px; }
.course-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; } .course-body h3 { font-size: 1.22rem; } .course-body p { font-size: .94rem; }
.course-topics { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .88rem; } .course-topics li { display: flex; gap: .4rem; align-items: center; margin-bottom: .25rem; } .course-topics .ico { color: var(--c-primary); }
.course-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font: 500 .8rem var(--f-ui); color: var(--c-muted); margin: auto 0 1.1rem; } .course-meta span { display: inline-flex; gap: .3rem; align-items: center; }
.course .btn { align-self: flex-start; }

/* ---------- post page ---------- */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.post-article { max-width: 760px; } .post-tags { margin-top: 2.4rem; }
.aside-card { background: var(--c-bg-alt); border-radius: var(--radius); padding: 1.6rem; margin-bottom: 1.4rem; } .post-aside { position: sticky; top: 100px; }
.aside-card h4 { margin-top: 0; } .aside-card dl { margin: 0 0 1rem; } .aside-card dt { font: 600 .75rem var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); margin-top: .8rem; } .aside-card dd { margin: 0; font-weight: 500; color: var(--c-heading); }
.aside-cta { background: linear-gradient(160deg, var(--c-primary-dark), var(--c-primary)); color: #fff; } .aside-cta h4 { color: #fff; } .aside-cta p { color: rgba(255, 255, 255, .85); }
.notice { display: flex; gap: .8rem; padding: 1rem 1.2rem; border-radius: 12px; background: #FFF7E6; border: 1px solid #F8D9A0; color: #5b3d00; font-size: .93rem; margin-bottom: 1.8rem; } .notice .ico { color: var(--c-accent); margin-top: .15em; }
.notice-admin { background: #EAF3FF; border-color: #B8D4F5; color: #0b3a73; margin-bottom: 1.2rem; }

/* ---------- CTA ---------- */
.cta { padding: calc(var(--space) * .7) 0; }
.cta-box { position: relative; overflow: hidden; text-align: center; border-radius: calc(var(--radius) * 1.8); padding: clamp(2.6rem, 6vw, 4.6rem) clamp(1.4rem, 5vw, 4rem); color: #fff; background: radial-gradient(700px 320px at 90% 0, color-mix(in srgb, var(--c-cyan) 40%, transparent), transparent 70%), linear-gradient(135deg, var(--c-primary-dark), var(--c-primary)); box-shadow: var(--shadow-lg); }
.cta-box h2 { color: #fff; margin-bottom: .4em; } .cta-box p, .cta-box .cta-text { color: rgba(255, 255, 255, .85); max-width: 620px; margin: 0 auto; font-size: 1.1rem; }

/* ---------- forms / contact / booking ---------- */
.form label { display: block; font: 600 .86rem var(--f-ui); color: var(--c-heading); margin-bottom: 1rem; } .form label i { font-weight: 400; color: var(--c-muted); }
.form input, .form select, .form textarea, .news-form input { width: 100%; margin-top: .4rem; padding: .85rem 1rem; font: 400 1rem var(--f-body); color: var(--c-text); background-color: #fff; border: 1.5px solid var(--c-border); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form select:focus, .form textarea:focus, .news-form input:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 18%, transparent); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-msg { margin: .8rem 0 0; font: 500 .92rem var(--f-ui); min-height: 1.3em; } .form-msg.ok { color: #0a7a3f; } .form-msg.err { color: #b42318; }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.contact-info { background: linear-gradient(160deg, var(--c-primary-dark), var(--c-primary)); color: rgba(255, 255, 255, .88); border-radius: calc(var(--radius) * 1.4); padding: 2.4rem; box-shadow: var(--shadow-lg); } .contact-info h2 { color: #fff; font-size: 2rem; }
.contact-info ul { list-style: none; padding: 0; margin: 1.6rem 0; } .contact-info li { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.1rem; } .contact-info small { display: block; opacity: .65; font: 500 .75rem var(--f-ui); text-transform: uppercase; letter-spacing: .08em; } .contact-info a { color: #fff; } .contact-info a.btn-light { color: var(--c-primary-dark); } .contact-info .card-ico.sm { background: rgba(255, 255, 255, .14); box-shadow: none; }
.contact-form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: calc(var(--radius) * 1.4); padding: 2.4rem; box-shadow: var(--shadow); } .contact-form h2 { font-size: 2rem; }
.socials { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; } .social { font: 600 .78rem var(--f-ui); text-transform: capitalize; padding: .4rem .85rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 99px; color: #fff !important; } .social:hover { background: #fff; color: var(--c-primary-dark) !important; text-decoration: none; }
.booking { max-width: 960px; margin: 0 auto; }
.booking-frame, .calendly-host { width: 100%; border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.booking-link-card, .booking-form-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: calc(var(--radius) * 1.4); padding: clamp(1.6rem, 4vw, 3rem); box-shadow: var(--shadow); text-align: center; }
.booking-link-card .ico { color: var(--c-primary); margin-bottom: .5rem; } .booking-form-card { text-align: left; max-width: 720px; margin: 0 auto; } .booking-form-card h3 { font-size: 1.7rem; }
.booking-alt { text-align: center; font-size: .88rem; color: var(--c-muted); margin-top: .9rem; } .booking-loading { text-align: center; color: var(--c-muted); padding: 3rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--c-navy); color: rgba(255, 255, 255, .72); padding: 4.5rem 0 1.5rem; font-size: .95rem; position: relative; overflow: hidden; }
.site-footer::before { content: ''; position: absolute; width: 700px; height: 700px; right: -260px; top: -380px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c-primary) 50%, transparent), transparent 70%); pointer-events: none; }
.foot-top { display: grid; grid-template-columns: minmax(240px, 1.7fr) repeat(var(--fc, 3), minmax(0, 1fr)); gap: 2.4rem; position: relative; }
.foot-brand img { height: 70px; width: auto; margin-bottom: .8rem; } .foot-brand p { max-width: 300px; }
.site-footer h4 { font: 700 .8rem var(--f-ui); text-transform: uppercase; letter-spacing: .12em; color: #fff; margin-bottom: 1.1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: .55rem; } .site-footer a { color: rgba(255, 255, 255, .72); } .site-footer a:hover { color: var(--c-cyan); text-decoration: none; }
.news-form { display: flex; gap: .5rem; } .news-form input { margin: 0; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; padding: .7rem .9rem; } .news-form input::placeholder { color: rgba(255, 255, 255, .5); }
.foot-news .form-msg.ok { color: var(--c-lime); } .foot-news .form-msg.err { color: #fca5a5; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; position: relative; }
.foot-note { font-style: italic; opacity: .8; }
.h1-dark { color: var(--c-heading); }

/* ---------- admin bar (public pages, when signed in) ---------- */
#admin-bar { position: fixed; z-index: 150; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: .7rem; background: #0b1220; color: #fff; padding: .55rem .7rem .55rem 1rem; border-radius: 99px; box-shadow: var(--shadow-lg); font: 500 .85rem var(--f-ui); border: 1px solid rgba(255, 255, 255, .15); max-width: calc(100vw - 20px); flex-wrap: wrap; justify-content: center; }
.ab-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
.ab-btn { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .1); color: #fff !important; border: 0; padding: .5rem .9rem; border-radius: 99px; font: 600 .82rem var(--f-ui); cursor: pointer; text-decoration: none !important; }
.ab-btn:hover { background: rgba(255, 255, 255, .22); } .ab-save { background: var(--c-accent); color: #1a1205 !important; } .ab-save[disabled] { opacity: .4; cursor: default; }
#toast { position: fixed; left: 50%; top: 18px; transform: translate(-50%, -120%); background: #0b1220; color: #fff; padding: .8rem 1.3rem; border-radius: 12px; z-index: 400; font: 500 .92rem var(--f-ui); transition: transform .3s; box-shadow: var(--shadow-lg); max-width: 90vw; } #toast:not(.show) { visibility: hidden; opacity: 0; pointer-events: none; transition: transform .3s, opacity .3s, visibility 0s .3s; } #toast.show { transform: translate(-50%, 0); visibility: visible; opacity: 1; } #toast.err { background: #b42318; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .foot-top { grid-template-columns: repeat(var(--fc, 3), minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) {
  .site-header, .site-header.scrolled, body[data-hero="0"] .site-header, body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; } /* a backdrop-filter would trap the fixed mobile menu inside the header */
  .burger { display: block; }
  .nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px); background: var(--c-navy); flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 5.6rem 1.2rem 2rem; gap: 1rem; transform: translateX(105%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); overflow-y: auto; box-shadow: -20px 0 50px rgba(0, 0, 0, .4); }
  body.nav-open .nav { transform: none; } .burger { position: relative; z-index: 2; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; } .nav-item { width: 100%; } .nav-link { display: flex; width: 100%; padding: 1rem .6rem; font-size: 1.02rem; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; }
  .nav-item.active > .nav-link { box-shadow: none; color: var(--c-cyan); }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; box-shadow: none; padding: 0 0 .4rem .8rem; display: none; min-width: 0; } .has-sub.open .sub { display: flex; }
  .sub a { color: rgba(255, 255, 255, .78); } .sub a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .has-sub:hover .sub { display: none; } .has-sub.open:hover .sub, .has-sub.open .sub { display: flex; } .nav-cta { justify-content: center; }
  .split, .contact-grid, .post-layout { grid-template-columns: 1fr; } .split.img-left .split-media { order: 0; } .post-aside { position: static; }
  .cols-3 { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; } .steps-horizontal .step::after { display: none; }
  .hero-home::before { background: linear-gradient(180deg, rgba(3, 22, 43, .82), rgba(3, 30, 56, .72) 55%, rgba(3, 30, 56, .9)); } .hero-home .hero-bg { background-position: 68% center; }
  .tier-hi { transform: none; } .stat + .stat { border-left: 0; }
}
@media (max-width: 640px) {
  :root { --space: 64px; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .form .row { grid-template-columns: 1fr; } .foot-top { grid-template-columns: 1fr 1fr; }
  .hero-inner { padding-top: 6.5rem; } .hero-page { padding-top: 8rem; } .btn-row .btn { flex: 1 1 100%; } .stats { grid-template-columns: repeat(2, 1fr); }
  .contact-info, .contact-form { padding: 1.6rem; } .brand img { height: 46px; } .news-form { flex-direction: column; } .scroll-cue { display: none; }
  #admin-bar { left: 8px; right: 8px; transform: none; border-radius: 16px; bottom: 8px; padding: .45rem .6rem; gap: .35rem; font-size: .76rem; }
  #admin-bar .ab-btn { padding: .42rem .7rem; font-size: .74rem; } #admin-bar .ab-state { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .fade-up, .js [data-reveal]:not(.in) { opacity: 1; transform: none; } }
@media print { .site-header, .site-footer, #admin-bar, .scroll-cue { display: none !important; } }


/* =====================================================================
   v2 building blocks (used by both designs): section styling, background graphics,
   animation variants, slider, ticker, timeline, bento, rich text
   ===================================================================== */
#progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--c-primary), var(--c-cyan), var(--c-accent)); z-index: 300; pointer-events: none; }
main.page-in { animation: pagein .55s cubic-bezier(.2, .7, .2, 1); }
@keyframes pagein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ln { display: block; } .hero-sub .ln, .lead .ln, .ct .ln { margin-bottom: .25em; }
.prose p:empty { display: none; }
.hero-sub p { margin: 0 0 .5em; }

/* per-section controls */
.pt-none { padding-top: 0 !important; } .pt-small { padding-top: calc(var(--space) * .45) !important; } .pt-large { padding-top: calc(var(--space) * 1.4) !important; } .pt-xlarge { padding-top: calc(var(--space) * 1.9) !important; }
.pb-none { padding-bottom: 0 !important; } .pb-small { padding-bottom: calc(var(--space) * .45) !important; } .pb-large { padding-bottom: calc(var(--space) * 1.4) !important; } .pb-xlarge { padding-bottom: calc(var(--space) * 1.9) !important; }
.w-narrow > .container { max-width: 860px; } .w-wide > .container { max-width: 1440px; } .w-full > .container { max-width: none; }
.ta-left { text-align: left; } .ta-center { text-align: center; } .ta-right { text-align: right; }
.ta-center .btn-row { justify-content: center; } .ta-right .btn-row { justify-content: flex-end; }
.ta-left .sec-head, .ta-right .sec-head { margin-left: 0; margin-right: 0; } .ta-right .sec-head { margin-left: auto; } .ta-left .sec-head .eyebrow, .ta-right .sec-head .eyebrow { justify-content: flex-start; }
.sec.has-bg { background: var(--sec-bg); }
.sec.has-img { background: linear-gradient(rgba(7, 27, 51, var(--sec-ov, 0)), rgba(7, 27, 51, var(--sec-ov, 0))), var(--sec-img) center / cover no-repeat; }
.sec.img-dark, .sec.img-dark h2, .sec.img-dark h3, .sec.img-dark .lead, .sec.img-dark p { color: #fff; }
.bg-tint { background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 8%, #fff), color-mix(in srgb, var(--c-cyan) 6%, #fff)); }
.bg-brand { background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 62%, var(--c-cyan))); color: rgba(255, 255, 255, .9); }
.bg-brand h1, .bg-brand h2, .bg-brand h3, .bg-brand h4 { color: #fff; } .bg-brand .lead { color: rgba(255, 255, 255, .85); } .bg-brand .eyebrow { color: #fff; } .bg-brand .eyebrow::before { background: var(--c-accent); }
.bg-brand .card { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; } .bg-brand .card p, .bg-brand .card .ct { color: rgba(255, 255, 255, .88); }
@media (max-width: 760px) { .hide-m { display: none !important; } } @media (min-width: 761px) { .hide-d { display: none !important; } }

/* entrance animation variants */
.js [data-anim="fade"] [data-reveal]:not(.in) { transform: none; }
.js [data-anim="slide-left"] [data-reveal]:not(.in) { transform: translateX(-56px); }
.js [data-anim="slide-right"] [data-reveal]:not(.in) { transform: translateX(56px); }
.js [data-anim="zoom"] [data-reveal]:not(.in) { transform: scale(.9); }
.js [data-anim="none"] [data-reveal]:not(.in) { opacity: 1; transform: none; }
html[data-motion="subtle"] .js [data-reveal]:not(.in) { transform: translateY(10px); }
html[data-motion="off"] .js [data-reveal]:not(.in), html[data-motion="off"] .fade-up { opacity: 1; transform: none; animation: none; }
html[data-motion="off"] *, html[data-motion="off"] *::before { animation: none !important; transition-duration: .01s !important; }

/* background graphics */
.sec, .cta-box, .hero { position: relative; }
.sec > .container, .hero > .container { position: relative; z-index: 1; }
.has-decor { overflow: hidden; }
.decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; --dc: var(--c-primary); }
.decor.tone-accent { --dc: var(--c-accent); } .decor.tone-soft { --dc: color-mix(in srgb, var(--c-primary) 40%, #fff); }
.decor i { position: absolute; display: block; }
.d-dots { inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--dc) 40%, transparent) 1.7px, transparent 2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 92% 8%, #000, transparent 72%); mask-image: radial-gradient(ellipse 60% 70% at 92% 8%, #000, transparent 72%); }
.d-grid { inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--dc) 16%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--dc) 16%, transparent) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0, #000, transparent 75%); mask-image: radial-gradient(ellipse 80% 80% at 50% 0, #000, transparent 75%); }
.d-plus { inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 15v14M15 22h14' stroke='%230055BC' stroke-opacity='.2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000 80%); mask-image: linear-gradient(120deg, transparent 20%, #000 80%); }
.blob { border-radius: 50%; filter: blur(64px); opacity: .32; background: var(--dc); }
.blob.b1 { width: 440px; height: 440px; left: -140px; top: -160px; } .blob.b2 { width: 380px; height: 380px; right: -110px; top: 18%; background: var(--c-cyan); } .blob.b3 { width: 320px; height: 320px; left: 32%; bottom: -170px; background: var(--c-accent); opacity: .2; }
.motion .blob.b1 { animation: drift 15s ease-in-out infinite alternate; } .motion .blob.b2 { animation: drift 19s ease-in-out infinite alternate-reverse; } .motion .blob.b3 { animation: drift 23s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.12); } }
.ring { border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--dc) 30%, transparent); }
.ring.r1 { width: 460px; height: 460px; right: -140px; top: -150px; } .ring.r2 { width: 700px; height: 700px; right: -260px; top: -270px; } .ring.r3 { width: 940px; height: 940px; right: -380px; top: -390px; }
.motion .ring { animation: ringpulse 7s ease-in-out infinite; } .motion .ring.r2 { animation-delay: -2.3s; } .motion .ring.r3 { animation-delay: -4.6s; }
@keyframes ringpulse { 50% { transform: scale(1.06); opacity: .55; } }
.d-diag { right: -8%; top: -30%; width: 55%; height: 170%; background: linear-gradient(135deg, color-mix(in srgb, var(--dc) 14%, transparent), transparent 70%); transform: skewX(-18deg); } .d-diag.d2 { right: 30%; width: 14%; background: linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%); }
.d-aurora { inset: -25%; background: radial-gradient(40% 40% at 20% 30%, color-mix(in srgb, var(--c-cyan) 32%, transparent), transparent 70%), radial-gradient(36% 40% at 80% 20%, color-mix(in srgb, var(--dc) 30%, transparent), transparent 70%), radial-gradient(40% 40% at 60% 90%, color-mix(in srgb, var(--c-accent) 24%, transparent), transparent 70%); filter: blur(30px); }
.motion .d-aurora { animation: spin 40s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.d-waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 170px; } .d-waves .w1 { fill: color-mix(in srgb, var(--dc) 10%, transparent); } .d-waves .w2 { fill: color-mix(in srgb, var(--dc) 18%, transparent); }
.motion .d-waves { width: 200%; animation: wave 22s linear infinite; } @keyframes wave { to { transform: translateX(-50%); } }
.cta-box > .decor { border-radius: inherit; } .cta-box > :not(.decor) { position: relative; z-index: 1; }

/* hero split (visual is hidden in the classic design) */
.hero-visual { display: none; }
.float-card { position: absolute; display: flex; gap: .7rem; align-items: center; }

/* slider */
.slider { position: relative; max-width: 1040px; margin: 0 auto; overflow: hidden; border-radius: calc(var(--radius) * 1.5); border: 1px solid var(--c-border); box-shadow: var(--shadow); background: var(--c-surface); }
.slides { display: flex; transition: transform .75s cubic-bezier(.2, .7, .2, 1); } .slide { flex: 0 0 100%; min-width: 0; }
.slider-banner .slide { display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; } .sl-copy { padding: 2.6rem 2.6rem 3.2rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .sl-copy h3 { font-size: 1.9rem; } .sl-copy .ct { margin-bottom: 1.2rem; } .sl-media { background: center / cover no-repeat; min-height: 240px; }
.sl-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--c-primary); box-shadow: var(--shadow-sm); z-index: 2; transition: .2s; } .sl-btn:hover { background: var(--c-primary); color: #fff; }
.sl-prev { left: .8rem; } .sl-prev .ico { transform: rotate(90deg); } .sl-next { right: .8rem; } .sl-next .ico { transform: rotate(-90deg); }
.sl-dots { position: absolute; left: 0; right: 0; bottom: .9rem; display: flex; justify-content: center; gap: .5rem; z-index: 2; } .sl-dots button { width: 9px; height: 9px; border-radius: 99px; border: 0; background: color-mix(in srgb, var(--c-primary) 28%, transparent); cursor: pointer; padding: 0; transition: .3s; } .sl-dots button.on { width: 28px; background: var(--c-primary); }
.slider-quote { border: 0; box-shadow: none; background: transparent; max-width: 880px; } .sl-quote { padding: 1rem 4rem 3.2rem; text-align: center; } .sl-quote .quote-ico { color: var(--c-accent); margin-bottom: .6rem; }
.sl-quote blockquote { margin: 0 0 1.2rem; font: var(--hw, 400) clamp(1.25rem, 2.6vw, 1.85rem)/1.4 var(--f-heading); color: var(--c-heading); } .sl-quote cite { display: flex; flex-direction: column; font: normal 500 .95rem var(--f-ui); } .sl-quote cite strong { color: var(--c-primary); } .sl-quote cite span { color: var(--c-muted); font-size: .85rem; }

/* ticker */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; width: max-content; gap: 1rem; animation: mq var(--mqs, 32s) linear infinite; } .marquee:hover .mq-track { animation-play-state: paused; }
.mq-slow { --mqs: 55s; } .mq-medium { --mqs: 34s; } .mq-fast { --mqs: 18s; } @keyframes mq { to { transform: translateX(-25%); } }
.mq-item { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font: 600 .98rem var(--f-ui); color: var(--c-heading); padding: .75rem 1.4rem; } .mq-item .ico { color: var(--c-primary); }
.mq-chips .mq-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 99px; box-shadow: var(--shadow-sm); } .mq-plain .mq-item { font-size: 1.15rem; opacity: .85; } .mq-plain .mq-item::after { content: '•'; margin-left: 1.6rem; color: var(--c-accent); }
.sec-flush { overflow: hidden; }

/* timeline */
.timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; position: relative; } .timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--c-primary), var(--c-cyan)); opacity: .35; transform: translateX(-50%); }
.tl-item { position: relative; width: 50%; padding: 0 3.2rem 2.4rem 0; } .tl-item.tl-r { margin-left: 50%; padding: 0 0 2.4rem 3.2rem; }
.tl-dot { position: absolute; top: .5rem; right: -22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary); color: #fff; box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-primary) 16%, transparent); } .tl-r .tl-dot { left: -22px; right: auto; }
.tl-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow-sm); } .tl-card h3 { margin: .2rem 0 .3rem; font-size: 1.2rem; } .tl-card .ct { font-size: .96rem; }
.tl-label { font: 700 .78rem var(--f-ui); letter-spacing: .06em; color: var(--c-accent); }

/* bento */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: 1.1rem; }
.bt { border-radius: calc(var(--radius) * 1.3); padding: 1.6rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--c-border); background: var(--c-surface); transition: transform .35s, box-shadow .35s; color: var(--c-text); text-decoration: none !important; }
.bt:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .bt .card-ico { margin-bottom: auto; } .bt h3 { margin-bottom: .3em; font-size: 1.28rem; } .bt .ct { font-size: .95rem; }
.bt-2x1 { grid-column: span 2; } .bt-4x1 { grid-column: 1 / -1; min-height: 180px; } .bt-1x2 { grid-row: span 2; } .bt-2x2 { grid-column: span 2; grid-row: span 2; }
.bt.tone-brand { background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 58%, var(--c-cyan))); color: rgba(255, 255, 255, .92); border: 0; } .bt.tone-brand h3 { color: #fff; } .bt.tone-brand .card-ico { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.bt.tone-accent { background: var(--c-accent); color: #2b1a02; border: 0; } .bt.tone-accent h3 { color: #1a1205; } .bt.tone-accent .card-ico { background: rgba(255, 255, 255, .45); color: #1a1205; box-shadow: none; }
.bt.tone-tint { background: color-mix(in srgb, var(--c-primary) 8%, #fff); }
.bt.has-photo { background: linear-gradient(180deg, rgba(7, 27, 51, .05) 15%, rgba(7, 27, 51, .82)), var(--bt-img) center / cover; color: rgba(255, 255, 255, .9); border: 0; } .bt.has-photo h3 { color: #fff; }
.bt .card-link { position: absolute; right: 1.2rem; top: 1.2rem; margin: 0; }

/* misc */
.card-minimal { background: none; border: 0; box-shadow: none; padding: .4rem; display: flex; gap: 1rem; align-items: flex-start; } .card-minimal:hover { transform: none; box-shadow: none; border: 0; } .card-minimal .card-ico { margin: 0; flex: none; }
.card-ico.img { background: none; box-shadow: none; padding: 0; } .card-ico.img img { width: 100%; height: 100%; object-fit: contain; }
.stat-ico { display: inline-grid; color: var(--c-primary); margin-bottom: .4rem; }
.imgs-plain .split-media img { box-shadow: none; } .imgs-plain .split-media::before { display: none; }
.imgs-circle .split-media img { border-radius: 50%; aspect-ratio: 1; } .imgs-circle .split-media::before { border-radius: 50%; }
.imgs-tilted .split-media img { transform: rotate(-2.5deg); } .imgs-tilted .split-media::before { transform: rotate(3deg); }

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); } .bt-2x2, .bt-4x1 { grid-column: span 2; }
  .slider-banner .slide { grid-template-columns: 1fr; } .sl-media { order: -1; min-height: 200px; } .sl-quote { padding: 1rem 3.4rem 3rem; }
  .timeline::before { left: 22px; } .tl-item, .tl-item.tl-r { width: 100%; margin-left: 0; padding: 0 0 2rem 3.6rem; } .tl-dot, .tl-r .tl-dot { left: 0; right: auto; }
}
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .bt-2x1, .bt-2x2, .bt-4x1 { grid-column: auto; } .bt-1x2, .bt-2x2 { grid-row: auto; } .sl-quote { padding: 1rem 2.6rem 3rem; } .sl-copy { padding: 1.6rem 1.5rem 3rem; } }


/* =====================================================================
   Page-builder blocks: full-width slider, tabs, columns/containers, gallery, progress, spacer
   ===================================================================== */
.slider-xl { max-width: none; }
.sec-bleed { padding: 0; overflow: hidden; }
.slider-full { max-width: none; border: 0; border-radius: 0; box-shadow: none; background: var(--c-navy); --sh: 520px; }
.slider-h-short { --sh: 380px; } .slider-h-medium { --sh: 520px; } .slider-h-tall { --sh: 660px; } .slider-h-screen { --sh: 100svh; }
.slider-full .slide { position: relative; display: flex; align-items: center; min-height: var(--sh); background: center / cover no-repeat; }
.slide-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 27, 51, calc(var(--ov, .55) + .2)) 0%, rgba(7, 27, 51, var(--ov, .55)) 45%, rgba(7, 27, 51, calc(var(--ov, .55) * .25)) 100%); }
.slider-full .slide > .container { position: relative; z-index: 1; width: 100%; }
.slider-full .sl-copy { padding: 3.5rem 0 4.5rem; max-width: 640px; color: #fff; }
.slider-full .sl-copy h3 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; }
.slider-full .sl-copy .ct { color: rgba(255, 255, 255, .9); font-size: 1.12rem; }
.slider-full .eyebrow { background: rgba(255, 255, 255, .16); color: #fff; } .slider-full .eyebrow::before { background: var(--c-accent); }
.slider-full .sl-btn { background: rgba(255, 255, 255, .92); } .slider-full .sl-dots { bottom: 1.4rem; } .slider-full .sl-dots button { background: rgba(255, 255, 255, .45); } .slider-full .sl-dots button.on { background: #fff; }
.slider-full .sl-prev { left: 1.2rem; } .slider-full .sl-next { right: 1.2rem; }

/* tabs */
.tabs { display: grid; gap: 1.6rem; }
.tabs-vertical { grid-template-columns: minmax(200px, 270px) 1fr; align-items: start; }
.tab-list { display: flex; flex-wrap: wrap; gap: .4rem; } .tabs-vertical .tab-list { flex-direction: column; flex-wrap: nowrap; }
.tab { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.25rem; border: 0; background: none; font: 600 .98rem var(--f-ui); color: var(--c-muted); cursor: pointer; border-radius: 12px; text-align: left; transition: color .2s, background .2s, box-shadow .2s; }
.tab:hover { color: var(--c-primary); } .tab .ico { flex: none; }
.tab.on { color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 9%, #fff); }
.tabs-underline.tabs-horizontal .tab-list { border-bottom: 1px solid var(--c-border); gap: 0; } .tabs-underline.tabs-horizontal .tab { border-radius: 0; background: none; border-bottom: 3px solid transparent; margin-bottom: -1px; } .tabs-underline.tabs-horizontal .tab.on { background: none; border-bottom-color: var(--c-accent); }
.tabs-underline.tabs-vertical .tab { border-radius: 0 12px 12px 0; border-left: 3px solid transparent; } .tabs-underline.tabs-vertical .tab.on { border-left-color: var(--c-accent); }
.tabs-pills .tab { border-radius: 99px; } .tabs-pills .tab.on { background: var(--c-primary); color: #fff; }
.tabs-boxed .tab { border: 1px solid var(--c-border); background: #fff; } .tabs-boxed .tab.on { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }
.tab-panel { display: none; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: calc(var(--radius) * 1.2); padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: var(--shadow-sm); }
.tab-panel.on { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; animation: pagein .45s cubic-bezier(.2, .7, .2, 1); } .tab-panel.no-img.on { grid-template-columns: 1fr; }
.tp-copy h3 { font-size: 1.7rem; } .tp-copy .btn { margin-top: 1rem; } .tp-media { margin: 0; } .tp-media img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }

/* columns / containers */
.cols-blk { display: grid; gap: 2rem; } .cols-blk.gap-small { gap: 1rem; } .cols-blk.gap-large { gap: 3.5rem; }
.va-top { align-items: start; } .va-center { align-items: center; } .va-stretch { align-items: stretch; }
.col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .col > h2, .col > h3, .col > h4 { margin: 0; } .col .ct p:last-child { margin-bottom: 0; }
.col-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); }
.col-tint { background: color-mix(in srgb, var(--c-primary) 8%, #fff); border-radius: var(--radius); padding: 1.8rem; }
.col-brand { background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 62%, var(--c-cyan))); border-radius: var(--radius); padding: 1.8rem; color: rgba(255, 255, 255, .92); } .col-brand h2, .col-brand h3, .col-brand h4 { color: #fff; } .col-brand .card-ico { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }
.col.ta-center { align-items: center; text-align: center; } .col.ta-right { align-items: flex-end; text-align: right; }
.iconbox { display: flex; gap: 1rem; align-items: flex-start; } .iconbox .card-ico { margin: 0; flex: none; } .iconbox h4 { margin: .1rem 0 .25rem; }
.blk-img { margin: 0; } .blk-img img { width: 100%; border-radius: var(--radius); } .blk-img figcaption { font-size: .85rem; color: var(--c-muted); margin-top: .4rem; }
.blk-quote { margin: 0; padding: 1rem 1.3rem; border-left: 4px solid var(--c-accent); background: var(--c-bg-alt); border-radius: 0 12px 12px 0; font-style: italic; }
.blk-hr { border: 0; border-top: 1px solid var(--c-border); width: 100%; margin: .4rem 0; }
.blk-sp.sp-small { height: .6rem; } .blk-sp.sp-medium { height: 1.6rem; } .blk-sp.sp-large { height: 3.2rem; }
.sec-spacer { padding: 0; } .sec-spacer.sp-small { height: 24px; } .sec-spacer.sp-medium { height: 56px; } .sec-spacer.sp-large { height: 96px; } .sec-spacer.sp-xlarge { height: 160px; } .sec-spacer .container { height: 100%; display: flex; align-items: center; }

/* gallery + lightbox */
.gallery { display: grid; grid-template-columns: repeat(var(--gc, 3), 1fr); gap: 1rem; }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); cursor: zoom-in; box-shadow: var(--shadow-sm); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1rem .8rem; color: #fff; font: 600 .9rem var(--f-ui); background: linear-gradient(transparent, rgba(7, 27, 51, .8)); }
.lb { position: fixed; inset: 0; background: rgba(7, 27, 51, .9); z-index: 500; display: grid; place-items: center; padding: 1.5rem; cursor: zoom-out; animation: pagein .25s; } .lb figure { margin: 0; max-width: min(1100px, 100%); } .lb img { max-height: 80vh; max-width: 100%; border-radius: 12px; margin: 0 auto; } .lb figcaption { color: #fff; text-align: center; margin-top: .8rem; font: 500 .95rem var(--f-ui); }

/* progress */
.progress-list { display: grid; gap: 1.2rem; max-width: 780px; margin: 0 auto; }
.pg-top { display: flex; justify-content: space-between; font: 600 .95rem var(--f-ui); color: var(--c-heading); margin-bottom: .4rem; } .pg-top b { color: var(--c-primary); }
.pg-bar { height: 10px; background: color-mix(in srgb, var(--c-primary) 12%, #fff); border-radius: 99px; overflow: hidden; }
.pg-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-primary), var(--c-cyan)); border-radius: 99px; transition: width 1.5s cubic-bezier(.2, .7, .2, 1) .2s; } .pg-row.in .pg-bar i { width: var(--v); }
html[data-motion="off"] .pg-bar i { width: var(--v); }

@media (max-width: 860px) {
  .cols-blk { grid-template-columns: 1fr !important; } .cols-blk.rev-m { display: flex; flex-direction: column-reverse; }
  .tabs-vertical { grid-template-columns: 1fr; } .tabs-vertical .tab-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; } .tab { white-space: nowrap; }
  .tab-panel.on { grid-template-columns: 1fr; } .gallery { grid-template-columns: repeat(2, 1fr); }
  .slider-full .sl-copy { padding: 2.5rem 0 4rem; } .slider-full .sl-btn { display: none; }
}
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr; } }


/* =====================================================================
   Scroll effects: pinned section that following sections roll over, parallax, rolled edge
   ===================================================================== */
main > section:not(.fx-pin), .site-footer { position: relative; z-index: 1; background-color: var(--c-bg); }
main > .hero:not(.fx-pin) { background-color: var(--c-navy); }
.fx-pin { position: sticky; top: 0; z-index: 0; }
.fx-pin > .container, .fx-pin > .slider, .fx-pin > .hero-inner { transition: none; opacity: calc(1 - var(--cover, 0) * .75); transform: scale(calc(1 - var(--cover, 0) * .06)); transform-origin: 50% 40%; will-change: opacity, transform; }
.roll-edge { border-radius: 30px 30px 0 0; box-shadow: 0 -28px 60px -24px rgba(7, 27, 51, .35); margin-top: -30px; }
.sec.has-img.fx-parallax { background-attachment: scroll, fixed; }
@media (max-width: 900px), (hover: none) { .sec.has-img.fx-parallax { background-attachment: scroll, scroll; } }
@media (prefers-reduced-motion: reduce) { .fx-pin > .container, .fx-pin > .slider, .fx-pin > .hero-inner { opacity: 1; transform: none; } }
html[data-motion="off"] .fx-pin > .container { opacity: 1; transform: none; }


/* =====================================================================
   Mega menu + per-page header tone
   ===================================================================== */
.nav-item.has-mega { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--c-border); box-shadow: 0 34px 60px -30px rgba(7, 27, 51, .4); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .22s; padding: 1.8rem 0 2rem; }
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.open .mega { opacity: 1; visibility: visible; transform: none; }
.has-mega:hover .caret { transform: rotate(180deg); }
.mega-in { display: grid; grid-template-columns: 1fr minmax(0, 300px); gap: 2.4rem; align-items: stretch; } .mega-in:not(:has(.mg-promo)) { grid-template-columns: 1fr; }
.mg-cols { display: grid; grid-template-columns: repeat(var(--mc, 2), minmax(0, 1fr)); gap: 1.6rem 2rem; }
.mg-col h5 { font: 700 .74rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); margin: 0 0 .7rem; font-family: var(--f-ui); }
.mg-col ul { list-style: none; margin: 0; padding: 0; }
.mg-link { display: flex; gap: .8rem; align-items: flex-start; padding: .65rem .7rem; border-radius: 12px; text-decoration: none !important; color: var(--c-heading); transition: background .2s; }
.mg-link:hover { background: color-mix(in srgb, var(--c-primary) 7%, #fff); }
.mg-link b { display: block; font: 600 .95rem var(--f-ui); } .mg-link small { display: block; color: var(--c-muted); font: 400 .82rem/1.4 var(--f-ui); margin-top: .1rem; }
.mg-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--c-primary) 10%, #fff); color: var(--c-primary); transition: .2s; } .mg-link:hover .mg-ico { background: var(--c-primary); color: #fff; }
.mg-promo { border-radius: calc(var(--radius) * 1.1); padding: 1.5rem; display: flex; align-items: flex-end; color: #fff; background: linear-gradient(180deg, rgba(7, 27, 51, .15), rgba(7, 27, 51, .85)), var(--mg-img, linear-gradient(135deg, var(--c-primary), var(--c-cyan))) center / cover; min-height: 200px; }
.mg-promo h5 { font: 400 1.3rem var(--f-heading); color: #fff; margin: 0 0 .3rem; letter-spacing: 0; text-transform: none; } .mg-promo p { margin: 0 0 .9rem; font-size: .9rem; color: rgba(255, 255, 255, .9); }
@media (max-width: 980px) {
  .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 .6rem .6rem; display: none; } .mega::before { display: none; }
  .has-mega.open .mega { display: block; } .has-mega:hover .mega { display: none; } .has-mega.open:hover .mega { display: block; }
  .mega-in { display: block; padding: 0; } .mg-cols { grid-template-columns: 1fr; gap: .4rem; } .mg-col h5 { color: rgba(255, 255, 255, .55); margin-top: .6rem; }
  .mg-link { color: rgba(255, 255, 255, .88); padding: .5rem .3rem; } .mg-link small { color: rgba(255, 255, 255, .55); } .mg-link:hover { background: rgba(255, 255, 255, .08); } .mg-ico { background: rgba(255, 255, 255, .12); color: #fff; }
  .mg-promo { display: none; }
}
/* header text tone while transparent (set per page) */
body[data-hero="1"][data-htone="dark"]:not(.nav-open) .site-header:not(.scrolled) .nav-link, body[data-hero="1"][data-htone="dark"]:not(.nav-open) .site-header:not(.scrolled) .burger { color: var(--c-heading); }
body[data-hero="1"][data-htone="light"]:not(.nav-open) .site-header:not(.scrolled) .nav-link, body[data-hero="1"][data-htone="light"]:not(.nav-open) .site-header:not(.scrolled) .burger { color: #fff; }
body[data-hdrpad="1"] main > section:first-child { padding-top: calc(var(--space) + 84px); }
.nav .mega ul { display: block; margin: 0; padding: 0; list-style: none; } .nav .mega li { display: block; }
.nav .mega .mg-link { width: 100%; }


/* =====================================================================
   Header layout variables, mega menu sizing, downloads
   ===================================================================== */
.site-header { padding: var(--hdr-py, 11px) 0; }
body[data-hero="0"] .site-header, .site-header.scrolled, body.nav-open .site-header { padding: calc(var(--hdr-py, 11px) * .5) 0; }
.header-in { max-width: var(--hdr-w, 1400px); }
.brand img { height: var(--logo-h, 54px); } .scrolled .brand img { height: calc(var(--logo-h, 54px) * .85); }
html[data-design="corporate"] .brand img { height: var(--logo-h, 54px); } html[data-design="corporate"] .scrolled .brand img { height: calc(var(--logo-h, 54px) * .85); }
html[data-design="corporate"] .site-header { padding: var(--hdr-py, 11px) 0; }
html[data-design="corporate"] .site-header.scrolled, html[data-design="corporate"] body[data-hero="0"] .site-header, html[data-design="corporate"] body.nav-open .site-header { padding: calc(var(--hdr-py, 11px) * .5) 0; }

/* mega panel: padding / min and max height / width / alignment */
.mega { padding: var(--mp, 28px); min-height: var(--mmin, 0); max-height: var(--mh, none); overflow-y: auto; }
.mega .mega-in { max-width: none; padding: 0; margin: 0 auto; }
.mega.mw-full { left: 0; right: 0; } .mega.mw-full .mega-in { max-width: var(--hdr-w, 1400px); }
.mega.mw-header, .mega.mw-custom { right: auto; width: var(--mw); max-width: calc(100vw - 1.5rem); border: 1px solid var(--c-border); border-radius: 0 0 calc(var(--radius) * 1.2) calc(var(--radius) * 1.2); }
.mega.ma-center.mw-header, .mega.ma-center.mw-custom { left: 50%; translate: -50% 0; }
.mega.ma-left.mw-header, .mega.ma-left.mw-custom { left: max(.75rem, calc((100vw - var(--hdr-w, 1400px)) / 2 + var(--pad))); }
.mega.ma-right.mw-header, .mega.ma-right.mw-custom { left: auto; right: max(.75rem, calc((100vw - var(--hdr-w, 1400px)) / 2 + var(--pad))); }
@media (max-width: 980px) { .mega, .mega.mw-header, .mega.mw-custom { width: auto; max-width: none; translate: none; border: 0; border-radius: 0; min-height: 0; max-height: none; padding: 0 0 .6rem .6rem !important; } .mega.ma-left, .mega.ma-right, .mega.ma-center { left: auto; right: auto; } }

/* downloads */
.dl-grid { display: grid; gap: 1.5rem; } .dl-grid-cards { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } .dl-grid-list { grid-template-columns: 1fr; max-width: 880px; margin: 0 auto; }
.dl { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .35s, box-shadow .35s; } .dl:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.dl-list { flex-direction: row; } .dl-list .dl-cover { width: 190px; aspect-ratio: auto; flex: none; }
.dl-cover { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--c-primary), var(--c-cyan)) center / cover no-repeat; position: relative; }
.dl-type { position: absolute; left: .9rem; bottom: .9rem; background: rgba(7, 27, 51, .85); color: #fff; font: 700 .72rem var(--f-ui); letter-spacing: .08em; padding: .35rem .7rem; border-radius: 99px; } .dl-feat { position: absolute; right: .9rem; top: .9rem; background: var(--c-accent); color: #1a1205; font: 700 .72rem var(--f-ui); padding: .3rem .7rem; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; }
.dl-body { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; gap: .35rem; } .dl-body h3 { font-size: 1.22rem; margin: .3rem 0 0; } .dl-body p { font-size: .94rem; flex: 1; margin: 0 0 .6rem; }
.dl-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; } .dl-meta { font: 600 .8rem var(--f-ui); color: var(--c-muted); } .dl-note { color: var(--c-muted); font-size: .78rem; }
@media (max-width: 640px) { .dl-list { flex-direction: column; } .dl-list .dl-cover { width: 100%; aspect-ratio: 16 / 9; } }
.dl-modal-bg { position: fixed; inset: 0; background: rgba(7, 27, 51, .6); backdrop-filter: blur(4px); z-index: 600; display: grid; place-items: center; padding: 1rem; animation: pagein .25s; }
.dl-modal { position: relative; background: #fff; border-radius: calc(var(--radius) * 1.3); padding: 2rem; width: min(440px, 100%); box-shadow: var(--shadow-lg); } .dl-modal h3 { margin: 0 2rem .4rem 0; font-size: 1.5rem; } .dl-modal > p { color: var(--c-muted); margin: 0 0 1.2rem; }
.dl-x { position: absolute; right: .8rem; top: .8rem; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--c-bg-alt); color: var(--c-heading); cursor: pointer; display: grid; place-items: center; }


/* =====================================================================
   Section buttons/links and pagination
   ===================================================================== */
.sec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin-top: 2.4rem; } .sec-actions.al-center { justify-content: center; } .sec-actions.al-right { justify-content: flex-end; }
.btn-link { background: none; border: 0; padding: .4rem 0; color: var(--c-primary); box-shadow: none; border-radius: 0; font-weight: 600; } .btn-link:hover { background: none; color: var(--c-primary-dark); transform: none; text-decoration: none; } .btn-link .ico { transition: transform .2s; } .btn-link:hover .ico { transform: translateX(4px); }
.bg-dark .btn-link, .bg-brand .btn-link, .hero .btn-link { color: #fff; }
html[data-design="corporate"] .bg-dark .btn-link { color: var(--c-primary); } html[data-design="corporate"] .hero .btn-link { color: var(--c-primary); }
.pager { display: flex; justify-content: center; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: 2.4rem; }
.pager .pg-left { font-weight: 500; opacity: .75; margin-left: .35rem; }
.pn { min-width: 44px; height: 44px; padding: 0 .6rem; border-radius: 12px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-heading); font: 600 .95rem var(--f-ui); cursor: pointer; display: inline-grid; place-items: center; transition: .2s; }
.pn:hover:not([disabled]):not(.on) { border-color: var(--c-primary); color: var(--c-primary); } .pn.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; } .pn[disabled] { opacity: .4; cursor: not-allowed; }
.pn-nav .ico { transform: rotate(90deg); } .pn-next .ico { transform: rotate(-90deg); }

/* ---------- dropdowns: custom arrow, comfortably inset from the edge ---------- */
select, .form select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2.6rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.05rem center; background-size: 14px;
  cursor: pointer; text-overflow: ellipsis;
}
select:hover { border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border)); }
select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230055BC' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
select[multiple], select[size]:not([size="1"]) { background-image: none; padding-right: .8rem !important; }


/* =====================================================================
   Consent checkbox + cookie banner
   ===================================================================== */
.form label.consent, .consent { display: flex; gap: .65rem; align-items: flex-start; font: 400 .86rem/1.5 var(--f-body); color: var(--c-text); margin: .2rem 0 1rem; cursor: pointer; }
.form .consent input, .consent input { width: 18px; height: 18px; flex: none; margin: .15rem 0 0; padding: 0; accent-color: var(--c-primary); cursor: pointer; }
.consent a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.consent-sm { font-size: .78rem; margin: .6rem 0 0; color: rgba(255, 255, 255, .78); } .consent-sm a { color: var(--c-cyan); }
html[data-design="corporate"] .consent-sm { color: var(--c-muted); } html[data-design="corporate"] .consent-sm a { color: var(--c-primary); }
.news-form { flex-wrap: wrap; } .news-form .consent { flex-basis: 100%; }
.ck-wrap { position: fixed; z-index: 700; font-family: var(--f-ui); }
.ck-wrap.ck-bottom { left: 0; right: 0; bottom: 0; } .ck-wrap.ck-left { left: 1rem; bottom: 1rem; max-width: 420px; } .ck-wrap.ck-center { inset: 0; display: grid; place-items: center; background: rgba(7, 27, 51, .55); padding: 1rem; }
.ck { background: #fff; color: var(--c-text); border: 1px solid var(--c-border); border-radius: calc(var(--radius) * 1.1); padding: 1.3rem 1.4rem; box-shadow: 0 30px 70px -20px rgba(7, 27, 51, .45); animation: pagein .4s cubic-bezier(.2, .7, .2, 1); font-size: .9rem; line-height: 1.55; }
.ck-bottom .ck { border-radius: 0; border-width: 1px 0 0; max-width: none; display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.5rem; align-items: center; padding: 1.1rem max(1.4rem, calc((100vw - var(--container)) / 2 + 1.4rem)); } .ck-bottom .ck h4, .ck-bottom .ck p { grid-column: 1; } .ck-bottom .ck-btns { grid-column: 2; grid-row: 1 / span 2; } .ck-bottom .ck-cats { grid-column: 1 / -1; }
.ck-center .ck { max-width: 480px; width: 100%; }
.ck h4 { margin: 0 0 .3rem; font: 700 1.05rem var(--f-ui); color: var(--c-heading); letter-spacing: 0; } .ck p { margin: 0 0 .9rem; } .ck a { color: var(--c-primary); text-decoration: underline; }
.ck-btns { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ck-cats { margin: 0 0 1rem; border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; } .ck-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .7rem .9rem; cursor: pointer; } .ck-row + .ck-row { border-top: 1px solid var(--c-border); } .ck-row b { display: block; font-size: .88rem; color: var(--c-heading); } .ck-row small { color: var(--c-muted); font-size: .78rem; } .ck-row input { width: 20px; height: 20px; accent-color: var(--c-primary); flex: none; }
.admin-mode .ck-wrap { display: none; }
@media (max-width: 640px) { .ck-wrap.ck-left { left: .6rem; right: .6rem; bottom: .6rem; max-width: none; } .ck-bottom .ck { grid-template-columns: 1fr; } .ck-bottom .ck-btns { grid-column: 1; grid-row: auto; } .ck-btns .btn { flex: 1 1 auto; } }

.consent-optin { margin-top: -.3rem; } .consent .opt { font-style: normal; color: var(--c-muted); font-size: .8em; }

@media (max-width: 640px) { .brand img, html[data-design="corporate"] .brand img { height: var(--logo-hm, 44px); } .scrolled .brand img, html[data-design="corporate"] .scrolled .brand img { height: calc(var(--logo-hm, 44px) * .85); } }

/* previous / next navigation at the bottom of a post */
.post-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; }
.pp { display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: 1.1rem 1.3rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-heading); text-decoration: none !important; transition: transform .3s, box-shadow .3s, border-color .3s; min-width: 0; }
a.pp:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border)); }
.pp small { font: 600 .74rem var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary); } .pp b { font: 600 1rem/1.35 var(--f-ui); color: var(--c-heading); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pp-next { text-align: right; } .pp-all { text-align: center; align-items: center; min-width: 150px; background: var(--c-bg-alt); } .pp-empty { border: 0; background: none; box-shadow: none; }
@media (max-width: 760px) { .post-pager { grid-template-columns: 1fr; } .pp-empty { display: none; } .pp-next { text-align: left; } .pp-all { order: 3; } }


/* reader feedback (star rating) */
.fb-box { max-width: 720px; margin: 0 auto; text-align: center; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: calc(var(--radius) * 1.3); padding: 2rem 1.6rem; }
.fb-box h3 { margin: 0 0 .2rem; } .fb-avg { color: var(--c-muted); font: 500 .92rem var(--f-ui); margin: 0 0 1rem; min-height: 1.3em; }
.stars { border: 0; padding: 0; margin: 0 0 .6rem; display: inline-flex; flex-direction: row-reverse; gap: .15rem; } .sr { position: absolute; left: -9999px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { cursor: pointer; padding: .15rem; line-height: 0; color: #cbd5e1; transition: transform .15s, color .15s; } .stars label svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: #F59E0B; } .stars label:hover svg, .stars label:hover ~ label svg, .stars input:checked ~ label svg { fill: #F59E0B; } .stars label:hover { transform: scale(1.12); }
.stars input:focus-visible + label { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 8px; }
.fb-more { text-align: left; margin-top: 1rem; } .fb-more > label:not(.consent) { display: block; font: 600 .86rem var(--f-ui); color: var(--c-heading); margin-bottom: .9rem; } .fb-more label i { font-weight: 400; font-style: normal; color: var(--c-muted); }
.fb-more textarea, .fb-more input[type=email], .fb-more input[type=text]:not(.hp) { width: 100%; margin-top: .35rem; padding: .75rem .9rem; font: 400 .95rem var(--f-body); border: 1.5px solid var(--c-border); border-radius: 12px; background-color: #fff; } .fb-more textarea:focus, .fb-more input[type=email]:focus, .fb-more input[type=text]:not(.hp):focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 16%, transparent); }
.fb-more .btn { margin-top: .3rem; } .fb-box .form-msg { text-align: center; }

/* star rating shown on cards and post banner */
.rate-chip { display: inline-flex; align-items: center; gap: .25rem; margin-left: .55rem; padding: .1rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--c-accent) 16%, transparent); color: var(--c-heading); font-weight: 700; font-size: .78rem; vertical-align: middle; white-space: nowrap; }
.rate-chip svg { color: var(--c-accent); fill: var(--c-accent); } .rate-chip small { font-weight: 500; opacity: .75; }

/* images between paragraphs */
.prose figure.fig { margin: 1.8rem auto; width: var(--w, 100%); max-width: 100%; }
.prose figure.fig img { width: 100%; height: auto; margin: 0; display: block; }
.prose figcaption { font-size: .85rem; color: var(--c-muted); text-align: center; margin-top: .55rem; }
.prose figure.fig-left { float: left; margin: .35rem 1.6rem 1rem 0; } .prose figure.fig-right { float: right; margin: .35rem 0 1rem 1.6rem; }
.prose h2, .prose h3, .prose h4, .prose hr, .prose .table-wrap, .prose blockquote, .post-tags, .res-box { clear: both; }
@media (max-width: 640px) { .prose figure.fig-left, .prose figure.fig-right { float: none; margin: 1.5rem auto; width: 100%; } }

/* downloadable resources on a post */
.res-box { margin: 2.4rem 0 0; padding: 1.4rem 1.5rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg-alt); }
.res-box h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; font-size: 1.15rem; } .res-box h3 svg { color: var(--c-primary); }
.res-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.res-box li { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: calc(var(--radius) - 2px); flex-wrap: wrap; }
.res-type { flex: none; min-width: 52px; text-align: center; padding: .55rem .4rem; border-radius: 10px; background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: var(--c-primary); font-weight: 800; font-size: .72rem; letter-spacing: .06em; }
.res-main { flex: 1 1 220px; min-width: 0; display: grid; gap: .15rem; } .res-main b { color: var(--c-heading); } .res-main span { font-size: .92rem; } .res-main small { color: var(--c-muted); font-size: .78rem; }

/* per-section width controls (Appearance → exact content width, side padding, boxed section) */
.sec.has-cw > .container, .hero.has-cw > .container { max-width: var(--sec-cw); }
.has-px > .container { padding-left: var(--sec-px); padding-right: var(--sec-px); }
.sec-boxed { width: calc(100% - 2 * var(--pad, 1.25rem)); max-width: var(--sec-max, 1240px); margin-left: auto; margin-right: auto; border-radius: calc(var(--radius) + 6px); overflow: hidden; }
.sec-boxed.sec { margin-top: .6rem; margin-bottom: .6rem; }

/* newsletter section directly above the footer */
.news-band { background: linear-gradient(120deg, var(--c-primary-dark), var(--c-primary)); color: #fff; padding: 2.6rem 0; }
.news-band-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem 3rem; align-items: center; }
html body .news-band h3 { margin: 0 0 .4rem; color: #fff; font-size: 1.5rem; } html body .news-band p { margin: 0; color: rgba(255, 255, 255, .88); }
html body .news-band .news-form { display: flex; flex-wrap: wrap; gap: .6rem; }
html body .news-band .news-form input[type=email] { flex: 1 1 220px; margin: 0; padding: .85rem 1.1rem; background: #fff; color: #0b2545; border: 2px solid transparent; border-radius: 999px; }
html body .news-band .news-form input::placeholder { color: #6b7a90; }
html body .news-band .news-form .btn { flex: none; }
html body .news-band .consent, html body .news-band .consent a { color: rgba(255, 255, 255, .88); font-size: .82rem; } html body .news-band .consent a { text-decoration: underline; }
html body .news-band .form-msg { margin-top: .6rem; min-height: 1.2em; font-weight: 600; } html body .news-band .form-msg.ok { color: #c9ffd9; } html body .news-band .form-msg.err { color: #ffd9d3; }
@media (max-width: 860px) { .news-band-in { grid-template-columns: 1fr; } }

/* back-to-top arrow */
#to-top { position: fixed; right: 20px; bottom: 22px; z-index: 140; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--c-primary); color: #fff; box-shadow: var(--shadow-lg, 0 8px 24px rgba(11, 37, 69, .3)); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s, visibility 0s .25s, background .2s; }
#to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, background .2s; }
#to-top:hover { background: var(--c-accent); color: #1a1205; } #to-top:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
#to-top svg { width: 22px; height: 22px; stroke-width: 2.6; }
.admin-mode #to-top { display: none; }
@media (max-width: 640px) { #to-top { right: 14px; bottom: 76px; width: 42px; height: 42px; } }

/* website assistant (chatbot) */
#wx-chat { position: fixed; right: 20px; bottom: 22px; z-index: 160; font-family: var(--f-ui, inherit); }
.cb-launch { display: flex; align-items: center; gap: .6rem; height: 56px; padding: 0 1.2rem 0 1rem; border: 0; border-radius: 999px; cursor: pointer; background: var(--c-accent); color: #1a1205; font: 700 .95rem var(--f-ui, inherit); box-shadow: 0 10px 28px rgba(11, 37, 69, .28); transition: transform .2s, box-shadow .2s; }
.cb-launch:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(11, 37, 69, .34); } .cb-launch:focus-visible, .cb-x:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }
.cb-launch-ico { display: grid; place-items: center; } .cb-launch-ico svg { stroke-width: 2.2; }
#wx-chat.open .cb-launch { display: none; }
.cb-panel { position: absolute; right: 0; bottom: 0; width: min(380px, calc(100vw - 24px)); height: min(580px, calc(100vh - 40px)); display: flex; flex-direction: column; background: #fff; color: var(--c-text); border: 1px solid var(--c-border); border-radius: 18px; box-shadow: 0 24px 60px rgba(11, 37, 69, .32); overflow: hidden; }
.cb-panel[hidden] { display: none; }
.cb-head { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; background: linear-gradient(120deg, var(--c-primary-dark), var(--c-primary)); color: #fff; }
.cb-head b { display: block; font: 700 1rem var(--f-ui, inherit); } .cb-head small { opacity: .85; font-size: .76rem; }
.cb-av { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: grid; place-items: center; flex: none; }
.cb-x { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; display: grid; place-items: center; } .cb-x:hover { background: rgba(255, 255, 255, .3); }
.cb-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: var(--c-bg-alt); }
.cb-m { max-width: 88%; padding: .65rem .85rem; border-radius: 14px; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.cb-bot { align-self: flex-start; background: #fff; border: 1px solid var(--c-border); border-bottom-left-radius: 4px; } .cb-user { align-self: flex-end; background: var(--c-primary); color: #fff; border-bottom-right-radius: 4px; }
.cb-m a:not(.cb-btn) { color: var(--c-primary); text-decoration: underline; } .cb-user a { color: #fff; }
.cb-btns { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.cb-btn { display: inline-block; padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid var(--c-primary); color: var(--c-primary) !important; font-weight: 600; font-size: .85rem; text-decoration: none !important; background: #fff; } .cb-btn:hover { background: color-mix(in srgb, var(--c-primary) 10%, #fff); }
.cb-btn.cb-primary { background: var(--c-accent); border-color: var(--c-accent); color: #1a1205 !important; }
.cb-opts { display: grid; gap: .45rem; margin-top: .6rem; }
.cb-opt { text-align: left; padding: .55rem .8rem; border: 1.5px solid var(--c-border); border-radius: 12px; background: #fff; color: var(--c-text); cursor: pointer; font: 500 .88rem var(--f-ui, inherit); } .cb-opt:hover:not(:disabled) { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 8%, #fff); } .cb-opt:disabled { opacity: .55; cursor: default; }
.cb-quick { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem 0; background: #fff; } .cb-quick:empty { display: none; }
.cb-quick button { padding: .4rem .8rem; border: 1.5px solid var(--c-border); border-radius: 999px; background: #fff; color: var(--c-primary); cursor: pointer; font: 600 .8rem var(--f-ui, inherit); } .cb-quick button:hover { border-color: var(--c-primary); }
.cb-form { display: flex; gap: .5rem; padding: .7rem 1rem; background: #fff; } .cb-form input { flex: 1; min-width: 0; padding: .65rem .95rem; border: 1.5px solid var(--c-border); border-radius: 999px; font: 400 .92rem var(--f-body, inherit); background: #fff; color: var(--c-text); } .cb-form input:focus { outline: 0; border-color: var(--c-primary); }
.cb-form button { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--c-primary); color: #fff; cursor: pointer; display: grid; place-items: center; } .cb-form button:hover { background: var(--c-primary-dark); }
.cb-note { margin: 0; padding: 0 1rem .7rem; background: #fff; font-size: .68rem; line-height: 1.4; color: var(--c-muted); }
.cb-lead { display: grid; gap: .45rem; margin-top: .6rem; } .cb-lead input, .cb-lead textarea { width: 100%; padding: .55rem .75rem; border: 1.5px solid var(--c-border); border-radius: 10px; font: 400 .88rem var(--f-body, inherit); background: #fff; color: var(--c-text); } .cb-lead .consent { font-size: .74rem; line-height: 1.35; } .cb-lead .consent input { width: auto; margin-right: .4rem; }
.cb-send { padding: .6rem 1rem; border: 0; border-radius: 999px; background: var(--c-accent); color: #1a1205; font: 700 .9rem var(--f-ui, inherit); cursor: pointer; } .cb-send:disabled { opacity: .6; } .cb-err { margin: 0; color: #b42318; font-size: .8rem; min-height: 0; } .cb-ok { margin: .4rem 0 0; color: #0a7a3f; font-weight: 700; }
.cb-typing { display: inline-flex; gap: 4px; padding: 3px 0; } .cb-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-muted); animation: cbDot 1s infinite ease-in-out; } .cb-typing i:nth-child(2) { animation-delay: .15s; } .cb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cbDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
html[data-motion="off"] .cb-typing i { animation: none; }
.admin-mode #wx-chat { display: none; }
body.has-chat #to-top { bottom: 92px; }
@media (max-width: 640px) {
  #wx-chat { right: 12px; bottom: 14px; } .cb-launch { width: 56px; padding: 0; justify-content: center; } .cb-launch-label { display: none; }
  .cb-panel { position: fixed; right: 8px; left: 8px; bottom: 8px; width: auto; height: min(78vh, 640px); }
  body.has-chat #to-top { right: 14px; bottom: 82px; }
}

/* built-in scheduler (Calendly-style) */
.sched-wrap { max-width: 1040px; margin: 0 auto; background: #fff; border: 1px solid var(--c-border); border-radius: 18px; box-shadow: 0 16px 44px rgba(11, 37, 69, .1); overflow: hidden; }
.sched { display: grid; grid-template-columns: 270px minmax(0, 1fr) 230px; min-height: 420px; }
.sched-info { padding: 1.6rem; border-right: 1px solid var(--c-border); background: var(--c-bg-alt); }
.sched-info h3 { margin: 0 0 .8rem; font-size: 1.25rem; }
.sched-topic { display: block; font-weight: 600; color: var(--c-heading); font-size: .92rem; } .sched-topic select { width: 100%; margin-top: .45rem; padding: .7rem .8rem; border: 1.5px solid var(--c-border); border-radius: 10px; background-color: #fff; font: 500 .95rem var(--f-body, inherit); color: var(--c-text); }
.sched-meta { display: flex; gap: .55rem; align-items: flex-start; margin: .8rem 0 0; font-size: .9rem; color: var(--c-text); } .sched-meta svg { flex: none; color: var(--c-primary); margin-top: 2px; }
.sched-err { margin: 1rem 0 0; color: #b42318; font-weight: 600; font-size: .9rem; }
.sched-cal { padding: 1.4rem; } .sched-times { padding: 1.4rem 1.2rem; border-left: 1px solid var(--c-border); max-height: 480px; overflow-y: auto; }
.sched-times h4 { margin: 0 0 .8rem; font-size: 1rem; }
.sched-hint { display: grid; place-items: center; text-align: center; gap: .6rem; min-height: 200px; color: var(--c-muted); } .sched-hint svg { color: var(--c-primary); opacity: .6; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; } .cal-head b { font-size: 1.05rem; color: var(--c-heading); }
.cal-nav { width: 38px; height: 38px; border: 1.5px solid var(--c-border); border-radius: 50%; background: #fff; color: var(--c-primary); cursor: pointer; display: grid; place-items: center; } .cal-nav svg { transform: rotate(90deg); } .cal-next svg { transform: rotate(-90deg); } .cal-nav:disabled { opacity: .35; cursor: default; } .cal-nav:not(:disabled):hover { background: color-mix(in srgb, var(--c-primary) 10%, #fff); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.cal-wd { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); padding: .3rem 0; }
.cal-day { aspect-ratio: 1; max-height: 50px; border: 0; border-radius: 50%; background: transparent; font: 500 .95rem var(--f-body, inherit); color: #a0adbd; cursor: default; }
.cal-day.avail { background: color-mix(in srgb, var(--c-primary) 11%, #fff); color: var(--c-primary); font-weight: 700; cursor: pointer; } .cal-day.avail:hover { background: color-mix(in srgb, var(--c-primary) 22%, #fff); }
.cal-day.sel, .cal-day.sel:hover { background: var(--c-primary); color: #fff; } .cal-day:focus-visible, .slot:focus-visible, .cal-nav:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.slots { display: grid; gap: .55rem; } .slot { padding: .7rem; border: 1.5px solid var(--c-primary); border-radius: 10px; background: #fff; color: var(--c-primary); font: 700 .95rem var(--f-body, inherit); cursor: pointer; transition: background .15s, color .15s; } .slot:hover { background: var(--c-primary); color: #fff; }
.sched-formstep { grid-template-columns: 290px minmax(0, 1fr); }
.sched-back { border: 0; background: none; padding: 0; margin-bottom: 1rem; color: var(--c-primary); font: 600 .9rem var(--f-ui, inherit); cursor: pointer; }
.sched-formbox { padding: 1.6rem; display: grid; gap: .9rem; align-content: start; } .sched-formbox h3 { margin: 0; }
.sched-formbox label { display: block; font-weight: 600; font-size: .9rem; color: var(--c-heading); } .sched-formbox label small { font-weight: 400; color: var(--c-muted); }
.sched-formbox input:not([type=checkbox]), .sched-formbox textarea { width: 100%; margin-top: .35rem; padding: .75rem .9rem; border: 1.5px solid var(--c-border); border-radius: 10px; font: 400 .95rem var(--f-body, inherit); background: #fff; color: var(--c-text); } .sched-formbox input:focus, .sched-formbox textarea:focus, .sched-topic select:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 16%, transparent); }
.sched-formbox .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } .sched-formbox .consent { display: flex; gap: .6rem; font-weight: 400; font-size: .84rem; line-height: 1.45; color: var(--c-text); } .sched-formbox .consent input { margin: .2rem 0 0; flex: none; }
.sched-formbox .form-msg { margin: 0; min-height: 1.2em; font-weight: 600; } .sched-formbox .form-msg.err { color: #b42318; } .sched-formbox .form-msg.ok { color: #0a7a3f; }
.sched-done { padding: 3rem 1.5rem; text-align: center; max-width: 560px; margin: 0 auto; } .sched-ok { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: #e7f7ee; color: #0a7a3f; } .sched-sum { background: var(--c-bg-alt); border-radius: 12px; padding: 1rem; line-height: 1.7; }
@media (max-width: 900px) { .sched, .sched-formstep { grid-template-columns: 1fr; } .sched-info { border-right: 0; border-bottom: 1px solid var(--c-border); } .sched-times { border-left: 0; border-top: 1px solid var(--c-border); max-height: none; } .slots { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .sched-formbox .row2 { grid-template-columns: 1fr; } }

/* expert's meeting report page */
.rep { max-width: 860px; margin: 0 auto; } .rep h1 { margin: 0 0 1rem; }
.rep-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; padding: 1.1rem 1.2rem; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: 14px; margin-bottom: 1.2rem; }
.rep-sum small { display: block; color: var(--c-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; } .rep-sum b { color: var(--c-heading); font-size: .95rem; } .rep-sum b.ok { color: #0a7a3f; } .rep-sum b.no { color: #b42318; }
.rep-note { color: var(--c-muted); font-size: .95rem; } .rep-box { padding: 1.1rem 1.3rem; border: 1px solid var(--c-border); border-radius: 12px; background: #fff; margin: 1rem 0; } .rep-box.rep-ok { background: #e9f8ef; border-color: #b9e5c9; color: #0a5f33; display: flex; gap: .6rem; align-items: center; }
.rep-form { display: grid; gap: 1.1rem; margin-top: 1rem; } .rep-form fieldset { border: 1px solid var(--c-border); border-radius: 14px; padding: 1.1rem 1.3rem 1.3rem; margin: 0; display: grid; gap: .9rem; background: #fff; }
.rep-form legend { font: 700 1rem var(--f-ui, inherit); color: var(--c-heading); padding: 0 .5rem; } .rep-form legend small { font-weight: 400; color: var(--c-muted); }
.rep-form label { display: block; font-weight: 600; font-size: .9rem; color: var(--c-heading); } .rep-form label small { font-weight: 400; color: var(--c-muted); }
.rep-form input:not([type=radio]), .rep-form textarea, .rep-form select { width: 100%; margin-top: .35rem; padding: .7rem .9rem; border: 1.5px solid var(--c-border); border-radius: 10px; font: 400 .95rem var(--f-body, inherit); background-color: #fff; color: var(--c-text); } .rep-form input:focus, .rep-form textarea:focus, .rep-form select:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 16%, transparent); }
.rep-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.rep-flags { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; } .rep-flagopt { display: flex !important; gap: .7rem; align-items: flex-start; padding: .9rem 1rem; border: 2px solid var(--c-border); border-radius: 12px; cursor: pointer; background: #fff; }
.rep-flagopt input { width: auto !important; margin: .25rem 0 0 !important; flex: none; } .rep-flagopt b { display: block; font-size: 1rem; } .rep-flagopt small { display: block; font-weight: 400; font-size: .82rem; color: var(--c-text); margin-top: .15rem; line-height: 1.35; }
.rep-flagopt.rep-green b, .rep-flag.rep-green { color: #0a7a3f; } .rep-flagopt.rep-yellow b, .rep-flag.rep-yellow { color: #a16207; } .rep-flagopt.rep-red b, .rep-flag.rep-red { color: #b42318; }
.rep-flagopt.rep-green:has(input:checked) { border-color: #16a34a; background: #e9f8ef; } .rep-flagopt.rep-yellow:has(input:checked) { border-color: #eab308; background: #fef9e1; } .rep-flagopt.rep-red:has(input:checked) { border-color: #dc2626; background: #fdecea; }
.rep-msg { margin: 0; min-height: 1.2em; font-weight: 600; color: var(--c-muted); } .rep-msg.err { color: #b42318; }
@media (max-width: 700px) { .rep-form .row2, .rep-flags { grid-template-columns: 1fr; } }