@font-face {
/* Single-bar dollar sign — Concrette's $ is double-bar. This maps ONLY
U+0024 to a single-bar serif (Georgia/Times), Sofia Pro as last resort. */
font-family: 'WBDollar';
src: local('Georgia'), local('Times New Roman'), local('Times'), url('../../fonts/SofiaPro-Regular.otf') format('opentype');
unicode-range: U+0024;
}
/* WaterBridge — internal pages, v2 (light editorial direction)
Same brand fonts + colors as v1; ivory canvas, indigo type,
amber as the only chromatic accent. No gradients, no dark glow. */
@font-face {
font-family: 'Concrette';
src: url('../../fonts/ConcretteM-TRIAL-Regular.otf') format('opentype');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Concrette S';
src: url('../../fonts/ConcretteS-TRIAL-Medium.otf') format('opentype');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Sofia Pro';
src: url('../../fonts/SofiaPro-Regular.otf') format('opentype');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Sofia Pro';
src: url('../../fonts/SofiaPro-Medium.otf') format('opentype');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Sofia Pro';
src: url('../../fonts/SofiaPro-SemiBold.otf') format('opentype');
font-weight: 600; font-style: normal; font-display: swap;
}
:root {
--indigo: #061A4A;
--indigo-soft: #0a1f5a;
--amber: #FFB400;
--amber-soft: #ffd36a;
--aqua: #1AC6FF;
--slate: #5A6E73;
--ivory: #F7F6F3;
--paper: #FBFAF6; /* lighter cream for nested surfaces */
--rule: #1D1D1D;
--rule-soft: rgba(29,29,29,0.12);
--rule-hairline: rgba(29,29,29,0.08);
--carbon: #1D1D1D;
--serif: 'WBDollar', 'Concrette', 'DM Serif Display', serif;
--serif-alt: 'WBDollar', 'Concrette S', 'Concrette', serif;
--sans: 'Sofia Pro', 'Poppins', system-ui, sans-serif;
--mono: 'Sofia Pro', system-ui, sans-serif;
--ease-out: cubic-bezier(.22,.7,.2,1);
}
/* Dark theme — flips surface + foreground vars. Brand accents
(amber, aqua) stay constant. Set via by
the shared _theme.js. */
[data-theme="dark"] {
--indigo: #F0EFEA;
--indigo-soft: #d9d8d3;
--slate: #93a0b3;
--ivory: #0E1626;
--paper: #18223a;
--rule: #F0EFEA;
--rule-soft: rgba(255,255,255,0.14);
--rule-hairline: rgba(255,255,255,0.08);
--carbon: #F0EFEA;
}
html { color-scheme: light; transition: background 0.3s ease, color 0.3s ease; }
[data-theme="dark"] { color-scheme: dark; }
/* Theme toggle button — injected by _theme.js into .masthead-nav. */
.theme-toggle {
appearance: none;
background: transparent;
border: 0;
padding: 4px;
margin-left: 4px;
cursor: pointer;
color: var(--indigo);
display: inline-flex; align-items: center; justify-content: center;
transition: color 0.25s ease, transform 0.45s var(--ease-out);
}
.theme-toggle:hover { color: var(--amber); transform: rotate(15deg); }
.theme-icon {
width: 18px; height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.theme-icon--sun { display: none; }
[data-theme="dark"] .theme-icon--moon { display: none; }
[data-theme="dark"] .theme-icon--sun { display: block; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--ivory);
color: var(--carbon);
-webkit-font-smoothing: antialiased;
}
body {
font-family: var(--sans);
font-weight: 400;
min-height: 100vh;
line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
ul { list-style: none; }
::selection { background: var(--amber); color: var(--indigo); }
/* ================================================================
NAV — minimal masthead. Logo + serif wordmark on the left,
inline links on the right. No 4-dot pill.
================================================================ */
.masthead {
position: sticky;
top: 0;
z-index: 100;
/* Glass nav — content scrolls behind it (modals at z-199+ stay above). */
background: color-mix(in srgb, var(--ivory) 55%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
padding: 18px clamp(20px, 4vw, 56px);
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
}
@supports not (backdrop-filter: blur(1px)) {
.masthead { background: color-mix(in srgb, var(--ivory) 92%, transparent); }
}
.masthead-brand {
display: inline-flex; align-items: center; gap: 12px;
/* Grid item in a 1fr column — keep it hugging its content so the hover
pill wraps only the logo lockup, not the whole nav. */
justify-self: start; width: fit-content;
text-decoration: none; color: var(--indigo);
padding: 6px 12px 6px 6px;
border-radius: 999px;
transition: background 0.3s ease;
}
.masthead-brand:hover { background: rgba(6,26,74, 0.06); }
/* Same approach as the homepage masthead — CSS mask to tint the
white logo PNG to exact brand indigo. Filters can't re-tint
accurately, so the box's background is the colour we paint.
Wider/taller dimensions match the homepage masthead. */
.masthead-brand-mark {
width: 56px; height: 38px;
display: block;
background: var(--indigo);
-webkit-mask: url('../../assets/brand/wb-logo.png') center/contain no-repeat;
mask: url('../../assets/brand/wb-logo.png') center/contain no-repeat;
}
.masthead-brand-mark img { display: none; }
.masthead-logo { height: 30px; width: auto; display: block; }
/* Mobile nav shows the bridge mark only (no wordmark text). Masked from
wb-logo.png and painted in the brand ink so it matches the wordmark's
colour treatment per theme — never the aqua favmark, and the mask keeps
the aspect ratio so it can't squeeze. */
.masthead-favmark {
display: none;
width: 40px; height: 26px;
flex-shrink: 0;
/* --indigo is the theme-aware ink colour (indigo on light, ivory on
dark), so the masked mark matches the wordmark in both themes. */
background: var(--indigo);
-webkit-mask: url('../../assets/brand/wb-logo.png') center/contain no-repeat;
mask: url('../../assets/brand/wb-logo.png') center/contain no-repeat;
}
@media (max-width:760px){
/* !important beats the higher-specificity per-theme display rules above,
which would otherwise keep the dark wordmark visible on top of the
favmark on phones. */
.masthead-logo { display: none !important; }
.masthead-favmark { display: block; }
}
/* Brand lockup swaps by theme: colour lockup on light surfaces, white on dark. */
.masthead-brand img.masthead-logo--dark,
.coda__brand img.coda__logo.coda__logo--dark { display: none; }
[data-theme="dark"] .masthead-brand img.masthead-logo--light,
[data-theme="dark"] .coda__brand img.coda__logo.coda__logo--light { display: none; }
[data-theme="dark"] .masthead-brand img.masthead-logo--dark,
[data-theme="dark"] .coda__brand img.coda__logo.coda__logo--dark { display: block; }
.masthead-brand-name {
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--indigo);
line-height: 1;
}
.masthead-nav {
display: inline-flex; gap: clamp(20px, 3vw, 36px);
}
.masthead-nav a {
position: relative;
display: inline-flex; align-items: center;
font-family: var(--mono);
font-size: 11px; letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--carbon);
padding: 4px 0;
transition: color 0.3s var(--ease-out);
}
.masthead-nav a::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: var(--amber);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.45s var(--ease-out);
}
.masthead-nav a:hover { color: var(--indigo); }
.masthead-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.masthead-nav a.is-active { color: var(--indigo); }
.masthead-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
/* Pitch link — same monospace nav-button styling on every page, no
scroll-trigger hide. Matches the homepage masthead-pitch behaviour. */
.masthead-nav .masthead-pitch {
color: var(--amber);
transition: color 0.25s ease;
}
.masthead-nav .masthead-pitch:hover { color: var(--indigo); }
.masthead-nav .masthead-pitch::after { display: none; }
/* Mobile masthead — the inline brand wordmark + full nav overflow the
viewport on phones. Mirror the homepage treatment: drop the wordmark,
shrink the logo, and tighten the nav so the links + theme toggle fit
a 360–390px screen. Shared by every internal page via _shared.css. */
@media (max-width: 760px) {
.masthead { padding: 14px 18px; gap: 12px; }
.masthead-brand { padding: 4px 8px 4px 4px; }
.masthead-brand-mark { width: 44px; height: 30px; }
.masthead-brand-name { display: none; }
.masthead-nav { gap: 16px; }
.masthead-nav a { font-size: 10px; letter-spacing: 0.16em; padding: 4px 0; }
/* Dev stamp overlaps content on phones — hide it, as the homepage does. */
.stamp { display: none; }
}
/* Inline text-link style — thin dotted underline. Apply `.linkish`
to any in-body hyperlink across the site. */
.linkish {
color: var(--indigo);
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--indigo);
transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.linkish:hover {
color: var(--amber);
text-decoration-color: var(--amber);
}
/* Stamp — tiny direction marker so the client can tell variants apart */
.stamp {
position: fixed;
bottom: 18px; right: 22px;
z-index: 200;
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--slate);
padding: 6px 10px;
background: rgba(255,255,255,0.84);
border: 1px solid var(--rule-hairline);
backdrop-filter: blur(4px);
}
.stamp::before {
content: '';
display: inline-block;
width: 6px; height: 6px;
background: var(--amber);
margin-right: 8px;
vertical-align: middle;
}
/* ================================================================
COMMON TYPE
================================================================ */
.eyebrow {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--slate);
}
.eyebrow--rule {
display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow--rule::before {
content: '';
width: 28px; height: 1px;
background: var(--carbon);
}
.serif {
font-family: var(--serif);
font-weight: 400;
letter-spacing: -0.022em;
color: var(--indigo);
line-height: 1.0;
}
.serif em {
font-style: italic;
color: var(--amber);
}
.body-prose {
font-family: var(--sans);
font-size: 16px;
line-height: 1.7;
color: var(--carbon);
max-width: 64ch;
}
.body-prose p + p { margin-top: 1em; }
.hairline {
height: 1px;
background: var(--rule-soft);
}
/* ================================================================
PAGE SUBSCRIBE — appears at the bottom of every internal page,
above the colophon. Keeps end-of-page consistent with homepage.
================================================================ */
.page-subscribe {
background: var(--ivory);
padding: clamp(72px, 12vh, 140px) clamp(28px, 5vw, 80px) clamp(56px, 8vh, 96px);
border-top: 1px solid var(--rule-soft);
text-align: center;
}
.page-subscribe__inner {
max-width: 720px;
margin: 0 auto;
display: grid;
justify-items: center;
gap: 18px;
}
.page-subscribe h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(30px, 4.2vw, 56px);
line-height: 1.04;
letter-spacing: -0.022em;
color: var(--indigo);
max-width: 22ch;
}
.page-subscribe h2 em { font-style: italic; color: var(--amber); }
.page-subscribe__form {
display: flex; align-items: center; gap: 6px;
margin-top: 12px;
background: var(--paper);
border: 1px solid var(--carbon);
padding: 6px 6px 6px 22px;
width: min(440px, 100%);
}
.page-subscribe__form input {
flex: 1; background: none; border: 0; outline: 0;
height: 44px; font: inherit; font-size: 14px; color: var(--carbon);
}
.page-subscribe__form input::placeholder { color: var(--slate); }
.page-subscribe__form button {
height: 44px; padding: 0 22px;
background: var(--carbon); color: var(--ivory);
border: 0;
font-family: var(--mono);
font-weight: 600; font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
cursor: pointer;
transition: background 280ms ease;
}
.page-subscribe__form button:hover { background: var(--amber); color: var(--indigo); }
/* ================================================================
FOOTER — colophon style
================================================================ */
.colophon {
position: relative;
background: var(--ivory);
border-top: 1px solid var(--rule);
padding: clamp(72px, 10vh, 128px) clamp(24px, 4vw, 56px) 36px;
}
.colophon-inner {
max-width: 1500px;
margin: 0 auto;
}
.colophon-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 56px;
}
.colophon-brand {
display: flex; flex-direction: column; gap: 24px;
max-width: 30ch;
}
.colophon-brand-name {
font-family: var(--serif);
font-size: clamp(28px, 3vw, 44px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--indigo);
}
.colophon-brand-name em {
font-style: italic;
color: var(--amber);
}
.colophon-brand-tag {
font-family: var(--sans);
font-size: 14px;
line-height: 1.55;
color: var(--slate);
}
.colophon-block-heading {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 18px;
}
.colophon-list { display: flex; flex-direction: column; gap: 8px; }
.colophon-list a {
font-family: var(--sans);
font-size: 14px;
color: var(--carbon);
position: relative;
transition: color 0.25s var(--ease-out);
}
.colophon-list a:hover { color: var(--amber); }
.colophon-bottom {
border-top: 1px solid var(--rule-hairline);
padding-top: 22px;
display: flex; justify-content: space-between;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--slate);
}
@media (max-width: 880px) {
.colophon-grid { grid-template-columns: 1fr 1fr; }
.colophon-brand { grid-column: 1 / -1; }
.colophon-bottom { flex-direction: column; gap: 12px; }
}
/* ================================================================
UNIFIED FOOTER (v2) — shared across every internal page.
Three vertical bands:
1. Newsletter signup
2. Follow us · Visit us
3. Coda (brand · copyright · legal)
Visit-us SVG icons animate continuously (no scroll/hover gate).
The homepage has its own copy of these styles in
`site/v2/index.html`; keep both copies visually in sync.
================================================================ */
.site-footer-v2 {
background: var(--ivory);
color: var(--carbon);
padding: clamp(80px, 12vh, 140px) clamp(28px, 5vw, 80px) 32px;
border-top: 2px solid var(--carbon);
}
.site-footer-v2__inner { max-width: 1500px; margin: 0 auto; }
/* 1. Subscribe band */
.sf-subscribe {
display: grid;
justify-items: center;
text-align: center;
gap: 18px;
padding-bottom: clamp(64px, 10vh, 100px);
border-bottom: 1px solid var(--rule-hairline);
}
.sf-subscribe h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(34px, 4.4vw, 60px);
line-height: 1.04;
letter-spacing: -0.022em;
color: var(--indigo);
max-width: 22ch;
}
.sf-subscribe h2 em { font-style: italic; color: var(--amber); }
.sf-subscribe__form {
display: flex; align-items: center; gap: 6px;
margin-top: 18px;
background: var(--paper);
border: 1px solid var(--carbon);
padding: 6px 6px 6px 22px;
width: min(440px, 100%);
}
.sf-subscribe__form input {
flex: 1; background: none; border: 0; outline: 0;
height: 44px; font: inherit; font-size: 14px;
color: var(--carbon);
}
.sf-subscribe__form input::placeholder { color: var(--slate); opacity: 0.6; }
.sf-subscribe__form button {
height: 44px; padding: 0 22px;
background: var(--carbon); color: var(--ivory);
font-family: var(--mono);
font-weight: 600; font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
cursor: pointer;
transition: background 280ms ease;
}
.sf-subscribe__form button:hover { background: var(--amber); color: var(--indigo); }
/* 2. Follow + Visit columns */
.sf-cols {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(48px, 7vw, 96px);
padding: clamp(56px, 8vh, 80px) 0;
border-bottom: 1px solid var(--rule-hairline);
}
@media (max-width: 900px) { .sf-cols { grid-template-columns: 1fr; gap: 56px; } }
.sf-cols__head {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 24px;
display: inline-flex; align-items: center; gap: 12px;
}
.sf-cols__head::before {
content: '';
width: 32px; height: 1px;
background: currentColor;
opacity: 0.7;
}
.sf-follow__list { display: grid; gap: 4px; }
.sf-follow__row {
display: grid;
grid-template-columns: 32px 1fr auto auto;
align-items: center; gap: 16px;
padding: 22px 4px 22px 0;
border-top: 1px solid var(--rule-hairline);
font-family: var(--serif);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 36px);
line-height: 1.05;
letter-spacing: -0.018em;
color: var(--indigo);
position: relative;
text-decoration: none;
transition: color 0.25s ease, padding-left 0.28s var(--ease-out);
}
.sf-follow__row:last-child { border-bottom: 1px solid var(--rule-hairline); }
.sf-icon {
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--paper);
border: 1px solid var(--rule-soft);
color: var(--indigo);
transition: background 0.28s, border-color 0.28s, color 0.28s;
}
.sf-icon svg { width: 13px; height: 13px; fill: currentColor; }
.sf-handle {
font-family: var(--sans);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--slate);
text-transform: lowercase;
transition: color 0.25s ease;
}
.sf-arrow {
color: var(--amber);
transform: translateX(-6px);
opacity: 0.6;
transition: transform 0.32s var(--ease-out), opacity 0.24s ease;
font-size: 22px;
line-height: 1;
font-family: var(--sans);
}
.sf-follow__row:hover { color: var(--amber); padding-left: 12px; }
.sf-follow__row:hover .sf-icon { background: var(--amber); border-color: var(--amber); color: var(--indigo); }
.sf-follow__row:hover .sf-handle { color: var(--carbon); }
.sf-follow__row:hover .sf-arrow { transform: translateX(8px); opacity: 1; }
.sf-follow__row::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 0; height: 1px;
background: var(--amber);
transition: width 0.48s var(--ease-out);
}
.sf-follow__row:hover::after { width: 100%; }
.sf-visit__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 900px) { .sf-visit__cards { grid-template-columns: 1fr; } }
.visit-card {
border: 1px solid transparent;
background: var(--paper);
/* Bigger monument icon spans both grid rows; right column stacks
city (top) + address (bottom). */
padding: 22px;
display: grid;
grid-template-columns: 108px 1fr;
grid-template-rows: auto auto;
column-gap: 22px;
row-gap: 6px;
align-items: start;
text-decoration: none;
transition: background 0.3s ease, border-color 0.3s ease;
}
.visit-card:hover {
background: var(--ivory);
border-color: var(--rule-soft);
}
.visit-card__svg {
width: 108px; height: 88px;
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
display: block;
overflow: visible;
}
.visit-card__svg path,
.visit-card__svg line,
.visit-card__svg rect,
.visit-card__svg polyline,
.visit-card__svg circle,
.visit-card__svg ellipse {
fill: none;
stroke: var(--carbon);
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 600;
stroke-dashoffset: 600;
/* Continuous loop — runs from page load, no scroll/hover gate. */
animation: monumentDraw 6s cubic-bezier(.5,.05,.2,1) infinite;
}
/* Bengaluru + New Delhi draw simultaneously per client. The -4s
stagger was removed so both icons loop in sync. */
@keyframes monumentDraw {
0% { stroke-dashoffset: 600; opacity: 0.20; }
8% { opacity: 1; }
45% { stroke-dashoffset: 0; opacity: 1; }
70% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 600; opacity: 0.20; }
}
.visit-card .visit-card__svg circle:not([cx]) { display: none; }
.visit-card__city {
grid-column: 2; grid-row: 1;
align-self: end;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--indigo);
}
.visit-card__address {
grid-column: 2; grid-row: 2;
align-self: start;
font-family: var(--sans);
font-size: 12px;
line-height: 1.5;
color: var(--slate);
max-width: 28ch;
}
/* 3. Coda — brand · copyright · legal */
.sf-coda {
padding-top: 28px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--slate);
}
/* Footer brand lockup — same chrome as the top-nav masthead. */
.sf-coda__brand {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--indigo);
}
.sf-coda__brand em { font-style: normal; color: inherit; }
.sf-coda__brand img {
width: 36px; height: 26px;
background: var(--indigo);
-webkit-mask: url('../../assets/brand/wb-logo.png') center/contain no-repeat;
mask: url('../../assets/brand/wb-logo.png') center/contain no-repeat;
}
.sf-coda__copyright { text-align: center; }
.sf-coda__legal {
display: flex; gap: 18px; justify-self: end;
}
.sf-coda__legal a:hover { color: var(--amber); }
@media (max-width: 760px) {
.sf-coda { grid-template-columns: 1fr; gap: 12px; justify-items: start; }
.sf-coda__legal { justify-self: start; }
.sf-coda__copyright { text-align: left; }
}
/* ================================================================
PORTFOLIO PANEL (v2) — slides in from the right on the portfolio
page. Used by every company except those with a dedicated case
study (Atlan today). Two columns: facts + leadership on the left,
visual + description + action buttons on the right.
================================================================ */
body.portfolio-panel-open { overflow: hidden; }
.portfolio-panel-back {
position: fixed; inset: 0;
background: rgba(247,246,243, 0.72);
z-index: 199;
opacity: 0; pointer-events: none;
transition: opacity 0.42s ease, backdrop-filter 0.42s ease;
backdrop-filter: blur(0);
}
.portfolio-panel-back.is-open {
opacity: 1; pointer-events: auto;
backdrop-filter: blur(8px) saturate(120%);
}
.portfolio-panel {
position: fixed;
top: 24px; right: 24px; bottom: 24px;
width: min(94vw, 940px);
z-index: 200;
background: var(--ivory);
border: 1px solid var(--carbon);
box-shadow: 0 24px 60px rgba(29,29,29, 0.18);
transform: translateX(calc(100% + 48px));
transition: transform 0.55s cubic-bezier(.22,.7,.2,1);
overflow-y: auto;
}
.portfolio-panel.is-open { transform: translateX(0); }
.portfolio-panel__close {
position: absolute; top: 18px; right: 18px;
width: 36px; height: 36px;
border: 1px solid var(--rule-hairline);
background: var(--paper);
display: grid; place-items: center;
color: var(--carbon);
font-size: 16px;
cursor: pointer;
transition: background 0.2s, transform 0.25s;
z-index: 4;
}
.portfolio-panel__close:hover { background: var(--amber); transform: rotate(90deg); }
.pp-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
min-height: 320px;
}
@media (max-width: 880px) { .pp-grid { grid-template-columns: 1fr; } }
.pp-left {
padding: clamp(36px, 4vw, 56px) clamp(28px, 3.4vw, 44px);
background: var(--paper);
border-right: 1px solid var(--rule-hairline);
}
@media (max-width: 880px) { .pp-left { border-right: 0; border-bottom: 1px solid var(--rule-hairline); } }
.pp-name {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(36px, 4vw, 56px);
line-height: 1;
letter-spacing: -0.024em;
color: var(--indigo);
margin: 0 0 14px;
}
.pp-tagline {
font-family: var(--serif);
font-style: italic;
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.45;
color: var(--amber);
margin: 0 0 28px;
max-width: 36ch;
}
.pp-facts {
display: grid;
grid-template-columns: 110px 1fr;
gap: 12px 18px;
padding: 18px 0;
border-top: 1px solid var(--rule-hairline);
border-bottom: 1px solid var(--rule-hairline);
margin: 0 0 28px;
}
.pp-fact { display: contents; }
.pp-fact dt {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--slate);
align-self: start;
padding-top: 2px;
}
.pp-fact dd {
font-family: var(--sans);
font-size: 13px;
line-height: 1.55;
color: var(--carbon);
margin: 0;
}
.pp-leadership__head {
display: block;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--slate);
margin: 0 0 14px;
}
.pp-leadership-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px 14px;
}
@media (max-width: 480px) { .pp-leadership-grid { grid-template-columns: repeat(2, 1fr); } }
.pp-lead {
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
}
.pp-lead__photo {
width: 100%; aspect-ratio: 1 / 1;
background: var(--paper-deep, #EAE4D3);
border: 1px solid var(--rule-hairline);
overflow: hidden;
display: grid; place-items: center;
margin-bottom: 4px;
}
.pp-lead__photo img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 18%;
filter: grayscale(0.15);
}
.pp-lead__initials {
font-family: var(--serif);
font-size: clamp(28px, 3vw, 40px);
color: var(--indigo);
}
.pp-lead__name {
font-family: var(--sans);
font-weight: 500;
font-size: 13px;
color: var(--indigo);
letter-spacing: -0.005em;
}
.pp-lead__role {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--slate);
}
.pp-right {
padding: clamp(36px, 4vw, 56px) clamp(28px, 3.4vw, 44px);
display: flex; flex-direction: column; gap: 24px;
}
.pp-visual {
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(180deg, #061A4A 0%, #0a1f5a 100%);
display: grid; place-items: center;
overflow: hidden;
border: 1px solid var(--rule-hairline);
}
.pp-visual img {
max-width: 60%; max-height: 60%;
object-fit: contain;
filter: brightness(1) drop-shadow(0 12px 24px rgba(0,0,0,0.3));
}
.pp-visual__wordmark {
font-family: var(--serif);
font-style: italic;
font-size: clamp(36px, 4.4vw, 64px);
color: var(--ivory);
letter-spacing: -0.022em;
text-transform: lowercase;
}
.pp-description {
font-family: var(--sans);
font-size: 14px;
line-height: 1.6;
color: var(--carbon);
margin: 0;
max-width: 56ch;
}
.pp-actions {
display: flex; align-items: center; gap: 12px;
margin-top: auto;
}
.pp-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
height: 44px;
border-radius: 999px;
text-decoration: none;
font-family: var(--mono);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
.pp-btn--primary {
padding: 0 26px;
background: var(--aqua);
color: var(--indigo);
flex: 1; max-width: 220px;
}
.pp-btn--primary:hover { background: var(--amber); transform: translateY(-1px); }
.pp-btn--icon {
width: 44px; height: 44px;
background: var(--paper);
border: 1px solid var(--rule-soft);
color: var(--indigo);
}
.pp-btn--icon svg { width: 16px; height: 16px; fill: currentColor; }
.pp-btn--icon:hover { background: var(--amber); border-color: var(--amber); transform: translateY(-1px); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* Founder photo -> LinkedIn (case studies + portfolio spotlights).
display:block fills grid cells (spotlight founders) and hugs avatars
in flex bylines; img sizing stays governed by each page's own rules. */
.li-link { display: block; line-height: 0; cursor: pointer; transition: opacity .2s ease; }
.li-link:hover { opacity: .82; }
.li-link:focus-visible { outline: 2px solid var(--amber, #FFB400); outline-offset: 3px; }
/* S4 — spotlight founders: centre a lone last founder so 3 founders read
2-up + 1 centred (and 4 stays 2x2). Logo plate + metadata are separate
elements, so founder count never shifts them. */
.spotlight-founders .f:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 200px; }
/* J — placeholder video tile beside the WaterBridge note (dummy for now). */
.wb-note__media { width: 100%; }
.wb-note__video {
aspect-ratio: 4 / 3;
background: var(--paper);
border: 1px solid var(--rule-soft);
display: grid; place-items: center;
position: relative;
}
.wb-note__video::after {
content: 'VIDEO'; position: absolute; bottom: 10px; right: 12px;
font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em; color: var(--slate);
}
.wb-note__play {
width: 0; height: 0;
border-left: 20px solid var(--indigo);
border-top: 13px solid transparent; border-bottom: 13px solid transparent;
opacity: 0.55; margin-left: 5px;
}
/* Real founder testimonial clip (replaces the placeholder tile when set).
Autoplays muted on loop with the brand film's sound + fullscreen controls. */
.wb-note__clipwrap {
position: relative;
width: 100%;
margin: 0;
border: 1px solid var(--rule-soft);
overflow: hidden;
}
.wb-note__clip {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--carbon);
}
.wb-note__ctrls {
position: absolute;
right: 10px; bottom: 10px;
z-index: 2;
display: flex; gap: 8px;
}
.wb-note__ctrl {
appearance: none;
width: 32px; height: 32px;
display: grid; place-items: center;
border: 1px solid rgba(247,246,243,0.55);
background: rgba(29,29,29,0.55);
color: var(--ivory);
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease;
}
.wb-note__ctrl:hover { background: rgba(29,29,29,0.85); border-color: var(--ivory); }
.wb-note__ctrl .ic { width: 16px; height: 16px; fill: currentColor; }
/* === Unified footer (replicated from the homepage) === */
.footer {
background: var(--ivory);
color: var(--carbon);
padding: clamp(72px, 10vh, 120px) clamp(28px, 5vw, 80px) 32px;
}
.footer-inner { max-width: 1500px; margin: 0 auto; }
.subscribe {
display: grid;
/* minmax(0,1fr) stops the single column from growing to the form's
min-content and overflowing the container (which shoved the form off
to the right on phones). */
grid-template-columns: minmax(0, 1fr);
justify-items: center;
text-align: center;
gap: 18px;
padding-bottom: clamp(80px, 12vh, 120px);
border-bottom: 1px solid var(--rule-hairline);
}
.subscribe h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 52px);
line-height: 1.04;
letter-spacing: -0.022em;
color: var(--indigo);
max-width: 22ch;
justify-self: center;
margin-left: auto; margin-right: auto;
text-align: center;
}
.subscribe h2 em { font-style: italic; color: var(--amber); }
/* Supporting line — small grey copy under the subscribe headline. */
.subscribe-sub {
margin: 4px auto 0;
max-width: 52ch;
font-family: var(--sans);
font-size: clamp(13px, 1.05vw, 16px);
line-height: 1.5;
color: var(--slate);
text-align: center;
}
.subscribe-form {
display: flex; align-items: center; gap: 6px;
margin-top: 18px;
background: var(--paper);
border: 1px solid var(--carbon);
padding: 6px 6px 6px 22px;
width: min(440px, 100%);
}
.subscribe-form input {
flex: 1; background: none; border: 0; outline: 0;
height: 44px; font: inherit; font-size: 14px;
color: var(--carbon);
}
.subscribe-form input::placeholder { color: var(--slate-dim); }
.subscribe-form button {
height: 44px; padding: 0 22px;
background: var(--carbon); color: var(--ivory);
font-family: var(--mono);
font-weight: 600; font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
white-space: nowrap; flex: 0 0 auto;
transition: background 280ms ease;
}
.subscribe-form button:hover { background: var(--amber); color: var(--indigo); }
/* Confirmed state — turns green with an animated tick after a successful submit. */
.subscribe-form button.is-subscribed,
.subscribe-form button.is-subscribed:hover {
background: #17a673; color: #fff; cursor: default;
animation: subscribed-pop 440ms cubic-bezier(.2,.8,.3,1.2);
}
.subscribe-form button .sub-tick { display: inline-block; margin-left: 7px; }
.subscribe-form button.is-subscribed .sub-tick {
animation: sub-tick-in 420ms 110ms cubic-bezier(.2,.9,.3,1.5) both;
}
@keyframes subscribed-pop { 0% { transform: scale(0.95); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes sub-tick-in { 0% { opacity: 0; transform: scale(0) rotate(-25deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
/* Follow + Visit */
.footer-cols {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(48px, 7vw, 96px);
padding: clamp(72px, 10vh, 96px) 0;
border-bottom: 1px solid var(--rule-hairline);
}
@media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr; gap: 56px; } }
.footer-cols__head {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 24px;
display: inline-flex; align-items: center; gap: 12px;
}
.footer-cols__head::before {
content: '';
width: 32px; height: 1px;
background: currentColor;
opacity: 0.7;
}
.follow { display: flex; flex-direction: column; }
.follow__list { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 4px; }
.follow__row {
display: grid;
grid-template-columns: 32px 1fr auto auto;
align-items: center; gap: 16px;
padding: 14px 4px 14px 0;
/* Dividers removed — yellow hover underline now stands alone. */
font-family: var(--serif);
font-weight: 400;
font-size: clamp(18px, 1.7vw, 26px);
line-height: 1.05;
letter-spacing: -0.018em;
color: var(--indigo);
position: relative;
transition: color 0.25s ease, padding-left 0.28s var(--ease-standard);
}
.follow__row .icon {
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--paper);
border: 1px solid var(--rule-soft);
color: var(--indigo);
transition: background 0.28s, border-color 0.28s, color 0.28s;
}
.follow__row .icon svg { width: 13px; height: 13px; fill: currentColor; }
.follow__row .handle {
font-family: var(--sans);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--slate-dim);
text-transform: lowercase;
transition: color 0.25s ease;
}
.follow__row .arrow {
color: var(--amber);
transform: translateX(-6px);
opacity: 0.6;
transition: transform 0.32s var(--ease-standard), opacity 0.24s ease;
font-size: 22px;
line-height: 1;
font-family: var(--sans);
}
.follow__row:hover { color: var(--amber); padding-left: 12px; }
.follow__row:hover .icon { background: var(--amber); border-color: var(--amber); color: var(--indigo); }
.follow__row:hover .handle { color: var(--carbon); }
.follow__row:hover .arrow { transform: translateX(8px); opacity: 1; }
.follow__row::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 0; height: 1px;
background: var(--amber);
transition: width 0.48s var(--ease-standard);
}
.follow__row:hover::after { width: 100%; }
.visit__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
/* Cards keep their natural height with tight internal spacing; the column
centres them against the taller socials list so the footer stays balanced. */
.visit { display: flex; flex-direction: column; }
.visit__cards { flex: 1; align-content: center; }
.visit-card { align-content: center; }
@media (max-width: 900px) { .visit__cards { grid-template-columns: 1fr; } }
/* No black border per client — hairline only on hover */
.visit-card {
border: 1px solid transparent;
background: var(--paper);
padding: 28px 24px 24px;
display: grid; gap: 12px;
transition: background 0.3s ease, border-color 0.3s ease;
}
.visit-card:hover {
background: var(--ivory);
border-color: var(--rule-soft);
}
.visit-card__svg {
/* Trimmed from 130px so the Visit-us column matches the height of
the Follow-us column now that X has been removed (LinkedIn +
YouTube = 2 rows). */
width: 100%; height: 96px;
display: block;
overflow: visible;
}
/* Side-by-side layout — bigger monument icon on the left spans both
rows; right column stacks city (top) + address (bottom). */
.visit-card {
padding: 22px 22px;
column-gap: 22px; row-gap: 6px;
grid-template-columns: 108px 1fr;
grid-template-rows: auto auto;
align-items: start;
}
.visit-card__svg {
width: 108px; height: 88px;
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
}
.visit-card__city {
grid-column: 2; grid-row: 1;
font-size: clamp(22px, 2.2vw, 30px);
align-self: end;
}
.visit-card__address {
grid-column: 2; grid-row: 2;
font-size: 12px;
align-self: start;
}
.visit-card__svg path,
.visit-card__svg line,
.visit-card__svg rect,
.visit-card__svg polyline,
.visit-card__svg circle,
.visit-card__svg ellipse {
fill: none;
stroke: var(--carbon);
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 600;
stroke-dashoffset: 600;
/* Continuous loop — runs from page load, no scroll/hover gate. */
animation: monumentDraw 6s cubic-bezier(.5,.05,.2,1) infinite;
}
/* Bengaluru + New Delhi draw simultaneously per client request — the
-4s stagger was removed. */
/* Draw in (0–35%), hold drawn (35–80%), erase out (80–100%) →
loop seamlessly back to the empty state. Keeps the icons
visible most of the cycle so the section never looks blank. */
@keyframes monumentDraw {
0% { stroke-dashoffset: 600; opacity: 0.20; }
8% { opacity: 1; }
45% { stroke-dashoffset: 0; opacity: 1; }
70% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 600; opacity: 0.20; }
}
.visit-card .visit-card__svg circle:not([cx]) { display: none; }
.visit-card__city {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.05;
letter-spacing: -0.018em;
color: var(--indigo);
}
.visit-card__address {
font-family: var(--sans);
font-size: 12px;
line-height: 1.5;
color: var(--slate);
max-width: 28ch;
}
.coda {
padding-top: 28px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--slate);
}
/* Footer brand lockup — same chrome as the top-nav masthead so the
two end-cards of the page read as a matched pair. Mono caps,
indigo, with a slightly bolder mark sized like the nav lockup. */
.coda__brand {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--indigo);
}
.coda__brand em { font-style: normal; color: inherit; }
/* Match the top-nav lockup EXACTLY. wb-logo.png is white, so masking the
![]()
itself rendered a WHITE logo. Hide the img + paint an indigo masked
box (a ::before flex item) like the masthead mark. */
.coda__brand img { display: none; }
.coda__brand::before { content: none; }
.coda__brand img.coda__logo { display: block; height: 34px; width: auto; }
.coda__legal { display: flex; gap: 18px; justify-self: end; }
.coda__copyright { text-align: center; }
/* Legal links + the copyright line were set at the coda's 0.24em mono
tracking — too airy to read. Tighten them (client, 11/06). */
.coda__legal a, .coda > span:not(.coda__brand) { letter-spacing: 0.08em; }
.coda__legal a:hover { color: var(--amber); }
@media (max-width: 760px) {
/* Row 1 = legal links (one row); row 2 = logo left + copyright right.
Brand column is auto so the wordmark keeps its natural width (no
squish); copyright takes the rest and wraps to 2 lines if needed. */
.coda {
grid-template-columns: auto 1fr;
grid-template-areas:
"legal legal"
"brand copy";
gap: 30px 14px;
align-items: center;
}
/* All three legal links stay in one row; each may wrap to 2 lines. */
.coda__legal { grid-area: legal; justify-self: start; flex-wrap: nowrap; gap: 12px; }
.coda__legal a { white-space: normal; min-width: 0; }
.coda__brand { grid-area: brand; justify-self: start; }
/* Footer logo ~30% smaller on phones, natural ratio kept. */
.coda__brand img.coda__logo { max-width: none; flex: 0 0 auto; height: 24px; }
.coda__copyright { grid-area: copy; justify-self: end; text-align: right; }
}
/* Footer simplification on phones (from the homepage @media 760px block). */
@media (max-width: 760px) {
.footer-inner { padding: 0 20px; }
.subscribe h2 { font-size: clamp(28px, 8vw, 40px); }
.footer-cols { padding-top: 56px; padding-bottom: 56px; }
/* Icon + name compact on the left; the handle gets a flexible column on
the right and stays on one line. */
.follow__row { font-size: clamp(17px, 4.6vw, 22px); padding: 16px 0; grid-template-columns: 30px auto 1fr auto; gap: 10px; }
.follow__row .handle { white-space: nowrap; justify-self: end; }
}
/* ============================================================
SPOTLIGHT (case-study) DETAIL PAGES — shared design layer
------------------------------------------------------------
Every spotlight detail page still carries its own inline