/* ============================================================
EVENLY LAB · 均研科技 — Site stylesheet (AUTHORITATIVE)
Editorial / Swiss-brutalist: warm paper ground, hairline grid
rules, oversized left-aligned type, mono index numbers, flat
solid colour blocks (no gradients), square corners.
Fonts/icons from CDN, degrade to system fonts offline.
----------------------------------------------------------------
⚠️ MODULARISATION NOTE ⚠️
----------------------------------------------------------------
This file (styles-main.css) is loaded LAST in order, so it
overrides duplicate rules from evenly.css. When both files define
the same selector, THIS file is the canonical version.
evenluy.css currently contains ~298 duplicate rules (~986 lines)
that are dead code. Migrate unique rules here and eventually
retire evenly.css.
Cascading order in index.html:
1. evenly.css
2. experience-mobile.css
3. hero-cinematic.css
4. globals.css (just @imports the first three)
5. styles-main.css ← loaded last, wins
----------------------------------------------------------------
============================================================ */
:root{
/* Base — Evenly Blue */
--el-blue-50:#EEF4FF;--el-blue-100:#DBE8FE;--el-blue-200:#B6CFFC;--el-blue-300:#8AB1F8;--el-blue-400:#5E8FFA;--el-blue-500:#2B6CF6;--el-blue-600:#1C55DB;--el-blue-700:#173FA0;--el-blue-800:#122E75;--el-blue-900:#0C1F4E;
/* Accents */
--el-yellow-100:#FFF1C2;--el-yellow-400:#FFC72E;--el-yellow-500:#F5B301;
--el-green-100:#DCF5E3;--el-green-500:#23B14D;--el-green-600:#1B8F3D;
--el-coral-100:#FFE1DA;--el-coral-500:#FF5A3F;--el-coral-600:#E23D24;
--el-aqua-100:#D5F7F5;--el-aqua-500:#0FC1BC;--el-aqua-aaa:#0A5250;
/* AAA text colors */
--el-blue-aaa:#1B4AB5;--el-green-aaa:#0F5A28;--el-amber-aaa:#7A4E00;--el-coral-aaa:#8F1F0D;
/* ---- Editorial palette ---- */
--paper:#F4F1E8; /* warm off-white ground */
--paper-2:#EAE6D8; /* slightly deeper panel */
--ink:#12162A; /* near-black text / rules */
--ink-soft:#3A4058; /* muted body text */
--navy:#0C1F4E; /* solid dark blocks */
--navy-2:#122E75; /* labels, numbers, accents on paper */
--accent:#FFC72E; /* yellow */
--accent-ink:#4A3600; /* text on yellow */
--rule:#12162A; /* hairline colour */
--rule-w:1.5px;
--link:#173FA0;
/* Type */
--font-display:'Space Grotesk','Noto Sans TC',sans-serif;
--font-body:'Atkinson Hyperlegible','Instrument Sans','Noto Sans TC',sans-serif;
--font-mono:'Space Mono','Noto Sans TC',monospace;
--text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:18px;--text-xl:22px;--text-2xl:28px;--text-3xl:36px;--text-4xl:48px;
/* Layout */
--container-max:1180px;--gutter:26px;
--ease-out:cubic-bezier(.16,1,.3,1);
--dur-fast:120ms;--dur-med:240ms;
}
/* ---------------- Base ---------------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip (not :hidden) so / don't become a scrolling
container — that would break position:sticky on .nav. clip keeps the
visual clipping (no horizontal scrollbar if content overflows the viewport)
without establishing a scroll port. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--font-body);font-size:var(--text-md);line-height:1.6;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:clip;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.08;margin:0}
p{margin:0}
img,svg{max-width:100%}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:.08em}
a:hover{color:var(--navy);text-decoration-thickness:.14em}
*:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
::selection{background:var(--accent);color:var(--ink)}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100;font-family:var(--font-body);font-weight:700;text-decoration:none}
.skip-link:focus{left:0}
/* --- Shared helpers --- */
.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}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-2);display:inline-flex;align-items:center;gap:8px;margin:0}
.mono{font-family:var(--font-mono)}
.idx{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--navy-2);letter-spacing:.02em}
.hl{background:linear-gradient(transparent 60%,var(--accent) 60%);padding:0 .02em}
.rule{height:var(--rule-w);background:var(--rule);border:0;margin:0}
.em{font-style:italic}
/* Logo lockup (verbatim colourful mark, never recoloured).
The SVG is self-contained (icon + "EVENLY LAB" text embedded),
so this is now a single per side of the nav.
• `flex-shrink:0` stops the logo from being crushed to zero width
when the surrounding .row / .nav-cta flex container overflows.
• `min-width` reserves a floor so the mark can never collapse below
a legible width, even under aggressive flex-shrink or in nested
flex parents. */
.lockup{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}
.lockup .logo-lockup{height:36px;width:auto;min-width:140px;max-width:none;display:block;flex-shrink:0}
.lockup:hover{text-decoration:none}
/* Defence-in-depth: even if a downstream rule somehow nukes height
or sets display:none on the .logo-lockup itself (third-party
extensions, browser quirks), make sure the integrated SVG renders.
The colourful mark is intentionally NOT recoloured, and its embedded
text (#000 / #fff) keeps the right contrast against either background. */
/* ---------------- Buttons (square, hard-shadow) ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1;border:var(--rule-w) solid var(--ink);border-radius:0;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn i{font-size:18px;line-height:1}
.btn:hover{text-decoration:none;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--navy);color:#fff}
.btn-secondary{background:transparent;color:var(--ink)}
.btn-secondary:hover{background:var(--paper-2);color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink);border:var(--rule-w) solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.btn-yellow{background:var(--accent);color:var(--accent-ink);border-color:var(--ink)}
.btn-yellow:hover{background:#FFD65C;color:var(--accent-ink)}
.btn-on-dark{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-on-dark:hover{background:#fff;color:var(--ink);box-shadow:4px 4px 0 rgba(255,255,255,.45)}
.btn-lg{min-height:60px;padding:0 30px;font-size:18px}
/* ---------------- Chips / tags ---------------- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:0;border:1.5px solid var(--ink);font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:transparent;color:var(--ink)}
.chip.green{border-color:var(--el-green-aaa);color:var(--el-green-aaa)}
.chip.yellow{background:var(--accent);border-color:var(--ink);color:var(--accent-ink)}
.chip.aqua{border-color:var(--el-aqua-aaa);color:var(--el-aqua-aaa)}
.chip.blue{border-color:var(--el-blue-aaa);color:var(--el-blue-aaa)}
/* ---------------- Reveal-on-scroll (default VISIBLE) ---------------- */
.reveal{opacity:1;transform:none}
html.js-anim .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
html.js-anim .reveal.in{opacity:1;transform:none}
/* ---------------- Section scaffolding ---------------- */
/* ============ SECTION RHYTHM ============
Uniform vertical padding across all .sec blocks so Market Gap,
Value Proposition, Deployment Timeline, and FAQ share the same
vertical cadence. The clamp() scales with viewport but caps the
upper bound at 96px to keep things from stretching on ultra-wide
displays. The companion .sec.tight variant below trims only the
top padding for sections that visually attach to a preceding group. */
.sec{padding:clamp(80px,10vw,120px) 0}
.sec.tight{padding-top:0}
.sec-head{display:grid;gap:16px;margin-bottom:44px;max-width:66ch}
.sec-head.wide{max-width:none}
.sec-head h2{font-size:clamp(30px,5vw,56px)}
.sec-head p{font-size:var(--text-lg);color:var(--ink-soft)}
/* Vertical air between the lede
and the hairline rule that follows
it. 24px (up from 8px) so the rule reads as a section divider rather
than an underline stuck to the paragraph above it. */
.sec-head .rule{margin-top:24px}
/* Utility: hide an element below the tablet/mobile breakpoint
(~720px). Use sparingly — pair with a desktop equivalent so the
content is still readable on larger screens. */
@media (max-width:720px){
.hide-on-mobile{display:none}
}
/* ============ FAQ (contact) ============ */
.faq-list{border-top:var(--rule-w) solid var(--rule);max-width:820px}
.faq-item{border-bottom:var(--rule-w) solid var(--rule)}
.faq-item summary{
cursor:pointer;list-style:none;padding:22px 0;font-family:var(--font-display);
font-weight:700;font-size:var(--text-lg);display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-mono);font-size:20px;color:var(--navy-2);flex-shrink:0}
.faq-item[open] summary::after{content:"−"}
.faq-item p{padding:0 0 22px;color:var(--ink-soft);max-width:62ch}
/* ============ FOUNDER MESSAGE (team) ============ */
.founder-msg{border-top:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule);background:var(--paper-2);padding:clamp(40px,6vw,72px) 0}
.founder-msg .inner{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start;max-width:1040px}
.founder-msg .mk{font-family:var(--font-display);font-weight:700;font-size:72px;line-height:.5;color:var(--navy-2)}
.founder-msg blockquote{margin:0;font-size:var(--text-xl);color:var(--ink)}
.founder-msg .who{margin-top:24px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--navy-2)}
.founder-msg .who b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px;font-family:var(--font-body);text-transform:none;letter-spacing:0}
/* ============ LINKEDIN (team) ============ */
.member-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.linkedin-link{
display:inline-grid;place-items:center;width:32px;height:32px;border:1.5px solid var(--ink);
color:var(--ink);text-decoration:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.linkedin-link:hover{background:var(--navy);color:#fff;text-decoration:none;transform:none;box-shadow:none}
.linkedin-link .bi{font-size:16px;line-height:1}
.member.lead .linkedin-link{align-self:start;margin-top:6px}
/* "More Detail" button in each team card. Lives near .linkedin-link so
member-card chrome stays grouped. flex-start keeps the button pinned
to the left edge in both card layouts (flex column inside .member and
grid column inside .member.lead).
margin-top:auto anchors the button to the bottom of each equal-height
card (grid stretch on .team-grid keeps the row aligned). The minimum
gap between the bio
and the button is enforced by padding-bottom
on .member p, so this stays a single auto margin. */
.member .profile-link,
.member.lead .profile-link{margin-top:auto;align-self:flex-start}
/* Extra-large avatar variant for individual profile pages.
Matches the navy-on-paper treatment of .member.lead .av so the
hero portrait reads as part of the same family. */
.av-xl{
width:140px;height:140px;
border:1.5px solid var(--ink);border-radius:0;
background:var(--navy);color:#fff;
display:block;flex-shrink:0;object-fit:cover;
}
@media (max-width:480px){
.av-xl{width:96px;height:96px}
}
/* ============ MEMBER PROFILE PAGE — three-section body ============
Each member detail page groups the bio into three titled sections
(Education / About / Why Evenly Lab). The section heading pairs an
English label and a Chinese one inside .zh-b so the bilingual
toggle reveals both, while the body paragraphs follow the same
+ rhythm as the rest of the
site. The section number uses the same mono kicker style as the
page-head .kicker, so the page reads as one consistent system.
The wrap is intentionally full-width (no max-width cap) so the
three-section bio uses the full 1180px container on desktop
instead of leaving a wide right-side gutter. Reading measure
stays comfortable because 1180px ≈ 65ch at the 18px body size,
which is inside the 60-75ch target band for long-form prose.
On mobile, .container's own gutter + padding keeps text off
the screen edge. */
.profile-bio{margin-top:36px;width:100%}
/* 48px (up from 32px) gives each titled section enough air above the
hairline rule so the heading + copy never feel pinned to the
divider. The margin-bottom pulls the next section's hairline
down so the gap between section body and the next rule stays
roughly equal to the gap above the heading. */
.profile-bio .pb-section{margin-top:0;margin-bottom:24px;padding-top:48px;border-top:var(--rule-w) solid var(--rule)}
.profile-bio .pb-section:last-child{margin-bottom:0}
.profile-bio .pb-section:first-of-type{padding-top:0;border-top:0}
.profile-bio .pb-section h2{
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
font-family:var(--font-mono);font-size:12px;font-weight:700;
text-transform:uppercase;letter-spacing:.12em;color:var(--navy-2);
margin:0 0 16px 0;
}
.profile-bio .pb-section h2 .pb-num{
font-family:var(--font-display);font-size:18px;color:var(--ink-soft);
letter-spacing:0;font-weight:700;line-height:1;
}
.profile-bio .pb-section h2 .pb-en,
.profile-bio .pb-section h2 .pb-zh{color:var(--navy-2)}
.profile-bio .pb-section h2 .pb-sep{
display:inline-block;width:24px;height:1.5px;background:var(--rule);
transform:translateY(-4px);
}
.profile-bio .pb-section p{margin:0 0 14px 0;color:var(--ink);font-size:var(--text-lg);line-height:1.65}
.profile-bio .pb-section p:last-child{margin-bottom:0}
/* Inside the "Why Evenly Lab" section, the final paragraph can carry
a pull-quote treatment if the page marks it with .pb-lead. */
.profile-bio .pb-lead{font-size:var(--text-xl);line-height:1.45;color:var(--navy-2);font-weight:500}
/* The tags row + Back-to-Team button live below the three sections.
We give the link a generous top margin so it clearly belongs to the
page chrome rather than the bio body, and centre the row on wider
viewports. The .tags rules above already cap the row at its
intrinsic width. */
.profile-bio + .profile-actions{
display:flex;flex-wrap:wrap;gap:20px;align-items:center;
margin-top:48px;padding-top:28px;border-top:var(--rule-w) solid var(--rule);
}
/* Force the .tags row to occupy its own line so the Back-to-Team
button can never wrap onto the same line or float up beside the
tags on wide viewports. Without this, on screens where the 5
tags + the button would both fit, the button sat to the right
of the tags — visually it read as "next to" instead of "below".
flex-basis:100% + max-width:100% gives the row its own line;
align-self:flex-start keeps tags left-aligned at the natural
flex line start. */
.profile-actions .tags{
margin-top:0;flex:0 0 100%;max-width:100%;
align-self:flex-start;
}
.profile-actions .profile-link{
margin:0;align-self:flex-start; /* override .member .profile-link auto margin */
/* Sit directly below the tags row with a comfortable 12px gap so
the two elements read as one "tags · back-link" group rather
than a disconnected pair. */
}
@media (max-width:560px){
.profile-bio .pb-section{padding-top:24px}
.profile-bio .pb-section h2{gap:10px}
.profile-bio .pb-section p{font-size:17px;line-height:1.6}
.profile-bio + .profile-actions{margin-top:36px;padding-top:20px}
}
/* ============ AWARD SLIDER — text badges ============
Dark text on the warm paper-2 ground: borders, bg and color all neutral
so the badge reads as a contrast chip rather than a glass tile. */
.award-item.award-text{
display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
min-width:220px;height:56px;padding:0 24px;border:1.5px solid var(--ink);background:var(--paper);
font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink);white-space:nowrap;line-height:1.2;
align-self:center; /* Ensure text badges are vertically centered in 80px container */
}
.trust .award-item{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:80px;border-right:0;border-bottom:0;box-shadow:none}
.trust .award-item img{max-width:none;width:auto;height:64px;max-height:64px;object-fit:contain;flex-shrink:0;display:block}
.trust .award-item img.logo-hkust-ec{height:48px;width:auto;object-fit:contain}
.trust .award-item img.logo-award-highlight{height:78px;max-height:80px;border-radius:8px;object-fit:contain;width:auto;filter:grayscale(.15) contrast(1.05);transition:filter .25s ease}
.trust .award-item:hover img.logo-award-highlight{filter:none}
/* ============ PRODUCT VISUALS (A-EYE) ============ */
.visual-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule-w) solid var(--rule)}
.visual-card{padding:28px;border-left:var(--rule-w) solid var(--rule)}
.visual-card:first-child{border-left:0}
.visual-card .screen-mini{background:var(--navy);color:#fff;border:var(--rule-w) solid var(--ink);padding:18px;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.visual-card .screen-mini .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.visual-card .screen-mini .line{height:8px;background:rgba(255,255,255,.25);width:72%}
.visual-card .screen-mini .line.short{width:48%}
.visual-card h3{font-size:var(--text-lg);margin-top:18px}
.visual-card p{margin-top:8px;color:var(--ink-soft);font-size:15px}
/* ============ MEDIA EMBED (video) ============
Centre + enlarge so the demos feel like the focal point of each
section. .large pushes the cap to 1080px (used on demo/validation/
retail-demo) while the default 820px still works for narrower
sections elsewhere. The media-embed-block wrapper centres any
following .media-caption with the same width. */
.media-embed{position:relative;aspect-ratio:16/9;border:var(--rule-w) solid var(--ink);background:var(--ink);max-width:820px;margin:0 auto}
.media-embed.large{max-width:1080px}
.media-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.media-caption{margin-top:14px;font-size:15px;color:var(--ink-soft);max-width:820px}
.media-caption a{margin-left:8px;font-weight:700}
/* ============ MEDIA BLOCK (video placeholder) ============ */
.media-block{position:relative;aspect-ratio:16/9;background:var(--navy);border:var(--rule-w) solid var(--ink);display:grid;place-items:center;color:#fff;text-align:center;padding:24px}
.media-block .play{width:64px;height:64px;border:2px solid #fff;display:grid;place-items:center;font-size:28px;margin-bottom:16px}
.media-block p{color:#C9D6FF;font-size:var(--text-md);max-width:36ch;margin:0 auto}
/* ============ RETAIL STORY ============ */
.retail-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule-w) solid var(--rule)}
.retail-card{padding:34px 28px;border-left:var(--rule-w) solid var(--rule)}
.retail-card:first-child{border-left:0}
.retail-card .idx{font-family:var(--font-mono);font-weight:700;font-size:clamp(24px,3vw,36px);color:var(--navy-2);display:block;margin-bottom:14px}
.retail-card h3{font-size:var(--text-xl)}
.retail-card p{margin-top:10px;color:var(--ink-soft)}
/* ============ A-EYE PAGE — scroll sidebar (user journey nav) ============ */
.journey-nav{
position:fixed;left:max(18px,calc((100vw - var(--container-max))/2 - 168px));
top:50%;transform:translateY(-50%);z-index:45;
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--dur-med) var(--ease-out),visibility var(--dur-med) var(--ease-out);
}
.journey-nav.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.journey-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.journey-nav a{
display:block;font-family:var(--font-mono);font-size:11px;font-weight:500;
letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
color:var(--ink-soft);padding:7px 0 7px 14px;border-left:2px solid transparent;
transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.journey-nav a:hover{color:var(--ink);text-decoration:none}
.journey-nav a.is-active{color:var(--ink);border-left-color:var(--accent);font-weight:700}
/* ============ NAV ============ */
/* Sticky nav — must stay pinned on scroll, both desktop & mobile.
Important: any ancestor with `overflow: hidden | auto | scroll` will
establish a scrolling container and break `position: sticky`. The
fix is to use `overflow-x: clip` (not `hidden`) on /,
which clips visually without creating a scroll port. See lines 48/53. */
.nav{
position:sticky;top:0;z-index:50;
width:100%;
background:var(--paper);
border-bottom:var(--rule-w) solid var(--ink);
/* Subtle shadow only appears once the nav is pinned (i.e. user has
scrolled past the page top). Most browsers don't have CSS scroll
drivers widely, so we keep it static and rely on the border-bottom. */
/* Ensure transform/filter/will-change on descendants can't promote a
containing block that breaks sticky. None are set today, but this
is a defensive note for future contributors. */
}
.nav .row{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:16px}
.nav .lockup{flex-shrink:0}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin-left:auto;margin-right:8px;border:var(--rule-w) solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}
.nav-toggle .bi{font-size:24px;line-height:1}
.nav-links{display:flex;align-items:center;gap:26px;margin:0;padding:0;list-style:none}
.nav-links a{color:var(--ink);text-decoration:none;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.nav-links a:hover{color:var(--navy-2);text-decoration:underline;text-underline-offset:4px}
.nav-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:12px}
/* Contrast toggle */
.ct-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:0;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:12px;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.ct-toggle:hover{background:var(--paper-2)}
.ct-toggle .bi{font-size:17px;line-height:1}
/* Language toggle — shares .ct-toggle; fills solid navy when Chinese is active */
.lang-toggle .ct-label{font-family:var(--font-mono),"Noto Sans TC";letter-spacing:.1em}
.lang-toggle[aria-pressed="true"]{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.lang-toggle[aria-pressed="true"]:hover{background:var(--navy-2);color:var(--paper);border-color:var(--navy-2)}
/* ============ MASTHEAD (universal top info bar) ============
共用基底，所有頁面的頂部資訊條都套用這套樣式。
.hero .masthead / .page-head .masthead 的祖先限定規則
保留為向後相容的細部覆寫（差異屬性）。
屬性順序：先定義 font 等字型屬性，再 flex 佈局。
============================================================ */
.masthead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
font-family:var(--font-mono);font-size:12px;font-weight:400;font-style:normal;
text-transform:uppercase;letter-spacing:.12em;color:var(--navy-2);
padding:20px 0;border-bottom:var(--rule-w) solid var(--rule)}
.masthead .r{color:var(--ink-soft)}
/* ============ HERO (home) ============ */
.hero .masthead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--navy-2);padding:20px 0;border-bottom:var(--rule-w) solid var(--rule)}
.hero .masthead .r{color:var(--ink-soft)}
.hero-main{padding:clamp(40px,7vw,80px) 0 0}
.hero h1{font-size:clamp(46px,10.5vw,128px);line-height:.96;letter-spacing:-.035em;max-width:15ch}
.hero .zh{display:block;font-weight:500;font-size:clamp(26px,4.4vw,54px);letter-spacing:0;margin-top:.14em;color:var(--navy-2)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:end;margin-top:clamp(34px,6vw,60px);padding-bottom:clamp(44px,7vw,72px)}
.hero .lede{font-size:var(--text-xl);color:var(--ink);max-width:42ch}
.hero-side{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap}
/* ============ PAGE HEADER (sub-pages) ============ */
.page-head{border-bottom:var(--rule-w) solid var(--rule)}
.page-head .masthead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--navy-2);padding:20px 0;border-bottom:var(--rule-w) solid var(--rule)}
.page-head .masthead .r{color:var(--ink-soft)}
.page-head .inner{padding:clamp(40px,7vw,84px) 0 clamp(34px,5vw,60px);display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:end}
.page-head h1{font-size:clamp(42px,8.5vw,104px);line-height:.98;letter-spacing:-.03em;max-width:14ch}
/* Loose line-height variant — used by about.html's "Technology should aid
everyone" h1 so the long bilingual phrase reads with breathing room.
Tuned to 1.15 (slightly looser than the default 0.98 for page-head h1
but tighter than the previous 1.45, per the user feedback that the
gap between lines was too wide). */
.page-head h1.loose{line-height:1.15;max-width:22ch;letter-spacing:-.045em;font-size:clamp(38px,7.5vw,88px)}
.page-head .zh{display:block;font-weight:500;font-size:clamp(22px,3.6vw,42px);letter-spacing:0;margin-top:.16em;color:var(--navy-2)}
.page-head .lede{font-size:var(--text-xl);color:var(--ink);max-width:40ch}
.page-head .kicker{margin-bottom:18px}
/* ============ TRUST BAR (mid-tone band — neutral paper-2 ground) ============
Sits between --paper (cream) and --ink (near-black) so both light/white
logos and dark text/logos render legibly without washing either out.
AA-compliant (>=4.5:1) against both white and navy text. */
.trust{background:var(--paper-2);color:var(--ink);border-top:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule)}
.trust .row{display:flex;flex-wrap:wrap;gap:36px 30px;align-items:center;padding:18px 0;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
/* "Proudly Funded By" caption that sits above the .award-slider on pages
that show awards/funding logos. Reuses the .kicker base style for the
mono caps look, plus a tighter size + lighter weight so it reads as a
secondary caption rather than a top-level section header.
`flex-basis:100%` forces the
to wrap to its own line inside the
.container.row flex container (otherwise it would sit side-by-side
with the .award-slider instead of above it). */
.trust .funded-by{margin:18px 0 14px;font-size:16px;font-weight:700;letter-spacing:.14em;color:var(--navy);gap:6px;flex:0 0 100%;order:0;width:100%;text-align:center;justify-content:center;text-transform:uppercase}
.trust .funded-by .bi{font-size:18px}
.trust b{color:var(--navy);font-weight:700}
.trust .sep{opacity:.45}
.trust .tall{display:flex;align-items:center;justify-content:center;min-height:140px;height:auto}
/* Award marquee: fixed 80px tall track, overflow hidden, relative
positioning so the left/right gradient fade overlays anchor to the
slider rect. Flex centering on the slider puts the track vertically
and horizontally centered inside the strip. height:80px matches the
tallest item (.trust .award-item has height:80px below) so items
never overflow above/below the clip region. */
.trust .award-slider{overflow:hidden;padding:0;white-space:nowrap;position:relative;width:100%;height:80px;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box}
.trust .award-slider::before,
.trust .award-slider::after{content:"";position:absolute;top:0;width:150px;height:100%;z-index:2;pointer-events:none}
.trust .award-slider::before{left:0;background:linear-gradient(to right,var(--paper-2),rgba(247,245,240,0))}
.trust .award-slider::after{right:0;background:linear-gradient(to left,var(--paper-2),rgba(247,245,240,0))}
/* Track is a horizontal flex container that holds two identical .award-set
copies for seamless looping. width:max-content keeps both copies on one
row at their natural width. flex-shrink:0 on every level guarantees the
two copies stay exactly the same width — required for translateX(-50%)
to land back on the visual seam. */
.trust .award-slider .award-track{display:flex;gap:0;width:max-content;align-items:center;flex-shrink:0;height:80px;margin:0;padding:0;will-change:transform;animation:marquee-scroll 25s linear infinite;box-sizing:border-box}
.trust .award-set{display:flex;align-items:center;gap:60px;flex:0 0 auto;flex-shrink:0;margin-left:0;margin-top:0;margin-bottom:0;padding:0;height:80px}
.trust .award-set .award-item:last-child{margin-right:60px}
.trust .award-slider:hover .award-track{animation-play-state:paused}
/* Seamless scroll: the track contains two identical .award-set copies so
translateX(-50%) lands back at the visual start of the original set,
producing a gap-free loop. The 50% assumes both copies share the track
width equally — must keep .award-set at flex:0 0 auto (no grow/shrink)
or the two copies can drift apart and break the loop. */
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Reverse marquee: .award-slider.reverse flips animation-direction so the
track scrolls the opposite way. The edge fade masks are also swapped so
they always "appear to come from" the leading edge. */
.trust .award-slider.reverse .award-track{animation-direction:reverse}
.trust .award-slider.reverse::before{left:auto;right:0;background:linear-gradient(to left,var(--paper-2),rgba(247,245,240,0))}
.trust .award-slider.reverse::after{right:auto;left:0;background:linear-gradient(to right,var(--paper-2),rgba(247,245,240,0))}
/* Award-text placeholder logos: bilingual span renders in mono caps so
they visually match the existing logo strip but with no image asset. */
.trust .award-item.award-text{
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:0 24px;height:60px;line-height:1.1;text-align:center;
font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--navy-2);
}
.trust .award-item.award-text .zh-b{font-size:11px;font-weight:500;color:var(--ink-soft);margin-top:2px;font-family:var(--font-body)}
/* Award-logo items: real SVG logos (HK01, Sing Tao, SCMP, Ming Pao, HKET,
Wen Wei Po). Transparent container so the logo sits cleanly on the
paper background; .trust .award-item img above already constrains the
image to height:56px so the marquee rhythm matches. */
.trust .award-item.award-logo{
display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
height:80px;padding:0;border:0;background:transparent;min-width:0;
filter:grayscale(.15) contrast(1.05);
transition:filter .25s ease,opacity .25s ease;
}
.trust .award-item.award-logo:hover{filter:none}
/* Smaller-than-default media logos so they read as supportive coverage
rather than competing with the headline awards. The .trust .award-item
img rule above sets 64px, so this img selector wins on specificity
(.trust .award-item.award-logo img = 0,3,1 > 0,2,1) and shrinks the
image to 44px while keeping the 80px container. */
.trust .award-item.award-logo img{height:44px;width:auto;object-fit:contain;flex-shrink:0;display:block}
/* ============ STATS (data table) ============ */
.stats-wrap{border-top:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:34px 26px;border-left:var(--rule-w) solid var(--rule)}
.stat:first-child{border-left:0}
.stat .num{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.6vw,54px);letter-spacing:-.03em;line-height:1;color:var(--navy-2)}
.stat .lbl{margin-top:14px;font-size:15px;color:var(--ink-soft)}
.stat cite{display:block;margin-top:12px;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);font-style:normal;opacity:.85}
/* ============ VALUES (numbered grid) ============ */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule-w) solid var(--rule)}
.value{padding:34px 30px 40px;border-left:var(--rule-w) solid var(--rule)}
.value:first-child{border-left:0}
.value .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.value .sw{width:16px;height:16px;display:inline-block;border:1.5px solid var(--ink)}
.value .sw.blue{background:var(--el-blue-500)}
.value .sw.green{background:var(--el-green-500)}
.value .sw.yellow{background:var(--accent)}
.value h3{font-size:var(--text-2xl)}
.value p{margin-top:12px;color:var(--ink-soft)}
/* ============ FEATURE LIST (two-column detail rows) ============ */
.features{border-top:var(--rule-w) solid var(--rule)}
/* Each .feature row sits between two hairline rules. The 44px top/bottom
padding (up from 30px) gives the text enough breathing room so the
heading and copy never feel pinned to the rules above and below. */
.feature{display:grid;grid-template-columns:220px 1fr;gap:30px;padding:44px 0;border-bottom:var(--rule-w) solid var(--rule)}
.feature .f-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--navy-2);display:flex;gap:10px;align-items:baseline}
.feature .f-label i{font-size:16px;color:var(--ink)}
.feature h3{font-size:var(--text-xl);margin-bottom:8px}
.feature p{color:var(--ink-soft);max-width:60ch}
/* ============ A-EYE SPOTLIGHT (solid navy block) ============ */
.spotlight{background:var(--navy);color:#fff;padding:clamp(34px,5vw,64px);display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.spotlight .kicker{color:var(--accent)}
.spotlight h2{color:#fff;font-size:clamp(30px,4.6vw,54px)}
.spotlight .zh{display:block;font-weight:500;font-size:var(--text-xl);color:#C9D6FF;margin-top:8px;letter-spacing:0}
.spotlight p{color:#DCE7FF;font-size:var(--text-lg);margin-top:20px;max-width:46ch}
.spotlight ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.spotlight li{display:flex;gap:12px;align-items:flex-start;color:#EAF1FF}
.spotlight li i{color:var(--accent);font-size:18px;margin-top:2px}
/* Phone / receipt card */
.phone{background:#fff;color:var(--ink);border:var(--rule-w) solid var(--ink);padding:24px}
.phone .tag{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--navy-2);border-bottom:1.5px solid var(--ink);padding-bottom:12px}
.phone .wave{display:flex;align-items:flex-end;gap:5px;height:56px;margin:20px 0}
.phone .wave span{flex:1;background:var(--navy-2);animation:eq 1.1s var(--ease-out) infinite alternate}
@keyframes eq{from{height:16%}to{height:100%}}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.phone .said{background:var(--paper);border:1.5px solid var(--ink);padding:16px;font-size:14px;line-height:1.5}
.phone .said b{color:var(--ink)}
.phone .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
/* ============ TIMELINE (about) ============ */
.timeline{border-top:var(--rule-w) solid var(--rule)}
/* 40px top/bottom (up from 28px) so the when-label and the headline
+ body paragraphs sit comfortably between the hairline rules. */
.tl-row{display:grid;grid-template-columns:170px 1fr;gap:30px;padding:40px 0;border-bottom:var(--rule-w) solid var(--rule);align-items:baseline}
.tl-row .when{font-family:var(--font-mono);font-weight:700;font-size:var(--text-lg);color:var(--navy-2);letter-spacing:.02em}
.tl-row h3{font-size:var(--text-xl);margin-bottom:6px}
.tl-row p{color:var(--ink-soft);max-width:62ch}
/* ============ TEAM (members grid) ============ */
/* One connected hairline grid: the founder spans the full top row, the four
co-founders fill the row below — a complete rectangle, no orphaned cell. */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--rule-w) solid var(--rule);border-left:var(--rule-w) solid var(--rule)}
.member{padding:30px 28px 34px;border-right:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule);background:var(--paper);display:flex;flex-direction:column}
.member .av{width:64px;height:64px;border-radius:0;border:1.5px solid var(--ink);background:var(--paper-2);color:var(--ink);display:block;flex-shrink:0;object-fit:cover}
.member .role{margin-top:20px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--navy-2)}
/* Reserve two lines so co-founder names align whether the title wraps or not */
.team-grid .member:not(.lead) .role{line-height:1.45;min-height:2.9em}
.member-head h3,.member h3{font-size:var(--text-xl);margin-top:6px}
.member.lead .member-head h3,.member.lead h3{font-size:var(--text-2xl)}
.member .zh{display:block;font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--ink-soft);margin-top:2px}
.member p{margin-top:12px;color:var(--ink-soft);font-size:15px}
/* Reserve minimum spacing between the bio
and the "More detail" button.
Combined with margin-top:auto on .profile-link, this guarantees at least
24px of breathing room on every card regardless of bio length, without
re-introducing button misalignment across the row (grid stretch keeps
all cards the same height; only the inner gap grows).
For the lead card, .lead-bio sits inside .lead-bio-wrap which uses
justify-content:space-between — the padding there simply pads the
bio element itself, so the wrap's space-between layout still pins
the button to the bottom. */
.member p,
.member.lead .lead-bio{padding-bottom:24px}
.member .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.member .tags .t{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
/* Featured founder — full-width masthead row: avatar · identity · bio */
.member.lead{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(220px,.9fr) 1.3fr;gap:36px;align-items:center;padding:36px 34px}
.member.lead .av{width:84px;height:84px;border-color:var(--navy);background:var(--navy);object-fit:cover}
.member.lead .role{margin-top:0}
.member.lead .zh{font-size:15px}
.member.lead .lead-bio{margin-top:0;color:var(--ink-soft);font-size:var(--text-lg);max-width:48ch}
/* Wraps .lead-bio