/* Self-hosted fonts — Cormorant Garamond + Outfit (latin, latin-ext).
Generated from Google Fonts woff2; swap display; only needed
subsets/weights download via unicode-range. */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('fonts/cormorant-garamond-500-italic-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('fonts/cormorant-garamond-500-italic-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-300-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/cormorant-garamond-300-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/cormorant-garamond-500-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/cormorant-garamond-500-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/cormorant-garamond-600-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('fonts/cormorant-garamond-600-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url('fonts/outfit-200-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url('fonts/outfit-200-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/outfit-300-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('fonts/outfit-300-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/outfit-400-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('fonts/outfit-400-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/outfit-500-normal-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('fonts/outfit-500-normal-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================
SELEQT — Stylesheet (v2)
Modern boutique × private wealth
============================================ */
:root {
/* Brand colors — preserved */
--navy: #0a1a35; /* slightly lifted so it reads better on cream */
--navy-deep: #060e1c; /* darkest accent, for headlines on light bg */
--navy-mid: #0a1426;
--navy-light: #0f1d36;
--navy-accent: #15264a;
--ink: #020812;
--gold: #b8924e; /* nudged slightly deeper for better contrast on cream */
--gold-light: #d4b06a;
--gold-deep: #8a6a32;
--gold-dim: rgba(184, 146, 78, 0.32);
--gold-faint: rgba(184, 146, 78, 0.08);
/* PAPER (new light theme) — primary surface */
--paper: #f5f1e8; /* warm cream */
--paper-soft: #efe9dc; /* recessed cards */
--paper-deep: #e6dfce; /* dividers and accents on paper */
--ink-strong: #0a1a35; /* primary text on paper */
--ink-soft: rgba(10, 26, 53, 0.62); /* secondary text on paper */
--ink-faint: rgba(10, 26, 53, 0.42);
--ink-line: rgba(10, 26, 53, 0.12);
--ink-line-strong: rgba(10, 26, 53, 0.22);
/* Legacy dim/ghost (still used by dark surfaces like contact section) */
--white: #f4f1ea;
--white-dim: rgba(244, 241, 234, 0.62);
--white-faint: rgba(244, 241, 234, 0.12);
--white-ghost: rgba(244, 241, 234, 0.04);
--border: rgba(10, 26, 53, 0.10);
--border-strong: rgba(10, 26, 53, 0.22);
--border-gold: rgba(184, 146, 78, 0.45);
--font-display: 'Cormorant Garamond', serif;
--font-body: 'Outfit', sans-serif;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--rule: 1px solid var(--border);
--rule-strong: 1px solid var(--border-strong);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: var(--paper);
color: var(--ink-strong);
font-family: var(--font-body);
font-weight: 300;
line-height: 1.7;
overflow-x: hidden;
cursor: none;
text-rendering: optimizeLegibility;
}
::selection {
background: rgba(200, 169, 110, 0.85);
color: var(--white);
text-shadow: 0 0 16px rgba(232, 201, 138, 0.85);
}
::-moz-selection {
background: rgba(200, 169, 110, 0.85);
color: var(--white);
text-shadow: 0 0 16px rgba(232, 201, 138, 0.85);
}
/* ── Custom Cursor ── */
.cursor {
width: 6px; height: 6px;
background: var(--gold);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background 0.3s;
}
.cursor-ring {
width: 28px; height: 28px;
border: 1px solid rgba(184, 146, 78, 0.5);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), border-color 0.3s;
}
body.cursor-hover .cursor { width: 10px; height: 10px; background: var(--gold-light); }
body.cursor-hover .cursor-ring { width: 44px; height: 44px; border-color: var(--gold); }
a, button { cursor: none; }
@media (max-width: 900px), (hover: none) {
body { cursor: auto; }
.cursor, .cursor-ring { display: none; }
a, button { cursor: pointer; }
}
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }
/* ============================================
LAYOUT
============================================ */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 48px;
}
.container-wide {
max-width: 1440px;
margin: 0 auto;
padding: 0 48px;
}
@media (max-width: 768px) {
.container, .container-wide { padding: 0 24px; }
}
/* ============================================
TYPOGRAPHY PRIMITIVES
============================================ */
.eyebrow {
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 14px;
}
.eyebrow::before {
content: '';
width: 28px;
height: 1px;
background: var(--gold);
opacity: 0.7;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 5.2vw, 4.2rem);
font-weight: 300;
line-height: 1.08;
color: var(--navy);
letter-spacing: -0.01em;
}
.section-title em { font-style: italic; color: var(--gold); font-weight: 300; }
/* ============================================
NAVBAR
============================================ */
#navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
transition: background 0.5s, backdrop-filter 0.5s, border-color 0.5s;
border-bottom: 1px solid transparent;
}
/* Default = on hero (dark) */
#navbar .logo { color: var(--white); }
#navbar .nav-links a { color: rgba(244, 241, 234, 0.92); }
#navbar .nav-links a:hover { color: var(--white); }
#navbar .hamburger span { background: var(--white); }
/* Scrolled past hero — paper mode */
#navbar.scrolled {
background: rgba(245, 241, 232, 0.82);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border-bottom-color: var(--ink-line);
}
#navbar.scrolled .logo { color: var(--navy); }
#navbar.scrolled .nav-links a { color: var(--navy); }
#navbar.scrolled .nav-links a:hover { color: var(--gold); }
#navbar.scrolled .hamburger span { background: var(--navy); }
#navbar.scrolled .nav-cta {
color: var(--gold) !important;
border-color: var(--gold-dim) !important;
}
#navbar.scrolled .nav-cta:hover {
background: var(--gold);
color: var(--white) !important;
border-color: var(--gold) !important;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 48px;
max-width: 1600px;
margin: 0 auto;
transition: padding 0.4s var(--ease-out);
}
#navbar.scrolled .nav-inner { padding: 14px 48px; }
.logo {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.22em;
text-decoration: none;
transition: color 0.3s, letter-spacing 0.4s var(--ease-out);
}
.logo:hover { color: var(--gold) !important; letter-spacing: 0.28em; }
.nav-links {
display: flex;
align-items: center;
gap: 44px;
}
.nav-links a {
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
transition: color 0.3s, letter-spacing 0.3s;
position: relative;
padding: 4px 0;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -2px; left: 0;
width: 0; height: 1px;
background: var(--gold);
transition: width 0.4s var(--ease-out);
}
.nav-links a:hover::after { width: 100%; }
.nav-cta {
padding: 11px 22px !important;
border: 1px solid var(--gold) !important;
color: var(--gold) !important;
font-weight: 500 !important;
letter-spacing: 0.16em !important;
transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s !important;
}
.nav-cta:hover {
background: var(--gold);
border-color: var(--gold) !important;
color: var(--navy) !important;
box-shadow: 0 0 24px -4px rgba(200, 169, 110, 0.55);
}
.nav-cta::after { display: none !important; }
.hamburger { display: none; background: none; border: none; padding: 4px; }
.hamburger span {
display: block; width: 22px; height: 1px;
margin: 6px 0;
transition: transform 0.3s, opacity 0.3s, background 0.3s;
}
.mobile-menu {
display: none;
flex-direction: column;
padding: 24px 28px 32px;
background: rgba(6, 14, 28, 0.98);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(244, 241, 234, 0.10);
gap: 22px;
}
.mobile-menu a {
color: rgba(244, 241, 234, 0.92);
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 8px 0;
border-bottom: 1px solid rgba(244, 241, 234, 0.06);
transition: color 0.3s, padding-left 0.3s var(--ease-out);
}
.mobile-menu a:last-child {
border-bottom: none;
color: var(--gold);
margin-top: 8px;
padding: 14px 0;
border: 1px solid var(--gold);
text-align: center;
}
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu a:not(:last-child):hover { padding-left: 8px; }
.mobile-menu.open { display: flex; }
/* When navbar is in scrolled (paper) state, mobile menu also flips */
#navbar.scrolled .mobile-menu {
background: rgba(245, 241, 232, 0.98);
border-top-color: var(--ink-line);
}
#navbar.scrolled .mobile-menu a {
color: var(--navy);
border-bottom-color: var(--ink-line);
}
#navbar.scrolled .mobile-menu a:hover { color: var(--gold); }
#navbar.scrolled .mobile-menu a:last-child {
color: var(--gold);
border-color: var(--gold);
}
@media (max-width: 900px) {
.nav-links { display: none; }
.hamburger { display: block; }
.nav-inner { padding: 18px 24px; }
#navbar.scrolled .nav-inner { padding: 14px 24px; }
}
/* ============================================
BUTTONS
============================================ */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
background: var(--gold);
color: var(--navy);
font-family: var(--font-body);
font-size: 0.76rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid var(--gold);
border-radius: 0;
transition: background 0.3s, color 0.3s, transform 0.4s var(--ease-out), box-shadow 0.4s, padding 0.4s var(--ease-out);
position: relative;
overflow: hidden;
}
.btn-primary::after {
content: '→';
font-size: 0.95rem;
transition: transform 0.4s var(--ease-out);
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 18px 48px rgba(184, 146, 78, 0.28); }
.btn-primary:hover::after { transform: translateX(4px); }
.btn-primary.full-width { width: 100%; justify-content: center; }
/* Ghost button — adapts to surface via currentColor */
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
background: transparent;
color: var(--white);
font-family: var(--font-body);
font-size: 0.76rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid rgba(244, 241, 234, 0.25);
transition: border-color 0.3s, color 0.3s, background 0.3s, transform 0.4s var(--ease-out);
}
.btn-ghost::after {
content: '';
width: 16px; height: 1px;
background: currentColor;
transition: width 0.4s var(--ease-out);
opacity: 0.6;
}
.btn-ghost:hover {
border-color: var(--gold);
color: var(--gold);
transform: translateY(-2px);
}
.btn-ghost:hover::after { width: 28px; opacity: 1; }
/* Ghost button on paper */
.btn-ghost.on-paper {
color: var(--navy);
border-color: var(--ink-line-strong);
}
.btn-ghost.on-paper:hover { color: var(--gold); border-color: var(--gold); }
/* ============================================
HERO
============================================ */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 180px 0 140px;
background: var(--ink);
color: var(--white);
}
.hero .hero-title { color: var(--white); }
.hero .hero-title em.italic { color: var(--gold); }
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-glow {
position: absolute;
/* Centered horizontally, aligned to the watermark vertically */
top: 38%; left: 50%;
transform: translate(-50%, -50%);
width: 130vw; max-width: 1800px; height: 1100px;
/* Wide elliptical halo that envelops the SELEQT wordmark */
background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(26, 58, 107, 0.55) 0%, rgba(26, 58, 107, 0.28) 30%, rgba(26, 58, 107, 0.08) 55%, transparent 75%);
filter: blur(50px);
pointer-events: none;
}
.hero-glow-2 {
position: absolute;
/* A subtler warm gold halo just below the watermark for depth */
top: 38%; left: 50%;
transform: translate(-50%, -50%);
width: 110vw; max-width: 1400px; height: 800px;
background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(200, 169, 110, 0.10) 0%, rgba(200, 169, 110, 0.04) 40%, transparent 70%);
filter: blur(80px);
pointer-events: none;
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(244,241,234,0.013) 1px, transparent 1px),
linear-gradient(90deg, rgba(244,241,234,0.013) 1px, transparent 1px);
background-size: 96px 96px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 12%, transparent 64%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 12%, transparent 64%);
}
.hero-wordmark {
position: absolute;
/* Watermark sits in the upper third — just above the title */
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-display);
font-weight: 500;
font-size: 22vw;
line-height: 1;
letter-spacing: 0.08em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(244, 241, 234, 0.10);
pointer-events: none;
user-select: none;
white-space: nowrap;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
padding: 0 48px;
width: 100%;
}
.hero-meta {
display: flex;
align-items: center;
gap: 16px;
font-size: 0.66rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--white-dim);
margin-bottom: 48px;
}
.hero-meta .dot { width: 4px; height: 4px; background: var(--gold); border-radius: 50%; }
.hero-meta .accent { color: var(--gold); }
.hero-title {
font-family: var(--font-display);
font-size: clamp(3.2rem, 9vw, 8rem);
font-weight: 300;
line-height: 0.98;
margin-bottom: 40px;
letter-spacing: -0.02em;
color: var(--white);
}
.hero-title .line { display: block; }
.hero-title .italic { font-style: italic; color: var(--gold); font-weight: 300; }
.hero-sub {
font-size: clamp(1rem, 1.4vw, 1.15rem);
font-weight: 300;
color: var(--white-dim);
max-width: 580px;
line-height: 1.7;
margin-bottom: 56px;
}
.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 100px;
}
.hero-credentials {
display: flex;
gap: 64px;
flex-wrap: wrap;
padding-top: 32px;
border-top: 1px solid var(--border);
max-width: 720px;
}
.hero-cred {
display: flex;
flex-direction: column;
gap: 6px;
}
.hero-cred-label {
font-size: 0.62rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold);
}
.hero-cred-value {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 400;
color: var(--white);
font-style: italic;
}
.hero-scroll-hint {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 2;
opacity: 0.5;
}
.hero-scroll-hint span {
font-size: 0.56rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--white-dim);
}
.scroll-line {
width: 1px;
height: 28px;
background: linear-gradient(to bottom, var(--gold), transparent);
animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform: scaleY(1); transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
/* ── Centered hero variant ── */
.hero-center {
padding: 0;
text-align: center;
position: relative;
min-height: 100vh;
display: block;
}
.hero-center .hero-content {
padding: 0;
position: relative;
min-height: 100vh;
width: 100%;
max-width: 100%;
}
.hero-content-center {
text-align: center;
position: relative;
width: 100%;
min-height: 100vh;
}
/* Title sits below the watermark */
.hero-content-center .hero-title-center {
position: absolute;
top: 64%;
left: 0;
right: 0;
transform: translateY(-50%);
margin: 0 auto;
font-size: clamp(2.4rem, 6.6vw, 6.4rem);
line-height: 1.04;
letter-spacing: -0.022em;
text-align: center;
}
.hero-title-center .line { display: block; }
.hero-title-center em.italic {
font-style: italic;
color: var(--gold);
font-weight: 300;
}
/* Buttons sit below the title */
.hero-actions-center {
position: absolute;
top: 78%;
left: 0;
right: 0;
margin-top: 0;
justify-content: center;
display: flex;
gap: 16px;
flex-wrap: wrap;
}
/* One-line variant: title scales linearly with viewport so it ALWAYS fits on a single line.
Empirically: at 4.6vw the text width stays under ~70% of viewport at every screen size. */
.hero-title.hero-title-oneline {
max-width: none;
font-size: 4.6vw;
line-height: 1.05;
letter-spacing: -0.015em;
white-space: nowrap;
padding: 0 16px;
}
.hero-title.hero-title-oneline .line { display: inline; }
.hero-title.hero-title-oneline em.italic {
font-style: italic;
color: var(--gold);
font-weight: 300;
}
.hero-actions-center .btn-ghost { /* keep visual style consistent */ }
@media (max-width: 900px) {
/* MOBILE HERO — redesigned from scratch, not scaled from desktop.
Composition: large SELEQT watermark sits constrained at the top of hero,
title stacks word-by-word in the middle, buttons sit comfortably below. */
.hero-center {
padding: 0;
display: block;
position: relative;
min-height: 100svh;
min-height: 100vh;
}
.hero-center .hero-content,
.hero-center .hero-content-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 48px);
max-width: 460px;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 72px;
min-height: 0;
z-index: 2;
}
/* Title — stack on three lines for visual rhythm.
Line breaks come from CSS, not the markup. */
.hero-content-center .hero-title-center,
.hero-title.hero-title-oneline {
position: relative;
top: auto;
left: auto;
right: auto;
transform: none;
margin: 0;
padding: 0;
white-space: normal;
font-size: clamp(2.2rem, 9vw, 3rem);
line-height: 1.15;
letter-spacing: -0.018em;
max-width: 100%;
text-align: center;
text-wrap: balance;
}
.hero-title.hero-title-oneline .line { display: inline; }
/* Make the gold italic word break onto its own line, magazine-style */
.hero-title.hero-title-oneline em.italic {
display: block;
line-height: 1.05;
margin: 4px 0;
font-size: 1.15em;
}
/* Buttons — wider tap targets, stacked, premium spacing */
.hero-actions-center {
position: relative;
top: auto;
left: auto;
right: auto;
transform: none;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: 320px;
}
.hero-actions-center .btn-primary,
.hero-actions-center .btn-ghost {
width: 100%;
justify-content: center;
padding: 18px 24px;
font-size: 0.7rem;
letter-spacing: 0.2em;
}
/* WATERMARK — sized to fit the screen, positioned behind the title */
.hero-wordmark {
top: 47%;
font-size: 16vw;
letter-spacing: 0.12em;
opacity: 0.5;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: rgba(244, 241, 234, 0.42);
}
/* Glow halos — wider, softer behind everything */
.hero-glow,
.hero-glow-2 {
top: 50%;
width: 200vw;
max-width: none;
height: 700px;
}
/* Hide scroll cue on mobile — there's no room and the page is obviously scrollable */
.hero-scroll-hint {
display: none;
}
}
@media (max-width: 540px) {
.hero-center .hero-content,
.hero-center .hero-content-center {
width: calc(100% - 40px);
gap: 44px;
}
.hero-content-center .hero-title-center,
.hero-title.hero-title-oneline {
font-size: clamp(2rem, 9.5vw, 2.6rem);
}
.hero-wordmark { font-size: 13vw; letter-spacing: 0.18em; }
}
@media (max-width: 768px) {
.hero { padding: 140px 0 100px; }
.hero-credentials { gap: 32px; }
.hero-cred-value { font-size: 0.95rem; }
.hero-actions { margin-bottom: 64px; }
.hero-scroll-hint { display: none; }
}
/* ============================================
MARQUEE
============================================ */
.marquee-wrap {
overflow: hidden;
border-top: 1px solid var(--ink-line);
border-bottom: 1px solid var(--ink-line);
padding: 22px 0;
background: var(--paper-soft);
}
.marquee-track {
display: flex;
/* NB: do NOT use flex `gap` here. `gap` only inserts space BETWEEN items,
not after the last one, which makes the two copies of the track
asymmetrical (an internal gap between copies but no trailing gap after
copy 2). The animation translates 0 -> -50% of track width and that ends
up half-a-gap off from the start of copy 2, causing a visible jump on
each loop. Using margin-right on every item makes the spacing symmetric
so -50% lands exactly at the start of copy 2. */
white-space: nowrap;
animation: marqueeScroll 14s linear infinite;
}
.marquee-track span {
font-size: 1.05rem;
font-weight: 300;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ink-soft);
display: inline-block;
margin-right: 56px;
/* Short transition for the JS-driven cursor parallax (see main.js). Was
previously 0.28s — felt sluggish at high cursor velocities. 0.16s keeps
the smoothing without lag. */
transition: transform 0.16s var(--ease-out), color 0.16s var(--ease-out);
will-change: transform;
}
.marquee-track .dot {
color: var(--gold);
/* The dot doesn't participate in the cursor parallax — leaves it as a steady
anchor between the moving labels. */
transition: none;
}
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ============================================
ABOUT
============================================ */
.about-strip {
padding: 160px 0 100px;
background: var(--paper);
position: relative;
color: var(--ink-strong);
}
.about-header {
text-align: center;
margin-bottom: 72px;
}
.about-title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4.6vw, 3.6rem);
font-weight: 300;
letter-spacing: -0.005em;
color: var(--navy);
line-height: 1;
display: inline-block;
padding-bottom: 24px;
position: relative;
}
.about-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 1px;
background: var(--gold);
}
.about-body {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.about-body p {
color: var(--ink-soft);
margin-bottom: 24px;
font-size: 1.02rem;
line-height: 1.9;
font-weight: 300;
}
.about-body p:last-child { margin-bottom: 0; }
.about-cta-wrap {
margin-top: 40px;
}
.about-cta {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid var(--gold-dim);
padding-bottom: 8px;
transition: gap 0.4s var(--ease-out), border-color 0.3s;
}
.about-cta-arrow {
display: inline-block;
transition: transform 0.4s var(--ease-out);
}
.about-cta:hover { gap: 22px; border-color: var(--gold); }
.about-cta:hover .about-cta-arrow { transform: translateX(6px); }
@media (max-width: 900px) {
.about-strip { padding: 100px 0; }
.about-header { margin-bottom: 56px; }
.about-body { text-align: left; }
}
/* ============================================
STATS STRIP
============================================ */
.stats-strip {
background: var(--paper);
padding: 0 0 100px;
position: relative;
}
.stats-strip::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80px;
height: 1px;
background: var(--gold);
opacity: 0.5;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
max-width: 1100px;
margin: 0 auto;
padding-top: 80px;
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 0 24px;
text-align: center;
border-left: 1px solid var(--ink-line);
position: relative;
}
.stat:first-child { border-left: none; }
.stat-num {
font-family: var(--font-display);
font-size: clamp(2.2rem, 3.8vw, 3.2rem);
font-weight: 300;
color: var(--navy);
line-height: 1;
letter-spacing: -0.01em;
}
.stat-label {
font-family: var(--font-body);
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-soft);
}
@media (max-width: 900px) {
/* See authoritative mobile stylesheet at end of file */
}
/* ============================================
SERVICES — EDITORIAL LIST
============================================ */
.services {
padding: 160px 0 180px;
background: var(--navy-mid);
position: relative;
overflow: hidden;
}
.services::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.services-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: end;
margin-bottom: 100px;
}
.services-header .section-title { max-width: 580px; }
.services-intro {
font-size: 1rem;
color: var(--white-dim);
line-height: 1.8;
max-width: 460px;
padding-bottom: 8px;
}
.services-list {
display: flex;
flex-direction: column;
border-top: var(--rule-strong);
}
.service-row {
display: grid;
grid-template-columns: 110px 1fr auto;
gap: 48px;
align-items: center;
padding: 40px 16px;
border-bottom: var(--rule);
text-decoration: none;
color: var(--white);
position: relative;
transition: padding 0.5s var(--ease-out), background 0.4s;
}
.service-row::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 0;
background: linear-gradient(90deg, var(--gold-faint), transparent 80%);
transition: width 0.5s var(--ease-out);
pointer-events: none;
}
.service-row:hover { padding-left: 32px; padding-right: 0; }
.service-row:hover::before { width: 100%; }
.service-num {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--gold);
position: relative;
z-index: 1;
}
.service-num::after {
content: '';
display: inline-block;
width: 32px;
height: 1px;
background: var(--gold);
opacity: 0.4;
margin-left: 14px;
vertical-align: middle;
transition: width 0.5s var(--ease-out), opacity 0.4s;
}
.service-row:hover .service-num::after { width: 56px; opacity: 1; }
.service-body {
display: grid;
grid-template-columns: minmax(280px, 0.9fr) 1.2fr;
gap: 48px;
align-items: baseline;
position: relative;
z-index: 1;
}
.service-name {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.6vw, 2.15rem);
font-weight: 300;
line-height: 1.15;
color: var(--white);
letter-spacing: -0.005em;
transition: color 0.4s, transform 0.5s var(--ease-out);
}
.service-row:hover .service-name { color: var(--gold); }
.service-desc {
font-size: 0.92rem;
color: var(--white-dim);
line-height: 1.7;
max-width: 460px;
}
.service-arrow {
position: relative;
z-index: 1;
width: 48px; height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
color: var(--white-dim);
font-size: 1rem;
transition: all 0.4s var(--ease-out);
}
.service-row:hover .service-arrow {
border-color: var(--gold);
background: var(--gold);
color: var(--navy);
transform: rotate(-45deg);
}
@media (max-width: 900px) {
.services { padding: 100px 0 120px; }
.services-header { grid-template-columns: 1fr; gap: 32px; margin-bottom: 60px; }
.service-row { grid-template-columns: 60px 1fr 40px; gap: 24px; padding: 32px 8px; }
.service-row:hover { padding-left: 16px; }
.service-body { grid-template-columns: 1fr; gap: 14px; }
.service-num::after { display: none; }
.service-arrow { width: 40px; height: 40px; font-size: 0.85rem; }
}
/* ============================================
SERVICES — VERTICAL CAROUSEL
============================================ */
.services-carousel {
/* Full-section gradient from paper cream to deep ink navy.
Cleaner path that skips a muddy grey middle. */
background: linear-gradient(to bottom,
var(--paper) 0%,
var(--paper) 8%,
#e6dccb 22%,
#b8b3a8 42%,
#4a5575 62%,
#1a2647 80%,
var(--ink) 94%,
var(--ink) 100%);
padding: 120px 0 0;
color: var(--ink-strong);
position: relative;
}
.services-carousel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--ink-line);
}
.sc-header {
text-align: center;
margin: 0 auto 56px;
max-width: 880px;
position: relative;
padding-bottom: 24px;
}
.sc-title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 4.6vw, 3.6rem);
font-weight: 300;
letter-spacing: -0.005em;
color: var(--navy);
line-height: 1;
display: inline-block;
padding-bottom: 24px;
position: relative;
}
.sc-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 1px;
background: var(--gold);
}
.sc-stage {
position: relative;
display: block;
max-width: 920px;
margin: 0 auto;
}
/* Left progress index — absolutely positioned so it doesn't shift the list */
.sc-index {
position: absolute;
top: 0;
left: -130px;
bottom: 0;
width: 100px;
pointer-events: none;
}
.sc-index-inner {
position: sticky;
top: 50%;
transform: translateY(-50%);
height: 320px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 18px;
}
.sc-index-track {
position: relative;
width: 1px;
height: 200px;
background: rgba(255, 255, 255, 0.25);
margin-bottom: 20px;
mix-blend-mode: difference;
}
.sc-index-fill {
position: absolute;
top: 0; left: 0; right: 0;
height: 0%;
background: var(--gold);
transition: height 0.5s var(--ease-out);
}
.sc-index-current {
font-family: var(--font-display);
font-size: 2.2rem;
font-weight: 300;
color: var(--gold);
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
transition: color 0.4s;
}
.sc-index-total {
font-family: var(--font-display);
font-size: 1rem;
color: rgba(244, 241, 234, 0.5);
font-variant-numeric: tabular-nums;
mix-blend-mode: difference;
}
/* Carousel list */
.sc-list {
display: flex;
flex-direction: column;
}
.sc-item {
position: relative;
display: block;
text-decoration: none;
color: inherit;
padding: 70px 48px 70px 60px;
margin: 0 -48px 0 -60px;
opacity: 0.30;
filter: blur(0.5px);
transform: scale(0.985);
transform-origin: left center;
transition:
opacity 0.65s var(--ease-out),
filter 0.65s var(--ease-out),
transform 0.65s var(--ease-out),
color 0.5s var(--ease-out);
}
/* Each card inherits the background gradient by being transparent */
.sc-item { background: transparent; }
/* Subtle divider between rows */
.sc-item + .sc-item::before {
content: '';
position: absolute;
top: 0; left: 60px; right: 48px;
height: 1px;
background: rgba(10, 26, 53, 0.10);
z-index: 1;
}
/* For the last (darkest) card, divider becomes light */
.sc-item[data-i="3"] + .sc-item::before {
background: rgba(244, 241, 234, 0.10);
}
/* Active-state backing — gives the focused card a stable surface
regardless of where the gradient sits behind it. */
.sc-item::after {
content: '';
position: absolute;
inset: 18px 0 18px 0;
background: transparent;
z-index: 0;
pointer-events: none;
transition: background 0.5s var(--ease-out), backdrop-filter 0.5s var(--ease-out);
}
.sc-item-inner { position: relative; z-index: 1; }
/* Light-zone cards (0, 1, 2): cream backing when active */
.sc-item[data-i="0"].is-active::after,
.sc-item[data-i="1"].is-active::after,
.sc-item[data-i="2"].is-active::after {
background: rgba(245, 241, 232, 0.65);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
}
/* Dark-zone card (3): navy backing when active */
.sc-item[data-i="3"].is-active::after {
background: rgba(6, 14, 28, 0.55);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
}
/* Lighter version for "near" cards so they still get some surface */
.sc-item[data-i="0"].is-near::after,
.sc-item[data-i="1"].is-near::after,
.sc-item[data-i="2"].is-near::after {
background: rgba(245, 241, 232, 0.25);
}
.sc-item[data-i="3"].is-near::after {
background: rgba(6, 14, 28, 0.25);
}
.sc-item.is-active {
opacity: 1;
filter: none;
transform: scale(1);
}
.sc-item.is-near {
opacity: 0.7;
filter: blur(0px);
}
/* Card text colors — keep cards 0-2 on dark text since they get a cream surface,
only card 3 gets light text on its navy surface */
.sc-item[data-i="0"] .sc-name,
.sc-item[data-i="1"] .sc-name,
.sc-item[data-i="2"] .sc-name { color: var(--navy); }
.sc-item[data-i="3"] .sc-name { color: var(--white); }
.sc-item[data-i="0"] .sc-desc,
.sc-item[data-i="1"] .sc-desc,
.sc-item[data-i="2"] .sc-desc { color: var(--ink-soft); }
.sc-item[data-i="3"] .sc-desc { color: var(--white-dim); }
.sc-item-inner {
display: grid;
grid-template-columns: 80px 1fr;
gap: 36px;
align-items: baseline;
}
.sc-num {
font-family: var(--font-display);
font-size: 0.85rem;
letter-spacing: 0.22em;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 14px;
padding-top: 18px;
}
.sc-num::after {
content: '';
display: inline-block;
width: 24px;
height: 1px;
background: var(--gold);
opacity: 0.5;
transition: width 0.5s var(--ease-out), opacity 0.4s;
}
.sc-item.is-active .sc-num::after { width: 44px; opacity: 1; }
.sc-content { max-width: 700px; }
.sc-name {
font-family: var(--font-display);
font-size: clamp(2rem, 4.2vw, 3.4rem);
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.018em;
margin-bottom: 22px;
transition: color 0.6s var(--ease-out);
}
.sc-name em { font-style: italic; color: var(--gold); font-weight: 300; }
.sc-desc {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.75;
margin-bottom: 26px;
max-width: 580px;
transition: color 0.6s var(--ease-out);
}
.sc-cta {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold);
border-bottom: 1px solid transparent;
padding-bottom: 6px;
transition: gap 0.4s var(--ease-out), border-color 0.4s;
}
.sc-item.is-active .sc-cta { border-color: var(--gold-dim); }
.sc-cta-arrow { transition: transform 0.4s var(--ease-out); display: inline-block; }
.sc-item:hover .sc-cta { gap: 22px; border-color: var(--gold); }
.sc-item:hover .sc-cta-arrow { transform: translateX(6px); }
@media (max-width: 900px) {
.services-carousel { padding: 100px 0 0; }
.sc-header { margin-bottom: 40px; padding-bottom: 16px; }
.sc-stage { display: block; max-width: 100%; }
.sc-index { display: none; }
.sc-item {
padding: 48px 24px;
margin: 0 -24px;
opacity: 1;
filter: none;
transform: none;
}
/* On mobile, all cards are visible — give every card the proper backing
surface. Use solid opaque colors to mask the gradient behind. */
.sc-item[data-i="0"]::after,
.sc-item[data-i="1"]::after,
.sc-item[data-i="2"]::after {
background: var(--paper) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
inset: 0 !important;
}
.sc-item[data-i="3"]::after {
background: var(--ink) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
inset: 0 !important;
}
.sc-item + .sc-item::before { left: 24px; right: 24px; z-index: 2; }
.sc-item-inner { grid-template-columns: 60px 1fr; gap: 18px; }
.sc-num { padding-top: 8px; }
.sc-num::after { display: none; }
.sc-name { font-size: clamp(1.6rem, 7vw, 2.2rem); }
.sc-item .sc-cta { border-color: var(--gold-dim); }
}
.statement-band {
padding: 140px 0;
background: var(--navy);
position: relative;
overflow: hidden;
text-align: center;
}
.statement-band::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 80%; max-width: 900px; height: 600px;
background: radial-gradient(ellipse at center, rgba(200,169,110,0.06) 0%, transparent 70%);
pointer-events: none;
}
.statement {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.6rem);
font-weight: 300;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--white);
max-width: 1100px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.statement em { font-style: italic; color: var(--gold); }
.statement-attribution {
margin-top: 48px;
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--white-dim);
position: relative;
z-index: 1;
}
/* ============================================
PRINCIPLES (replaces "Why SELEQT")
============================================ */
.principles {
padding: 160px 0;
background: var(--navy-mid);
position: relative;
overflow: hidden;
}
.principles-header { margin-bottom: 100px; max-width: 720px; }
.principles-header .section-title { margin-top: 20px; }
.principles-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
background: var(--border);
}
.principle {
background: var(--navy-mid);
padding: 56px 48px;
position: relative;
transition: background 0.4s;
}
.principle:hover { background: var(--navy-light); }
.principle::before {
content: '';
position: absolute;
top: 56px; left: 0;
width: 2px; height: 32px;
background: var(--gold);
transform: scaleY(0.5);
transform-origin: top;
transition: transform 0.5s var(--ease-out);
}
.principle:hover::before { transform: scaleY(1); }
.principle-num {
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.18em;
color: var(--gold);
margin-bottom: 28px;
}
.principle h3 {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 300;
line-height: 1.2;
margin-bottom: 18px;
color: var(--white);
letter-spacing: -0.005em;
}
.principle h3 em { font-style: italic; color: var(--gold); }
.principle p {
font-size: 0.94rem;
color: var(--white-dim);
line-height: 1.8;
max-width: 460px;
}
@media (max-width: 900px) {
.principles { padding: 100px 0; }
.principles-header { margin-bottom: 56px; }
.principles-grid { grid-template-columns: 1fr; }
.principle { padding: 40px 28px; }
.principle::before { top: 40px; }
}
/* ============================================
WHO WE SERVE
============================================ */
.serve {
padding: 160px 0;
background: var(--navy);
}
.serve-header { margin-bottom: 80px; max-width: 720px; }
.serve-header .section-title { margin-top: 20px; }
.serve-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.serve-col {
padding: 48px 40px 48px 0;
border-left: var(--rule);
padding-left: 40px;
position: relative;
}
.serve-col:first-child { border-left: none; padding-left: 0; }
.serve-col-tag {
font-size: 0.66rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 28px;
}
.serve-col h3 {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 300;
font-style: italic;
line-height: 1.2;
margin-bottom: 20px;
color: var(--white);
}
.serve-col p {
font-size: 0.92rem;
color: var(--white-dim);
line-height: 1.8;
}
.serve-col ul {
list-style: none;
margin-top: 28px;
}
.serve-col li {
font-size: 0.85rem;
color: var(--white-dim);
padding: 10px 0;
border-top: var(--rule);
display: flex;
align-items: center;
gap: 12px;
}
.serve-col li::before {
content: '';
width: 4px; height: 4px;
background: var(--gold);
border-radius: 50%;
flex-shrink: 0;
}
@media (max-width: 900px) {
.serve { padding: 100px 0; }
.serve-grid { grid-template-columns: 1fr; }
.serve-col { border-left: none; padding-left: 0; padding: 36px 0; border-top: var(--rule); }
.serve-col:first-child { border-top: none; padding-top: 0; }
}
/* ============================================
CONTACT — kept dark navy for closing bookend
============================================ */
.contact-section {
padding: 100px 0 160px;
background: var(--ink);
position: relative;
color: var(--white);
}
.contact-section .section-title { color: var(--white); }
.contact-section .section-title em { color: var(--gold); }
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 120px;
align-items: start;
}
.contact-left .section-title { margin-bottom: 56px; }
.contact-info {
display: flex; flex-direction: column; gap: 28px;
padding-top: 32px;
border-top: 1px solid rgba(244, 241, 234, 0.16);
}
.contact-item { display: flex; flex-direction: column; gap: 6px; }
.contact-label {
font-size: 0.62rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
}
.contact-item a, .contact-item span {
color: var(--white);
text-decoration: none;
font-size: 1rem;
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
transition: color 0.3s;
}
.contact-item a:hover { color: var(--gold); }
.response-note {
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid rgba(244, 241, 234, 0.16);
font-size: 0.78rem;
color: var(--white-dim);
line-height: 1.7;
}
.response-note span { color: var(--gold); }
.contact-form { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-group { display: flex; flex-direction: column; gap: 10px; }
.form-group label {
font-size: 0.64rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold);
}
.form-group input,
.form-group select,
.form-group textarea {
background: transparent;
border: none;
border-bottom: 1px solid rgba(244, 241, 234, 0.22);
color: var(--white);
padding: 14px 0;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
outline: none;
transition: border-color 0.3s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(244,241,234,0.22); font-weight: 300; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-bottom-color: var(--gold); }
.form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23c8a96e' d='M4 6l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 4px center; background-size: 14px; padding-right: 28px; }
.form-group select option { background: var(--ink); color: var(--white); }
.form-group textarea { resize: vertical; min-height: 100px; border: 1px solid rgba(244, 241, 234, 0.18); padding: 16px; }
.form-group textarea:focus { border-color: var(--gold-dim); }
/* ── Custom select (matches form field styling) ── */
.custom-select {
position: relative;
width: 100%;
}
.cs-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(244, 241, 234, 0.22);
color: var(--white);
padding: 14px 0;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 300;
text-align: left;
cursor: pointer;
transition: border-color 0.3s;
}
.cs-trigger:hover,
.cs-trigger:focus,
.custom-select.is-open .cs-trigger { border-bottom-color: var(--gold); outline: none; }
.cs-value { flex: 1; color: var(--white); }
.cs-value.cs-placeholder { color: rgba(244, 241, 234, 0.32); }
.cs-caret {
font-size: 0.7rem;
color: var(--gold);
transition: transform 0.3s var(--ease-out);
display: inline-block;
line-height: 1;
}
.custom-select.is-open .cs-caret { transform: rotate(180deg); }
.cs-menu {
list-style: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: rgba(2, 8, 18, 0.96);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgba(184, 146, 78, 0.22);
padding: 6px 0;
z-index: 50;
max-height: 320px;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0.25s;
box-shadow: 0 24px 60px rgba(2, 8, 18, 0.5);
}
.custom-select.is-open .cs-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0s;
}
.cs-menu li {
padding: 12px 18px;
font-size: 0.92rem;
font-weight: 300;
color: rgba(244, 241, 234, 0.72);
cursor: pointer;
transition: background 0.2s, color 0.2s;
font-family: var(--font-body);
border-left: 2px solid transparent;
}
.cs-menu li:hover,
.cs-menu li:focus,
.cs-menu li.is-highlighted {
background: rgba(184, 146, 78, 0.10);
color: var(--white);
border-left-color: var(--gold);
outline: none;
}
.cs-menu li.is-selected {
color: var(--gold);
background: rgba(184, 146, 78, 0.06);
}
.cs-menu::-webkit-scrollbar { width: 4px; }
.cs-menu::-webkit-scrollbar-track { background: transparent; }
.cs-menu::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }
/* ── Phone field: country-code dropdown + number input ── */
.phone-field {
display: flex;
align-items: stretch;
gap: 12px;
}
.phone-country { position: relative; flex: 0 0 auto; }
.phone-cc-trigger {
width: auto;
gap: 8px;
white-space: nowrap;
padding-right: 2px;
}
.phone-cc-value { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.phone-number { flex: 1 1 auto; min-width: 0; }
/* Country menu: anchored under the code button but wider than it.
The menu itself clips (overflow:hidden) and lays out as a column so the
search stays put while only the list scrolls — this avoids the sticky +
backdrop-filter bug where scrolled-away rows bleed outside the box. */
.phone-cc-menu {
left: 0;
right: auto;
width: 300px;
max-width: calc(100vw - 48px);
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.phone-country.is-open .cs-trigger { border-bottom-color: var(--gold); }
.phone-country.is-open .cs-caret { transform: rotate(180deg); }
.phone-country.is-open .phone-cc-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0s linear 0s;
}
.phone-cc-search {
flex: 0 0 auto;
width: 100%;
box-sizing: border-box;
background: rgba(2, 8, 18, 0.96);
border: none;
border-bottom: 1px solid rgba(184, 146, 78, 0.22);
color: var(--white);
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 300;
padding: 12px 18px;
outline: none;
}
.phone-cc-search::placeholder { color: rgba(244, 241, 234, 0.32); }
.phone-cc-list {
list-style: none;
margin: 0;
padding: 6px 0;
flex: 1 1 auto;
min-height: 0;
max-height: 264px;
overflow-y: auto;
overscroll-behavior: contain;
}
.phone-cc-list::-webkit-scrollbar { width: 4px; }
.phone-cc-list::-webkit-scrollbar-track { background: transparent; }
.phone-cc-list::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 2px; }
.phone-cc-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.phone-cc-list li .phone-cc-dial {
color: var(--gold);
font-variant-numeric: tabular-nums;
font-size: 0.86rem;
flex: 0 0 auto;
}
.phone-cc-list li.is-empty {
justify-content: flex-start;
color: rgba(244, 241, 234, 0.4);
cursor: default;
border-left-color: transparent;
}
.phone-cc-list li.is-empty:hover { background: transparent; color: rgba(244, 241, 234, 0.4); border-left-color: transparent; }
/* ── Message word counter ── */
.word-counter {
margin: 8px 0 0;
font-size: 0.7rem;
letter-spacing: 0.04em;
color: rgba(244, 241, 234, 0.4);
text-align: right;
font-variant-numeric: tabular-nums;
}
.word-counter.is-limit { color: var(--gold); }
.form-footer {
margin-top: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.form-footer .privacy-note {
font-size: 0.74rem;
color: var(--white-dim);
line-height: 1.6;
max-width: 360px;
}
@media (max-width: 900px) {
.contact-section { padding: 100px 0; }
.contact-grid { grid-template-columns: 1fr; gap: 64px; }
.form-row { grid-template-columns: 1fr; }
}
/* ============================================
FOOTER — closing dark band
============================================ */
.footer {
background: var(--ink);
padding: 100px 0 32px;
border-top: 1px solid rgba(244, 241, 234, 0.10);
position: relative;
overflow: hidden;
color: var(--white);
}
.footer .logo { color: var(--white); }
.footer .footer-top, .footer .footer-bottom {
border-color: rgba(244, 241, 234, 0.10);
}
.footer-wordmark {
font-family: var(--font-display);
font-size: clamp(5rem, 18vw, 16rem);
font-weight: 600;
letter-spacing: 0.04em;
line-height: 0.9;
background: linear-gradient(180deg, rgba(244, 241, 234, 0.92) 0%, rgba(184, 146, 78, 0.65) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-align: center;
margin: 60px 0 0;
user-select: none;
pointer-events: none;
}
.footer-top {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr;
gap: 60px;
padding-bottom: 64px;
border-bottom: 1px solid rgba(244, 241, 234, 0.10);
}
.footer-brand .logo {
font-size: 1.3rem;
display: block;
margin-bottom: 20px;
color: var(--white);
text-decoration: none;
letter-spacing: 0.22em;
}
.footer-brand p {
color: var(--white-dim);
font-size: 0.9rem;
max-width: 280px;
line-height: 1.75;
font-family: var(--font-display);
font-style: italic;
}
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col h2 {
font-size: 0.62rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
font-weight: 400;
}
.footer-col a, .footer-col span {
color: var(--white-dim);
text-decoration: none;
font-size: 0.88rem;
transition: color 0.3s;
font-weight: 300;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
padding-top: 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
}
.footer-bottom p {
font-size: 0.72rem;
color: rgba(244,241,234,0.32);
line-height: 1.75;
}
.footer-bottom .disclaimer { max-width: 600px; }
@media (max-width: 900px) {
.footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
.footer-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
.footer-top { grid-template-columns: 1fr; gap: 32px; }
}
/* ============================================
REVEAL ANIMATIONS
============================================ */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.delay-1 { transition-delay: 0.12s; }
.reveal.delay-2 { transition-delay: 0.24s; }
.reveal.delay-3 { transition-delay: 0.36s; }
.reveal.delay-4 { transition-delay: 0.48s; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* ============================================
SUB-PAGE STYLES — match main site theme
============================================ */
/* Hero — deep navy (matches main hero) */
.sub-hero {
min-height: 100vh; /* fallback for browsers without svh */
min-height: 100svh; /* full viewport — the only thing visible on load */
display: flex;
align-items: center;
/* Heading sits centred in the full-viewport hero; the tracking hairline
plays across the whole space behind it. */
padding: 130px 0 120px;
position: relative;
overflow: hidden;
background: var(--ink);
color: var(--white);
}
.sub-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(244,241,234,0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(244,241,234,0.015) 1px, transparent 1px);
background-size: 96px 96px;
mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, black 14%, transparent 66%);
-webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, black 14%, transparent 66%);
}
.sub-hero::after {
content: '';
position: absolute;
top: -20%; right: -10%;
width: 90vw; max-width: 1100px; height: 1100px;
background: radial-gradient(circle at 30% 40%, rgba(26, 58, 107, 0.5) 0%, transparent 55%);
filter: blur(60px);
pointer-events: none;
}
.sub-hero-orb { display: none; } /* legacy element, hidden */
.sub-hero-content {
position: relative;
z-index: 2;
text-align: center;
margin: 0 auto;
}
.sub-hero .back-link {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 0.66rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
margin-bottom: 48px;
transition: gap 0.4s var(--ease-out), color 0.3s;
}
.sub-hero .back-link:hover { gap: 18px; color: var(--gold-light); }
.sub-hero h1 {
font-family: var(--font-display);
font-size: clamp(2.8rem, 6.4vw, 5.4rem);
font-weight: 300;
line-height: 1.04;
margin-bottom: 32px;
letter-spacing: -0.02em;
color: var(--white);
}
.sub-hero h1 em { font-style: italic; color: var(--gold); font-weight: 300; }
.sub-hero p.lead {
font-size: clamp(1rem, 1.4vw, 1.15rem);
font-weight: 300;
color: var(--white-dim);
max-width: 640px;
margin: 0 auto;
line-height: 1.75;
}
.sub-hero .section-tag {
font-family: var(--font-body);
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.sub-hero .section-tag::before {
content: '';
width: 28px;
height: 1px;
background: var(--gold);
opacity: 0.7;
}
/* Body — paper */
.sub-content {
padding: 140px 0;
background: var(--paper);
color: var(--ink-strong);
position: relative;
transition: background-color 0.6s var(--ease-out);
}
/* When a practice chip is hovered, main.js sets --wash to that chip's colour
and adds .is-washing — the whole section background shifts toward it. */
.sub-content.is-washing {
background-color: color-mix(in srgb, var(--paper) 82%, var(--wash, var(--paper)));
}
.sub-content::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--ink-line);
}
.sub-content-inner {
max-width: 1080px;
margin: 0 auto;
}
/* Editorial intro — a left-aligned statement with a short gold rule above
it. Set in the body font (Outfit), heavier weight, so it reads as a bold
lead-in rather than the display serif. */
.sub-intro {
font-family: var(--font-body);
font-size: clamp(1.2rem, 1.85vw, 1.55rem);
font-weight: 500;
font-style: normal;
line-height: 1.6;
letter-spacing: -0.005em;
color: var(--navy);
margin: 0 0 60px;
text-align: left;
max-width: 820px;
padding-top: 40px;
position: relative;
}
.sub-intro::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 56px; height: 2px;
background: var(--gold);
}
/* Body copy in offset columns — the first block hangs left, the block after
the chips hangs right, for an asymmetric editorial rhythm rather than a
single centred column. */
/* Body copy sits in subtle cards rather than bare text — a soft surface,
hairline border, rounded corners and a gentle shadow for quiet depth. */
.sub-body {
max-width: 640px;
background: var(--paper-soft);
border: 1px solid var(--ink-line);
border-radius: 6px;
padding: 34px 38px;
box-shadow: 0 14px 34px -26px rgba(10, 26, 53, 0.2);
}
.sub-content-inner > .sub-body:first-of-type { margin-right: auto; }
.sub-content-inner > .sub-body:last-of-type { margin-left: auto; }
.sub-body p {
font-size: 1.04rem;
font-weight: 300;
color: var(--ink-soft);
line-height: 1.85;
margin-bottom: 18px;
}
.sub-body p:last-child { margin-bottom: 0; }
/* ── Practice chips — interactive capability cards ──────────────────────
Flex row, 3-up on desktop, each with a signature colour (set per-chip by
main.js practiceChips). Hover lifts the chip (3D tilt via premium3D),
fills it with its colour, and tints the whole section background (see
.sub-content.is-washing). */
.feature-list {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 72px 0;
background: none;
border: none;
}
.feature-item {
flex: 0 1 calc(33.333% - 10px);
padding: 30px 26px 28px;
background: var(--paper-soft);
border: 1px solid var(--ink-line);
border-radius: 5px;
transition: background 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
position: relative;
}
.feature-item::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
width: auto;
height: 3px;
background: var(--chip, var(--gold));
transform: scaleX(0.28);
transform-origin: left;
transition: transform 0.55s var(--ease-out);
}
.feature-item:hover::before { transform: scaleX(1); }
.feature-item:hover {
background: var(--chip, var(--navy));
border-color: var(--chip, var(--navy));
box-shadow: 0 26px 54px -26px rgba(10, 26, 53, 0.45);
}
.feature-item:hover h2 { color: var(--white); }
.feature-item:hover p { color: rgba(244, 241, 234, 0.82); }
.feature-item:hover .feat-abbr { color: var(--gold-light); }
.feature-item h2 {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 400;
color: var(--navy);
margin-bottom: 14px;
letter-spacing: -0.005em;
}
/* Parenthetical expansion next to an abbreviation (e.g. "SIF (Specialised...)").
Reads as a quieter qualifier than the abbreviation itself. */
.feature-item h2 .feat-abbr {
display: inline-block;
margin-left: 6px;
font-family: var(--font-body);
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
vertical-align: middle;
position: relative;
top: -0.18em;
}
@media (max-width: 768px) {
.feature-item h2 .feat-abbr {
display: block;
margin: 6px 0 0 0;
font-size: 0.58rem;
letter-spacing: 0.2em;
top: 0;
}
}
.feature-item p {
font-family: var(--font-body);
font-size: 0.94rem;
font-weight: 300;
color: var(--ink-soft);
line-height: 1.75;
margin: 0;
}
@media (max-width: 900px) { .feature-item { flex: 0 1 calc(50% - 7px); } }
@media (max-width: 600px) { .feature-item { flex: 1 1 100%; } }
/* ============================================
SERVICE-PAGE FAQ — two-column accordion
A distinct section after the body: a sticky heading in the left margin
(using the negative space) and a click-to-expand accordion on the right.
Text is intentionally smaller than the body so it reads as a secondary
section. Mirrored by FAQPage JSON-LD in each page head for SEO + AI.
============================================ */
.faq-section {
background: var(--paper-soft);
padding: 150px 0 140px;
border-top: 1px solid var(--ink-line);
position: relative;
}
/* Wide two-column layout uses the side space; heading sits left, list right */
.faq-container {
display: grid;
grid-template-columns: 320px 1fr;
gap: 64px;
align-items: start;
}
.faq-head { position: sticky; top: 120px; }
.faq-eyebrow {
font-family: var(--font-body);
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.faq-heading {
font-family: var(--font-display);
font-size: clamp(1.7rem, 3vw, 2.4rem);
font-weight: 300;
color: var(--navy);
letter-spacing: -0.01em;
line-height: 1.12;
margin: 0;
}
.faq-heading em { font-style: italic; color: var(--gold); font-weight: 300; }
.faq-list { border-top: 1px solid var(--ink-line); }
.faq-item { border-bottom: 1px solid var(--ink-line); }
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
text-align: left;
background: none;
border: none;
cursor: pointer;
padding: 22px 2px;
font-family: var(--font-body);
font-size: 0.98rem; /* smaller than body (1.04rem) */
font-weight: 500;
color: var(--navy);
transition: color 0.3s var(--ease-out);
}
.faq-q:hover { color: var(--gold); }
/* + / − toggle icon */
.faq-icon {
position: relative;
flex: 0 0 14px;
width: 14px; height: 14px;
}
.faq-icon::before,
.faq-icon::after {
content: '';
position: absolute;
background: var(--gold);
transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.faq-icon::before { top: 6.25px; left: 0; width: 14px; height: 1.5px; }
.faq-icon::after { left: 6.25px; top: 0; width: 1.5px; height: 14px; }
.faq-item.open .faq-icon::after { transform: scaleY(0); opacity: 0; }
.faq-a {
overflow: hidden;
max-height: 0;
transition: max-height 0.45s var(--ease-out);
}
.faq-item.open .faq-a { max-height: 600px; }
.faq-a p {
font-family: var(--font-body);
font-size: 0.9rem; /* smaller than body */
font-weight: 300;
line-height: 1.75;
color: var(--ink-soft);
margin: 0;
padding: 0 2px 26px;
max-width: 64ch;
}
@media (max-width: 860px) {
.faq-section { padding: 100px 0 90px; }
.faq-container { grid-template-columns: 1fr; gap: 30px; }
.faq-head { position: static; }
}
/* ============================================
ABOUT PAGE — Principles block
============================================ */
.about-principles {
margin: 100px 0 0;
padding-top: 80px;
border-top: 1px solid var(--ink-line);
}
.about-section-title {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.2vw, 2.4rem);
font-weight: 300;
color: var(--navy);
text-align: center;
letter-spacing: -0.005em;
margin-bottom: 60px;
}
.about-principles-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Colour-reveal chips, matching the service-page practice chips: a --chip
top bar that fills on hover while the whole card washes to that colour
(main.js also tints the section background via .is-washing). */
.about-principle {
position: relative;
padding: 34px 30px 30px;
background: var(--paper-soft);
border: 1px solid var(--ink-line);
border-radius: 5px;
transition: background 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.about-principle::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--chip, var(--gold));
transform: scaleX(0.28);
transform-origin: left;
transition: transform 0.55s var(--ease-out);
}
.about-principle:hover::before { transform: scaleX(1); }
.about-principle:hover {
background: var(--chip, var(--navy));
border-color: var(--chip, var(--navy));
box-shadow: 0 26px 54px -26px rgba(10, 26, 53, 0.45);
}
.about-principle .ap-num {
font-family: var(--font-display);
font-size: 0.78rem;
letter-spacing: 0.18em;
color: var(--gold);
margin-bottom: 18px;
transition: color 0.5s var(--ease-out);
}
.about-principle:hover .ap-num { color: var(--gold-light); }
.about-principle h3 {
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 400;
line-height: 1.2;
color: var(--navy);
margin-bottom: 14px;
letter-spacing: -0.005em;
transition: color 0.5s var(--ease-out);
}
.about-principle h3 em { font-style: italic; color: var(--gold); font-weight: 300; transition: color 0.5s var(--ease-out); }
.about-principle:hover h3 { color: var(--white); }
.about-principle:hover h3 em { color: var(--gold-light); }
.about-principle p {
font-size: 0.94rem;
color: var(--ink-soft);
line-height: 1.8;
margin: 0;
transition: color 0.5s var(--ease-out);
}
.about-principle:hover p { color: rgba(244, 241, 234, 0.82); }
@media (max-width: 768px) {
.about-principles { margin-top: 64px; padding-top: 56px; }
.about-principles-grid { grid-template-columns: 1fr; gap: 14px; }
}
/* ============================================
ABOUT PAGE — Meet the Team
============================================ */
.team-section {
padding: 140px 0;
background: var(--paper-soft);
position: relative;
}
.team-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--ink-line);
}
.team-header {
text-align: center;
margin-bottom: 80px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.team-header .section-tag { justify-content: center; }
.team-title {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4.4vw, 3.4rem);
font-weight: 300;
color: var(--navy);
letter-spacing: -0.01em;
line-height: 1.05;
}
.team-title em { font-style: italic; color: var(--gold); font-weight: 300; }
.team-lead {
font-family: var(--font-display);
font-style: italic;
font-size: 1.05rem;
color: var(--ink-soft);
max-width: 600px;
margin: 0 auto;
}
.team-grid {
display: grid;
/* Default — used by the three-column row beneath the featured card. */
grid-template-columns: repeat(3, 1fr);
gap: 32px 24px;
max-width: 1100px;
margin: 0 auto;
}
.team-grid--three { grid-template-columns: repeat(3, 1fr); }
.team-card {
/* Per-photo calibration vars. Overridden per [data-member]. The vars let us
normalize face size across photos with different source framings without
pre-cropping each image. */
--photo-scale: 1;
--photo-y: 22%;
--photo-origin: center 30%;
background: var(--paper);
padding: 22px 20px 22px;
position: relative;
transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.team-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 24px;
height: 1px;
background: var(--gold);
transition: width 0.4s var(--ease-out);
}
.team-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -28px rgba(10, 26, 53, 0.22); }
.team-card:hover::before { width: 48px; }
/* Featured / hero card — Ishit. Horizontal: photo on left, details on right. */
.team-card--featured {
display: grid;
grid-template-columns: minmax(220px, 280px) 1fr;
gap: 40px;
align-items: center;
padding: 36px 40px;
max-width: 1100px;
margin: 0 auto 40px;
}
.team-card--featured .team-photo { margin-bottom: 0; aspect-ratio: 1 / 1; }
.team-card--featured .team-name { font-size: 1.55rem; margin-bottom: 6px; }
.team-card--featured .team-role { font-size: 0.62rem; margin-bottom: 16px; }
.team-card--featured .team-bio { font-size: 0.92rem; line-height: 1.75; max-width: 56ch; }
.team-photo {
width: 100%;
aspect-ratio: 1 / 1;
background: linear-gradient(135deg, var(--paper-soft) 0%, var(--paper-deep) 100%);
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.team-photo::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(10, 26, 53, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(10, 26, 53, 0.04) 1px, transparent 1px);
background-size: 18px 18px;
}
.team-photo:has(img) { background: var(--paper-soft); }
.team-photo:has(img)::after { display: none; }
.team-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center var(--photo-y);
transform: scale(var(--photo-scale));
transform-origin: var(--photo-origin);
display: block;
transition: transform 0.6s var(--ease-out);
}
.team-card:hover .team-photo img {
transform: scale(calc(var(--photo-scale) * 1.04));
}
/* ── Per-photo zoom calibration ──────────────────────────────────────
The 4 source photos have different framings (Ishit/Kalash are tight
chest-up; Aditya/Mihir are wider with body visible). These overrides
normalize the face size + eye-line position across all four. */
.team-card[data-member="ishit"] { --photo-scale: 1.00; --photo-y: 18%; --photo-origin: center top; }
.team-card[data-member="kalash"] { --photo-scale: 1.10; --photo-y: 68%; --photo-origin: center bottom; }
.team-card[data-member="aditya"] { --photo-scale: 1.22; --photo-y: 18%; --photo-origin: center top; }
.team-card[data-member="mihir"] { --photo-scale: 1.14; --photo-y: 18%; --photo-origin: center top; }
.team-card-body { position: relative; }
.team-name {
font-family: var(--font-display);
font-size: 1.08rem;
font-weight: 400;
color: var(--navy);
margin-bottom: 4px;
letter-spacing: -0.005em;
}
.team-role {
font-family: var(--font-body);
font-size: 0.56rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
}
.team-bio {
font-size: 0.78rem;
color: var(--ink-soft);
line-height: 1.6;
}
@media (max-width: 1024px) {
.team-grid { grid-template-columns: repeat(3, 1fr); }
.team-card--featured { grid-template-columns: minmax(200px, 240px) 1fr; gap: 32px; padding: 28px 32px; }
}
@media (max-width: 768px) {
.team-section { padding: 90px 0; }
/* Stack the founder card vertically — photo on top, details below */
.team-card--featured {
grid-template-columns: 1fr;
gap: 20px;
padding: 24px 22px;
max-width: 420px;
}
.team-card--featured .team-photo { max-width: 280px; margin: 0 auto; }
.team-card--featured .team-name { font-size: 1.35rem; }
/* Three-up grid becomes 1 column on small screens */
.team-grid { grid-template-columns: 1fr; gap: 24px; max-width: 420px; }
}
/* CTA — deep navy, matches contact section */
.sub-cta-section {
padding: 140px 0;
background: var(--ink);
color: var(--white);
text-align: center;
position: relative;
}
.sub-cta-section h3 {
font-family: var(--font-display);
font-size: clamp(2rem, 4.2vw, 3.4rem);
font-weight: 300;
margin-bottom: 32px;
color: var(--white);
line-height: 1.1;
letter-spacing: -0.015em;
}
.sub-cta-section h3 em { font-style: italic; color: var(--gold); font-weight: 300; }
.sub-cta-section p {
color: var(--white-dim);
margin: 0 auto 48px;
font-size: 1rem;
max-width: 540px;
line-height: 1.75;
}
/* ============================================
FLOATING BACK BUTTON (sub-pages)
============================================ */
.floating-back {
position: fixed;
left: 32px;
top: 96px; /* sits just below the navbar */
z-index: 90;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 18px 12px 14px;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--white-dim);
text-decoration: none;
background: rgba(6, 14, 28, 0.55);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(244, 241, 234, 0.08);
border-radius: 999px;
transition:
color 0.3s,
background 0.3s,
border-color 0.3s,
padding 0.4s var(--ease-out),
transform 0.4s var(--ease-out),
box-shadow 0.4s var(--ease-out),
top 0.4s var(--ease-out);
}
.floating-back .fb-arrow {
color: var(--gold);
font-size: 0.95rem;
transition: transform 0.4s var(--ease-out);
line-height: 1;
}
.floating-back:hover {
color: var(--white);
background: rgba(6, 14, 28, 0.85);
border-color: rgba(200, 169, 110, 0.45);
box-shadow: 0 12px 32px -12px rgba(6, 14, 28, 0.5);
padding-left: 18px;
padding-right: 22px;
transform: translateX(2px);
}
.floating-back:hover .fb-arrow { transform: translateX(-4px); }
/* On sub-content (paper) sections, invert the colour scheme so it stays visible. */
.floating-back.is-on-paper {
background: rgba(245, 241, 232, 0.82);
border-color: rgba(10, 26, 53, 0.12);
color: var(--ink-soft);
}
.floating-back.is-on-paper:hover {
background: rgba(245, 241, 232, 0.95);
color: var(--navy);
border-color: var(--gold-dim);
}
@media (max-width: 900px) {
.floating-back {
left: 16px;
top: 76px;
padding: 10px 16px 10px 12px;
font-size: 0.62rem;
}
}
@media (max-width: 480px) {
/* Collapse to icon-only on tight screens */
.floating-back .fb-text { display: none; }
.floating-back { padding: 12px 14px; }
}
/* Sub-page section-tag (used outside hero too) */
.section-tag {
font-family: var(--font-body);
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 18px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.section-tag::before {
content: '';
width: 28px;
height: 1px;
background: var(--gold);
opacity: 0.7;
}
/* Sub-page footer — sits on dark already, matches main footer style */
body > footer.footer {
padding: 80px 0 32px;
}
body > footer.footer .footer-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
padding: 0;
border: none;
}
@media (max-width: 700px) {
body > footer.footer .footer-bottom { grid-template-columns: 1fr; }
}
/* ============================================================================
MOBILE STYLESHEET — authoritative, designed phone-first, not scaled-down.
Appended at end so it wins on cascade. Applied below 900px.
============================================================================ */
@media (max-width: 900px) {
/* ── HERO ─────────────────────────────────────────────────────────────── */
/* Three discrete vertical zones with breathing room.
Watermark in upper third, title in middle, buttons in lower third.
No more absolute centering of the whole content block. */
.hero-center {
padding: 0 !important;
min-height: 100vh !important;
min-height: 100svh !important;
position: relative !important;
display: block !important;
overflow: hidden;
}
/* The content block (title + buttons) sits with the title closer to the watermark. */
.hero-center .hero-content,
.hero-center .hero-content-center {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: calc(100% - 48px) !important;
max-width: 460px !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 56px !important;
z-index: 2 !important;
}
/* Title sits cleanly below the watermark with its own dedicated zone.
One-line variant: forced to a single line at every width via vw sizing.
Increased size since we're committed to one line. */
.hero-content-center .hero-title-center,
.hero-title.hero-title-oneline,
.hero-title.hero-title-center.hero-title-oneline {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
font-size: 5.6vw !important;
line-height: 1.2 !important;
letter-spacing: -0.012em !important;
max-width: 100% !important;
text-align: center !important;
color: var(--white) !important;
}
.hero-title.hero-title-oneline .line { display: inline !important; }
/* Inline italic — stays on the title line, not broken to a new line */
.hero-title em.italic,
.hero-title.hero-title-oneline em.italic {
display: inline !important;
font-style: italic !important;
color: var(--gold) !important;
font-weight: 300 !important;
font-size: 1em !important;
line-height: inherit !important;
margin: 0 !important;
}
/* WATERMARK — sits above title with comfortable but not excessive gap.
Centered horizontally, anchored higher up the viewport.
Note: opacity intentionally has NO !important so the intro-active rule
(html.intro-active .hero-wordmark { opacity: 0 }) can hide the watermark
during the masthead intro, and the wordmarkSettle animation can fade it
in afterwards. --wordmark-end-opacity sets the settle animation's end
value to match the mobile resting state. */
.hero-wordmark {
top: 36% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
font-size: 18vw !important;
letter-spacing: 0.12em !important;
opacity: 0.85;
--wordmark-end-opacity: 0.85;
-webkit-text-stroke-width: 1px !important;
-webkit-text-stroke-color: rgba(244, 241, 234, 0.42) !important;
white-space: nowrap !important;
}
/* GLOW HALOS — anchored near the watermark, not the title */
.hero-glow {
top: 36% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 200vw !important;
max-width: none !important;
height: 600px !important;
}
.hero-glow-2 {
top: 44% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 180vw !important;
max-width: none !important;
height: 500px !important;
}
/* BUTTONS — full width, generous, premium */
.hero-actions,
.hero-actions-center {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
width: 100% !important;
max-width: 320px !important;
}
.hero-actions-center .btn-primary,
.hero-actions-center .btn-ghost,
.hero-actions .btn-primary,
.hero-actions .btn-ghost {
width: 100% !important;
justify-content: center !important;
padding: 18px 24px !important;
font-size: 0.7rem !important;
letter-spacing: 0.2em !important;
}
/* Hide scroll cue — no room and the page is obviously scrollable */
.hero-scroll-hint { display: none !important; }
/* ── NAV ──────────────────────────────────────────────────────────────── */
.nav-inner { padding: 16px 20px !important; }
#navbar.scrolled .nav-inner { padding: 12px 20px !important; }
.nav-links { display: none !important; }
.hamburger { display: block !important; }
/* Mobile menu panel — dark navy, premium */
.mobile-menu {
background: rgba(6, 14, 28, 0.98) !important;
backdrop-filter: blur(20px) !important;
border-top: 1px solid rgba(244, 241, 234, 0.08) !important;
padding: 24px 24px 32px !important;
gap: 0 !important;
}
.mobile-menu a {
color: rgba(244, 241, 234, 0.92) !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
letter-spacing: 0.16em !important;
padding: 18px 0 !important;
border-bottom: 1px solid rgba(244, 241, 234, 0.06) !important;
text-transform: uppercase !important;
}
.mobile-menu a:last-child {
border: 1px solid var(--gold) !important;
color: var(--gold) !important;
text-align: center !important;
margin-top: 16px !important;
padding: 14px 0 !important;
}
#navbar.scrolled .mobile-menu {
background: rgba(245, 241, 232, 0.98) !important;
border-top-color: var(--ink-line) !important;
}
#navbar.scrolled .mobile-menu a {
color: var(--navy) !important;
border-bottom-color: var(--ink-line) !important;
}
#navbar.scrolled .mobile-menu a:last-child {
color: var(--gold) !important;
border-color: var(--gold) !important;
}
/* ── ABOUT ───────────────────────────────────────────────────────────── */
.about-strip { padding: 120px 24px 80px !important; }
.about-header { margin-bottom: 56px !important; }
.about-title { font-size: clamp(2rem, 8vw, 2.6rem) !important; }
.about-body p { font-size: 1.05rem !important; line-height: 1.85 !important; margin-bottom: 24px !important; }
.about-cta-wrap { margin-top: 56px !important; }
/* ── STATS ───────────────────────────────────────────────────────────── */
/* 2x2 clean grid. No dividers — they look broken on mobile.
Each stat sits in its own quadrant with generous breathing room. */
.stats-strip { padding: 0 24px 100px !important; }
.stats-strip::before { display: none !important; }
.stats-grid {
grid-template-columns: 1fr 1fr !important;
gap: 56px 24px !important;
padding-top: 72px !important;
border-top: 1px solid var(--ink-line) !important;
max-width: 100% !important;
}
.stats-grid .stat,
.stats-grid .stat:first-child,
.stats-grid .stat:nth-child(2),
.stats-grid .stat:nth-child(3),
.stats-grid .stat:nth-child(4),
.stats-grid .stat:nth-child(odd),
.stats-grid .stat:nth-child(even) {
padding: 0 !important;
gap: 14px !important;
border: none !important;
text-align: center !important;
}
.stat-num {
font-size: clamp(2rem, 9vw, 2.8rem) !important;
line-height: 1 !important;
}
.stat-label {
font-size: 0.62rem !important;
letter-spacing: 0.22em !important;
line-height: 1.5 !important;
}
/* ── SERVICES CAROUSEL ───────────────────────────────────────────────── */
.services-carousel { padding: 100px 0 0 !important; }
.sc-header { margin-bottom: 64px !important; padding: 0 24px 16px !important; }
.sc-stage {
display: block !important;
max-width: 100% !important;
padding: 0 !important;
}
.sc-index { display: none !important; }
.sc-list { padding: 0 !important; }
.sc-item {
padding: 64px 24px !important;
margin: 0 !important;
opacity: 1 !important;
filter: none !important;
transform: none !important;
position: relative !important;
}
/* Scroll-driven entrance animation for mobile.
Each card slides up and fades in as it enters the viewport. */
.sc-item.sc-mobile-reveal {
opacity: 0 !important;
transform: translateY(36px) !important;
transition:
opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.sc-item.sc-mobile-reveal.visible {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Stagger the inner elements so name, desc, and CTA cascade in. */
.sc-item.sc-mobile-reveal .sc-num,
.sc-item.sc-mobile-reveal .sc-name,
.sc-item.sc-mobile-reveal .sc-desc,
.sc-item.sc-mobile-reveal .sc-cta {
opacity: 0;
transform: translateY(12px);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.sc-item.sc-mobile-reveal.visible .sc-num { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.sc-item.sc-mobile-reveal.visible .sc-name { transition-delay: 0.18s; opacity: 1; transform: translateY(0); }
.sc-item.sc-mobile-reveal.visible .sc-desc { transition-delay: 0.28s; opacity: 1; transform: translateY(0); }
.sc-item.sc-mobile-reveal.visible .sc-cta { transition-delay: 0.38s; opacity: 1; transform: translateY(0); }
/* All cards visible at full opacity on mobile — give every card a SOLID
opaque backing so it never sits on the muddy mid-gradient */
.sc-item[data-i="0"]::after,
.sc-item[data-i="1"]::after,
.sc-item[data-i="2"]::after {
inset: 0 !important;
background: var(--paper) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.sc-item[data-i="3"]::after {
inset: 0 !important;
background: var(--ink) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.sc-item + .sc-item::before {
left: 24px !important;
right: 24px !important;
z-index: 2 !important;
}
.sc-item-inner {
display: grid !important;
grid-template-columns: 44px 1fr !important;
gap: 16px !important;
position: relative !important;
z-index: 1 !important;
}
.sc-num {
font-size: 0.75rem !important;
padding-top: 12px !important;
letter-spacing: 0.18em !important;
}
.sc-num::after { display: none !important; }
.sc-name {
font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
line-height: 1.15 !important;
margin-bottom: 20px !important;
}
.sc-desc {
font-size: 0.95rem !important;
line-height: 1.8 !important;
margin-bottom: 32px !important;
}
.sc-cta {
font-size: 0.62rem !important;
letter-spacing: 0.22em !important;
border-color: var(--gold-dim) !important;
}
/* ── CONTACT ─────────────────────────────────────────────────────────── */
/* On mobile, restructure: title first, then form, then contact details.
Use flex on contact-grid + order to reposition contact-info after form. */
.contact-section { padding: 100px 0 !important; }
.contact-grid {
display: flex !important;
flex-direction: column !important;
gap: 48px !important;
padding: 0 24px !important;
}
/* Contact-left contains the title AND contact-info.
Flatten it into the grid so we can reorder the children. */
.contact-left {
display: contents !important;
}
/* Section title appears first */
.contact-left .section-title {
order: 1 !important;
margin-bottom: 0 !important;
}
/* Contact info (email/phone/office) gets pushed AFTER the form */
.contact-left .contact-info {
order: 3 !important;
margin-top: 16px !important;
padding-top: 40px !important;
border-top: 1px solid rgba(244, 241, 234, 0.10) !important;
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
}
.contact-left .contact-item {
margin: 0 !important;
}
/* Form sits between title and contact details */
.contact-right {
order: 2 !important;
}
.section-title {
font-size: clamp(2.2rem, 8.5vw, 3rem) !important;
line-height: 1.1 !important;
}
.contact-form {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
}
.form-row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 28px !important;
}
.form-group label {
margin-bottom: 10px !important;
}
.form-group input,
.form-group textarea,
.cs-trigger {
font-size: 16px !important;
}
.form-footer {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 20px !important;
margin-top: 16px !important;
}
.form-footer .privacy-note {
text-align: center !important;
max-width: 100% !important;
font-size: 0.85rem !important;
line-height: 1.6 !important;
}
.form-footer .btn-primary {
width: 100% !important;
justify-content: center !important;
padding: 18px 24px !important;
}
/* ── MARQUEE ─────────────────────────────────────────────────────────── */
.marquee-wrap { padding: 20px 0 !important; }
.marquee-track span {
font-size: 0.88rem !important;
letter-spacing: 0.26em !important;
margin-right: 36px !important;
}
/* Mobile track is narrower (smaller fonts + smaller margins) than desktop,
so the same 14s duration reads visibly slower. Shorter duration on
mobile keeps the apparent scroll speed comparable to desktop. */
.marquee-track {
animation-duration: 9s !important;
}
/* ── FOOTER ──────────────────────────────────────────────────────────── */
.footer { padding: 80px 0 40px !important; }
.footer-top {
grid-template-columns: 1fr !important;
gap: 52px !important;
padding: 0 24px !important;
}
.footer-wordmark {
font-size: 22vw !important;
margin: 56px 0 32px !important;
letter-spacing: 0.04em !important;
}
.footer-bottom {
padding: 32px 24px !important;
flex-direction: column !important;
gap: 20px !important;
text-align: center !important;
}
.footer-bottom .disclaimer { font-size: 0.72rem !important; max-width: 100% !important; line-height: 1.7 !important; }
/* ── SUB-PAGE HEROES (about, services) ───────────────────────────────── */
/* Keep the full-viewport landing on mobile too (100svh accounts for the
browser chrome so the hero isn't cut off behind the URL bar). */
.sub-hero { padding: 110px 24px 90px !important; min-height: 100svh !important; }
.sub-hero-content { padding: 0 !important; }
.sub-hero h1 { font-size: clamp(2.4rem, 9.5vw, 3.4rem) !important; line-height: 1.08 !important; }
.sub-hero p.lead { font-size: 1.05rem !important; max-width: 100% !important; margin-top: 32px !important; line-height: 1.65 !important; }
.sub-hero .section-tag { justify-content: center !important; font-size: 0.62rem !important; }
.sub-content { padding: 110px 0 !important; }
.sub-content-inner { padding: 0 24px !important; }
.sub-intro {
font-size: 1.3rem !important;
line-height: 1.55 !important;
margin-bottom: 72px !important;
}
.sub-body p { font-size: 1rem !important; line-height: 1.85 !important; margin-bottom: 28px !important; }
.feature-list {
grid-template-columns: 1fr !important;
gap: 0 !important;
margin: 72px 0 !important;
}
.feature-item { padding: 36px 24px !important; }
.feature-item h2 { font-size: 1.15rem !important; }
.feature-item p { font-size: 0.95rem !important; line-height: 1.8 !important; }
.sub-cta-section { padding: 110px 24px !important; }
.sub-cta-section h3 { font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1.1 !important; }
.sub-cta-section p { font-size: 1rem !important; }
/* ── ABOUT PAGE — PRINCIPLES ─────────────────────────────────────────── */
.about-principles { margin-top: 72px !important; padding-top: 72px !important; }
.about-principles-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.about-principle { padding: 30px 24px 26px !important; }
.about-principle h3 { font-size: 1.3rem !important; margin-bottom: 16px !important; }
.about-principle p { font-size: 0.98rem !important; line-height: 1.85 !important; }
.about-section-title { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; margin-bottom: 56px !important; }
/* ── ABOUT PAGE — MEET THE TEAM ──────────────────────────────────────── */
.team-section { padding: 100px 24px !important; }
.team-header { margin-bottom: 72px !important; gap: 22px !important; }
.team-title { font-size: clamp(2.2rem, 8.5vw, 3rem) !important; }
.team-lead { font-size: 1rem !important; line-height: 1.65 !important; }
/* Three-card row collapses to single column on small screens */
.team-grid {
grid-template-columns: 1fr !important;
gap: 22px !important;
max-width: 440px !important;
}
/* Founder card stacks: photo on top, details below */
.team-card--featured {
grid-template-columns: 1fr !important;
gap: 20px !important;
padding: 24px 22px !important;
max-width: 440px !important;
}
.team-card--featured .team-photo { max-width: 280px !important; margin: 0 auto !important; }
.team-card { padding: 18px 18px !important; }
.team-photo { margin-bottom: 14px !important; }
.team-name { font-size: 1.05rem !important; margin-bottom: 4px !important; }
.team-card--featured .team-name { font-size: 1.3rem !important; }
.team-role { font-size: 0.55rem !important; letter-spacing: 0.22em !important; margin-bottom: 10px !important; }
.team-bio { font-size: 0.82rem !important; line-height: 1.65 !important; }
/* ── FLOATING BACK ───────────────────────────────────────────────────── */
.floating-back {
left: 16px !important;
top: 72px !important;
padding: 10px 14px !important;
font-size: 0.6rem !important;
letter-spacing: 0.2em !important;
}
.floating-back:hover { transform: none !important; }
}
/* Narrow phones — tighten everything one more notch */
@media (max-width: 400px) {
.hero-center .hero-content,
.hero-center .hero-content-center {
width: calc(100% - 32px) !important;
gap: 60px !important;
}
.hero-title.hero-title-oneline { font-size: clamp(1.9rem, 9vw, 2.6rem) !important; }
.hero-wordmark { font-size: 17vw !important; letter-spacing: 0.16em !important; }
.hero-actions-center .btn-primary,
.hero-actions-center .btn-ghost {
padding: 16px 20px !important;
font-size: 0.66rem !important;
}
.nav-inner { padding: 14px 16px !important; }
.about-strip { padding: 70px 20px 50px !important; }
.stats-strip { padding: 0 20px 70px !important; }
.sc-item { padding: 40px 20px !important; }
.sc-item-inner { grid-template-columns: 36px 1fr !important; gap: 12px !important; }
.contact-grid { padding: 0 20px !important; }
.sub-hero { padding: 90px 20px 70px !important; }
.sub-content-inner { padding: 0 20px !important; }
.footer-top { padding: 0 20px !important; }
/* On the smallest phones, collapse floating-back label */
.floating-back .fb-text { display: none !important; }
.floating-back { padding: 12px 12px !important; }
}
/* ============================================================================
HERO INTRO ANIMATION
Plays once per session. Sequence:
0.0s — page loads, dark navy fills screen, content hidden
0.1s — SELEQT begins drawing via clipPath wipe (left to right)
0.1–1.0s — letters draw in over 900ms
1.0–1.5s — completed wordmark pauses at full opacity
1.5–2.0s — wordmark shrinks & fades to its watermark state
2.0s — title fades in
2.2s — buttons fade in
Honors prefers-reduced-motion via the pre-paint script in .
============================================================================ */
/* While the intro is active, hide everything that's not part of the sequence. */
html.intro-active body {
/* Lock the page so the user can't scroll during the intro */
overflow: hidden;
}
html.intro-active #navbar {
opacity: 0;
transition: opacity 0.6s ease;
}
html.intro-active .hero-wordmark,
html.intro-active .hero-glow,
html.intro-active .hero-glow-2,
html.intro-active .hero-grid {
opacity: 0;
}
html.intro-active .hero-title,
html.intro-active .hero-actions,
html.intro-active .hero-scroll-hint {
opacity: 0;
transform: translateY(8px);
}
/* Editorial-masthead intro stage. A flex column containing eyebrow + top rule
+ SELEQT SVG outline + bottom rule. All four pieces animate in sequence
then fade together as the watermark settles in behind them. */
.hero-intro-stage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(72vw, 1100px);
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
pointer-events: none;
z-index: 3;
opacity: 0;
}
html.intro-active .hero-intro-stage { opacity: 1; }
html:not(.intro-active) .hero-intro-stage { display: none; }
/* SVG inside the stage — overrides the legacy absolute positioning */
.hero-intro-stage .hero-intro-svg {
position: static;
top: auto;
left: auto;
transform: none;
width: 100%;
height: auto;
pointer-events: none;
display: block;
}
/* Eyebrow — small caps, gold, wide tracking, like the cover of a private
banking annual report. Starts invisible & slightly translated, slides in. */
.hero-intro-eyebrow {
font-family: var(--font-body);
font-size: clamp(0.7rem, 1.1vw, 0.92rem);
font-weight: 400;
letter-spacing: 0.42em;
text-transform: uppercase;
color: rgba(200, 169, 110, 0.92);
white-space: nowrap;
opacity: 0;
transform: translateY(8px);
}
/* Hairlines flanking the wordmark. Each is a thin gold line with a soft
gradient fade at both ends. Scales horizontally from 0 to 1 during the
intro to give the impression of being drawn out from the centre. */
.hero-intro-rule {
width: min(320px, 60%);
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(200, 169, 110, 0.35) 12%,
rgba(232, 201, 138, 0.85) 50%,
rgba(200, 169, 110, 0.35) 88%,
transparent 100%);
transform: scaleX(0);
transform-origin: center;
flex-shrink: 0;
}
/* Mobile: anchor the entire stage at top:47% (where the watermark will end
up), shrink hairlines, and ensure the eyebrow stays legible. */
@media (max-width: 900px) {
.hero-intro-stage {
top: 47%;
width: min(94vw, 540px);
gap: 14px;
}
.hero-intro-eyebrow {
font-size: clamp(0.55rem, 2.2vw, 0.72rem);
letter-spacing: 0.32em;
}
.hero-intro-rule {
width: min(220px, 70%);
}
}
@media (max-width: 540px) {
.hero-intro-stage {
width: min(96vw, 460px);
gap: 12px;
}
.hero-intro-eyebrow {
font-size: clamp(0.5rem, 2.4vw, 0.66rem);
letter-spacing: 0.28em;
}
.hero-intro-rule {
width: min(180px, 70%);
}
}
/* When the intro is RUNNING (body has .intro-running), play the sequence.
Choreography (desktop, all delays from page-load):
0.10-0.55s eyebrow fades in + slides up
0.50-1.05s top hairline draws from centre (scaleX 0 -> 1)
0.90-2.00s SELEQT outline wipes left -> right
1.80-2.35s bottom hairline draws (mirror)
2.30-2.55s brief hold so the composition reads
2.55-3.10s whole masthead fades out (introFade on the stage)
2.85-3.65s filled wordmark settles into position
2.95-3.55s+ remaining hero pieces (glow, grid, nav, title, etc.) cascade in
4.30s cleanup (main.js removes intro classes) */
html.intro-running .hero-intro-eyebrow {
animation: introEyebrowIn 600ms cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards;
}
html.intro-running .hero-intro-rule-top {
animation: introRuleDraw 600ms cubic-bezier(0.22, 1, 0.36, 1) 500ms forwards;
}
html.intro-running .intro-wipe-rect {
animation: introWipe 1100ms cubic-bezier(0.55, 0.05, 0.35, 1) 900ms forwards;
}
html.intro-running .hero-intro-rule-bottom {
animation: introRuleDraw 600ms cubic-bezier(0.22, 1, 0.36, 1) 1800ms forwards;
}
html.intro-running .hero-intro-stage {
animation: introFade 600ms cubic-bezier(0.4, 0, 0.6, 1) 2550ms forwards;
}
html.intro-running .hero-wordmark {
animation: wordmarkSettle 800ms cubic-bezier(0.4, 0, 0.2, 1) 2850ms forwards;
}
html.intro-running .hero-glow,
html.intro-running .hero-glow-2 {
animation: glowIn 800ms ease-out 2950ms forwards;
}
html.intro-running .hero-grid {
animation: gridIn 800ms ease-out 3050ms forwards;
}
html.intro-running #navbar {
animation: navIn 600ms ease-out 3200ms forwards;
}
html.intro-running .hero-title {
animation: heroPartIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 3350ms forwards;
}
html.intro-running .hero-actions {
animation: heroPartIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 3500ms forwards;
}
html.intro-running .hero-scroll-hint {
animation: heroPartIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 3650ms forwards;
}
/* New keyframes for the masthead pieces */
@keyframes introEyebrowIn {
from { opacity: 0; transform: translateY(8px); letter-spacing: 0.6em; }
to { opacity: 1; transform: translateY(0); letter-spacing: 0.42em; }
}
@keyframes introRuleDraw {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Keyframes */
@keyframes introWipe {
from { width: 0; }
to { width: 1000px; }
}
@keyframes introFade {
from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
to { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}
@keyframes wordmarkSettle {
/* Starts from a slightly larger state, drops into the regular watermark spot.
The "from" state matches the intro SVG's apparent size. */
from {
opacity: 0;
transform: translate(-50%, -50%) scale(1.04);
}
to {
opacity: var(--wordmark-end-opacity, 1);
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes glowIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes gridIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes navIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroPartIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile — tightened intro choreography. Same composition (eyebrow + rules +
SELEQT), ~25% faster so phone users aren't waiting through a desktop-paced
sequence on a small screen. Final cleanup at ~3700ms (main.js). */
@media (max-width: 900px) {
html.intro-running .hero-intro-eyebrow {
animation-duration: 500ms;
animation-delay: 100ms;
}
html.intro-running .hero-intro-rule-top {
animation-duration: 500ms;
animation-delay: 400ms;
}
html.intro-running .intro-wipe-rect {
animation-duration: 900ms;
animation-delay: 700ms;
}
html.intro-running .hero-intro-rule-bottom {
animation-duration: 500ms;
animation-delay: 1500ms;
}
html.intro-running .hero-intro-stage {
animation-delay: 2100ms;
}
/* On mobile the masthead and the settled wordmark occupy the SAME vertical
position (both at top:47%), so any timing overlap between them reads as
two SELEQTs crossfading on top of each other. We push the wordmark to
start AFTER the masthead has fully faded out (stage fade ends at 2700ms,
watermark begins at 2800ms with a 100ms breath). Downstream cascade
pushed by 400ms to maintain rhythm. */
html.intro-running .hero-wordmark {
animation-delay: 2800ms;
}
html.intro-running .hero-glow,
html.intro-running .hero-glow-2 {
animation-delay: 2900ms;
}
html.intro-running .hero-grid {
animation-delay: 3000ms;
}
html.intro-running #navbar {
animation-delay: 3150ms;
}
html.intro-running .hero-title {
animation-delay: 3300ms;
}
html.intro-running .hero-actions {
animation-delay: 3450ms;
}
html.intro-running .hero-scroll-hint {
animation-delay: 3600ms;
}
}
/* ============================================================================
MOTION ENHANCEMENTS
Additive polish on top of the foundational styles above. Includes:
1. Magnetic CTA hooks
2. Slow breathing on the hero wordmark
3. Cursor-tracked hero glow easing
4. Split-text reveal primitives (words slide up from a clipped baseline)
5. Marquee pause-on-hover + variable speed
6. Outbound page-transition curtain
7. Carousel number-flip animation
Honors prefers-reduced-motion at the bottom.
============================================================================ */
/* 1 — Magnetic CTA hooks. JS writes inline transform on hover; this just primes
the GPU layer and overrides the existing translateY(-2px) hover lift so the
pointer-following motion reads cleanly. */
.btn-primary.magnetic,
.btn-ghost.magnetic {
will-change: transform;
}
.btn-primary.magnetic:hover,
.btn-ghost.magnetic:hover {
transform: none;
}
/* 2 — Wordmark breathing. Pulses both scale AND stroke colour for visible
motion. Stroke colours are stored in CSS variables so mobile (which uses
a brighter base stroke at rgba(244,241,234,0.42)) can override and pulse
from bright to brighter, not from dim to bright. */
.hero-wordmark {
--breathe-dim: rgba(244, 241, 234, 0.10);
--breathe-lit: rgba(244, 241, 234, 0.26);
animation: wordmarkBreathe 6s ease-in-out 2.5s infinite;
}
@media (max-width: 900px) {
.hero-wordmark {
/* Mobile wordmark has stroke 0.42 by default — pulse stays in that range */
--breathe-dim: rgba(244, 241, 234, 0.42);
--breathe-lit: rgba(244, 241, 234, 0.66);
}
}
@keyframes wordmarkBreathe {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
-webkit-text-stroke-color: var(--breathe-dim);
}
50% {
transform: translate(-50%, -50%) scale(1.035);
-webkit-text-stroke-color: var(--breathe-lit);
}
}
/* 3 — Hero glow ease. Smooth transition so JS-driven translates feel like
floating light. JS now uses larger offsets (see main.js) so the parallax
is properly visible. */
.hero-glow,
.hero-glow-2 {
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 4 — Split-text reveal. Each word is wrapped into .split-word > .split-word-inner.
The outer clips, the inner slides up. Triggered when the parent .reveal becomes
visible (existing IntersectionObserver in main.js handles that). */
.split-word {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
line-height: inherit;
/* leaves room for descenders (g, p, y) so they aren't clipped by overflow:hidden */
padding: 0.05em 0.02em 0.2em;
margin-bottom: -0.2em;
}
.split-word-inner {
display: inline-block;
transform: translateY(110%);
transition: transform 0.95s var(--ease-out);
will-change: transform;
}
.reveal.visible .split-word-inner,
.is-text-revealed .split-word-inner {
/* Released by either the natural .reveal parent OR the host title itself
(fallback for parents whose box is removed by display:contents). */
transform: translateY(0);
}
/* 5 — Marquee tuning. Constant duration (no JS speed changes — those caused
visible loop jumps when the duration ping-ponged mid-animation). Hover-
pause is guarded by @media (hover: hover) so it only fires on devices
that have a real hover state — prevents the sticky pause that touch
devices can produce when :hover lingers after a tap. */
.marquee-track {
animation-duration: 14s;
}
@media (hover: hover) {
.marquee-wrap:hover .marquee-track {
animation-play-state: paused;
}
}
/* 6 — Page-transition curtain. A single continuous downward wipe spans the
navigation boundary: outbound panel slides DOWN from above to cover, then
inbound a pseudo-::before slides DOWN further off the bottom of the screen.
To the eye, one navy panel wipes through the viewport without seam.
Outbound side uses a JS-injected .page-transition overlay (panel starts
above the viewport, translates down to cover). Inbound side uses an
html::before pseudo so the covering layer exists at first paint — no flash
while waiting for main.js. */
/* --- Outbound overlay (built by main.js) --- */
.page-transition {
position: fixed;
inset: 0;
z-index: 99999;
pointer-events: none;
overflow: hidden;
}
.page-transition-panel {
position: absolute;
inset: 0;
/* Outbound panel — deep navy with a soft radial gold glow at centre to
halo the SELEQT wordmark. Centres the wordmark with flex so it sits
dead-centre regardless of viewport size. The wordmark is a child of
the panel, so it inherits the panel's transform and slides as one
piece — no separate fade-in. */
background-color: var(--ink);
background-image: radial-gradient(ellipse at center, rgba(200, 169, 110, 0.22) 0%, transparent 65%);
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-100%);
will-change: transform;
transition: transform 0.75s cubic-bezier(0.7, 0, 0.2, 1);
}
/* SELEQT wordmark — bold Cormorant, generous letter-spacing for the
editorial brand voice, warm gold against the navy. Sized to feel like
a credit page or chapter break, not a watermark. */
.page-transition-logo {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.4rem, 7vw, 5rem);
letter-spacing: 0.24em;
color: var(--gold-light);
/* The letter-spacing nudges visual centre to the right; this offsets it. */
padding-left: 0.24em;
user-select: none;
pointer-events: none;
}
.page-transition.is-leaving .page-transition-panel {
transform: translateY(0);
}
/* --- Inbound curtain (no JS dependency for first paint) ---
Pre-paint script in adds .is-page-entering to if the user
arrived via the outbound curtain. The pseudo-::before below appears
immediately, covering the new page. main.js then adds .is-page-entered,
which animates the pseudo down off the screen. */
html.is-page-entering {
/* Lock scroll so the entering page can't jump around behind the curtain. */
overflow: hidden;
}
html.is-page-entering body {
/* Block input until the curtain has lifted */
pointer-events: none;
}
html.is-page-entering::before {
/* Inbound curtain — visually identical to the outbound panel, including
the SELEQT wordmark, so the navigation reads as one continuous moment.
'content' renders the wordmark; flex centres it; the rest mirrors the
outbound .page-transition-panel styling. */
content: 'SELEQT';
position: fixed;
inset: 0;
z-index: 99998;
background-color: var(--ink);
background-image: radial-gradient(ellipse at center, rgba(200, 169, 110, 0.22) 0%, transparent 65%);
background-repeat: no-repeat;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.4rem, 7vw, 5rem);
letter-spacing: 0.24em;
padding-left: 0.24em;
color: var(--gold-light);
transform: translateY(0);
will-change: transform;
pointer-events: none;
}
html.is-page-entering.is-page-entered::before {
transform: translateY(100%);
transition: transform 0.75s cubic-bezier(0.7, 0, 0.2, 1);
}
/* 7 — Carousel number flip. The number inside .sc-index-current is rewrapped
each change so the wrap animation re-fires. */
.sc-index-current {
position: relative;
overflow: hidden;
display: inline-block;
min-width: 2ch;
vertical-align: bottom;
}
.sc-index-flip {
display: inline-block;
animation: numberFlipIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes numberFlipIn {
0% { transform: translateY(-90%); opacity: 0; }
60% { opacity: 1; }
100% { transform: translateY(0); opacity: 1; }
}
/* 8 — Hero wordmark spotlight. A gold-stroked twin of the wordmark sits over
the original, hidden behind a radial mask. JS updates --spot-x / --spot-y
on mousemove to follow the cursor, so the part of the wordmark under the
cursor 'lights up' in gold while the rest stays dim white. */
.hero-wordmark-spotlight {
position: absolute;
/* Match the base .hero-wordmark positioning byte-for-byte */
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-display);
font-weight: 500;
font-size: 22vw;
line-height: 1;
letter-spacing: 0.08em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(232, 201, 138, 0.92);
pointer-events: none;
user-select: none;
white-space: nowrap;
z-index: 1;
opacity: 0;
transition: opacity 0.55s ease;
--spot-x: 50%;
--spot-y: 50%;
--spot-radius: 240px;
-webkit-mask-image: radial-gradient(circle var(--spot-radius) at var(--spot-x) var(--spot-y), black 0%, rgba(0,0,0,0.7) 35%, transparent 75%);
mask-image: radial-gradient(circle var(--spot-radius) at var(--spot-x) var(--spot-y), black 0%, rgba(0,0,0,0.7) 35%, transparent 75%);
}
/* Reveal the spotlight overlay only after the intro has settled, and only on
pointer-equipped devices that are actively hovering the hero. */
.hero:hover .hero-wordmark-spotlight {
opacity: 1;
}
html.intro-active .hero-wordmark-spotlight,
html.intro-running .hero-wordmark-spotlight {
opacity: 0 !important;
}
@media (max-width: 900px) {
.hero-wordmark-spotlight {
top: 47%;
font-size: 16vw;
letter-spacing: 0.12em;
/* Disable spotlight on small touch screens — there's no cursor to follow. */
display: none;
}
}
/* 9 — Reduced-motion accommodations for everything added above. */
@media (prefers-reduced-motion: reduce) {
.hero-wordmark { animation: none !important; }
.hero-wordmark-spotlight { display: none !important; }
.hero-glow, .hero-glow-2 { transition: none !important; }
.split-word-inner { transform: none !important; transition: none !important; }
.marquee-track { animation-duration: 0s !important; animation: none !important; }
.page-transition-panel { transition: none !important; }
html.is-page-entering::before { display: none !important; }
.sc-index-flip { animation: none !important; }
.btn-primary.magnetic, .btn-ghost.magnetic { transform: none !important; }
}
/* ============================================
INSIGHTS — LISTING PAGE
The /insights.html landing: editorial header, featured article card,
and an "in development" grid of upcoming pieces. Designed to look
sparse-but-purposeful when the catalogue is small, and scale up
gracefully as articles are added.
============================================ */
.insights-list {
padding: 0 0 140px;
background: var(--paper);
}
.insights-inner {
max-width: 920px;
margin: 0 auto;
}
/* Featured / latest article block */
.insight-card--featured {
padding: 64px 0 56px;
border-bottom: 1px solid var(--ink-line);
margin-bottom: 84px;
}
.insight-card-meta {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 26px;
}
.insight-category {
color: var(--gold);
letter-spacing: 0.22em;
font-weight: 400;
}
.insight-meta-dot { color: var(--ink-faint); }
.insight-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.75rem, 3.6vw, 2.7rem);
line-height: 1.15;
color: var(--navy);
margin-bottom: 22px;
letter-spacing: -0.012em;
}
.insight-title em { font-style: italic; color: var(--gold); font-weight: 300; }
.insight-title a {
color: inherit;
text-decoration: none;
transition: color 0.3s var(--ease-out);
}
.insight-title a:hover { color: var(--gold); }
.insight-excerpt {
font-size: 1rem;
line-height: 1.75;
color: var(--ink-soft);
max-width: 60ch;
margin-bottom: 30px;
}
.insight-cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid var(--gold-dim);
padding-bottom: 4px;
transition: gap 0.3s var(--ease-out), border-color 0.3s;
}
.insight-cta:hover { gap: 16px; border-color: var(--gold); }
.insight-cta-arrow { transition: transform 0.3s var(--ease-out); }
.insight-cta:hover .insight-cta-arrow { transform: translateX(4px); }
/* "In development" — placeholder cards announcing pipeline */
.insights-upcoming-heading {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 400;
color: var(--navy);
margin-bottom: 10px;
letter-spacing: -0.005em;
}
.insights-upcoming-note {
font-size: 0.92rem;
color: var(--ink-soft);
margin-bottom: 44px;
max-width: 56ch;
line-height: 1.7;
}
.insights-upcoming-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 56px;
}
.insight-upcoming {
padding: 32px 0;
border-top: 1px solid var(--ink-line);
opacity: 0.82;
}
.insight-upcoming .insight-category {
display: block;
margin-bottom: 12px;
font-size: 0.62rem;
letter-spacing: 0.22em;
}
.insight-upcoming h2 {
font-family: var(--font-display);
font-size: 1.18rem;
font-weight: 400;
color: var(--navy);
line-height: 1.25;
margin-bottom: 12px;
letter-spacing: -0.005em;
}
.insight-upcoming-desc {
font-size: 0.88rem;
line-height: 1.65;
color: var(--ink-soft);
}
@media (max-width: 768px) {
.insight-card--featured { padding: 40px 0 36px; margin-bottom: 60px; }
.insights-upcoming-grid { grid-template-columns: 1fr; gap: 0; }
.insight-upcoming { padding: 26px 0; }
.insight-card-meta { flex-wrap: wrap; gap: 10px; font-size: 0.62rem; }
}
/* ============================================
INSIGHTS — INDIVIDUAL ARTICLE
Long-form reading layout. Narrower column (720px) for optimal line
length, generous line-height, editorial typography with Cormorant
for headings and italics, Outfit for body.
============================================ */
.article {
background: var(--paper);
}
.article-container {
max-width: 720px;
padding: 0 32px;
}
.article-header {
padding: 140px 0 56px;
background: var(--paper);
}
.article-meta-top {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 30px;
}
.article-meta-top .article-category {
color: var(--gold);
letter-spacing: 0.22em;
}
.article-meta-top .article-meta-dot { color: var(--ink-faint); }
.article-title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(2rem, 4.6vw, 3.3rem);
line-height: 1.1;
color: var(--navy);
margin-bottom: 26px;
letter-spacing: -0.014em;
}
.article-title em { font-style: italic; color: var(--gold); font-weight: 300; }
.article-lead {
font-family: var(--font-display);
font-style: italic;
font-size: 1.22rem;
line-height: 1.6;
color: var(--ink-soft);
max-width: 56ch;
margin-bottom: 34px;
font-weight: 400;
}
.article-byline {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold);
border-top: 1px solid var(--ink-line);
padding-top: 18px;
}
.article-body { padding: 32px 0 72px; }
.article-body p {
font-size: 1.05rem;
line-height: 1.85;
color: var(--ink-strong);
margin-bottom: 1.4em;
font-weight: 300;
}
.article-body p em { font-style: italic; color: var(--gold); }
.article-body p strong {
font-weight: 500;
color: var(--navy-deep);
}
.article-body ol, .article-body ul {
margin: 0 0 1.4em;
padding-left: 1.5em;
color: var(--ink-strong);
font-size: 1.05rem;
line-height: 1.85;
font-weight: 300;
}
.article-body li { margin-bottom: 0.6em; padding-left: 0.3em; }
.article-body ol li::marker { color: var(--gold); font-weight: 500; }
.article-body li strong { font-weight: 500; color: var(--navy-deep); }
.article-body h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.5rem, 2.8vw, 2.1rem);
line-height: 1.2;
color: var(--navy);
margin: 2.6em 0 1em;
letter-spacing: -0.005em;
}
.article-body blockquote {
border-left: 2px solid var(--gold);
padding: 0.3em 0 0.3em 1.8em;
margin: 2.2em 0;
font-family: var(--font-display);
font-style: italic;
font-size: 1.28rem;
line-height: 1.55;
color: var(--ink-strong);
max-width: 60ch;
}
.article-body blockquote em {
font-style: normal;
color: var(--gold);
font-weight: 500;
}
.article-body .article-ol {
margin: 2em 0;
padding-left: 0;
counter-reset: article-counter;
list-style: none;
}
.article-body .article-ol li {
position: relative;
padding-left: 50px;
margin-bottom: 1.4em;
font-size: 1.02rem;
line-height: 1.75;
color: var(--ink-strong);
font-weight: 300;
}
.article-body .article-ol li::before {
counter-increment: article-counter;
content: counter(article-counter, decimal-leading-zero);
position: absolute;
left: 0;
top: 4px;
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--gold);
}
.article-body .article-ol li strong {
display: block;
color: var(--navy);
margin-bottom: 6px;
font-weight: 500;
}
.article-footer {
border-top: 1px solid var(--ink-line);
padding: 56px 0 24px;
}
.article-footer-inner {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: start;
}
.article-footer-about h2 {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 400;
color: var(--navy);
margin-bottom: 14px;
}
.article-footer-about p {
font-size: 0.95rem;
line-height: 1.7;
color: var(--ink-soft);
margin-bottom: 16px;
}
.article-footer-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid var(--gold-dim);
padding-bottom: 3px;
transition: gap 0.3s var(--ease-out);
}
.article-footer-link:hover { gap: 12px; }
.article-footer-next { text-align: right; }
.article-footer-eyebrow {
display: block;
font-family: var(--font-body);
font-size: 0.62rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-faint);
margin-bottom: 12px;
}
.article-footer-next-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 1.4rem;
font-style: italic;
color: var(--navy);
text-decoration: none;
transition: color 0.3s var(--ease-out), gap 0.3s var(--ease-out);
}
.article-footer-next-link:hover { color: var(--gold); gap: 14px; }
/* ── Article tables ──────────────────────────────────────────────────
Data tables (comparison grids, tax treatment matrices, etc.) within
long-form articles. Editorial styling: gold underline on header row,
subtle dividers between data rows, generous padding for legibility.
Horizontal scroll on narrow screens. */
.article-body .table-wrap {
margin: 2.4em -32px;
padding: 0 32px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.article-body table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: 0.92rem;
min-width: 540px;
}
.article-body table thead {
border-bottom: 1.5px solid var(--gold);
}
.article-body table th {
text-align: left;
font-weight: 500;
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--navy);
padding: 14px 16px 14px 0;
vertical-align: bottom;
}
.article-body table th:not(:last-child),
.article-body table td:not(:last-child) {
padding-right: 24px;
}
.article-body table td {
padding: 16px 16px 16px 0;
border-bottom: 1px solid var(--ink-line);
color: var(--ink-strong);
vertical-align: top;
line-height: 1.55;
font-weight: 300;
}
.article-body table tbody tr:last-child td { border-bottom: none; }
.article-body table td:first-child {
font-weight: 400;
color: var(--navy);
}
.article-body .table-source {
font-family: var(--font-body);
font-size: 0.78rem;
font-style: italic;
color: var(--ink-soft);
margin: -1.4em 0 2.4em;
line-height: 1.6;
}
/* ── Article FAQ (definition list) ──────────────────────────────────
- Question
- Answer
...
Semantically correct for Q&A, plus FAQPage JSON-LD makes the article
eligible for Google's "People Also Ask" rich results. */
.article-body .article-faq {
margin: 1.8em 0;
}
.article-body .article-faq dt {
font-family: var(--font-display);
font-size: 1.22rem;
font-weight: 400;
color: var(--navy);
margin: 1.8em 0 0.55em;
letter-spacing: -0.005em;
line-height: 1.3;
}
.article-body .article-faq dt:first-child { margin-top: 0; }
.article-body .article-faq dd {
margin: 0 0 1.2em;
font-size: 1rem;
line-height: 1.75;
color: var(--ink-strong);
font-weight: 300;
}
/* ── Closing paragraph (slightly elevated tone after the FAQ) ────── */
.article-body .article-closing {
font-family: var(--font-display);
font-style: italic;
font-size: 1.18rem;
line-height: 1.65;
color: var(--ink-strong);
margin-top: 2.4em;
padding-top: 2em;
border-top: 1px solid var(--ink-line);
}
.article-body .article-closing em {
font-style: normal;
color: var(--gold);
font-weight: 500;
}
@media (max-width: 768px) {
.article-header { padding: 110px 0 40px; }
.article-body { padding: 20px 0 56px; }
.article-body p { font-size: 1rem; }
.article-body blockquote { font-size: 1.1rem; padding-left: 1.2em; }
.article-footer-inner { grid-template-columns: 1fr; gap: 36px; }
.article-footer-next { text-align: left; }
.article-body .table-wrap { margin: 2em -24px; padding: 0 24px; }
.article-body table { font-size: 0.86rem; min-width: 480px; }
.article-body .article-faq dt { font-size: 1.1rem; }
.article-body .article-closing { font-size: 1.05rem; }
}
/* ============================================
PREMIUM 3D — universal card tilt + section cursor glow
The JS in main.js (premium3D IIFE) writes inline transforms on tilted
cards and updates --glow-x / --glow-y on glow sections. This block
sets up the supporting CSS — perspective, transitions, pseudo-element
glow render — without overriding the existing component styling.
============================================ */
/* Tilted cards need preserve-3d so the rotation actually feels 3D
(children sit in the rotated plane) and overflow doesn't clip the
subtle elevation shadow during tilt. */
.team-card,
.feature-item,
.about-principle,
.insight-card--featured,
.insight-upcoming,
.stat {
transform-style: preserve-3d;
will-change: transform;
}
/* ============================================
HERO HAIRLINE — minimal cursor interaction on full-viewport heroes
A thin gold vertical line (with a small leading node dot) glides across
the sub-page hero following the cursor, like a precision ruler. The line
trails slightly behind the dot for a quiet sense of motion. Injected by
main.js (heroHairline). z-index 1 keeps it below the heading content (2).
============================================ */
.hero-hairline {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 1px;
background: linear-gradient(
to bottom,
transparent,
rgba(200, 169, 110, 0.42) 22%,
rgba(200, 169, 110, 0.42) 78%,
transparent
);
opacity: 0;
z-index: 1;
pointer-events: none;
transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s var(--ease-out);
will-change: transform;
}
.hero-hairline--h {
top: 0; left: 0; right: 0; bottom: auto;
width: 100%; height: 1px;
background: linear-gradient(
to right,
transparent,
rgba(200, 169, 110, 0.42) 22%,
rgba(200, 169, 110, 0.42) 78%,
transparent
);
}
.hero-hairline-dot {
position: absolute;
top: 0; left: 0;
width: 5px; height: 5px;
margin: -2.5px 0 0 -2.5px;
border-radius: 50%;
background: var(--gold-light);
box-shadow: 0 0 14px 2px rgba(212, 176, 106, 0.5);
opacity: 0;
z-index: 1;
pointer-events: none;
transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s var(--ease-out);
will-change: transform;
}
.sub-hero.hairline-on .hero-hairline,
.sub-hero.hairline-on .hero-hairline-dot { opacity: 1; }
/* Clicked grid square — a temporary gold-bordered tile that flashes over
the cell you click, then fades. Injected by heroGridFlash in main.js;
z-index 1 keeps it above the grid pseudo but below the heading content. */
.grid-square-flash {
position: absolute;
width: 96px;
height: 96px;
border: 1px solid var(--gold-light);
background: rgba(200, 169, 110, 0.05);
box-shadow: 0 0 18px rgba(200, 169, 110, 0.14), inset 0 0 12px rgba(200, 169, 110, 0.06);
z-index: 1;
pointer-events: none;
animation: gridSquareFlash 2s var(--ease-out) forwards;
}
@keyframes gridSquareFlash {
0% { opacity: 0; }
8% { opacity: 1; }
55% { opacity: 1; } /* hold lit longer */
100% { opacity: 0; }
}
/* Shooting-star streaks that travel ALONG the hero grid lines. Each comet
rides a single horizontal or vertical grid line (positions snapped to the
96px grid by heroGridStreaks in main.js) and slides the full length of it.
A mix of axes, lines, directions, lengths and speeds keeps the movement
abstract rather than a tidy parallel sweep. z-index 1 keeps them behind
the heading content. */
.grid-streak {
position: absolute;
z-index: 1;
opacity: 0;
pointer-events: none;
border-radius: 2px;
will-change: transform, opacity;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* bright comet head at the leading edge */
.grid-streak::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--gold-light);
box-shadow: 0 0 9px 1px rgba(212, 176, 106, 0.6);
}
/* Horizontal: rides a horizontal grid line, left to right (or reversed) */
.grid-streak--h {
left: 0;
width: var(--len, 180px);
height: 2px;
margin-top: -1px;
background: linear-gradient(90deg, rgba(212, 176, 106, 0) 0%, rgba(212, 176, 106, 0.7) 100%);
animation-name: streakH;
}
.grid-streak--h::after { right: 0; top: 50%; margin-top: -1.5px; }
.grid-streak--h.is-rev {
background: linear-gradient(270deg, rgba(212, 176, 106, 0) 0%, rgba(212, 176, 106, 0.7) 100%);
animation-name: streakHRev;
}
.grid-streak--h.is-rev::after { right: auto; left: 0; }
/* Vertical: rides a vertical grid line, top to bottom (or reversed) */
.grid-streak--v {
top: 0;
width: 2px;
height: var(--len, 180px);
margin-left: -1px;
background: linear-gradient(180deg, rgba(212, 176, 106, 0) 0%, rgba(212, 176, 106, 0.7) 100%);
animation-name: streakV;
}
.grid-streak--v::after { bottom: 0; left: 50%; margin-left: -1.5px; }
.grid-streak--v.is-rev {
background: linear-gradient(0deg, rgba(212, 176, 106, 0) 0%, rgba(212, 176, 106, 0.7) 100%);
animation-name: streakVRev;
}
.grid-streak--v.is-rev::after { bottom: auto; top: 0; }
@keyframes streakH {
0% { transform: translateX(-12vw); opacity: 0; }
8% { opacity: 0.75; }
88% { opacity: 0.75; }
100% { transform: translateX(112vw); opacity: 0; }
}
@keyframes streakHRev {
0% { transform: translateX(112vw); opacity: 0; }
8% { opacity: 0.75; }
88% { opacity: 0.75; }
100% { transform: translateX(-12vw); opacity: 0; }
}
@keyframes streakV {
0% { transform: translateY(-12vh); opacity: 0; }
8% { opacity: 0.75; }
88% { opacity: 0.75; }
100% { transform: translateY(112vh); opacity: 0; }
}
@keyframes streakVRev {
0% { transform: translateY(112vh); opacity: 0; }
8% { opacity: 0.75; }
88% { opacity: 0.75; }
100% { transform: translateY(-12vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.grid-streak { display: none; }
}
/* Scroll cue at the bottom of each full-viewport hero */
.sub-hero-scroll {
position: absolute;
left: 50%;
bottom: 34px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
z-index: 2;
pointer-events: none;
}
.sub-hero-scroll span:first-child {
font-family: var(--font-body);
font-size: 0.56rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--white-dim);
}
.sub-hero-scroll-line {
width: 1px;
height: 46px;
background: rgba(244, 241, 234, 0.18);
position: relative;
overflow: hidden;
}
.sub-hero-scroll-line::after {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%;
height: 50%;
background: linear-gradient(to bottom, transparent, var(--gold-light));
animation: subHeroScrollPulse 2.1s var(--ease-in-out) infinite;
}
@keyframes subHeroScrollPulse {
0% { transform: translateY(-100%); opacity: 0; }
35% { opacity: 1; }
100% { transform: translateY(200%); opacity: 0; }
}
/* ============================================
FEATURED BLOG CARD — magazine cover restyle
Bumps the otherwise-minimal featured card into a "this is the cover
piece of this issue" presentation: paper card, soft floating shadow,
gold left rail, generous padding, decorative issue marker top-right.
Tilt + lift come from the universal premium3D tilt above.
============================================ */
.insight-card--featured {
background: var(--paper);
padding: 56px 56px 48px;
margin-bottom: 84px;
border-bottom: none;
box-shadow:
0 32px 64px -34px rgba(10, 26, 53, 0.22),
0 12px 32px -18px rgba(10, 26, 53, 0.12);
position: relative;
overflow: hidden;
transition: box-shadow 0.5s var(--ease-out);
}
/* Gold left rail — a sharper version of the existing top-left accent
that runs the full height of the card. */
.insight-card--featured::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 3px;
height: 100%;
background: var(--gold);
}
/* "No. 01" issue marker top-right. Auto-counted via CSS so future
articles get No. 02, 03, … without manual updating. */
.insights-inner { counter-reset: featured-counter; }
.insight-card--featured::after {
counter-increment: featured-counter;
content: 'No. ' counter(featured-counter, decimal-leading-zero);
position: absolute;
top: 32px; right: 36px;
font-family: var(--font-body);
font-size: 0.62rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.62;
z-index: 2;
}
.insight-card--featured:hover {
box-shadow:
0 44px 96px -34px rgba(10, 26, 53, 0.28),
0 18px 48px -20px rgba(10, 26, 53, 0.18);
}
@media (max-width: 768px) {
.insight-card--featured { padding: 36px 28px 32px; }
.insight-card--featured::after { top: 20px; right: 24px; }
}
/* ============================================
ARTICLE BODY — editorial polish
Drop cap on the first body paragraph (classic editorial flourish),
row-hover on tables, slightly more dramatic blockquote.
============================================ */
/* Drop cap — large gold Cormorant initial on the first body paragraph.
:first-of-type targets the first child of .article-body's
container, ignoring any preceding non-paragraph elements. */
.article-body .container > p:first-of-type::first-letter {
font-family: var(--font-display);
font-weight: 500;
font-style: italic;
font-size: 4.6em;
float: left;
line-height: 0.86;
margin: 0.08em 0.14em 0 -0.04em;
color: var(--gold);
padding: 0;
}
/* Table rows tint subtly toward gold on hover */
.article-body table tbody tr {
transition: background 0.25s var(--ease-out);
}
.article-body table tbody tr:hover {
background: rgba(200, 169, 110, 0.05);
}
/* Slightly deeper blockquote — the gold rule grows on hover to telegraph
that it's a notable pull-quote. */
.article-body blockquote {
transition: border-left-width 0.4s var(--ease-out), padding-left 0.4s var(--ease-out);
}
.article-body blockquote:hover {
border-left-width: 4px;
padding-left: 2em;
}
/* ============================================
WHATSAPP FLOATING BUTTON
Injected by main.js. Fixed bottom-right, doesn't conflict with the
.floating-back link (top-left). Uses WhatsApp brand green.
============================================ */
.whatsapp-fab {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 998;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25d366;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
text-decoration: none;
transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s;
cursor: pointer;
}
.whatsapp-fab:hover {
background: #20bd5a;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45), 0 3px 8px rgba(0, 0, 0, 0.2);
}
.whatsapp-fab:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 4px;
}
.whatsapp-fab svg { display: block; }
@media (max-width: 540px) {
.whatsapp-fab { width: 50px; height: 50px; bottom: 18px; right: 18px; }
.whatsapp-fab svg { width: 24px; height: 24px; }
}
@media print {
.whatsapp-fab { display: none; }
}
/* ============================================
COOKIE CONSENT BANNER
Injected by main.js on first visit. One row on desktop, stacks on mobile.
============================================ */
.cookie-banner {
position: fixed;
left: 24px;
right: 24px;
bottom: 24px;
z-index: 1100;
background: var(--navy);
color: var(--white);
border: 1px solid var(--border-gold);
border-radius: 4px;
padding: 18px 22px;
display: flex;
align-items: center;
gap: 24px;
box-shadow: 0 12px 36px rgba(6, 14, 28, 0.35);
font-family: var(--font-body);
font-size: 0.86rem;
line-height: 1.5;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
max-width: 920px;
margin: 0 auto;
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
.cookie-text {
flex: 1;
margin: 0;
color: var(--white-dim);
}
.cookie-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.cookie-btn {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 10px 18px;
border-radius: 2px;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
background: transparent;
color: var(--white);
border: 1px solid var(--white-faint);
}
.cookie-btn:hover {
border-color: var(--white-dim);
}
.cookie-btn.cookie-accept {
background: var(--gold);
color: var(--navy-deep);
border-color: var(--gold);
}
.cookie-btn.cookie-accept:hover {
background: var(--gold-light);
border-color: var(--gold-light);
}
.cookie-btn:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
@media (max-width: 640px) {
.cookie-banner {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 16px 18px;
left: 12px;
right: 12px;
bottom: 12px;
}
.cookie-actions { justify-content: flex-end; }
}
/* ============================================
ACCESSIBILITY — keyboard focus rings
Restores visible focus indication that the legacy `outline: none`
rules suppressed. Only fires for keyboard navigation, not mouse clicks.
============================================ */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.cs-trigger:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.cs-menu li:focus-visible,
.cs-menu li.is-highlighted {
outline: 2px solid var(--gold);
outline-offset: -2px;
}
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}