/* ===========================================================
00 / THEME TOKENS
Slate / Pearl / Verdigris
=========================================================== */
:root {
--bg-1: #EEF1EF;        /* pearl grey */
--bg-2: #D8DEDA;        /* misted stone */
--surface-hi: #F8FAF8;  /* cool pearl */
--surface-lo: #DDE3DF;  /* pale slate wash */
--bezel-hi: #FFFFFF;
--bezel-lo: #AEB8B4;    /* cool stone edge */
--ink-1: #111817;       /* deep green-black */
--ink-2: #26312F;       /* slate charcoal */
--ink-3: #687471;       /* oxidized grey */
--ink-4: #91A09B;       /* pale mineral */
--accent: #49786F;      /* verdigris */
--accent-deep: #31564F; /* aged copper green */
--accent-soft: #7DA79F; /* soft patina */
--line: #AEB8B4;
--line-soft: rgba(82, 100, 96, 0.22);
--engrave: 0 1px 0 rgba(255, 255, 255, 0.76);
--engrave-soft: 0 1px 0 rgba(255, 255, 255, 0.58);
--shadow-card:
0 2.8px 2.2px rgba(17, 24, 23, .018),
0 6.7px 5.3px rgba(17, 24, 23, .024),
0 12.5px 10px rgba(17, 24, 23, .03),
0 22.3px 17.9px rgba(17, 24, 23, .04),
0 41.8px 33.4px rgba(17, 24, 23, .052);
--shadow-btn:
0px 2px 3px -1px rgba(17, 24, 23, .09),
0px 0px 0px 1px rgba(17, 24, 23, .055);
--shadow-btn-h:
0px 3px 6px -1px rgba(17, 24, 23, .13),
0px 0px 0px 1px rgba(17, 24, 23, .08);
--inset-edge:
inset 0 1px 0 rgba(255, 255, 255, .84),
inset 0 -1px 1px rgba(17, 24, 23, .035);
--font-display: 'DM Sans', sans-serif;
--font-body: 'Inter', sans-serif;
--font-mono: 'IBM Plex Mono', monospace;
--font: var(--font-body);
--gap: 16px;
--maxw: 1280px;
}
/* ===========================================================
01 / BASE
=========================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-weight: 300;
color: var(--ink-1);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
background:
radial-gradient(
circle at 50% 0%,
rgba(248, 250, 248, 0.92) 0%,
rgba(216, 222, 218, 0.58) 42%,
transparent 72%
),
linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
background-attachment: fixed;
padding-bottom: 0;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
ul {
list-style: none;
}
button {
font-family: inherit;
cursor: pointer;
}
::selection {
background: rgba(73, 120, 111, .24);
color: var(--ink-1);
}
.container {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 var(--gap);
}
.section {
padding: var(--gap) 0;
}
.engrave {
text-shadow: var(--engrave);
}
.page {
position: relative;
z-index: 2;
}
/* ===========================================================
02 / BACKGROUND FRAME
=========================================================== */
.fx-frame {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
display: flex;
justify-content: center;
padding: 0 var(--gap);
}
.fx-frame .col {
width: 100%;
max-width: var(--maxw);
height: 100%;
border-left: 1px solid rgba(82, 100, 96, .18);
border-right: 1px solid rgba(82, 100, 96, .18);
position: relative;
}
.fx-frame .col::before,
.fx-frame .col::after {
content: '';
position: absolute;
top: 0;
width: 1px;
height: 100%;
background: rgba(82, 100, 96, .10);
}
.fx-frame .col::before {
left: 33.333%;
}
.fx-frame .col::after {
left: 66.666%;
}
.fx-frame .hair {
position: absolute;
left: -100vw;
right: -100vw;
top: 32%;
height: 1px;
background: linear-gradient(
to right,
transparent,
rgba(82, 100, 96, .18),
transparent
);
}
/* ===========================================================
03 / MATERIAL PRIMITIVES
=========================================================== */
.bezel {
padding: 1px;
border-radius: 13px;
background: linear-gradient(to bottom, var(--bezel-hi), var(--bezel-lo));
box-shadow: var(--shadow-card);
}
.bezel > .inner {
border-radius: 12px;
background: linear-gradient(to bottom, var(--surface-hi), var(--surface-lo));
box-shadow: var(--inset-edge);
backdrop-filter: blur(12px);
position: relative;
overflow: hidden;
}
.btn {
display: inline-block;
padding: 1px;
border-radius: 6px;
background: linear-gradient(to bottom, var(--bezel-hi), var(--bezel-lo));
box-shadow: var(--shadow-btn);
transition: box-shadow .3s ease, transform .3s ease;
}
.btn:hover {
box-shadow: var(--shadow-btn-h);
transform: translateY(-1px);
}
.btn > span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 5px;
background: linear-gradient(to bottom, var(--surface-hi), var(--surface-lo));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .86),
inset 0 -1px 1px rgba(17, 24, 23, .045);
font-size: 13px;
font-weight: 300;
color: var(--ink-1);
text-shadow: var(--engrave);
}
.btn .ico {
font-size: 16px;
transition: transform .3s ease;
filter: drop-shadow(0 1px 0 #fff);
}
.btn:hover .ico {
transform: translateX(4px);
}
.btn.accent {
background: linear-gradient(to bottom, var(--accent-soft), var(--accent-deep));
}
.btn.accent > span {
background: linear-gradient(to bottom, var(--accent-soft), var(--accent-deep));
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .28);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .28),
inset 0 -1px 1px rgba(0, 0, 0, .18);
}
.btn.accent .ico {
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .2));
}
.link {
font-size: 13px;
font-weight: 300;
color: var(--ink-3);
text-shadow: var(--engrave);
border-bottom: 1px solid transparent;
transition: color .3s, border-color .3s;
}
.link:hover {
color: var(--ink-1);
border-color: var(--accent);
}
.chip {
display: inline-flex;
padding: 1px;
border-radius: 4px;
background: linear-gradient(to bottom, #fff, var(--bezel-lo));
box-shadow: 0 1px 2px rgba(23, 23, 22, .04);
}
.chip > span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 3px;
background: linear-gradient(to bottom, var(--surface-hi), var(--surface-lo));
box-shadow: inset 0 1px 0 #fff;
font-size: 11px;
font-weight: 300;
letter-spacing: .08em;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.node {
position: relative;
display: inline-flex;
width: 8px;
height: 8px;
flex: 0 0 auto;
}
.node b {
position: absolute;
inset: 0;
border-radius: 2px;
background: var(--accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34);
}
.node i {
position: absolute;
inset: 0;
border-radius: 2px;
background: var(--accent);
animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes ping {
75%,
100% {
transform: scale(2.4);
opacity: 0;
}
}
/* ===========================================================
04 / TYPOGRAPHY HELPERS
=========================================================== */
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 300;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent-deep);
text-shadow: var(--engrave);
display: inline-flex;
align-items: center;
gap: 9px;
}
.display {
font-family: var(--font-display);
font-weight: 400;
text-transform: none;
letter-spacing: -0.075em;
line-height: 0.9;
text-shadow:
0 1px 0 rgba(255, 255, 255, .52),
0 4px 14px rgba(17, 24, 23, .035);
}
.sec-title,
.proj-title,
.cta-title,
.footer-logo,
.tst-quote,
.slide-title {
font-family: var(--font-display);
font-weight: 400;
text-transform: none;
letter-spacing: -0.065em;
}
.chip > span,
.state,
.main-nav a,
.slide-stats .lbl,
.ps-num,
.field label,
.topbar,
.footer-nav,
.footer-bottom {
font-family: var(--font-mono);
letter-spacing: .08em;
}
.logo {
font-family: var(--font-mono);
font-weight: 400;
letter-spacing: .14em;
}
.muted {
color: var(--ink-3);
text-shadow: var(--engrave);
}
.headline-line {
display: block;
overflow: hidden;
white-space: nowrap;
/* room for descenders (g, y, p) — the tight line-height would
otherwise let the mask clip them; negative margin keeps layout intact */
padding-bottom: 0.22em;
margin-bottom: -0.22em;
}
.headline-line-inner {
display: block;
will-change: transform, opacity;
}
/* Placeholder surfaces — kept because later sections still use .ph */
.ph {
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, var(--surface-hi), var(--surface-lo));
box-shadow: inset 0 2px 4px rgba(23, 23, 22, .04);
display: flex;
align-items: center;
justify-content: center;
}
.ph::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--line-soft) 1px, transparent 1px),
linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
background-size: 26px 26px;
opacity: .6;
}
.ph[data-label]::after {
content: attr(data-label);
position: relative;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 300;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
}
/* ===========================================================
05 / TOP HEADER
=========================================================== */
.topbar {
text-align: center;
padding: 9px 0;
font-size: 11px;
font-weight: 300;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
background:
linear-gradient(
to bottom,
rgba(248, 250, 248, .72),
rgba(238, 241, 239, .52)
);
border-bottom: 1px solid rgba(82, 100, 96, .16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58);
}
.topbar span {
color: var(--accent-deep);
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
transition: padding .3s ease;
}
.site-header .bar {
background:
linear-gradient(
to bottom,
rgba(238, 241, 239, .92),
rgba(216, 222, 218, .86)
);
backdrop-filter: blur(16px);
border-top: 1px solid rgba(255, 255, 255, .48);
border-bottom: 1px solid rgba(82, 100, 96, .24);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .62),
0 1px 0 rgba(255, 255, 255, .36),
0 10px 26px rgba(17, 24, 23, .035);
}
.nav-inner {
display: grid;
grid-template-columns: minmax(180px, 1fr) auto minmax(260px, 1fr);
align-items: center;
max-width: var(--maxw);
margin: 0 auto;
padding: 14px var(--gap);
transition: padding .3s;
}
.site-header.scrolled .nav-inner {
padding: 9px var(--gap);
}
.logo {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 17px;
text-transform: uppercase;
color: var(--ink-1);
text-shadow: var(--engrave);
}
.logo iconify-icon {
font-size: 22px;
color: var(--ink-1);
filter: drop-shadow(0 1px 0 #fff);
}
.main-nav {
justify-self: center;
display: flex;
align-items: center;
gap: 34px;
}
.main-nav a {
font-size: 12px;
font-weight: 300;
text-transform: uppercase;
color: var(--ink-3);
text-shadow: var(--engrave);
transition: color .3s;
}
.main-nav a:hover,
.main-nav a.active {
color: var(--ink-1);
}
.nav-right {
justify-self: end;
display: flex;
align-items: center;
gap: 18px;
min-width: 260px;
}
.state {
font-size: 11px;
font-weight: 300;
text-transform: uppercase;
color: var(--ink-3);
text-shadow: var(--engrave);
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.burger {
display: none;
}
/* ===========================================================
06 / HERO
=========================================================== */
.hero {
padding: clamp(32px, 4vw, 56px) 0 var(--gap);
}
.hero-frame {
padding: 0;
}
.hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-3);
text-shadow: var(--engrave);
border-bottom: 1px solid var(--line);
box-shadow: none;
padding: 22px clamp(28px, 5vw, 70px) 18px;
margin-bottom: 0;
}
.hero-meta {
display: flex;
flex-direction: column;
gap: 5px;
max-width: 520px;
}
.hero-meta strong {
font-weight: 300;
color: var(--ink-3);
}
.hero-meta em {
max-width: 62ch;
font-style: normal;
font-size: 9px;
line-height: 1.55;
letter-spacing: .12em;
color: var(--ink-4);
}
.hero-top .r {
text-align: right;
max-width: 520px;
align-items: flex-end;
}
.hero-image-stage {
position: relative;
min-height: clamp(460px, 48vw, 640px);
overflow: hidden;
display: grid;
place-items: center;
}
.hero-image {
position: absolute;
inset: 0;
border-radius: 0;
overflow: hidden;
background: #111817;
box-shadow: none;
}
.hero-video {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.hero-image::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(17, 24, 23, .34), transparent 48%),
linear-gradient(180deg, rgba(248, 250, 248, .035), rgba(17, 24, 23, .14));
pointer-events: none;
}
.hero-title-wrap {
position: relative;
z-index: 2;
width: 100%;
padding: clamp(28px, 5vw, 70px);
}
.hero-title {
max-width: 10ch;
font-size: clamp(64px, 10.5vw, 152px);
font-weight: 400;
color: #FAF7F0;
line-height: .86;
letter-spacing: -0.085em;
text-shadow: 0 16px 44px rgba(0, 0, 0, .32);
}
.hero-title .line {
display: block;
}
.smoke-title {
position: relative;
}
.smoke-line {
display: block;
opacity: 0;
filter: blur(18px);
transform: translateY(24px) scale(1.025);
will-change: opacity, filter, transform;
}
.hero-title-wrap::before {
content: '';
position: absolute;
left: clamp(22px, 5vw, 72px);
top: 50%;
width: min(520px, 48vw);
height: min(420px, 42vw);
transform: translateY(-50%);
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 35% 45%, rgba(248, 250, 248, .14), transparent 38%),
radial-gradient(circle at 62% 62%, rgba(216, 222, 218, .08), transparent 42%);
filter: blur(40px);
opacity: 0;
transition: opacity 1.4s ease;
}
.hero-title-wrap.is-visible::before {
opacity: 1;
}
.hero-kicker {
position: absolute;
right: clamp(28px, 5vw, 70px);
top: clamp(28px, 5vw, 58px);
z-index: 3;
max-width: 315px;
font-family: var(--font-mono);
font-size: 10px;
line-height: 1.65;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(248, 250, 248, .78);
text-align: right;
}
.hero-bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 0;
border-top: 1px solid var(--line);
box-shadow: none;
padding: 22px clamp(20px, 4vw, 48px) 34px;
text-align: center;
}
.hero-desc {
max-width: 560px;
font-size: 15px;
line-height: 1.7;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.hero-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
align-items: center;
opacity: 1;
visibility: visible;
transform: none;
}
/* ===========================================================
07 / BRAND STRIP
=========================================================== */
.brand-section {
padding-top: var(--gap);
}
.brand-frame {
position: relative;
overflow: hidden;
}
.brand-frame::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(73, 120, 111, .055), transparent 28%, transparent 72%, rgba(73, 120, 111, .04)),
linear-gradient(180deg, rgba(255, 255, 255, .34), transparent);
opacity: .8;
}
.brand-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.25fr repeat(4, 1fr);
}
.brand-cell {
position: relative;
min-height: 82px;
padding: 18px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
text-align: center;
border-right: 1px solid var(--line-soft);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .55);
overflow: hidden;
}
.brand-cell::after {
content: '';
position: absolute;
left: 50%;
bottom: 12px;
width: 24px;
height: 1px;
transform: translateX(-50%) scaleX(.4);
transform-origin: center;
background: var(--accent);
opacity: 0;
transition: opacity .45s ease, transform .45s ease;
}
.brand-cell:hover::after {
opacity: .55;
transform: translateX(-50%) scaleX(1);
}
.brand-cell:first-child {
align-items: flex-start;
text-align: left;
box-shadow: none;
}
.brand-cell:last-child {
border-right: none;
}
.brand-label .eyebrow {
color: var(--accent-deep);
}
.brand-label p {
max-width: 24ch;
font-size: 12px;
line-height: 1.55;
color: var(--ink-4);
text-shadow: var(--engrave);
}
.brand-meta {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
}
.brand-roll {
position: relative;
overflow: hidden;
height: 1.55em;
width: 100%;
}
.brand-roll .rw {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: clamp(13px, 1vw, 15px);
font-weight: 300;
letter-spacing: .16em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ink-3);
text-shadow: var(--engrave);
transition:
transform .85s cubic-bezier(.16, 1, .3, 1),
opacity .75s ease,
filter .75s ease,
color .35s ease;
}
.brand-cell:hover .rw {
color: var(--ink-1);
}
/* ===========================================================
08 / SHARED SECTION HEAD
Used by Studio / 01 and Practice / 02
=========================================================== */
.sec-head {
padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 48px) 0;
}
.sec-head.center {
text-align: center;
}
.sec-head .eyebrow {
margin-bottom: 18px;
}
.sec-title {
font-size: clamp(28px, 4vw, 52px);
max-width: 20ch;
}
.sec-head.center .sec-title {
margin: 0 auto;
}
.studio-title {
max-width: 18.5ch;
font-size: clamp(38px, 4.9vw, 68px);
line-height: .94;
letter-spacing: -0.07em;
}
.studio-lead {
max-width: 48ch;
margin: 22px 0 0;
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--ink-3);
text-align: left;
text-shadow: var(--engrave);
}
.desktop-break {
display: block;
}
/* ===========================================================
09 / STUDIO / 01
=========================================================== */
.about-grid {
display: grid;
grid-template-columns: .92fr 1.08fr;
margin-top: clamp(34px, 4.5vw, 62px);
border-top: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}
.about-stats {
border-right: 1px solid var(--line);
}
.about-stats li {
min-height: 116px;
padding: 0 clamp(22px, 4vw, 42px);
border-bottom: 1px solid var(--line);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68);
}
.about-stats li:last-child {
border-bottom: none;
}
.about-lead {
min-height: 108px;
display: flex;
align-items: center;
}
.about-stats .lead {
max-width: 58ch;
font-size: 14px;
line-height: 1.65;
font-weight: 300;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.metric-row {
min-height: 116px;
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
align-items: center;
gap: 22px;
}
.metric-main {
display: grid;
grid-template-columns: 148px minmax(0, 1fr);
align-items: center;
gap: 34px;
}
.ico-wrap {
width: 44px;
height: 44px;
border-radius: 999px;
display: grid;
place-items: center;
color: var(--accent-deep);
background:
linear-gradient(to bottom, rgba(255, 255, 255, .74), rgba(216, 222, 218, .54));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .82),
0 1px 2px rgba(17, 24, 23, .05);
}
.ico-wrap iconify-icon {
font-size: 22px;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8));
}
.stat-num {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(38px, 4vw, 54px);
line-height: .9;
letter-spacing: -0.065em;
color: var(--ink-1);
text-shadow: var(--engrave);
white-space: nowrap;
}
.stat-num .suf {
color: var(--accent-deep);
font-size: .42em;
letter-spacing: -0.02em;
margin-left: 6px;
vertical-align: baseline;
}
.stat-desc {
max-width: none;
font-size: 12px;
line-height: 1.35;
color: var(--ink-3);
text-shadow: var(--engrave);
white-space: nowrap;
}
.stat-desc span {
display: block;
margin-top: 7px;
max-width: 34ch;
font-size: 11px;
line-height: 1.45;
color: var(--ink-4);
white-space: normal;
}
.studio-image-card {
position: relative;
min-height: 520px;
overflow: hidden;
}
.studio-photo {
width: 100%;
height: 100%;
min-height: 520px;
background:
linear-gradient(180deg, rgba(23, 23, 22, .04), rgba(23, 23, 22, .22)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b752669e-1c32-4cbe-acda-c63430749958_original.png") center / cover no-repeat;
}
.studio-photo::before {
opacity: .42;
background-size: 34px 34px;
}
.studio-image-caption {
position: absolute;
left: clamp(20px, 3vw, 34px);
right: clamp(20px, 3vw, 34px);
bottom: clamp(18px, 3vw, 30px);
z-index: 2;
display: flex;
justify-content: space-between;
gap: 18px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(250, 247, 240, .78);
text-shadow: 0 1px 8px rgba(0, 0, 0, .32);
}
/* ===========================================================
10 / PRACTICE / 02
Image reveal cards
=========================================================== */
.practice-head {
text-align: center;
}
.practice-head .eyebrow {
justify-content: center;
}
.practice-title {
margin: 0 auto;
max-width: none;
font-size: clamp(38px, 4.9vw, 68px);
line-height: .94;
letter-spacing: -0.07em;
text-align: center;
}
.practice-lead {
max-width: 58ch;
margin: 22px auto 0;
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--ink-3);
text-align: center;
text-shadow: var(--engrave);
}
.practice-line-title {
display: flex;
flex-direction: column;
align-items: center;
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: clamp(34px, 4.5vw, 62px);
border-top: 1px solid var(--line);
box-shadow: 0 1px 0 #fff;
}
.service {
position: relative;
overflow: hidden;
min-height: 460px;
border-right: 1px solid var(--line);
z-index: 1;
}
.service:last-child {
border-right: none;
}
.s-photo {
position: absolute;
inset: 0;
z-index: 1;
}
.service-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1);
transition:
transform .9s cubic-bezier(.16, 1, .3, 1),
filter .9s ease;
}
.service:hover .service-img {
transform: scale(1.08);
filter: saturate(.92) contrast(1.04);
}
.architecture-img {
background-image:
linear-gradient(180deg, rgba(23, 23, 22, .18), rgba(23, 23, 22, .56)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a8f1d8a8-4fe4-4938-8925-6bcdf951ca52_original.png");
}
.interiors-img {
background-image:
linear-gradient(180deg, rgba(23, 23, 22, .14), rgba(23, 23, 22, .52)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2ca67af2-32d6-4951-83b7-8faa2cf63d83_original.png");
}
.objects-img {
background-image:
linear-gradient(180deg, rgba(23, 23, 22, .14), rgba(23, 23, 22, .56)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d2f8caa5-5455-4e3b-8a09-274a2786c9d3_original.png");
}
.strategy-img {
background-image:
linear-gradient(180deg, rgba(23, 23, 22, .16), rgba(23, 23, 22, .58)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/635f0c12-f6cf-490f-9745-73f75e523c7c_original.png");
}
.s-cover {
position: absolute;
z-index: 2;
width: 101%;
height: 101%;
top: 49%;
left: 51%;
transform: translate(-51%, -49%) scale(1);
opacity: 1;
background: linear-gradient(to bottom, var(--surface-hi), var(--surface-lo));
box-shadow: var(--inset-edge);
transition:
transform 1s cubic-bezier(.16, 1, .3, 1),
opacity .9s ease;
}
.service:hover .s-cover {
transform: translate(-51%, -49%) scale(0);
opacity: 0;
}
.s-content {
position: absolute;
inset: 0;
z-index: 3;
padding: 30px 28px 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.s-tag {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 12px;
font-weight: 400;
letter-spacing: .5px;
text-transform: uppercase;
padding: 7px 13px;
border-radius: 4px;
background: linear-gradient(to bottom, var(--accent-deep), var(--ink-1));
color: #F8FAF8;
text-shadow: 0 1px 0 rgba(0, 0, 0, .38);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .12),
0 1px 2px rgba(17, 24, 23, .16);
transition:
background .5s ease,
color .5s ease,
box-shadow .5s ease,
text-shadow .5s ease;
}
.s-tag::before {
content: '';
width: 8px;
height: 8px;
flex: 0 0 auto;
background: var(--accent);
border-radius: 1px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.service:hover .s-tag {
background: linear-gradient(to bottom, #FCFDFE, var(--surface-lo));
color: var(--ink-1);
text-shadow: var(--engrave);
box-shadow:
inset 0 1px 0 #fff,
0 1px 2px rgba(0, 0, 0, .06);
}
.s-desc {
font-size: 13px;
font-weight: 300;
color: rgba(248, 250, 248, .74);
opacity: 0;
margin-top: 14px;
max-width: 26ch;
text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
transition: opacity .5s ease;
}
.service:hover .s-desc {
opacity: 1;
}
.s-mid {
text-align: center;
}
.s-num {
font-weight: 200;
font-size: clamp(96px, 11vw, 150px);
line-height: 1;
letter-spacing: -0.03em;
color: rgba(28, 31, 36, .10);
text-shadow: var(--engrave);
transition: color .5s ease, text-shadow .5s ease;
}
.service:hover .s-num {
color: rgba(241, 243, 246, .85);
text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.s-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
}
.s-list {
border-left: 2px solid var(--accent);
padding-left: 14px;
display: flex;
flex-direction: column;
gap: 11px;
}
.s-list li {
font-size: 12px;
font-weight: 400;
line-height: 1;
color: var(--ink-1);
text-shadow: var(--engrave);
transition: color .5s ease, text-shadow .5s ease;
}
.service:hover .s-list li {
color: #F8FAF8;
text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.s-btn {
width: 50px;
height: 50px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
opacity: 0;
transform: translateY(6px);
background: linear-gradient(to bottom, #FCFDFE, var(--surface-lo));
box-shadow:
0 2px 5px rgba(0, 0, 0, .25),
inset 0 1px 0 #fff,
inset 0 -1px 1px rgba(0, 0, 0, .06);
transition: opacity .5s ease, transform .5s ease;
}
.s-btn iconify-icon {
font-size: 18px;
color: var(--ink-1);
filter: drop-shadow(0 1px 0 #fff);
}
.service:hover .s-btn {
opacity: 1;
transform: translateY(0);
}
/* ===========================================================
11 / RESPONSIVE — HEADER, HERO, STUDIO, PRACTICE
=========================================================== */
@media (max-width: 1024px) {
.brand-inner {
grid-template-columns: repeat(3, 1fr);
}
.brand-cell:nth-child(3) {
border-right: none;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.service:nth-child(2) {
border-right: none;
}
.service:nth-child(1),
.service:nth-child(2) {
border-bottom: 1px solid var(--line);
}
}
@media (max-width: 900px) {
.about-grid {
grid-template-columns: 1fr;
}
.about-stats {
border-right: none;
border-bottom: 1px solid var(--line);
}
.metric-main {
grid-template-columns: 1fr;
gap: 8px;
}
.stat-desc {
white-space: normal;
}
.studio-image-card,
.studio-photo {
min-height: 420px;
}
}
@media (max-width: 820px) {
.main-nav,
.nav-right .btn,
.state {
display: none;
}
.burger {
display: inline-flex;
}
}
@media (max-width: 760px) {
.hero-image-stage {
min-height: 520px;
}
.hero-title {
font-size: clamp(58px, 18vw, 92px);
}
.hero-kicker {
left: clamp(24px, 6vw, 38px);
right: clamp(24px, 6vw, 38px);
text-align: left;
}
.studio-title {
font-size: clamp(38px, 12vw, 62px);
max-width: 12ch;
}
.desktop-break {
display: none;
}
.practice-title {
max-width: 92%;
font-size: clamp(38px, 12vw, 62px);
}
.practice-title span {
white-space: normal;
}
}
@media (max-width: 560px) {
.brand-inner {
grid-template-columns: 1fr;
}
.brand-cell {
border-right: none;
border-bottom: 1px solid var(--line-soft);
}
.brand-cell:last-child {
border-bottom: none;
}
.metric-row {
grid-template-columns: 1fr;
gap: 14px;
}
.ico-wrap {
width: 40px;
height: 40px;
}
.studio-image-caption {
flex-direction: column;
gap: 4px;
}
.services-grid {
grid-template-columns: 1fr;
}
.service {
border-right: none !important;
border-bottom: 1px solid var(--line);
}
.service:last-child {
border-bottom: none;
}
}
@media (prefers-reduced-motion: reduce) {
.node i {
animation: none;
}
* {
scroll-behavior: auto;
}
}
/* ===========================================================
MATERIAL INDEX / MARQUEE
=========================================================== */
.marquee {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 50% 50%, rgba(73, 120, 111, .07), transparent 46%),
linear-gradient(180deg, rgba(248, 250, 248, .96), rgba(221, 227, 223, .86));
}
.marquee::before,
.marquee::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: 4;
width: clamp(72px, 12vw, 180px);
pointer-events: none;
}
.marquee::before {
left: 0;
background: linear-gradient(to right, rgba(248, 250, 248, .96), transparent);
}
.marquee::after {
right: 0;
background: linear-gradient(to left, rgba(221, 227, 223, .92), transparent);
}
.marquee-head {
position: relative;
z-index: 5;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 18px;
padding: 18px clamp(22px, 4vw, 44px);
border-bottom: 1px solid rgba(82, 100, 96, .18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66);
}
.marquee-head::before,
.marquee-head::after {
content: '';
height: 1px;
background: linear-gradient(to right, transparent, rgba(82, 100, 96, .24), transparent);
}
.marquee-head span {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-deep);
text-shadow: var(--engrave);
white-space: nowrap;
}
.marquee .row {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid rgba(82, 100, 96, .16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58);
}
.marquee .row:last-child {
border-bottom: none;
}
.marquee .row.alt {
background:
linear-gradient(180deg, rgba(17, 24, 23, .018), transparent);
}
.marquee .row.fine {
background:
linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(17, 24, 23, .012));
}
.mq-track {
display: flex;
flex: 0 0 auto;
align-items: center;
white-space: nowrap;
animation: mq 36s linear infinite;
will-change: transform;
}
.marquee .row.alt .mq-track {
animation-direction: reverse;
animation-duration: 44s;
}
.marquee .row.fine .mq-track {
animation-duration: 52s;
}
.marquee:hover .mq-track {
animation-play-state: paused;
}
.mq-track span {
display: inline-flex;
align-items: center;
padding: clamp(16px, 2.3vw, 26px) 0;
font-family: var(--font-display);
font-size: clamp(30px, 5.2vw, 72px);
font-weight: 400;
line-height: .92;
letter-spacing: -0.06em;
color: var(--ink-1);
text-shadow:
0 1px 0 rgba(255, 255, 255, .7),
0 6px 18px rgba(17, 24, 23, .035);
}
.marquee .row.fine .mq-track span {
font-family: var(--font-mono);
font-size: clamp(12px, 1.15vw, 15px);
font-weight: 300;
letter-spacing: .16em;
text-transform: uppercase;
line-height: 1;
color: var(--ink-3);
}
.mq-track .sep {
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(34px, 5vw, 72px);
font-style: normal;
font-size: .28em;
color: var(--accent);
text-shadow: var(--engrave);
}
.marquee .row.fine .sep {
width: clamp(26px, 4vw, 54px);
font-size: .8em;
color: var(--accent-deep);
}
.mq-note {
position: absolute;
right: clamp(20px, 4vw, 42px);
bottom: clamp(16px, 2.4vw, 28px);
z-index: 5;
max-width: 240px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 300;
line-height: 1.65;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-4);
text-align: right;
text-shadow: var(--engrave);
pointer-events: none;
}
@keyframes mq {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@media (max-width: 760px) {
.marquee-head {
grid-template-columns: 1fr;
text-align: center;
}
.marquee-head::before,
.marquee-head::after {
display: none;
}
.mq-note {
position: static;
max-width: none;
padding: 0 22px 22px;
text-align: center;
}
.mq-track span {
font-size: clamp(34px, 13vw, 62px);
}
}
/* ===========================================================
PROJECTS
=========================================================== */
.projects-frame {
padding: 0;
}
.inner.projects-frame {
backdrop-filter: none;
}
.pin-wrap {
position: relative;
height: 100vh;
min-height: 100vh;
overflow: hidden;
}
/* Selected Projects / 03 intro */
.proj-intro {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
pointer-events: none;
}
.proj-intro .eyebrow {
justify-content: center;
margin-bottom: 22px;
}
.proj-title {
font-family: var(--font-display);
font-weight: 400;
text-transform: uppercase;
letter-spacing: -0.045em;
line-height: 1.08;
font-size: clamp(34px, 5.2vw, 68px);
color: var(--ink-1);
text-shadow:
0 1px 0 rgba(255, 255, 255, .72),
0 4px 12px rgba(17, 24, 23, .035);
max-width: 15.5ch;
}
.proj-title .proj-thumb {
display: inline-block;
vertical-align: middle;
padding: 2px;
margin: 0 .26em;
border-radius: 9px;
background: linear-gradient(to bottom, var(--bezel-hi), var(--bezel-lo));
box-shadow: var(--shadow-btn);
transform: translateY(-0.08em);
}
.proj-title .proj-thumb .pi {
display: block;
width: clamp(96px, 12vw, 156px);
height: clamp(56px, 6.6vw, 88px);
border-radius: 7px;
overflow: hidden;
position: relative;
background:
linear-gradient(180deg, rgba(17, 24, 23, .08), rgba(17, 24, 23, .28)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2746f76a-7acc-4b8f-bf2c-abefc06047af_original.png") center / cover no-repeat;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
inset 0 0 0 1px rgba(248, 250, 248, .08);
}
.proj-title .proj-thumb .pi::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .20));
pointer-events: none;
}
.proj-intro .muted {
margin-top: 26px;
max-width: 54ch;
font-size: 14px;
font-weight: 300;
line-height: 1.65;
color: var(--ink-3);
text-shadow: var(--engrave);
}
/* Reveal state — centered project card */
.pin-stage {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
transform-origin: center center;
will-change: transform, opacity;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(18px, 2.4vw, 32px);
}
.project-slider {
width: min(100%, 1120px);
margin: 0 auto;
padding: 0 0 24px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
transform: translateY(clamp(28px, 5vh, 58px));
}
.project-slider .swiper-wrapper {
align-items: center;
}
.project-slider .swiper-slide {
width: 100% !important;
flex: 0 0 100%;
opacity: 0 !important;
pointer-events: none;
transition: opacity .45s ease;
}
.project-slider .swiper-slide-active {
opacity: 1 !important;
pointer-events: auto;
}
.slide-card {
width: 100%;
}
/* Main project card */
.slide-card .inner {
display: grid;
grid-template-columns: minmax(0, 1.42fr) minmax(320px, .72fr);
min-height: clamp(460px, 62vh, 640px);
background: linear-gradient(to bottom, var(--surface-hi), var(--surface-lo));
overflow: hidden;
}
/* Image side — base */
.slide-card .ph {
position: relative;
min-height: clamp(460px, 62vh, 640px);
background:
linear-gradient(180deg, rgba(17, 24, 23, .06), rgba(17, 24, 23, .22)),
linear-gradient(to bottom, rgba(248, 250, 248, .76), rgba(216, 222, 218, .68));
}
.slide-card .ph::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(82, 100, 96, .14) 1px, transparent 1px),
linear-gradient(90deg, rgba(82, 100, 96, .14) 1px, transparent 1px);
background-size: 30px 30px;
opacity: .18;
pointer-events: none;
}
.slide-card .ph[data-label]::after {
content: attr(data-label);
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
transform: translate(-50%, -50%);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(248, 250, 248, .62);
text-shadow: 0 1px 8px rgba(17, 24, 23, .32);
}
/* Datum House image */
.slide-card .ph.project-img-datum {
background:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .22)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dce21a21-ab7d-4a0e-846f-3e452aa9e41b_original.png") center / cover no-repeat;
}
/* Alex Atelier image */
.slide-card .ph.project-img-alex {
background:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .22)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a1c06b77-9bc7-4827-b7e0-2c1a41635f0f_original.png") center / cover no-repeat;
}
/* North Pavilion image */
.slide-card .ph.project-img-north {
background:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .22)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/37ac09ed-dd51-44c1-b052-c8780748cbcf_original.png") center / cover no-repeat;
}
/* Project type tag on image */
.slide-tag {
position: absolute;
top: clamp(18px, 2vw, 26px);
left: clamp(18px, 2vw, 26px);
z-index: 4;
}
.slide-tag .chip > span,
.slide-tag > span {
min-width: 112px;
justify-content: center;
font-size: 10px;
letter-spacing: .12em;
}
/* Content side */
.slide-body {
padding: clamp(28px, 3.3vw, 46px);
display: grid;
grid-template-rows: 1fr auto;
gap: clamp(22px, 3vw, 36px);
position: relative;
border-left: 1px solid var(--line);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .58);
background:
linear-gradient(180deg, rgba(248, 250, 248, .92), rgba(221, 227, 223, .86));
}
.slide-copy {
align-self: start;
padding-top: clamp(18px, 2.8vw, 34px);
}
.slide-index {
display: block;
margin-bottom: 18px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-deep);
text-shadow: var(--engrave);
}
.slide-title {
max-width: 10ch;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(44px, 5.2vw, 76px);
text-transform: none;
letter-spacing: -0.082em;
line-height: .88;
color: var(--ink-1);
text-shadow:
0 1px 0 rgba(255, 255, 255, .58),
0 4px 14px rgba(17, 24, 23, .035);
}
.slide-desc {
max-width: 36ch;
font-size: 14px;
font-weight: 300;
color: var(--ink-3);
text-shadow: var(--engrave);
margin: 20px 0 0;
line-height: 1.68;
}
/* Stacked project details */
.project-details {
display: grid;
gap: 6px;
padding-top: 18px;
border-top: 1px solid var(--line);
box-shadow: 0 -1px 0 rgba(255, 255, 255, .62);
}
.detail-item {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 14px;
min-height: 46px;
padding: 7px 0;
border-bottom: 1px solid rgba(82, 100, 96, .14);
}
.detail-item:last-child {
border-bottom: none;
}
.detail-item iconify-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
font-size: 21px;
color: var(--accent-deep);
border-radius: 999px;
background:
linear-gradient(to bottom, rgba(255, 255, 255, .72), rgba(216, 222, 218, .52));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .8),
0 1px 2px rgba(17, 24, 23, .05);
}
.detail-item strong {
display: block;
font-family: var(--font-display);
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.055em;
color: var(--ink-1);
text-shadow: var(--engrave);
}
.detail-item span {
display: block;
margin-top: 5px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 300;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
}
/* Hide old metric layout if still present */
.slide-stats {
display: none;
}
/* Navigation arrows centered underneath the card */
.slider-nav {
position: static;
z-index: 5;
transform: none;
display: inline-flex;
gap: 8px;
padding: 6px;
margin: 16px auto 22px;
border-radius: 13px;
background:
linear-gradient(to bottom, rgba(248, 250, 248, .92), rgba(216, 222, 218, .86));
border: 1px solid rgba(82, 100, 96, .18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .72);
}
.slider-btn {
width: 44px;
height: 38px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: none;
}
.slider-btn > span {
width: 100%;
height: 100%;
padding: 0;
justify-content: center;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .78),
inset 0 -1px 1px rgba(17, 24, 23, .04);
}
.slider-btn iconify-icon {
font-size: 17px;
color: var(--ink-2);
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .72));
}
/* Remove heavy project card shadow */
.slide-card.bezel {
box-shadow: none;
}
.slide-card.bezel > .inner {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .62),
inset 0 -1px 1px rgba(17, 24, 23, .025);
}
/* Mobile */
@media (max-width: 768px) {
.pin-wrap {
height: auto;
min-height: auto;
overflow: visible;
}
.proj-intro {
position: static;
inset: auto;
margin: 0 auto clamp(28px, 5vw, 48px);
padding: clamp(28px, 5vw, 48px) 20px 0;
}
.proj-title {
max-width: 92%;
font-size: clamp(38px, 12vw, 62px);
}
.pin-stage {
position: relative;
inset: auto;
transform: none !important;
opacity: 1 !important;
padding: 0 clamp(16px, 3vw, 40px) clamp(78px, 10vw, 96px);
}
.project-slider {
width: 100%;
max-width: none;
transform: none;
}
.slide-card .inner {
grid-template-columns: 1fr;
min-height: auto;
}
.slide-card .ph {
min-height: 360px;
}
.slide-body {
border-left: none;
border-top: 1px solid var(--line);
gap: 32px;
}
.slide-copy {
padding-top: 0;
}
.slide-title {
max-width: none;
font-size: clamp(34px, 10vw, 54px);
}
.slide-tag {
position: static;
margin-bottom: 20px;
justify-self: start;
}
.project-details {
gap: 10px;
}
.detail-item {
grid-template-columns: 32px minmax(0, 1fr);
}
.slider-nav {
margin-top: 16px;
}
}
/* ===========================================================
CONTACT
=========================================================== */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
}
.contact-left {
border-right: 1px solid var(--line);
box-shadow: 1px 0 0 #fff;
padding: clamp(28px, 4vw, 52px);
}
.contact-block {
margin-bottom: 38px;
}
.contact-block:last-child {
margin-bottom: 0;
}
.contact-block .eyebrow {
margin-bottom: 16px;
}
.contact-block li {
padding: 6px 0;
}
.contact-block.links a {
font-size: clamp(18px, 2.2vw, 26px);
font-weight: 200;
letter-spacing: -0.01em;
color: var(--ink-1);
text-shadow: var(--engrave);
transition: color .3s;
}
.contact-block.links a:hover {
color: var(--accent-deep);
}
.offices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.offices h4 {
font-weight: 300;
font-size: 18px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--ink-1);
text-shadow: var(--engrave);
margin-bottom: 8px;
}
.offices p {
font-size: 13px;
font-weight: 300;
color: var(--ink-3);
text-shadow: var(--engrave);
line-height: 1.7;
}
.contact-form {
padding: clamp(28px, 4vw, 52px);
}
.field {
margin-bottom: 20px;
}
.field label {
display: block;
font-size: 11px;
font-weight: 300;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
margin-bottom: 8px;
}
.field .ctrl {
padding: 1px;
border-radius: 6px;
background: linear-gradient(to bottom, var(--bezel-hi), var(--bezel-lo));
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.field input,
.field textarea {
width: 100%;
font-family: var(--font);
font-size: 14px;
font-weight: 300;
color: var(--ink-1);
background: linear-gradient(to bottom, #FAFBFD, var(--surface-lo));
border: none;
border-radius: 5px;
padding: 12px 14px;
outline: none;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.field textarea {
resize: vertical;
min-height: 96px;
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--ink-4);
}
.field input:focus,
.field textarea:focus {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 2px rgba(92, 119, 153, .25);
}
.attach {
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ink-3);
text-shadow: var(--engrave);
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.attach input {
display: none;
}
/* ===========================================================
FOOTER
=========================================================== */
.footer {
padding: var(--gap) 0;
}
.footer-frame {
padding: clamp(28px, 4vw, 48px);
text-align: center;
}
.footer-nav {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
align-items: center;
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.footer-nav a:hover {
color: var(--ink-1);
}
.footer-nav .sq {
width: 5px;
height: 5px;
background: var(--accent);
border-radius: 1px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.footer-logo {
font-weight: 200;
font-size: clamp(58px, 15vw, 180px);
text-transform: uppercase;
letter-spacing: -0.04em;
line-height: .9;
margin: clamp(32px, 5vw, 52px) 0;
color: var(--ink-1);
text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 6px 18px rgba(0, 0, 0, .04);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
border-top: 1px solid var(--line);
box-shadow: 0 -1px 0 rgba(0, 0, 0, .02);
padding-top: 24px;
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.footer-bottom .socials {
display: flex;
gap: 18px;
}
.footer-bottom .socials a:hover {
color: var(--ink-1);
}
.footer-contact {
max-width: 760px;
margin: 0 auto clamp(28px, 4vw, 42px);
display: flex;
justify-content: center;
align-items: center;
gap: 10px 14px;
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
}
.footer-contact span,
.footer-contact a {
display: inline-flex;
align-items: center;
gap: 10px;
}
.footer-contact span:not(:first-child)::before,
.footer-contact a::before {
content: '';
width: 5px;
height: 5px;
border-radius: 1px;
background: var(--accent);
opacity: .72;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
}
.footer-contact a {
color: var(--accent-deep);
transition: color .3s ease;
}
.footer-contact a:hover {
color: var(--ink-1);
}
@media (max-width: 620px) {
.footer-contact {
flex-direction: column;
gap: 8px;
}
.footer-contact span::before,
.footer-contact a::before {
display: none;
}
.footer-bottom {
justify-content: center;
text-align: center;
}
.footer-bottom .socials {
justify-content: center;
}
}
/* ===========================================================
RESPONSIVE
=========================================================== */
@media (max-width: 1024px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.service:nth-child(2) {
border-right: none;
}
.service:nth-child(1),
.service:nth-child(2) {
border-bottom: 1px solid var(--line);
}
.brand-inner {
grid-template-columns: repeat(3, 1fr);
}
.brand-cell:nth-child(3) {
border-right: none;
}
}
@media (max-width: 820px) {
.main-nav,
.nav-right .btn,
.state {
display: none;
}
.burger {
display: inline-flex;
}
.about-grid,
.contact-grid,
.slide-card .inner {
grid-template-columns: 1fr;
}
.about-stats {
border-right: none;
border-bottom: 1px solid var(--line);
}
.contact-left {
border-right: none;
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 0 #fff;
}
.hero-bottom {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 560px) {
.services-grid {
grid-template-columns: 1fr;
}
.service {
border-right: none !important;
border-bottom: 1px solid var(--line);
}
.offices {
grid-template-columns: 1fr;
}
.arrow-track {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.mq-track,
.arrow-track iconify-icon,
.node i {
animation: none;
}
* {
scroll-behavior: auto;
}
}
/* ===========================================================
METHOD / 04 — WORKING PROCESS
=========================================================== */
/* Important: must be visible so sticky cards can stack */
.inner.method-frame {
overflow: visible;
background:
linear-gradient(180deg, rgba(248, 250, 248, .94), rgba(221, 227, 223, .86));
}
/* Main two-column layout */
.process-grid {
display: grid;
grid-template-columns: .95fr 1.05fr;
align-items: start;
min-height: clamp(620px, 76vh, 880px);
margin-top: 0;
border-top: none;
box-shadow: none;
}
/* Left editorial panel */
.process-left {
align-self: start;
position: sticky;
top: 92px;
padding: clamp(34px, 4vw, 58px);
min-height: clamp(520px, 62vh, 680px);
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0;
border-right: 1px solid rgba(82, 100, 96, .22);
box-shadow: inset -1px 0 0 rgba(255, 255, 255, .58);
}
.process-copy {
max-width: 600px;
}
.method-title {
margin-top: 18px;
max-width: 17ch;
font-size: clamp(38px, 4.9vw, 68px);
line-height: .94;
letter-spacing: -0.07em;
}
.process-left .lead {
max-width: 58ch;
margin-top: 22px;
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.process-note {
margin-top: clamp(28px, 4vw, 52px);
display: grid;
gap: 10px;
max-width: 420px;
}
.process-note span {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
}
.process-note span::before {
content: '';
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
/* Button closer to the text */
.process-left .btn {
align-self: flex-start;
margin-top: clamp(28px, 4vw, 48px);
}
/* Right process cards */
.process-steps {
padding: clamp(30px, 4vw, 56px);
display: block;
}
/* Sticky stack restored */
.process-step {
position: sticky;
padding: 1px;
margin-bottom: 22px;
border-radius: 13px;
background: linear-gradient(to bottom, var(--bezel-hi), var(--bezel-lo));
box-shadow:
0 12px 28px rgba(17, 24, 23, .055),
0 2px 6px rgba(17, 24, 23, .035);
}
.process-step:nth-child(1) { top: 92px; }
.process-step:nth-child(2) { top: 112px; }
.process-step:nth-child(3) { top: 132px; }
.process-step:nth-child(4) { top: 152px; }
.process-step:last-child {
margin-bottom: 0;
}
.ps-inner {
min-height: 118px;
border-radius: 12px;
background:
linear-gradient(180deg, rgba(248, 250, 248, .94), rgba(221, 227, 223, .84));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .74),
inset 0 -1px 1px rgba(17, 24, 23, .025);
padding: 16px;
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 22px;
align-items: center;
}
/* Placeholder image */
.ps-img {
width: 150px;
height: 92px;
border-radius: 8px;
overflow: hidden;
background:
linear-gradient(to bottom, rgba(248, 250, 248, .88), rgba(221, 227, 223, .72));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .62),
inset 0 0 0 1px rgba(82, 100, 96, .14);
}
.ps-img .ph {
width: 100%;
height: 100%;
}
.ps-img .ph::before {
background-size: 24px 24px;
opacity: .42;
}
.ps-img .ph[data-label]::after {
font-size: 9px;
letter-spacing: .16em;
color: var(--ink-4);
}
/* Survey & Brief image */
.ps-img .ph.process-img-survey {
background:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .18)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/758df41d-e6ca-4e51-9e48-1f5fefa3ae25_original.png") center / cover no-repeat;
}
/* Concept & Massing image */
.ps-img .ph.process-img-concept {
background:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .18)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3b1264c6-fe48-44ff-9ed7-8a6f0f3025f2_original.png") center / cover no-repeat;
}
/* Detail & Document image */
.ps-img .ph.process-img-detail {
background:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .18)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/fafb91ec-ede7-40df-a282-f03081c5b5ea_original.png") center / cover no-repeat;
}
/* Build & Handover image */
.ps-img .ph.process-img-build {
background:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .18)),
url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/07fd22de-f88e-4175-8a90-b6a29b1de784_original.png") center / cover no-repeat;
}
/* Text content */
.ps-content {
min-width: 0;
}
.ps-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 10px;
}
.ps-num {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 300;
letter-spacing: .12em;
color: var(--accent-deep);
text-shadow: var(--engrave);
}
.ps-phase {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 300;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
}
.ps-content h3 {
font-size: clamp(20px, 2vw, 26px);
font-weight: 400;
text-transform: uppercase;
letter-spacing: .02em;
line-height: 1;
color: var(--ink-1);
text-shadow: var(--engrave);
margin-bottom: 10px;
}
.ps-content p {
max-width: 58ch;
font-size: 13px;
font-weight: 300;
color: var(--ink-3);
text-shadow: var(--engrave);
line-height: 1.6;
}
.ps-meta {
margin-top: 12px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ps-meta span {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 300;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
}
/* Responsive */
@media (max-width: 900px) {
.inner.method-frame {
overflow: hidden;
}
.process-grid {
grid-template-columns: 1fr;
min-height: auto;
}
.process-left {
position: static;
min-height: auto;
border-right: none;
border-bottom: 1px solid rgba(82, 100, 96, .22);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .58);
}
.method-title {
max-width: 13ch;
font-size: clamp(38px, 12vw, 62px);
}
.process-steps {
padding: clamp(24px, 5vw, 44px);
}
.process-step {
position: relative;
top: auto !important;
}
}
@media (max-width: 620px) {
.ps-inner {
grid-template-columns: 1fr;
gap: 16px;
}
.ps-img {
width: 100%;
height: 160px;
}
.ps-top {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
}
/* ===========================================================
THE DIFFERENCE / 05
=========================================================== */
.difference-frame {
overflow: hidden;
background:
linear-gradient(180deg, rgba(248, 250, 248, .95), rgba(221, 227, 223, .86));
}
.difference-head {
padding: clamp(34px, 4vw, 58px) clamp(24px, 4vw, 52px) clamp(30px, 3.6vw, 46px);
text-align: center;
border-bottom: 1px solid rgba(82, 100, 96, .18);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .62);
}
.difference-head .eyebrow {
justify-content: center;
margin-bottom: 18px;
}
.difference-title {
margin: 0 auto;
max-width: none;
font-size: clamp(38px, 4.9vw, 68px);
line-height: .94;
letter-spacing: -0.07em;
text-align: center;
}
.difference-lead {
max-width: 52ch;
margin: 20px auto 0;
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--ink-3);
text-align: center;
text-shadow: var(--engrave);
}
.compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid rgba(82, 100, 96, .18);
}
.compare-col {
position: relative;
padding: clamp(30px, 4vw, 48px);
}
.compare-col.them {
color: var(--ink-3);
background:
linear-gradient(180deg, rgba(248, 250, 248, .56), rgba(221, 227, 223, .44));
border-right: 1px solid rgba(82, 100, 96, .20);
box-shadow: inset -1px 0 0 rgba(255, 255, 255, .54);
}
.compare-col.us {
color: var(--ink-1);
background:
radial-gradient(circle at 78% 12%, rgba(73, 120, 111, .18), transparent 34%),
linear-gradient(180deg, rgba(233, 240, 236, .96), rgba(201, 213, 207, .76));
box-shadow:
inset 1px 0 0 rgba(255, 255, 255, .64),
inset 0 1px 0 rgba(255, 255, 255, .55);
}
.compare-col.us::before {
content: '';
position: absolute;
inset: clamp(14px, 2vw, 22px);
z-index: 0;
border: 1px solid rgba(73, 120, 111, .20);
border-radius: 10px;
pointer-events: none;
}
.compare-col > * {
position: relative;
z-index: 1;
}
.compare-col h3 {
min-height: 46px;
display: flex;
align-items: center;
gap: 11px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(82, 100, 96, .20);
font-family: var(--font-mono);
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .13em;
color: var(--ink-2);
text-shadow: var(--engrave);
}
.compare-col.us h3 {
color: var(--accent-deep);
}
.compare-col.us h3 {
color: var(--accent-deep);
}
.compare-col h3 iconify-icon {
font-size: 16px;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .72));
}
.compare-col ul {
margin-top: 2px;
}
.compare-col li {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: start;
gap: 10px;
padding: 14px 0;
border-bottom: 1px solid rgba(82, 100, 96, .16);
font-size: 14px;
font-weight: 300;
line-height: 1.55;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.compare-col li:last-child {
border-bottom: none;
}
.compare-col.us li {
color: var(--ink-2);
border-bottom-color: rgba(49, 86, 79, .18);
}
.compare-col li iconify-icon {
font-size: 17px;
margin-top: 2px;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .72));
}
.compare-col.them li iconify-icon,
.compare-col.them h3 iconify-icon {
color: var(--ink-4);
opacity: .74;
}
.compare-col.us li iconify-icon,
.compare-col.us h3 iconify-icon {
color: var(--accent-deep);
}
.compare-btn {
display: flex;
justify-content: center;
padding: clamp(26px, 3.4vw, 42px) clamp(24px, 4vw, 52px) clamp(30px, 4vw, 48px);
background:
linear-gradient(180deg, rgba(248, 250, 248, .74), rgba(221, 227, 223, .68));
}
@media (max-width: 820px) {
.compare-grid {
grid-template-columns: 1fr;
}
.compare-col.them {
border-right: none;
border-bottom: 1px solid rgba(82, 100, 96, .20);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .54);
}
.compare-col.us::after {
font-size: clamp(38px, 14vw, 76px);
}
.difference-title {
max-width: 13ch;
font-size: clamp(38px, 12vw, 62px);
}
}
/* ===========================================================
TEAM / PEOPLE / 06
=========================================================== */
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: clamp(28px, 4vw, 52px);
border-top: 1px solid var(--line);
box-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}
.team-card {
min-height: 100%;
padding: 16px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .72);
background:
linear-gradient(180deg, rgba(248, 250, 248, .72), rgba(221, 227, 223, .42));
}
.team-card:nth-child(4n) {
border-right: none;
}
.team-card .tphoto {
width: 100%;
aspect-ratio: 1 / 1;
margin-bottom: 16px;
}
.team-card .tphoto .inner {
height: 100%;
overflow: hidden;
}
.team-photo {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: saturate(.82) contrast(.96);
transform: scale(1.01);
transition:
transform .8s cubic-bezier(.16, 1, .3, 1),
filter .8s ease;
}
.team-card:hover .team-photo {
transform: scale(1.055);
filter: saturate(.9) contrast(1.02);
}
.team-photo::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(17, 24, 23, .02), rgba(17, 24, 23, .18));
pointer-events: none;
}
.people-head {
max-width: 760px;
margin: 0 auto;
padding-bottom: clamp(28px, 3.8vw, 48px);
}
.people-head .eyebrow {
justify-content: center;
margin-bottom: 18px;
}
.people-title {
margin: 0 auto;
max-width: 13ch;
font-size: clamp(42px, 5.35vw, 76px);
line-height: .92;
letter-spacing: -0.075em;
text-align: center;
color: var(--ink-1);
}
.people-lead {
max-width: 56ch;
margin: 22px auto 0;
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--ink-3);
text-align: center;
text-shadow: var(--engrave);
}
.team-photo-01 {
background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/variants/7e5a48f3-c2f2-4588-8f22-259764a5d0fb/3840w.png");
}
.team-photo-02 {
background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a47fdc81-bd26-49ad-af4d-e2e22283b996_3840w.png");
}
.team-photo-03 {
background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b4aab28e-26fa-437c-bd19-d95c86c0c1a6_3840w.jpg");
}
.team-photo-04 {
background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/71d7ad40-af9f-4af2-baa2-8d7eb0382908_3840w.webp");
}
.team-photo-05 {
background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/6e825b87-0682-49e3-98c2-dbdab1f8f9c5_3840w.webp");
}
.team-photo-06 {
background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/986d1cce-e410-49fc-8a2f-4d394452d700_3840w.webp");
}
.team-photo-07 {
background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ac4a631c-975f-4482-9cef-2a1f99a48178_3840w.jpg");
}
.team-card h3 {
font-size: 15px;
font-weight: 400;
color: var(--ink-1);
text-shadow: var(--engrave);
margin-bottom: 3px;
}
.team-card .role {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent-deep);
text-shadow: var(--engrave);
margin-bottom: 12px;
}
.team-bio {
max-width: 34ch;
font-size: 12px;
font-weight: 300;
line-height: 1.62;
color: var(--ink-3);
text-shadow: var(--engrave);
}
/* Hide old team social icons if any remain */
.team-card .tsocial {
display: none;
}
.team-join {
position: relative;
padding: clamp(22px, 2.6vw, 34px);
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(34px, 5vw, 72px);
overflow: hidden;
background:
radial-gradient(circle at 86% 10%, rgba(73, 120, 111, .16), transparent 34%),
radial-gradient(circle at 8% 92%, rgba(248, 250, 248, .78), transparent 42%),
linear-gradient(180deg, rgba(234, 241, 237, .98), rgba(207, 219, 213, .76));
}
.team-join::before {
content: '';
position: absolute;
inset: 16px;
border: 1px solid rgba(73, 120, 111, .18);
border-radius: 12px;
pointer-events: none;
}
.team-join::after {
content: '';
position: absolute;
left: clamp(22px, 2.6vw, 34px);
right: clamp(22px, 2.6vw, 34px);
bottom: clamp(92px, 8vw, 116px);
height: 1px;
background: linear-gradient(to right, rgba(73, 120, 111, .22), transparent);
pointer-events: none;
}
.join-content {
position: relative;
z-index: 1;
}
.join-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-deep);
text-shadow: var(--engrave);
}
.join-kicker .node {
width: 8px;
height: 8px;
flex: 0 0 8px;
}
.team-join .join-title {
max-width: none;
width: 100%;
white-space: nowrap;
font-size: clamp(24px, 2.3vw, 34px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.06em;
text-transform: none;
color: var(--ink-1);
text-shadow: var(--engrave);
margin-bottom: 18px;
}
.team-join p {
max-width: 38ch;
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.join-meta {
margin-top: 28px;
display: grid;
gap: 10px;
}
.join-meta span {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 300;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
}
.join-meta span::before {
content: '';
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 2px;
background: var(--accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
opacity: .78;
}
.team-join .join-btn {
position: relative;
z-index: 1;
align-self: flex-start;
}
.team-join .join-btn > span {
padding: 13px 24px;
}
@media (max-width: 1024px) {
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
.team-card:nth-child(4n) {
border-right: 1px solid var(--line);
}
.team-card:nth-child(2n) {
border-right: none;
}
}
@media (max-width: 560px) {
.team-grid {
grid-template-columns: 1fr;
}
.team-card {
border-right: none !important;
}
.team-bio,
.team-join p {
max-width: none;
}
}
/* ===========================================================
AWARDS ACCORDION
=========================================================== */
.awards {
margin-top: clamp(28px, 4vw, 52px);
border-top: 1px solid var(--line);
box-shadow: 0 1px 0 #fff;
}
.award-item {
border-bottom: 1px solid var(--line);
box-shadow: inset 0 1px 0 #fff;
}
.award-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 24px clamp(20px, 4vw, 40px);
cursor: pointer;
}
.award-head .meta {
display: flex;
gap: 24px;
align-items: baseline;
}
.award-head .date {
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
min-width: 110px;
}
.award-head h3 {
font-size: clamp(17px, 2vw, 23px);
font-weight: 300;
text-transform: uppercase;
letter-spacing: -0.01em;
color: var(--ink-1);
text-shadow: var(--engrave);
}
.award-head .tog iconify-icon {
font-size: 20px;
color: var(--accent);
transition: transform .4s;
filter: drop-shadow(0 1px 0 #fff);
}
.award-item.open .award-head .tog iconify-icon {
transform: rotate(180deg);
}
.award-body {
max-height: 0;
overflow: hidden;
transition: max-height .45s ease;
}
.award-item.open .award-body {
max-height: 320px;
}
.award-body .ab-in {
display: flex;
gap: 24px;
align-items: flex-start;
padding: 0 clamp(20px, 4vw, 40px) 26px;
}
.award-body p {
font-size: 14px;
font-weight: 300;
color: var(--ink-3);
text-shadow: var(--engrave);
max-width: 62ch;
}
.award-body .aimg {
width: 220px;
height: 130px;
flex: 0 0 auto;
}
.award-body .aimg .ph {
width: 100%;
height: 100%;
}
@media (max-width:640px) {
.award-body .aimg {
display: none;
}
.award-head .date {
min-width: auto;
}
.award-head .meta {
flex-direction: column;
gap: 6px;
}
}
/* ===========================================================
RECOGNITION / 07 — ENHANCEMENT PATCH
=========================================================== */
.awards-frame {
background:
radial-gradient(circle at 82% 0%, rgba(73, 120, 111, .075), transparent 34%),
linear-gradient(180deg, rgba(248, 250, 248, .95), rgba(221, 227, 223, .86));
}
.awards-head {
padding-bottom: clamp(28px, 3.6vw, 48px);
}
.awards-title {
max-width: 14ch;
font-size: clamp(38px, 4.9vw, 68px);
line-height: .94;
letter-spacing: -0.07em;
}
.awards-lead {
max-width: 56ch;
margin-top: 20px;
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.award-head {
transition:
background .35s ease,
color .35s ease;
}
.award-item.open .award-head {
background:
linear-gradient(180deg, rgba(234, 241, 237, .78), rgba(221, 227, 223, .52));
}
.award-head .date {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--accent-deep);
text-shadow: var(--engrave);
}
.award-head h3 {
margin-top: 8px;
font-size: clamp(20px, 2.4vw, 32px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.055em;
color: var(--ink-1);
text-shadow: var(--engrave);
}
.award-body p {
max-width: 54ch;
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.aimg {
width: min(100%, 420px);
}
.aimg .inner {
height: 100%;
overflow: hidden;
}
.award-img {
width: 100%;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
filter: saturate(.82) contrast(.96);
transform: scale(1.01);
transition:
transform .8s cubic-bezier(.16, 1, .3, 1),
filter .8s ease;
}
.award-item.open .award-img {
transform: scale(1.045);
filter: saturate(.9) contrast(1.02);
}
.award-img::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(17, 24, 23, .02), rgba(17, 24, 23, .20));
pointer-events: none;
}
.award-img-01 {
background-image:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .18)),
url("https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=1200&q=80");
}
.award-img-02 {
background-image:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .18)),
url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1200&q=80");
}
.award-img-03 {
background-image:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .18)),
url("https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=1200&q=80");
}
.award-img-04 {
background-image:
linear-gradient(180deg, rgba(17, 24, 23, .04), rgba(17, 24, 23, .18)),
url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1200&q=80");
}
@media (max-width: 760px) {
.awards-title {
max-width: 12ch;
font-size: clamp(38px, 12vw, 62px);
}
.awards-lead {
max-width: none;
}
.aimg {
width: 100%;
}
}
/* Recognition accordion — equal open spacing */
.award-body {
overflow: hidden;
}
.award-body .ab-in {
padding: clamp(28px, 3.4vw, 44px) clamp(28px, 4vw, 52px);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
align-items: center;
gap: clamp(28px, 5vw, 72px);
}
/* Recognition images — pure image, no inner frame */
.aimg {
width: min(100%, 420px);
padding: 0 !important;
margin: 0;
background: transparent !important;
box-shadow: none !important;
border: none !important;
border-radius: 12px;
overflow: hidden;
line-height: 0;
}
.award-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
border-radius: 12px;
box-shadow: none;
}
/* Remove overlay if it creates any perceived cropping */
.award-img::after {
display: none;
}
/* make the opened item feel evenly framed */
.award-item.open .award-body .ab-in {
padding-top: clamp(34px, 4vw, 52px);
padding-bottom: clamp(34px, 4vw, 52px);
}
/* keep the text vertically balanced */
.award-body p {
margin: 0;
}
/* make image feel centered in the expanded space */
.award-body .aimg {
justify-self: center;
align-self: center;
}
/* optional: slightly larger image so the open state feels intentional */
.award-img {
aspect-ratio: 16 / 9;
}
/* ===========================================================
TESTIMONIALS / CLIENT NOTES / 08
=========================================================== */
.testimonials-frame {
padding: clamp(38px, 5vw, 72px);
background:
radial-gradient(circle at 50% 0%, rgba(73, 120, 111, .10), transparent 36%),
linear-gradient(180deg, rgba(248, 250, 248, .96), rgba(221, 227, 223, .86));
}
.testimonials-head {
text-align: center;
max-width: 760px;
margin: 0 auto;
}
.testimonials-head .eyebrow {
justify-content: center;
margin-bottom: 18px;
}
.testimonials-title {
max-width: 13ch;
margin: 0 auto;
font-size: clamp(38px, 4.9vw, 68px);
line-height: .94;
letter-spacing: -0.07em;
color: var(--ink-1);
text-shadow:
0 1px 0 rgba(255, 255, 255, .62),
0 4px 14px rgba(17, 24, 23, .035);
}
.testimonials-head p {
max-width: 58ch;
margin: 22px auto 0;
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.testimonial-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 22px);
margin-top: clamp(36px, 5vw, 68px);
}
.testimonial-card {
position: relative;
min-height: clamp(360px, 38vw, 470px);
padding: clamp(24px, 2.8vw, 36px);
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 14px;
background:
linear-gradient(180deg, rgba(248, 250, 248, .86), rgba(221, 227, 223, .64));
border: 1px solid rgba(82, 100, 96, .18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .72),
0 16px 34px rgba(17, 24, 23, .045);
}
.testimonial-card::before {
content: '“';
position: absolute;
right: clamp(18px, 2.5vw, 34px);
top: clamp(10px, 1.8vw, 22px);
font-family: var(--font-display);
font-size: clamp(92px, 9vw, 150px);
line-height: .8;
letter-spacing: -0.08em;
color: rgba(49, 86, 79, .07);
pointer-events: none;
}
.testimonial-card::after {
content: '';
position: absolute;
inset: 14px;
border-radius: 11px;
border: 1px solid rgba(73, 120, 111, .11);
pointer-events: none;
}
.testimonial-card.featured {
background:
radial-gradient(circle at 82% 10%, rgba(73, 120, 111, .16), transparent 34%),
linear-gradient(180deg, rgba(250, 252, 250, .98), rgba(207, 219, 213, .78));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .82),
0 24px 54px rgba(17, 24, 23, .10);
}
.testimonial-card-top {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: clamp(34px, 4vw, 58px);
}
.testimonial-card-top span {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 300;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--accent-deep);
text-shadow: var(--engrave);
}
.testimonial-card-top span + span {
color: var(--ink-4);
}
.testimonial-card-top span + span::before {
content: '/';
margin-right: 8px;
color: var(--ink-4);
}
.testimonial-card h3 {
position: relative;
z-index: 1;
max-width: 11ch;
font-family: var(--font-display);
font-size: clamp(30px, 3.4vw, 48px);
font-weight: 400;
line-height: .94;
letter-spacing: -0.07em;
color: var(--ink-1);
text-shadow:
0 1px 0 rgba(255, 255, 255, .62),
0 4px 14px rgba(17, 24, 23, .035);
}
.testimonial-card p {
position: relative;
z-index: 1;
max-width: 38ch;
margin-top: 22px;
font-size: 13px;
font-weight: 300;
line-height: 1.72;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.testimonial-author {
position: relative;
z-index: 1;
margin-top: auto;
padding-top: clamp(32px, 4vw, 54px);
display: flex;
align-items: center;
gap: 13px;
}
.testimonial-avatar {
width: 46px;
height: 46px;
flex: 0 0 46px;
border-radius: 999px;
background-size: cover;
background-position: center;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .34),
0 8px 20px rgba(17, 24, 23, .08);
}
.testimonial-avatar-01 {
background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/8062c671-ec59-4484-be02-bb84da6c7c3f_3840w.webp");
}
.testimonial-avatar-02 {
background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/25df7579-09f7-4c8c-bb39-18a974a980d0_3840w.webp");
}
.testimonial-avatar-03 {
background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/8a90d32f-809f-4383-b71f-6a9c50621b69_3840w.jpg");
}
.testimonial-author h4 {
font-size: 14px;
font-weight: 400;
color: var(--ink-1);
text-shadow: var(--engrave);
}
.testimonial-author span {
display: block;
margin-top: 3px;
font-size: 12px;
font-weight: 300;
color: var(--ink-4);
text-shadow: var(--engrave);
}
@media (max-width: 980px) {
.testimonial-cards {
grid-template-columns: 1fr;
}
.testimonial-card {
min-height: auto;
}
.testimonial-card h3 {
max-width: 16ch;
}
.testimonial-card p {
max-width: 56ch;
}
}
@media (max-width: 560px) {
.testimonials-frame {
padding: 32px 20px;
}
.testimonials-title {
max-width: 12ch;
font-size: clamp(38px, 12vw, 62px);
}
.testimonial-card {
padding: 24px 20px;
}
.testimonial-card h3 {
font-size: clamp(30px, 10vw, 44px);
}
}
/* ===========================================================
PRINCIPLES / 08
=========================================================== */
.principles-frame {
padding: clamp(38px, 5vw, 72px);
background:
radial-gradient(circle at 50% 0%, rgba(73, 120, 111, .10), transparent 36%),
linear-gradient(180deg, rgba(248, 250, 248, .96), rgba(221, 227, 223, .86));
}
.principles-head {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.principles-head .eyebrow {
justify-content: center;
margin-bottom: 18px;
}
.principles-title {
max-width: 12ch;
margin: 0 auto;
font-size: clamp(38px, 4.9vw, 68px);
line-height: .94;
letter-spacing: -0.07em;
color: var(--ink-1);
}
.principles-head p {
max-width: 58ch;
margin: 22px auto 0;
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.principles {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
gap: clamp(12px, 1.6vw, 18px);
margin-top: clamp(36px, 5vw, 68px);
}
.principle {
position: relative;
min-height: 430px;
padding: clamp(22px, 2.4vw, 30px);
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 14px;
transform: none;
background:
linear-gradient(180deg, rgba(248, 250, 248, .86), rgba(221, 227, 223, .62));
border: 1px solid rgba(82, 100, 96, .18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .72),
0 16px 34px rgba(17, 24, 23, .045);
}
.principle::before {
content: '';
position: absolute;
inset: 14px;
border-radius: 11px;
border: 1px solid rgba(73, 120, 111, .10);
pointer-events: none;
}
.principle::after {
content: '';
position: absolute;
right: -42px;
top: -42px;
width: 140px;
height: 140px;
border-radius: 999px;
background: radial-gradient(circle, rgba(73, 120, 111, .11), transparent 66%);
pointer-events: none;
}
/* no staggered card offset */
.principle:nth-child(2),
.principle:nth-child(4) {
transform: none;
}
/* no hover effect */
.principle:hover {
background:
linear-gradient(180deg, rgba(248, 250, 248, .86), rgba(221, 227, 223, .62));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .72),
0 16px 34px rgba(17, 24, 23, .045);
}
.principle-top {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: clamp(30px, 4vw, 54px);
}
.principle-icon {
width: 46px;
height: 46px;
border-radius: 999px;
display: grid;
place-items: center;
color: var(--accent-deep);
background:
linear-gradient(to bottom, rgba(255, 255, 255, .78), rgba(216, 222, 218, .58));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .82),
0 1px 2px rgba(17, 24, 23, .05);
}
.principle-icon iconify-icon {
font-size: 22px;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8));
}
.principle-top span {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .14em;
color: var(--ink-4);
text-shadow: var(--engrave);
}
.principle h3 {
position: relative;
z-index: 1;
max-width: 10ch;
font-size: clamp(24px, 2.2vw, 34px);
font-weight: 400;
line-height: .98;
letter-spacing: -0.055em;
color: var(--ink-1);
text-shadow: var(--engrave);
}
.principle > p {
position: relative;
z-index: 1;
max-width: 34ch;
margin-top: 18px;
font-size: 13px;
font-weight: 300;
line-height: 1.68;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.principle-points {
position: relative;
z-index: 1;
margin-top: auto;
padding-top: clamp(28px, 4vw, 48px);
display: grid;
gap: 12px;
}
.principle-points li {
position: relative;
padding-left: 18px;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 300;
line-height: 1.6;
letter-spacing: .095em;
text-transform: uppercase;
color: var(--ink-3);
opacity: 1;
text-shadow: var(--engrave);
}
.principle-points li::before {
content: '';
position: absolute;
left: 0;
top: .62em;
width: 6px;
height: 6px;
border-radius: 2px;
background: var(--accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
}
/* text stays equally visible */
.principle-points li.strong,
.principle-points li.medium,
.principle-points li.soft {
color: var(--ink-3);
opacity: 1;
}
/* only bullet markers decrease in intensity */
.principle-points li.strong::before {
opacity: 1;
}
.principle-points li.medium::before {
opacity: .58;
}
.principle-points li.soft::before {
opacity: .28;
}
@media (max-width: 1024px) {
.principles {
grid-template-columns: repeat(2, 1fr);
}
.principle:nth-child(2),
.principle:nth-child(4) {
transform: none;
}
}
@media (max-width: 620px) {
.principles-frame {
padding: 32px 20px;
}
.principles-title {
max-width: 12ch;
font-size: clamp(38px, 12vw, 62px);
}
.principles {
grid-template-columns: 1fr;
}
.principle {
min-height: auto;
}
}
/* ===========================================================
ENGAGEMENTS / 09
=========================================================== */
.engagements-frame {
padding: clamp(38px, 5vw, 72px);
background:
radial-gradient(circle at 50% 0%, rgba(73, 120, 111, .09), transparent 36%),
linear-gradient(180deg, rgba(248, 250, 248, .96), rgba(221, 227, 223, .86));
}
.engagement-head {
max-width: 760px;
margin: 0 auto;
padding: 0;
}
.engagement-head .eyebrow {
justify-content: center;
margin-bottom: 18px;
}
.engagement-title {
max-width: 12ch;
margin: 0 auto;
font-size: clamp(38px, 4.9vw, 68px);
line-height: .94;
letter-spacing: -0.07em;
text-align: center;
color: var(--ink-1);
}
.engagement-head p {
max-width: 58ch;
margin: 22px auto 0;
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--ink-3);
text-align: center;
text-shadow: var(--engrave);
}
.pricing-grid,
.engagement-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(14px, 2vw, 22px);
margin-top: clamp(36px, 5vw, 68px);
padding: 0 !important;
}
.plan {
box-shadow:
0 18px 42px rgba(17, 24, 23, .055);
}
.plan > .inner {
position: relative;
height: 100%;
min-height: 520px;
padding: clamp(28px, 3.4vw, 46px);
display: grid;
grid-template-rows: auto minmax(92px, auto) minmax(76px, auto) 1fr;
align-content: start;
overflow: hidden;
}
.plan > .inner::before {
content: '';
position: absolute;
inset: 16px;
border-radius: 10px;
border: 1px solid rgba(73, 120, 111, .12);
pointer-events: none;
}
.plan-light > .inner {
background:
linear-gradient(180deg, rgba(248, 250, 248, .94), rgba(221, 227, 223, .72));
}
.plan-contrast > .inner {
background:
radial-gradient(circle at 86% 10%, rgba(73, 120, 111, .14), transparent 34%),
linear-gradient(180deg, rgba(238, 244, 241, .98), rgba(207, 219, 213, .80));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .78),
inset 0 -1px 1px rgba(17, 24, 23, .045);
}
.ptype {
position: relative;
z-index: 1;
min-height: clamp(112px, 10vw, 138px);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 22px;
margin-bottom: 0;
}
.plan-kicker {
display: block;
margin-bottom: 14px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-deep);
text-shadow: var(--engrave);
}
.ptype h3 {
max-width: none;
white-space: nowrap;
font-family: var(--font-display);
font-size: clamp(30px, 3.35vw, 50px);
font-weight: 400;
line-height: .94;
letter-spacing: -0.07em;
text-transform: none;
color: var(--ink-1);
text-shadow:
0 1px 0 rgba(255, 255, 255, .62),
0 4px 14px rgba(17, 24, 23, .035);
}
.plan-icon {
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 999px;
display: grid;
place-items: center;
color: var(--accent-deep);
background:
linear-gradient(to bottom, rgba(255, 255, 255, .78), rgba(216, 222, 218, .58));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .82),
0 1px 2px rgba(17, 24, 23, .05);
}
.plan-icon iconify-icon {
font-size: 23px;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8));
}
.pfor {
position: relative;
z-index: 1;
max-width: 46ch;
min-height: 92px;
padding-bottom: 0;
border-bottom: none;
box-shadow: none;
font-family: var(--font-body);
font-size: 15px;
font-weight: 300;
line-height: 1.7;
letter-spacing: 0;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.pprice {
position: relative;
z-index: 1;
min-height: 76px;
margin-top: clamp(22px, 3vw, 34px);
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.pprice .amt {
display: flex;
align-items: baseline;
white-space: nowrap;
font-family: var(--font-display);
font-size: clamp(32px, 3.55vw, 52px);
font-weight: 400;
line-height: .9;
letter-spacing: -0.075em;
color: var(--ink-1);
text-shadow: var(--engrave);
}
.pprice .amt span {
display: inline-block;
margin-left: 4px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 300;
letter-spacing: 0;
color: var(--ink-3);
}
.pprice .btn {
flex: 0 0 auto;
}
.plan ul {
position: relative;
z-index: 1;
margin-top: 0;
padding-top: clamp(34px, 4.5vw, 58px);
border-top: none;
box-shadow: none;
display: grid;
align-content: start;
gap: 12px;
}
.plan ul li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 0;
font-size: 13px;
font-weight: 300;
line-height: 1.48;
color: var(--ink-3);
text-shadow: var(--engrave);
}
.plan ul li iconify-icon {
margin-top: 1px;
flex: 0 0 16px;
font-size: 16px;
color: var(--accent-deep);
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .78));
}
.plan-contrast .plan-kicker,
.plan-contrast ul li iconify-icon {
color: var(--accent-deep);
}
.plan-contrast .pfor,
.plan-contrast ul li {
color: var(--ink-3);
}
.plan-contrast .pprice .amt {
color: var(--accent-deep);
}
.plan-contrast .btn.accent {
background: linear-gradient(to bottom, var(--accent-soft), var(--accent-deep));
}
@media (max-width: 980px) {
.ptype h3 {
white-space: normal;
}
}
@media (max-width: 820px) {
.pricing-grid,
.engagement-grid {
grid-template-columns: 1fr;
}
.plan > .inner {
min-height: auto;
}
.ptype {
min-height: auto;
margin-bottom: 24px;
}
.ptype h3 {
max-width: 14ch;
white-space: normal;
}
.pfor {
min-height: auto;
}
}
@media (max-width: 560px) {
.engagements-frame {
padding: 32px 20px;
}
.engagement-title {
max-width: 12ch;
font-size: clamp(38px, 12vw, 62px);
}
.ptype {
gap: 16px;
}
.plan-icon {
width: 42px;
height: 42px;
flex-basis: 42px;
}
.pprice {
align-items: flex-start;
flex-direction: column;
}
}
/* ===========================================================
FAQ
=========================================================== */
.faq {
max-width: 860px;
margin: clamp(28px, 4vw, 52px) auto 0;
}
.faq-item {
border-top: 1px solid var(--line);
box-shadow: inset 0 1px 0 #fff;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-q {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
padding: 22px 8px;
cursor: pointer;
font-size: clamp(15px, 1.8vw, 19px);
font-weight: 300;
color: var(--ink-1);
text-shadow: var(--engrave);
}
.faq-q .tog iconify-icon {
font-size: 18px;
color: var(--accent);
transition: transform .4s;
filter: drop-shadow(0 1px 0 #fff);
}
.faq-item.open .faq-q .tog iconify-icon {
transform: rotate(45deg);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .45s ease;
}
.faq-item.open .faq-a {
max-height: 240px;
}
.faq-a p {
padding: 0 8px 22px;
font-size: 14px;
font-weight: 300;
color: var(--ink-3);
text-shadow: var(--engrave);
line-height: 1.6;
max-width: 70ch;
}
/* Questions / 10 — headline sizing */
.faq-title {
max-width: 12ch;
margin: 0 auto;
font-size: clamp(38px, 4.9vw, 68px);
line-height: .94;
letter-spacing: -0.07em;
text-align: center;
color: var(--ink-1);
}
/* FAQ / Questions / 10 — spacing + remove last divider */
#faq .inner {
padding-top: clamp(48px, 6vw, 82px);
padding-bottom: clamp(48px, 6vw, 82px);
}
/* keep the question list spacing balanced */
.faq {
margin-top: clamp(34px, 4.5vw, 58px);
margin-bottom: 0;
}
/* remove divider after the last question */
.faq-item:last-child {
border-bottom: none !important;
}
/* if your last item has a top border, keep it, but no bottom line */
.faq-item:last-child::after {
display: none !important;
}
/* ===========================================================
FINAL CTA
=========================================================== */
.cta-frame {
position: relative;
min-height: clamp(520px, 58vh, 720px);
padding: clamp(54px, 7vw, 96px) clamp(24px, 5vw, 70px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
text-align: center;
overflow: hidden;
background:
radial-gradient(circle at 50% 20%, rgba(73, 120, 111, .14), transparent 34%),
radial-gradient(circle at 18% 88%, rgba(255, 255, 255, .72), transparent 34%),
linear-gradient(180deg, rgba(248, 250, 248, .96), rgba(221, 227, 223, .86));
}
.cta-frame::before {
content: '';
position: absolute;
inset: 18px;
border-radius: 11px;
border: 1px solid rgba(73, 120, 111, .13);
pointer-events: none;
}
.cta-frame::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: min(720px, 70vw);
height: min(720px, 70vw);
transform: translate(-50%, -50%);
border-radius: 999px;
background:
radial-gradient(circle, rgba(73, 120, 111, .10), transparent 58%);
filter: blur(18px);
pointer-events: none;
}
.cta-kicker {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 300;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-deep);
text-shadow: var(--engrave);
}
.cta-title {
position: relative;
z-index: 1;
max-width: 10ch;
margin: 0 auto;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(64px, 10vw, 142px);
line-height: .86;
letter-spacing: -0.085em;
color: var(--ink-1);
text-shadow:
0 1px 0 rgba(255, 255, 255, .62),
0 10px 30px rgba(17, 24, 23, .055);
}
.cta-title .headline-line:nth-child(2) {
color: var(--accent-deep);
}
.cta-lead {
position: relative;
z-index: 1;
max-width: 56ch;
margin: clamp(24px, 3vw, 34px) auto 0;
font-size: 15px;
font-weight: 300;
line-height: 1.75;
color: var(--ink-3);
text-align: center;
text-shadow: var(--engrave);
}
.cta-actions {
position: relative;
z-index: 1;
margin-top: clamp(28px, 4vw, 46px);
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.cta-mail {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 300;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink-4);
text-shadow: var(--engrave);
transition: color .3s ease;
}
.cta-mail:hover {
color: var(--accent-deep);
}
.cta-tags {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
gap: 10px;
margin-top: clamp(34px, 4.8vw, 62px);
flex-wrap: wrap;
}
.cta-tags .chip > span {
font-size: 10px;
letter-spacing: .12em;
}
@media (max-width: 760px) {
.cta-frame {
min-height: 520px;
padding: 48px 22px;
}
.cta-title {
font-size: clamp(58px, 18vw, 94px);
}
.cta-lead {
max-width: 40ch;
}
.cta-actions {
flex-direction: column;
gap: 16px;
}
}