/* ============================================================
EVENLY LAB · 均研科技 — Site stylesheet
Editorial / Swiss-brutalist: warm paper ground, hairline grid
rules, oversized left-aligned type, mono index numbers, flat
solid colour blocks (no gradients), square corners.
Normal + high-contrast modes. Fonts/icons from CDN, degrade
to system fonts offline.
============================================================ */
: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}
html{scroll-behavior:smooth;overflow-x:hidden}
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:hidden;
}
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.
Also cover high-contrast mode — the colourful mark is intentionally
NOT recoloured, and its embedded text (#000 / #fff) keeps the right
contrast against either background. */
html[data-contrast="high"] .lockup .logo-lockup{
height:36px;min-width:140px;visibility:visible;display:block;opacity:1;
filter:none;
}
@media (max-width:430px){
.lockup .logo-lockup{min-width:120px}
}
/* ---------------- 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(64px,8vw,96px) 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)}
.sec-head .rule{margin-top:8px}
/* ============ 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:820px}
.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}
}
/* ============ 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}
html[data-contrast="high"] .journey-nav a.is-active{border-left-color:var(--accent)}
/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--rule-w) solid var(--ink)}
.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)}
/* ============ 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}
.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.
High-contrast mode stays as #000 (see data-contrast override below). */
.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}
/* In Contrast mode keep media logos in their natural colors (no white
inversion). The trust section background flips to #000 in Contrast
mode — boost contrast slightly so the colored logos still pop, but
do NOT invert them to pure white. */
html[data-contrast="high"] .trust .award-item.award-logo{
filter:contrast(1.15) saturate(1.1);
}
/* ============ 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)}
.feature{display:grid;grid-template-columns:220px 1fr;gap:30px;padding:30px 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%}}
.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)}
.tl-row{display:grid;grid-template-columns:170px 1fr;gap:30px;padding:28px 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
+ .profile-link inside the founder card's
bio grid column. Flex column pushes the button to the bottom via
margin-top:auto, matching the bottom-alignment trick used on .member cards. */
.lead-bio-wrap{display:flex;flex-direction:column;height:100%;justify-content:space-between}
/* ============ VOICES ============ */
.voices-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule-w) solid var(--rule)}
.voice-card{padding:34px 28px 32px;border-left:var(--rule-w) solid var(--rule)}
.voice-card:first-child{border-left:0}
.voice-card .mk{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,8vw,62px);line-height:.5;color:var(--navy-2);height:clamp(26px,5vw,34px)}
.voice-card blockquote{margin:0;font-size:var(--text-lg);color:var(--ink)}
.voice-card .who{margin-top:24px;display:flex;align-items:center;gap:12px}
.voice-card .av{width:44px;height:44px;border-radius:0;border:1.5px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:14px}
.voice-card .who b{display:block;color:var(--ink);font-size:15px}
.voice-card .who span{font-size:12px;color:var(--ink-soft);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em}
/* ============ CTA (yellow band) ============ */
.cta{background:var(--accent);border-top:var(--rule-w) solid var(--ink);border-bottom:var(--rule-w) solid var(--ink)}
.cta .inner{padding:clamp(56px,8vw,96px) var(--gutter);text-align:center;max-width:820px;margin:0 auto;box-sizing:border-box}
.cta .kicker{color:var(--accent-ink);justify-content:center}
.cta h2{color:var(--ink);font-size:clamp(32px,5.6vw,60px);margin-top:16px}
.cta p{color:var(--accent-ink);font-size:var(--text-lg);margin-top:16px;max-width:52ch;margin-left:auto;margin-right:auto}
/* `width:100% + box-sizing:border-box` keeps .cta-actions inside the
.inner safe area at every viewport — when buttons go full-width on
mobile (single column), they still respect the container's gutter
instead of bleeding past the screen edge. */
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px;width:100%;max-width:100%;box-sizing:border-box}
/* ============ FOOTER (ink band) ============ */
.site-footer{background:var(--ink);color:#C7CCDB}
.site-footer .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:60px 0 30px}
.site-footer h4{color:#fff;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:12px;margin-bottom:16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.site-footer .foot-links a{color:#C7CCDB;text-decoration:none;font-size:15px}
.site-footer .foot-links a:hover{color:#fff;text-decoration:underline}
.site-footer .foot-bottom{border-top:1px solid rgba(255,255,255,.18);padding:20px 0;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:#8B93AB}
/* ============================================================
HIGH-CONTRAST MODE (html[data-contrast="high"])
Paper→white, ink→pure black, solid navy blocks→black, rules
thicken to 2px. Yellow accent (blocks / behind text) retained.
The colourful logo is never recoloured.
============================================================ */
html[data-contrast="high"]{
--paper:#fff;--paper-2:#fff;
--ink:#000;--ink-soft:#000;
--navy:#000;--navy-2:#000;
--rule:#000;--rule-w:2px;
--link:#0A2A6B;
--el-green-aaa:#0A3D1B;--el-aqua-aaa:#083E3C;--el-amber-aaa:#5A3A00;
--accent-ink:#000;
}
html[data-contrast="high"] *:focus-visible{outline:3px solid #000;outline-offset:2px;box-shadow:0 0 0 6px var(--accent)}
html[data-contrast="high"] .btn:hover{box-shadow:4px 4px 0 #000}
html[data-contrast="high"] .trust{background:#000}
html[data-contrast="high"] .trust b{color:var(--accent)}
html[data-contrast="high"] .trust .funded-by{color:#fff}
/* In Contrast mode the trust strip flips to pure black, but the
.award-slider ::before / ::after gradient overlays still resolve to
var(--paper-2) which is now #fff — that creates a visible white
fade strip on each edge of the marquee. Hide the pseudo-elements
entirely under Contrast so logos have a clean black backdrop. The
default (non-contrast) gradient fade is preserved. */
html[data-contrast="high"] .trust .award-slider::before,
html[data-contrast="high"] .trust .award-slider::after,
html[data-contrast="high"] .trust .award-slider.reverse::before,
html[data-contrast="high"] .trust .award-slider.reverse::after{display:none}
html[data-contrast="high"] .spotlight{background:#000;border:2px solid #000}
html[data-contrast="high"] .spotlight .kicker,html[data-contrast="high"] .spotlight li i{color:var(--accent)}
html[data-contrast="high"] .spotlight p,html[data-contrast="high"] .spotlight .zh,html[data-contrast="high"] .spotlight li{color:#fff}
html[data-contrast="high"] .phone{background:#fff}
html[data-contrast="high"] .phone .wave span{background:#000}
html[data-contrast="high"] .member{background:#fff}
html[data-contrast="high"] .member .av{background:#fff}
html[data-contrast="high"] .member.lead .av{background:#000;color:#fff;border-color:#000}
html[data-contrast="high"] .site-footer{background:#000;color:#fff}
html[data-contrast="high"] .site-footer .foot-links a,html[data-contrast="high"] .site-footer .foot-bottom{color:#fff}
html[data-contrast="high"] .site-footer .foot-bottom{border-top-color:rgba(255,255,255,.5)}
html[data-contrast="high"] .site-footer p{color:#fff !important}
html[data-contrast="high"] .ct-toggle{background:#000;color:#fff;border-color:#000}
html[data-contrast="high"] .lang-toggle[aria-pressed="true"]{background:#000;color:#fff;border-color:#000}
html[data-contrast="high"] .device-frame{background:#000;border-color:#000}
html[data-contrast="high"] .awards-section{background:#fff}
html[data-contrast="high"] .dynamic-cta{background:#000;border-color:#000}
/* HKUST-EC logo: its inline SVG uses `fill:#003477` (dark navy) which
becomes invisible against the `#000` trust-bar ground in high-contrast
mode. `brightness(0) invert(1)` collapses the navy to black then
inverts to pure #FFFFFF, matching the contrast-mode yellow-on-black
palette and staying legible on the dark trust band. The same SVG is
used in both the visible .award-set and the aria-hidden duplicate
that backs the seamless loop, so the rule covers all instances. */
html[data-contrast="high"] img.logo-hkust-ec{filter:brightness(0) invert(1)}
/* Force HKET / SCMP / Sing Tao Daily to pure white in Contrast mode so they
read clearly on the black trust backdrop. Attribute selectors target the
SVG file names directly so no HTML class edits are needed — each media
logo appears twice (visible set + aria-hidden duplicate for the seamless
loop) and the same rule covers both instances. brightness(0) drops all
color information; invert(1) flips what's left to white. */
html[data-contrast="high"] img[src$="HKET_logo.svg"],
html[data-contrast="high"] img[src$="SCMP_logo.svg"],
html[data-contrast="high"] img[src$="Sing_Tao_Daily_logo.svg"]{filter:brightness(0) invert(1)}
html[data-contrast="high"] .feature-visual-card{background:#fff}
html[data-contrast="high"] .journey-card,
html[data-contrast="high"] .journey-number{border-color:#000}
html[data-contrast="high"] .journey-flow::before{border-top-color:#000}
html[data-contrast="high"] .toggle-btn.active{background:#000;color:#fff}
/* ============================================================
FLOATING WHATSAPP BUTTON
Persistent bottom-right CTA, accessible focus state, high-
contrast aware, hidden in print.
============================================================ */
.fab-whatsapp{
position:fixed;right:20px;bottom:20px;z-index:60;
display:inline-grid;place-items:center;
width:60px;height:60px;
background:#25D366;color:#fff;
border:2px solid var(--ink);
border-radius:50%;
text-decoration:none;
box-shadow:4px 4px 0 var(--ink);
transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.fab-whatsapp i{font-size:30px;line-height:1;color:#fff}
.fab-whatsapp:hover{
background:#1ebe57;color:#fff;text-decoration:none;
transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);
}
.fab-whatsapp:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink)}
.fab-whatsapp:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.fab-whatsapp .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[data-contrast="high"] .fab-whatsapp{background:#000;border-color:#000}
html[data-contrast="high"] .fab-whatsapp:hover{background:#25D366;border-color:#000}
@media (max-width:480px){
.fab-whatsapp{right:14px;bottom:14px;width:54px;height:54px}
.fab-whatsapp i{font-size:26px}
.fab-whatsapp{box-shadow:3px 3px 0 var(--ink)}
}
@media print{.fab-whatsapp{display:none}}
/* ============================================================
HERO BACKGROUND IMAGE — product.html (#hero / .hero-split)
Scoped to .hero-grid-split (the top split area above the
"View for:" toggle). Rendered as a small, low-opacity visual
cue (~220px square, top-left of the grid) rather than a full-
bleed background. The .hero-toggle-row and sections below the
hero stay clean. Pseudo-element approach keeps markup clean.
sits behind .hero-content / .hero-visual via z-index:-1 +
position:relative on .hero-grid-split (existing), so it never
intercepts pointer events or overlays content.
============================================================ */
/* ============================================================
HERO BACKGROUND IMAGE
The hero photo (assets/visually-impaired-person.jpg) is intentionally
scoped to .hero-grid-split — the top split area above the audience
toggle ("View for:") — so it never bleeds into the toggle row or the
sections below.
The image is rendered as a focused visual cue (≈ 550px square
in the top-left corner, low opacity) rather than a full-bleed
background. This keeps the focus on the headline + iPhone preview
while still adding emotional context. z-index:-1 + isolation:isolate
ensure it never intercepts pointer events or overlays content.
overflow:hidden on .hero-grid-split is the safety net: even if the
image grows larger, it is clipped at the bottom edge of the grid
split and can never spill into .hero-toggle-row.
============================================================ */
.hero-split{position:relative;overflow:hidden;isolation:isolate}
.hero-grid-split{position:relative;overflow:hidden}
.hero-grid-split::before{
content:"";
position:absolute;
top:0;left:0;
width:clamp(420px,54vw,680px);
aspect-ratio:1 / 1;
background-image:url("../assets/visually-impaired-person.jpg");
background-size:cover;background-position:center;
background-repeat:no-repeat;
opacity:.24;
z-index:-1;
border-radius:0;
pointer-events:none;
}
/* High-contrast mode: drop the photo entirely so contrast users
see only the type, matching the existing print `.fab-whatsapp`
pattern of removing decorative layers for accessibility. */
html[data-contrast="high"] .hero-grid-split::before{display:none}
/* ============================================================
HERO ENHANCEMENTS — product.html
Hero h1 uses a moderate clamp so it never overwhelms the
hero container; hero-desc sits beneath at a comfortable
body size and the audience toggle is centred.
============================================================ */
.hero-split .hero-content .hero-desc{
font-size:var(--text-md);line-height:1.65;color:var(--ink-soft);
max-width:48ch;margin-top:22px;
}
.hero-split .hero-content .hero-actions{
justify-content:center;flex-wrap:wrap;margin-top:24px;
}
.hero-actions .btn-yellow{background:#FFC72E;color:#4A3600;border-color:var(--ink)}
.hero-actions .btn-yellow:hover{background:#FFD65C;color:#4A3600;box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}
/* Full-width row that hosts the audience mode toggle beneath the hero grid.
Centred on the viewport, not constrained to a single column. */
.hero-toggle-row{
border-top:var(--rule-w) solid var(--rule);
padding:24px 0 4px;margin-top:32px;
display:flex;justify-content:center;
}
.hero-toggle-row .mode-toggle{
margin:0;padding:0;
display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero-toggle-row .toggle-label{display:block;margin-bottom:10px}
.hero-toggle-row .toggle-switch{margin:0 auto}
.hero-split .hero-content h1{
font-size:clamp(28px,3.5vw,42px);
line-height:1.18;letter-spacing:-.01em;
}
/* Mode Toggle — bigger label + buttons in the hero */
/* Mode Toggle label + buttons — generic (no longer scoped to hero-content) */
.mode-toggle .toggle-label{
font-size:15px;letter-spacing:.12em;margin-bottom:14px;
}
.mode-toggle .toggle-btn{
font-size:15px;padding:10px 18px;min-height:auto;
}
/* iPhone device frame — realistic phone bezel & notch */
.iphone-frame{
position:relative;width:100%;max-width:320px;margin:0 auto;
aspect-ratio:9/19;background:#0a0a0a;border-radius:42px;
padding:10px;border:2px solid var(--ink);
box-shadow:8px 8px 0 rgba(18,22,42,.18);
}
.iphone-frame::before{
content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
width:96px;height:22px;background:#000;border-radius:14px;z-index:2;
}
.iphone-frame .iphone-screen{
width:100%;height:100%;background:var(--paper);border-radius:32px;overflow:hidden;
position:relative;display:flex;flex-direction:column;
}
.iphone-frame .iphone-status{
display:flex;justify-content:space-between;align-items:center;
padding:12px 22px 4px;font-family:var(--font-mono);font-size:11px;color:var(--ink);
}
.iphone-frame .iphone-content{flex:1;padding:20px 18px;display:flex;flex-direction:column;gap:12px}
.iphone-frame .iphone-cta{
margin:auto 18px 18px;padding:12px;text-align:center;
background:var(--ink);color:var(--paper);font-family:var(--font-body);font-weight:700;font-size:14px;
}
/* ============================================================
FEATURE STEPPER — manually-navigated prev/next arrow carousel.
Renders one pill-card at a time; dots indicate position.
Falls back to a flowing grid when JS is unavailable — see
.stepper-track fallback CSS below.
============================================================ */
.feature-stepper{
margin-top:32px;display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;gap:18px;
}
.stepper-viewport{
overflow:hidden;border:var(--rule-w) solid var(--ink);
background:var(--paper-2);
}
.stepper-track{
display:flex;gap:0;
transform:translateX(0);
transition:transform var(--dur-fast) var(--ease-out);
will-change:transform;
}
.stepper-track .pill-card{
flex:0 0 100%;
min-width:100%;background:var(--paper);
padding:22px 24px;display:flex;flex-direction:column;gap:6px;
border:0;border-right:var(--rule-w) solid var(--ink);
}
.stepper-track .pill-card:last-child{border-right:0}
.stepper-arrow{
width:48px;height:48px;display:grid;place-items:center;
background:var(--paper);border:var(--rule-w) solid var(--ink);
color:var(--ink);font-size:22px;cursor:pointer;
transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast);
}
.stepper-arrow:hover{background:var(--accent);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.stepper-arrow:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.stepper-arrow[disabled]{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none;background:var(--paper);color:var(--ink-soft)}
.stepper-arrow i{pointer-events:none}
.stepper-dots{
grid-column:1/-1;display:flex;justify-content:center;gap:8px;
list-style:none;margin:14px 0 0;padding:0;
}
.stepper-dots li{
width:10px;height:10px;border-radius:50%;
background:var(--paper);border:var(--rule-w) solid var(--ink);
cursor:pointer;transition:background var(--dur-fast);
}
.stepper-dots li[aria-current="true"]{background:var(--accent)}
/* No-JS fallback: lay all cards out in a flowing grid inside the
stepper viewport so the controls degrade gracefully (arrows hidden).
Activated when the page does NOT have the .js-anim class on
(which the reveal-on-scroll IIFE in this same file adds once it has
been able to run). */
.js-anim-off .feature-stepper{grid-template-columns:1fr;gap:0}
.js-anim-off .stepper-arrow,.js-anim-off .stepper-dots{display:none}
.js-anim-off .stepper-viewport{overflow:visible;border:0;background:transparent}
.js-anim-off .stepper-track{transform:none;flex-wrap:wrap;gap:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.js-anim-off .stepper-track .pill-card{flex:0 0 auto;min-width:0;border:var(--rule-w) solid var(--ink);padding:18px 20px}
/* Print: flatten stepper so all cards show on paper. */
@media print{
.stepper-arrow,.stepper-dots{display:none}
.stepper-viewport{overflow:visible;border:0;background:transparent}
.stepper-track{transform:none;flex-wrap:wrap;gap:14px;display:grid;grid-template-columns:repeat(2,1fr)}
.stepper-track .pill-card{flex:0 0 auto;min-width:0;border:var(--rule-w) solid var(--ink);padding:14px 16px}
}
/* Compact feature card (for inline use) */
.feature-compact{
border-top:var(--rule-w) solid var(--rule);
padding:24px 0;display:grid;gap:14px;
}
.feature-compact .row{
display:grid;grid-template-columns:auto 1fr;gap:18px 22px;
padding:18px 0;border-bottom:var(--rule-w) solid var(--rule);
align-items:baseline;
}
.feature-compact .row i{font-size:22px;color:var(--ink);line-height:1.2}
.feature-compact .row h4{font-size:var(--text-xl);margin:0 0 4px;font-family:var(--font-display);font-weight:700}
.feature-compact .row p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.55;max-width:60ch}
/* Custom UI block (warm paper / navy border / yellow accent) */
.custom-ui-block{
margin-top:28px;background:var(--paper);border:var(--rule-w) solid var(--ink);
display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
padding:22px 26px;
}
.custom-ui-block .ui-icon{
width:54px;height:54px;display:grid;place-items:center;
background:var(--accent);color:var(--accent-ink);border:var(--rule-w) solid var(--ink);font-size:22px;
}
.custom-ui-block .ui-body h4{font-size:var(--text-lg);margin:0 0 6px;font-family:var(--font-display);font-weight:700}
.custom-ui-block .ui-body p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.55;max-width:54ch}
.custom-ui-block .ui-arrow{
font-family:var(--font-mono);font-size:22px;color:var(--ink);background:transparent;border:0;line-height:1;
}
/* ============================================================
ABOUT MISSION — grid w/ photo placeholders alongside stats
============================================================ */
/* Mission section — single-column flow (stats above, photos below).
The mission-photos row is itself a 3-column grid; it collapses to
1 column on narrow viewports. */
.mission-grid{
display:flex;flex-direction:column;gap:24px;
margin-top:8px;
}
.mission-photos{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
margin-top:8px;align-items:start;
}
.mission-photo{
margin:0;display:flex;flex-direction:column;gap:10px;
}
.mission-photo .mission-photo-frame{
background:var(--paper-2);border:var(--rule-w) solid var(--ink);
aspect-ratio:4/3;display:grid;place-items:center;color:var(--navy-2);
padding:18px;position:relative;
}
.mission-photo .mission-photo-frame i{font-size:34px;color:var(--navy-2)}
.mission-photo .label{
font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
color:var(--paper);background:var(--ink);padding:8px 12px;display:block;text-align:center;
border:var(--rule-w) solid var(--ink);
}
@media (max-width:900px){
.mission-photos{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}
@media (max-width:600px){
.mission-photos{grid-template-columns:1fr;gap:14px}
}
/* Story image frame */
.story-image-frame{
margin-top:24px;background:var(--paper-2);border:var(--rule-w) solid var(--ink);
aspect-ratio:16/10;display:grid;place-items:center;color:var(--navy-2);
font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.story-image-frame .frame-inner{
display:flex;flex-direction:column;align-items:center;gap:12px;
}
.story-image-frame i{font-size:42px;color:var(--navy-2)}
/* Story two-column layout — image left, text right on tablet/desktop; stacks on mobile. */
.story-grid{
display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
margin-top:24px;
}
.story-grid .story-image-frame{margin-top:0}
.story-grid .story-text h3{font-size:clamp(24px,3vw,32px);margin:0 0 12px;line-height:1.3}
.story-grid .story-text p{font-size:var(--text-lg);color:var(--ink-soft);line-height:1.6;max-width:60ch}
.story-grid .story-text p + p{margin-top:14px}
@media (max-width:780px){
.story-grid{grid-template-columns:1fr;gap:24px}
}
/* ============================================================
JOURNEY FLOW (matches sample-2.html's horizontal process flow)
A horizontal row of numbered + icon cards connected by a dashed
line running through the vertical centre of the number badges.
Square / brutalist styling (flat hairline border, hard-shadow
hover) per the site's existing design language — no soft shadows.
============================================================ */
.journey-flow{
list-style:none;padding:0;margin:0;
display:flex;justify-content:space-between;align-items:flex-start;
gap:20px;position:relative;
}
/* When a journey-flow row sits directly below another journey-flow row
(steps 3 & 4 sit below steps 1 & 2), add a vertical gap so the two
horizontal process rows breathe — addresses the user feedback that
"Process flow 1 & 2 and 3 & 4 are touching each other". The gap is
only applied BETWEEN sibling .journey-flow lists; the first list
keeps its own spacing from the parent section. */
.journey-flow + .journey-flow{margin-top:clamp(28px,4vw,44px)}
/* Dashed connector line, runs across the row at the vertical centre of
the number badges. Token-driven neutral, not raw #999. */
.journey-flow::before{
content:"";
position:absolute;
top:23px; /* centres on a 46px-tall number badge */
left:46px;right:46px;
border-top:2px dashed var(--rule);
z-index:1;
}
.journey-step{
flex:1;display:flex;flex-direction:column;align-items:center;
position:relative;z-index:2;
list-style:none;padding:0;margin:0;
}
.journey-number{
width:46px;height:46px;border-radius:50%;
background:var(--paper);border:2px solid var(--ink);
display:grid;place-items:center;
font-family:var(--font-mono);font-weight:700;font-size:16px;
color:var(--ink);letter-spacing:.02em;
margin-bottom:18px;
}
.journey-card{
background:var(--paper);border:var(--rule-w) solid var(--ink);
aspect-ratio:1/1;width:100%;max-width:180px;
padding:14px;box-sizing:border-box;
display:flex;flex-direction:column;justify-content:center;align-items:center;
text-align:center;gap:10px;
transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.journey-card:hover{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--ink)}
.journey-card i{
font-size:42px;color:var(--navy-2);line-height:1;
}
.journey-card p{
margin:0;font-family:var(--font-display);font-weight:700;
font-size:14px;letter-spacing:-.005em;color:var(--ink);line-height:1.25;
overflow-wrap:break-word;word-break:break-word;
}
/* Interactive journey step — show pointer cursor + active ring on hover/focus.
The card is a button (role=button + tabindex=0) but keeps the original
.journey-card visual treatments. */
.journey-step[role="button"]{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:inherit;list-style:none}
.journey-step[role="button"]:hover .journey-card{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--ink)}
.journey-step[role="button"]:focus-visible{outline:0}
.journey-step[role="button"]:focus-visible .journey-card{box-shadow:0 0 0 3px var(--accent),4px 4px 0 var(--ink)}
.journey-step[aria-pressed="true"] .journey-card{background:var(--navy);color:var(--paper)}
.journey-step[aria-pressed="true"] .journey-card i,
.journey-step[aria-pressed="true"] .journey-card p{color:var(--paper)}
.journey-step[aria-pressed="true"] .journey-number{background:var(--accent);color:var(--accent-ink)}
/* Detail panel — swap-in region under the journey steps. JS toggles the
.is-active class on the matching [data-step-detail] panel. */
.journey-detail-panel{
margin-top:28px;padding:28px 32px;
background:var(--paper-2);border:var(--rule-w) solid var(--ink);
min-height:96px;display:flex;align-items:center;
}
.journey-detail-panel .journey-detail-placeholder{
margin:0;display:flex;align-items:center;gap:14px;color:var(--ink-soft);
font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;
}
.journey-detail-panel .journey-detail-placeholder i{font-size:22px;color:var(--navy-2)}
.journey-detail-panel .step-detail{display:none}
.journey-detail-panel .step-detail.is-active{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;width:100%}
.journey-detail-panel .step-detail .step-detail-icon{
width:48px;height:48px;display:grid;place-items:center;
background:var(--navy);color:var(--accent);font-size:24px;
border:var(--rule-w) solid var(--ink);flex-shrink:0;
}
.journey-detail-panel .step-detail .step-detail-body h4{
margin:0 0 6px;font-size:clamp(18px,2vw,22px);font-family:var(--font-display);
}
.journey-detail-panel .step-detail .step-detail-body p{margin:0;font-size:var(--text-md);color:var(--ink-soft);line-height:1.55;max-width:70ch}
html[data-contrast="high"] .journey-detail-panel{background:#000;color:#fff;border-color:#fff}
html[data-contrast="high"] .journey-detail-panel .step-detail-body p{color:#fff}
/* Connector banner between major steps — sits BETWEEN two .journey-flow
rows in the vertical flow (no longer a grid item). Reuses the
existing .custom-ui-block icon / body / arrow rules above. */
/* ============================================================
COMPACT FEATURE CARD (image2.png reference)
Concise pill-card format with index label, bold title,
1-line muted description.
============================================================ */
.pill-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 12px;
}
.pill-card{
background:var(--paper);border:var(--rule-w) solid var(--ink);
padding:18px 20px;display:flex;flex-direction:column;gap:6px;flex:0 0 auto;
transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.pill-card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.pill-card .pill-idx{
font-family:var(--font-mono);font-size:11px;color:var(--navy-2);letter-spacing:.1em;
text-transform:uppercase;font-weight:700;
}
.pill-card .pill-idx i{font-size:14px;color:var(--ink);margin-right:4px;vertical-align:-2px}
.pill-card h4{
font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);
margin:2px 0 0;letter-spacing:-.01em;color:var(--ink);
}
.pill-card p{
margin:2px 0 0;font-size:14px;color:var(--ink-soft);line-height:1.5;
}
/* ============================================================
TIGHT SECTION SPACING
Eliminate awkward white gaps between consecutive sections.
============================================================ */
.sec.tight{padding:32px 0}
@media (max-width:720px){
.sec.tight{padding:24px 0}
/* Journey flow: stack vertically, hide dashed connector line,
turn each step into a horizontal row (number left, card right). */
.journey-flow{flex-direction:column;align-items:stretch;gap:24px}
.journey-flow::before{display:none}
.journey-step{
flex-direction:row;justify-content:flex-start;
gap:16px;width:100%;
}
.journey-number{margin-bottom:0;flex-shrink:0}
.journey-card{
aspect-ratio:auto;max-width:none;
flex-direction:row;justify-content:flex-start;
padding:14px 18px;gap:14px;
}
/* Ultra-narrow: shrink icon + horizontal padding to keep text on one line
even with longer Chinese labels (e.g. 提問與互動) at 320px viewports. */
.journey-card{padding:12px 14px;gap:12px}
.journey-card i{font-size:34px}
.pill-grid{grid-template-columns:1fr 1fr;gap:12px}
}
@media (max-width:480px){
.pill-grid{grid-template-columns:1fr}
}
/* Chinese mode: reveal companions, hide the paired English on bilingual headings */
html[data-lang="zh"] .en{display:none}
html[data-lang="zh"] .hero .zh,html[data-lang="zh"] .page-head .zh{margin-top:0}
/* Full-page body translation: Cantonese copy is hidden until Chinese mode is on.
Paired with an .en sibling; keeps the display face's sizing but swaps to a
CJK face and relaxes the Latin tracking so Chinese doesn't read cramped. */
.zh-b{display:none}
html[data-lang="zh"] .zh-b{display:inline;font-family:"Noto Sans TC",var(--font-body);letter-spacing:.01em}
html[data-lang="zh"] h1 .zh-b,html[data-lang="zh"] h2 .zh-b,html[data-lang="zh"] h3 .zh-b{letter-spacing:0}
/* ---------------- Responsive ---------------- */
@media (max-width:1280px){
.journey-nav{display:none}
}
@media (max-width:980px){
.page-head .inner{grid-template-columns:1fr;gap:24px;align-items:start}
}
@media (max-width:900px){
.nav .row{position:relative}
.nav-toggle{display:flex;margin-left:auto}
.nav #primaryNav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:var(--rule-w) solid var(--ink);box-shadow:0 8px 0 rgba(18,22,42,.14);z-index:51}
.nav #primaryNav.is-open{display:block}
.nav #primaryNav .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px 0 14px}
.nav #primaryNav .nav-links a{display:block;padding:11px 0;width:100%}
.hero-grid{grid-template-columns:1fr;gap:28px;align-items:start}
.stat-grid{grid-template-columns:repeat(2,1fr)}
.stat:nth-child(odd){border-left:0}
.stat:nth-child(n+3){border-top:var(--rule-w) solid var(--rule)}
.values-grid,.voices-grid{grid-template-columns:1fr}
.value,.voice-card{border-left:0;border-top:var(--rule-w) solid var(--rule)}
.value:first-child,.voice-card:first-child{border-top:0}
.team-grid{grid-template-columns:repeat(2,1fr)}
.member.lead{grid-template-columns:auto 1fr;gap:26px 30px}
.member.lead .lead-bio{grid-column:1/-1;max-width:none}
.spotlight{grid-template-columns:1fr;gap:32px}
.feature{grid-template-columns:1fr;gap:8px}
.visual-grid,.retail-grid{grid-template-columns:1fr}
.visual-card,.retail-card{border-left:0;border-top:var(--rule-w) solid var(--rule)}
.visual-card:first-child,.retail-card:first-child{border-top:0}
.founder-msg .inner{grid-template-columns:1fr;gap:16px}
/* New components responsive */
.hero-grid-split{grid-template-columns:1fr;gap:32px}
.hero-content{order:1}
/* Give the stacked iPhone extra breathing room above its top
edge so the device preview doesn't sit flush against the
headline/CTA. Applied per-breakpoint so the spacing scales
down gracefully on narrower phones (480px overrides below). */
.hero-visual{order:2;margin-top:40px}
/* On smaller screens the iPhone stacks below the hero text. The
default 320px cap made the device look cramped next to the
title; widen it so the preview reads cleanly at tablet widths. */
.iphone-frame{max-width:360px}
.awards-grid{grid-template-columns:repeat(2,1fr)}
.award-item{flex:0 0 50%}
.feature-visuals{grid-template-columns:1fr}
.timeline-item{grid-template-columns:1fr;gap:8px}
}
@media (max-width:720px){
.nav-links{display:none}
.nav-cta .btn{padding:0 16px;min-height:44px;font-size:14px}
.hero .masthead .r,.page-head .masthead .r{display:none}
.tl-row{grid-template-columns:1fr;gap:8px}
}
@media (max-width:620px){
.team-grid{grid-template-columns:1fr}
.member.lead{grid-template-columns:1fr;gap:16px;padding:28px}
.member.lead .av{width:64px;height:64px;font-size:20px}
/* Restore spacing rhythm that the desktop overrides (.member.lead .role
and .member.lead .lead-bio both pinned margin-top:0 for the 3-column
grid layout) so the lead card reads with the same vertical cadence
as the co-founder .member cards below. */
.member.lead .role{margin-top:20px}
.member.lead .member-head h3{margin-top:6px}
.member.lead .lead-bio{margin-top:12px}
/* The lead-bio-wrap uses height:100% + space-between on desktop so the
"More detail" button pins to the bottom of the bio column. In a single
column at this width that creates unwanted stretch + button position
jump — relax it. */
.member.lead .lead-bio-wrap{height:auto;justify-content:flex-start}
.member.lead .lead-bio-wrap .profile-link{margin-top:16px}
}
@media (max-width:560px){
.nav-cta .btn{display:none}
.stat-grid{grid-template-columns:1fr}
.stat{border-left:0!important;border-top:var(--rule-w) solid var(--rule)}
.stat:first-child{border-top:0}
.site-footer .foot-grid{grid-template-columns:1fr}
.nav-cta{gap:8px}
.ct-toggle .ct-label{display:none}
.ct-toggle{padding:0 12px}
.awards-grid{grid-template-columns:1fr}
.award-item{flex:0 0 100%}
.feature-pills{flex-wrap:wrap}
.feature-pills .pill{flex:0 0 50%;border-bottom:1px solid rgba(255,255,255,.1)}
}
@media (min-width:561px) and (max-width:820px){
.site-footer .foot-grid{grid-template-columns:1fr 1fr;gap:30px;padding:46px 0 24px}
}
@media (max-width:430px){
.nav .lockup .logo-lockup{height:32px}
}
/* ============================================================
ULTRA-NARROW BREAKPOINTS (480px & below)
Guarantees clean single-column layout, safe text wrapping,
stacked buttons, and full-bleed media on the smallest
mobile screens (iPhone SE, small Androids in portrait).
============================================================ */
@media (max-width:480px){
/* Base — reduce gutter, type scale, padding so nothing bleeds
outside the viewport. word-wrap prevents any oversized token
from breaking the grid. */
:root{--gutter:14px;--text-md:15px;--text-lg:16px;--text-xl:18px;--text-2xl:22px;--text-3xl:26px;--text-4xl:32px}
html,body{overflow-x:hidden;max-width:100%}
h1,h2,h3,h4{word-break:break-word;overflow-wrap:anywhere;hyphens:auto}
p,li,blockquote,span,a,button{overflow-wrap:break-word;word-break:break-word}
/* Section padding — reduce from clamp(56px,9vw,108px) */
.sec{padding:44px 0}
.container{padding:0 20px;max-width:100%}
/* ---------- Header / Nav ---------- */
.nav .row{min-height:60px;gap:8px;flex-wrap:nowrap}
.nav .lockup .logo-lockup{height:32px}
.nav-toggle{width:40px;height:40px;margin-right:0;flex-shrink:0}
.nav-toggle .bi{font-size:22px}
.nav #primaryNav{left:0;right:0}
.nav #primaryNav .nav-links{padding:8px 16px 14px}
.nav #primaryNav .nav-links a{padding:14px 4px;min-height:48px;font-size:13px}
.nav-cta{gap:6px;flex-shrink:0}
.ct-toggle{min-height:40px;padding:0 10px;font-size:11px;gap:6px}
.ct-toggle .bi{font-size:15px}
.ct-toggle .ct-label{display:none}
/* ---------- Hero / Page-head ---------- */
.hero .masthead,.page-head .masthead{padding:14px 0;font-size:11px;letter-spacing:.1em}
.hero .masthead .r,.page-head .masthead .r{display:none}
.hero-main{padding:32px 0 0}
.hero h1{font-size:clamp(34px,10vw,48px);letter-spacing:-.03em;max-width:14ch}
.hero .zh{font-size:clamp(20px,6vw,30px);margin-top:.18em}
.hero .lede{font-size:var(--text-lg)}
.page-head .inner{padding:32px 0 28px;gap:18px}
.page-head h1{font-size:clamp(34px,9vw,54px);max-width:12ch}
.page-head .zh{font-size:clamp(20px,5.5vw,30px)}
.page-head .lede{font-size:var(--text-lg)}
/* ---------- Hero-split (product page) ---------- */
.hero-split{padding:32px 0}
.hero-grid-split{grid-template-columns:1fr;gap:24px}
.hero-content{order:1}
.hero-visual{order:2}
.hero-desc{font-size:var(--text-lg);margin-top:14px}
.hero-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:20px}
.hero-actions .btn{width:100%;justify-content:center}
.hero-toggle-row{margin-top:24px;padding-top:18px}
.hero-toggle-row .mode-toggle{margin-top:0;padding-top:0}
.toggle-switch{flex-direction:column;max-width:100%;gap:10px}
.toggle-btn{border-right-width:var(--rule-w)!important;width:100%;min-height:48px}
/* iPhone — enlarge on mobile so it reads clearly when stacked
beneath the hero text. The default 320px max-width was too
narrow relative to the small-screen column width, making the
preview feel cramped next to the title. */
.iphone-frame{max-width:340px}
/* Tighten the iPhone top margin on ultra-narrow phones so the
stacked layout doesn't drag the page too long. The 900px
breakpoint above sets 40px, scaled back to 26px here. */
.hero-visual{margin-top:26px}
/* ---------- Buttons in general ---------- */
.btn{min-height:48px;padding:0 18px;font-size:15px}
.btn-lg{min-height:54px;padding:0 22px;font-size:16px}
/* ---------- Stat grid ---------- */
.stat-grid{grid-template-columns:1fr}
.stat{padding:24px 18px;border-left:0!important;border-top:var(--rule-w) solid var(--rule)}
.stat:first-child{border-top:0}
.stat .num{font-size:clamp(28px,9vw,40px)}
.stat .lbl{font-size:14px;margin-top:10px}
/* ---------- Values / Voices / Visual / Retail grids ---------- */
.values-grid,.voices-grid,.visual-grid,.retail-grid{grid-template-columns:1fr}
.value,.voice-card,.visual-card,.retail-card{border-left:0;border-top:var(--rule-w) solid var(--rule);padding:24px 18px}
.value:first-child,.voice-card:first-child,.visual-card:first-child,.retail-card:first-child{border-top:0}
.value h3,.voice-card blockquote,.retail-card h3,.visual-card h3{font-size:var(--text-lg)}
.voice-card .mk{font-size:44px;height:26px}
.retail-card .idx{font-size:clamp(22px,7vw,30px)}
/* ---------- feature-visuals / awards ---------- */
.feature-visuals,.awards-grid{grid-template-columns:1fr;gap:14px}
.award-item{flex:0 0 100%;padding:18px 14px;min-width:0}
.feature-visual-card{padding:18px}
.feature-visual-card .visual-placeholder{aspect-ratio:16/9}
/* ---------- Team grid ---------- */
.team-grid{grid-template-columns:1fr}
.member{padding:22px 18px 26px}
.member.lead{grid-template-columns:1fr;gap:14px;padding:24px 18px}
.member.lead .av{width:60px;height:60px;font-size:18px}
.member.lead h3{font-size:var(--text-xl)}
.member.lead .role{margin-top:16px;font-size:11px}
.member.lead .member-head h3{margin-top:6px}
.member.lead .lead-bio{font-size:var(--text-md);max-width:none;grid-column:auto;margin-top:12px}
/* Same single-column relax as at 620px — keep the bio + button grouped
tightly so they read as one stackable unit below the avatar block. */
.member.lead .lead-bio-wrap{height:auto;justify-content:flex-start}
.member.lead .lead-bio-wrap .profile-link{margin-top:16px}
/* ---------- Spotlight / Feature rows ---------- */
.spotlight{grid-template-columns:1fr;gap:24px;padding:28px 20px}
.spotlight h2{font-size:clamp(24px,7vw,36px)}
.spotlight p{font-size:var(--text-md)}
.feature{grid-template-columns:1fr;gap:6px;padding:22px 0}
.feature h3{font-size:var(--text-lg)}
.feature p{font-size:14px}
/* ---------- Timeline ---------- */
.timeline-item,.tl-row{grid-template-columns:1fr;gap:6px;padding:20px 0}
.tl-row .when{font-size:var(--text-md)}
/* ---------- Founder msg ---------- */
.founder-msg{padding:36px 0}
.founder-msg .inner{grid-template-columns:1fr;gap:14px}
.founder-msg .mk{font-size:54px}
.founder-msg blockquote{font-size:var(--text-lg)}
/* ---------- FAQ ---------- */
.faq-item summary{padding:18px 0;font-size:var(--text-md)}
.faq-item p{padding:0 0 18px;font-size:14px}
/* ---------- Device frame / mockups ---------- */
.device-frame{width:100%;max-width:100%}
.device-screen{padding:14px}
.app-interface{min-height:160px}
.feature-pills{flex-wrap:wrap}
.feature-pills .pill{flex:0 0 50%;padding:12px 6px;font-size:9px;border-bottom:1px solid rgba(255,255,255,.1)}
/* ---------- Awards slider text badges ---------- */
.trust .award-item.award-text{min-width:160px;height:48px;padding:0 14px;font-size:10px}
.trust .award-item img{height:52px;max-height:52px}
.trust .award-item img.logo-hkust-ec{height:40px}
.trust .award-item img.logo-award-highlight{height:64px;max-height:64px}
.trust .award-item.award-logo{height:64px}
.trust .award-item.award-logo img{height:38px}
.trust .award-slider::before,.trust .award-slider::after{width:60px}
/* ---------- contact.html trust info row ----------
The text-only .trust row on contact.html (EMAIL / HK / Pilot enquiries)
uses a 30px column gap which is too wide for sub-600px viewports and
pushes items past the container edge. Tighten the gap, hide the slashes,
centre the items, and trim padding so the text reads cleanly on iPhone
SE / 12 / 13 / 14 widths. */
.trust{padding:16px 0;box-sizing:border-box}
.trust .row{gap:24px 14px;font-size:11px;letter-spacing:.06em;padding:14px 0;justify-content:center;text-align:center}
.trust .sep{display:none}
/* On very narrow phones (<480px) drop the type scale another notch and
tighten line-height so three short lines stack with no awkward gap. */
.trust .row{line-height:1.5;padding:12px 0}
.trust .row > span{display:inline-block}
/* ---------- CTA / dynamic-cta ----------
The 480px override preserves a 20px horizontal gutter (matches the
20px set on .container at this breakpoint). Without an explicit
horizontal value, the default `padding:44px 0` would let the
full-width buttons touch the screen edges on small phones — the
exact bug this rule was added to prevent. */
.cta .inner,.dynamic-cta .inner{padding:44px 20px;width:100%}
.cta h2,.dynamic-cta h2{font-size:clamp(26px,8vw,36px)}
.cta p,.dynamic-cta p{font-size:var(--text-md);margin-top:12px}
.cta-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px;padding:0;width:100%;max-width:100%;box-sizing:border-box}
.cta-actions .btn{width:100%;max-width:100%;justify-content:center;box-sizing:border-box}
.cta-actions .btn i{display:none}
.cta-label{font-size:12px}
/* ---------- Footer ---------- */
.site-footer .foot-grid{grid-template-columns:1fr;gap:24px;padding:40px 0 20px}
.site-footer h4{margin-bottom:10px}
.site-footer ul{gap:8px}
.site-footer .foot-links a{font-size:14px}
.site-footer .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 0;font-size:11px}
/* ---------- Footer / trust safe gutters ----------
The .container rule above caps horizontal padding at 16px on phones.
That is enough for most sections, but .foot-grid and .foot-bottom
sit *inside* .container with their own padding-left/right set to 0,
so the only thing keeping the text off the screen edge is that 16px.
Bump it to 20px here so brand / links / copyright / trust info all
read with a consistent safe gutter on 375 / 390 / 414 / 428 viewports. */
.site-footer .container,
.trust .container{padding-left:20px;padding-right:20px}
.site-footer .foot-grid{padding-left:0;padding-right:0}
.site-footer .foot-bottom{padding-left:0;padding-right:0}
.trust .row{padding-left:0;padding-right:0}
/* ---------- Chips / tags ---------- */
.chip{padding:5px 10px;font-size:11px}
.hero-badges{gap:8px}
}
/* Mid-narrow breakpoint — bridges 720px and 480px to ensure
iPhone 12/13/14 Pro Max (430px) and large Android (540px)
land in a clean single-column layout without horizontal
overflow. */
@media (max-width:720px) and (min-width:481px){
:root{--gutter:18px}
.hero-actions{flex-wrap:wrap}
.hero-actions .btn{flex:1 1 calc(50% - 7px);min-width:0}
.cta-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%;max-width:100%;box-sizing:border-box}
.cta-actions .btn{flex:1 1 220px;max-width:100%;box-sizing:border-box}
}
/* Tablet / large phone breakpoint — 769-768px and below.
Adds a dedicated 20px container gutter so content stays clear
of screen edges on iPad mini portrait and most Android phones.
Forces single-column, centred alignment on the contact.html
trust info row so the EMAIL / HK / Pilot lines never bleed
past the container. */
@media (max-width:768px){
.container{padding-left:20px;padding-right:20px}
.trust{padding:16px 0;box-sizing:border-box}
.trust .row{gap:10px 18px;justify-content:center;text-align:center;padding:14px 20px;box-sizing:border-box}
.trust .sep{opacity:.3}
/* .cta / .dynamic-cta .inner defaults to `padding:... var(--gutter)` —
force an explicit 20px horizontal gutter at this breakpoint so the
full-width CTA buttons never bleed past the screen edge on tablets
and large phones in portrait. */
.cta .inner,.dynamic-cta .inner{padding-left:20px;padding-right:20px;box-sizing:border-box}
.cta-actions{padding-left:0;padding-right:0;box-sizing:border-box}
}
/* ============ HERO SPLIT LAYOUT (desktop) ============
Scoped to min-width:901px so the two-column side-by-side
layout is reserved for tablet/desktop. The narrower media
queries below (max-width:900px / 720px / 480px) flip the
grid to a single column and stack the iPhone under the
title. Because these mobile rules also set grid-template-
columns, the wrapping here is what guarantees the mobile
styles win on phones — without it the un-scoped rules
below would override the mobile overrides because of CSS
source-order tie-breaking. */
@media (min-width:901px){
.hero-split{padding:clamp(40px,6vw,72px) 0;border-bottom:var(--rule-w) solid var(--rule)}
.hero-grid-split{
display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
}
.hero-content{order:1}
.hero-visual{order:2}
}
.hero-desc{
font-size:var(--text-xl);color:var(--ink-soft);max-width:46ch;margin-top:20px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
/* Mode Toggle — generic (now lives inside .hero-toggle-row on product page) */
.mode-toggle{
display:flex;flex-direction:column;align-items:center;text-align:center;
}
.mode-toggle .toggle-label{display:block;margin-bottom:12px}
.mode-toggle .toggle-switch{margin:0 auto}
.toggle-label{
font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;
color:var(--ink-soft);display:block;margin-bottom:12px;
}
.toggle-switch{display:flex;gap:0;max-width:400px}
.toggle-btn{
flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
padding:14px 20px;font-family:var(--font-body);font-weight:700;font-size:14px;
border:var(--rule-w) solid var(--ink);border-right-width:0;background:transparent;color:var(--ink);
cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.toggle-btn:last-child{border-right-width:var(--rule-w)}
.toggle-btn:hover{background:var(--paper-2)}
.toggle-btn.active{background:var(--ink);color:var(--paper)}
.toggle-btn i{font-size:18px}
/* Device Frame */
.device-frame{
background:var(--navy);border:var(--rule-w) solid var(--ink);overflow:hidden;
}
.device-header{
display:flex;align-items:center;gap:12px;padding:12px 16px;
background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.1);
}
.device-dots{display:flex;gap:6px}
.device-dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25)}
.device-title{
font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
color:rgba(255,255,255,.5);
}
.device-screen{padding:20px}
.app-interface{min-height:200px}
.app-status{
display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;
color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;
}
.waveform{
display:flex;align-items:center;justify-content:center;gap:4px;height:48px;margin-bottom:20px;
}
.waveform span{
flex:0 0 4px;height:100%;background:var(--accent);animation:wave 0.8s ease-in-out infinite alternate;
}
.waveform span:nth-child(1){animation-delay:0ms}
.waveform span:nth-child(2){animation-delay:100ms}
.waveform span:nth-child(3){animation-delay:200ms}
.waveform span:nth-child(4){animation-delay:300ms}
.waveform span:nth-child(5){animation-delay:400ms}
.waveform span:nth-child(6){animation-delay:300ms}
.waveform span:nth-child(7){animation-delay:200ms}
@keyframes wave{from{height:20%}to{height:100%}}
.conversation-bubble{
padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.5;
margin-bottom:12px;max-width:90%;
}
.conversation-bubble.user{background:var(--el-blue-600);color:#fff;margin-left:auto}
.conversation-bubble.aeye{background:rgba(255,255,255,.12);color:#fff}
.conversation-bubble b{display:block;margin-bottom:4px}
/* Feature Pills */
.feature-pills{
display:flex;gap:0;border-top:var(--rule-w) solid rgba(255,255,255,.1);
}
.feature-pills .pill{
flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
padding:14px 8px;font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
letter-spacing:.06em;color:rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.1);
background:transparent;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);
}
.feature-pills .pill:last-child{border-right:0}
.feature-pills .pill:hover,.feature-pills .pill.active{background:rgba(255,255,255,.08);color:#fff}
.feature-pills .pill i{font-size:20px}
/* Awards Section */
.awards-section{
background:var(--paper-2);border-top:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule);
padding:clamp(28px,4vw,44px) 0;
}
.awards-section .kicker{justify-content:center;margin-bottom:20px}
.awards-grid{
display:flex;flex-wrap:wrap;justify-content:center;gap:0;
border-top:var(--rule-w) solid var(--rule);border-left:var(--rule-w) solid var(--rule);
}
.award-item{
flex:0 0 25%;min-width:200px;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:10px;padding:24px 20px;
border-right:var(--rule-w) solid var(--rule);border-bottom:var(--rule-w) solid var(--rule);
text-align:center;
}
.award-item i{font-size:28px;color:var(--navy-2)}
.award-item span{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
/* ============================================================
DESKTOP READABILITY — relax ch-capped paragraph widths
--------------------------------------------------------------
Many section / card paragraphs use a fixed max-width in ch
to keep line lengths comfortable on phones. On wide desktop
viewports those caps force line breaks while there is plenty
of horizontal room left over (e.g. .custom-ui-block .ui-body p
at 54ch was wrapping a ~96-char English sentence on product
page User Journey connectors). The override below only runs
on ≥901px, so the mobile breakpoints still see the original
caps. The values are tuned per surface so each block keeps a
sensible reading measure on big screens without exploding
into a single 200-character line.
============================================================ */
@media (min-width:901px){
/* Section headings + lede copy */
.sec-head{max-width:92ch}
.faq-item p{max-width:86ch}
/* Hero / page-head lede text (index, about, team, product) */
.hero .lede{max-width:64ch}
.page-head .lede{max-width:64ch}
.hero-desc{max-width:78ch}
.hero-split .hero-content .hero-desc{max-width:78ch}
/* Product page card / feature copy */
.feature p{max-width:84ch}
.feature-compact .row p{max-width:84ch}
.spotlight p{max-width:72ch}
/* The User Journey connectors — root cause of the bug report */
.custom-ui-block .ui-body p{max-width:none}
/* Team + timeline + cta */
.member.lead .lead-bio{max-width:68ch}
.tl-row p{max-width:84ch}
.timeline-content p{max-width:74ch}
.cta p{max-width:74ch}
/* Personal page wrappers — inline max-width on the
container was raised from 62ch → 92ch in each person file so the
long bio paragraphs read at full desktop width. */
}
/* Flow Content Toggle */
.flow-content{display:none}
.flow-content.active{display:block}
/* Feature Visuals (inspired by 9.png) */
.feature-visuals{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;
border-top:var(--rule-w) solid var(--rule);padding-top:40px;
}
.feature-visual-card{
background:var(--paper-2);border:var(--rule-w) solid var(--rule);padding:24px;
}
.feature-visual-card .visual-placeholder{
width:100%;aspect-ratio:4/3;background:var(--navy);
display:grid;place-items:center;margin-bottom:16px;position:relative;
}
.feature-visual-card .visual-placeholder i{font-size:40px;color:var(--accent)}
.feature-visual-card .star-badge{
position:absolute;top:12px;right:12px;width:28px;height:28px;
background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);font-size:14px;
}
.feature-visual-card h4{font-size:var(--text-lg);margin-bottom:6px}
.feature-visual-card p{font-size:14px;color:var(--ink-soft)}
/* Dynamic CTA */
.dynamic-cta{background:var(--navy);border-top:var(--rule-w) solid var(--ink);border-bottom:var(--rule-w) solid var(--ink)}
/* Horizontal padding re-applies the .container gutter here — earlier this
rule set only `padding:... 0` which clobbered .container's `padding:0
var(--gutter)` and let buttons bleed to the screen edge on mobile.
`box-sizing:border-box` keeps the 820px max-width honest when the
horizontal padding is large on tablet (var(--gutter)=26px → 52px total). */
.dynamic-cta .inner{padding:clamp(56px,8vw,96px) var(--gutter);text-align:center;max-width:820px;margin:0 auto;box-sizing:border-box;width:100%}
.dynamic-cta .cta-label{
font-family:var(--font-mono);font-size:14px;font-weight:700;text-transform:uppercase;
letter-spacing:.12em;color:var(--accent);display:flex;align-items:center;justify-content:center;
gap:10px;margin-bottom:20px;
}
.dynamic-cta h2{color:#fff;font-size:clamp(28px,5vw,48px);line-height:1.2;margin-top:0}
/* `width:100% + box-sizing:border-box + max-width:100%` guarantee that when
.cta-actions goes single-column on mobile and buttons stretch to 100%
width, the row stays inside the .inner safe area and never overflows
the viewport or touches the screen edge. */
.dynamic-cta .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:36px;width:100%;max-width:100%;box-sizing:border-box}
.dynamic-cta .btn-primary{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.dynamic-cta .btn-primary:hover{background:#FFD65C}
.dynamic-cta .btn-secondary{background:transparent;color:#fff;border-color:#fff}
.dynamic-cta .btn-secondary:hover{background:rgba(255,255,255,.1)}
/* Timeline */
.timeline{border-top:var(--rule-w) solid var(--rule)}
.timeline-item{
display:grid;grid-template-columns:120px 1fr;gap:24px;padding:24px 0;
border-bottom:var(--rule-w) solid var(--rule);align-items:start;
}
.timeline-item:last-child{border-bottom:0}
.timeline-marker{
font-family:var(--font-mono);font-weight:700;font-size:var(--text-md);color:var(--navy-2);
letter-spacing:.02em;padding-top:4px;
}
.timeline-content h4{font-size:var(--text-xl);margin-bottom:6px}
.timeline-content p{color:var(--ink-soft);max-width:52ch}
/* FAQ Enhancement */
.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}
/* Stat Highlight */
.stat-highlight{margin-top:32px}
.stat-card{
background:var(--paper-2);border:var(--rule-w) solid var(--rule);padding:28px 26px;max-width:600px;
}
.stat-card .lbl{font-size:var(--text-lg);color:var(--ink)}
/* Media Placeholder */
.media-placeholder{
margin-top:16px;padding:20px;background:var(--paper-2);border:var(--rule-w) dashed var(--rule);
display:flex;align-items:center;gap:12px;color:var(--ink-soft);font-family:var(--font-mono);
font-size:12px;text-transform:uppercase;letter-spacing:.06em;
}
/* Button bolder */
.btn-bolder{font-weight:800}
/* Story Placeholder */
.story-placeholder{
background:var(--paper-2);border:var(--rule-w) dashed var(--rule);padding:48px 32px;
text-align:center;margin-top:24px;
}
.story-placeholder .placeholder-icon{
display:inline-grid;place-items:center;width:56px;height:56px;
background:var(--navy);color:var(--accent);font-size:24px;margin-bottom:16px;
}
.story-placeholder .placeholder-text{
font-family:var(--font-display);font-size:var(--text-lg);color:var(--ink-soft);
max-width:48ch;margin:0 auto;line-height:1.5;
}
html[data-contrast="high"] .story-placeholder{background:#fff}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
html.js-anim .reveal{opacity:1;transform:none;transition:none}
.phone .wave span{animation:none;height:60%}
.trust .award-slider .award-track{animation:none;transform:none}
.trust .award-set[aria-hidden="true"]{display:none}
.btn:hover{transform:none;box-shadow:none}
*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}