/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(6px); transition: opacity 1s ease, transform 1s ease; }
.reveal--in { opacity: 1; transform: translateY(0); }
/* ═══════════════════════════════════════════════════
FONT SETUP — Sharp Grotesk Medium
local() references tell the browser to use the copy already
installed on the machine (covers local dev in any browser).
The url() fallback kicks in if/when you add the woff2 file
for self-hosted web deployment.
For Adobe Fonts deployment: remove these @font-face blocks
and add your kit to the in index.html instead.
═══════════════════════════════════════════════════ */
/*
local() tries every known PostScript / full-name variant of
Sharp Grotesk so Safari's font resolver finds the installed copy.
The url() line is the self-host path for live deployment.
→ Replace these blocks with your Adobe Fonts when deploying.
*/
@font-face {
font-family: 'Sharp Grotesk';
src: local('SharpGrotesk-Medium20'),
local('Sharp Grotesk Medium 20'),
local('SharpGroteskMedium20'),
local('Sharp Grotesk Medium'),
local('SharpGrotesk-Medium'),
local('Sharp Grotesk'),
local('SharpGrotesk'),
url('assets/fonts/SharpGrotesk-Medium20.woff2') format('woff2'),
url('assets/fonts/SharpGrotesk-Medium20.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Sharp Grotesk';
src: local('SharpGrotesk-Book20'),
local('Sharp Grotesk Book 20'),
local('SharpGroteskBook20'),
local('Sharp Grotesk Book'),
local('SharpGrotesk-Book'),
url('assets/fonts/SharpGrotesk-Book20.woff2') format('woff2'),
url('assets/fonts/SharpGrotesk-Book20.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: block;
}
/* ─── Custom Properties ─── */
:root {
--copper: #bc7d48;
--copper-light: #e1d6cc;
--copper-dark: #b7763f;
--copper-muted: #fff4ea;
--black: #050505;
--gray: #4c4c4c;
--white: #ffffff;
--font-display: 'Libre Baskerville', Georgia, serif;
--font-body: 'Poppins', sans-serif;
--page-max: 1200px;
--page-pad: clamp(24px, 4vw, 56px);
}
/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }
ul { list-style: none; }
/* ─── Base ─── */
html {
/* Prevent Safari from auto-scaling text on orientation change */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* Force GPU compositing to prevent Safari scroll jitter */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body {
font-family: var(--font-body);
color: var(--black);
background: var(--white);
/* Grayscale antialiasing matches Chrome's default — prevents Safari
from rendering type heavier with subpixel antialiasing */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* Prevent browsers from synthesising bold/italic when an exact
weight isn't found — a synthesised bold changes metrics and
makes spacing look wrong in Safari */
font-synthesis: none;
}
/* ═══════════════════════════════════════════════════
HERO WRAPPER
One container holds nav, headline, image, and My Story.
The image is absolute-positioned behind the headline so
"rally around." overlaps it — matching the Figma layout.
Key Figma measurements (all page-relative px):
Orange band: y 0 → 543
Image zone: y 543 → 1080 (height 537)
Nav: y 123
Headline: y 304 → 596 (4 lines × 73px — last line bleeds into image)
My Story: y 731 (543 + 188)
═══════════════════════════════════════════════════ */
.hero-wrapper {
background: var(--copper);
position: relative;
height: 1080px;
overflow: hidden;
}
/* ─── Text layer — sits above the image ─── */
.hero-inner {
position: relative;
z-index: 3;
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 0 var(--page-pad);
}
/* ─── Nav ─── */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 123px; /* Figma: nav at y=123 */
}
.nav-logo em,
.footer-logo em {
text-transform: uppercase;
font-style: normal;
font-size: 10px;
letter-spacing: 0.25em;
border-left: 1px solid rgba(255,255,255,0.4);
margin-left: 8px;
padding-left: 12px;
}
.nav-logo {
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.2em;
}
.nav-links {
display: flex;
gap: 36px;
}
.nav-links a {
font-family: var(--font-body);
font-size: 12px;
font-weight: 400;
color: var(--white);
letter-spacing: 2.4px;
text-transform: uppercase;
position: relative;
padding-bottom: 3px;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--white);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
.nav-links a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* ─── Hamburger button — hidden on desktop ─── */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 24px;
height: 16px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.nav-hamburger span {
display: block;
width: 100%;
height: 2px;
background: var(--white);
transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Animate to × when open */
.nav--open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav-hamburger span:nth-child(2) { opacity: 0; }
.nav--open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile nav dropdown */
.nav--open .nav-links {
display: flex;
}
@media (max-width: 768px) {
.nav--open .nav-links {
background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), var(--copper);
width: 100vw;
flex-shrink: 0;
margin-left: calc(-1 * var(--page-pad));
padding-left: var(--page-pad);
padding-right: var(--page-pad);
}
}
/* ─── Hero text grid ─── */
/*
Figma (1146px canvas, 108px page-pad):
Headline: left=108px, w=447px → content-x 0–447
Intro: left=442px → content-x 334 (442−108)
Both at y=304.
The intro starts 334px from the content left — inside the headline
column's whitespace. We set the headline column to 334px with no
column-gap so the intro begins right there, matching the nestled look.
Grid areas:
Row 1: "headline" | "intro" (3 stacked lines | paragraph)
Row 2: "end end" ("rally around." spans full width)
Row height = max(3×73px headline, intro height) ≈ 219px, so
"rally around." appears exactly where line 4 would fall.
*/
.hero-columns {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"headline intro"
"end end";
column-gap: 28px;
row-gap: 0;
align-items: start;
margin-top: 153px;
margin-right: -24px;
}
.hero-headline {
grid-area: headline;
font-family: var(--font-display);
font-size: 58px;
font-weight: 500;
color: var(--white);
line-height: 62px;
letter-spacing: -3px;
}
.hero-intro {
grid-area: intro;
font-family: var(--font-body);
font-size: 19px;
font-weight: 300;
color: var(--white);
line-height: 28px;
padding-top: 18px;
padding-left: 40px;
max-width: 620px;
}
/* "rally around." — the full-width 4th line of the title */
.hero-tagline {
grid-area: end;
font-family: var(--font-display);
font-size: 58px;
font-weight: 500;
color: var(--white);
line-height: 62px;
letter-spacing: -3px;
}
/* ─── Image zone — behind the headline ─── */
/*
Starts at y=543 (where the orange band ends in Figma).
The bottom 53px of the headline overlaps this zone.
*/
.hero-image-zone {
position: absolute;
top: 532px;
left: 0;
right: 0;
height: calc(100% - 532px);
z-index: 1;
overflow: hidden;
}
/* Fixed background variant — image stays still while page scrolls */
.hero-image-zone--fixed {
background-image: var(--hero-img);
background-attachment: fixed;
background-size: cover;
background-position: center top;
overflow: visible;
}
/* iOS/iPad: background-attachment:fixed is broken, fall back to scroll */
@media (max-width: 1024px) {
.hero-image-zone--fixed {
background-attachment: scroll;
}
}
.hero-img {
position: absolute;
top: -80px; /* starts above the zone; no gap at page load */
left: 0;
width: 100%;
height: calc(100% + 500px); /* extra height absorbs full parallax travel */
object-fit: cover;
object-position: center 30%;
}
.copper-overlay {
position: absolute;
inset: 0;
background: var(--copper);
mix-blend-mode: multiply;
opacity: 0.8;
}
/* ─── My Story — above image, below intro ─── */
/* y=731 = image-zone top (543) + 188px Figma offset */
.my-story {
position: absolute;
top: 731px;
left: 0;
right: 0;
z-index: 3;
color: var(--white);
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 0 var(--page-pad);
}
.my-story-heading {
font-family: var(--font-display);
font-size: 34px;
font-weight: 500;
line-height: 40px;
margin-bottom: 16px;
}
.my-story-body {
font-family: var(--font-body);
font-size: 11px;
font-weight: 300;
line-height: 1.41;
letter-spacing: 0.22px;
max-width: 310px;
}
.my-story-body + .my-story-body { margin-top: 12px; }
/* ═══════════════════════════════════════════════════
FEATURED
White background. 946px wide centred on 1146px page.
Content column: ~370px. Thumbnail: fills the rest.
═══════════════════════════════════════════════════ */
.featured {
background: var(--white);
padding: 100px var(--page-pad) 72px;
}
.featured-inner {
max-width: var(--page-max);
margin: 0 auto;
display: flex;
gap: 80px;
align-items: flex-start;
}
.featured-content {
flex: 0 0 370px;
}
/* FEATURED badge */
.eyebrow-wrap { margin-bottom: 30px; }
.eyebrow {
font-family: var(--font-body);
font-size: 12px;
font-weight: 400;
letter-spacing: 3.12px;
text-transform: uppercase;
border: 1px solid var(--copper);
border-radius: 25px;
padding: 4px 18px;
}
.featured-title {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
color: var(--copper);
line-height: 1.2;
margin-bottom: 12px;
}
/* Shared project type label */
.project-type-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 300;
letter-spacing: 0.2px;
line-height: 1.41;
color: var(--gray);
margin-bottom: 14px;
}
.featured-desc {
font-family: var(--font-body);
font-size: 14px;
font-weight: 300;
line-height: 1.41;
letter-spacing: 0.22px;
color: var(--gray);
}
.featured-desc + .featured-desc { margin-top: 11px; }
.featured-desc:last-of-type { margin-bottom: 24px; }
/* Domination thumbnail */
.featured-thumb {
display: block;
flex: 1;
min-height: 414px;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
.featured-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ═══════════════════════════════════════════════════
SHARED UTILITIES
═══════════════════════════════════════════════════ */
/* Dividers */
.divider {
border: none;
height: 1px;
margin-bottom: 14px;
}
.divider--accent { background: var(--copper); }
.divider--dark { background: var(--black); }
.divider--white { background: rgba(255,255,255,0.6); }
/* CTA link */
.cta {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 1.28px;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.2s, opacity 0.2s;
}
.cta--accent { color: var(--copper); }
.cta--dark { color: var(--black); }
.cta--white { color: var(--white); }
.cta:hover { color: var(--copper); opacity: 1; }
.cta--white:hover { color: var(--copper-light); opacity: 1; }
.cta-arrow {
font-size: 13px;
display: inline-block;
transition: transform 0.25s ease;
}
.cta:hover .cta-arrow { transform: translateX(5px); }
/* ═══════════════════════════════════════════════════
WORK — peach background, 2×2 grid
═══════════════════════════════════════════════════ */
.work {
background: var(--copper-muted);
padding: 80px var(--page-pad) 32px;
}
.section-wrap {
max-width: var(--page-max);
margin: 0 auto;
}
.section-heading {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
line-height: 1.2;
color: var(--copper);
margin-bottom: 52px;
}
.section-heading--white { color: var(--white); }
/* 2-column grid; gap matches Figma 20px between cards */
.work-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
row-gap: 58px;
}
/* ─── Project card ─── */
.project-card { display: flex; flex-direction: column; }
/* Standard image aspect from Figma: 488w × 434h */
.project-thumb {
display: block;
width: 100%;
aspect-ratio: 488 / 434;
overflow: hidden;
background: #d4bba0; /* fallback colour while image loads */
margin-bottom: 20px;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
/* Taller ratio for photography section */
.project-thumb--tall { aspect-ratio: 488 / 512; }
.project-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.35s ease;
}
.project-card:hover .project-thumb img { opacity: 0.88; }
.project-thumb--vv img {
object-position: center 10%;
transform: scale(1.2);
}
.project-card:hover .project-thumb--vv img { transform: scale(1.25); }
.project-meta { padding-top: 2px; }
.project-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
line-height: 1.41;
color: var(--copper);
margin-bottom: 6px;
}
.project-title--white { color: var(--white); }
/* project-type-label already declared above */
.project-type--white { color: rgba(255,255,255,0.9); }
/* CTA row below the homepage Work grid */
.work-cta {
margin-top: 48px;
}
.work-cta-band {
background: #f3e9da;
padding: 28px var(--page-pad);
text-align: left;
}
/* work.html — Additional Projects: 3-column image grid */
.additional-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 20px;
row-gap: 32px;
}
/* Square thumbnails inside the additional grid — gives a true grid feel */
.additional-grid .project-thumb {
aspect-ratio: 1 / 1;
margin-bottom: 14px;
}
@media (max-width: 768px) {
.additional-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) and (max-width: 1024px) {
.additional-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ═══════════════════════════════════════════════════
PHOTOGRAPHY — solid copper, 2-column grid
═══════════════════════════════════════════════════ */
.photography {
background: var(--copper);
padding: 80px var(--page-pad) 100px;
}
.photo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
}
/* ═══════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════ */
.site-footer {
background: var(--copper-dark);
padding: 0 var(--page-pad);
}
.footer-inner {
max-width: var(--page-max);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 118px; /* Figma: h-[118px] */
}
.footer-logo {
font-family: var(--font-display);
font-size: 18px;
font-weight: 500;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.2em;
}
.footer-social {
display: flex;
gap: 8px;
align-items: center;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
transition: opacity 0.2s;
}
.social-icon:hover { opacity: 0.7; }
.social-icon img { width: 22px; height: 22px; }
@media (min-width: 1075px) {
.hero-intro {
font-size: 19px;
line-height: 28px;
}
}
@media (max-width: 960px) and (min-width: 768px) {
.hero-intro {
font-size: 18px;
line-height: 27px;
}
}
@media (max-width: 843px) and (min-width: 768px) {
.hero-intro {
font-size: 16px;
line-height: 24px;
max-width: 622px;
}
}
@media (max-width: 784px) and (min-width: 768px) {
.hero-intro {
max-width: 630px;
}
}
/* ═══════════════════════════════════════════════════
RESPONSIVE
Below 960px: abandon the fixed-height absolute layout
entirely and switch to natural document flow.
The overlap effect only works at full desktop width.
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Hero wrapper: drop fixed height, let content flow ── */
.hero-wrapper {
height: auto;
overflow: visible;
}
/* Reduce the large desktop top-padding on the nav */
.nav {
position: relative;
padding-top: 40px;
margin-bottom: 80px;
flex-wrap: wrap;
align-items: center;
}
.nav-hamburger {
display: flex;
order: 1;
margin-left: auto;
}
.nav-links {
display: none;
flex-direction: column;
gap: 20px;
width: 100%;
order: 2;
padding: 24px 0 24px;
margin-top: 20px;
}
.nav-links a {
font-size: 14px;
letter-spacing: 2px;
}
/* Stack headline / intro / tagline vertically */
.hero-columns {
grid-template-columns: 1fr;
grid-template-areas:
"headline"
"end"
"intro";
row-gap: 0;
margin-top: 0;
padding-bottom: 48px;
}
/* Let the title flow naturally — remove desktop forced line breaks */
.hero-headline br { display: none; }
.hero-headline,
.hero-tagline {
font-size: clamp(36px, 9vw, 60px);
line-height: 1.05;
letter-spacing: -1px;
}
/* Space before the intro paragraph instead of row-gap */
.hero-intro {
margin-top: 12px;
padding-left: 0;
}
/* hero-intro font-size handled by clamp() in base styles */
/*
Image zone: pull it out of absolute positioning so it
flows naturally below the hero text in the copper band.
The internal .copper-overlay stays absolute inside this
element (which is now the positioning parent via relative).
*/
.hero-image-zone {
position: relative;
top: auto;
height: 320px;
margin-top: -19px; /* overlap = ~half the tagline line height */
z-index: 1;
}
.hero-inner {
position: relative;
z-index: 2; /* keep text above the overlapping image */
}
.hero-img {
top: 0 !important;
height: 100% !important;
transform: none !important;
}
/*
My Story: also back to normal flow, below the image.
Copper wrapper background keeps it in the same colour band.
*/
.my-story {
position: relative;
top: auto;
left: auto;
right: auto;
width: 100%;
max-width: none;
padding: 48px var(--page-pad) 64px;
}
.my-story-body { max-width: 100%; }
/* ── Other sections ── */
.featured-inner { flex-direction: column; gap: 40px; }
.featured-content { flex: none; width: 100%; }
.featured-thumb { width: 100%; min-height: 260px; }
.work-grid,
.photo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.nav { padding-top: 28px; }
.hero-columns { margin-top: 28px; }
.hero-headline,
.hero-tagline { font-size: clamp(32px, 10vw, 48px); }
.hero-intro { font-size: 16px; }
.hero-image-zone { height: 240px; }
.my-story-heading { font-size: 30px; line-height: 1.15; }
.featured { padding: 56px var(--page-pad); }
.work { padding: 52px var(--page-pad) 72px; }
.photography { padding: 52px var(--page-pad) 72px; }
}
/* ═══════════════════════════════════════════════════
CAROUSEL — Dot-triggered two-row slide
═══════════════════════════════════════════════════ */
.cr-section {
background: var(--white);
overflow: hidden; /* clips cards that bleed past viewport edges */
padding-bottom: 64px;
}
.cr-header {
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 80px var(--page-pad) 44px;
}
.cr-eyebrow {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--copper);
}
/* Clip is on .cr-section — viewport is intentionally open so cards bleed */
.cr-viewport {
overflow: visible;
}
.cr-stage {
display: flex;
flex-direction: column;
gap: 10px;
}
.cr-row {
overflow: visible;
}
/* Shared track styles */
.cr-track {
display: flex;
gap: 10px;
padding-left: var(--page-pad); /* right side intentionally open — cards bleed off edge */
will-change: transform;
}
/*
Top row settles first — short duration makes it feel snappier.
Bottom row lingers — longer duration makes it feel heavier/slower.
Both travel the same pixel distance; only the speed differs.
*/
/* Top row snaps into position first — same ease-out curve, shorter duration */
.cr-track--top {
transition: transform 0.38s ease-out;
}
/* Bottom row lags noticeably behind — same curve, much longer duration */
.cr-track--btm {
transition: transform 0.9s ease-out;
}
/* ─── Card — 16:9 landscape, matching Apple's tile ratio ─── */
.cr-card {
flex: 0 0 440px; /* wider card so 3 fit fully + ~30px bleeds off right edge */
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
display: block;
text-decoration: none;
background: #111;
}
.cr-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.55s ease;
}
.cr-card:hover img { transform: scale(1.04); }
.cr-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px 16px 16px;
background: linear-gradient(to top, rgba(5,5,5,0.82) 0%, transparent 100%);
display: flex;
flex-direction: column;
gap: 4px;
pointer-events: none;
}
.cr-card-title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
color: var(--white);
line-height: 1.2;
}
.cr-card-type {
font-family: var(--font-body);
font-size: 9px;
font-weight: 400;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.58);
}
/* ─── Navigation dots — Apple dotnav spec ─── */
/*
Apple's dot is an 8×8px circle (::before pseudo-element, border-radius:999px).
The active dot expands to a 32×8px pill via a width transition.
Hit area = 8px padding each side (same as Apple's dotnav-margin-inline).
*/
.cr-dots {
display: flex;
justify-content: center;
align-items: center;
padding-top: 32px;
gap: 0; /* spacing comes from the button padding */
}
.cr-dot {
padding: 8px;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.cr-dot::before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.36);
transition: width 250ms ease-in-out, background-color 200ms linear;
}
.cr-dot:hover:not(.cr-dot--active)::before {
background: rgba(0, 0, 0, 0.54);
}
.cr-dot--active {
cursor: default;
pointer-events: none;
}
.cr-dot--active::before {
width: 32px;
background: rgba(0, 0, 0, 0.8);
}
/* Reduced motion: instant slide */
@media (prefers-reduced-motion: reduce) {
.cr-track--top,
.cr-track--btm { transition: none; }
}
/* Mobile */
@media (max-width: 768px) {
.cr-section { padding-bottom: 52px; }
.cr-header { padding: 56px var(--page-pad) 32px; }
.cr-card { flex: 0 0 280px; }
.cr-stage { gap: 8px; }
.cr-track { gap: 8px; }
.cr-dots { padding-top: 24px; }
}
@media (max-width: 600px) {
.cr-card { flex: 0 0 220px; }
.cr-card-title { font-size: 11px; }
}
/* ═══════════════════════════════════════════════════
PROJECT DETAIL PAGE
═══════════════════════════════════════════════════ */
/* ─── Hero ─── */
.proj-hero {
background: var(--copper);
overflow: hidden;
}
.proj-hero-inner {
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 0 var(--page-pad);
}
.proj-hero-inner .nav {
padding-top: 123px;
margin-bottom: 0;
}
/* Title + subtitle sit above the two-column grid */
.proj-hero-text {
margin-top: 80px;
margin-bottom: 40px;
}
.proj-title {
font-family: var(--font-display);
font-size: 38px;
font-weight: 500;
color: var(--white);
line-height: 1.0;
letter-spacing: -1.5px;
margin-bottom: 12px;
}
.proj-subtitle {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
color: var(--white);
letter-spacing: -0.5px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.proj-subtitle--no-rule {
border-bottom: none;
padding-bottom: 0;
}
/* Work page subtitle responsive line breaks */
.work-br-sm { display: none; }
.my-story-br-ipad { display: none; }
.dom-desc-desktop { display: block; }
@media (max-width: 1024px) {
.work-br-sm { display: inline; }
}
@media (min-width: 769px) and (max-width: 1024px) {
.my-story-br-ipad { display: inline; }
}
@media (max-width: 1024px) {
.dom-desc-desktop { display: none; }
.featured-desc { margin-bottom: 24px; }
}
@media (max-width: 768px) {
.proj-subtitle--no-rule { font-size: 15px; letter-spacing: -0.2px; }
}
/* ─── Work page nav band ─── */
.work-nav-band {
background: #f5e8d8;
padding: 0 var(--page-pad);
}
.work-nav-band-inner {
max-width: var(--page-max);
margin: 0 auto;
display: flex;
align-items: center;
gap: 32px;
min-height: 72px;
}
.work-nav-divider {
display: block;
width: 1px;
height: 14px;
background: rgba(0, 0, 0, 0.2);
}
/* Two-column grid: challenge/concept left, metadata right */
.proj-header-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 80px;
align-items: start;
padding-bottom: 60px;
}
.proj-header-left {
display: flex;
flex-direction: column;
gap: 32px;
}
.proj-header-right {
flex-shrink: 0;
}
.proj-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 48px;
align-items: start;
}
.proj-meta {
display: flex;
flex-direction: column;
}
.proj-meta dt {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 1.82px;
text-transform: uppercase;
color: var(--black);
margin-top: 28px;
margin-bottom: 4px;
}
.proj-meta dt:first-child { margin-top: 0; }
.proj-meta dd {
font-family: var(--font-body);
font-size: 14px;
font-weight: 300;
color: var(--black);
line-height: 1.65;
margin: 0;
}
.proj-meta--white dt { color: rgba(255,255,255,0.65); }
.proj-meta--white dd { color: var(--white); }
.proj-content-block { display: flex; flex-direction: column; }
.proj-content-heading {
font-family: var(--font-display);
font-size: 26px;
font-weight: 500;
color: var(--copper);
margin-bottom: 10px;
}
.proj-hero-inner .proj-content-heading { color: var(--white); }
.proj-content-body {
font-family: var(--font-body);
font-size: 14px;
font-weight: 300;
color: var(--gray);
line-height: 23px;
}
.proj-content-body + .proj-content-body { margin-top: 10px; }
.proj-content-body--white { color: rgba(255,255,255,0.9); }
/* ─── Hero image ─── */
.proj-hero-image {
width: 100%;
height: 580px;
overflow: hidden;
position: relative;
}
.proj-hero-image img {
position: absolute;
top: -80px;
left: 0;
width: 100%;
height: calc(100% + 600px);
object-fit: cover;
}
.proj-hero-image--static {
height: auto;
overflow: visible;
}
.proj-hero-image--static img {
position: static;
display: block;
width: 100%;
height: auto;
transform: none;
}
/* ─── The Identity section ─── */
.proj-identity {
background: var(--white);
padding: 120px var(--page-pad);
}
.proj-identity-inner {
max-width: var(--page-max);
margin: 0 auto;
display: grid;
grid-template-columns: 520px 1fr;
gap: 80px;
align-items: center;
}
.proj-identity-left { display: flex; flex-direction: column; gap: 12px; }
.proj-identity-right {
display: flex;
flex-direction: column;
gap: 24px;
}
.proj-brand-asset {
display: block;
max-width: 78%;
height: auto;
}
/* ─── Image sections ─── */
.proj-images {
padding: 40px 0;
background: var(--white);
}
/* Collapse top padding when image blocks are directly adjacent */
.proj-images + .proj-images,
.proj-case-img-pair + .proj-images,
.proj-images + .proj-case-img-pair { padding-top: 0; }
.proj-images-inner {
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 0 var(--page-pad);
}
.proj-section-heading {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
color: var(--copper);
margin-bottom: 40px;
}
.proj-img-full {
display: block;
width: 100%;
margin-bottom: 24px;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
.proj-img-full:last-child { margin-bottom: 0; }
/* PowerPoint slide deck grid */
.slide-deck {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.slide-frame {
border-radius: 4px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
background: #fff;
}
.slide-frame img {
display: block;
width: 100%;
}
/* Browser chrome mockup for UI screenshots */
.browser-frame {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 12px 48px rgba(0,0,0,0.14);
background: #fff;
margin-bottom: 16px;
}
.browser-frame:last-child { margin-bottom: 0; }
.browser-bar {
background: #e4e4e4;
padding: 9px 12px;
display: flex;
align-items: center;
gap: 6px;
}
.browser-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.browser-dot--red { background: #ff5f57; }
.browser-dot--yellow { background: #febc2e; }
.browser-dot--green { background: #28c840; }
.browser-url {
flex: 1;
background: #fff;
border-radius: 4px;
height: 18px;
margin-left: 8px;
opacity: 0.7;
}
.browser-frame img {
display: block;
width: 100%;
}
/* Label + image side-by-side: 1 col label / 5 col image */
.proj-label-image {
background: var(--white);
padding: 96px 0;
}
.proj-label-image-inner {
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 0 var(--page-pad);
display: grid;
grid-template-columns: 1.5fr 4.5fr;
gap: 40px;
align-items: start;
}
.proj-label-image-inner img {
display: block;
width: 100%;
}
.proj-label-image-inner .proj-img-full { margin-bottom: 16px; }
.proj-label-image-inner .proj-img-full:last-child { margin-bottom: 0; }
.proj-label-image--grey { background: #f2f2f2; }
@media (max-width: 1024px) {
.proj-label-image-inner {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* 2-up image pair within the right column */
.proj-label-image-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
align-items: start;
}
.proj-label-image-pair:last-child { margin-bottom: 0; }
.proj-label-image-pair img { display: block; width: 100%; }
/* Three-column image group */
.proj-img-trio {
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 0 var(--page-pad) 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.proj-img-trio img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 768px) {
.proj-img-trio { grid-template-columns: 1fr; }
}
.proj-img-split {
display: grid;
grid-template-columns: 717fr 333fr;
gap: 24px;
margin-bottom: 24px;
}
.proj-img-split img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
.proj-gray {
background: #efeeea;
padding: 60px 0;
}
/* ─── Case Study Layout ─── */
.proj-case {
background: var(--white);
}
.proj-case-text {
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 72px var(--page-pad) 48px;
}
.proj-case-text--2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
padding-top: 48px;
padding-bottom: 72px;
}
.proj-case-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 12px;
}
.proj-case-heading {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
color: var(--copper);
margin-bottom: 14px;
}
.proj-case-copy {
font-family: var(--font-body);
font-size: 14px;
font-weight: 300;
color: var(--gray);
line-height: 1.75;
max-width: 560px;
}
.proj-case-copy--offset {
padding-top: 48px;
max-width: none;
}
.proj-case-copy--dark { color: var(--gray); margin-bottom: 32px; }
.proj-images-inner--2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
padding-bottom: 0;
}
@media (max-width: 768px) {
.proj-images-inner--2col { grid-template-columns: 1fr; gap: 0; }
}
.proj-case-img-wrap {
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 0 var(--page-pad) 8px;
}
.proj-case-img-wrap--flush { padding-bottom: 0; }
.proj-case-img-wrap--top { padding-top: 60px; }
.proj-case-text--last { padding-bottom: 80px; }
.proj-case-img-wrap img {
display: block;
width: 100%;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
.proj-case-caption {
font-family: var(--font-body);
font-size: 11px;
font-weight: 300;
color: var(--gray);
letter-spacing: 0.3px;
padding-top: 10px;
}
.proj-case-img-pair {
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 0 var(--page-pad) 8px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.proj-case-img-pair--flush { padding-top: 0; }
.proj-case-img-gap { padding-top: 48px; }
/* Four-up grid — shirt designs, small squares */
.proj-case-img-quad {
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 0 var(--page-pad) 8px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.proj-case-img-quad img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.proj-case-img-quad--flush { padding-top: 0; }
.proj-case-img-pair > div {
overflow: hidden;
}
.proj-case-img-pair img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
@media (max-width: 768px) {
.proj-case-text--2col { grid-template-columns: 1fr; gap: 24px; }
.proj-case-copy--offset { padding-top: 0; }
.proj-case-img-pair { grid-template-columns: 1fr; }
}
.proj-app-final {
background: #d9d9d9;
margin-bottom: 0;
display: flex;
flex-direction: column;
}
.proj-app-final > img {
display: block;
width: 100%;
flex-shrink: 0;
}
.proj-app-final-label {
padding: 56px var(--page-pad) 24px;
width: 100%;
}
.proj-app-final-label .proj-case-copy { color: var(--gray); }
.proj-app-final-cta {
text-align: center;
padding: 48px var(--page-pad) 80px;
}
/* ─── PDF CTA ─── */
.btn-pill {
display: inline-block;
background: var(--black);
color: var(--white);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 1px;
padding: 15px 44px;
border-radius: 50px;
cursor: pointer;
transition: opacity 0.2s;
}
.btn-pill:hover { opacity: 0.7; }
/* ─── iPad: disable parallax, image fills container ─── */
@media (min-width: 769px) and (max-width: 1024px) {
/* Project page hero */
.proj-hero-image { height: 420px; }
.proj-hero-image img {
top: 0 !important;
height: 100% !important;
transform: none !important;
}
/* Static (non-parallax) hero images — always fit full width */
.proj-hero-image--static { height: auto; overflow: visible; }
.proj-hero-image--static img { height: auto !important; }
/* Index page hero — pull out of fixed-height absolute layout,
same natural-flow approach used on mobile */
.hero-wrapper {
height: auto;
overflow: visible;
}
.hero-image-zone {
position: relative;
top: auto;
height: 420px;
margin-top: -31px; /* overlap = ~half the tagline line height */
z-index: 1;
}
.hero-inner {
position: relative;
z-index: 2;
}
.hero-img {
top: 0 !important;
height: 100% !important;
transform: none !important;
}
.my-story {
position: relative;
top: auto;
left: auto;
right: auto;
width: 100%;
max-width: none;
padding: 48px var(--page-pad) 64px;
}
.my-story-body { max-width: 100%; }
/* Catalog page — editorial grid: switch to fr units so it fits iPad viewport */
.proj-cat-editorial { grid-template-columns: 328fr 712fr; gap: 12px; }
/* Catalog page — section 05 rugs: centered image, wider text */
.proj-cat-rugs { gap: 40px; align-items: center; }
.proj-cat-rugs-img-col {
margin-top: -52px;
flex: 0 0 360px;
}
.proj-cat-rugs-cover-img { width: 100%; height: auto; }
.proj-cat-rugs-text { flex: 1; max-width: none !important; padding-top: 0 !important; }
}
/* ─── Catalog rugs: stack at 935px and below ─── */
@media (min-width: 769px) and (max-width: 935px) {
.proj-cat-rugs {
flex-direction: column;
gap: 0;
align-items: stretch;
}
.proj-cat-rugs-img-col {
margin-top: -52px;
flex: 0 0 auto;
width: 100%;
}
.proj-cat-rugs-cover-img { width: 380px; height: auto; }
.proj-cat-rugs-text { flex: 1; max-width: none !important; width: 100%; padding-top: 0 !important; }
}
/* ─── Responsive ─── */
@media (max-width: 768px) {
.proj-hero { display: flow-root; }
.proj-hero-inner .nav { padding-top: 40px; }
.proj-hero-text { margin-top: 40px; margin-bottom: 28px; }
.proj-title { font-size: clamp(28px, 7vw, 38px); letter-spacing: -1px; }
.proj-subtitle { font-size: 18px; }
.proj-header-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.proj-identity-inner {
grid-template-columns: 1fr;
gap: 40px;
}
/* Parallax disabled on mobile — image fills container, no JS-driven sizing needed */
.proj-hero-image { height: 320px; }
.proj-hero-image img {
top: 0 !important;
height: 100% !important;
transform: none !important;
}
/* Static (non-parallax) hero images — always fit full width */
.proj-hero-image--static { height: auto; overflow: visible; }
.proj-hero-image--static img { height: auto !important; }
}
/* ═══════════════════════════════════════════════════
CATALOG PAGE — specific layouts
═══════════════════════════════════════════════════ */
/* ─── 01+02: Two-column intro text ─── */
.proj-cat-2col-text {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
/* ─── Three catalog covers in a row ─── */
.proj-cat-covers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.proj-cat-covers img,
.proj-cat-spread-img,
.proj-cat-rugs-cover-img,
.proj-cat-warm-inner img {
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
.proj-cat-covers img {
display: block;
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
}
/* ─── 03: Narrow text left + wide image right ─── */
.proj-cat-spread {
display: grid;
grid-template-columns: 300px 1fr;
gap: 60px;
align-items: start;
}
.proj-cat-spread-img {
display: block;
width: 100%;
}
/* ─── 04: Editorial — two stacked left + one tall right ─── */
/* Figma: left col 328px, right col 712px, gap 48px = 1088px total content width */
.proj-cat-editorial img {
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
.proj-cat-editorial {
display: grid;
grid-template-columns: 328px 712px;
gap: 48px;
align-items: stretch;
}
/* Left column fills the full row height */
.proj-cat-editorial-left {
display: flex;
flex-direction: column;
gap: 26px;
height: 100%;
}
/* Each left image takes equal share of available height */
.proj-cat-editorial-left img {
display: block;
flex: 1;
min-height: 0;
width: 100%;
object-fit: cover;
}
.proj-cat-editorial-zoom {
flex: 1;
min-height: 0;
overflow: hidden;
}
.proj-cat-editorial-zoom img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.45);
transform-origin: center center;
}
/* Right image defines the row height via aspect-ratio */
.proj-cat-editorial > div:last-child {
display: flex;
}
.proj-cat-editorial > div:last-child > img {
display: block;
width: 100%;
aspect-ratio: 712 / 632;
object-fit: cover;
}
/* ─── Warm cream section (Rugs) ─── */
/*
Figma: cream bg starts y=3915. Rugs cover image starts y=3846 — 69px above.
Image: 650×589px at x=68. Text: x=788, w=304, starts y=4122 (207px from cream top).
Gray section gets bottom padding so there's visible gray behind the overlap.
*/
.proj-case--overlap {
padding-bottom: 140px;
}
.proj-cat-warm {
background: #fff4ea;
position: relative;
}
.proj-cat-warm-inner {
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 72px var(--page-pad);
}
/* Rugs row — image overlaps gray section above via negative margin-top */
.proj-cat-rugs {
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
padding: 0 var(--page-pad);
display: flex;
gap: 70px;
align-items: flex-start;
}
.proj-cat-rugs-img-col {
flex: 0 0 auto;
margin-top: -69px;
position: relative;
z-index: 2;
}
.proj-cat-rugs-cover-img {
display: block;
width: 650px;
height: 589px;
object-fit: cover;
}
/* Text starts 207px from cream top (y=4122−3915) */
.proj-cat-rugs-text {
max-width: 304px;
padding-top: 207px;
}
.proj-cat-rugs-spread-wrap {
width: 100%;
overflow: hidden;
margin-top: 72px;
}
.proj-cat-rugs-spread {
display: block;
width: 100%;
}
.proj-cat-bottom-spread {
width: 100%;
overflow: hidden;
margin-top: 16px;
}
.proj-cat-bottom-spread img {
display: block;
width: 100%;
}
/* ─── Catalog link list ─── */
.proj-cat-links {
display: flex;
flex-direction: column;
}
.proj-cat-link-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid rgba(188, 125, 72, 0.3);
color: var(--black);
transition: opacity 0.2s;
}
.proj-cat-link-row:first-of-type {
border-top: 1px solid rgba(188, 125, 72, 0.3);
margin-top: 16px;
}
.proj-cat-link-row:hover { opacity: 0.6; }
.proj-cat-link-title {
font-family: var(--font-body);
font-size: 15px;
font-weight: 400;
color: var(--black);
}
.proj-cat-link-cta {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--copper);
}
/* ─── Responsive ─── */
@media (max-width: 768px) {
.proj-cat-2col-text { grid-template-columns: 1fr; gap: 40px; }
.proj-cat-covers { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.proj-cat-spread { grid-template-columns: 1fr; }
.proj-cat-editorial { grid-template-columns: 328fr 712fr; gap: 12px; }
.proj-cat-rugs { flex-direction: column; gap: 25px; }
.proj-cat-rugs-img-col { margin-top: -40px; display: flex; justify-content: center; }
.proj-cat-rugs-cover-img { width: 100%; height: auto; }
.proj-cat-rugs-text { max-width: 100%; padding-top: 0; }
}
/* ═══════════════════════════════════════════════════
IMAGE PLACEHOLDERS
Used on pages where local assets haven't been added yet.
Replace each .proj-img-placeholder div with an ![]()
tag
pointing to assets/images/Arts/ once images are ready.
═══════════════════════════════════════════════════ */
.proj-img-placeholder {
display: block;
width: 100%;
background: #e4dbd4;
position: relative;
}
.proj-img-placeholder::after {
content: 'IMAGE PLACEHOLDER';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
color: rgba(0,0,0,0.25);
}
/* Hero image slot — tall, full-width */
.proj-img-placeholder--hero { height: 580px; }
/* Wide / full-width scene image */
.proj-img-placeholder--wide { height: 520px; }
/* Medium height image */
.proj-img-placeholder--medium { height: 380px; }
/* Square-ish pair image */
.proj-img-placeholder--square { aspect-ratio: 4 / 3; height: auto; }
/* When placeholder sits inside proj-hero-image, remove the parallax img rules */
.proj-hero-image--placeholder { overflow: hidden; }
.proj-hero-image--placeholder .proj-img-placeholder--hero {
height: 100%;
}
@media (max-width: 768px) {
.proj-img-placeholder--hero { height: 320px; }
.proj-img-placeholder--wide { height: 280px; }
.proj-img-placeholder--medium { height: 220px; }
}
/* ═══════════════════════════════════════════════════
BACK TO TOP
═══════════════════════════════════════════════════ */
.proj-back-to-top {
text-align: left;
padding: 48px var(--page-pad);
max-width: calc(var(--page-max) + 2 * var(--page-pad));
margin: 0 auto;
}
.proj-back-to-top-link {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 1.28px;
text-transform: uppercase;
color: var(--copper);
display: inline-flex;
align-items: center;
gap: 8px;
transition: opacity 0.2s;
}
.proj-back-to-top-link:hover { opacity: 0.65; }
.proj-back-to-top-arrow {
font-size: 13px;
display: inline-block;
transition: transform 0.25s ease;
}
.proj-back-to-top-link:hover .proj-back-to-top-arrow { transform: translateY(-4px); }
/* ═══════════════════════════════════════════════════
CONTACT PAGE
═══════════════════════════════════════════════════ */
.contact-section {
background: var(--white);
padding: 100px var(--page-pad);
}
.contact-inner {
max-width: var(--page-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 80px;
align-items: start;
}
.contact-left { padding-top: 4px; }
.contact-blurb {
font-family: var(--font-body);
font-size: 14px;
font-weight: 300;
color: var(--gray);
line-height: 1.75;
margin-top: 16px;
max-width: 320px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 28px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gray);
}
.form-input,
.form-textarea {
font-family: var(--font-body);
font-size: 14px;
font-weight: 300;
color: var(--black);
background: #fdf5eb;
border: none;
padding: 12px 16px;
width: 100%;
outline: none;
transition: box-shadow 0.2s;
-webkit-appearance: none;
border-radius: 8px;
}
.form-input:focus,
.form-textarea:focus {
outline: none;
}
.form-textarea {
resize: none;
min-height: 130px;
line-height: 1.65;
}
.form-submit {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 1.28px;
text-transform: uppercase;
color: var(--black);
background: none;
border: none;
padding: 0;
cursor: pointer;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.2s, opacity 0.2s;
}
.form-submit:hover { color: var(--copper); }
.form-submit:hover .cta-arrow { transform: translateX(5px); }
@media (max-width: 768px) {
.contact-inner {
grid-template-columns: 1fr;
gap: 40px;
}
.contact-blurb { max-width: 100%; }
.contact-section { padding: 64px var(--page-pad); }
}