/* ==========================================================================
   ALAA - Atticus Lawyers, Advisors and Asset Management
   ========================================================================== */

:root {
    --bg: #000;
    --bg-alt: #0b0d10;
    --surface: #121418;
    --surface-hover: #1a1d22;
    --border: rgba(255, 255, 255, .12);
    --text: #fff;
    --muted: rgba(255, 255, 255, .68);
    --accent: #c1d62e;
    --accent-hover: #d4e64a;
    --accent-ink: #000;
    --orange: #e8792b;
    --blue-1: #0a5896;
    --blue-2: #06406f;
    --blue-3: #03203a;
    --error: #ff8a80;
    --success: #9be29b;

    --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Outfit", system-ui, sans-serif;

    --container: 1720px;
    --gutter: clamp(16px, 5vw, 100px);
    --radius: 18px;
    --header-space: clamp(92px, 9vw, 168px);   /* room reserved under the floating header */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-material: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.75rem); text-transform: uppercase; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.9rem); }
h3 { font-size: 1.35rem; }
.h4, h4 { font-size: 1.1rem; font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 16px; top: -100px; z-index: 1000;
    background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 16px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 900px; }
.center { text-align: center; }

.eyebrow {
    font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 1rem;
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--muted); max-width: 46rem; }
.center .lead { margin-left: auto; margin-right: auto; }

/* Buttons ------------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: .85em 1.6em; border-radius: 999px; border: 1px solid transparent;
    font: 600 .95rem/1 var(--font-sans); cursor: pointer; white-space: nowrap;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-outline { border-color: rgba(255,255,255,.35); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-block { width: 100%; }

.link-arrow { font-weight: 600; color: var(--accent); white-space: nowrap; }
.link-arrow::after { content: " →"; transition: margin .2s var(--ease); }
.link-arrow:hover::after { margin-left: 4px; }

/* Header ------------------------------------------------------------------- */
.site-header {
    position: fixed; z-index: 100;
    top: clamp(8px, 1.2vw, 20px); left: clamp(8px, 1.2vw, 20px); right: clamp(8px, 1.2vw, 20px);
    pointer-events: none;
}
/* Frosted glass: light tint + blur of the moving aurora behind it */
.header-bar {
    --hx: 50%; --hy: 50%;
    position: relative; isolation: isolate;
    pointer-events: auto;
    display: flex; align-items: center; gap: clamp(14px, 1.4vw, 24px);
    min-height: clamp(64px, 6.2vw, 118px);
    padding: 10px clamp(12px, 1.6vw, 28px) 10px clamp(18px, 3vw, 56px);
    background-color: rgba(30, 50, 70, .18);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 100%);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: clamp(18px, 1.6vw, 26px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -1px 0 rgba(255, 255, 255, .06),
        0 12px 40px rgba(0, 10, 25, .25);
    backdrop-filter: blur(16px) saturate(115%);
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
/* Soft light that follows the cursor across the glass */
.header-bar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(420px circle at var(--hx) var(--hy), rgba(255, 255, 255, .14), transparent 60%);
    opacity: 0; transition: opacity .4s var(--ease);
}
.header-bar:hover::before { opacity: 1; }
.site-header.is-scrolled .header-bar { background-color: rgba(8, 22, 40, .55); border-color: rgba(255, 255, 255, .16); }

.wordmark { display: inline-flex; flex-direction: column; color: var(--text); line-height: 1; flex-shrink: 0; }
.wordmark:hover { color: var(--text); }
.wordmark-name {
    font-weight: 500; text-transform: uppercase;
    font-size: clamp(1.2rem, 1.7vw, 2.2rem); letter-spacing: .14em;
}
.wordmark-sub {
    margin-top: 6px; font-size: clamp(.46rem, .5vw, .68rem); letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}

.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav > ul { display: flex; align-items: center; gap: clamp(12px, 1.25vw, 26px); list-style: none; margin: 0; padding: 0; }
.main-nav a {
    position: relative; display: block; padding: 6px 0; white-space: nowrap;
    font-size: clamp(.84rem, 1.05vw, 1.3rem); color: var(--text);
}
.main-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
}
.main-nav a:hover { color: var(--text); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Mega menus (Expertise, News & Resources) --------------------------------- */
.main-nav li { position: static; }
.mega {
    position: absolute; z-index: 5; top: calc(100% + 14px);
    padding: clamp(24px, 2.2vw, 44px);
    border-radius: clamp(20px, 1.8vw, 30px);
    border: 1px solid rgba(255, 255, 255, .12);
    background:
        radial-gradient(60% 80% at 30% 10%, rgba(48, 70, 76, .45), transparent 70%),
        linear-gradient(160deg, #141a1c 0%, #060909 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
/* Invisible bridge so the pointer can travel from the link to the panel */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-mega:hover > .mega, .has-mega:focus-within > .mega, .has-mega.is-open > .mega {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.has-mega.is-closed > .mega { opacity: 0; visibility: hidden; }

.mega-expertise { left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; }
.mega-expertise .mega-col + .mega-col { padding-left: clamp(24px, 3vw, 60px); margin-left: clamp(24px, 3vw, 60px); border-left: 1px solid rgba(255, 255, 255, .14); }
.mega-expertise .mega-col:first-child { padding-right: 0; }
.mega-label {
    display: inline-block; margin-bottom: clamp(18px, 1.6vw, 28px); padding: .35em 1.1em;
    border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .18);
    font-size: clamp(.9rem, 1vw, 1.1rem); font-weight: 500;
}
.mega-label:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.mega-chips {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, .6vw, 12px) clamp(12px, 1.2vw, 24px);
    list-style: none; margin: 0; padding: 0; justify-items: start; align-items: start;
}
.mega-chip {
    display: inline-block; padding: .38em .95em; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03);
    font-size: clamp(.82rem, .92vw, 1.05rem); line-height: 1.3;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.mega-chip:hover, .mega-chip:focus-visible { background: var(--accent); border-color: var(--accent); color: #000; }

.mega-news {
    left: 50%; width: min(860px, 100%); transform: translate(-50%, -8px);
    display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 3vw, 52px);
}
.has-mega:hover > .mega-news, .has-mega:focus-within > .mega-news, .has-mega.is-open > .mega-news { transform: translate(-50%, 0); }
.mega-pills { display: grid; align-content: start; gap: 14px; list-style: none; margin: 0; padding: 0 clamp(24px, 3vw, 52px) 0 0; border-right: 1px solid rgba(255, 255, 255, .14); }
.mega-pill {
    display: inline-flex; align-items: center; gap: 12px; padding: .55em 1.3em;
    border: 1.5px solid rgba(255, 255, 255, .75); border-radius: 999px;
    font-size: clamp(1rem, 1.1vw, 1.25rem); white-space: nowrap;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.mega-pill span { transition: transform .2s var(--ease); }
.mega-pill:hover { background: #fff; border-color: #fff; color: #000; }
.mega-pill:hover span { transform: translateX(3px); }
.mega-feature .news-card-body { min-height: 0; background-color: rgba(255, 255, 255, .05); }
.mega-feature .news-card-read { display: none; }
.mega-feature .news-card-author { padding-top: 24px; }
.main-nav .mega a::after { display: none; }
.main-nav .mega a { padding: .38em .95em; }
.main-nav .mega .mega-pill { padding: .55em 1.3em; }
.main-nav .mega .mega-label { padding: .35em 1.1em; }
.main-nav .mega .news-card-link { padding: 0; }

.main-nav .mega a { white-space: normal; }
.main-nav .mega .mega-chip { font-size: clamp(.82rem, .92vw, 1.05rem); }
.main-nav .mega .mega-label { font-size: clamp(.9rem, 1vw, 1.1rem); }
.main-nav .mega .mega-pill { font-size: clamp(1rem, 1.1vw, 1.25rem); white-space: nowrap; }
.main-nav .mega .news-card-link { font-size: 1rem; white-space: normal; }

.main-nav .mega .mega-label, .main-nav .mega .mega-chip { display: inline-block; }
.main-nav .mega .mega-pill { display: inline-flex; }
.mega-pills { justify-items: start; }
.mega-feature { align-self: start; }
.mega-feature .news-card { height: auto; }

.news-grid-page { margin-top: 0; }
.news-grid-page > [hidden] { display: none; }
.news-grid-page .news-card-body { background-color: #1b1b1b; }
.news-grid-page .news-card-body::before { opacity: 0; }

.header-actions { display: flex; align-items: center; gap: clamp(8px, 1vw, 20px); margin-left: auto; }
.icon-btn {
    display: grid; place-items: center; flex-shrink: 0;
    width: clamp(40px, 3.1vw, 60px); height: clamp(40px, 3.1vw, 60px); border-radius: 50%;
    border: 0; padding: 0; cursor: pointer;
    font: 500 clamp(.95rem, 1.15vw, 1.3rem)/1 var(--font-sans);
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 42%; height: 42%; }
.icon-btn-lime { background: var(--accent); color: #000; }
.icon-btn-lime:hover { background: var(--accent-hover); }
.icon-btn-dark { background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.region-badge { cursor: default; }

.nav-toggle { display: none; position: relative; }
.nav-toggle span {
    position: absolute; left: 30%; right: 30%; height: 2px; background: currentColor; border-radius: 2px;
}
.nav-toggle span:nth-child(1) { top: calc(50% - 7px); }
.nav-toggle span:nth-child(2) { top: calc(50% - 1px); }
.nav-toggle span:nth-child(3) { top: calc(50% + 5px); }

@media (max-width: 1100px) {
    .main-nav { display: none; }
    .nav-toggle { display: grid; }
}
@media (max-width: 480px) {
    .region-badge, .wordmark-sub { display: none; }
}

/* Search drawer ------------------------------------------------------------ */
.search-drawer { position: fixed; inset: 0; z-index: 150; pointer-events: none; visibility: hidden; transition: visibility 0s linear .35s; }
.search-drawer[data-state="open"] { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.search-drawer-bar {
    position: absolute; z-index: 1; left: 50%; top: clamp(12px, 1.6vw, 28px);
    width: min(820px, calc(100% - 24px));
    display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px;
    background: rgba(255, 255, 255, .06); border-left: 2px solid var(--accent); border-radius: 999px;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    transform: translate(-50%, calc(-100% - 40px));
    transition: transform .35s var(--ease-material);
}
.search-drawer[data-state="open"] .search-drawer-bar { transform: translate(-50%, 0); }
.search-backdrop {
    position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .3s var(--ease);
}
.search-drawer[data-state="open"] .search-backdrop { opacity: 1; }

.search-form { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.search-field {
    position: relative; display: flex; align-items: center; flex: 1; min-width: 0; height: 46px;
    background: rgba(0, 0, 0, .8); border-radius: 999px;
}
.search-field svg { position: absolute; left: 14px; width: 20px; height: 20px; color: rgba(255, 255, 255, .8); pointer-events: none; }
.search-field input {
    width: 100%; height: 100%; min-width: 0; padding: 0 16px 0 44px;
    background: transparent; border: 0; border-radius: 999px; color: #fff; font: inherit; font-size: 1rem;
}
.search-field input::placeholder { color: rgba(255, 255, 255, .5); }
.search-field input:focus { outline: none; }
.search-field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px;
    background: var(--accent); color: #000; border: 0; border-radius: 999px; cursor: pointer;
    font: 500 .95rem/1 var(--font-sans); white-space: nowrap; transition: background-color .2s var(--ease);
}
.pill-btn:hover { background: var(--accent-hover); }
.drawer-close {
    display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
    background: transparent; border: 0; color: rgba(255, 255, 255, .8); cursor: pointer;
}
.drawer-close:hover { color: #fff; }
.drawer-close svg { width: 24px; height: 24px; }

/* Mobile navigation -------------------------------------------------------- */
.mobile-nav {
    position: fixed; inset: 0; z-index: 200; overflow: hidden;
    background: #000; transform: translateX(100%);
    transition: transform .6s var(--ease-material);
}
.mobile-nav[data-state="open"] { transform: none; }
.mobile-nav-close {
    position: absolute; z-index: 2; top: 16px; right: 16px;
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent); color: #000; border: 0; cursor: pointer;
}
.mobile-nav-close svg { width: 20px; height: 20px; }
.mobile-panel {
    position: absolute; inset: 0; overflow-y: auto;
    display: flex; flex-direction: column; gap: 24px;
    padding: 84px var(--gutter) 40px; background: #000;
    transition: transform .6s var(--ease-material);
}
.mobile-panel[data-panel="main"][data-state="closed"] { transform: translateX(-30%); }
.mobile-panel:not([data-panel="main"]) { transform: translateX(100%); }
.mobile-panel:not([data-panel="main"])[data-state="open"] { transform: none; }
.mobile-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mobile-links a, .mobile-links button {
    display: inline-flex; align-items: center; gap: 12px; padding: 0; background: none; border: 0; cursor: pointer;
    font: 500 1.6rem/1.2 var(--font-sans); color: #fff;
}
.mobile-links a[aria-current="page"] { color: var(--accent); }
.chev { color: var(--accent); font-size: 1.8rem; line-height: 1; }
.mobile-panel .search-field { background: rgba(255, 255, 255, .16); }
.mobile-back { align-self: flex-start; background: none; border: 0; color: var(--accent); font: 500 1.1rem var(--font-sans); cursor: pointer; padding: 0; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
    color: rgba(255, 255, 255, .82); font-size: .9rem;
}
.chip-strong { align-self: flex-start; background: rgba(255, 255, 255, .15); color: #fff; font-weight: 500; }
@media (max-width: 420px) {
    .mobile-panel .search-form { flex-wrap: wrap; }
    .mobile-panel .search-field { flex-basis: 100%; }
}
body.is-locked { overflow: hidden; }

/* Hero --------------------------------------------------------------------- */
.hero {
    position: relative; overflow: hidden;
    min-height: 100svh;
    display: flex; align-items: center;
    padding: calc(var(--header-space) + clamp(32px, 6vw, 110px)) 0 clamp(56px, 6vw, 96px);
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(20, 110, 180, .55), transparent 70%),
        linear-gradient(180deg, var(--blue-1) 0%, var(--blue-2) 30%, var(--blue-3) 62%, #000 92%);
}
.hero::after { /* subtle film grain */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner {
    position: relative; z-index: 1; width: 100%; max-width: var(--container);
    margin: 0 auto; padding: 0 var(--gutter);
}
.hero-title {
    margin: 0 0 clamp(28px, 3.6vw, 64px);
    font-size: clamp(2.6rem, 7.7vw, 8.6rem); font-weight: 500;
    line-height: .98; letter-spacing: -.005em; text-transform: uppercase;
}
.hero-line { display: block; }
@media (max-width: 700px) {
    .hero { min-height: auto; align-items: flex-start; }
}
.hero-intro {
    max-width: 78rem; margin: 0 0 clamp(20px, 2vw, 32px);
    font-size: clamp(1.1rem, 1.72vw, 1.95rem); line-height: 1.32; font-weight: 400; color: #fff;
}

/* Aurora - animated light behind the hero (seen through the glass header) */
.aurora {
    --mx: 0; --my: 0;
    position: absolute; inset: -12% -8% 0; z-index: 0; pointer-events: none; overflow: hidden;
    transform: translate3d(calc(var(--mx) * -28px), calc(var(--my) * -18px), 0);
    transition: transform 1.2s var(--ease);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 88%);
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 88%);
}
.blob, .ribbon { position: absolute; display: block; will-change: transform; mix-blend-mode: screen; }
.blob { border-radius: 50%; filter: blur(60px); }
.b1 {
    width: 58vw; height: 58vw; left: -14%; top: -30%;
    background: radial-gradient(circle at 40% 40%, rgba(38, 140, 150, .8), transparent 62%);
    animation: drift-a 24s ease-in-out infinite alternate;
}
.b2 {
    width: 46vw; height: 46vw; right: -8%; top: -22%;
    background: radial-gradient(circle, rgba(130, 196, 200, .5), transparent 60%);
    animation: drift-b 28s ease-in-out infinite alternate;
}
.b3 {
    width: 64vw; height: 42vw; left: 22%; top: 4%;
    background: radial-gradient(ellipse, rgba(22, 104, 178, .9), transparent 65%);
    animation: drift-c 32s ease-in-out infinite alternate;
}
.b4 {
    width: 26vw; height: 26vw; left: 38%; top: -14%;
    background: radial-gradient(circle, rgba(200, 235, 235, .32), transparent 60%);
    animation: drift-d 19s ease-in-out infinite alternate;
}
.ribbon {
    width: 150vw; height: 18vw; left: -25%; border-radius: 50%; filter: blur(28px);
    background: linear-gradient(90deg, transparent 5%, rgba(140, 210, 215, .32) 35%, rgba(30, 110, 160, .22) 60%, transparent 90%);
}
.r1 { top: -4%; transform: rotate(-16deg); animation: sweep-a 22s ease-in-out infinite alternate; }
.r2 { top: 16%; height: 12vw; opacity: .7; transform: rotate(12deg); animation: sweep-b 27s ease-in-out infinite alternate; }

@keyframes drift-a { to { transform: translate3d(18vw, 10vh, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-22vw, 14vh, 0) scale(.9); } }
@keyframes drift-c { to { transform: translate3d(-14vw, -8vh, 0) scale(1.1) rotate(8deg); } }
@keyframes drift-d { to { transform: translate3d(24vw, 8vh, 0) scale(1.3); } }
@keyframes sweep-a { to { transform: rotate(-6deg) translate3d(12vw, 6vh, 0); } }
@keyframes sweep-b { to { transform: rotate(22deg) translate3d(-10vw, -4vh, 0); } }

.hero::after { z-index: 0; }
.page-hero { position: relative; overflow: hidden; isolation: isolate; }
.page-hero > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .blob, .ribbon { animation: none !important; }
}

/* Intro statements (below hero) ------------------------------------------ */
.intro {
    position: relative; overflow: hidden; text-align: center;
    padding: clamp(56px, 7vw, 110px) 0 clamp(90px, 11vw, 180px);
    background:
        radial-gradient(75% 55% at 8% 100%, rgba(58, 92, 100, .55), transparent 70%),
        radial-gradient(45% 45% at 92% 55%, rgba(34, 52, 58, .45), transparent 70%),
        linear-gradient(180deg, #000 0%, #05090b 40%, #0b1417 100%);
}
.intro-block { max-width: 1120px; margin: 0 auto; }
.intro-block + .intro-block { margin-top: clamp(90px, 11vw, 180px); }
.intro-title {
    margin: 0 0 .55em;
    font-size: clamp(2.1rem, 4.3vw, 4.6rem); font-weight: 500;
    line-height: 1.04; letter-spacing: -.005em; text-transform: uppercase;
}
.intro-text {
    max-width: 64rem; margin: 0 auto;
    font-size: clamp(1.05rem, 1.45vw, 1.6rem); line-height: 1.38; color: rgba(255, 255, 255, .92);
}
.btn-ghost {
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: clamp(44px, 5vw, 96px); padding: .8em 1.5em;
    border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 999px;
    font-size: clamp(1rem, 1.2vw, 1.3rem); color: #fff;
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-ghost svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn-ghost:hover { background: #fff; color: #000; border-color: #fff; }
.btn-ghost:hover svg { transform: translateX(4px); }
.glow-line {
    display: block; width: clamp(140px, 11vw, 210px); height: 6px;
    margin: clamp(20px, 2vw, 36px) auto clamp(28px, 3vw, 52px);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #d9ee3c 0%, rgba(193, 214, 46, .6) 35%, transparent 72%);
    filter: blur(.6px);
    box-shadow: 0 0 26px 4px rgba(193, 214, 46, .28);
}

/* Green-teal atmosphere shared by the intro and news bands */
.intro {
    background:
        radial-gradient(55% 35% at 0% 88%, rgba(56, 84, 46, .75), transparent 70%),
        radial-gradient(55% 40% at 55% 92%, rgba(48, 82, 92, .55), transparent 70%),
        radial-gradient(40% 30% at 100% 70%, rgba(26, 40, 44, .5), transparent 70%),
        linear-gradient(180deg, #000 0%, #05090b 22%, #0f1c20 68%, #16272c 100%);
}
.news-band {
    position: relative; overflow: hidden;
    padding: clamp(40px, 5vw, 80px) 0 clamp(80px, 9vw, 150px);
    background:
        radial-gradient(45% 70% at 0% 25%, rgba(56, 84, 46, .8), transparent 70%),
        radial-gradient(45% 60% at 55% 10%, rgba(56, 92, 102, .5), transparent 70%),
        radial-gradient(40% 80% at 100% 45%, rgba(0, 0, 0, .55), transparent 70%),
        linear-gradient(180deg, #16272c 0%, #122024 55%, #0a1215 85%, #000 100%);
}
.band-head { text-align: center; }
.band-head .intro-title { margin-bottom: 0; }
.band-foot { text-align: center; }
.band-foot .btn-ghost { margin-top: clamp(40px, 4.5vw, 72px); }

/* Glass card with a coloured edge on the left (orange / white / lime) */
.glass-card {
    --tone: rgba(255, 255, 255, .5);
    position: relative; border-radius: clamp(16px, 1.3vw, 22px);
    background: linear-gradient(160deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .03) 100%);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .18);
}
.glass-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(90deg, var(--tone) 0%, rgba(255, 255, 255, .14) 18%, rgba(255, 255, 255, .08) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass-card.tone-orange { --tone: rgba(232, 121, 43, .75); }
.glass-card.tone-white  { --tone: rgba(255, 255, 255, .45); }
.glass-card.tone-lime   { --tone: rgba(193, 214, 46, .8); }

.value-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.1vw, 42px);
    margin-top: clamp(56px, 5.5vw, 100px); text-align: left;
}
.value-card { padding: clamp(28px, 2.4vw, 42px); min-height: clamp(260px, 19vw, 375px); }
.value-card h3 { font-size: clamp(1.4rem, 1.7vw, 2rem); font-weight: 500; margin-bottom: 1.3em; }
.value-card p { font-size: clamp(1rem, 1.12vw, 1.35rem); line-height: 1.45; color: rgba(255, 255, 255, .9); margin: 0; }
@media (max-width: 960px) {
    .value-cards { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
    .value-card { min-height: 0; }
}

/* News cards: outer frame with meta row, inner glass panel */
.news-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.1vw, 42px);
    margin-top: clamp(40px, 4.5vw, 80px);
}
.news-card {
    height: 100%; border-radius: clamp(20px, 1.6vw, 28px);
    border: 1px solid rgba(255, 255, 255, .14);
    background-color: rgba(8, 16, 18, .12);
    transition: transform .4s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .4s var(--ease);
}
.news-card-link { display: flex; flex-direction: column; height: 100%; color: #fff; border-radius: inherit; }
.news-card-link:hover { color: #fff; }
.news-card-top {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: clamp(14px, 1.1vw, 20px) clamp(18px, 1.3vw, 22px) clamp(12px, 1vw, 18px);
    font-size: clamp(.85rem, .95vw, 1.1rem);
    transition: color .3s var(--ease);
}
.news-card-top time { font-size: .88em; opacity: .9; }
.news-card-body {
    position: relative; isolation: isolate;
    flex: 1; display: flex; flex-direction: column;
    min-height: clamp(250px, 17vw, 340px);
    margin: 0 -1px -1px; padding: clamp(24px, 2vw, 36px) clamp(22px, 1.9vw, 32px) clamp(24px, 1.8vw, 32px);
    border-radius: clamp(20px, 1.6vw, 28px); border-top: 1px solid rgba(255, 255, 255, .12);
    background-color: transparent;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
/* Glass gradient sits on its own layer so it can fade out on hover */
.news-card-body::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 65%, rgba(255, 255, 255, .03) 100%);
    transition: opacity .35s var(--ease);
}
.news-card-body h3 { font-size: clamp(1.2rem, 1.5vw, 1.75rem); font-weight: 400; line-height: 1.25; margin: 0; }
.news-card-read { margin-top: clamp(28px, 3vw, 60px); font-size: clamp(.8rem, .85vw, .95rem); font-weight: 500; }
.news-card-author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 28px; font-size: clamp(.95rem, 1vw, 1.15rem); }
.avatar-sm {
    display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #3b4a3f, #1d2a2e); border: 1px solid rgba(255, 255, 255, .2);
    font-size: .95rem; font-weight: 500; color: var(--accent);
}
.avatar-photo { object-fit: cover; padding: 0; background: #1d2a2e; }

/* Hover: lime frame and header strip, solid dark panel */
.news-card:hover, .news-card:focus-within {
    background-color: var(--accent); border-color: var(--accent);
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}
.news-card:hover .news-card-top, .news-card:focus-within .news-card-top { color: #000; }
.news-card:hover .news-card-body, .news-card:focus-within .news-card-body { background-color: #1b1b1b; border-top-color: #1b1b1b; }
.news-card:hover .news-card-body::before, .news-card:focus-within .news-card-body::before { opacity: 0; }
.news-card-link:focus-visible { outline: none; }
@media (max-width: 960px) {
    .news-grid { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
    .news-card-body { min-height: 0; }
}

/* Scroll reveal for [data-reveal] elements */
.js [data-reveal] {
    opacity: 0; transform: translateY(28px);
    transition: opacity .9s var(--ease) var(--delay, 0s), transform .9s var(--ease) var(--delay, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .glow-line[data-reveal] { transform: scaleX(0); }
.js .glow-line[data-reveal].is-visible { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; }
}

/* Hero entrance */
.js .hero-line, .js .hero-intro, .js .hero .stat-pill {
    opacity: 0; transform: translateY(24px);
    animation: rise .9s var(--ease) forwards;
}
.js .hero-line:nth-child(2) { animation-delay: .12s; }
.js .hero-intro { animation-delay: .28s; }
.js .hero .stat-pill:nth-child(1) { animation-delay: .42s; }
.js .hero .stat-pill:nth-child(2) { animation-delay: .52s; }
.js .hero .stat-pill:nth-child(3) { animation-delay: .62s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Stat pills --------------------------------------------------------------- */
.stat-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 36px); }
.stat-pill {
    --tone: #fff;
    display: flex; align-items: center; gap: clamp(14px, 1.4vw, 26px);
    min-height: clamp(84px, 6.2vw, 118px);
    padding: 12px clamp(20px, 2vw, 36px);
    border: 1.5px solid transparent; border-radius: 999px;
    background:
        linear-gradient(#111317, #111317) padding-box,
        linear-gradient(90deg, var(--tone) 0%, rgba(255, 255, 255, .05) 22%, rgba(255, 255, 255, .05) 100%) border-box;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
}
.stat-pill.tone-orange { --tone: var(--orange); }
.stat-pill.tone-white  { --tone: #fff; }
.stat-pill.tone-lime   { --tone: var(--accent); }
.stat-pill-value {
    flex-shrink: 0; font-size: clamp(2.2rem, 3.3vw, 3.9rem); font-weight: 500; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat-pill-label { font-size: clamp(.9rem, 1vw, 1.12rem); line-height: 1.3; color: rgba(255, 255, 255, .92); }
@media (max-width: 1100px) {
    .stat-pills { grid-template-columns: 1fr; max-width: 640px; }
}
.section-tight { padding: 56px 0; }

/* Sections ----------------------------------------------------------------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-alt { background: var(--bg-alt); }
.section-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    margin-bottom: 48px;
}
.section-head h2 { max-width: 22ch; margin: 0; }

.page-hero {
    padding: calc(var(--header-space) + clamp(40px, 6vw, 96px)) 0 clamp(40px, 6vw, 80px);
    background: linear-gradient(180deg, var(--blue-1) 0%, var(--blue-2) 35%, var(--blue-3) 70%, #000 100%);
}
.page-hero h1 { max-width: 18ch; }
.page-hero.page-404 h1 { margin-left: auto; margin-right: auto; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumbs a:hover { color: var(--accent); }

.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-split { grid-template-columns: 1.5fr 1fr; }
@media (max-width: 900px) { .split, .contact-split { grid-template-columns: 1fr; } }

/* Grid & cards ------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
    position: relative; display: block; height: 100%;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 28px;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.card p { color: var(--muted); margin: 0; }
a.card:hover, .card:has(.card-link:hover) {
    background: var(--surface-hover); border-color: rgba(193, 214, 46, .45); color: var(--text);
}
@media (hover: hover) { a.card:hover, .card:has(.card-link:hover) { transform: translateY(-3px); } }
.card-link { display: block; height: 100%; }
.card-link:hover { color: inherit; }
.card-link::before { content: ""; position: absolute; inset: 0; }

.area-card { padding-bottom: 64px; }
.card-arrow {
    position: absolute; right: 24px; bottom: 22px; font-size: 1.25rem; color: var(--accent);
    transition: transform .25s var(--ease);
}
a:hover > .card-arrow { transform: translateX(4px); }

.tab-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.tab-list button {
    padding: .6em 1.2em; border-radius: 999px; border: 1px solid var(--border);
    background: transparent; color: var(--muted); font: 500 .9rem/1 var(--font-sans); cursor: pointer;
    transition: all .2s var(--ease);
}
.tab-list button:hover { color: var(--text); border-color: var(--muted); }
.tab-list button[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }

[hidden] { display: none !important; }

/* Features ----------------------------------------------------------------- */
.features { display: grid; gap: 0; }
.feature { padding: 28px 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; }
.feature:last-child { border-bottom: 1px solid var(--border); }
.feature-num { grid-row: span 2; font: 400 1rem/1.6 var(--font-display); color: var(--accent); }
.feature h3 { margin-bottom: .35em; }
.feature p { color: var(--muted); margin: 0; }

/* Sectors ------------------------------------------------------------------ */
.sector-list { border-top: 1px solid var(--border); }
.sector-row {
    position: relative; display: grid; grid-template-columns: 1fr 1fr 40px; align-items: center; gap: 24px;
    padding: 28px 0; border-bottom: 1px solid var(--border);
    transition: padding .3s var(--ease);
}
.sector-row .card-arrow { position: static; justify-self: end; }
.sector-name { font: 400 clamp(1.4rem, 2.6vw, 2rem)/1.2 var(--font-display); }
.sector-summary { color: var(--muted); }
@media (hover: hover) { .sector-row:hover { padding-left: 16px; } }
@media (max-width: 700px) {
    .sector-row { grid-template-columns: 1fr 32px; gap: 6px 16px; }
    .sector-summary { grid-row: 2; }
    .sector-row .card-arrow { grid-row: 1 / span 2; grid-column: 2; }
}

/* Insights ----------------------------------------------------------------- */
.insight-card h3 { margin: 16px 0 12px; }
.insight-meta { display: flex; align-items: center; gap: 12px; font-size: .85rem; color: var(--muted); }
.tag {
    display: inline-block; padding: .3em .8em; border-radius: 999px;
    background: rgba(193, 214, 46, .14); color: var(--accent); font-size: .75rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
}
.insight-author { display: block; margin-top: 18px; font-size: .9rem; color: var(--text); }
.page-hero .insight-meta { margin-bottom: 1.25rem; }

/* People ------------------------------------------------------------------- */
.avatar {
    display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, #3a3326, #1f1f24); border: 1px solid rgba(193, 214, 46, .35);
    color: var(--accent); font: 400 1.5rem/1 var(--font-display); margin-bottom: 20px;
}
.avatar-lg { width: clamp(120px, 16vw, 180px); height: clamp(120px, 16vw, 180px); font-size: clamp(2.5rem, 5vw, 4rem); margin: 0; }
.person-hero { display: flex; align-items: center; gap: clamp(24px, 5vw, 56px); }
@media (max-width: 640px) { .person-hero { flex-direction: column; align-items: flex-start; } }

.empty { color: var(--muted); padding: 40px 0; text-align: center; }

/* Panels, prose, lists ----------------------------------------------------- */
.panel {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 32px; position: sticky; top: calc(var(--header-h) + 24px);
}
.panel .h4 { margin-top: 1.5em; }
.panel .h4:first-child { margin-top: 0; }
.panel address, .panel p { font-style: normal; color: var(--muted); }
.panel a { color: var(--text); }
.panel a:hover { color: var(--accent); }
.panel a.btn { color: var(--accent-ink); }

.prose { font-size: 1.1rem; }
.prose p { color: #d6d3cd; }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.check-list, .link-list { list-style: none; padding: 0; margin: 0 0 24px; }
.check-list li, .link-list li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.check-list li::before { content: "✓"; color: var(--accent); margin-right: 12px; }
.link-list a::after { content: " →"; color: var(--accent); }

.author-box {
    display: flex; align-items: center; gap: 16px; margin-top: 48px; padding: 24px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.author-box .avatar { margin: 0; flex-shrink: 0; width: 56px; height: 56px; font-size: 1.2rem; }
.author-box p { margin: 0; color: var(--muted); font-size: .95rem; }
.author-box a { text-decoration: none; color: var(--text); }
.disclaimer { margin-top: 32px; font-size: .85rem !important; color: var(--muted) !important; }

/* Rounded feature panels (expertise, join us, CTA) ---------------------- */
.panels {
    position: relative; overflow: hidden;
    padding: clamp(40px, 5vw, 90px) 0 calc(clamp(80px, 8vw, 140px) + 40px);
    background:
        radial-gradient(40% 30% at 30% 40%, rgba(46, 72, 38, .55), transparent 70%),
        radial-gradient(35% 25% at 50% 72%, rgba(46, 72, 38, .5), transparent 70%),
        linear-gradient(180deg, #000 0%, #16232a 18%, #2a3e44 45%, #2c4247 100%);
}
.panels > .container { display: grid; gap: clamp(28px, 3vw, 56px); }
.panel-card {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
    min-height: clamp(420px, 40vw, 790px);
    padding: clamp(36px, 5.5vw, 108px);
    border-radius: clamp(28px, 2.6vw, 50px);
    border: 1px solid rgba(255, 255, 255, .09);
    background:
        radial-gradient(45% 45% at 40% 0%, rgba(46, 72, 38, .45), transparent 70%),
        linear-gradient(135deg, #2a3c41 0%, #1f2e33 50%, #182327 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.panel-copy { position: relative; z-index: 1; max-width: 700px; }
.panel-title { margin: 0 0 .75em; font-size: clamp(2rem, 3.4vw, 3.9rem); line-height: 1.07; text-transform: uppercase; }
.panel-text { margin: 0; font-size: clamp(1rem, 1.2vw, 1.4rem); line-height: 1.5; color: rgba(255, 255, 255, .92); }
.panel-copy .btn-ghost { margin-top: clamp(32px, 3vw, 56px); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-lime { background: var(--accent); border-color: var(--accent); color: #000; }
.btn-lime:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #000; }

/* Expertise panel: link list + sector chips on the right */
.expertise-panel { align-items: start; gap: clamp(32px, 5vw, 110px); }
.area-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2.5vw, 48px); list-style: none; margin: 0; padding: 0; }
.area-links a {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: clamp(12px, 1vw, 18px) 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
    font-size: clamp(1rem, 1.15vw, 1.35rem);
    transition: color .2s var(--ease), padding .3s var(--ease);
}
.area-links a span { color: var(--accent); transition: transform .25s var(--ease); }
.area-links a:hover { color: var(--accent); padding-left: 6px; }
.area-links a:hover span { transform: translateX(4px); }
.panel-label { margin: clamp(32px, 3vw, 52px) 0 16px; font-size: clamp(.95rem, 1vw, 1.1rem); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .7); }
.sector-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sector-chips a {
    display: inline-block; padding: .55em 1.1em; border-radius: 999px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    font-size: clamp(.9rem, .95vw, 1.05rem);
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.sector-chips a:hover { background: var(--accent); border-color: var(--accent); color: #000; }

/* Art panel: ribbon graphic fills the right-hand side */
.ribbon-art { position: absolute; z-index: 0; right: 0; bottom: 0; width: 58%; height: 100%; pointer-events: none; }
.ribbon-float { animation: ribbon-float 14s ease-in-out infinite alternate; transform-origin: 70% 100%; }
@keyframes ribbon-float {
    from { transform: translate(0, 0) rotate(0deg); }
    to   { transform: translate(-14px, 10px) rotate(-1.2deg); }
}
@media (prefers-reduced-motion: reduce) { .ribbon-float { animation: none; } }

@media (max-width: 1000px) {
    .panel-card { grid-template-columns: 1fr; }
    .art-panel { padding-bottom: clamp(260px, 60vw, 420px); }
    .ribbon-art { width: 100%; height: clamp(260px, 60vw, 420px); }
}
@media (max-width: 560px) { .area-links { grid-template-columns: 1fr; } }

/* Forms -------------------------------------------------------------------- */
input, select, textarea {
    width: 100%; font: inherit; color: var(--text);
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 16px; transition: border-color .2s var(--ease);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 140px; }

.form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 8px; }
.field-check label { display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--muted); }
.field-check input { width: 18px; height: 18px; padding: 0; accent-color: var(--accent); }
.field-check a { color: var(--accent); text-decoration: underline; }
.has-error input, .has-error textarea { border-color: var(--error); }
.error { display: block; color: var(--error); font-size: .85rem; margin-top: 6px; }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }

.alert { padding: 20px 24px; border-radius: var(--radius); margin-bottom: 24px; }
.alert p { margin: 0; color: var(--muted); }
.alert-success { background: rgba(155, 226, 155, .08); border: 1px solid rgba(155, 226, 155, .35); }
.alert-success .h4 { color: var(--success); }
.alert-error { background: rgba(255, 138, 128, .08); border: 1px solid rgba(255, 138, 128, .35); color: var(--error); }

/* Footer ------------------------------------------------------------------- */
.site-footer {
    position: relative; z-index: 1;
    margin-top: -40px; padding: clamp(56px, 5.5vw, 100px) 0 clamp(28px, 2.5vw, 44px);
    background: #1b1b1b; border-radius: clamp(28px, 2.4vw, 44px) clamp(28px, 2.4vw, 44px) 0 0;
}
.footer-top {
    display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 3.5vw, 72px); padding-bottom: clamp(56px, 5vw, 96px);
}
.footer-brand .wordmark-name { font-size: clamp(1.8rem, 2.2vw, 2.6rem); }
.footer-signup { margin-top: clamp(56px, 6vw, 110px); }
.footer-signup h2 { margin: 0 0 .25em; font-size: clamp(1.25rem, 1.6vw, 1.8rem); text-transform: uppercase; }
.footer-signup p { margin: 0 0 22px; font-size: clamp(.95rem, 1vw, 1.15rem); }
.footer-subscribe {
    display: inline-flex; align-items: center; gap: 12px; padding: .75em 1.4em;
    border-radius: 999px; background: var(--accent); color: #000; font-size: clamp(1rem, 1.1vw, 1.25rem);
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.footer-subscribe svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.footer-subscribe:hover { background: var(--accent-hover); color: #000; }
.footer-subscribe:hover svg { transform: translateX(4px); }
.footer-subscribe:active { transform: scale(.97); }
.footer-col h3 { margin: 0 0 clamp(20px, 2vw, 34px); font-size: clamp(1.05rem, 1.15vw, 1.35rem); font-weight: 500; text-transform: uppercase; }
.footer-col ul { display: grid; gap: clamp(12px, 1vw, 18px); list-style: none; margin: 0; padding: 0; }
.footer-col a, .footer-col address { color: rgba(255, 255, 255, .72); font-size: clamp(.95rem, 1vw, 1.15rem); }
.footer-col a:hover { color: var(--accent); }
.footer-col address { display: grid; gap: 4px; font-style: normal; margin-bottom: clamp(12px, 1vw, 18px); line-height: 1.4; }
.footer-bottom {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
    padding-top: clamp(28px, 2.4vw, 44px); border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: clamp(1rem, 1.1vw, 1.3rem);
}
.footer-bottom p { margin: 0; }
.footer-socials { display: flex; gap: clamp(16px, 1.4vw, 24px); list-style: none; margin: 0; padding: 0; }
.footer-socials a { display: block; color: #fff; transition: color .2s var(--ease), transform .2s var(--ease); }
.footer-socials a:hover { color: var(--accent); transform: translateY(-2px); }
.footer-socials svg { width: clamp(22px, 1.4vw, 26px); height: clamp(22px, 1.4vw, 26px); }
@media (max-width: 1000px) {
    .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-col:last-child { grid-column: 1 / -1; }
}

/* Reveal on scroll --------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* Article page ------------------------------------------------------------- */
.article-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: calc(var(--header-space) + clamp(60px, 8vw, 150px)) 0 clamp(32px, 3vw, 56px);
    background:
        radial-gradient(70% 60% at 30% 0%, rgba(58, 88, 92, .55), transparent 70%),
        linear-gradient(180deg, #2a3c3f 0%, #152022 38%, #050808 78%, #000 100%);
}
.article-hero .aurora { opacity: .35; }
.article-hero > .container { position: relative; z-index: 1; }
.article-kicker { margin: 0 0 clamp(20px, 2.2vw, 36px); font-size: clamp(1rem, 1.1vw, 1.3rem); font-weight: 500; }
.article-title {
    max-width: 21ch; margin: 0;
    font-size: clamp(2.1rem, 3.9vw, 4.4rem); line-height: 1.04; font-weight: 500;
}
.article-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: clamp(56px, 7vw, 120px) 0 clamp(18px, 1.6vw, 28px);
    font-size: clamp(.95rem, 1vw, 1.15rem); font-weight: 500;
}
.article-meta span[aria-hidden] { font-size: .7em; }

.share { display: flex; align-items: center; gap: clamp(16px, 1.6vw, 30px); }
.share-label { font-size: clamp(1.05rem, 1.25vw, 1.45rem); }
.share-list { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.share-btn {
    position: relative; display: grid; place-items: center;
    width: clamp(38px, 2.6vw, 48px); aspect-ratio: 1; border-radius: 50%;
    background: var(--accent); color: #000;
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.share-btn:hover { background: var(--accent-hover); color: #000; transform: translateY(-2px); }
.share-btn:active { transform: scale(.94); }
.share-btn svg { width: 56%; height: 56%; }
.share-btn[data-copied]::after {
    content: "Link copied"; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    padding: 4px 10px; border-radius: 6px; background: #fff; color: #000; font-size: .75rem; white-space: nowrap;
}

.author-pill {
    display: inline-flex; align-items: center; gap: 14px;
    margin-top: clamp(22px, 2vw, 36px); padding: 16px clamp(48px, 5vw, 96px) 16px 18px;
    border-radius: 999px; background: rgba(255, 255, 255, .26); color: #fff;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: background-color .25s var(--ease);
}
.author-pill:hover { background: rgba(255, 255, 255, .34); color: #fff; }
.author-pill-img { width: clamp(52px, 3.8vw, 72px); height: clamp(52px, 3.8vw, 72px); border-radius: 50%; display: grid; place-items: center; background: #1d2a2e; color: var(--accent); }
.author-pill span { display: grid; line-height: 1.25; font-size: clamp(.95rem, 1vw, 1.15rem); }
.author-pill strong { font-size: clamp(1.1rem, 1.35vw, 1.55rem); font-weight: 500; }

.article-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 580px);
    gap: clamp(48px, 7vw, 140px); align-items: start;
    padding-top: clamp(48px, 5vw, 90px); padding-bottom: clamp(60px, 7vw, 120px);
}
.article-body { font-size: clamp(1.05rem, 1.2vw, 1.4rem); line-height: 1.5; }
.article-body p { margin: 0 0 1.35em; }
.article-body h2 {
    margin: 2em 0 .9em; font-size: clamp(1.4rem, 1.85vw, 2.15rem); line-height: 1.15;
    font-weight: 500; text-transform: uppercase;
}
.article-body ul { margin: 0 0 1.5em; padding-left: 1.3em; }
.article-body li { margin-bottom: .55em; padding-left: .3em; }
.article-body li::marker { color: var(--accent); }
.article-disclaimer { margin: 2.5em 0 0; font-size: .9rem; color: var(--muted); }

.author-card {
    max-width: 580px; margin-top: clamp(48px, 5vw, 80px); padding: 22px 22px 26px;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 22px; background: #0c0c0c;
    font-size: clamp(1rem, 1.1vw, 1.25rem);
}
.author-card-img { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px; background: #1d2a2e; color: var(--accent); font-size: 1.6rem; }
.author-card-name { display: block; font-size: 1.15em; font-weight: 500; margin-bottom: 8px; }
.author-card p { margin: 0 0 6px; }

.article-aside { display: grid; gap: clamp(14px, 1vw, 18px); }
.aside-title { margin: 0 0 8px; font-size: clamp(1.6rem, 2vw, 2.3rem); text-transform: uppercase; }
.latest-list { display: grid; gap: clamp(12px, .9vw, 16px); list-style: none; margin: 0; padding: 0; }
.latest-card {
    display: grid; gap: 10px; padding: clamp(24px, 2vw, 36px) clamp(24px, 2vw, 36px);
    border-radius: clamp(22px, 1.8vw, 32px); background: #181a1b; color: #fff;
    box-shadow: inset 4px 0 0 rgba(95, 135, 145, .75);
    transition: background-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.latest-card time { font-size: clamp(.85rem, .9vw, 1.05rem); font-weight: 500; }
.latest-card span { font-size: clamp(1.15rem, 1.4vw, 1.6rem); line-height: 1.3; }
.latest-card:hover { color: #fff; background: #202425; box-shadow: inset 4px 0 0 var(--accent); transform: translateX(4px); }

.newsletter-card {
    margin-top: clamp(16px, 1.5vw, 28px); padding: clamp(28px, 2.3vw, 40px);
    border: 1px solid rgba(255, 255, 255, .16); border-radius: clamp(22px, 1.8vw, 32px); background: #0c0c0c;
}
.newsletter-card h2 { font-size: clamp(1.6rem, 2vw, 2.3rem); text-transform: uppercase; margin-bottom: .7em; }
.newsletter-card p { margin: 0 0 24px; font-size: clamp(1rem, 1.1vw, 1.25rem); line-height: 1.25; }
.newsletter-form { display: grid; gap: 12px; }
.newsletter-form input[type="email"] { border-radius: 999px; background: #151515; padding: 16px 22px; }
.btn-wide { justify-content: center; width: 100%; margin-top: 0; background: none; font: inherit; font-size: clamp(1rem, 1.2vw, 1.3rem); cursor: pointer; }
.newsletter-note { color: var(--accent); font-weight: 500; }
.newsletter-note.is-error { color: var(--error); margin-bottom: 12px !important; }
.article-aside .share { justify-content: space-between; margin-top: clamp(20px, 2vw, 32px); }

.related { padding: clamp(40px, 5vw, 80px) 0 clamp(80px, 9vw, 150px); }
.related-title { text-align: center; margin: 0; font-size: clamp(2.2rem, 4vw, 4.4rem); text-transform: uppercase; }
.related .news-card-body { background-color: #1b1b1b; }
.related .news-card-body::before { opacity: 0; }

@media (max-width: 1024px) {
    .article-layout { grid-template-columns: 1fr; }
    .article-aside { max-width: 640px; }
}
@media (max-width: 600px) {
    .author-pill { padding-right: 32px; }
    .article-aside .share { justify-content: flex-start; }
}

/* Find a lawyer -------------------------------------------------------------- */
.lawyers-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: calc(var(--header-space) + clamp(48px, 6vw, 120px)) 0 clamp(48px, 5vw, 90px);
    background:
        radial-gradient(70% 60% at 30% 0%, rgba(58, 88, 92, .55), transparent 70%),
        linear-gradient(180deg, #2a3c3f 0%, #152022 45%, #050808 85%, #000 100%);
}
.lawyers-hero .aurora { opacity: .35; }
.lawyers-hero > .container { position: relative; z-index: 1; }
.lawyers-title { margin: 0; font-size: clamp(2.6rem, 5.5vw, 6rem); }
.lawyers-intro { max-width: 52rem; margin: .8em 0 0; font-size: clamp(1.05rem, 1.3vw, 1.45rem); color: rgba(255, 255, 255, .9); }

.lawyer-search { margin-top: clamp(32px, 3.5vw, 60px); max-width: 1180px; }
.lawyer-search-bar {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 26px;
    border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lawyer-search-bar:focus-within { border-color: var(--accent); }
.lawyer-search-bar input {
    flex: 1; min-width: 0; padding: 12px 0; border: 0; background: none; border-radius: 0;
    font-size: clamp(1rem, 1.2vw, 1.3rem);
}
.lawyer-search-bar input::placeholder { color: rgba(255, 255, 255, .6); }
.lawyer-search-bar .icon-btn { width: 52px; height: 52px; flex-shrink: 0; border: 0; cursor: pointer; }
.lawyer-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px;
    font-size: clamp(1rem, 1.1vw, 1.2rem);
}
.lawyer-filters select { width: auto; flex: 1 1 220px; max-width: 320px; border-radius: 999px; background-color: rgba(255, 255, 255, .08); padding: 12px 44px 12px 20px; }
.lawyer-filters .btn-ghost { margin-top: 0; cursor: pointer; font: inherit; padding: .7em 1.6em; }

.lawyers-results { padding: clamp(24px, 3vw, 48px) 0 clamp(80px, 8vw, 140px); }
.lawyers-count { margin: 0 0 24px; color: var(--muted); font-size: 1.05rem; }
.lawyer-grid, .grid-4:has(.lawyer-card) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 30px); }
.lawyer-grid > [hidden] { display: none; }
.lawyer-grid > div, .grid-4 > .lawyer-card { position: relative; }
.lawyer-grid > div:hover, .lawyer-grid > div:focus-within { z-index: 2; }

/* Card: gradient glass, circular photo. Hover: lifts and grows, blurred photo band, Read More, lime glow */
.lawyer-card {
    --photo: none;
    position: relative; isolation: isolate; height: 100%;
    border-radius: clamp(22px, 1.8vw, 32px);
    border: 1px solid rgba(255, 255, 255, .14);
    background: linear-gradient(180deg, #1c1d1e 0%, #222627 45%, #2d3739 100%);
    transition: transform .45s var(--ease), background-color .35s var(--ease), box-shadow .45s var(--ease), border-color .35s var(--ease);
}
/* Blurred copy of the photo across the top of the card on hover */
.lawyer-card::before {
    content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: clamp(110px, 8vw, 150px);
    border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    background: var(--photo) center 35% / cover no-repeat;
    filter: blur(22px) saturate(110%); opacity: 0; transform: scale(1.02);
    transition: opacity .4s var(--ease);
    overflow: hidden; clip-path: inset(0 round clamp(22px, 1.8vw, 32px) clamp(22px, 1.8vw, 32px) 0 0);
}
/* Lime glow under the card */
.lawyer-card::after {
    content: ""; position: absolute; left: 50%; bottom: -3px; width: 42%; height: 6px; border-radius: 50%;
    transform: translateX(-50%) scaleX(0);
    background: radial-gradient(ellipse at center, #d9ee3c 0%, rgba(193, 214, 46, .5) 40%, transparent 72%);
    box-shadow: 0 0 22px 4px rgba(193, 214, 46, .25);
    transition: transform .45s var(--ease);
}
.lawyer-card-link {
    display: flex; flex-direction: column; height: 100%; color: #fff;
    padding: clamp(24px, 2vw, 34px) clamp(22px, 2.2vw, 40px) clamp(22px, 2vw, 34px);
}
.lawyer-card-link:hover { color: #fff; }
.lawyer-photo {
    align-self: center; width: clamp(130px, 10.5vw, 196px); aspect-ratio: 1; margin-bottom: clamp(20px, 1.8vw, 32px);
    border-radius: 50%; overflow: hidden; background: #1d2a2e;
    transition: transform .45s var(--ease);
}
.lawyer-photo-img { display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; color: var(--accent); font-size: 2.6rem; }
.lawyer-card h3 { margin: 0 0 .5em; font-size: clamp(1.1rem, 1.3vw, 1.5rem); font-weight: 500; text-transform: uppercase; }
.lawyer-role { margin: 0 0 1.1em; font-size: clamp(.95rem, 1vw, 1.15rem); color: rgba(255, 255, 255, .6); }
.lawyer-bio {
    margin: 0; font-size: clamp(.95rem, 1.02vw, 1.15rem); line-height: 1.45; color: rgba(255, 255, 255, .92);
    display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
}
.lawyer-more {
    display: flex; align-items: center; gap: 36px; margin-top: auto; padding-top: 20px;
    font-size: clamp(.95rem, 1.05vw, 1.2rem);
    opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lawyer-more svg { width: 20px; height: 20px; color: var(--accent); transition: transform .25s var(--ease); }

.lawyer-card:hover, .lawyer-card:focus-within {
    transform: translateY(-10px) scale(1.04);
    background: #2a2a2a; border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}
.lawyer-card:hover::before, .lawyer-card:focus-within::before { opacity: .85; }
.lawyer-card:hover::after, .lawyer-card:focus-within::after { transform: translateX(-50%) scaleX(1); }
.lawyer-card:hover .lawyer-photo, .lawyer-card:focus-within .lawyer-photo { transform: translateY(8px) scale(1.12); }
.lawyer-card:hover .lawyer-more, .lawyer-card:focus-within .lawyer-more { opacity: 1; transform: none; }
.lawyer-card:hover .lawyer-more svg { transform: translateX(4px); }
.lawyer-card-link:focus-visible { outline: none; }
@media (hover: none) { .lawyer-more { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lawyer-card:hover, .lawyer-card:focus-within { transform: none; } }
@media (max-width: 1100px) { .lawyer-grid, .grid-4:has(.lawyer-card) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .lawyer-grid, .grid-4:has(.lawyer-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  {
    .lawyer-grid, .grid-4:has(.lawyer-card) { grid-template-columns: 1fr; }
    .lawyer-filters select { max-width: none; }
}

/* Contact page ----------------------------------------------------------------- */
.contact-page {
    position: relative; overflow: hidden; isolation: isolate;
    padding: calc(var(--header-space) + clamp(40px, 5vw, 100px)) 0 calc(clamp(80px, 8vw, 140px) + 40px);
    background:
        radial-gradient(50% 40% at 20% 10%, rgba(46, 72, 38, .45), transparent 70%),
        radial-gradient(60% 50% at 80% 0%, rgba(58, 88, 92, .4), transparent 70%),
        linear-gradient(180deg, #1c2a2d 0%, #0b1214 40%, #050808 100%);
}
.contact-page .aurora { opacity: .3; }
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 110px); align-items: start; }
.contact-title { margin: 0 0 .45em; font-size: clamp(2.6rem, 5.5vw, 6rem); }
.contact-lead { margin: 0; font-size: clamp(1.15rem, 1.7vw, 2rem); line-height: 1.3; font-weight: 500; max-width: 26em; }
.contact-note { margin: 1.4em 0 0; font-size: clamp(.9rem, .95vw, 1.05rem); color: rgba(255, 255, 255, .8); }
.contact-subtitle { margin: clamp(56px, 7vw, 150px) 0 clamp(24px, 2.5vw, 48px); font-size: clamp(2rem, 3.6vw, 4rem); text-transform: uppercase; }
.location-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 30px); }
.location-card {
    padding: clamp(24px, 2.4vw, 40px); border-radius: clamp(20px, 1.8vw, 30px);
    border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(180deg, #1d1f20 0%, #141617 100%);
    font-size: clamp(1rem, 1.15vw, 1.3rem); line-height: 1.45;
}
.location-card h3 { margin: 0 0 1em; font-size: clamp(1.3rem, 1.7vw, 2rem); text-transform: uppercase; }
.location-card address { font-style: normal; margin-bottom: 1.2em; }
.location-card p { margin: 0 0 .8em; }
.location-card p:last-child { margin-bottom: 0; }
.location-card a:hover { color: var(--accent); }

/* Onboarding form panel */
.onboard {
    position: sticky; top: calc(var(--header-space) + 12px);
    padding: clamp(26px, 3.2vw, 64px) clamp(22px, 3.2vw, 64px);
    border-radius: clamp(24px, 2.2vw, 40px);
    background: #1b1b1b; border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.onboard-progress { margin-bottom: clamp(22px, 2vw, 34px); }
.onboard-progress[hidden] { display: none; }
.onboard-count { display: flex; align-items: baseline; gap: 6px; margin: 0 0 12px; color: var(--muted); font-size: .95rem; }
.onboard-count strong { margin-left: auto; color: #fff; font-weight: 500; font-size: clamp(1.05rem, 1.2vw, 1.3rem); text-transform: uppercase; }
.onboard-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.onboard-bar span { display: block; height: 100%; width: 25%; border-radius: inherit; background: var(--accent); box-shadow: 0 0 12px rgba(193, 214, 46, .6); transition: width .5s var(--ease); }
.onboard-form { display: grid; gap: 0; }
.onboard-step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: clamp(18px, 1.6vw, 28px); }
.onboard-step + .onboard-step { margin-top: 36px; }
.onboard-step[hidden], .onboard [data-advice-only][hidden] { display: none; }
.js .onboard-step:not([hidden]) { animation: step-in .45s var(--ease); }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.js .onboard-step + .onboard-step { margin-top: 0; }

.onboard .form-row { gap: clamp(14px, 1.6vw, 28px); }
.onboard .field label, .onboard .field-label { display: block; margin-bottom: 10px; font-size: clamp(.9rem, .95vw, 1.05rem); font-weight: 500; }
.onboard .field-label { font-size: clamp(1.05rem, 1.25vw, 1.4rem); font-weight: 400; margin-bottom: 16px; }
.onboard .field label i { font-style: normal; color: #ff5b5b; margin-left: 4px; }
.onboard input:not([type=checkbox]):not([type=radio]), .onboard select, .onboard textarea {
    padding: 18px 26px; border-radius: 999px; font-size: clamp(1rem, 1.05vw, 1.15rem);
    background-color: #2a2a2a; border: 1px solid transparent; border-left: 2px solid var(--accent);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.onboard textarea { border-radius: clamp(22px, 2vw, 32px); min-height: 160px; }
.onboard input::placeholder, .onboard textarea::placeholder { color: rgba(255, 255, 255, .45); }
.onboard input:focus, .onboard select:focus, .onboard textarea:focus { outline: none; border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(193, 214, 46, .15); }
.onboard .has-error input, .onboard .has-error select, .onboard .has-error textarea { border-color: var(--error); border-left-color: var(--error); }
.select-wrap { position: relative; }
.select-wrap::after {
    content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; pointer-events: none;
    border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(45deg);
}
.onboard select { appearance: none; background-image: none; padding-right: 56px; cursor: pointer; }
.onboard option { background: #1f1f1f; color: #fff; }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.check-option { position: relative; display: block; cursor: pointer; font-size: clamp(1rem, 1.15vw, 1.3rem); line-height: 1.25; }
.check-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-option span { display: block; position: relative; padding: 2px 0 0 42px; min-height: 28px; }
.check-option span::before {
    content: ""; position: absolute; left: 0; top: 0; width: 26px; height: 26px;
    border: 2px solid rgba(255, 255, 255, .7); border-radius: 5px; background: #000;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.check-option:hover span::before { border-color: #fff; }
.check-option input:checked + span::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 4px #000; }
.check-option input:focus-visible + span::before { outline: 2px solid var(--accent); outline-offset: 3px; }

.choice-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.choice-pill { position: relative; cursor: pointer; }
.choice-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-pill span {
    display: inline-block; padding: .6em 1.2em; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25); font-size: .98rem;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.choice-pill:hover span { border-color: rgba(255, 255, 255, .55); }
.choice-pill input:checked + span { background: var(--accent); border-color: var(--accent); color: #000; }
.choice-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.consult-lawyer { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); }
.consult-lawyer strong { color: #fff; font-weight: 500; }
.onboard .field-check label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: rgba(255, 255, 255, .8); }
.onboard .field-check input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.onboard .field-check a { color: var(--accent); text-decoration: underline; }
.onboard .error { margin-top: 8px; padding-left: 26px; }
.onboard .field-check .error, .onboard .check-grid + .error { padding-left: 0; }

.onboard-nav { display: flex; gap: 12px; margin-top: clamp(28px, 2.6vw, 44px); }
.onboard-nav .btn-ghost { margin-top: 0; cursor: pointer; font: inherit; font-size: clamp(1rem, 1.2vw, 1.3rem); }
.onboard-nav [data-step-next], .onboard-nav [data-step-submit] { margin-left: auto; }
.onboard-back { background: none; }
.onboard-nav [hidden] { display: none; }

.onboard-tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #000; font-size: 1.8rem; margin-bottom: 24px; }
.onboard-done h2 { font-size: clamp(1.5rem, 2.2vw, 2.4rem); text-transform: uppercase; }
.onboard-done p { color: rgba(255, 255, 255, .85); font-size: 1.1rem; }
.onboard-done a { color: var(--accent); }

@media (max-width: 1100px) {
    .contact-grid { grid-template-columns: 1fr; }
    .onboard { position: static; }
    .contact-subtitle { margin-top: 48px; }
}
@media (max-width: 600px) {
    .location-cards, .check-grid { grid-template-columns: 1fr; }
}

/* Company registration / regulatory statements */
.footer-legal { margin: 20px 0 0; max-width: 1100px; font-size: .82rem; line-height: 1.6; color: rgba(255, 255, 255, .55); }
.contact-legal { max-width: 40em; color: rgba(255, 255, 255, .6); }

/* Verify a certificate ------------------------------------------------------ */
.verify-page { min-height: 80vh; }
.verify-wrap { position: relative; z-index: 1; max-width: 980px; }
.verify-form { display: flex; gap: 12px; margin-top: clamp(28px, 3vw, 48px); padding: 8px 8px 8px 28px; border-radius: 999px; background: #1b1b1b; border: 1px solid rgba(255, 255, 255, .1); border-left: 2px solid var(--accent); }
.verify-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(193, 214, 46, .15); }
.verify-form input { flex: 1; min-width: 0; border: 0; background: none; padding: 14px 0; border-radius: 0; font-size: clamp(1.05rem, 1.3vw, 1.35rem); letter-spacing: .03em; }
.verify-form input:focus { outline: none; }
.verify-form input::placeholder { color: rgba(255, 255, 255, .45); letter-spacing: 0; }
.verify-form .btn-ghost { margin-top: 0; cursor: pointer; font: inherit; font-size: clamp(1rem, 1.2vw, 1.25rem); }
.verify-result {
    display: flex; gap: 22px; align-items: flex-start; margin-top: 28px; padding: clamp(24px, 3vw, 44px);
    border-radius: clamp(22px, 2vw, 34px); background: #1b1b1b; border: 1px solid rgba(255, 255, 255, .1);
    animation: step-in .45s var(--ease);
}
.verify-result.is-valid { border-color: rgba(193, 214, 46, .55); box-shadow: 0 0 0 1px rgba(193, 214, 46, .15), 0 30px 70px rgba(0, 0, 0, .35); }
.verify-result.is-invalid { border-color: rgba(255, 138, 128, .45); }
.verify-icon { flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.6rem; font-weight: 600; }
.is-valid .verify-icon { background: var(--accent); color: #000; }
.is-invalid .verify-icon { background: rgba(255, 138, 128, .15); color: var(--error); }
.verify-result h2 { margin: 6px 0 .4em; font-size: clamp(1.5rem, 2.4vw, 2.4rem); text-transform: uppercase; }
.verify-result p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.05rem; }
.verify-result a { color: var(--accent); text-decoration: underline; }
.verify-details { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.verify-details dt { color: var(--muted); }
.verify-details dd { margin: 0; font-weight: 500; }
@media (max-width: 560px) {
    .verify-form { flex-direction: column; padding: 8px; border-radius: 24px; }
    .verify-form input { padding: 12px 16px; }
    .verify-result { flex-direction: column; }
    .verify-details { grid-template-columns: 1fr; gap: 2px; }
    .verify-details dd { margin-bottom: 10px; }
}

/* Ghost buttons rendered as <button> need the browser's default background removed */
button.btn-ghost:not(.btn-lime) { background: transparent; color: #fff; }
button.btn-ghost:not(.btn-lime):hover { background: #fff; color: #000; border-color: #fff; }