*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

:root {
/* =========================================================
VARNRAAJ — CORE SYSTEM
========================================================= */

--black: #09090B;
--surface: #111113;
--card: #141416;
--border: #222226;
--gold: #C9A84C;
--gold-dim: #9A7B32;
--gold-glow: rgba(201, 168, 76, 0.12);
--white: #F5F0E8;
--muted: #888880;

/* =========================================================
TYPOGRAPHY
========================================================= */

--display: 'Cormorant Garamond', Georgia, serif;
--body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

--display-weight: 400;
--body-weight: 400;
}

/* =========================================================
GLOBAL
========================================================= */

html {
scroll-behavior: smooth;
font-size: 16px;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}

body {
width: 100%;
max-width: 100%;
min-width: 0;

background: var(--black);
color: var(--white);

font-family: var(--body);
font-size: 0.96rem;
font-weight: var(--body-weight);
line-height: 1.7;

overflow-x: hidden;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

/* Prevent a wrapper/main element from creating a global horizontal offset */
main {
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}

/* =========================================================
TYPOGRAPHY SYSTEM
========================================================= */

button,
input,
textarea,
select,
a,
label,
li,
span,
strong,
small {
font-family: var(--body);
}

/* Editorial / brand typography */

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--display);
font-weight: var(--display-weight);
text-rendering: optimizeLegibility;
}

/* Numerical typography */

.hero-counter-item .num,
.service-number,
.pricing-original,
.pricing-offer,
.pricing-offer sup,
.bespoke-price-value,
.fit-number,
.project-index,
.pitch-deck-number,
.pitch-deck-index,
.pitch-deck-top,
.pitch-deck-footer {
font-family: var(--body);
font-variant-numeric: lining-nums tabular-nums;
}

/* Editorial ligatures / kerning */

.hero-headline,
.philosophy-left h2,
.services-header h2,
.pricing-intro h2,
.start-left h2,
.portfolio-header h2,
.fit-intro h2,
.fit-closing p {
font-feature-settings: "liga", "kern";
}

/* Explicit serif utility */

.serif {
font-family: var(--display);
}

/* Explicit body utility */

.sans,
.ui,
.body-text {
font-family: var(--body);
}

/* =========================================================
PRICING LABEL
========================================================= */

.pricing-label {
font-family: var(--body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
}

/* =========================================================
SCROLLBAR
========================================================= */

::-webkit-scrollbar {
width: 3px;
}

::-webkit-scrollbar-track {
background: var(--black);
}

::-webkit-scrollbar-thumb {
background: var(--gold-dim);
}

/* =========================================================
UTILITIES
========================================================= */

.gold {
color: var(--gold);
}

.muted {
color: var(--muted);
}

/* =========================================================
NAV
========================================================= */

nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;

display: flex;
align-items: center;
justify-content: space-between;

width: 100%;
max-width: 100%;

padding: 1.5rem 5vw;

background: rgba(9, 9, 11, 0.85);
backdrop-filter: blur(12px);

border-bottom: 1px solid rgba(255, 255, 255, 0.03);

transition: border-color 0.3s;
}

nav.scrolled {
border-color: var(--border);
}

.nav-logo {
display: flex;
align-items: center;
gap: 0.9rem;

font-family: var(--display);
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.08em;

color: var(--white);
text-decoration: none;
}

.nav-logo span {
color: var(--gold);
}

.logo-image {
width: 46px;
height: 46px;
object-fit: contain;
border-radius: 50%;
border: 1px solid rgba(201, 168, 76, 0.2);
}

.logo-text {
display: flex;
align-items: center;
}

.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}

.nav-links a {
font-family: var(--body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;

color: var(--muted);
text-decoration: none;

transition: color 0.2s;
}

.nav-links a:hover {
color: var(--white);
}

.nav-cta {
font-family: var(--body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;

padding: 0.7rem 1.45rem;

border: 1px solid var(--gold);
color: var(--gold);
text-decoration: none;

transition:
background 0.2s,
color 0.2s;
}

.nav-cta:hover {
background: var(--gold);
color: var(--black);
}

.nav-mobile-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
}

.nav-mobile-toggle span {
display: block;
width: 22px;
height: 1px;

background: var(--white);

margin: 5px 0;

transition: all 0.3s;
}

/* =========================================================
HERO
========================================================= */

#hero {
width: 100%;
max-width: 100%;
min-height: 100vh;

display: flex;
flex-direction: column;
justify-content: flex-end;

padding: 0 5vw 8rem;

position: relative;
overflow: hidden;
}

.hero-bg {
position: absolute;
inset: 0;

background:
radial-gradient(
circle at 20% 20%,
rgba(201, 168, 76, 0.08),
transparent 35%
),
radial-gradient(
circle at 80% 60%,
rgba(201, 168, 76, 0.05),
transparent 35%
);

pointer-events: none;
}

.hero-eyebrow {
font-family: var(--body);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;

color: var(--gold);

margin-bottom: 2rem;

display: flex;
align-items: center;
gap: 1rem;
}

.hero-eyebrow::before {
content: '';

display: block;
width: 40px;
height: 1px;

background: var(--gold);
}

.hero-headline {
font-family: var(--display);
font-size: clamp(3.4rem, 8vw, 7.5rem);
font-weight: 300;
line-height: 0.94;
letter-spacing: -0.018em;
}

.hero-headline em {
font-style: italic;
color: var(--gold);
}

.hero-sub {
font-family: var(--body);
font-size: 0.98rem;
font-weight: 400;

color: var(--muted);

max-width: 500px;
line-height: 1.85;

margin-bottom: 3rem;
}

.hero-actions {
display: flex;
align-items: center;
gap: 2.5rem;
}

.btn-primary {
display: inline-block;

padding: 1.05rem 2.3rem;

background: var(--gold);
color: var(--black);

font-family: var(--body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;

text-decoration: none;

transition:
background 0.2s,
transform 0.2s;

position: relative;
overflow: hidden;
}

.btn-primary:hover {
background: #e2be67;
transform: translateY(-1px);
}

.btn-primary::before,
.form-submit::before {
content: "";

position: absolute;
top: 0;
left: -120%;

width: 100%;
height: 100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent
);

transition: 0.7s;
}

.btn-primary:hover::before,
.form-submit:hover::before {
left: 120%;
}

.hero-scroll {
font-family: var(--body);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;

color: var(--muted);
text-decoration: none;

display: flex;
align-items: center;
gap: 0.8rem;
}

.hero-scroll::after {
content: '';

display: block;
width: 32px;
height: 1px;

background: var(--muted);

transition: width 0.3s;
}

.hero-scroll:hover::after {
width: 56px;
}

.hero-counter {
position: absolute;

right: 5vw;
bottom: 8rem;

display: flex;
flex-direction: column;
gap: 2.5rem;

text-align: right;
}

.hero-counter-item .num {
font-size: 3.15rem;
font-weight: 400;

color: var(--white);

line-height: 1;
}

.hero-counter-item .label {
font-family: var(--body);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;

color: var(--muted);

margin-top: 0.45rem;
}

/* =========================================================
HERO ADDITIONS
========================================================= */

.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;

width: fit-content;

padding: 0.75rem 1.15rem;

border: 1px solid rgba(201, 168, 76, 0.25);
background: rgba(201, 168, 76, 0.04);

color: var(--gold);

font-family: var(--body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;

margin-bottom: 2rem;

backdrop-filter: blur(8px);
}

.hero-badge::before {
content: "";

width: 6px;
height: 6px;

border-radius: 50%;

background: var(--gold);
}

.hero-logo-wrapper {
margin-bottom: 2.5rem;
}

.hero-logo {
width: 110px;
height: 110px;

object-fit: contain;
border-radius: 50%;

border: 1px solid rgba(201, 168, 76, 0.25);

padding: 0.8rem;

background: rgba(255, 255, 255, 0.02);

box-shadow:
0 0 40px rgba(201, 168, 76, 0.08);
}

.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 1rem;

margin-top: 4rem;
}

.hero-trust span {
padding: 0.6rem 1rem;

border: 1px solid var(--border);

color: var(--muted);

font-family: var(--body);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}

/* =========================================================
GOLD THREAD
========================================================= */

.gold-thread {
width: 100%;
height: 1px;

background:
linear-gradient(
90deg,
transparent 0%,
var(--gold) 30%,
var(--gold-dim) 70%,
transparent 100%
);

opacity: 0.4;

transform: scaleX(0);
transform-origin: left;

transition: transform 1s ease;
}

.gold-thread.visible {
transform: scaleX(1);
}

/* =========================================================
SECTIONS
========================================================= */

section {
width: 100%;
max-width: 100%;

padding: 7rem 5vw;
}

/* =========================================================
SECTION LABEL
========================================================= */

.section-label {
font-family: var(--body);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;

color: var(--gold);

margin-bottom: 4rem;

display: flex;
align-items: center;
gap: 1rem;
}

.section-label::after {
content: '';

flex: 1;
max-width: 60px;
height: 1px;

background: var(--gold-dim);
}

/* =========================================================
PHILOSOPHY
========================================================= */

#philosophy {
display: grid;
grid-template-columns: 1fr 1fr;

gap: 6rem;

align-items: center;
}

.philosophy-left h2 {
font-family: var(--display);
font-size: clamp(2.4rem, 4vw, 4rem);
font-weight: 300;

line-height: 1.1;
letter-spacing: -0.03em;

margin-bottom: 2.5rem;
}

.philosophy-left h2 em {
font-style: italic;
color: var(--gold);
}

.philosophy-intro {
font-family: var(--body);
font-size: 0.98rem;

color: var(--muted);

line-height: 1.9;

max-width: 500px;
}

.philosophy-statements {
display: flex;
flex-direction: column;
gap: 2rem;
}

.philosophy-statement {
padding-left: 1.5rem;

border-left: 1px solid var(--border);

transition: border-color 0.3s;
}

.philosophy-statement:hover {
border-color: var(--gold);
}

.philosophy-statement p {
font-family: var(--body);
font-size: 0.94rem;

color: var(--muted);

line-height: 1.85;
}

.philosophy-statement strong {
display: block;

font-family: var(--body);
font-weight: 500;
font-size: 0.96rem;

color: var(--white);

margin-bottom: 0.5rem;
}

/* =========================================================
SERVICES
========================================================= */

#services {
background: var(--surface);
}

.services-header {
display: flex;
justify-content: space-between;
align-items: flex-end;

margin-bottom: 4rem;
}

.services-header h2 {
font-family: var(--display);
font-size: clamp(2.2rem, 3.5vw, 3.4rem);
font-weight: 300;

line-height: 1.15;
letter-spacing: -0.03em;
}

.services-header p {
max-width: 340px;

font-family: var(--body);
font-size: 0.92rem;

color: var(--muted);

line-height: 1.85;
}

.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);

gap: 1.5px;

background: var(--border);
}

.service-card {
background: var(--card);

padding: 3rem 2.5rem;

position: relative;
overflow: hidden;

cursor: default;

min-height: 430px;

transition:
background 0.3s,
transform 0.3s,
box-shadow 0.3s;
}

.service-card::before {
content: '';

position: absolute;

top: 0;
left: 0;
right: 0;

height: 1px;

background: var(--gold);

transform: scaleX(0);
transform-origin: left;

transition: transform 0.5s ease;
}

.service-card:hover {
background: #161618;

transform: translateY(-4px);

box-shadow:
0 20px 50px rgba(0, 0, 0, 0.25);
}

.service-card:hover::before {
transform: scaleX(1);
}

.service-icon {
width: 40px;
height: 40px;

margin-bottom: 2rem;

display: flex;
align-items: center;
justify-content: center;
}

.service-icon svg {
stroke: var(--gold);
fill: none;
stroke-width: 1.5;
}

.service-number {
position: absolute;

top: 1.5rem;
right: 1.5rem;

font-size: 0.72rem;
font-weight: 500;

color: rgba(201, 168, 76, 0.35);

letter-spacing: 0.12em;
}

.service-card h3 {
font-family: var(--display);
font-size: 2rem;
font-weight: 500;

margin-bottom: 1rem;

line-height: 1.05;
letter-spacing: -0.015em;
}

.service-card p {
font-family: var(--body);
font-size: 0.9rem;
font-weight: 400;

color: var(--muted);

line-height: 1.8;

margin-bottom: 2rem;
}

.service-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.service-tag {
font-family: var(--body);
font-size: 0.64rem;
font-weight: 500;

letter-spacing: 0.13em;
text-transform: uppercase;

padding: 0.35rem 0.75rem;

border: 1px solid var(--border);

color: var(--muted);
}

/* =========================================================
PRICING
========================================================= */

#pricing {
background: var(--black);
}

.pricing-intro h2,
.services-header h2,
.portfolio-header h2 {
font-weight: 300;
letter-spacing: -0.025em;
}

.pricing-intro {
max-width: 600px;
margin-bottom: 5rem;
}

.pricing-intro h2 {
font-family: var(--display);
font-size: clamp(2.2rem, 3.5vw, 3.4rem);
font-weight: 300;

margin-bottom: 1rem;

line-height: 1.15;
letter-spacing: -0.03em;
}

.pricing-intro p {
font-family: var(--body);
font-size: 0.94rem;

color: var(--muted);

line-height: 1.85;
}

.pricing-toggle {
display: flex;

gap: 0;

margin-bottom: 4rem;

border: 1px solid var(--border);

width: fit-content;
}

.toggle-btn {
padding: 0.85rem 2.1rem;

font-family: var(--body);
font-size: 0.68rem;
font-weight: 500;

letter-spacing: 0.14em;
text-transform: uppercase;

background: none;
border: none;

color: var(--muted);

cursor: pointer;

transition: all 0.2s;
}

.toggle-btn.active {
background: var(--gold);
color: var(--black);
font-weight: 600;
}

.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);

gap: 1.5px;

background: var(--border);
}

/* =========================================================
PRICING CARD
========================================================= */

.pricing-card {
background: var(--card);

padding: 3rem 2.5rem;

position: relative;
overflow: hidden;

transition:
background 0.3s ease,
transform 0.3s ease,
border-color 0.3s ease;
}

.pricing-card::before {
content: "";

position: absolute;
inset: 0;

background:
linear-gradient(
135deg,
transparent 0%,
rgba(201, 168, 76, 0.025) 50%,
transparent 100%
);

pointer-events: none;
}

.pricing-card > * {
position: relative;
z-index: 1;
}

.pricing-card.featured {
background: var(--surface);

transform: scale(1.03);

z-index: 2;

border: 1px solid rgba(201, 168, 76, 0.25);
}

.pricing-card.featured::after {
content: 'Most Selected';

position: absolute;

top: 1.5rem;
right: 1.5rem;

z-index: 3;

font-family: var(--body);
font-size: 0.62rem;
font-weight: 600;

letter-spacing: 0.16em;
text-transform: uppercase;

padding: 0.35rem 0.75rem;

background: var(--gold);
color: var(--black);
}

.pricing-tier {
font-family: var(--body);
font-size: 0.64rem;
font-weight: 600;

letter-spacing: 0.2em;
text-transform: uppercase;

color: var(--gold);

margin-bottom: 1rem;
}

.pricing-name {
font-family: var(--display);
font-size: 2rem;
font-weight: 500;

margin-bottom: 0.5rem;

line-height: 1.05;
letter-spacing: -0.015em;
}

.pricing-price {
display: flex;
flex-direction: column;
align-items: flex-start;

gap: 2px;

margin: 1.5rem 0;

font-family: var(--body);
}

.pricing-original {
position: relative;

display: inline-block;

font-size: 0.72rem;
font-weight: 400;

letter-spacing: 0.04em;

color: var(--muted);

opacity: 0.75;
}

.pricing-original::after {
content: "";

position: absolute;

left: -2px;
right: -2px;

top: 50%;

height: 1px;

background: var(--muted);

transform: rotate(-3deg);
transform-origin: center;
}

.pricing-offer {
display: flex;
align-items: baseline;

font-family: var(--body);

font-size: 2.75rem;
font-weight: 500;

letter-spacing: -0.045em;

color: var(--white);

font-variant-numeric: lining-nums tabular-nums;
}

.pricing-offer sup {
position: relative;
top: -0.65em;

margin-right: 3px;

font-size: 0.9rem;
font-weight: 500;

color: var(--muted);
}

.pricing-card.featured .pricing-offer {
color: #f0d689;
}

.pricing-divider {
height: 1px;

background: var(--border);

margin: 1.5rem 0;
}

.pricing-features {
list-style: none;

margin-bottom: 2.5rem;
}

.pricing-features li {
font-family: var(--body);
font-size: 0.82rem;
font-weight: 400;

color: #aaa69d;

padding: 0.7rem 0;

display: flex;
gap: 0.8rem;
align-items: flex-start;

border-bottom: 1px solid rgba(34, 34, 38, 0.5);

line-height: 1.6;
}

.pricing-features li::before {
content: '—';

color: var(--gold);

flex-shrink: 0;

font-weight: 300;
}

/* =========================================================
PRICING BUTTONS
========================================================= */

.btn-outline {
display: inline-block;

width: 100%;

text-align: center;

padding: 1rem;

font-family: var(--body);
font-size: 0.68rem;
font-weight: 500;

letter-spacing: 0.14em;
text-transform: uppercase;

border: 1px solid var(--border);

color: var(--muted);

text-decoration: none;

transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;

cursor: pointer;

background: none;
}

.btn-outline:hover,
.pricing-card.featured .btn-outline {
border-color: var(--gold);
color: var(--gold);
}

.pricing-card.featured .btn-outline:hover {
background: var(--gold);
color: var(--black);
}

/* =========================================================
PRICING PANELS
========================================================= */

.pricing-panel {
display: none;
}

.pricing-panel.active {
display: block;
}

/* =========================================================
BESPOKE ENGAGEMENT
========================================================= */

.bespoke-wrapper {
margin-top: 1.5px;
background: var(--border);
}

.pricing-card.bespoke {
background:
linear-gradient(
120deg,
#111113 0%,
#0d0d0f 55%,
#111113 100%
);

padding: 4.5rem 5vw 4rem;

border: none;

display: grid;

grid-template-columns: 0.85fr 1.35fr;

column-gap: 7rem;
row-gap: 2.5rem;

min-height: 420px;
}

.pricing-card.bespoke::before {
background:
radial-gradient(
circle at 15% 20%,
rgba(201, 168, 76, 0.07),
transparent 32%
),
linear-gradient(
135deg,
transparent 0%,
rgba(201, 168, 76, 0.025) 50%,
transparent 100%
);
}

.pricing-card.bespoke::after {
content: "";

position: absolute;

top: 0;
left: 0;

width: 2px;
height: 100%;

background:
linear-gradient(
to bottom,
transparent,
var(--gold),
transparent
);

opacity: 0.65;
}

/* =========================================================
BESPOKE HEADING
========================================================= */

.bespoke-heading {
grid-column: 1;
align-self: start;
}

.bespoke-heading .pricing-tier {
margin-bottom: 1.5rem;
}

.bespoke-heading .pricing-name {
font-family: var(--display);

font-size: clamp(2.5rem, 4vw, 4.2rem);

line-height: 0.92;
letter-spacing: -0.025em;
}

.bespoke-heading .pricing-name em {
font-style: italic;
color: var(--gold);
}

/* =========================================================
BESPOKE PRICE
========================================================= */

.bespoke-price {
margin-top: 2.2rem;
}

.bespoke-price-label {
display: block;

font-family: var(--body);

font-size: 0.62rem;
font-weight: 500;

letter-spacing: 0.18em;
text-transform: uppercase;

color: var(--muted);

margin-bottom: 0.45rem;
}

.bespoke-price-value {
font-family: var(--body);

font-size: 2.5rem;
font-weight: 500;

color: var(--white);

font-variant-numeric: lining-nums tabular-nums;
}

.bespoke-price-value em {
font-family: var(--display);

color: var(--gold);

font-style: italic;

font-size: 2.65rem;
}

/* =========================================================
BESPOKE CONTENT
========================================================= */

.bespoke-content {
grid-column: 2;
align-self: center;
}

.bespoke-content > p {
max-width: 600px;

font-family: var(--body);
font-size: 0.94rem;

line-height: 1.85;

color: var(--muted);

margin-bottom: 2rem;
}

/* =========================================================
BESPOKE CAPABILITIES
========================================================= */

.bespoke-capabilities {
display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));

border-top: 1px solid var(--border);
}

.bespoke-capability {
padding: 1rem 1.2rem;

border-bottom: 1px solid var(--border);

font-family: var(--body);
font-size: 0.78rem;
font-weight: 400;

letter-spacing: 0.03em;

color: #b7b3aa;

line-height: 1.55;

transition:
color 0.25s ease,
background 0.25s ease;
}

.bespoke-capability:nth-child(odd) {
border-right: 1px solid var(--border);
}

.bespoke-capability:hover {
color: var(--white);
background: rgba(201, 168, 76, 0.035);
}

.bespoke-capability::before {
content: "↗";

margin-right: 0.65rem;

color: var(--gold);

font-size: 0.72rem;
}

/* =========================================================
BESPOKE FOOTER
========================================================= */

.bespoke-footer {
grid-column: 1 / -1;

display: flex;
align-items: center;
justify-content: space-between;

gap: 2rem;

padding-top: 1.5rem;

border-top: 1px solid rgba(245, 240, 232, 0.07);
}

.bespoke-footer p {
margin: 0;

font-family: var(--body);
font-size: 0.78rem;

line-height: 1.75;

color: var(--muted);

max-width: 520px;
}

.bespoke-footer .btn-outline {
width: auto;
min-width: 220px;

border-color: rgba(201, 168, 76, 0.5);

color: var(--white);
}

.bespoke-footer .btn-outline:hover {
background: var(--gold);

border-color: var(--gold);

color: var(--black);
}

/* =========================================================
FOUNDING ENGAGEMENT NOTE
========================================================= */

#pricing > .pricing-note:last-child {
max-width: 760px;

margin: 70px auto 0;

text-align: center;

padding: 26px 30px;

border-top: 1px solid rgba(201, 168, 76, 0.25);
border-bottom: 1px solid rgba(201, 168, 76, 0.25);

font-family: var(--body);
font-size: 0.82rem;

line-height: 1.85;

color: var(--muted);
}

#pricing > .pricing-note:last-child strong {
display: inline-block;

margin-bottom: 8px;

font-family: var(--body);

font-size: 0.64rem;
font-weight: 600;

letter-spacing: 0.18em;

color: var(--gold);
}

#pricing > .pricing-note:last-child span {
color: var(--white);
}

/* =========================================================
START PROJECT
========================================================= */

#start {
background: var(--surface);

display: grid;

grid-template-columns: 1fr 1.2fr;

gap: 6rem;
}

.start-left h2 {
font-family: var(--display);

font-size: clamp(2.4rem, 4vw, 4rem);

font-weight: 300;

line-height: 1.1;

margin-bottom: 2rem;

letter-spacing: -0.03em;
}

.start-left h2 em {
font-style: italic;
color: var(--gold);
}

.start-left p {
font-family: var(--body);

font-size: 0.94rem;

color: var(--muted);

line-height: 1.85;

margin-bottom: 3rem;
}

.start-prompts {
display: flex;
flex-direction: column;

gap: 1rem;
}

.start-prompt {
padding: 1.25rem 1.5rem;

border: 1px solid var(--border);

font-family: var(--body);

font-size: 0.84rem;

color: var(--muted);

font-style: italic;

line-height: 1.55;

transition: 0.3s;
}

.start-prompt:hover {
border-color: var(--gold);
color: var(--white);
}

.start-form {
display: flex;
flex-direction: column;

gap: 1.5rem;
}

.form-group {
display: flex;
flex-direction: column;

gap: 0.55rem;
}

.form-row {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 1.5rem;
}

.form-label {
font-family: var(--body);

font-size: 0.64rem;
font-weight: 600;

letter-spacing: 0.16em;
text-transform: uppercase;

color: var(--gold);
}

.form-input,
.form-select,
.form-textarea {
background: var(--card);

border: 1px solid var(--border);

color: var(--white);

font-family: var(--body);

font-size: 0.88rem;
font-weight: 400;

padding: 1rem 1.05rem;

outline: none;

transition: border-color 0.2s;

-webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
color: var(--muted);
font-weight: 400;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--gold);
}

.form-select {
cursor: pointer;
}

.form-select option {
background: var(--card);
}

.form-textarea {
resize: vertical;
min-height: 130px;
}

.form-submit {
display: inline-block;

padding: 1.15rem 2.6rem;

background: var(--gold);
color: var(--black);

font-family: var(--body);

font-size: 0.72rem;
font-weight: 600;

letter-spacing: 0.16em;
text-transform: uppercase;

border: none;

cursor: pointer;

transition:
background 0.2s,
transform 0.2s;

align-self: flex-start;

position: relative;
overflow: hidden;
}

.form-submit:hover {
background: #e2be67;
transform: translateY(-1px);
}

.form-note {
font-family: var(--body);

font-size: 0.72rem;

color: var(--muted);

margin-top: -0.5rem;

line-height: 1.65;
}

/* =========================================================
FOOTER
========================================================= */

footer {
width: 100%;
max-width: 100%;

padding: 4rem 5vw;

border-top: 1px solid var(--border);

display: grid;

grid-template-columns: 1fr 1fr 1fr;

gap: 3rem;

align-items: start;

background:
linear-gradient(
to bottom,
transparent,
rgba(201, 168, 76, 0.02)
);
}

.footer-brand .logo {
font-family: var(--display);

font-size: 1.7rem;
font-weight: 500;

letter-spacing: 0.06em;

color: var(--white);

margin-bottom: 0.75rem;

display: block;
}

.footer-brand .logo span {
color: var(--gold);
}

.footer-brand p {
font-family: var(--body);

font-size: 0.78rem;

color: var(--muted);

line-height: 1.75;

max-width: 280px;
}

.footer-logo-wrap {
margin-bottom: 1rem;
}

.footer-logo {
width: 70px;
height: 70px;

object-fit: contain;

border-radius: 50%;

border: 1px solid rgba(201, 168, 76, 0.25);

padding: 0.45rem;
}

.footer-nav h4,
.footer-social h4 {
font-family: var(--body);

font-size: 0.64rem;
font-weight: 600;

letter-spacing: 0.18em;

text-transform: uppercase;

color: var(--gold);

margin-bottom: 1.2rem;
}

.footer-nav ul {
list-style: none;

display: flex;
flex-direction: column;

gap: 0.75rem;
}

.footer-nav a {
font-family: var(--body);

font-size: 0.78rem;

color: var(--muted);

text-decoration: none;

transition: color 0.2s;
}

.footer-nav a:hover {
color: var(--white);
}

.social-links {
display: flex;
flex-direction: column;

gap: 0.75rem;
}

.social-links a {
font-family: var(--body);

font-size: 0.78rem;

color: var(--muted);

text-decoration: none;

display: flex;
align-items: center;

gap: 0.7rem;

transition: color 0.2s;
}

.social-links a:hover {
color: var(--white);
}

.social-links a::before {
content: '↗';

font-size: 0.72rem;

color: var(--gold);
}

.footer-bottom {
width: 100%;

padding: 1.5rem 5vw;

border-top: 1px solid var(--border);

display: flex;

justify-content: space-between;
align-items: center;
}

.footer-bottom p {
font-family: var(--body);

font-size: 0.68rem;

color: var(--muted);
}

/* =========================================================
SCROLL REVEAL
========================================================= */

.reveal {
opacity: 0;

transform: translateY(28px);

transition:
opacity 0.7s ease,
transform 0.7s ease;
}

.reveal.visible {
opacity: 1;
transform: none;
}

/* =========================================================
MOBILE NAV
========================================================= */

.nav-menu {
position: fixed;

top: 0;

right: -100%;

width: 80%;
max-width: 320px;

height: 100vh;

background: var(--surface);

display: flex;

flex-direction: column;

justify-content: center;

padding: 3rem 2.5rem;

gap: 2rem;

border-left: 1px solid var(--border);

transition: right 0.35s ease;

z-index: 200;
}

.nav-menu.open {
right: 0;
}

.nav-menu a {
font-family: var(--display);

font-size: 1.9rem;
font-weight: 300;

color: var(--white);

text-decoration: none;

transition: color 0.2s;
}

.nav-menu a:hover {
color: var(--gold);
}

.nav-overlay {
position: fixed;

inset: 0;

background: rgba(0, 0, 0, 0.7);

z-index: 150;

display: none;
}

.nav-overlay.show {
display: block;
}

/* =========================================================
PROJECT MODAL
========================================================= */

.project-modal {
position: fixed;

inset: 0;

z-index: 99999;

display: flex;

align-items: center;
justify-content: center;

padding: 30px;

background: rgba(0, 0, 0, 0.88);

overflow-y: auto;
}

.project-modal .modal-content {
position: relative;

width: min(1100px, 95vw);

max-height: 95vh;

display: flex;

flex-direction: column;

align-items: center;

padding: 30px;

background: #111113;

border: 1px solid rgba(201, 168, 76, 0.25);
}

.project-modal .modal-image-wrap {
position: relative;

width: 100%;

max-height: 78vh;

display: flex;

align-items: center;
justify-content: center;

overflow: hidden;
}

.project-modal .modal-image-wrap img {
display: block;

width: 100%;
height: auto;

max-width: 100%;
max-height: 78vh;

object-fit: contain;
}

.project-modal h2 {
margin: 20px 0 0;

color: #f5f0e8;

font-family: "Cormorant Garamond", serif;

font-size: 32px;

text-align: center;
}

.project-modal .close {
position: absolute;

top: 10px;
right: 15px;

z-index: 4;

border: none;

background: transparent;

color: #f5f0e8;

font-size: 36px;

line-height: 1;

cursor: pointer;
}

.modal-nav {
position: absolute;

top: 50%;

transform: translateY(-50%);

width: 44px;
height: 44px;

border: 1px solid rgba(201, 168, 76, 0.4);

border-radius: 50%;

background: rgba(9, 9, 11, 0.75);

color: #f5f0e8;

font-size: 32px;

line-height: 1;

cursor: pointer;

z-index: 3;
}

.modal-nav.prev {
left: 15px;
}

.modal-nav.next {
right: 15px;
}

.modal-nav:hover {
background: #c9a84c;
color: #09090b;
}

.modal-counter {
margin-top: 12px;

color: #888880;

font-family: "Inter", sans-serif;

font-size: 12px;

letter-spacing: 0.12em;
}

/* Generic close button — kept for non-project modals */

.close {
position: absolute;

top: 12px;
right: 16px;

font-family: var(--body);

font-size: 30px;

cursor: pointer;

color: #fff;
}

.success-modal {
position: fixed;

inset: 0;

display: none;

justify-content: center;
align-items: center;

background: rgba(0, 0, 0, 0.82);

backdrop-filter: blur(8px);

z-index: 999999;
}

.success-box {
width: min(520px, 92vw);

background: #111;

border: 1px solid rgba(255, 255, 255, 0.08);

border-radius: 24px;

padding: 40px;

color: white;

text-align: center;

transform: scale(0.9);

transition: 0.35s;

box-shadow:
0 20px 80px rgba(0, 0, 0, 0.5);
}

.success-modal.show .success-box {
transform: scale(1);
}

.success-icon {
font-family: var(--body);

font-size: 54px;

margin-bottom: 18px;
}

.success-buttons {
display: flex;

justify-content: center;

gap: 16px;

margin-top: 30px;
}

.success-buttons button {
padding: 15px 27px;

border-radius: 999px;

cursor: pointer;

border: none;

font-family: var(--body);

font-size: 0.78rem;
font-weight: 600;
}

.success-buttons button:last-child {
background: var(--gold);
color: #111;
}

/* =========================================================
PORTFOLIO — EDITORIAL SELECTED WORKS
========================================================= */

#portfolio {
width: 100%;
max-width: 100%;

padding: 7rem 5vw 8.5rem;

background: var(--black);
}

.portfolio-header {
max-width: 680px;

margin-bottom: 5.5rem;
}

.portfolio-header .section-label {
margin-bottom: 1.25rem;
}

.portfolio-header h2 {
font-family: var(--display);

font-size: clamp(2.5rem, 4.2vw, 3.8rem);

font-weight: 300;

line-height: 1.1;

letter-spacing: -0.02em;

margin-bottom: 1.25rem;

color: var(--white);
}

.portfolio-intro {
font-family: var(--body);

font-size: 0.92rem;

font-weight: 400;

color: var(--muted);

letter-spacing: 0.01em;

max-width: 420px;

line-height: 1.75;
}

/* =========================================================
FEATURED PROJECT
========================================================= */

.featured-project {
display: grid;

grid-template-columns: 1.45fr 1fr;

gap: 3.5rem;

align-items: center;

margin-bottom: 6.5rem;

cursor: pointer;

outline: none;
}

.featured-project:focus-visible {
outline: 1px solid rgba(201, 168, 76, 0.45);

outline-offset: 10px;
}

.featured-media {
position: relative;

overflow: hidden;

border: 1px solid rgba(201, 168, 76, 0.14);

aspect-ratio: 16 / 10;

background: var(--card);
}

.featured-media img {
width: 100%;
height: 100%;

object-fit: cover;

display: block;

transition:
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-project:hover .featured-media img {
transform: scale(1.035);
}

.featured-overlay {
position: absolute;

inset: 0;

background:
linear-gradient(
to top,
rgba(0, 0, 0, 0.55) 0%,
transparent 52%
);

opacity: 0;

transition: opacity 0.45s ease;

display: flex;

align-items: flex-end;

padding: 1.75rem;

pointer-events: none;
}

.featured-project:hover .featured-overlay {
opacity: 1;
}

.view-indicator {
font-family: var(--body);

font-size: 0.68rem;
font-weight: 500;

letter-spacing: 0.12em;
text-transform: uppercase;

color: rgba(245, 240, 232, 0.92);

display: inline-flex;

align-items: center;

gap: 0.55rem;
}

.view-indicator .arrow {
transition: transform 0.35s ease;

display: inline-block;
}

.featured-project:hover .view-indicator .arrow,
.project-item:hover .view-indicator .arrow {
transform: translateX(5px);
}

.featured-meta {
padding-right: 1rem;
}

.project-index {
display: block;

font-size: 0.66rem;
font-weight: 500;

letter-spacing: 0.16em;
text-transform: uppercase;

color: rgba(201, 168, 76, 0.7);

margin-bottom: 1.15rem;
}

.featured-meta .project-title {
font-family: var(--display);

font-size: clamp(2.3rem, 3.6vw, 3.2rem);

font-weight: 500;

line-height: 1.08;

color: var(--white);

margin: 0 0 0.75rem;

transition:
transform 0.4s ease,
color 0.3s ease;
}

.featured-project:hover .featured-meta .project-title {
transform: translateX(4px);

color: #fff;
}

.project-subtitle {
font-family: var(--body);

font-size: 0.9rem;

font-weight: 400;

color: rgba(245, 240, 232, 0.68);

margin: 0 0 1.15rem;

line-height: 1.5;
}

.project-services {
font-family: var(--body);

font-size: 0.64rem;
font-weight: 500;

letter-spacing: 0.13em;
text-transform: uppercase;

color: rgba(201, 168, 76, 0.88);

margin-bottom: 1rem;
}

.project-contributor {
display: block;

font-family: var(--body);

font-size: 0.68rem;
font-weight: 400;

color: rgba(245, 240, 232, 0.38);

letter-spacing: 0.03em;
}

/* =========================================================
PORTFOLIO GRID
========================================================= */

.portfolio-grid {
width: 100%;
max-width: 100%;
min-width: 0;

display: grid;

grid-template-columns: repeat(3, minmax(0, 1fr));

gap: 3.25rem 1.85rem;
}

.project-item {
min-width: 0;

cursor: pointer;

outline: none;

transition: transform 0.4s ease;
}

.project-item:focus-visible {
outline: 1px solid rgba(201, 168, 76, 0.4);

outline-offset: 7px;
}

.project-media {
position: relative;

overflow: hidden;

border: 1px solid rgba(201, 168, 76, 0.11);

aspect-ratio: 4 / 3;

background: var(--card);

margin-bottom: 1.25rem;
}

.project-media img {
width: 100%;
height: 100%;

object-fit: cover;

display: block;

transition:
transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-item:hover .project-media img {
transform: scale(1.04);
}

.project-media.brand-media {
display: flex;

align-items: center;
justify-content: center;

background: #0c0c0e;

padding: 2.25rem;
}

.project-media.brand-media img.brand-logo-img {
width: auto;
height: auto;

max-width: 68%;
max-height: 52%;

object-fit: contain;
}

.project-overlay {
position: absolute;

inset: 0;

background:
linear-gradient(
to top,
rgba(0, 0, 0, 0.5) 0%,
transparent 55%
);

opacity: 0;

transition: opacity 0.4s ease;

display: flex;

align-items: flex-end;

padding: 1.15rem;

pointer-events: none;
}

.project-item:hover .project-overlay {
opacity: 1;
}

.project-meta .project-title {
font-family: var(--display);

font-size: 1.75rem;

font-weight: 500;

color: var(--white);

margin: 0 0 0.35rem;

line-height: 1.2;

letter-spacing: -0.01em;

transition:
transform 0.35s ease,
color 0.3s ease;
}

.project-item:hover .project-meta .project-title {
transform: translateX(3px);

color: #fff;
}

.project-desc {
font-family: var(--body);

font-size: 0.82rem;

font-weight: 400;

color: rgba(245, 240, 232, 0.58);

margin: 0 0 0.65rem;

line-height: 1.55;
}

.project-meta .project-services {
margin-bottom: 0.65rem;
}

/* =========================================================
PORTFOLIO PLAY BUTTON
========================================================= */

#portfolio .play-button {
position: absolute;

top: 50%;
left: 50%;

transform: translate(-50%, -50%);

width: 48px;
height: 48px;

border-radius: 50%;

background: rgba(0, 0, 0, 0.55);

border: 1px solid rgba(201, 168, 76, 0.4);

color: var(--white);

display: flex;

align-items: center;
justify-content: center;

font-family: var(--body);

font-size: 0.8rem;

opacity: 0.85;

transition:
opacity 0.3s ease,
background 0.3s ease;

z-index: 2;

pointer-events: none;
}

.featured-project:hover .play-button,
.project-item:hover .play-button {
opacity: 1;

background: rgba(0, 0, 0, 0.72);
}

/* =========================================================
CURSOR DOT
========================================================= */

.cursor-dot {
width: 6px;
height: 6px;

border-radius: 50%;

background: var(--gold);

position: fixed;

pointer-events: none;

z-index: 9999;

transform: translate(-50%, -50%);

transition: transform 0.1s;
}

/* =========================================================
FIT / QUALIFICATION
========================================================= */

.fit-section {
position: relative;

padding: 150px 5vw 130px;

border-top: 1px solid rgba(245, 240, 232, 0.08);
}

.fit-intro {
max-width: 850px;

margin-bottom: 80px;
}

.fit-intro .section-label {
margin-bottom: 25px;
}

.fit-intro h2 {
margin: 0;

font-family: var(--display);

font-size: clamp(3.5rem, 7vw, 7rem);

font-weight: 400;

line-height: 0.88;

letter-spacing: -0.04em;

color: var(--white);
}

.fit-intro h2 em {
font-style: italic;

color: var(--gold);
}

.fit-intro p {
max-width: 610px;

margin-top: 35px;

font-family: var(--body);

font-size: 0.96rem;

line-height: 1.85;

color: var(--muted);
}

.fit-grid {
display: grid;

grid-template-columns: repeat(2, minmax(0, 1fr));

gap: 1px;

background: rgba(245, 240, 232, 0.08);

border-top: 1px solid rgba(245, 240, 232, 0.08);

border-bottom: 1px solid rgba(245, 240, 232, 0.08);
}

.fit-card {
position: relative;

min-height: 520px;

padding: 55px 50px 60px;

background: var(--black);

transition:
background 0.4s ease,
transform 0.4s ease;
}

.fit-card:hover {
background: var(--surface);
}

.fit-card.featured {
background: var(--surface);
}

.fit-card.featured:hover {
background: var(--card);
}

.fit-number {
display: block;

margin-bottom: 70px;

font-size: 0.66rem;
font-weight: 600;

letter-spacing: 0.18em;

color: var(--gold);
}

.fit-card h3 {
margin: 0 0 22px;

font-family: var(--display);

font-size: clamp(2.8rem, 4vw, 4.5rem);

font-weight: 400;

line-height: 0.9;

letter-spacing: -0.035em;

color: var(--white);
}

.fit-card h3 em {
font-style: italic;

color: var(--gold);
}

.fit-card > p {
max-width: 430px;

margin: 0 0 28px;

font-family: var(--body);

font-size: 0.9rem;

line-height: 1.75;

color: var(--muted);
}

.fit-card ul {
display: flex;

flex-direction: column;

gap: 0;

margin: 0;
padding: 0;

list-style: none;
}

.fit-card li {
position: relative;

padding: 15px 0 15px 22px;

border-top: 1px solid rgba(245, 240, 232, 0.07);

font-family: var(--body);

font-size: 0.82rem;

line-height: 1.65;

color: #b7b3aa;
}

.fit-card li:last-child {
border-bottom: 1px solid rgba(245, 240, 232, 0.07);
}

.fit-card li::before {
content: "—";

position: absolute;

left: 0;
top: 15px;

color: var(--gold);
}

.fit-closing {
display: flex;

align-items: center;

justify-content: space-between;

gap: 50px;

margin-top: 80px;
}

.fit-closing p {
max-width: 700px;

margin: 0;

font-family: var(--display);

font-size: clamp(2rem, 4vw, 3.8rem);

font-weight: 400;

line-height: 1;

letter-spacing: -0.025em;

color: var(--white);
}

.fit-closing p em {
color: var(--gold);

font-style: italic;
}

.fit-closing .btn-outline {
flex-shrink: 0;

display: inline-flex;

align-items: center;

gap: 12px;

padding: 16px 24px;

border: 1px solid rgba(201, 168, 76, 0.55);

color: var(--white);

text-decoration: none;

font-family: var(--body);

font-size: 0.66rem;
font-weight: 600;

letter-spacing: 0.1em;

text-transform: uppercase;

transition:
background 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}

.fit-closing .btn-outline span {
color: var(--gold);

transition: transform 0.3s ease;
}

.fit-closing .btn-outline:hover {
background: var(--gold);

border-color: var(--gold);

color: var(--black);
}

.fit-closing .btn-outline:hover span {
color: var(--black);

transform: translate(3px, -3px);
}

/* =========================================================
RESPONSIVE — 1024px
========================================================= */

@media (max-width: 1024px) {
.featured-project {
grid-template-columns: 1fr;


gap: 2rem;

margin-bottom: 4.5rem;


}

.featured-meta {
padding-right: 0;
}

.portfolio-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));


gap: 2.75rem 1.5rem;


}
}

/* =========================================================
RESPONSIVE — 900px
========================================================= */

@media (max-width: 900px) {
.nav-links,
.nav-cta {
display: none;
}

.nav-mobile-toggle {
display: block;
}

#philosophy {
grid-template-columns: 1fr;


gap: 3rem;


}

.services-header {
flex-direction: column;


align-items: flex-start;

gap: 1rem;


}

.services-grid {
grid-template-columns: 1fr;
}

.pricing-grid {
grid-template-columns: 1fr;
}

.pricing-card.featured {
transform: none;
}

.pricing-card.bespoke {
grid-template-columns: 1fr;


padding: 4rem 2.5rem;


}

.bespoke-heading,
.bespoke-content {
grid-column: 1;
}

.bespoke-heading {
margin-bottom: 1rem;
}

.bespoke-footer {
grid-column: 1;


align-items: flex-start;

flex-direction: column;


}

.bespoke-footer .btn-outline {
width: 100%;
}

#start {
grid-template-columns: 1fr;


gap: 3rem;


}

.form-row {
grid-template-columns: 1fr;
}

footer {
grid-template-columns: 1fr;


gap: 2.5rem;


}

.footer-bottom {
flex-direction: column;


gap: 0.5rem;

text-align: center;


}

.hero-counter {
display: none;
}

.hero-logo {
width: 90px;
height: 90px;
}

.hero-badge {
font-size: 0.64rem;
}

.service-card {
min-height: auto;
}

.hero-trust {
gap: 0.6rem;
}

.hero-trust span {
font-size: 0.62rem;
}

.fit-section {
padding: 110px 5vw 100px;
}

.fit-grid {
grid-template-columns: 1fr;
}

.fit-card {
min-height: auto;


padding: 45px 35px 50px;


}

.fit-number {
margin-bottom: 50px;
}

.fit-closing {
align-items: flex-start;


flex-direction: column;


}
}

/* =========================================================
RESPONSIVE — 768px
========================================================= */

@media (max-width: 768px) {
.project-modal {
padding: 15px;
}

.project-modal .modal-content {
width: 100%;
padding: 20px;
}

.project-modal .modal-image-wrap {
max-height: 80vh;
}

.project-modal .modal-image-wrap img {
max-height: 80vh;
}

.project-modal h2 {
font-size: 26px;
}

.modal-nav {
width: 40px;
height: 40px;


font-size: 28px;


}

.modal-nav.prev {
left: 8px;
}

.modal-nav.next {
right: 8px;
}
}

/* =========================================================
RESPONSIVE — 640px
========================================================= */

@media (max-width: 640px) {
#portfolio {
padding: 5.5rem 6vw 6.5rem;
}

.portfolio-header {
margin-bottom: 3.5rem;
}

.featured-project {
margin-bottom: 3.5rem;
}

.featured-media {
aspect-ratio: 16 / 11;
}

.portfolio-grid {
grid-template-columns: 1fr;


gap: 2.75rem;


}

.project-media {
aspect-ratio: 16 / 11;
}

.featured-meta .project-title {
font-size: 2.15rem;
}

.portfolio-intro {
font-size: 0.88rem;
}

.project-desc {
font-size: 0.78rem;
}
}

/* =========================================================
RESPONSIVE — 600px
========================================================= */

@media (max-width: 600px) {
section {
padding: 5rem 6vw;
}

nav {
padding: 1.2rem 6vw;
}

#hero {
padding: 0 6vw 6rem;
}

.hero-eyebrow {
font-size: 0.62rem;
}

.hero-sub {
font-size: 0.9rem;


line-height: 1.8;


}

.hero-scroll {
font-size: 0.64rem;
}

.hero-badge {
font-size: 0.6rem;
}

.hero-trust span {
font-size: 0.58rem;
}

.section-label {
font-size: 0.62rem;
}

.philosophy-intro {
font-size: 0.9rem;
}

.philosophy-statement p {
font-size: 0.88rem;
}

.services-header p {
font-size: 0.88rem;
}

.service-card h3 {
font-size: 1.8rem;
}

.service-card p {
font-size: 0.88rem;
}

.service-tag {
font-size: 0.6rem;
}

.pricing-intro p {
font-size: 0.9rem;
}

.toggle-btn {
font-size: 0.62rem;
}

.pricing-name {
font-size: 1.75rem;
}

.pricing-original {
font-size: 0.68rem;
}

.pricing-offer {
font-size: 2.35rem;
}

.pricing-features li {
font-size: 0.78rem;
}

.btn-outline {
font-size: 0.64rem;
}

.pricing-card.bespoke {
padding: 3.5rem 1.5rem;
}

.bespoke-heading .pricing-name {
font-size: 3rem;
}

.bespoke-price-label {
font-size: 0.6rem;
}

.bespoke-content > p {
font-size: 0.88rem;
}

.bespoke-capabilities {
grid-template-columns: 1fr;
}

.bespoke-capability:nth-child(odd) {
border-right: none;
}

.bespoke-capability {
font-size: 0.76rem;
}

.bespoke-footer {
gap: 1.5rem;
}

.bespoke-footer p {
font-size: 0.72rem;
}

.bespoke-footer .btn-outline {
width: 100%;
min-width: 0;
}

#pricing > .pricing-note:last-child {
margin-top: 50px;


padding: 22px 18px;

font-size: 0.76rem;


}

#pricing > .pricing-note:last-child strong {
font-size: 0.62rem;
}

#start {
gap: 3rem;
}

.start-left p {
font-size: 0.9rem;
}

.start-prompt {
font-size: 0.8rem;
}

.form-label {
font-size: 0.62rem;
}

.form-input,
.form-select,
.form-textarea {
font-size: 0.88rem;
}

.form-submit {
font-size: 0.68rem;
}

.form-note {
font-size: 0.68rem;
}

.footer-brand p {
font-size: 0.72rem;
}

.footer-nav h4,
.footer-social h4 {
font-size: 0.62rem;
}

.footer-nav a,
.social-links a {
font-size: 0.76rem;
}

.footer-bottom p {
font-size: 0.62rem;
}

.fit-section {
padding: 90px 6vw 80px;
}

.fit-intro {
margin-bottom: 55px;
}

.fit-intro h2 {
font-size: clamp(3rem, 15vw, 5rem);
}

.fit-intro p {
margin-top: 25px;


font-size: 0.9rem;

line-height: 1.8;


}

.fit-card {
padding: 35px 24px 40px;
}

.fit-number {
margin-bottom: 45px;


font-size: 0.62rem;


}

.fit-card h3 {
font-size: 3rem;
}

.fit-card > p {
font-size: 0.86rem;
}

.fit-card li {
font-size: 0.78rem;
}

.fit-closing {
margin-top: 55px;


gap: 35px;


}

.fit-closing p {
font-size: 2.4rem;
}

.fit-closing .btn-outline {
width: 100%;


justify-content: center;


}

/* Mobile menu */

.nav-menu {
width: 80%;


max-width: 320px;

padding: 3rem 2.5rem;

gap: 2rem;


}

.nav-menu a {
font-family: var(--display);


font-size: 1.8rem;

font-weight: 300;

color: var(--white);

text-decoration: none;

transition: color 0.2s;


}

.nav-menu a:hover {
color: var(--gold);
}
}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}

.featured-media img,
.project-media img,
.featured-overlay,
.project-overlay,
.view-indicator .arrow,
.project-title {
transition: none;
}

.featured-project:hover .featured-media img,
.project-item:hover .project-media img {
transform: none;
}
}

/* =========================================================
NON-TOUCH CURSOR
========================================================= */

@media (hover: none) {
.cursor-dot {
display: none;
}
}