:root {
--green: #0f2f25;
--green-2: #173d31;
--orange: #e96718;
--cream: #f4f0e7;
--paper: #fbf8f2;
--ink: #18211d;
--muted: #6d756f;
--line: rgba(24, 33, 29, 0.16);
--white: #ffffff;

--serif: "Playfair Display", Georgia, serif;
--sans: "DM Sans", Arial, sans-serif;
}


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

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
background: var(--paper);
}

body {
margin: 0;
font-family: var(--sans);
color: var(--ink);

background:
radial-gradient(
circle at 86% 6%,
rgba(233, 103, 24, 0.08),
transparent 22rem
),
var(--paper);
}

a {
color: inherit;
text-decoration: none;
}

button,
input,
textarea {
font: inherit;
}


/* =========================================================
HEADER
========================================================= */

.site-header {
position: sticky;
top: 0;
z-index: 100;

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

padding: 24px clamp(24px, 5vw, 80px);

background: rgba(251, 248, 242, 0.88);

border-bottom:
1px solid rgba(24, 33, 29, 0.08);

backdrop-filter: blur(14px);
}


/* =========================================================
BRAND
========================================================= */

.brand-name {
font-family: var(--serif);
font-size: 1.75rem;

letter-spacing: -0.045em;
}

.brand-o,
.brand-dot {
color: var(--orange);
}


/* =========================================================
NAVIGATION
========================================================= */

.nav {
display: flex;
gap: 28px;
align-items: center;

font-size: 0.9rem;
}

.nav a {
opacity: 0.78;

transition: 0.2s ease;
}

.nav a:hover {
opacity: 1;

color: var(--orange);
}

.nav-cta {
border: 1px solid var(--green);

padding: 10px 16px;

border-radius: 999px;
}


/* =========================================================
MOBILE NAVIGATION BUTTON
========================================================= */

.nav-toggle {
display: none;

background: none;
border: 0;

padding: 8px;
}

.nav-toggle span {
display: block;

width: 24px;
height: 1px;

background: var(--ink);

margin: 6px 0;
}


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

.hero {
min-height: 86vh;

padding:
clamp(70px, 10vw, 150px)
clamp(24px, 7vw, 110px);

display: grid;

grid-template-columns:
minmax(0, 1.25fr)
minmax(320px, 0.75fr);

gap: 70px;

align-items: center;

overflow: hidden;
}


/* =========================================================
EYEBROW
========================================================= */

.eyebrow {
color: var(--orange);

text-transform: uppercase;

font-size: 0.77rem;

font-weight: 700;

letter-spacing: 0.18em;
}


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

.hero h1,
.section-content h2,
.services h2,
.approach h2,
.work h2,
.contact h2 {
font-family: var(--serif);

font-weight: 500;

letter-spacing: -0.045em;
}


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

.hero h1 {
font-size:
clamp(4.1rem, 8vw, 8.6rem);

line-height: 0.88;

margin:
22px
0
34px;

max-width: 1050px;
}

.hero h1 em {
color: var(--orange);

font-weight: 500;
}


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

.hero-text {
max-width: 670px;

font-size:
clamp(1.05rem, 1.4vw, 1.25rem);

line-height: 1.7;

color: #46504a;
}


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

.hero-actions {
display: flex;

gap: 14px;

margin-top: 36px;

flex-wrap: wrap;
}


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

.button {
display: inline-flex;

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

min-height: 50px;

padding:
0
22px;

border-radius: 999px;

border:
1px solid transparent;

cursor: pointer;

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

.button:hover {
transform:
translateY(-2px);
}

.button-primary {
background: var(--orange);

color: white;
}

.button-primary:hover {
background: #cf5510;
}

.button-ghost {
border-color: var(--green);

background: transparent;
}


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

.hero-mark {
position: relative;

width:
min(32vw, 470px);

aspect-ratio: 1;

justify-self: center;
}

.orbit {
position: absolute;

inset: 6%;

border:
1px solid rgba(15, 47, 37, 0.28);

border-radius: 50%;
}

.orbit-2 {
inset: 23%;

border-color:
rgba(15, 47, 37, 0.16);
}

.orange-core {
position: absolute;

width: 22%;

aspect-ratio: 1;

left: 39%;
top: 39%;

border-radius: 50%;

background: var(--orange);

box-shadow:
0 0 0 26px
rgba(233, 103, 24, 0.08);
}

.hero-mark::after {
content: "";

position: absolute;

height: 1px;

width: 118%;

background:
rgba(15, 47, 37, 0.22);

top: 50%;
left: -9%;

transform:
rotate(-24deg);
}

.mark-caption {
position: absolute;

bottom: 6%;
left: 0;

font-size: 0.72rem;

text-transform: uppercase;

letter-spacing: 0.15em;

line-height: 1.6;

color: var(--muted);
}


/* =========================================================
STATEMENT
========================================================= */

.statement {
background: var(--orange);

color: var(--green);

padding:
48px
clamp(24px, 7vw, 110px);

display: flex;

align-items: baseline;

justify-content: space-between;

gap: 40px;
}

.statement-kicker {
text-transform: uppercase;

font-size: 0.8rem;

letter-spacing: 0.15em;

font-weight: 700;
}

.statement-copy {
font-family: var(--serif);

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

line-height: 1;

margin: 0;
}


/* =========================================================
ABOUT
========================================================= */

.section-grid {
display: grid;

grid-template-columns:
minmax(160px, 0.35fr)
minmax(0, 1.65fr);

gap: 50px;

padding:
130px
clamp(24px, 7vw, 110px);
}

.section-label {
display: flex;

gap: 14px;

align-items: flex-start;

color: var(--muted);
}

.section-label span {
color: var(--orange);

font-weight: 700;
}

.section-label p {
margin: 0;
}

.section-content {
max-width: 960px;
}

.section-content h2,
.services h2,
.work h2,
.contact h2 {
font-size:
clamp(2.8rem, 5vw, 5.8rem);

line-height: 0.98;

margin:
0
0
42px;
}

.section-content p {
max-width: 790px;

font-size: 1.1rem;

line-height: 1.8;

color: #4f5953;
}


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

.services {
padding:
110px
clamp(24px, 7vw, 110px);

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

.services-head {
max-width: 850px;
}


/* =========================================================
SERVICE CARDS
========================================================= */

.cards {
margin-top: 60px;

display: grid;

grid-template-columns:
repeat(4, 1fr);

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

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

.card {
padding:
34px
28px
44px;

min-height: 330px;

border-right:
1px solid var(--line);
}

.card:last-child {
border-right: 0;
}

.card-number {
font-size: 0.75rem;

color: var(--orange);

font-weight: 700;
}

.card h3 {
font-family: var(--serif);

font-size: 1.9rem;

font-weight: 500;

margin:
90px
0
16px;
}

.card p {
color: var(--muted);

line-height: 1.65;
}


/* =========================================================
APPROACH
========================================================= */

.approach {
background: var(--green);

color: var(--cream);

padding:
120px
clamp(24px, 7vw, 110px);
}

.light {
color: #f19a65;
}

.approach h2 {
font-size:
clamp(3.2rem, 6vw, 6.8rem);

line-height: 0.95;

margin:
28px
0
70px;
}


/* =========================================================
STEPS
========================================================= */

.steps {
border-top:
1px solid rgba(255, 255, 255, 0.2);
}

.step {
display: grid;

grid-template-columns:
100px
1fr;

gap: 30px;

padding:
28px
0;

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

.step > span {
color: var(--orange);

font-family: var(--serif);

font-size: 2rem;
}

.step h3 {
font-family: var(--serif);

font-size: 1.8rem;

font-weight: 500;

margin:
0
0
7px;
}

.step p {
color:
rgba(244, 240, 231, 0.68);

margin: 0;

max-width: 650px;

line-height: 1.7;
}


/* =========================================================
WORK
========================================================= */

.work {
padding:
120px
clamp(24px, 7vw, 110px);
}

.work-head {
max-width: 930px;
}

.name-list {
margin-top: 65px;

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


/* =========================================================
NAME ITEMS
========================================================= */

.name-item {
display: flex;

align-items: center;

justify-content: space-between;

gap: 35px;

padding:
32px
0;

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

.name-word {
font-family: var(--serif);

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

letter-spacing: -0.05em;
}

.name-item p {
margin:
6px
0
0;

color: var(--muted);
}

.name-index {
color: var(--orange);

font-size: 0.8rem;

font-weight: 700;
}


/* =========================================================
MANIFESTO
========================================================= */

.manifesto {
background: var(--orange);

padding:
100px
clamp(24px, 7vw, 110px);
}

.manifesto-inner {
display: grid;

grid-template-columns:
180px
1fr;

align-items: center;

gap: 60px;
}

.mini-mark {
font-family: var(--serif);

font-size: 6rem;

color: var(--green);
}

.mini-mark span {
color: white;
}

blockquote {
font-family: var(--serif);

font-size:
clamp(2.3rem, 5vw, 5.7rem);

line-height: 1.02;

letter-spacing: -0.04em;

margin: 0;

color: var(--green);
}


/* =========================================================
CONTACT
========================================================= */

.contact {
display: grid;

grid-template-columns:
0.95fr
1.05fr;

gap: 80px;

padding:
130px
clamp(24px, 7vw, 110px);
}

.contact-copy p:not(.eyebrow) {
color: var(--muted);

line-height: 1.7;

max-width: 560px;
}


/* =========================================================
FORM
========================================================= */

.brief-form {
background: white;

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

padding: 34px;
}

.field-row {
display: grid;

grid-template-columns:
1fr
1fr;

gap: 18px;
}

label {
display: block;

font-size: 0.78rem;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 0.08em;

margin-bottom: 20px;
}

input,
textarea {
width: 100%;

border: 0;

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

background: transparent;

padding:
13px
0;

margin-top: 6px;

outline: none;

color: var(--ink);

text-transform: none;
}

textarea {
resize: vertical;

min-height: 130px;
}

input:focus,
textarea:focus {
border-color: var(--orange);
}


/* =========================================================
FORM STATUS
========================================================= */

.form-status {
min-height: 24px;

margin:
14px
0
0;

font-size: 0.9rem;

color: var(--muted);
}

.form-status.success {
color: #17653f;
}

.form-status.error {
color: #a23423;
}


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

.footer {
background: #0a211a;

color: var(--cream);

padding:
55px
clamp(24px, 7vw, 110px);

display: grid;

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

gap: 30px;

align-items: end;
}

.footer p {
margin: 0;

color:
rgba(244, 240, 231, 0.62);
}

.footer-brand .brand-name {
font-size: 2.2rem;
}


/* =========================================================
REVEAL ANIMATIONS
========================================================= */

.reveal {
opacity: 0;

transform:
translateY(22px);

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

.reveal.visible {
opacity: 1;

transform:
translateY(0);
}


/* =========================================================
TABLET
========================================================= */

@media (max-width: 980px) {

.nav-toggle {
display: block;
}


.nav {
position: absolute;

top: 100%;
left: 0;
right: 0;

display: none;

flex-direction: column;

align-items: flex-start;

padding: 24px;

background: var(--paper);

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


.nav.open {
display: flex;
}


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

min-height: auto;
}


.hero-mark {
width:
min(70vw, 420px);
}


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


.card:nth-child(2) {
border-right: 0;
}


.card:nth-child(-n + 2) {
border-bottom:
1px solid var(--line);
}


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

}


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

@media (max-width: 680px) {

.site-header {
padding:
18px
20px;
}


.hero,
.section-grid,
.services,
.approach,
.work,
.contact {
padding-left: 20px;
padding-right: 20px;
}


.hero {
padding-top: 70px;
}


.hero h1 {
font-size:
clamp(3.3rem, 16vw, 5rem);
}


.statement {
flex-direction: column;

padding:
34px
20px;
}


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


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


.card {
border-right: 0;

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


.card:last-child {
border-bottom: 0;
}


.card h3 {
margin-top: 45px;
}


.manifesto-inner {
grid-template-columns: 1fr;

gap: 10px;
}


.field-row {
grid-template-columns: 1fr;

gap: 0;
}


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


.name-item {
align-items: flex-start;
}

}