/* =========================================================
   WHITE LABEL TRADING SOLUTIONS — DESIGN SYSTEM
   Palette: deep navy-black + signal blue + terminal amber
   Type: Space Grotesk (display) / Inter (body) / IBM Plex Mono (data)
========================================================= */

:root{
	--bg:            #0a0d12;
	--bg-alt:        #0d131b;
	--surface:       #121822;
	--surface-2:     #171f2b;
	--border:        #232c3a;
	--border-soft:   #1a212c;
	--text:          #e7ecf3;
	--text-dim:      #8b97a8;
	--text-faint:    #5c6779;

	--accent:        #00d4ff;  /* electric cyan — primary */
	--accent-dim:    #0a6f8a;
	--accent-2:      #7c5cff;  /* violet — gradient partner */
	--accent-warm:   #f5a623;  /* terminal amber — used sparingly, small details only */
	--positive:      #00e6a8;
	--negative:      #ff5c7a;
	--gradient-brand: linear-gradient(90deg, var(--accent), var(--accent-2));

	--font-display:  'Space Grotesk', sans-serif;
	--font-body:     'Inter', sans-serif;
	--font-mono:     'IBM Plex Mono', monospace;

	--radius:        10px;
	--radius-sm:     6px;
	--maxw:          1220px;
}

/* =========================================================
   BASE
========================================================= */
html{ scroll-behavior:smooth; }
body{
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	color: var(--text);
}
h1{ font-size: clamp(2.6rem, 5.2vw, 4.2rem); font-weight: 700; }
h2{ font-size: clamp(2.1rem, 3.6vw, 3rem); font-weight: 700; }
h3{ font-size: 1.3rem; font-weight: 600; }
p{ margin: 0 0 1em; color: var(--text-dim); }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section{ padding: 96px 0; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

.wts-grid-overlay{
	position: fixed; inset: 0; pointer-events: none; z-index: 0;
	background-image:
		linear-gradient(to right, rgba(76,141,255,0.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(76,141,255,0.035) 1px, transparent 1px);
	background-size: 42px 42px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%);
}

/* eyebrow label */
.eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	font-family: var(--font-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
	color: var(--accent-warm); margin-bottom:16px;
}
.eyebrow-dot{ width:6px; height:6px; border-radius:50%; background: var(--accent-warm); box-shadow: 0 0 8px var(--accent-warm); }

/* buttons */
.btn{
	display:inline-flex; align-items:center; justify-content:center;
	font-family: var(--font-body); font-weight:600; font-size:0.95rem;
	padding: 13px 26px; border-radius: var(--radius-sm);
	border: 1px solid transparent; transition: all .15s ease; white-space:nowrap;
}
.btn-primary{ background: var(--gradient-brand); color:#04121a; box-shadow: 0 8px 24px -8px rgba(0,212,255,0.45); }
.btn-primary:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }
.btn-sm{ padding: 9px 18px; font-size:0.85rem; }
.btn-lg{ padding: 16px 32px; font-size:1rem; }

/* =========================================================
   HEADER
========================================================= */
.site-header{
	position: sticky; top:0; z-index:50;
	background: rgba(10,13,18,0.85); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-soft);
}
.header-inner{ display:flex; align-items:center; gap:32px; height:76px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.05rem; margin-right:auto; }
.brand-mark{ color: var(--accent); display:flex; }
.brand-text em{ display:block; font-style:normal; font-family: var(--font-mono); font-size:0.62rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color: var(--text-faint); }
.primary-nav{ display:flex; }
.nav-list{ display:flex; gap:28px; }
.nav-list a{ font-size:0.92rem; font-weight:500; color: var(--text-dim); transition: color .15s; }
.nav-list a:hover{ color: var(--text); }
.header-cta{ display:flex; }
.nav-toggle{ display:none; background:none; border:0; width:32px; height:24px; flex-direction:column; justify-content:space-between; padding:0; }
.nav-toggle span{ height:2px; background: var(--text); border-radius:2px; }

/* =========================================================
   TERMINAL FRAME COMPONENT (signature device)
========================================================= */
.terminal-frame{
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
.frame-chrome{
	display:flex; align-items:center; gap:8px;
	padding: 12px 16px; background: var(--surface-2); border-bottom:1px solid var(--border);
	font-family: var(--font-mono); font-size:0.75rem; color: var(--text-faint);
}
.frame-chrome .dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot-red{ background:#ff5c5c; }
.dot-amber{ background:#f5a623; }
.dot-green{ background:#00c896; }
.frame-chrome em{ font-style:normal; margin-left:6px; }
.frame-body{ padding: 24px; }

/* =========================================================
   HERO
========================================================= */
.hero{ padding: 76px 0 40px; position:relative; z-index:1; }
.hero-inner{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:56px; align-items:center; }
.hero-sub{ font-size:1.08rem; max-width: 46ch; }
.hero-actions{ display:flex; gap:14px; margin: 28px 0 40px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:32px; flex-wrap:wrap; }
.hero-meta div{ display:flex; flex-direction:column; gap:2px; }
.hero-meta strong{ font-family: var(--font-mono); font-size:0.8rem; color: var(--accent-warm); text-transform:uppercase; letter-spacing:0.05em; }
.hero-meta span{ font-size:0.85rem; color: var(--text-dim); }

/* Full-bleed photo hero */
.hero-photo{
	padding:0; margin-top:-1px;
	min-height: 78vh;
	display:flex; align-items:center; justify-content:flex-start;
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
	position:relative;
	overflow:hidden;
}
.hero-photo-overlay{
	position:absolute; inset:0; z-index:1;
	background:
		linear-gradient(100deg, rgba(6,8,12,0.96) 0%, rgba(6,8,12,0.88) 32%, rgba(6,8,12,0.55) 58%, rgba(6,8,12,0.25) 100%),
		linear-gradient(0deg, rgba(6,8,12,0.55) 0%, rgba(6,8,12,0) 30%);
}
.hero-photo-inner{
	position:relative; z-index:2;
	max-width: 640px;
	width:100%;
	margin: 0;
	padding: 120px 24px 90px 48px;
	text-align:left;
}
.hero-photo-inner .hero-sub{ text-shadow: 0 2px 16px rgba(0,0,0,0.5); }

/* Large single landing image — desktop / web / mobile terminals combined */
.hero-image-frame{
	position:relative; border-radius: 18px; overflow:hidden;
	border:1px solid var(--border); background: var(--surface);
	box-shadow: 0 40px 90px -30px rgba(0,0,0,0.65);
}
.hero-image-frame::before{
	content:''; position:absolute; inset:-40%; z-index:0;
	background: radial-gradient(circle at 30% 20%, rgba(0,212,255,0.22), transparent 55%),
	            radial-gradient(circle at 80% 80%, rgba(124,92,255,0.20), transparent 55%);
	pointer-events:none;
}
.hero-image-frame .frame-chrome{ position:relative; z-index:1; }
.hero-image-frame .frame-body{
	position:relative; z-index:1;
	min-height: 420px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
	padding: 36px;
	background:
		repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 12px);
	text-align:center;
}
.hero-image-frame .frame-glyph-row{ display:flex; align-items:flex-end; gap:22px; color: var(--accent); opacity:0.85; }
.hero-image-frame .frame-caption{ font-family: var(--font-mono); font-size:0.9rem; color: var(--text-dim); }
.hero-image-frame .frame-caption small{ display:block; margin-top:8px; font-size:0.76rem; color: var(--text-faint); }

/* =========================================================
   TRUST STRIP
========================================================= */
.trust-strip{ border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); padding: 22px 0; margin-top: 40px; }
.trust-inner{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.trust-label{ font-family: var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--text-faint); }
.trust-list{ display:flex; gap:28px; flex-wrap:wrap; }
.trust-list li{ font-size:0.9rem; color: var(--text-dim); position:relative; padding-left:16px; }
.trust-list li::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background: var(--accent-dim); }

/* =========================================================
   SECTION HEAD
========================================================= */
.section-head{ max-width: 660px; margin-bottom: 52px; }
.section-head p{ font-size:1.02rem; }

/* =========================================================
   MODULES
========================================================= */
.module-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.module-card{
	background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
	padding: 30px 28px; transition: border-color .2s, transform .2s;
}
.module-card:hover{ border-color: var(--accent-dim); transform: translateY(-3px); }
.module-icon{
	width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
	background: linear-gradient(155deg, rgba(76,141,255,0.14), rgba(245,166,35,0.08));
	color: var(--accent); margin-bottom:18px;
}
.module-card p{ font-size:0.96rem; }
.module-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.module-tags li{
	font-family: var(--font-mono); font-size:0.72rem; color: var(--text-dim);
	border:1px solid var(--border); padding:5px 10px; border-radius:20px;
}

/* =========================================================
   SHOWCASE (platform imagery)
========================================================= */
.showcase-grid{ display:grid; grid-template-columns: 1.4fr 1.4fr 1fr; gap:24px; align-items:start; }
.showcase-item figcaption{ margin-top:16px; }
.showcase-item figcaption p{ font-size:0.92rem; }

/* Platform strip — replaces separate device images; the single hero image already shows all three */
.platform-strip{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.platform-strip-item{
	background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
	padding: 28px; transition: border-color .2s, transform .2s;
}
.platform-strip-item:hover{ border-color: var(--accent-dim); transform: translateY(-3px); }
.platform-strip-icon{
	width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
	background: linear-gradient(155deg, rgba(0,212,255,0.16), rgba(124,92,255,0.12));
	color: var(--accent); margin-bottom:16px;
}
.platform-strip-item p{ font-size:0.94rem; margin:0; }

.img-frame{
	border:1px solid var(--border); border-radius: var(--radius); overflow:hidden;
	background: var(--surface);
}
.img-frame .frame-chrome span{ width:8px; height:8px; border-radius:50%; background: var(--border); }
.img-frame .frame-body{
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
	min-height: 220px; padding: 28px;
	background:
		radial-gradient(circle at 30% 20%, rgba(76,141,255,0.10), transparent 55%),
		radial-gradient(circle at 80% 80%, rgba(245,166,35,0.08), transparent 55%),
		repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 10px);
	text-align:center;
}
.frame-glyph{ width:72px; height:auto; color: var(--accent-dim); }
.frame-caption{ font-family: var(--font-mono); font-size:0.82rem; color: var(--text-dim); }
.frame-caption small{ display:block; margin-top:6px; font-size:0.72rem; color: var(--text-faint); }
.img-frame-desktop .frame-body{ min-height: 320px; }
.img-frame-laptop .frame-body{ min-height: 280px; }
.img-frame-mobile .frame-body{ min-height: 420px; }
.img-frame-gallery .frame-body{ min-height: 180px; }
.frame-tag{
	position:absolute; top:14px; right:14px; font-family: var(--font-mono); font-size:0.65rem;
	background: var(--surface-2); border:1px solid var(--border); color: var(--accent-warm);
	padding:4px 9px; border-radius: 20px; text-transform:uppercase; letter-spacing:0.05em;
}
.img-frame-gallery{ position:relative; }
.img-frame-photo{ display:flex; flex-direction:column; }
.img-frame-photo img{ width:100%; height:220px; object-fit:cover; object-position: center 25%; display:block; }

/* =========================================================
   ARCHITECTURE DIAGRAM (SVG animation)
========================================================= */
.diagram-body{ overflow-x:auto; }
.arch-svg{ width:100%; height:auto; display:block; min-width: 420px; }
.arch-svg-full{ min-width: 760px; }

.flow-line{
	fill:none; stroke: var(--accent); stroke-width:1.5; stroke-linecap:round;
	stroke-dasharray: 6 8; opacity:0.55;
	animation: wts-flow 2.2s linear infinite;
}
.flow-line-agent{ stroke: var(--accent-2); opacity:0.45; }
.flow-line-delay-1{ animation-delay: -0.5s; }
.flow-line-delay-2{ animation-delay: -1.1s; }
.flow-line-delay-3{ animation-delay: -1.7s; }
@keyframes wts-flow{ to{ stroke-dashoffset: -140; } }

.node-pulse{ fill: var(--accent); opacity:0.16; animation: wts-pulse 2.6s ease-in-out infinite; transform-origin:center; }
.node-pulse-agent{ fill: var(--accent-2); }
@keyframes wts-pulse{
	0%,100%{ transform: scale(1); opacity:0.16; }
	50%{ transform: scale(1.18); opacity:0.32; }
}
.node-ring{ fill: var(--surface); stroke: var(--accent); stroke-width:1.6; }
.node-ring-accent{ stroke: var(--accent-2); }
.node-ring-agent{ stroke: var(--accent-2); stroke-dasharray: 3 4; }
.node-label{
	font-family: var(--font-mono); font-size:11px; fill: var(--text-dim);
	text-anchor:middle;
}
.agent-layer-label{ font-family: var(--font-mono); font-size:11px; fill: var(--text-faint); letter-spacing:0.08em; }

@media (prefers-reduced-motion: reduce){
	.flow-line, .node-pulse{ animation: none; }
}

/* =========================================================
   STATS BAND
========================================================= */
.stats-band{ padding: 60px 0; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.stats-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; }
.stat{
	display:flex; flex-direction:column;
	background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
	padding: 24px 22px;
}
.stat-number{ font-family: var(--font-display); font-size:2.6rem; font-weight:700; color: var(--text); line-height:1; }
.stat-suffix{ font-family: var(--font-mono); color: var(--accent-warm); font-size:0.9rem; margin-top:4px; }
.stat-label{ font-size:0.85rem; color: var(--text-dim); margin-top:8px; max-width:20ch; }

/* =========================================================
   CTA BANNER
========================================================= */
.cta-banner{ padding: 76px 0; }
.cta-banner-inner{
	background: linear-gradient(135deg, var(--surface), var(--surface-2));
	border:1px solid var(--border); border-radius: 16px;
	padding: 48px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
	position:relative; overflow:hidden;
}
.cta-banner-inner::before{
	content:''; position:absolute; inset:0;
	background: radial-gradient(circle at 85% 20%, rgba(76,141,255,0.16), transparent 55%);
	pointer-events:none;
}
.cta-banner-inner h2{ margin-bottom:8px; }
.cta-banner-inner p{ margin:0; max-width:50ch; }

/* =========================================================
   PAGE HERO (interior pages)
========================================================= */
.page-hero{ padding: 76px 0 56px; }
.page-hero .hero-sub{ max-width: 60ch; }

/* =========================================================
   TWO COLUMN / ABOUT
========================================================= */
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:start; }
.stat-frame .stat-list{ display:flex; flex-direction:column; gap:16px; }
.stat-row{ display:flex; flex-direction:column; gap:4px; border-bottom:1px solid var(--border-soft); padding-bottom:14px; }
.stat-row:last-child{ border-bottom:0; padding-bottom:0; }
.stat-row span{ font-family: var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color: var(--text-faint); }
.stat-row strong{ font-size:0.98rem; color: var(--text); }

.process-list{ display:flex; flex-direction:column; gap:0; counter-reset: none; }
.process-list li{
	display:grid; grid-template-columns: 70px 1fr; gap:24px;
	padding: 26px 0; border-bottom: 1px solid var(--border-soft);
}
.process-list li:first-child{ padding-top:0; }
.process-list li:last-child{ border-bottom:0; }
.process-index{ font-family: var(--font-mono); font-size:1.3rem; color: var(--accent-warm); }
.process-list h3{ margin-bottom:6px; }
.process-list p{ margin:0; font-size:0.96rem; max-width: 60ch; }

.check-list{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.check-list li{ position:relative; padding-left:28px; color: var(--text-dim); font-size:0.98rem; }
.check-list li::before{
	content:'✓'; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%;
	background: rgba(0,200,150,0.14); color: var(--positive); font-size:0.7rem; display:flex; align-items:center; justify-content:center;
}

/* =========================================================
   CONTACT PAGE
========================================================= */
.contact-grid{ grid-template-columns: 1.5fr 1fr; }
.contact-primary{ display:flex; flex-direction:column; gap:24px; }
.booking-body h3, .form-frame h3, .newsletter-body h3{ margin-bottom:6px; }
.booking-note{ display:block; margin-top:14px; font-family: var(--font-mono); font-size:0.78rem; color: var(--text-faint); }

.wts-form{ display:flex; flex-direction:column; gap:18px; margin-top:8px; }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row-group{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.wts-form label{ font-family: var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; color: var(--text-dim); }
.wts-form input, .wts-form select, .wts-form textarea{
	background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius-sm);
	padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size:0.95rem;
	width:100%;
}
.wts-form input:focus, .wts-form select:focus, .wts-form textarea:focus{ border-color: var(--accent); outline:none; }
.wts-form textarea{ resize: vertical; }
.form-status{ font-size:0.88rem; margin:0; min-height:1.2em; }
.form-status.is-success{ color: var(--positive); }
.form-status.is-error{ color: var(--negative); }

.sidebar-list{ display:flex; flex-direction:column; gap:8px; margin: 8px 0 20px; }
.sidebar-list li{ font-size:0.92rem; color: var(--text-dim); }
.contact-sidebar h4{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; color: var(--accent-warm); margin: 18px 0 8px; font-family: var(--font-mono); }
.contact-sidebar h4:first-child{ margin-top:0; }

/* =========================================================
   NEWSLETTER PAGE
========================================================= */
.newsletter-inline{ flex-direction:row; gap:10px; }
.newsletter-inline input{ flex:1; }
.form-fineprint{ display:block; margin-top:10px; font-family: var(--font-mono); font-size:0.75rem; color: var(--text-faint); }

/* =========================================================
   GALLERY PAGE
========================================================= */
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
.gallery-item{ margin:0; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ border-top:1px solid var(--border-soft); background: var(--bg-alt); margin-top: 40px; position:relative; z-index:1; }
.footer-top{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap:40px; padding: 64px 24px 48px; }
.footer-brand p{ font-size:0.9rem; margin-top:12px; }
.footer-status{ display:flex; align-items:center; gap:8px; margin-top:18px; font-family: var(--font-mono); font-size:0.78rem; color: var(--text-dim); }
.status-dot{ width:7px; height:7px; border-radius:50%; background: var(--positive); box-shadow: 0 0 8px var(--positive); }
.widget-title{ font-family: var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-faint); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col ul li, .footer-col ul a{ font-size:0.9rem; color: var(--text-dim); }
.footer-col ul a:hover{ color: var(--accent); }
.footer-bottom{
	display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
	padding: 22px 24px; border-top:1px solid var(--border-soft);
}
.footer-bottom p{ margin:0; font-size:0.82rem; color: var(--text-faint); }

/* =========================================================
   FALLBACK / BASIC CONTENT
========================================================= */
.basic-article{ padding: 40px 0; }
.basic-content p{ color: var(--text-dim); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px){
	.hero-inner, .two-col, .contact-grid{ grid-template-columns: 1fr; }
	.showcase-grid{ grid-template-columns: 1fr 1fr; }
	.platform-strip{ grid-template-columns: 1fr 1fr; }
	.module-grid{ grid-template-columns: 1fr 1fr; }
	.stats-grid{ grid-template-columns: 1fr 1fr; }
	.footer-top{ grid-template-columns: 1fr 1fr; }
	.gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
	.primary-nav, .header-cta{ display:none; }
	.nav-toggle{ display:flex; }
	.showcase-grid{ grid-template-columns: 1fr; }
	.platform-strip{ grid-template-columns: 1fr; }
	.module-grid{ grid-template-columns: 1fr; }
	.form-row-group{ grid-template-columns: 1fr; }
	.stats-grid{ grid-template-columns: 1fr 1fr; }
	.footer-top{ grid-template-columns: 1fr; }
	.gallery-grid{ grid-template-columns: 1fr; }
	.cta-banner-inner{ flex-direction:column; align-items:flex-start; }
	.newsletter-inline{ flex-direction:column; }
	.section{ padding: 64px 0; }
	.hero-photo{ min-height: 62vh; background-position: center 20%; }
	.hero-photo-inner{ padding: 90px 20px 60px; max-width: 100%; }
}

/* Mobile nav drawer */
.site-header.nav-open .primary-nav{
	display:block; position:absolute; top:76px; left:0; right:0;
	background: var(--bg); border-bottom:1px solid var(--border); padding: 20px 24px;
}
.site-header.nav-open .nav-list{ flex-direction:column; gap:18px; }
.site-header.nav-open .header-cta{ display:flex; position:absolute; top:20px; right:64px; }