:root {
--ink:            #050D1A;
--ink-raise:      #0A1526;
--ink-raise-2:    #101E33;
--ink-hairline:   rgba(200, 212, 232, 0.10);
--ink-hairline-2: rgba(200, 212, 232, 0.18);
--paper:          #FFFFFF;
--paper-soft:     #F7F8FB;
--paper-tint:     #EEF3FA;
--rule:           rgba(9, 24, 48, 0.09);
--rule-strong:    rgba(9, 24, 48, 0.16);
--blue:           #0057FF;
--blue-deep:      #0040C4;
--blue-lift:      #3B82FF;
--blue-wash:      rgba(0, 87, 255, 0.08);
--blue-wash-2:    rgba(0, 87, 255, 0.16);
--champagne:      #D8BC7E;
--champagne-dim:  rgba(216, 188, 126, 0.32);
--link:           var(--blue);
--text:           #050D1A;
--text-2:         #44536B;
--text-3:         #616E84;
--on-dark:        #FFFFFF;
--on-dark-2:      #C8D4E8;
--on-dark-3:      #8A9AB8;
--danger:         #D52C1F;
--danger-wash:    #FEF3F2;
--success:        #067647;
--success-wash:   #ECFDF3;
--warn:           #B54708;
--warn-wash:      #FFFAEB;
--f-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
--f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--f-label:   'Space Grotesk', ui-monospace, 'SF Mono', Menlo, monospace;
--t-2xs: 0.625rem;
--t-xs:  0.6875rem;
--t-sm:  0.8125rem;
--t-md:  0.9375rem;
--t-lg:  1.0625rem;
--t-xl:  clamp(1.15rem, 1.6vw, 1.375rem);
--d-hero: clamp(2.75rem, 8.2vw, 7.5rem);
--d-1:    clamp(2rem, 5vw, 4.25rem);
--d-2:    clamp(1.6rem, 3.2vw, 2.5rem);
--d-3:    clamp(1.25rem, 2vw, 1.6rem);
--s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
--s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
--s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
--s-section: clamp(68px, 8.5vw, 136px);
--gutter:    clamp(20px, 5vw, 72px);
--maxw:      1440px;
--r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;
--r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
--sh-1: 0 1px 2px rgba(5, 13, 26, .04), 0 2px 8px rgba(5, 13, 26, .04);
--sh-2: 0 2px 4px rgba(5, 13, 26, .03), 0 10px 28px rgba(5, 13, 26, .07);
--sh-3: 0 4px 8px rgba(5, 13, 26, .04), 0 28px 64px rgba(5, 13, 26, .12);
--sh-glow: 0 6px 28px rgba(0, 87, 255, .30);
--ease:      cubic-bezier(.22, .61, .36, 1);
--ease-expo: cubic-bezier(.16, 1, .30, 1);
--spring:    cubic-bezier(.34, 1.36, .64, 1);
--nav-h: 74px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + 16px);
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--f-body);
font-size: var(--t-md);
line-height: 1.65;
color: var(--text);
background: var(--paper);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1;
}
img, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
::selection { background: var(--blue); color: #fff; }
:focus-visible {
outline: 2px solid var(--blue-lift);
outline-offset: 3px;
border-radius: 3px;
}
.skip-link {
position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
z-index: 10000; background: var(--blue); color: #fff;
padding: 12px 24px; border-radius: 0 0 var(--r-sm) var(--r-sm);
font-weight: 600; font-size: var(--t-sm); transition: top .25s var(--ease);
}
.skip-link:focus { top: 0; }
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-section); }
.section--dark  { background: var(--ink);       color: var(--on-dark-2); }
.section--dark,
.pagehero,
.hero,
.auth,
.dash-hero,
.footer,
.drawer,
.on-dark            { --link: var(--blue-lift); }
.section--soft  { background: var(--paper-soft); }
.section--paper { background: var(--paper); }
.section--tint  { background: var(--paper-tint); }
.section--dark  { position: relative; }
.stack   { display: flex; flex-direction: column; }
.hr-fine { height: 1px; background: var(--rule); border: 0; }
.hr-fine--dark { background: var(--ink-hairline); }
.eyebrow {
display: inline-flex; align-items: center; gap: var(--s-3);
font-family: var(--f-label);
font-size: var(--t-xs); font-weight: 700;
letter-spacing: .22em; text-transform: uppercase;
color: var(--link);
margin-bottom: var(--s-5);
}
.eyebrow::before {
content: ''; width: 30px; height: 1px; background: currentColor; opacity: .75;
}
.eyebrow--champagne { color: var(--champagne); }
.display {
font-family: var(--f-display);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.018em;
font-size: var(--d-1);
color: var(--text);
text-wrap: balance;
}
.display--hero { font-size: var(--d-hero); line-height: 1.0; letter-spacing: -0.028em; }
.display--sm   { font-size: var(--d-2); }
.display--xs   { font-size: var(--d-3); line-height: 1.18; }
.display em    { display: block; font-style: italic; color: var(--blue); }
.on-dark .display, .display--on-dark { color: var(--on-dark); }
.lede {
font-size: var(--t-lg); line-height: 1.75; color: var(--text-2);
max-width: 56ch; text-wrap: pretty;
}
.on-dark .lede, .lede--on-dark { color: var(--on-dark-3); }
.label {
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.on-dark .label { color: var(--on-dark-3); }
.num-display {
font-family: var(--f-display); font-weight: 300; line-height: 1;
letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums;
}
.btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
gap: var(--s-2);
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
letter-spacing: .11em; text-transform: uppercase;
padding: 15px 28px; border-radius: var(--r-xs);
white-space: nowrap; overflow: hidden;
transition: transform .3s var(--spring), background-color .25s var(--ease),
border-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn--primary {
background: var(--blue); color: #fff;
box-shadow: 0 1px 2px rgba(0,40,120,.24), 0 4px 14px rgba(0,87,255,.22);
}
.btn--primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: var(--sh-glow); }
.btn--primary::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
transform: translateX(-120%); transition: transform .7s var(--ease-expo);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--outline {
border: 1px solid var(--rule-strong); color: var(--text);
background: transparent;
}
.btn--outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-wash); transform: translateY(-2px); }
.btn--ghost-dark {
border: 1px solid var(--ink-hairline-2); color: var(--on-dark-2); background: rgba(255,255,255,.02);
}
.btn--ghost-dark:hover { border-color: var(--blue-lift); color: #fff; background: var(--blue-wash-2); transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.btn--ink:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); box-shadow: var(--sh-glow); }
.btn--wide  { width: 100%; }
@media (max-width: 360px) { .btn--wide { white-space: normal; text-align: center; } }
.btn--lg    { padding: 17px 34px; font-size: var(--t-sm); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled::after { display: none; }
.link-arrow {
display: inline-flex; align-items: center; gap: var(--s-2);
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--link);
transition: gap .3s var(--ease);
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.link-arrow:hover { gap: 14px; }
.link-arrow:hover svg { transform: translateX(3px); }
.nav {
position: fixed; inset: 0 0 auto 0; z-index: 1000;
height: var(--nav-h);
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-6);
padding-inline: var(--gutter);
background: rgba(5, 13, 26, .88);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid transparent;
transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav--scrolled {
background: rgba(5, 13, 26, .96);
border-bottom-color: var(--ink-hairline);
box-shadow: 0 10px 40px rgba(0,0,0,.42);
}
.nav__brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.nav__brand img { height: 38px; width: auto; object-fit: contain; }
.nav__badge {
font-family: var(--f-label); font-size: 9px; font-weight: 700;
color: #5291FF; letter-spacing: .3em;
border: 1px solid rgba(82,145,255,.45); padding: 3px 8px 3px 9px; border-radius: 3px;
}
.nav__links { display: flex; align-items: center; gap: clamp(13px, 1.35vw, 28px); }
.nav__links a {
position: relative; white-space: nowrap;
font-size: var(--t-xs); font-weight: 600; letter-spacing: .075em;
text-transform: uppercase; color: var(--on-dark-3);
transition: color .25s var(--ease);
}
.nav__links a::after {
content: ''; position: absolute; inset-inline-start: 0; bottom: -6px;
width: 0; height: 1px; background: var(--blue-lift);
transition: width .32s var(--ease-expo);
}
.nav__links a:hover, .nav__links a[aria-current="true"] { color: #fff; }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: var(--s-4); }
.nav__signin {
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--on-dark-2); transition: color .25s var(--ease);
}
.nav__signin:hover { color: #fff; }
.nav__signin { white-space: nowrap; }
.nav__signin .is-short { display: none; }
.nav__cta {
background: var(--blue); color: #fff; white-space: nowrap;
padding: 10px 20px; border-radius: var(--r-xs);
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
transition: background .25s var(--ease), transform .25s var(--spring), box-shadow .25s var(--ease);
}
.nav__cta::after { display: none !important; }
.nav__cta .is-short { display: none; }
.nav__cta:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: var(--sh-glow); }
.burger { display: none; flex-direction: column; gap: 5px; padding: 10px; margin-inline-end: -10px; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--on-dark-2); transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.drawer {
position: fixed; inset: var(--nav-h) 0 0 0; z-index: 998;
background: var(--ink);
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
gap: var(--s-5); padding: var(--s-8) var(--gutter);
overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.drawer > :first-child { margin-block-start: auto; }
.drawer > :last-child  { margin-block-end: auto; }
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.drawer a {
font-family: var(--f-display); font-size: clamp(1.5rem, 6vw, 2.1rem);
font-weight: 600; color: var(--on-dark-2); letter-spacing: .01em;
transition: color .25s var(--ease);
}
.drawer a:hover { color: var(--blue-lift); }
.drawer__divide { width: 56px; height: 1px; background: var(--ink-hairline); margin: var(--s-2) 0; }
.drawer__sub {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 6px 18px; margin-top: -10px; max-width: 30ch;
}
.drawer__sub a {
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3);
}
.drawer__sub a:hover { color: var(--blue-lift); }
.socialbar {
margin-top: var(--nav-h);
background: var(--ink-raise);
border-bottom: 1px solid var(--ink-hairline);
padding: 13px var(--gutter);
display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.socialbar__text {
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3);
}
.socialbar__text strong { color: var(--on-dark); font-weight: 700; }
.socials { display: flex; gap: var(--s-2); }
.social {
width: 34px; height: 34px; border-radius: var(--r-xs);
border: 1px solid var(--ink-hairline);
display: grid; place-items: center; color: var(--on-dark-3);
transition: color .25s var(--ease), border-color .25s var(--ease),
background-color .25s var(--ease), transform .25s var(--spring);
}
.social svg { width: 14px; height: 14px; fill: currentColor; }
.social:hover { color: #fff; border-color: var(--blue); background: var(--blue-wash-2); transform: translateY(-2px); }
.footer__social {
display: flex; gap: var(--s-2); justify-content: flex-start;
margin-top: var(--s-5); flex-wrap: wrap;
}
.hero {
position: relative; isolation: isolate;
min-height: 100vh; min-height: 100svh;
display: flex; flex-direction: column; justify-content: flex-end;
padding: calc(var(--nav-h) + var(--s-16)) var(--gutter) var(--s-20);
background: var(--ink); color: var(--on-dark-2);
overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img, .hero__media video {
width: 100%; height: 100%; object-fit: cover;
opacity: .26; filter: saturate(.4) contrast(1.05);
}
.hero__media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__media video[data-ready="true"] { opacity: .24; }
.hero__wash {
position: absolute; inset: 0; z-index: -2; pointer-events: none;
background:
radial-gradient(ellipse 62% 52% at 74% 34%, rgba(0,87,255,.24) 0%, transparent 64%),
radial-gradient(ellipse 46% 62% at 14% 84%, rgba(216,188,126,.10) 0%, transparent 62%),
linear-gradient(180deg, rgba(5,13,26,.62) 0%, rgba(5,13,26,.34) 42%, rgba(5,13,26,.92) 100%);
}
.hero__grid {
position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
background-image:
linear-gradient(rgba(200,212,232,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,212,232,.045) 1px, transparent 1px);
background-size: 84px 84px;
mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}
.hero__eyebrow {
display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
letter-spacing: .2em; text-transform: uppercase; color: var(--blue-lift);
margin-bottom: var(--s-8);
}
.hero__eyebrow::before { content: ''; width: 38px; height: 1px; background: currentColor; flex-shrink: 0; }
.hero__title { color: var(--on-dark); }
.hero__title em { display: block; font-style: italic; color: var(--blue-lift); }
.hero__foot {
display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-10);
margin-top: var(--s-12); padding-top: var(--s-10);
border-top: 1px solid var(--ink-hairline);
}
.hero__sub { font-size: var(--t-md); color: var(--on-dark-3); max-width: 42ch; line-height: 1.8; }
.hero__actions { display: flex; gap: var(--s-3); flex-shrink: 0; }
.hero__stats { display: flex; gap: clamp(24px, 4vw, 56px); margin-top: var(--s-8); flex-wrap: wrap; }
.hero__stat strong {
display: block; font-family: var(--f-display); font-size: clamp(1.9rem, 3.4vw, 3rem);
font-weight: 600; color: var(--on-dark); line-height: 1;
}
.hero__stat span {
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3);
}
.hero__scroll {
position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
}
.hero__scroll span {
font-family: var(--f-label); font-size: 9px; letter-spacing: .24em;
text-transform: uppercase; color: var(--on-dark-3);
}
.hero__scroll i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--on-dark-3), transparent); animation: scrollPulse 2.2s var(--ease) infinite; }
@keyframes scrollPulse { 0%, 100% { opacity: .35; transform: scaleY(.8); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
.pagehero {
position: relative; isolation: isolate;
background: var(--ink); color: var(--on-dark-2);
padding: calc(var(--nav-h) + clamp(56px, 7vw, 104px)) var(--gutter) clamp(56px, 7vw, 104px);
overflow: hidden;
}
.pagehero__wash {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(ellipse 60% 70% at 78% 22%, rgba(0,87,255,.20) 0%, transparent 62%),
radial-gradient(ellipse 50% 60% at 8% 92%, rgba(216,188,126,.07) 0%, transparent 60%);
}
.pagehero__grid {
position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
background-image:
linear-gradient(rgba(200,212,232,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,212,232,.04) 1px, transparent 1px);
background-size: 78px 78px;
mask-image: radial-gradient(ellipse 80% 80% at 40% 30%, #000 10%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 80% 80% at 40% 30%, #000 10%, transparent 75%);
}
.crumbs {
display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3);
margin-bottom: var(--s-6);
}
.crumbs a { transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--blue-lift); }
.crumbs i { opacity: .4; font-style: normal; }
.crumbs [aria-current] { color: var(--on-dark); }
.pagehero .display em { color: var(--blue-lift); display: block; }
.pagehero__sub { margin-top: var(--s-5); font-size: var(--t-lg); color: var(--on-dark-3); max-width: 60ch; line-height: 1.75; }
.pagehero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-10); }
.pagehero__stats {
display: grid; grid-template-columns: repeat(4, 1fr);
margin-top: var(--s-16); border-top: 1px solid var(--ink-hairline);
}
.pagehero__stat { padding: var(--s-6) var(--s-5) 0; border-inline-end: 1px solid var(--ink-hairline); }
.pagehero__stat:first-child { padding-inline-start: 0; }
.pagehero__stat:last-child { border-inline-end: none; }
.pagehero__stat strong { display: block; font-family: var(--f-display); font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 600; color: var(--on-dark); line-height: 1; }
.pagehero__stat small { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }
.marquee {
background: var(--blue); overflow: hidden; padding: 14px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 52s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
display: flex; align-items: center; gap: var(--s-6); padding-inline: var(--s-6);
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
letter-spacing: .18em; text-transform: uppercase; color: #fff; white-space: nowrap;
}
.marquee__item::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.45); }
@keyframes marquee { to { transform: translateX(-50%); } }
.trust {
display: flex; align-items: center; justify-content: center;
gap: clamp(18px, 3vw, 44px); flex-wrap: wrap;
padding: var(--s-8) var(--gutter);
background: var(--paper-soft); border-bottom: 1px solid var(--rule);
}
.trust__item { display: flex; align-items: center; gap: 10px; }
.trust__icon {
width: 34px; height: 34px; border-radius: var(--r-sm); flex-shrink: 0;
background: var(--blue-wash); color: var(--blue);
display: grid; place-items: center;
}
.trust__icon svg { width: 17px; height: 17px; }
.trust__label {
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
letter-spacing: .09em; text-transform: uppercase; color: var(--text-2);
}
.svc-layout {
display: grid;
grid-template-columns: 1fr 1.12fr;
grid-template-rows: auto 1fr;
column-gap: clamp(40px, 5vw, 80px);
row-gap: clamp(28px, 3.2vw, 48px);
align-items: start;
margin-top: var(--s-16);
}
.svc-intro  { grid-column: 1; grid-row: 1; }
.svc-list   { grid-column: 2; grid-row: 1 / span 2; }
.svc-visual { grid-column: 1; grid-row: 2; }
.svc-list { display: flex; flex-direction: column; }
.svc { border-top: 1px solid var(--ink-hairline); }
.svc:last-child { border-bottom: 1px solid var(--ink-hairline); }
.svc__header {
width: 100%; display: flex; align-items: center; gap: var(--s-4);
padding: var(--s-6) 0; text-align: start;
transition: padding-inline-start .35s var(--ease);
}
.svc__header:hover { padding-inline-start: 6px; }
.svc__num { font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; color: var(--on-dark-3); width: 28px; flex-shrink: 0; }
.svc__name { flex: 1; font-family: var(--f-display); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; color: var(--on-dark); transition: color .3s var(--ease); }
.svc__toggle {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--ink-hairline); color: var(--on-dark-3);
display: grid; place-items: center;
transition: transform .4s var(--ease-expo), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.svc__toggle svg { width: 12px; height: 12px; }
.svc__header:hover .svc__name { color: var(--blue-lift); }
.svc[data-open="true"] .svc__name { color: var(--blue-lift); }
.svc[data-open="true"] .svc__toggle { background: var(--blue); border-color: var(--blue); color: #fff; transform: rotate(135deg); }
.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-expo); }
.svc[data-open="true"] .svc__panel { grid-template-rows: 1fr; }
.svc__panel > div { overflow: hidden; }
.svc__body { padding: 0 0 var(--s-8) 44px; }
.svc__body p { font-size: var(--t-md); line-height: 1.85; color: var(--on-dark-3); max-width: 52ch; }
.svc__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 var(--s-5); }
.svc__tags li {
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600;
letter-spacing: .05em; text-transform: uppercase; color: var(--blue-lift);
background: var(--blue-wash); border: 1px solid rgba(59,130,255,.26);
border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap;
}
.svc__media { display: none; }
.svc-visual {
position: sticky; top: calc(var(--nav-h) + 26px);
border-radius: var(--r-xl); overflow: hidden; height: min(64vh, 620px);
border: 1px solid var(--ink-hairline);
background: var(--ink-raise);
transition: opacity .35s var(--ease);
}
.svc-visual__overlay {
position: absolute; inset: auto 0 0 0; padding: var(--s-8);
background: linear-gradient(to top,
rgba(5,13,26,.97) 0%,
rgba(5,13,26,.95) 55%,
rgba(5,13,26,.92) 86%,
rgba(5,13,26,0) 100%);
pointer-events: none;
}
.svc-visual__label { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #5291FF; margin-bottom: 6px; }
.svc-visual__title { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; color: #fff; line-height: 1.2; }
.gallery { position: relative; width: 100%; height: 100%; background: #000; }
.gallery__stage { position: relative; width: 100%; height: 100%; }
.gallery__stage img, .gallery__stage video { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs {
position: absolute; top: 14px; inset-inline-end: 14px; z-index: 5;
display: flex; gap: 6px; padding: 6px;
background: rgba(5,13,26,.6); backdrop-filter: blur(8px);
border: 1px solid var(--ink-hairline); border-radius: var(--r-md);
}
.gallery__thumb {
width: 30px; height: 30px; border-radius: var(--r-sm);
border: 1px solid var(--ink-hairline); color: var(--on-dark-3);
background: rgba(255,255,255,.04);
display: grid; place-items: center;
transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.gallery__thumb:focus-visible { outline: 2px solid var(--blue-lift); outline-offset: 2px; }
.gallery__thumb svg { width: 12px; height: 12px; }
.gallery__thumb:hover { border-color: var(--blue-lift); color: #fff; }
.gallery__thumb[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.statband {
background: var(--ink); color: var(--on-dark-2);
border-block: 1px solid var(--ink-hairline);
padding: var(--s-16) var(--gutter);
display: grid; grid-template-columns: repeat(4, 1fr);
}
.statband__item { padding-inline: clamp(12px, 3vw, 40px); border-inline-end: 1px solid var(--ink-hairline); text-align: center; }
.statband__item:first-child { padding-inline-start: 0; text-align: start; }
.statband__item:last-child { border-inline-end: none; padding-inline-end: 0; text-align: end; }
.statband__val { font-family: var(--f-display); font-size: clamp(2.4rem, 5.4vw, 5rem); font-weight: 300; color: var(--on-dark); line-height: 1; margin-bottom: 8px; }
.statband__val span { color: var(--blue-lift); }
.statband__label { font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); }
.card-grid { display: grid; gap: var(--s-5); margin-top: var(--s-16); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card {
position: relative; isolation: isolate;
background: var(--paper); border: 1px solid var(--rule);
border-radius: var(--r-lg); padding: var(--s-8);
transition: transform .4s var(--ease-expo), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.card::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
background: linear-gradient(160deg, var(--blue-wash) 0%, transparent 46%);
opacity: 0; transition: opacity .4s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: rgba(0,87,255,.22); }
.card:hover::before { opacity: 1; }
.card__icon {
width: 44px; height: 44px; border-radius: var(--r-md); margin-bottom: var(--s-5);
background: var(--blue-wash); color: var(--blue); display: grid; place-items: center;
transition: background-color .3s var(--ease), color .3s var(--ease), transform .4s var(--spring);
}
.card__icon svg { width: 21px; height: 21px; }
.card:hover .card__icon { background: var(--blue); color: #fff; transform: scale(1.06) rotate(-3deg); }
.card h3 { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; margin-bottom: 10px; line-height: 1.22; }
.card p { font-size: var(--t-sm); line-height: 1.8; color: var(--text-2); }
.card__list { margin-top: var(--s-4); display: flex; flex-direction: column; gap: 7px; }
.card__list li {
position: relative; padding-inline-start: 17px;
font-size: var(--t-sm); color: var(--text-2); line-height: 1.6;
}
.card__list li::before {
content: ''; position: absolute; inset-inline-start: 0; top: .55em;
width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: .6;
}
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s-16); }
.stage { position: relative; background: var(--paper); padding: clamp(32px, 3.6vw, 52px) clamp(24px, 2.8vw, 40px); transition: background-color .4s var(--ease); }
.stage::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-expo); }
.stage:hover { background: var(--paper-tint); }
.stage:hover::before { transform: scaleX(1); }
.stage__num { font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700; letter-spacing: .18em; color: var(--blue); margin-bottom: var(--s-8); }
.stage h3 { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; margin-bottom: 12px; line-height: 1.2; }
.stage p { font-size: var(--t-sm); line-height: 1.85; color: var(--text-2); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; margin-top: var(--s-16); }
.step { background: var(--paper); padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 34px); position: relative; transition: background-color .35s var(--ease); }
.step:hover { background: var(--paper-tint); }
.step__n { font-family: var(--f-display); font-size: 2.6rem; font-weight: 300; color: var(--blue); opacity: .28; line-height: 1; margin-bottom: var(--s-4); }
.step h4 { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; margin-bottom: 10px; line-height: 1.2; }
.step p { font-size: var(--t-sm); line-height: 1.8; color: var(--text-2); }
.review {
position: relative;
background: rgba(255,255,255,.035); border: 1px solid var(--ink-hairline);
border-radius: var(--r-lg); padding: var(--s-8);
transition: transform .4s var(--ease-expo), border-color .3s var(--ease), background-color .3s var(--ease);
}
.review:hover { transform: translateY(-4px); border-color: rgba(59,130,255,.32); background: rgba(255,255,255,.06); }
.review__tag {
display: inline-block; margin-bottom: var(--s-4);
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--blue-lift);
padding: 4px 10px; border: 1px solid rgba(59,130,255,.3); border-radius: var(--r-xs);
}
.stars { display: flex; gap: 3px; margin-bottom: var(--s-4); color: var(--champagne); }
.stars svg { width: 13px; height: 13px; fill: currentColor; }
.review { display: flex; flex-direction: column; }
.review p { font-size: var(--t-sm); line-height: 1.9; color: var(--on-dark-2); margin-bottom: var(--s-6); }
.review > p:not(.review__tag) { flex: 1; }
.review__who { display: flex; align-items: center; gap: 12px; padding-top: var(--s-5); border-top: 1px solid var(--ink-hairline); }
.review__avatar {
width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(140deg, var(--blue-lift), var(--blue-deep)); color: #fff;
font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em;
display: grid; place-items: center;
}
.review__who strong { display: block; color: var(--on-dark); font-size: var(--t-sm); font-weight: 600; }
.review__who span { font-size: var(--t-sm); color: var(--on-dark-3); }
.rsum[data-cols="3"] { grid-template-columns: repeat(3, 1fr) !important; }
.rsum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ink-hairline); border: 1px solid var(--ink-hairline); border-radius: var(--r-md); overflow: hidden; margin: var(--s-12) 0; }
.rsum__item { background: var(--ink-raise); padding: var(--s-8) var(--s-4); text-align: center; }
.rsum__item strong { display: block; font-family: var(--f-display); font-size: 2.6rem; font-weight: 600; color: var(--on-dark); line-height: 1; margin-bottom: 6px; }
.rsum__item .stars { justify-content: center; margin-bottom: 6px; }
.rsum__item span { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }
.faq { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-16); }
.faq__item { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); overflow: hidden; }
.faq__item:hover { border-color: rgba(0,87,255,.24); box-shadow: var(--sh-1); }
.faq__item[data-open="true"] { border-color: rgba(0,87,255,.3); box-shadow: var(--sh-2); }
.faq__q {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
padding: var(--s-5) var(--s-6); text-align: start;
font-size: var(--t-md); font-weight: 600; color: var(--text); line-height: 1.45;
}
.faq__mark {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--rule-strong); color: var(--blue);
display: grid; place-items: center;
transition: transform .4s var(--ease-expo), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.faq__mark svg { width: 11px; height: 11px; }
.faq__item[data-open="true"] .faq__mark { background: var(--blue); border-color: var(--blue); color: #fff; transform: rotate(135deg); }
.faq__a {
display: grid; grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows .45s var(--ease-expo), visibility 0s linear .45s;
}
.faq__item[data-open="true"] .faq__a {
grid-template-rows: 1fr;
visibility: visible;
transition: grid-template-rows .45s var(--ease-expo), visibility 0s;
}
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 var(--s-6) var(--s-5); font-size: var(--t-sm); line-height: 1.85; color: var(--text-2); max-width: 78ch; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.split__media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3.2; background: var(--ink-raise); }
.split__media img, .split__media video { width: 100%; height: 100%; object-fit: cover; }
.split__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(0,87,255,.10) 0%, transparent 58%); pointer-events: none; }
.split__pills { position: absolute; inset: auto var(--s-6) var(--s-6); display: flex; gap: 10px; z-index: 2; }
.pill {
flex: 1; text-align: center; padding: 14px 12px;
background: rgba(5,13,26,.86); backdrop-filter: blur(14px);
border: 1px solid var(--ink-hairline); border-radius: var(--r-md);
}
.pill strong { display: block; font-family: var(--f-display); font-size: 1.7rem; font-weight: 600; color: var(--blue-lift); line-height: 1; }
.pill span { font-family: var(--f-label); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); }
.checks { display: flex; flex-direction: column; gap: 13px; margin: var(--s-6) 0 var(--s-10); }
.checks li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--t-md); color: var(--text); font-weight: 500; line-height: 1.55; }
.checks li::before {
content: ''; flex-shrink: 0; width: 21px; height: 21px; margin-top: 2px; border-radius: 50%;
background: var(--blue-wash) center / 11px no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057FF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.roles { display: flex; flex-direction: column; gap: var(--s-2); }
.role {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
padding: var(--s-4) var(--s-5); border-radius: var(--r-md); border: 1px solid var(--rule);
transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.role:hover { border-color: rgba(0,87,255,.3); background: var(--blue-wash); transform: translateX(3px); }
.role__name { font-size: var(--t-md); font-weight: 600; }
.role__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); letter-spacing: .05em; }
.badge {
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px;
border-radius: var(--r-xs); background: var(--blue-wash); color: var(--blue);
border: 1px solid rgba(0,87,255,.22); flex-shrink: 0;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-3); }
.form-row--full { grid-template-columns: 1fr; }
.form-row--phone { grid-template-columns: 132px 1fr; }
input, textarea, select {
width: 100%; padding: 13px 15px;
border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
background: var(--paper); color: var(--text);
font-family: var(--f-body); font-size: var(--t-md); line-height: 1.4;
outline: none; appearance: none;
transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: .82; }
input:hover, textarea:hover, select:hover { border-color: var(--text-3); }
input:focus, textarea:focus, select:focus {
border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); background: var(--paper);
}
textarea { resize: vertical; min-height: 116px; }
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A92' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
padding-inline-end: 38px; cursor: pointer;
}
[aria-invalid="true"], .is-error { border-color: var(--danger) !important; }
[aria-invalid="true"]:focus, .is-error:focus { box-shadow: 0 0 0 3px rgba(217,45,32,.10) !important; }
.field-error { font-size: var(--t-xs); color: var(--danger); font-weight: 500; min-height: 0; }
.formbox {
background: var(--paper-soft); border: 1px solid var(--rule);
border-radius: var(--r-xl); padding: clamp(28px, 3.4vw, 44px);
}
.formbox h3 { font-family: var(--f-display); font-size: var(--d-2); font-weight: 600; margin-bottom: 6px; }
.formbox > p { font-size: var(--t-sm); color: var(--text-2); margin-bottom: var(--s-6); }
.form-note { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--text-3); line-height: 1.6; }
.field-hint { font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; margin-top: 2px; }
.dropzone {
position: relative;
display: flex; flex-direction: column; align-items: center;
gap: 6px; padding: 30px 20px; text-align: center;
border: 1.5px dashed var(--rule-strong); border-radius: var(--r-md);
background: var(--paper); cursor: pointer;
transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.dropzone input[type="file"] {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: pointer; padding: 0; border: 0;
}
.dropzone:hover, .dropzone[data-drag="true"] { border-color: var(--blue); background: var(--blue-wash); }
.dropzone[data-drag="true"] { border-style: solid; }
.dropzone:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.dropzone[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-wash); }
.dropzone__icon {
width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
background: var(--blue-wash); color: var(--blue); margin-bottom: 4px;
transition: transform .3s var(--spring);
}
.dropzone__icon svg { width: 20px; height: 20px; }
.dropzone:hover .dropzone__icon, .dropzone[data-drag="true"] .dropzone__icon { transform: translateY(-2px) scale(1.05); }
.dropzone__title { font-size: var(--t-md); font-weight: 600; color: var(--text); }
.dropzone__title b { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dropzone__meta { font-size: var(--t-xs); color: var(--text-3); }
.file-chip {
display: none; align-items: center; gap: 10px; margin-top: 10px;
padding: 10px 12px; border-radius: var(--r-sm);
background: var(--blue-wash); border: 1px solid rgba(0,87,255,.2);
font-size: var(--t-sm); color: var(--text);
}
.file-chip[data-show="true"] { display: flex; }
.file-chip svg { width: 17px; height: 17px; color: var(--blue); flex-shrink: 0; }
.file-chip__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file-chip__size { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); flex-shrink: 0; }
.file-chip__clear {
flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
display: grid; place-items: center; color: var(--text-3);
transition: background-color .2s var(--ease), color .2s var(--ease);
}
.file-chip__clear:hover { background: rgba(217,45,32,.10); color: var(--danger); }
.file-chip__clear svg { width: 12px; height: 12px; color: currentColor; }
.or-rule {
display: flex; align-items: center; gap: var(--s-4);
margin: var(--s-5) 0; color: var(--text-3);
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
}
.or-rule::before, .or-rule::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.form-status {
margin-top: var(--s-4); padding: 13px 16px; border-radius: var(--r-sm);
font-size: var(--t-sm); font-weight: 500; display: none;
}
.form-status[data-show="true"] { display: block; }
.form-status[data-kind="error"]   { background: var(--danger-wash);  color: var(--danger);  border: 1px solid rgba(217,45,32,.2); }
.form-status[data-kind="info"]    { background: var(--blue-wash);    color: var(--blue-deep); border: 1px solid rgba(0,87,255,.2); }
.form-status[data-kind="success"] { background: var(--success-wash);  color: var(--success); border: 1px solid rgba(6,118,71,.2); }
.form-done {
display: none; text-align: center; padding: var(--s-10) var(--s-6);
background: var(--blue-wash); border: 1px solid rgba(0,87,255,.2); border-radius: var(--r-md);
}
.form-done[data-show="true"] { display: block; animation: popIn .5s var(--spring); }
.form-done__mark {
width: 46px; height: 46px; margin: 0 auto var(--s-4); border-radius: 50%;
background: var(--blue); color: #fff; display: grid; place-items: center;
}
.form-done__mark svg { width: 22px; height: 22px; }
.form-done strong { display: block; font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 6px; }
.form-done span { font-size: var(--t-sm); color: var(--text-2); }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.contact { display: grid; grid-template-columns: 1fr 1fr; }
.contact__left {
position: relative; isolation: isolate;
background: var(--ink); color: var(--on-dark-2);
padding: clamp(44px, 5.5vw, 84px) clamp(24px, 4vw, 64px);
display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-12);
overflow: hidden;
}
.contact__left::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: radial-gradient(ellipse 80% 60% at 50% 108%, rgba(0,87,255,.20) 0%, transparent 62%);
}
.contact__logo { height: 54px; width: auto; object-fit: contain; }
.contact__headline { font-family: var(--f-display); font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 600; color: var(--on-dark); line-height: 1.12; }
.contact__headline em { display: block; font-style: italic; color: var(--blue-lift); }
.contact__info { display: flex; flex-direction: column; gap: 13px; }
.contact__row { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); color: var(--on-dark-3); }
.contact__row svg { width: 16px; height: 16px; color: var(--blue-lift); flex-shrink: 0; }
.contact__row a { transition: color .25s var(--ease); }
.contact__row a:hover { color: var(--on-dark); }
.contact__right {
background: var(--paper);
padding: clamp(44px, 5.5vw, 84px) clamp(24px, 4vw, 64px);
display: flex; flex-direction: column; justify-content: center;
}
.contact__right h2 { font-family: var(--f-display); font-size: var(--d-2); font-weight: 600; margin-bottom: 6px; }
.contact__right > p { font-size: var(--t-sm); color: var(--text-2); margin-bottom: var(--s-8); }
.ctaband {
position: relative; isolation: isolate; overflow: hidden;
background: var(--ink); color: var(--on-dark-2);
padding: clamp(64px, 8vw, 120px) var(--gutter); text-align: center;
}
.ctaband::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(ellipse 70% 100% at 50% 0%, rgba(0,87,255,.24) 0%, transparent 62%),
radial-gradient(ellipse 50% 80% at 82% 100%, rgba(216,188,126,.08) 0%, transparent 60%);
}
.ctaband h2 { font-family: var(--f-display); font-size: var(--d-1); font-weight: 600; color: var(--on-dark); line-height: 1.1; margin-bottom: var(--s-4); }
.ctaband h2 em { font-style: italic; color: var(--blue-lift); display: block; }
.ctaband p { font-size: var(--t-lg); color: var(--on-dark-3); margin: 0 auto var(--s-10); max-width: 52ch; }
.ctaband__row { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.infostrip {
background: var(--ink); color: var(--on-dark-2);
border-top: 1px solid var(--ink-hairline);
padding: var(--s-16) var(--gutter);
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-12);
}
.infostrip__label { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-lift); margin-bottom: 12px; }
.infostrip a, .infostrip p { display: block; font-size: var(--t-md); font-weight: 500; color: var(--on-dark-3); margin-bottom: 5px; transition: color .25s var(--ease); }
.infostrip a:hover { color: var(--on-dark); }
.infostrip small { display: block; font-size: var(--t-sm); color: var(--on-dark-2); margin-top: 3px; }
.footer {
background: var(--ink); color: var(--on-dark-3);
border-top: 1px solid var(--ink-hairline);
padding: var(--s-6) var(--gutter);
display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
}
.footer__copy { font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: .05em; }
.footer__links { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.footer__links a { font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: color .25s var(--ease); }
.footer__links a:hover { color: var(--blue-lift); }
.floaties { position: fixed; inset-inline-end: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 900; display: flex; flex-direction: column; gap: 10px; }
.fab {
width: 46px; height: 46px; border-radius: var(--r-md);
display: grid; place-items: center; color: #fff;
box-shadow: 0 8px 26px rgba(0,0,0,.34);
opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
transition: opacity .35s var(--ease), transform .35s var(--spring), visibility .35s, background-color .25s var(--ease);
}
.fab[data-show="true"] { opacity: 1; visibility: visible; transform: none; }
.fab svg { width: 20px; height: 20px; }
.fab--top { background: var(--blue); }
.fab--top:hover { background: var(--blue-deep); transform: translateY(-3px); }
.fab--wa { background: #25D366; opacity: 1; visibility: visible; transform: none; }
.fab--wa:hover { background: #1eb757; transform: translateY(-3px); }
.fab--wa svg { width: 23px; height: 23px; fill: currentColor; }
.fab--wa { position: relative; }
.fab--wa[data-cc]::after {
content: attr(data-cc); position: absolute;
inset-block-end: -3px; inset-inline-end: -3px;
background: var(--ink); color: #fff; border: 1.5px solid #fff;
font: 700 9px/1 var(--f-sans, system-ui); letter-spacing: .04em;
padding: 3px 4px; border-radius: 5px; pointer-events: none;
}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo); }
.reveal[data-in="true"] { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }
.no-js .reveal { opacity: 1; transform: none; }
.auth {
min-height: 100vh; min-height: 100svh;
display: grid; place-items: center;
padding: var(--s-12) var(--gutter);
background: var(--ink);
position: relative; isolation: isolate;
}
.auth::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,87,255,.22) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 50% 100%, rgba(216,188,126,.07) 0%, transparent 60%);
}
.auth::after {
content: ''; position: absolute; inset: 0; z-index: -1; opacity: .45;
background-image:
linear-gradient(rgba(200,212,232,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,212,232,.04) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 78%);
}
.auth__inner { width: 100%; max-width: 460px; }
.auth__head { text-align: center; margin-bottom: var(--s-10); }
.auth__head img { height: 42px; width: auto; margin: 0 auto var(--s-6); object-fit: contain; }
.auth__head h1 { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 600; color: var(--on-dark); line-height: 1.1; margin-bottom: 8px; }
.auth__head p { font-size: var(--t-sm); color: var(--on-dark-3); }
.auth__card, .card, .cvpanel, .form-card, .side-card { --link: var(--blue); }
.auth__card {
background: var(--paper); border-radius: var(--r-xl);
padding: clamp(28px, 4vw, 44px);
box-shadow: 0 32px 80px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.2);
}
.auth__card .field { margin-bottom: var(--s-5); }
.auth__foot { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--rule); text-align: center; font-size: var(--t-sm); color: var(--text-2); }
.auth__foot a { color: var(--blue); font-weight: 600; }
.auth__foot a:hover { text-decoration: underline; }
.auth__back { display: block; text-align: center; margin-top: var(--s-6); font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); transition: color .25s var(--ease); }
.auth__back:hover { color: var(--on-dark); }
.pw-wrap { position: relative; }
.pw-toggle {
position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
width: 34px; height: 34px; border-radius: var(--r-xs); display: grid; place-items: center;
color: var(--text-3); transition: color .2s var(--ease), background-color .2s var(--ease);
}
.pw-toggle:hover { color: var(--text); background: var(--paper-soft); }
.pw-toggle svg { width: 17px; height: 17px; }
.pw-meter { display: flex; gap: 4px; margin-top: 8px; }
.pw-meter i { flex: 1; height: 3px; border-radius: 2px; background: var(--rule-strong); transition: background-color .3s var(--ease); }
.pw-meter[data-score="1"] i:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-score="2"] i:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-score="3"] i:nth-child(-n+3) { background: #B58B00; }
.pw-meter[data-score="4"] i { background: var(--success); }
.dash { min-height: 100vh; background: var(--paper-soft); }
.dash__bar {
position: sticky; top: 0; z-index: 100;
background: var(--ink); border-bottom: 1px solid var(--ink-hairline);
padding: var(--s-4) var(--gutter);
display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
}
.dash__bar img { height: 32px; width: auto; object-fit: contain; }
.dash__brand { display: flex; align-items: center; gap: 11px; }
.dash__who { display: flex; align-items: center; gap: var(--s-4); }
.dash__who span { font-size: var(--t-sm); color: var(--on-dark-3); }
.dash__who strong { color: var(--on-dark); font-weight: 600; }
.dash__main { padding: var(--s-12) var(--gutter) var(--s-20); max-width: var(--maxw); margin-inline: auto; }
.dash__title { font-family: var(--f-display); font-size: var(--d-2); font-weight: 600; margin-bottom: 6px; }
.dash__sub { font-size: var(--t-sm); color: var(--text-2); margin-bottom: var(--s-10); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-12); }
.kpi { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-6); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.kpi:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.kpi__label { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.kpi__val { font-family: var(--f-display); font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi__meta { font-size: var(--t-xs); color: var(--text-3); margin-top: 6px; }
.panel { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-8); }
.panel__head { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.panel__head h2 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; }
.panel__body { padding: var(--s-6); }
.panel__body--flush { padding: 0; }
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data th {
text-align: start; padding: 13px var(--s-6); background: var(--paper-soft);
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .13em; text-transform: uppercase; color: var(--text-3);
border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.data td { padding: 15px var(--s-6); border-bottom: 1px solid var(--rule); color: var(--text-2); vertical-align: top; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background-color .2s var(--ease); }
table.data tbody tr:hover { background: var(--paper-soft); }
table.data td strong { color: var(--text); font-weight: 600; }
.empty { text-align: center; padding: var(--s-16) var(--s-6); color: var(--text-3); }
.empty svg { width: 40px; height: 40px; margin: 0 auto var(--s-4); color: var(--rule-strong); }
.empty p { font-size: var(--t-sm); }
.chip { display: inline-block; font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); }
.chip--new  { background: var(--blue-wash);    color: var(--blue);    border: 1px solid rgba(0,87,255,.2); }
.chip--ok   { background: var(--success-wash); color: var(--success); border: 1px solid rgba(6,118,71,.2); }
.chip--warn { background: var(--warn-wash);    color: #8F3806;        border: 1px solid rgba(181,71,8,.24); }
.spinner {
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--rule-strong); border-top-color: var(--blue);
animation: spin .7s linear infinite; margin: 0 auto;
}
.spinner--sm { width: 15px; height: 15px; border-width: 1.6px; }
.spinner--on-blue { border-color: rgba(255,255,255,.34); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.prose { max-width: 78ch; margin-inline: auto; }
.prose h2 { font-family: var(--f-display); font-size: var(--d-2); font-weight: 600; margin: var(--s-12) 0 var(--s-4); line-height: 1.2; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-lg); font-weight: 600; margin: var(--s-8) 0 var(--s-3); }
.prose p, .prose li { font-size: var(--t-md); line-height: 1.85; color: var(--text-2); }
.prose p { margin-bottom: var(--s-4); }
.prose ul { margin: 0 0 var(--s-4); display: flex; flex-direction: column; gap: 9px; }
.prose ul li { position: relative; padding-inline-start: 20px; }
.prose ul li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: .55; }
.prose a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text); font-weight: 600; }
@media (max-width: 1180px) {
.svc-layout { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 0; }
.svc-intro  { grid-column: 1; grid-row: auto; }
.svc-list   { grid-column: 1; grid-row: auto; }
.svc-visual { display: none; }
.svc__media { display: block; margin-top: var(--s-4); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--ink-hairline); height: 240px; }
.split { grid-template-columns: 1fr; }
.contact { grid-template-columns: 1fr; }
.card-grid--3 { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); }
.kpis { grid-template-columns: repeat(2, 1fr); }
.stages { grid-template-columns: 1fr; }
.statband { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) 0; }
.statband__item:nth-child(2n) { border-inline-end: none; text-align: end; }
.statband__item:nth-child(2n+1) { text-align: start; padding-inline-start: 0; }
.infostrip { grid-template-columns: 1fr; gap: var(--s-8); text-align: center; }
.contact__row { justify-content: center; }
.pagehero__stats { grid-template-columns: repeat(2, 1fr); }
.pagehero__stat:nth-child(2n) { border-inline-end: none; }
.pagehero__stat:nth-child(n+3) { padding-top: var(--s-5); }
}
@media (max-width: 780px) {
:root { --nav-h: 64px; }
.nav__cta { padding: 9px 15px; }
.nav__cta .is-full { display: none; }
.nav__cta .is-short { display: inline; }
.socialbar { justify-content: center; padding: 10px var(--gutter); }
.socialbar__text { display: none; }
.hero { padding-bottom: var(--s-16); }
.hero__foot { flex-direction: column; align-items: stretch; gap: var(--s-6); margin-top: var(--s-8); padding-top: var(--s-6); }
.hero__sub { max-width: 100%; }
.hero__actions { flex-direction: column; }
.hero__actions .btn { width: 100%; }
.hero__scroll { display: none; }
.hide-sm { display: none; }
.card-grid--2, .card-grid--3 { grid-template-columns: 1fr; }
.rsum { grid-template-columns: repeat(2, 1fr); }
.form-row, .form-row--phone { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr; }
.kpis { grid-template-columns: 1fr; }
.footer {
flex-direction: column; text-align: center;
padding-bottom: calc(46px * 2 + 10px + 28px);
}
.footer__links { justify-content: center; gap: 14px 18px; }
.footer__copy { max-width: 34ch; margin-inline: auto; line-height: 1.7; }
.svc__body { padding-inline-start: 0; }
.ctaband__row .btn { width: 100%; }
table.data th, table.data td { padding-inline: var(--s-4); }
.pagehero__stats { border-top: none; }
.pagehero__stat { border-inline-end: none; border-top: 1px solid var(--ink-hairline); padding-inline: 0; padding-top: var(--s-4); }
}
@media (max-width: 460px) {
.nav__badge { display: none; }
.statband { grid-template-columns: 1fr; }
.statband__item { border-inline-end: none; text-align: start !important; padding-inline: 0 !important; }
.rsum { grid-template-columns: 1fr; }
.split__pills { position: static; margin-top: var(--s-3); }
.trust { gap: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
.reveal { opacity: 1 !important; transform: none !important; }
.marquee__track { animation: none; }
}
@media print {
.nav, .drawer, .socialbar, .floaties, .marquee, .hero__media, .hero__scroll { display: none !important; }
body { background: #fff; color: #000; }
.section--dark, .ctaband, .infostrip, .footer, .contact__left { background: #fff !important; color: #000 !important; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}
.dash-hero {
position: relative; isolation: isolate; overflow: hidden;
background: var(--ink); color: var(--on-dark-2);
border-radius: var(--r-xl);
padding: clamp(28px, 4vw, 48px);
margin-bottom: var(--s-8);
}
.dash-hero::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(ellipse 62% 120% at 88% 0%, rgba(0,87,255,.30) 0%, transparent 62%),
radial-gradient(ellipse 50% 100% at 8% 100%, rgba(216,188,126,.10) 0%, transparent 60%);
}
.dash-hero::after {
content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
background-image:
linear-gradient(rgba(200,212,232,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,212,232,.05) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 80% 90% at 70% 20%, #000, transparent 76%);
-webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 20%, #000, transparent 76%);
}
.dash-hero h1 { font-family: var(--f-display); font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 600; color: var(--on-dark); line-height: 1.1; margin-bottom: 10px; }
.dash-hero h1 em { font-style: italic; color: var(--blue-lift); }
.dash-hero p { font-size: var(--t-md); color: var(--on-dark-3); max-width: 58ch; }
.dash-hero__row { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }
.dash-hero__badge {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-4);
padding: 6px 12px; border-radius: var(--r-pill);
background: rgba(255,255,255,.06); border: 1px solid var(--ink-hairline);
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2);
}
.dash-hero__badge i { width: 6px; height: 6px; border-radius: 50%; background: #38D39F; box-shadow: 0 0 0 3px rgba(56,211,159,.22); }
.kpi { position: relative; overflow: hidden; }
.kpi::after {
content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
background: linear-gradient(90deg, var(--blue), var(--blue-lift));
transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-expo);
}
.kpi:hover::after { transform: scaleX(1); }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: 10px; }
.kpi__mark { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--blue-wash); color: var(--blue); flex-shrink: 0; }
.kpi__mark svg { width: 15px; height: 15px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.tile {
position: relative; display: block; overflow: hidden;
border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--ink);
aspect-ratio: 16 / 10;
transition: transform .4s var(--ease-expo), box-shadow .4s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; transition: transform .7s var(--ease-expo), opacity .4s var(--ease); }
.tile:hover img { transform: scale(1.06); opacity: .62; }
.tile__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,13,26,.94) 12%, rgba(5,13,26,.25) 62%, transparent 100%); }
.tile__body { position: absolute; inset: auto 0 0 0; padding: var(--s-5); }
.tile__scrim { pointer-events: none; }
.tile__eyebrow { display: block; font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-lift); margin-bottom: 4px; }
.tile__title { display: block; font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; color: #fff; line-height: 1.15; }
.tile__go { position: absolute; top: var(--s-4); inset-inline-end: var(--s-4); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid var(--ink-hairline); color: #fff; transition: background-color .3s var(--ease), transform .3s var(--spring); }
.tile:hover .tile__go { background: var(--blue); transform: translateX(2px); }
.tile__go svg { width: 13px; height: 13px; }
.timeline { position: relative; padding-inline-start: 26px; }
.timeline::before { content: ''; position: absolute; inset-inline-start: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--rule); }
.timeline__row { position: relative; padding-bottom: var(--s-5); }
.timeline__row:last-child { padding-bottom: 0; }
.timeline__row::before {
content: ''; position: absolute; inset-inline-start: -26px; top: 5px; width: 14px; height: 14px;
border-radius: 50%; background: var(--paper); border: 2px solid var(--blue);
}
.timeline__row[data-tone="muted"]::before { border-color: var(--rule-strong); }
.timeline__title { font-size: var(--t-md); font-weight: 600; margin-bottom: 2px; }
.timeline__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); }
.timeline__body { font-size: var(--t-sm); color: var(--text-2); line-height: 1.7; margin-top: 6px; }
.dash-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-5); align-items: start; }
.side-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-6); }
.side-card h3 { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 6px; }
.side-card p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.7; }
.side-card__rows { display: flex; flex-direction: column; gap: 11px; margin-top: var(--s-5); }
.side-card__rows a, .side-card__rows span { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); color: var(--text-2); }
.side-card__rows svg { width: 15px; height: 15px; color: var(--blue); flex-shrink: 0; }
.side-card__rows a:hover { color: var(--blue); }
.attn { display: flex; flex-direction: column; gap: 14px; }
.attn__row { display: flex; flex-direction: column; gap: 6px; }
.attn__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.attn__name { font-size: var(--t-sm); font-weight: 600; }
.attn__val { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); }
.attn__track { height: 7px; border-radius: 4px; background: var(--paper-tint); overflow: hidden; }
.attn__fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--blue-lift)); }
@media (max-width: 1180px) {
.dash-split { grid-template-columns: 1fr; }
.tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
.tiles { grid-template-columns: 1fr; }
}
.cvpanel {
margin: var(--s-5) 0;
padding: var(--s-6);
border: 1px solid var(--rule-strong);
border-radius: var(--r-md);
background: var(--paper);
}
.cvpanel__head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: var(--s-5); }
.cvpanel__icon {
flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r-sm);
display: grid; place-items: center; background: var(--blue-wash); color: var(--blue);
}
.cvpanel__icon svg { width: 19px; height: 19px; }
.cvpanel__title { display: block; font-size: var(--t-md); font-weight: 600; color: var(--text); }
.cvpanel__sub { display: block; font-size: var(--t-sm); color: var(--text-3); }
.u-mt-0    { margin-top: 0; }
.u-mt-1    { margin-top: 8px; }
.u-mt-2    { margin-top: 9px; }
.u-mt-3    { margin-top: 18px; }
.u-mt-4    { margin-top: 26px; }
.u-mt-5    { margin-top: 34px; }
.u-mt-6    { margin-top: 44px; }
.u-mb-0    { margin-bottom: 0; }
.u-mb-4    { margin-bottom: var(--s-4); }
.u-mb-5    { margin-bottom: 20px; }
.u-mb-8    { margin-bottom: var(--s-8); }
.u-m-0     { margin: 0; }
.u-block   { display: block; }
.u-center  { text-align: center; }
.u-left    { text-align: start; }
.u-grow    { flex: 1; }
.u-lg      { font-size: 1.1rem; }
.u-sm      { font-size: var(--t-sm); }
.u-quiet   { font-size: var(--t-sm); color: var(--text-3); }
.u-link    { color: var(--link); font-weight: 600; }
.u-link-2  { color: var(--link); font-weight: 500; }
.u-lift    { color: var(--blue-lift); }
.u-plain   { text-transform: none; letter-spacing: 0; font-weight: 400; }
.u-under   { color: inherit; text-decoration: underline; }
.u-pad-r   { padding-inline-end: 46px; }
.u-pad-l   { padding-inline-start: 56px; }
.u-pin-br  { position: absolute; inset: auto 24px 24px; }
.u-pad-sm  { padding: 9px 18px; }
.u-pad-md  { padding: 10px 20px; }
.u-pad-y   { padding: 28px 0; }
.u-pad-lg  { padding: 40px 20px; }
.u-empty   { text-align: center; padding: 32px; }
.u-icon-32 { width: 32px; height: 32px; }
.u-quote {
font-size: 13px; line-height: 1.65; color: var(--on-dark-2);
font-style: italic; margin-bottom: 8px;
}
.u-callout {
padding: 22px 26px; background: var(--blue-wash);
border-inline-start: 3px solid var(--blue);
border-radius: 0 var(--r-md) var(--r-md) 0; margin-bottom: 36px;
}
.u-disc {
width: 70px; height: 70px; margin: 0 auto 28px; border-radius: 50%;
background: var(--blue); display: grid; place-items: center;
box-shadow: 0 12px 40px rgba(0, 87, 255, .42);
}
.site-header { display: contents; }
.page-foot { display: block; }
.link-quiet {
display: inline-block; padding: 8px 4px; min-height: 24px;
font-size: var(--t-sm); color: var(--text-2);
text-decoration: underline; text-underline-offset: 2px;
}
.link-quiet:hover { color: var(--text); }
.u-x01 { border:0; padding-inline:0; }
.u-x02 { display:block; margin-top:10px; font-weight:500; color:var(--warn); }
.u-x03 { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.u-x04 { display:inline-block; margin-top:8px; }
.u-x05 { font-family:var(--f-display); font-size:1.5rem; font-weight:600; }
.u-x06 { font-size:1.4rem; font-family:var(--f-body); font-weight:600; }
.u-x07 { font-size:1.5rem; }
.u-x08 { font-size:2rem; }
.u-x09 { font-size:var(--d-1); }
.u-x10 { font-size:var(--t-lg); color:var(--on-dark-3); line-height:1.75; margin:20px auto 40px; max-width:46ch; }
.u-x11 { font-size:var(--t-xs); color:var(--text-3); margin-top:2px; }
.u-x12 { justify-content:center; margin:0 auto 14px; }
.u-x13 { margin-bottom:12px; }
.u-x14 { margin-bottom:var(--s-10); }
.u-x15 { margin-bottom:var(--s-12); }
.u-x16 { margin-top:0; }
.u-x17 { margin-top:18px; text-align:center; }
.u-x18 { margin-top:20px; }
.u-x19 { margin-top:20px; max-width:34ch; }
.u-x20 { margin-top:32px; }
.u-x21 { margin-top:40px; }
.u-x22 { margin-top:44px; padding-top:28px; border-top:1px solid var(--ink-hairline); font-family:var(--f-label); font-size:var(--t-xs); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-3); }
.u-x23 { margin-top:56px; align-items:start; }
.u-x24 { margin-top:6px; }
.u-x25 { margin:0 auto 40px; }
.u-x26 { max-width:420px; }
.u-x27 { max-width:500px; }
.u-x28 { max-width:560px; text-align:center; }
.u-cell { max-width: 34ch; }
.u-ml   { margin-inline-start: 6px; }
.u-offscreen {
position: absolute !important; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.chip--muted { background: var(--paper-tint); color: var(--text-3); border: 1px solid var(--rule); }
.verifybar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-5); flex-wrap: wrap;
padding: 13px var(--gutter);
background: var(--ink-raise);
border-bottom: 1px solid var(--ink-hairline);
--link: var(--blue-lift);
}
.verifybar__text {
font-size: var(--t-sm); line-height: 1.6; color: var(--on-dark-2, #C6D2E4);
max-width: 84ch;
}
.verifybar__text strong { color: #fff; font-weight: 600; }
.reqs { display: flex; flex-direction: column; gap: var(--s-4); }
.req {
border: 1px solid var(--rule); border-radius: var(--r-md);
padding: var(--s-5); background: var(--paper);
transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.req:hover { border-color: var(--rule-strong); box-shadow: var(--sh-1); }
.req[data-status="awaiting"] { border-inline-start: 3px solid var(--warn); }
.req[data-status="completed"] { border-inline-start: 3px solid var(--success); }
.req[data-status="closed"] { opacity: .72; }
.req__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.req__title { font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.req__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); margin-top: 3px; }
.req__say { font-size: var(--t-sm); color: var(--text-2); line-height: 1.7; }
.req__body {
font-size: var(--t-sm); color: var(--text-3); line-height: 1.7;
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule);
}
.track { display: flex; margin: var(--s-4) 0 var(--s-5); padding: 0; list-style: none; }
.track__step { position: relative; flex: 1; padding-top: 20px; text-align: center; min-width: 0; }
.track__step::before {
content: ''; position: absolute; top: 5px; inset-inline-start: -50%; width: 100%; height: 2px;
background: var(--rule);
}
.track__step:first-child::before { display: none; }
.track__dot {
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 12px; height: 12px; border-radius: 50%;
background: var(--paper); border: 2px solid var(--rule-strong);
transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.track__label {
display: block; font-family: var(--f-label); font-size: var(--t-2xs);
font-weight: 600; letter-spacing: .06em; color: var(--text-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px;
}
.track__step[data-state="done"]::before,
.track__step[data-state="at"]::before { background: var(--blue); }
.track__step[data-state="done"] .track__dot { background: var(--blue); border-color: var(--blue); }
.track__step[data-state="at"] .track__dot {
background: var(--blue); border-color: var(--blue);
box-shadow: 0 0 0 4px var(--blue-wash);
}
.track__step[data-state="at"] .track__label { color: var(--blue); font-weight: 700; }
.track__step[data-state="done"] .track__label { color: var(--text-2); }
.docs { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; }
.doc {
display: flex; align-items: center; gap: var(--s-4);
flex-wrap: wrap; row-gap: 10px;
padding: 13px var(--s-3); border-radius: var(--r-sm);
transition: background-color .2s var(--ease);
}
.doc:hover { background: var(--paper-soft); }
.doc__icon {
flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-sm);
display: grid; place-items: center;
background: var(--paper-tint); color: var(--text-2);
}
.doc[data-dir="out"] .doc__icon { background: var(--blue-wash); color: var(--blue); }
.doc__main { flex: 1 1 190px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc__actions {
display: flex; align-items: center; gap: 8px;
flex: 0 0 auto; margin-inline-start: auto;
}
.doc__name {
font-size: var(--t-sm); font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); }
.doc__note { font-size: var(--t-xs); color: var(--text-2); line-height: 1.6; margin-top: 3px; }
.doc__get {
flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-sm);
display: grid; place-items: center; color: var(--text-3);
border: 1px solid var(--rule);
transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.doc__get:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-wash); }
.doc[data-unseen="true"] {
border-inline-start: 3px solid var(--blue);
background: var(--blue-wash);
}
.doc__new {
display: inline-block; vertical-align: 2px; margin-inline-start: 8px;
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: #fff; background: var(--blue);
padding: 2px 7px; border-radius: 999px;
}
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button {
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
padding: 7px 14px; border-radius: var(--r-pill);
border: 1px solid var(--rule); background: var(--paper); color: var(--text-3);
transition: all .25s var(--ease); min-height: 30px;
}
.filters button:hover { border-color: var(--rule-strong); color: var(--text-2); }
.filters button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.dl-strip {
display: grid; grid-auto-flow: column; justify-content: start; grid-auto-columns: minmax(178px, 258px);
gap: var(--s-4); overflow-x: auto; padding-bottom: var(--s-2);
scroll-snap-type: x proximity;
}
.dl-wrap { position: relative; }
.dl-wrap::after {
content: ''; position: absolute; top: 0; bottom: 10px; inset-inline-end: 0; width: 52px;
background: linear-gradient(to var(--flow-end, right), rgba(255,255,255,0), var(--paper));
pointer-events: none;
}
.dl {
scroll-snap-align: start;
border: 1px solid var(--rule); border-radius: var(--r-md);
padding: var(--s-5); background: var(--paper);
border-top: 3px solid var(--rule-strong);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dl:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.dl__count {
font-family: var(--f-display); font-size: 1.7rem; font-weight: 600;
line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
}
.dl__label { font-size: var(--t-sm); font-weight: 600; margin-top: 10px; line-height: 1.35; }
.dl__period { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); margin-top: 3px; }
.dl__due { font-size: var(--t-sm); color: var(--text-2); margin-top: 10px; font-weight: 500; }
.dl__who { font-size: var(--t-xs); color: var(--text-3); margin-top: 4px; line-height: 1.5; }
.dl[data-urgency="now"]  { border-top-color: var(--danger); }
.dl[data-urgency="now"]  .dl__count { color: var(--danger); }
.dl[data-urgency="soon"] { border-top-color: var(--warn); }
.dl[data-urgency="soon"] .dl__count { color: var(--warn); }
.dl[data-urgency="far"]  { border-top-color: var(--blue); }
.up { display: flex; flex-direction: column; gap: var(--s-4); }
.up__zone {
position: relative; border: 1.5px dashed var(--rule-strong);
border-radius: var(--r-md); background: var(--paper-soft);
padding: var(--s-10) var(--s-5); text-align: center;
transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.up__zone[data-over="true"] { border-color: var(--blue); background: var(--blue-wash); }
.up__zone svg { width: 30px; height: 30px; color: var(--text-3); margin: 0 auto 12px; display: block; }
.up__zone[data-over="true"] svg { color: var(--blue); }
.up__lead { display: block; font-size: var(--t-md); font-weight: 600; color: var(--text); }
.up__hint { display: block; font-size: var(--t-xs); color: var(--text-3); margin-top: 6px; line-height: 1.6; max-width: 46ch; margin-inline: auto; }
.up__input {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: pointer;
}
.up__input:focus-visible + .up__face { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: var(--r-sm); }
.up__input:disabled { cursor: not-allowed; }
.upq { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; }
.upq__row {
display: grid; grid-template-columns: auto 1fr auto auto;
align-items: center; gap: var(--s-3);
padding: 10px 12px; border: 1px solid var(--rule);
border-radius: var(--r-sm); background: var(--paper);
}
.upq__icon { color: var(--text-3); display: grid; place-items: center; }
.upq__name {
font-size: var(--t-sm); font-weight: 500; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upq__size { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); white-space: nowrap; }
.upq__bar {
grid-column: 1 / -1; height: 3px; border-radius: 2px;
background: var(--paper-tint); overflow: hidden;
display: none;
}
[data-up-queue][data-sending="true"] .upq__bar { display: block; }
.upq__bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .25s var(--ease); }
.upq__x {
width: 26px; height: 26px; border-radius: var(--r-xs);
font-size: 17px; line-height: 1; color: var(--text-3);
transition: color .2s var(--ease), background-color .2s var(--ease);
}
.upq__x:hover { color: var(--danger); background: var(--danger-wash); }
.up__row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; }
.up__row .field { flex: 1; min-width: 180px; }
.up__safe {
display: flex; align-items: center; gap: 9px;
font-size: var(--t-xs); color: var(--text-3); line-height: 1.6;
}
.up__safe svg { width: 15px; height: 15px; color: var(--success); flex-shrink: 0; }
@media (max-width: 640px) {
.track__label { display: none; }
.track__step { padding-top: 16px; }
.req__top { flex-direction: column; gap: var(--s-3); }
.doc { flex-wrap: wrap; }
.dl-strip { grid-auto-columns: minmax(180px, 82%); }
}
.dash-split--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 1180px) {
.dash-split--even { grid-template-columns: 1fr; }
}
.up__face { display: block; pointer-events: none; }
.console { display: grid; grid-template-columns: 320px 1fr; gap: var(--s-5); align-items: start; }
.clist { display: flex; flex-direction: column; max-height: 620px; overflow-y: auto; }
.clist__item {
display: block; width: 100%; text-align: start;
padding: 13px var(--s-5); border-bottom: 1px solid var(--rule);
transition: background-color .2s var(--ease);
}
.clist__item:hover { background: var(--paper-soft); }
.clist__item[aria-current="true"] { background: var(--blue-wash); box-shadow: inset 3px 0 0 var(--blue); }
.clist__name { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.clist__mail {
display: block; font-family: var(--f-label); font-size: var(--t-xs);
color: var(--text-3); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clist__tags { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.csearch { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); }
.csearch input { width: 100%; }
.setstatus { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.setstatus .field { flex: 1; min-width: 150px; }
@media (max-width: 1180px) {
.console { grid-template-columns: 1fr; }
.clist { max-height: 320px; }
}
.stars svg[data-on="false"] { opacity: .22; }
.review__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap;
}
.review__head .review__tag { margin-bottom: 0; }
.review__badge {
display: inline-flex; align-items: center; gap: 5px;
flex-shrink: 0;
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: #38D39F; padding: 4px 9px; border-radius: var(--r-pill);
background: rgba(56, 211, 159, .1); border: 1px solid rgba(56, 211, 159, .28);
}
.review__badge svg { width: 12px; height: 12px; }
.rempty {
grid-column: 1 / -1; text-align: center;
padding: clamp(40px, 6vw, 72px) var(--s-6);
border: 1px dashed var(--ink-hairline-2); border-radius: var(--r-lg);
background: rgba(255, 255, 255, .022);
}
.rempty svg { color: var(--on-dark-3); opacity: .5; margin: 0 auto var(--s-5); display: block; }
.rempty__lead { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; color: var(--on-dark); }
.rempty__sub {
font-size: var(--t-sm); line-height: 1.85; color: var(--on-dark-3);
max-width: 56ch; margin: 12px auto 0;
}
.rcta {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-5); flex-wrap: wrap;
margin-top: var(--s-10); padding: var(--s-6) var(--s-8);
border: 1px solid var(--ink-hairline); border-radius: var(--r-lg);
background: rgba(255, 255, 255, .03);
}
.rcta__lead { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; color: var(--on-dark); }
.rcta__sub { font-size: var(--t-sm); color: var(--on-dark-3); margin-top: 4px; }
.rform-wrap {
margin-top: var(--s-5); padding: var(--s-8);
border: 1px solid var(--ink-hairline); border-radius: var(--r-lg);
background: var(--ink-raise);
}
.rform-wrap[hidden] { display: none; }
.rform__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-bottom: var(--s-5); }
.rform .field > label,
.rform .rate legend { color: var(--on-dark-2); }
.rform input, .rform textarea, .rform select {
background: rgba(255, 255, 255, .04);
border-color: var(--ink-hairline-2);
color: var(--on-dark);
}
.rform input::placeholder, .rform textarea::placeholder { color: var(--on-dark-3); opacity: .7; }
.rform input:focus, .rform textarea:focus, .rform select:focus { border-color: var(--blue-lift); background: rgba(255,255,255,.06); }
.rform .field-hint { color: var(--on-dark-3); }
.rform .form-note { color: var(--on-dark-3); }
.rform .field { margin-bottom: var(--s-5); }
.rate { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.rate legend {
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; padding: 0;
}
.rate__row { display: flex; gap: 8px; }
.rate__opt { position: relative; }
.rate__opt input {
position: absolute; inset: 0; width: 100%; height: 100%;
margin: 0; opacity: 0; cursor: pointer;
}
.rate__opt span {
display: grid; place-items: center; width: 46px; height: 46px;
border-radius: var(--r-sm); border: 1px solid var(--ink-hairline-2);
font-family: var(--f-display); font-size: 1.25rem; font-weight: 600;
color: var(--on-dark-3); transition: all .2s var(--ease);
}
.rate__opt:hover span { border-color: var(--champagne-dim); color: var(--champagne); }
.rate__opt input:checked ~ span,
.rate__opt:has(~ .rate__opt input:checked) span {
background: var(--champagne); border-color: var(--champagne); color: var(--ink); font-weight: 700;
}
.rate__opt input:focus-visible ~ span { outline: 2px solid var(--blue-lift); outline-offset: 2px; }
.rthanks { text-align: center; padding: var(--s-8) var(--s-4); }
.rthanks:focus { outline: none; }
.rthanks strong { display: block; font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; color: var(--on-dark); margin-top: var(--s-4); }
.rthanks span { display: block; font-size: var(--t-sm); color: var(--on-dark-3); line-height: 1.8; max-width: 48ch; margin: 10px auto 0; }
.rthanks .form-done__mark { margin-inline: auto; }
@media (max-width: 780px) {
.rform__grid { grid-template-columns: 1fr; }
.rcta { flex-direction: column; align-items: flex-start; }
}
.modq { display: flex; flex-direction: column; gap: var(--s-4); }
.modq__row { border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5); }
.modq__row[data-status="pending"] { border-inline-start: 3px solid var(--warn); }
.modq__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: 10px; }
.modq__who { font-size: var(--t-md); font-weight: 600; }
.modq__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); margin-top: 2px; }
.modq__body { font-size: var(--t-sm); line-height: 1.75; color: var(--text-2); margin: 10px 0 var(--s-4); }
.modq .stars { color: var(--champagne); }
.modq__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.chip--danger { background: var(--danger-wash); color: var(--danger); border: 1px solid rgba(213,44,31,.22); }
.invs { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; }
.inv {
display: flex; align-items: center; gap: var(--s-4);
padding: 15px var(--s-3); border-radius: var(--r-sm);
transition: background-color .2s var(--ease);
}
.inv:hover { background: var(--paper-soft); }
.inv[data-status="overdue"] { box-shadow: inset 3px 0 0 var(--danger); }
.inv[data-status="paid"] { background: var(--paper-soft); }
.inv[data-status="paid"]:hover { background: var(--paper-tint); }
.inv__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inv__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv__num { font-family: var(--f-label); font-size: var(--t-sm); font-weight: 700; color: var(--text); letter-spacing: .02em; }
.inv__meta { font-size: var(--t-xs); color: var(--text-3); }
.inv__note { font-size: var(--t-xs); color: var(--text-2); line-height: 1.6; margin-top: 3px; }
.inv__amount {
flex-shrink: 0; text-align: end;
font-family: var(--f-display); font-size: 1.3rem; font-weight: 600;
color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.inv__amount small { display: block; font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
.inv__open {
flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-sm);
display: grid; place-items: center; color: var(--text-3); border: 1px solid var(--rule);
transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.inv__open:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-wash); }
.lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-4); }
.line {
display: grid; grid-template-columns: 1fr 80px 130px auto auto;
gap: 8px; align-items: center;
}
.line input { min-width: 0; }
.line__amt { font-family: var(--f-label); font-size: var(--t-sm); text-align: end; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.line__x {
width: 30px; height: 30px; border-radius: var(--r-xs); font-size: 18px; line-height: 1;
color: var(--text-3); transition: color .2s var(--ease), background-color .2s var(--ease);
}
.line__x:hover { color: var(--danger); background: var(--danger-wash); }
.sums { display: flex; flex-direction: column; gap: 7px; padding: var(--s-4) 0; border-top: 1px solid var(--rule); margin-bottom: var(--s-4); }
.sums__row { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--text-2); }
.sums__row[data-total] { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; color: var(--text); padding-top: 8px; border-top: 1px solid var(--rule); }
@media (max-width: 780px) {
.line { grid-template-columns: 1fr auto auto; grid-template-areas: 'd d x' 'q p a'; }
.line input:nth-child(1) { grid-area: d; }
.inv { flex-wrap: wrap; }
}
.doc-sheet {
max-width: 820px; margin: var(--s-12) auto var(--s-20);
background: var(--paper); border: 1px solid var(--rule);
border-radius: var(--r-lg); padding: clamp(28px, 5vw, 64px);
box-shadow: var(--sh-2);
}
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-8); flex-wrap: wrap; margin-bottom: var(--s-10); }
.doc-head img { height: 44px; width: auto; }
.doc-head__right { text-align: end; }
.doc-title { font-family: var(--f-display); font-size: 2.2rem; font-weight: 600; line-height: 1; }
.doc-sheet .table-wrap { margin-bottom: var(--s-6); }
table.doc-lines { min-width: 420px; }
@media print {
.doc-sheet .table-wrap { overflow: visible; }
table.doc-lines { min-width: 0; }
}
.doc-num { font-family: var(--f-label); font-size: var(--t-sm); color: var(--text-3); margin-top: 6px; letter-spacing: .04em; }
.doc-parties { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-8); margin-bottom: var(--s-10); }
.doc-party__label { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.doc-party p { font-size: var(--t-sm); line-height: 1.75; color: var(--text-2); }
.doc-party strong { display: block; color: var(--text); font-size: var(--t-md); font-weight: 600; margin-bottom: 3px; }
table.doc-lines { width: 100%; border-collapse: collapse; margin-bottom: var(--s-6); }
table.doc-lines th {
text-align: start; padding: 10px 12px; border-bottom: 2px solid var(--rule-strong);
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .13em; text-transform: uppercase; color: var(--text-3);
}
table.doc-lines th:last-child, table.doc-lines td:last-child,
table.doc-lines th:nth-child(2), table.doc-lines td:nth-child(2),
table.doc-lines th:nth-child(3), table.doc-lines td:nth-child(3) { text-align: end; }
table.doc-lines td { padding: 13px 12px; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
table.doc-lines td:first-child { color: var(--text); }
.doc-sums { margin-inline-start: auto; width: min(320px, 100%); }
.doc-foot { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--rule); font-size: var(--t-xs); color: var(--text-3); line-height: 1.8; }
.doc-stamp {
display: inline-block; margin-bottom: var(--s-6);
font-family: var(--f-label); font-size: var(--t-sm); font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
padding: 9px 18px; border-radius: var(--r-xs); border: 2px solid currentColor;
}
.doc-stamp[data-s="paid"]    { color: var(--success); }
.doc-stamp[data-s="overdue"] { color: var(--danger); }
.doc-stamp[data-s="sent"]    { color: var(--blue); }
.doc-stamp[data-s="draft"], .doc-stamp[data-s="void"] { color: var(--text-3); }
@media print {
.dash__bar, .doc-actions, .boot { display: none !important; }
body.dash, .dash__main { background: #fff !important; padding: 0 !important; }
.doc-sheet { border: 0; box-shadow: none; margin: 0; padding: 0; max-width: none; }
table.doc-lines td, .doc-party p, .doc-foot { color: #000; }
a[href^="http"]::after { content: none; }
@page { margin: 18mm; }
}
.newinv summary { display: inline-block; cursor: pointer; list-style: none; }
.newinv summary::-webkit-details-marker { display: none; }
.newinv[open] summary { margin-bottom: var(--s-5); }
.newinv__body { padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.inv__acts { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
img[data-failed="true"] { display: none !important; }
[data-img-failed="true"] {
background-image:
radial-gradient(circle at 22% 18%, rgba(59,130,255,.16), transparent 55%),
linear-gradient(150deg, var(--ink-raise-2), var(--ink));
background-color: var(--ink);
}
.tile[data-img-failed="true"] .tile__scrim { opacity: .35; }
.tile__art {
position: absolute; inset: 0;
background-color: var(--ink-raise);
transition: transform .7s var(--ease-expo), opacity .4s var(--ease);
opacity: .9;
}
.tile:hover .tile__art { transform: scale(1.04); }
.tile__art::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(120% 90% at 18% 8%, rgba(47,110,235,.20), transparent 60%),
radial-gradient(90% 70% at 88% 92%, rgba(216,188,126,.10), transparent 62%);
}
.tile__art[data-art="ledger"] {
background-image: repeating-linear-gradient(
to bottom, rgba(255,255,255,.075) 0 1px, transparent 1px 17px);
}
.tile__art[data-art="grid"] {
background-image:
repeating-linear-gradient(to bottom, rgba(255,255,255,.07) 0 1px, transparent 1px 22px),
repeating-linear-gradient(to right,  rgba(255,255,255,.07) 0 1px, transparent 1px 22px);
}
.tile__art[data-art="rule"] {
background-image: repeating-linear-gradient(
118deg, rgba(255,255,255,.075) 0 1px, transparent 1px 15px);
}
.tile__art[data-art="bars"] {
background-image: repeating-linear-gradient(
to right, rgba(255,255,255,.09) 0 9px, transparent 9px 30px);
}
.tile__art[data-art="rings"] {
background-image:
repeating-radial-gradient(circle at 78% 76%,
rgba(255,255,255,.075) 0 1px, transparent 1px 26px);
}
.tile__art[data-art="columns"] {
background-image:
repeating-linear-gradient(to right, rgba(255,255,255,.075) 0 2px, transparent 2px 34px),
linear-gradient(to bottom, rgba(255,255,255,.05) 0 3px, transparent 3px);
}
@media (prefers-reduced-motion: reduce) {
.tile__art, .tile:hover .tile__art { transition: none; transform: none; }
}
.dash__bar--nav { gap: var(--s-6); }
.adminnav { display: flex; align-items: center; gap: var(--s-6); margin-inline-end: auto; }
.adminnav a {
position: relative; padding: 6px 0; font-size: var(--t-sm); font-weight: 500;
color: var(--on-dark-3); transition: color .25s var(--ease);
}
.adminnav a::after {
content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 0; height: 1.5px;
background: var(--blue-lift); transition: width .3s var(--ease);
}
.adminnav a:hover { color: #fff; }
.adminnav a[aria-current="page"] { color: #fff; font-weight: 600; }
.adminnav a:hover::after, .adminnav a[aria-current="page"]::after { width: 100%; }
.whoami { display: flex; align-items: center; gap: 8px; }
.whoami strong { color: var(--on-dark); font-size: var(--t-sm); font-weight: 600; }
.whoami .chip { background: rgba(255,255,255,.08); color: var(--on-dark-2); border-color: var(--ink-hairline-2); }
.burger--admin { display: none; }
.adminmenu {
display: none; flex-direction: column; gap: var(--s-3);
background: var(--ink-raise); border-bottom: 1px solid var(--ink-hairline);
padding: var(--s-5) var(--gutter);
}
.adminmenu a { font-size: var(--t-md); font-weight: 500; color: var(--on-dark-2); padding: 8px 0; }
.adminmenu a:hover, .adminmenu a[aria-current="page"] { color: var(--blue-lift); }
@media (max-width: 1000px) {
.adminnav { display: none; }
.burger--admin { display: flex; }
.adminmenu[data-open="true"] { display: flex; }
.whoami strong { display: none; }
}
.dash-hero--tight { padding-block: clamp(28px, 4vw, 44px); margin-bottom: var(--s-6); }
.gsearch { position: relative; display: flex; align-items: center; }
.gsearch svg { position: absolute; inset-inline-start: 16px; color: var(--text-3); pointer-events: none; }
.gsearch input {
width: 100%; padding-inline-start: 46px; height: 52px;
font-size: var(--t-md);
}
.gsearch input::-webkit-search-cancel-button { cursor: pointer; }
.ghits { list-style: none; padding: 0; margin-top: var(--s-4); display: flex; flex-direction: column; gap: 2px; }
.ghits a {
display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: var(--s-4);
padding: 11px var(--s-3); border-radius: var(--r-sm);
transition: background-color .2s var(--ease);
}
.ghits a:hover { background: var(--paper-soft); }
.ghits__type {
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.ghits__label { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.ghits__meta { font-size: var(--t-xs); color: var(--text-3); text-align: end; }
.queue { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.queue__row > a, .queue__row > span {
display: flex; align-items: center; gap: var(--s-4);
padding: 13px var(--s-4); border-radius: var(--r-sm);
border-inline-start: 3px solid transparent;
transition: background-color .2s var(--ease);
}
.queue__row > a:hover { background: var(--paper-soft); }
.queue__row[data-kind="late"]    > * { border-inline-start-color: var(--danger); }
.queue__row[data-kind="soon"]    > * { border-inline-start-color: var(--warn); }
.queue__row[data-kind="waiting"] > * { border-inline-start-color: var(--blue); }
.queue__row[data-kind="new"]     > * { border-inline-start-color: var(--champagne); }
.queue__icon {
flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-sm);
display: grid; place-items: center; background: var(--paper-tint); color: var(--text-2);
}
.queue__row[data-kind="late"] .queue__icon { background: var(--danger-wash); color: var(--danger); }
.queue__row[data-kind="soon"] .queue__icon { background: var(--warn-wash); color: var(--warn); }
.queue__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.queue__title { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.queue__meta { font-size: var(--t-xs); color: var(--text-3); }
.allclear { text-align: center; padding: var(--s-12) var(--s-6); }
.allclear svg { color: var(--success); margin: 0 auto var(--s-4); display: block; }
.allclear__lead { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; margin-bottom: 6px; }
.arch { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.arch__row {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
padding: 11px var(--s-3); border-radius: var(--r-sm);
}
.arch__row:hover { background: var(--paper-soft); }
.arch__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arch__label { font-size: var(--t-sm); font-weight: 600; color: var(--text); }
.arch__meta { font-size: var(--t-xs); color: var(--text-3); }
.arch__row { flex-wrap: wrap; row-gap: 10px; }
.arch__main { flex: 1 1 220px; }
.arch__acts { display: flex; gap: 8px; flex: 0 0 auto; margin-inline-start: auto; }
.btn--danger {
border: 1px solid var(--danger, #C0392B);
color: var(--danger, #C0392B);
background: transparent;
}
.btn--danger:hover {
background: var(--danger, #C0392B); border-color: var(--danger, #C0392B); color: #fff;
}
@media (max-width: 780px) {
.ghits a { grid-template-columns: 1fr; gap: 3px; }
.ghits__meta { text-align: start; }
}
.staff { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.staff__row {
display: flex; align-items: center; gap: var(--s-4);
padding: 13px var(--s-3); border-radius: var(--r-sm);
transition: background-color .2s var(--ease);
}
.staff__row:hover { background: var(--paper-soft); }
.staff__row[data-off="true"] { background: var(--paper-tint); }
.staff__row[data-off="true"] .staff__avatar { background: var(--rule-strong); color: var(--text-2); }
.staff__row[data-off="true"] .staff__name { color: var(--text-2); }
.staff__avatar {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
background: linear-gradient(140deg, var(--blue-lift), var(--blue-deep));
color: #fff; font-weight: 700; font-size: var(--t-md);
}
.staff__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.staff__name { font-size: var(--t-sm); font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.staff__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); }
.staff__acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.staff__acts select { padding: 8px 30px 8px 12px; font-size: var(--t-sm); }
.steps-doc { display: flex; flex-direction: column; gap: var(--s-8); }
.stepd { display: flex; gap: var(--s-5); align-items: flex-start; }
.stepd__n {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center; background: var(--blue); color: #fff;
font-family: var(--f-label); font-size: var(--t-sm); font-weight: 700;
}
.stepd h3 { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 8px; }
.stepd p { font-size: var(--t-sm); line-height: 1.8; color: var(--text-2); margin-bottom: 10px; max-width: 74ch; }
.stepd p:last-of-type { margin-bottom: 0; }
table.data td.yes { color: var(--success); font-weight: 600; }
table.data td.no  { color: var(--danger);  font-weight: 600; }
@media (max-width: 780px) {
.staff__row { flex-wrap: wrap; }
.staff__acts { width: 100%; }
.stepd { flex-direction: column; gap: var(--s-3); }
}
.notes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.note {
padding: var(--s-4); border-radius: var(--r-sm);
background: var(--warn-wash); border: 1px solid rgba(181,71,8,.16);
}
.note__body { font-size: var(--t-sm); line-height: 1.75; color: var(--text); white-space: pre-wrap; }
.note__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); margin-top: 8px; }
.u-right { text-align: end; }
.u-right .btn { margin-inline-start: auto; }
.doc__arch { flex-shrink: 0; }
.guide { max-width: 860px; margin-inline: auto; }
.guide__toc {
background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
padding: var(--s-6); margin-bottom: var(--s-12);
}
.guide__toc h2 { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; margin-bottom: var(--s-4); }
.guide__toc ol { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.guide__toc a { font-size: var(--t-sm); color: var(--link); font-weight: 500; }
.guide__toc a:hover { text-decoration: underline; }
.gsec { margin-bottom: var(--s-16); scroll-margin-top: 90px; }
.gsec > h2 {
font-family: var(--f-display); font-size: var(--d-2); font-weight: 600;
line-height: 1.15; margin-bottom: var(--s-3);
padding-bottom: var(--s-4); border-bottom: 2px solid var(--rule-strong);
}
.gsec h3 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; margin: var(--s-8) 0 var(--s-3); }
.gsec h4 { font-size: var(--t-md); font-weight: 700; margin: var(--s-5) 0 8px; }
.gsec p { font-size: var(--t-md); line-height: 1.85; color: var(--text-2); margin-bottom: var(--s-4); max-width: 74ch; }
.gsec strong { color: var(--text); font-weight: 600; }
.gsec ul, .gsec ol { margin: 0 0 var(--s-4); padding-inline-start: 24px; max-width: 74ch; }
.gsec ul { list-style: disc; }
.gsec ol { list-style: decimal; }
.gsec li { font-size: var(--t-md); line-height: 1.8; color: var(--text-2); margin-bottom: 9px; }
.gsec li::marker { color: var(--blue); }
.gsec a { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.do {
display: flex; gap: 14px; align-items: flex-start;
padding: var(--s-5); margin-bottom: var(--s-4);
background: var(--blue-wash); border-inline-start: 3px solid var(--blue);
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.do__n {
flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
display: grid; place-items: center; background: var(--blue); color: #fff;
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
}
.do p { margin: 0; font-size: var(--t-sm); color: var(--text); }
.warn-box {
padding: var(--s-5) var(--s-6); margin-bottom: var(--s-5);
background: var(--warn-wash); border-inline-start: 3px solid var(--warn);
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.warn-box p { margin: 0; font-size: var(--t-sm); color: var(--text); line-height: 1.8; }
.warn-box strong { display: block; margin-bottom: 4px; }
.tip-box {
padding: var(--s-5) var(--s-6); margin-bottom: var(--s-5);
background: var(--success-wash); border-inline-start: 3px solid var(--success);
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.tip-box p { margin: 0; font-size: var(--t-sm); color: var(--text); line-height: 1.8; }
.tip-box strong { display: block; margin-bottom: 4px; }
.guide kbd {
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
padding: 3px 8px; border-radius: var(--r-xs);
background: var(--paper-tint); border: 1px solid var(--rule-strong); color: var(--text);
}
.guide__cover { display: none; }
@media print {
.dash__bar, .dash__bar--nav, .adminmenu, .guide__toc, .doc-actions, .boot, .floaties { display: none !important; }
body.dash, .dash__main { background: #fff !important; padding: 0 !important; }
.guide { max-width: none; }
.guide__cover { display: block; text-align: center; padding: 30mm 0 20mm; break-after: page; }
.guide__cover-title { font-family: var(--f-display); font-size: 3rem; font-weight: 600; margin-bottom: 12px; line-height: 1.1; }
.guide__cover p { font-size: 1rem; color: #444; }
.guide__cover img { height: 54px; margin-bottom: 28px; }
.gsec { break-inside: auto; margin-bottom: 14mm; }
.gsec > h2 { break-after: avoid; }
.gsec h3, .gsec h4 { break-after: avoid; }
.do, .warn-box, .tip-box { break-inside: avoid; }
.gsec p, .gsec li { color: #222; font-size: 10.5pt; }
.guide a { color: #000; text-decoration: underline; }
.guide a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
.guide a[href^="/"]::after { content: none; }
@page { margin: 18mm 16mm; }
}
.footer__links a,
.crumbs a,
.nav__signin,
.link-arrow,
.socialbar__text a,
.infostrip a,
.guide__toc a,
.gsec > p > a,
.contact__row a {
display: inline-flex; align-items: center; min-height: 24px;
}
.footer__links a, .crumbs a, .guide__toc a { padding-block: 4px; }
@media (max-width: 400px) {
.role { flex-direction: column; align-items: flex-start; gap: 8px; }
.role__name { line-height: 1.35; }
}
@media (max-width: 520px) {
.dash__bar { flex-wrap: wrap; gap: var(--s-3); }
.dash__who { flex-wrap: wrap; }
.dash__who > span:first-child { display: none; }
}
input, textarea, select { min-width: 0; }
.split > *, .dash-split > *, .console > *, .card-grid > *, .form-row > * { min-width: 0; }
@media (max-width: 640px) {
.doc-parties { grid-template-columns: 1fr; gap: var(--s-5); }
.doc-head { gap: var(--s-4); }
.doc-head__right { text-align: start; }
.doc-sheet { padding: var(--s-6) var(--s-5); }
}
.nav__links a { display: inline-flex; align-items: center; min-height: 24px; }
.prose ul li a, .prose ol li a { display: inline-flex; align-items: center; min-height: 24px; }
.dl-strip:focus-visible, .table-wrap:focus-visible {
outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--r-sm);
}
@media (max-width: 380px) {
.btn { max-width: 100%; }
.btn--lg { padding-inline: 20px; font-size: var(--t-xs); }
.u-x03 .btn { width: 100%; }
}
table.cal td:first-child { min-width: 210px; }
table.cal .cal__detail { display: block; font-size: var(--t-xs); color: var(--text-3); margin-top: 3px; font-weight: 400; }
table.cal .cal__in { font-family: var(--f-label); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.cal time { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.cal tr[data-u="now"]  td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
table.cal tr[data-u="now"]  .cal__in { color: var(--danger); }
table.cal tr[data-u="soon"] td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
table.cal tr[data-u="soon"] .cal__in { color: var(--warn); }
table.cal tr[data-u="far"]  td:first-child { box-shadow: inset 3px 0 0 var(--rule-strong); }
table.cal tr[hidden] { display: none; }
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); margin-top: var(--s-16); }
.post {
display: flex; flex-direction: column; gap: 10px;
background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
padding: var(--s-8);
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.post:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: rgba(0,87,255,.22); }
.post__kicker { font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.post h3 { font-family: var(--f-display); font-size: var(--d-3); font-weight: 600; line-height: 1.2; }
.post h3 a { color: inherit; }
.post h3 a:hover { color: var(--blue); }
.post p { font-size: var(--t-sm); line-height: 1.75; color: var(--text-2); }
.post__meta { font-family: var(--f-label); font-size: var(--t-xs); color: var(--text-3); margin-top: auto; padding-top: var(--s-4); }
.article { max-width: 74ch; margin-inline: auto; }
.article > p { font-size: var(--t-lg); line-height: 1.85; color: var(--text-2); margin-bottom: var(--s-5); }
.article > p:first-of-type { font-size: 1.2rem; color: var(--text); }
.article h2 { font-family: var(--f-display); font-size: var(--d-2); font-weight: 600; line-height: 1.15; margin: var(--s-16) 0 var(--s-4); }
.article h3 { font-family: var(--f-display); font-size: 1.45rem; font-weight: 600; margin: var(--s-10) 0 var(--s-3); }
.article ul, .article ol { margin: 0 0 var(--s-5); padding-inline-start: 24px; }
.article ul { list-style: disc; } .article ol { list-style: decimal; }
.article li { font-size: var(--t-md); line-height: 1.8; color: var(--text-2); margin-bottom: 10px; }
.article li::marker { color: var(--blue); }
.article strong { color: var(--text); font-weight: 600; }
.article a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.article__foot { margin-top: var(--s-16); padding-top: var(--s-8); border-top: 1px solid var(--rule); }
:root { --flow-end: right; }
[dir="rtl"] { --flow-end: left; }
[lang="ar"], [dir="rtl"] {
--f-display: 'IBM Plex Sans Arabic', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
--f-body:    'IBM Plex Sans Arabic', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
--f-label:   'IBM Plex Sans Arabic', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
}
[dir="rtl"] em,
[dir="rtl"] .display em,
[dir="rtl"] i { font-style: normal; }
[dir="rtl"] .display em { font-weight: 700; }
[dir="rtl"] .eyebrow,
[dir="rtl"] .label,
[dir="rtl"] .nav__badge,
[dir="rtl"] .chip,
[dir="rtl"] .btn,
[dir="rtl"] .statband__label,
[dir="rtl"] .pagehero__stat small,
[dir="rtl"] .rsum__item span,
[dir="rtl"] .marquee__item,
[dir="rtl"] .trust__label,
[dir="rtl"] .infostrip__label,
[dir="rtl"] .post__kicker,
[dir="rtl"] .certs__eyebrow,
[dir="rtl"] th { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .tile__go svg,
[dir="rtl"] .inv__open svg { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .marquee {
-webkit-mask-image: linear-gradient(270deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(270deg, transparent, #000 6%, #000 94%, transparent);
}
[dir="rtl"] .clist__item[aria-current="true"] { box-shadow: inset -3px 0 0 var(--blue); }
[dir="rtl"] table.cal tr[data-u="now"]  td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
[dir="rtl"] table.cal tr[data-u="soon"] td:first-child { box-shadow: inset -3px 0 0 var(--warn); }
[dir="rtl"] table.cal tr[data-u="far"]  td:first-child { box-shadow: inset -3px 0 0 var(--rule-strong); }
[dir="rtl"] .inv[data-status="overdue"] { box-shadow: inset -3px 0 0 var(--danger); }
[dir="rtl"] .num-display,
[dir="rtl"] .statband__val,
[dir="rtl"] .pagehero__stat strong,
[dir="rtl"] .hero__stat strong,
[dir="rtl"] time,
[dir="rtl"] .cal__in,
[dir="rtl"] .inv__amount { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.langswitch {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; min-height: 32px;
border: 1px solid var(--ink-hairline-2); border-radius: var(--r-pill);
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .1em; color: var(--on-dark-2);
transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.langswitch:hover { border-color: var(--blue-lift); background: var(--blue-wash-2); }
.langswitch svg { width: 13px; height: 13px; flex-shrink: 0; margin-inline-end: 3px; }
.langswitch a {
display: inline-flex; align-items: center; justify-content: center;
min-width: 26px; min-height: 26px; padding-inline: 4px;
color: inherit; white-space: nowrap;
transition: color .25s var(--ease);
}
.langswitch a:hover { color: #fff; }
.langswitch a:focus-visible { outline: 2px solid var(--blue-lift); outline-offset: 2px; border-radius: 4px; }
.langswitch a + a { margin-inline-start: 4px; padding-inline-start: 9px; position: relative; }
.langswitch a + a::before {
content: ''; position: absolute; inset-inline-start: 0; top: 50%;
transform: translateY(-50%); width: 1px; height: 11px;
background: var(--ink-hairline-2);
}
[dir="rtl"] .langswitch { letter-spacing: 0; }
@media (max-width: 1520px) {
.langswitch > svg { display: none; }
.langswitch { padding: 2px 6px; gap: 0; }
}
@media (max-width: 1440px) {
.nav__signin .is-full { display: none; }
.nav__signin .is-short { display: inline; }
.nav__cta .is-full { display: none; }
.nav__cta .is-short { display: inline; }
.nav__cta { padding: 10px 15px; }
}
@media (max-width: 1280px) {
.nav__links { display: none; }
.burger { display: flex; }
.nav__signin { display: none; }
.nav__actions .langswitch { display: none; }
}
.thread__list { max-height: 340px; overflow-y: auto; padding-inline-end: 4px; }
.thread__empty { padding: var(--s-5) 0; }
.thread { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.msg { display: flex; flex-direction: column; gap: 4px; max-width: 82%; }
.msg[data-side="mine"]   { align-self: flex-end; align-items: flex-end; }
.msg[data-side="theirs"] { align-self: flex-start; align-items: flex-start; }
.msg__bubble { padding: 12px 16px; border-radius: var(--r-md); }
.msg[data-side="mine"]   .msg__bubble { background: var(--blue); color: #fff; border-end-end-radius: var(--r-xs); }
.msg[data-side="theirs"] .msg__bubble { background: var(--paper-tint); color: var(--text); border-end-start-radius: var(--r-xs); }
.msg__body { font-size: var(--t-sm); line-height: 1.65; white-space: pre-wrap; margin: 0; }
.msg__meta { font-family: var(--f-label); font-size: var(--t-2xs); color: var(--text-3); }
.thread__compose { display: flex; gap: var(--s-3); align-items: flex-end; margin-top: var(--s-5); padding-top: var(--s-4); border-block-start: 1px solid var(--rule); }
.thread__compose textarea { flex: 1; resize: vertical; min-height: 44px; }
.thread__compose .btn { flex-shrink: 0; }
@media (max-width: 640px) {
.msg { max-width: 92%; }
.thread__compose { flex-direction: column; align-items: stretch; }
}
.thread__wrap { margin-top: var(--s-4); padding-top: var(--s-4); border-block-start: 1px solid var(--rule); }
.thread__toggle {
display: inline-flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer;
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
list-style: none;
}
.thread__toggle::-webkit-details-marker { display: none; }
.thread__toggle::before {
content: ''; width: 7px; height: 7px; flex-shrink: 0;
border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
transform: rotate(-45deg); transition: transform .25s var(--ease);
}
.thread__wrap[open] .thread__toggle::before { transform: rotate(45deg); }
.thread__toggle:hover { color: var(--blue-deep); }
.thread__wrap[open] .thread__toggle { margin-bottom: var(--s-4); }
[dir="rtl"] .thread__toggle { letter-spacing: 0; }
[dir="rtl"] .thread__toggle::before { transform: rotate(135deg); }
[dir="rtl"] .thread__wrap[open] .thread__toggle::before { transform: rotate(45deg); }
.uidbox {
margin-top: var(--s-5); padding: var(--s-5);
background: var(--blue-wash); border-inline-start: 3px solid var(--blue);
border-radius: 0 var(--r-md) var(--r-md) 0; text-align: start;
}
.uidbox__lead { font-size: var(--t-sm); line-height: 1.7; color: var(--text); margin-bottom: var(--s-3); }
.uidbox__row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-3); }
.uidbox__uid {
flex: 1; min-width: 0; padding: 11px 14px; border-radius: var(--r-sm);
background: var(--ink); color: #fff;
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Consolas', 'DejaVu Sans Mono', monospace;
font-size: var(--t-sm); letter-spacing: .02em; word-break: break-all;
user-select: all;
}
.uidbox__note { font-size: var(--t-xs); line-height: 1.65; color: var(--text-2); margin-top: 8px; }
.uidbox__raw {
display: block; margin-top: 6px; padding: 8px 10px; border-radius: var(--r-xs);
background: rgba(9, 24, 48, .06); border: 1px solid var(--rule);
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Consolas', monospace;
font-size: var(--t-2xs); line-height: 1.55; color: var(--text); word-break: break-word;
}
.uidbox code {
font-family: var(--f-label); font-size: .92em; padding: 2px 6px; border-radius: var(--r-xs);
background: rgba(0,87,255,.10); color: var(--blue-deep);
}
.toast {
position: fixed; z-index: 200;
inset-inline: var(--s-4); inset-block-end: var(--s-4);
max-width: 420px; margin-inline: auto;
padding: 13px 16px; border-radius: var(--r-md);
background: var(--ink); color: #fff;
font-size: var(--t-sm); line-height: 1.55;
box-shadow: 0 10px 34px -12px rgba(9, 24, 48, .5);
opacity: 0; transform: translateY(10px);
transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.toast[data-show="true"] { opacity: 1; transform: translateY(0); }
.toast[data-kind="error"]   { background: #7A231C; }
.toast[data-kind="success"] { background: #04543A; }
@media (min-width: 720px) {
.toast { inset-inline: auto var(--s-6); margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
.toast { transition: none; }
}
.certs {
background: var(--ink-raise);
padding: var(--s-10) var(--gutter);
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.certs__in { max-width: var(--maxw); margin-inline: auto; text-align: center; }
.certs__eyebrow {
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .22em; text-transform: uppercase;
color: var(--on-dark-3); margin-bottom: var(--s-6);
}
.certs__row {
display: flex; align-items: center; justify-content: center;
gap: clamp(30px, 6vw, 76px); flex-wrap: wrap;
}
.certs__item {
display: flex; align-items: center; justify-content: center;
min-height: 96px;
}
.certs__item img {
display: block; width: auto; max-width: 100%;
height: 92px;
transition: transform .3s var(--ease);
}
.certs__item--wordmark img { height: 46px; }
.certs__item:hover img { transform: translateY(-2px); }
.certs__note {
max-width: 62ch; margin-inline: auto; margin-top: var(--s-6);
font-size: var(--t-xs); color: var(--on-dark-3); line-height: 1.7;
text-wrap: pretty;
}
@media (max-width: 600px) {
.certs { padding-block: var(--s-8); }
.certs__item img { height: 74px; }
.certs__item--wordmark img { height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
.certs__item img { transition: none; }
.certs__item:hover img { transform: none; }
}
.picks { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 620px) {
.picks--3, .picks--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.picks--3 { grid-template-columns: repeat(3, 1fr); }
.picks--4 { grid-template-columns: repeat(4, 1fr); }
}
.pick {
position: relative;
display: flex; flex-direction: column; gap: 7px;
text-align: start;
padding: var(--s-6);
padding-inline-end: calc(var(--s-6) + 22px);
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-lg);
cursor: pointer;
font: inherit; color: inherit;
transition: transform .35s var(--ease-expo), border-color .3s var(--ease),
background-color .3s var(--ease), box-shadow .35s var(--ease);
}
.pick:hover { transform: translateY(-3px); border-color: rgba(0,87,255,.28); box-shadow: var(--sh-2); }
.pick:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.pick__name {
font-family: var(--f-display); font-size: var(--d-3); font-weight: 600;
line-height: 1.22; color: var(--text);
}
.pick__desc { font-size: var(--t-sm); line-height: 1.75; color: var(--text-2); }
.pick::after {
content: '';
position: absolute; top: var(--s-6); inset-inline-end: var(--s-6);
width: 18px; height: 18px; border-radius: 50%;
border: 1.5px solid var(--rule-strong);
background: transparent;
transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.pick::before {
content: '';
position: absolute; top: calc(var(--s-6) + 5px); inset-inline-end: calc(var(--s-6) + 5.5px);
width: 4px; height: 8px;
border: solid #fff; border-width: 0 1.7px 1.7px 0;
transform: rotate(45deg) scale(.4);
opacity: 0; transition: opacity .2s var(--ease), transform .25s var(--spring);
z-index: 1;
}
.pick[aria-pressed="true"] {
border-color: var(--blue);
background: var(--blue-wash);
box-shadow: 0 0 0 1px var(--blue) inset;
}
.pick[aria-pressed="true"]::after { background: var(--blue); border-color: var(--blue); }
.pick[aria-pressed="true"]::before { opacity: 1; transform: rotate(45deg) scale(1); }
[dir="rtl"] .pick::before { transform: rotate(45deg) scale(.4); }
[dir="rtl"] .pick[aria-pressed="true"]::before { transform: rotate(45deg) scale(1); }
.no-js .pick { cursor: default; }
.no-js .pick:hover { transform: none; box-shadow: none; border-color: var(--rule); }
@media (max-width: 560px) {
.pick { padding: var(--s-5); padding-inline-end: calc(var(--s-5) + 22px); }
.pick::after { top: var(--s-5); inset-inline-end: var(--s-5); }
.pick::before { top: calc(var(--s-5) + 5px); inset-inline-end: calc(var(--s-5) + 5.5px); }
}
@media (prefers-reduced-motion: reduce) {
.pick, .pick::before, .pick::after { transition: none; }
.pick:hover { transform: none; }
}
.card--link h3 a {
color: inherit; text-decoration: none;
background-image: none;
}
.card--link h3 a::after {
content: ''; position: absolute; inset: 0; border-radius: inherit;
}
.card--link h3 a:focus-visible { outline: none; }
.card--link h3 a:focus-visible::after { outline: 2px solid var(--blue); outline-offset: 3px; }
.card__more {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s-4); flex-wrap: wrap;
margin-top: var(--s-5); padding-top: var(--s-4);
border-top: 1px solid var(--rule);
}
.card__price {
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.card__go {
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
}
.card__go::after {
content: '→'; margin-inline-start: 6px;
display: inline-block; transition: transform .3s var(--ease);
}
[dir="rtl"] .card__go::after { content: '←'; }
.card--link:hover .card__go::after { transform: translateX(3px); }
[dir="rtl"] .card--link:hover .card__go::after { transform: translateX(-3px); }
.card__go a { color: inherit; text-decoration: none; position: relative; }
.card__go a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
.card__go::after,
.card--link:hover .card__go::after { transition: none; transform: none; }
}
.coursebar {
display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.cbtn {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 15px;
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 600;
letter-spacing: .04em;
color: var(--text-2); background: var(--paper);
border: 1px solid var(--rule); border-radius: var(--r-pill);
cursor: pointer;
transition: color .25s var(--ease), border-color .25s var(--ease),
background-color .25s var(--ease);
}
.cbtn:hover { border-color: rgba(0,87,255,.3); color: var(--text); }
.cbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cbtn__n {
font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0;
color: var(--text-3);
background: var(--paper-tint); border-radius: var(--r-pill);
padding: 2px 6px; min-width: 20px; text-align: center;
}
.cbtn[aria-pressed="true"] {
background: var(--blue); border-color: var(--blue); color: #fff;
}
.cbtn[aria-pressed="true"] .cbtn__n { background: rgba(255,255,255,.22); color: #fff; }
.courses {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--rule); border: 1px solid var(--rule);
border-radius: var(--r-lg); overflow: hidden;
list-style: none; margin: 0; padding: 0;
}
.course {
background: var(--paper); padding: var(--s-6);
display: flex; flex-direction: column; gap: 6px;
transition: background-color .3s var(--ease);
}
.course:hover { background: var(--paper-tint); }
.course__t {
font-family: var(--f-display); font-size: 1.12rem; font-weight: 600;
line-height: 1.25; color: var(--text);
}
.course__d { font-size: var(--t-sm); line-height: 1.7; color: var(--text-2); flex: 1; }
.course__meta {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s-3); flex-wrap: wrap;
margin-top: var(--s-3); padding-top: var(--s-3);
border-top: 1px solid var(--rule);
}
.course__dur {
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
}
.course__who {
font-family: var(--f-label); font-size: var(--t-2xs);
letter-spacing: .06em; color: var(--text-3);
}
.course[hidden] { display: none; }
@media (max-width: 980px) { .courses { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
.courses { grid-template-columns: 1fr; }
.course { padding: var(--s-5); }
.cbtn { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
.cbtn, .course { transition: none; }
}
.svc__links { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-4); }
.svc__links li { margin: 0; }
.svc__links a {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 0;
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--on-dark-2);
transition: color .25s var(--ease);
}
.svc__links a svg { transition: transform .3s var(--ease); }
.svc__links a:hover { color: #fff; }
.svc__links a:hover svg { transform: translateX(3px); }
[dir="rtl"] .svc__links a svg { transform: scaleX(-1); }
[dir="rtl"] .svc__links a:hover svg { transform: scaleX(-1) translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.svc__links a svg, .svc__links a:hover svg { transition: none; transform: none; }
}
.ticks { display: flex; flex-direction: column; gap: 11px; }
.ticks li {
position: relative; padding-inline-start: 30px;
font-size: var(--t-md); line-height: 1.65; color: var(--text-2);
}
.ticks li::before {
content: ''; position: absolute; inset-inline-start: 0; top: .45em;
width: 17px; height: 17px; border-radius: 50%;
background: var(--blue-wash); border: 1px solid rgba(0,87,255,.25);
}
.ticks li::after {
content: ''; position: absolute;
inset-inline-start: 5.5px; top: calc(.45em + 4px);
width: 5px; height: 9px;
border: solid var(--blue); border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
[dir="rtl"] .ticks li::after { transform: rotate(45deg); }
.on-dark .ticks li { color: var(--on-dark-2); }
.on-dark .ticks li::before { background: rgba(255,255,255,.07); border-color: var(--ink-hairline-2); }
.on-dark .ticks li::after { border-color: var(--blue-lift); }
.checkset { border: 0; padding: 0; margin: 0; }
.checkset legend {
padding: 0; margin-bottom: 9px;
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 700;
letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
.checkrow { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.checkline {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 13px;
border: 1px solid var(--rule); border-radius: var(--r-pill);
font-size: var(--t-sm); color: var(--text-2); cursor: pointer;
transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.checkline input { width: 15px; height: 15px; accent-color: var(--blue); cursor: pointer; }
.checkline:hover { border-color: rgba(0,87,255,.3); }
.checkline:has(input:checked) { background: var(--blue-wash); border-color: var(--blue); color: var(--text); }
.checkline:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.checkline { transition: none; }
}
.svc__text { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.svc__teaser {
font-family: var(--f-label); font-size: var(--t-2xs); font-weight: 500;
letter-spacing: .08em; text-transform: uppercase;
color: var(--on-dark-3); line-height: 1.6;
transition: color .3s var(--ease);
}
.svc__header:hover .svc__teaser { color: var(--on-dark-2); }
.svc[data-open="true"] .svc__teaser { color: var(--on-dark-2); }
.svc-hint {
display: inline-flex; align-items: center; gap: 9px;
margin-top: var(--s-5); padding: 8px 14px 8px 11px;
border: 1px solid var(--ink-hairline-2); border-radius: var(--r-pill);
font-family: var(--f-label); font-size: var(--t-xs); font-weight: 500;
letter-spacing: .04em; color: var(--on-dark-2);
}
.svc-hint svg { color: var(--blue-lift); flex-shrink: 0; }
@media (max-width: 560px) {
.svc__teaser { font-size: 9.5px; letter-spacing: .06em; }
.svc-hint { font-size: var(--t-2xs); padding: 7px 12px 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
.svc__teaser { transition: none; }
}
@media (min-width: 561px) {
.svc-list { padding-inline-end: 58px; }
}
@media (max-width: 560px) {
.floaties { gap: 8px; }
.fab { width: 40px; height: 40px; }
.fab svg { width: 18px; height: 18px; }
.fab--wa[data-cc]::after { font-size: 8px; padding: 2px 3px; }
}
.certs__link {
display: block; border-radius: 12px;
transition: transform .3s var(--ease);
}
.certs__link:hover img { transform: translateY(-3px); }
.certs__link:focus-visible {
outline: 2px solid var(--blue-lift); outline-offset: 8px;
}
.certs__actions { margin-top: var(--s-6); }
.certs__actions .btn { gap: 9px; }
.certs__actions .btn svg { flex-shrink: 0; }
.certs__fine {
max-width: 54ch; margin-inline: auto; margin-top: var(--s-3);
font-size: var(--t-2xs); color: var(--on-dark-3); line-height: 1.7;
opacity: .82;
}
[dir="rtl"] .certs__actions .btn svg { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
.certs__link { transition: none; }
.certs__link:hover img { transform: none; }
}
.article__prov {
margin-top: var(--s-12);
padding: var(--s-5) var(--s-6);
border-inline-start: 3px solid var(--champagne);
background: var(--paper-soft);
border-radius: 0 10px 10px 0;
}
[dir="rtl"] .article__prov { border-radius: 10px 0 0 10px; }
.article__prov-line {
font-size: var(--t-sm);
letter-spacing: .01em;
color: var(--text);
margin: 0 0 8px;
}
.article__prov .u-quiet { margin: 0; font-size: var(--t-sm); line-height: 1.75; }
.hero__media picture,
.split__media picture,
.svc-visual picture,
.tile picture,
.gallery__stage picture {
display: block;
inline-size: 100%;
block-size: 100%;
}
@font-face{font-family:DM;src:url("/assets/optimized/e7cb3057bc26-53e9b7a1fea2.woff2") format('woff2');font-style:normal;font-weight:400 600;font-display:swap}
@font-face{font-family:DM;src:url("/assets/optimized/d368c442ecbc-194c92c35626.woff2") format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url("/assets/optimized/673d80c5fbfc-95b10bfd26e9.woff2") format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
:root{--blue:#075dfa;--navy:#041b2e;--ink:#041b2e;--ink-raise:#09283d;--f-display:Manrope,Arial,sans-serif;--f-body:DM,Arial,sans-serif;--f-label:DM,Arial,sans-serif}
[hidden]{display:none!important}
body{background:#fbfcfa}
.site-header{background:#041b2e;color:#fff;border-bottom:1px solid #294154}
.site-header .nav a,.site-header .lang-switch a{color:inherit}
.site-header .brand img{filter:none}
.footer{background:#031625;color:#b9cedd}
.footer a{color:inherit}
main{min-height:60vh}
.display,.display em{font-weight:400;font-style:normal;letter-spacing:-.045em}
.display--on-dark em{color:#67d9ff}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transition:none!important;transform:none!important;opacity:1!important}}
.step .step__n{color:#566575;opacity:1}
.cbtn.active .cbtn__n,.cbtn[aria-pressed="true"] .cbtn__n,.cbtn.is-active .cbtn__n{background:#174fa9;color:#fff}
.apply-title{font-size:24px;line-height:1.25;margin-bottom:16px}
img[loading="lazy"][width="161"][height="176"]{aspect-ratio:161/176}img[loading="lazy"][width="142"][height="160"]{aspect-ratio:142/160}img[loading="lazy"][width="243"][height="180"]{aspect-ratio:243/180}img[loading="lazy"][width="242"][height="180"]{aspect-ratio:242/180}img[loading="lazy"][width="273"][height="180"]{aspect-ratio:273/180}img[loading="lazy"][width="180"][height="180"]{aspect-ratio:1/1}img[loading="lazy"][width="175"][height="54"]{aspect-ratio:647/200}
html.sh-page{--nav-h:0px;scroll-padding-top:16px}
.sh-header,.sh-footer{--sh-navy:#061b2b;--sh-blue:#0561da;--sh-ease:cubic-bezier(.16,1,.3,1);
font:400 16px/1.65 DM,Arial,sans-serif;isolation:isolate;background:#041b2e;box-sizing:border-box}
.sh-header *,.sh-footer *{box-sizing:border-box}
.sh-header a,.sh-footer a{color:inherit;text-decoration:none;transition:color .2s}
.sh-container{max-width:1240px;margin:auto;width:calc(100% - 112px)}
.sh-header{height:100px;color:#fff;border-bottom:1px solid #ffffff1e;position:relative;z-index:30}
.sh-inner{height:100%;display:flex;align-items:center;gap:22px}
.sh-brand{display:block;width:170px;flex-shrink:0}
.sh-brand img{display:block;width:170px;height:auto;max-width:100%;mix-blend-mode:lighten;filter:contrast(1.15)}
.sh-nav{display:flex;align-items:center;gap:23px;margin-left:auto;font-size:12px}
.sh-nav>a,.sh-more>summary{padding:16px 0;font-weight:500}
.sh-nav a:hover,.sh-more summary:hover{color:#5dd9fc}
.sh-more{position:relative}
.sh-more summary{list-style:none;cursor:pointer}
.sh-more summary::-webkit-details-marker{display:none}
.sh-more summary::after{content:' +';color:#55d4f6}
.sh-more[open] .sh-dropdown{display:grid}
.sh-dropdown{position:absolute;top:52px;right:0;min-width:230px;padding:20px;background:var(--sh-navy);box-shadow:0 12px 28px #0003;border:1px solid #385269;gap:12px;z-index:50}
.sh-actions{display:flex;align-items:center;gap:18px;font-size:11px}
.sh-lang{display:flex;gap:5px}
.sh-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:32px}
.sh-lang a[aria-current]{color:#59d5ff}
.sh-header .sh-client{color:#b2c8d5}
.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:42px;padding:10px 17px;border:1px solid transparent;
background:var(--sh-blue);color:#fff;border-radius:0;font-size:12px;font-weight:500;line-height:1.4;transition:background .22s,transform .22s,box-shadow .22s}
.sh-header .sh-btn{color:#fff}
.sh-btn::after{content:'↗';font-size:14px;font-weight:400}
.sh-btn:hover{background:#044acc;transform:translateY(-2px);box-shadow:0 7px 25px #0059ce26}
.sh-toggle{display:none;background:transparent;color:#fff;border:1px solid #627584;padding:10px 14px;font:inherit;cursor:pointer}
.sh-mobile{display:none}
.sh-header a:focus-visible,.sh-header button:focus-visible,.sh-header summary:focus-visible,.sh-footer a:focus-visible{outline:3px solid #00a9d6;outline-offset:5px}
[dir="rtl"] .sh-nav{margin-left:0;margin-right:auto;gap:20px}
.sh-footer{color:#b9cedd;padding:72px 0 25px}
.sh-footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:50px}
.sh-footer .sh-brand{margin-bottom:20px}
.sh-footer p{font-size:12px;line-height:1.65;margin:0 0 20px;max-width:none;color:inherit}
.sh-footer p:last-child{margin-bottom:0}
.sh-footer h3{color:#fff;font:700 10px/1.1 Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;margin:0 0 22px}
.sh-footer a{font-size:12px;display:block;margin-bottom:10px}
.sh-footer a:hover{color:#fff}
.sh-footer-bottom{margin-top:55px;border-top:1px solid #294155;padding-top:22px;display:flex;justify-content:space-between;gap:25px;font-size:10px}
.sh-footer-bottom div{display:flex;gap:22px}
.sh-footer-bottom a{font-size:10px}
.sh-footer::after{content:'BMD LEGACY';display:block;font:400 clamp(55px,13.7vw,205px)/1 Manrope,sans-serif;letter-spacing:-.07em;text-align:center;color:#ffffff0b;margin-top:48px;white-space:nowrap;overflow:hidden}
[dir="rtl"] .sh-footer::after{direction:ltr}
[dir="rtl"] .sh-header,[dir="rtl"] .sh-footer{font-family:Tahoma,Arial,sans-serif;line-height:1.9}
[dir="rtl"] .sh-footer p{line-height:1.9}
[dir="rtl"] .sh-footer h3{font-family:Tahoma,Arial,sans-serif;letter-spacing:normal;line-height:1.35}
@media(max-width:1200px){
.sh-container{width:calc(100% - 80px)}
.sh-nav{gap:14px}.sh-inner{gap:18px}.sh-actions{gap:12px}
.sh-brand,.sh-brand img{width:150px}
}
@media(max-width:1180px){.sh-actions .sh-btn{display:none}}
@media(max-width:960px){
.sh-container{width:calc(100% - 48px)}
.sh-header{height:85px}
.sh-nav{display:none}
.sh-actions{margin-left:auto}
.sh-toggle{display:block}
.sh-mobile.open{display:grid;position:absolute;top:85px;left:0;right:0;background:var(--sh-navy);padding:24px;gap:0;border-top:1px solid #41576a;box-shadow:0 12px 25px #0003}
.sh-mobile a{padding:12px 10px;border-bottom:1px solid #294154}
.sh-footer-top{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
.sh-container{width:calc(100% - 40px)}
.sh-header{height:82px}
.sh-mobile.open{top:82px}
.sh-inner{gap:10px}
.sh-brand,.sh-brand img{width:128px}
.sh-actions{gap:10px}
.sh-actions>.sh-client{display:none}
.sh-toggle{padding:9px 11px;font-size:12px}
.sh-lang{font-size:10px}
[dir="rtl"] .sh-actions{margin-left:0;margin-right:auto}
.sh-footer{padding-top:55px}
.sh-footer-top{grid-template-columns:1fr 1fr;gap:32px 24px}
.sh-footer-top>div:first-child{grid-column:1/-1}
.sh-footer-bottom{display:block;margin-top:40px}
.sh-footer-bottom div{margin-top:15px;flex-wrap:wrap}
.sh-footer::after{font-size:14vw;margin:25px 0 0}
}
@media(prefers-reduced-motion:no-preference){
.sh-mobile.open,.sh-dropdown{animation:sh-menu 350ms var(--sh-ease) both}
.sh-btn{position:relative;overflow:hidden;isolation:isolate;transition:background .25s,box-shadow .3s,transform .3s var(--sh-ease)}
.sh-btn::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent,#ffffff25,transparent);transform:translateX(-110%);transition:transform .65s var(--sh-ease)}
.sh-btn:hover::before,.sh-btn:focus-visible::before{transform:translateX(110%)}
.sh-nav>a{position:relative}
.sh-nav>a::after{content:'';position:absolute;bottom:7px;left:0;right:0;height:1px;background:#65daf2;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--sh-ease)}
.sh-nav>a:hover::after,.sh-nav>a:focus-visible::after{transform:scaleX(1)}
}
@keyframes sh-menu{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media print{.sh-header{position:static}.sh-toggle,.sh-mobile{display:none}.sh-header,.sh-footer{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.lang-tag{display:inline-block;margin-inline-start:.45em;padding:0 .35em;border:1px solid currentColor;border-radius:3px;font-size:.62em;line-height:1.5;letter-spacing:.06em;vertical-align:.15em;opacity:.72;font-weight:600}
.contact-bar{display:none}
@media(max-width:820px){
.contact-bar{position:fixed;left:0;right:0;bottom:0;z-index:950;display:grid;grid-template-columns:1fr 1fr;gap:8px;
padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(4,27,46,.97);border-top:1px solid #294154}
.contact-bar a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 10px;border-radius:4px;
font:600 15px/1.2 DM,Arial,sans-serif;color:#fff;text-decoration:none;text-align:center}
.contact-bar a:focus-visible{outline:3px solid #6cddf6;outline-offset:2px}
.contact-bar__book{background:#075dfa}
.contact-bar__wa{background:#17733f}
[dir=rtl] .contact-bar a,.contact-bar a:lang(ar){font-family:Tahoma,Arial,sans-serif}
body:has(.contact-bar){padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}
@media print{.contact-bar{display:none!important}}
html.sh-page .btn{font-family:DM,Arial,sans-serif;text-transform:none;letter-spacing:0;font-weight:500;font-size:14px;line-height:1.4;
border-radius:0;min-height:52px;padding:16px 25px;box-shadow:none}
html.sh-page .btn--lg{font-size:15px}
html.sh-page[dir=rtl] .btn{font-family:Tahoma,Arial,sans-serif}
html.sh-page .display--on-dark em{background:linear-gradient(105deg,#60d5f6 15%,#e1fbff 37%,#65d6ff 53%,#3a9bfb 72%,#60d5f6 95%);
background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:820px){.contact-bar{transition:transform .3s ease}.contact-bar.is-tucked{transform:translateY(110%)}.contact-bar:focus-within{transform:none}}
@media(prefers-reduced-motion:reduce){.contact-bar{transition:none}}
.agreement{margin-top:var(--s-6);padding:clamp(20px,4vw,40px);border:1px solid var(--rule-strong);border-radius:var(--r-md);background:#fff}
.agreement .ag-title{font-family:var(--f-display);font-size:clamp(1.5rem,3.2vw,2rem);font-weight:600;line-height:1.2;margin:0 0 6px;color:var(--text)}
.agreement .ag-sub{font-size:var(--t-sm);letter-spacing:.04em;color:var(--text-3);margin-bottom:var(--s-6)}
.agreement h4{font-size:var(--t-lg);font-weight:600;line-height:1.35;color:var(--text);margin:var(--s-8) 0 var(--s-3);padding-top:var(--s-5);border-top:1px solid var(--rule)}
.agreement p{overflow-wrap:anywhere}
.agreement .ag-nowrap{white-space:nowrap}
.agreement .ag-n{display:inline-block;min-width:2.4em;margin-inline-end:.25em;font-variant-numeric:tabular-nums;color:var(--text)}
.ag-table{overflow-x:auto;margin:0 0 var(--s-4)}
.ag-table table{width:100%;max-width:420px;border-collapse:collapse}
.ag-table th{text-align:start;padding:10px 12px;border-bottom:2px solid var(--rule-strong);font-size:var(--t-sm);font-weight:600;color:var(--text)}
.ag-table td{padding:10px 12px;border-bottom:1px solid var(--rule);font-size:var(--t-md);color:var(--text-2);font-variant-numeric:tabular-nums}
.ag-table th:last-child,.ag-table td:last-child{text-align:end}
.ag-actions{margin:var(--s-4) 0 0}
html.no-js [data-print-agreement]{display:none}
@media print{
html.print-agreement body>:not(main),html.print-agreement .pagehero,html.print-agreement .prose>:not(.agreement){display:none!important}
html.print-agreement .section{padding:0!important}
.agreement{border:0;padding:0;margin:0}
.agreement p,.ag-table td{color:#000;font-size:10.5pt;line-height:1.55;orphans:3;widows:3}
.agreement h4{break-after:avoid}
.ag-table{overflow:visible}
.agreement a[href^="http"]::after{content:none}
}
.lang-only{margin:14px 0 0;font-size:.82rem;line-height:1.55;opacity:.8}
.lang-only [lang=ar]{font-family:Tahoma,Arial,sans-serif}
.prose .toc{margin:0 0 36px;padding:20px 24px 16px;border:1px solid var(--rule-strong);border-radius:var(--r-md);background:#fff}
.prose .toc .toc__title{font-family:inherit;font-size:var(--t-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:0 0 10px;line-height:1.4}
.prose .toc__list{margin:0;padding:0;list-style:none;columns:2 250px;column-gap:28px}
.prose .toc__list li{break-inside:avoid;padding:3px 0;font-size:var(--t-sm);line-height:1.45}
.prose .toc__list a{font-weight:500}
.prose .toc--agreement{margin:var(--s-6) 0 0}
.prose h2[id],.agreement h4[id]{scroll-margin-top:24px}
@media print{.toc{display:none}}
.lang-tag{opacity:1;font-size:max(.62em,10px)}