:root { --navy: #142b4d; --ink: #172642; --ivory: #f7f3ed; --sand: #e7ddd1; --gold: #c9a77c; --muted: #737a7a; --line: rgba(23,38,66,.17); --serif: Georgia, "Times New Roman", serif; --sans: "Trebuchet MS", Arial, sans-serif; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--ivory); color: var(--ink); font: 15px/1.6 var(--sans); margin: 0; overflow-x: hidden; } a { color: inherit; text-decoration: none; }
.site-header { align-items: center; display: flex; justify-content: space-between; left: 0; padding: 14px 5vw; position: absolute; right: 0; top: 0; z-index: 5; }.brand { align-items: center; display: inline-flex; gap: 12px; }.brand img { height: 64px; mix-blend-mode: multiply; object-fit: contain; width: 72px; }.brand > span { font-size: 11px; letter-spacing: .16em; line-height: 1.35; }.brand b { display: block; font-weight: 600; }.main-nav { align-items: center; display: flex; gap: clamp(24px, 3.5vw, 52px); }.main-nav a { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }.main-nav a:hover, .footer a:hover { color: var(--gold); }.nav-link { border-bottom: 1px solid currentColor; padding-bottom: 8px; }.nav-link span, .text-link span, .email-link span, button span { font-size: 17px; margin-left: 10px; }.menu-toggle { background: none; border: 0; display: none; padding: 6px; }.menu-toggle i { background: var(--ink); display: block; height: 1px; margin: 5px; width: 24px; }
.hero { background: var(--navy); color: white; min-height: 760px; overflow: hidden; padding: 210px 10vw 55px; position: relative; }.hero-pattern { background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(225,196,158,.08) 25%, transparent calc(25% + 1px)); inset: 0; position: absolute; }.hero-orbit { border: 1px solid rgba(225,196,158,.28); border-radius: 50%; position: absolute; }.orbit-one { height: min(70vw, 900px); right: -13vw; top: 50%; transform: translateY(-50%); width: min(70vw, 900px); }.orbit-two { height: min(47vw, 600px); right: 0; top: 50%; transform: translate(10%, -50%); width: min(47vw, 600px); }.hero-content { max-width: 680px; position: relative; z-index: 1; }.eyebrow { color: #947252; font-size: 10px; font-weight: 600; letter-spacing: .2em; margin: 0 0 28px; text-transform: uppercase; }.eyebrow.light { color: #e3c398; } h1, h2, blockquote { font-family: var(--serif); font-weight: 400; line-height: 1.06; margin: 0; } h1 { font-size: clamp(59px, 8vw, 112px); letter-spacing: -.05em; } h2 { font-size: clamp(50px, 6vw, 82px); letter-spacing: -.05em; } h1 em, h2 em, blockquote em { font-weight: 400; }.hero-copy { font-size: 17px; margin: 38px 0; max-width: 420px; }.text-link { border-bottom: 1px solid currentColor; display: inline-flex; font-size: 11px; letter-spacing: .13em; padding-bottom: 9px; text-transform: uppercase; }.text-link.light { color: white; }.hero-footer { bottom: 40px; display: flex; font-size: 10px; justify-content: space-between; left: 10vw; letter-spacing: .16em; position: absolute; right: 10vw; }.hero-footer span:last-child { color: var(--gold); }
.section { padding: 145px 10vw; }.story { display: grid; gap: 7vw; grid-template-columns: 45px 1fr 1fr; min-height: 780px; }.section-index { color: #947252; font-size: 11px; letter-spacing: .1em; padding-top: 10px; }.section-index span { color: var(--ink); margin: 0 5px; }.story-copy { max-width: 550px; }.story-copy h2 { margin-bottom: 40px; }.story-copy p:not(.eyebrow) { color: var(--muted); max-width: 450px; }.story-copy .lead { color: var(--ink); font: 24px/1.4 var(--serif); margin-bottom: 28px; }.story-copy .text-link { margin-top: 28px; }.placeholder-card { align-items: center; background: var(--sand); display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; text-align: center; }.placeholder-card::before { border: 1px solid rgba(20,43,77,.2); content: ""; inset: 18px; position: absolute; }.placeholder-card::after { background: radial-gradient(circle at 32% 25%, rgba(255,255,255,.65), transparent 24%), linear-gradient(135deg, rgba(198,170,137,.6), rgba(239,233,224,.72) 48%, rgba(165,180,176,.65)); content: ""; inset: 0; opacity: .55; position: absolute; }.placeholder-card > * { position: relative; z-index: 1; }.placeholder-card span { color: #957253; font-size: 10px; letter-spacing: .18em; }.placeholder-card strong { font: 29px/1.12 var(--serif); margin-top: 16px; }.placeholder-card small { color: var(--muted); font-size: 10px; letter-spacing: .08em; margin-top: 20px; }.story-placeholder { min-height: 540px; }
.services { background: #eee5da; display: grid; gap: 12vw; grid-template-columns: .8fr 1.2fr; }.service-list { border-top: 1px solid var(--line); }.service { border-bottom: 1px solid var(--line); display: grid; gap: 24px; grid-template-columns: 45px 1fr 20px; padding: 30px 0; }.service > span { color: #947252; font-size: 11px; padding-top: 5px; }.service h3 { font: 28px var(--serif); margin: 0 0 8px; }.service p { color: var(--muted); margin: 0; max-width: 450px; }.service > b { font-size: 19px; font-weight: 400; }
.gallery { background: var(--ivory); }.gallery-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 60px; }.gallery-heading p:last-child { color: var(--muted); max-width: 285px; }.gallery-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1.2fr .72fr; grid-template-rows: 220px 220px; }.gallery-tile { min-height: 200px; }.tile-large { grid-row: span 2; }.tile-wide { grid-column: 2; }.tile-small { grid-column: 3; grid-row: 2; }.gallery-tile strong { font-size: 28px; }.gallery-tile::after { background: linear-gradient(135deg, #d9c8b6, #f0e9df 50%, #b2c0bb); }.tile-wide::after { background: linear-gradient(110deg, #bbc9c7, #e7d1bd 56%, #b9a078); }.tile-small::after { background: linear-gradient(135deg, #d1b18e, #e7e1d6); }
.statement { background: var(--navy); color: white; padding: 135px 10vw; text-align: center; }.statement blockquote { font-size: clamp(44px, 6vw, 80px); }.statement > span { color: var(--gold); display: block; font-size: 10px; letter-spacing: .17em; margin-top: 35px; text-transform: uppercase; }.contact { display: grid; gap: 14vw; grid-template-columns: 1fr 1fr; }.contact-copy h2 { margin-bottom: 34px; }.contact-copy > p:not(.eyebrow) { color: var(--muted); max-width: 390px; }.email-link { border-bottom: 1px solid var(--ink); display: inline-flex; margin-top: 30px; padding-bottom: 10px; }.contact-form { border-top: 1px solid var(--line); padding-top: 10px; }.contact-form label { color: #8b735d; display: block; font-size: 10px; letter-spacing: .15em; margin: 18px 0; text-transform: uppercase; }.contact-form input, .contact-form textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); display: block; font: 16px var(--sans); margin-top: 7px; outline: 0; padding: 10px 0; resize: vertical; width: 100%; }.contact-form input:focus, .contact-form textarea:focus { border-color: var(--navy); }.contact-form button { background: var(--navy); border: 0; color: white; cursor: pointer; font: 11px var(--sans); letter-spacing: .1em; margin-top: 15px; padding: 17px 22px; text-transform: uppercase; }.contact-form button:hover { background: #9a7452; }.form-message { color: #947252; font-size: 12px; min-height: 20px; }
.footer { align-items: center; background: #eee5da; display: grid; gap: 30px; grid-template-columns: 1.2fr 1fr 1fr auto; padding: 28px 5vw; }.footer .brand img { height: 54px; width: 60px; }.footer p, .footer a, .footer small { font-size: 10px; letter-spacing: .08em; }.footer > div { display: flex; gap: 24px; }
@media (max-width: 760px) { .site-header { padding: 10px 6vw; }.brand img { height: 55px; width: 62px; }.brand > span { font-size: 9px; }.main-nav { background: var(--ivory); display: none; flex-direction: column; gap: 24px; left: 0; padding: 28px 6vw; position: absolute; right: 0; top: 76px; }.main-nav.open { display: flex; }.menu-toggle { display: block; }.hero { min-height: 720px; padding: 170px 7vw 50px; }.orbit-one { height: 130vw; right: -50vw; width: 130vw; }.orbit-two { height: 88vw; right: -28vw; width: 88vw; }.hero-footer { bottom: 28px; left: 7vw; right: 7vw; }.hero-footer span:nth-child(2) { display: none; }.section { padding: 90px 7vw; }.story, .services, .contact { display: block; }.section-index { margin-bottom: 45px; }.story-placeholder { margin-top: 60px; min-height: 390px; }.services .section-heading { margin-bottom: 60px; }.service { gap: 15px; grid-template-columns: 32px 1fr 16px; }.service h3 { font-size: 24px; }.gallery-heading { align-items: start; display: block; }.gallery-heading p:last-child { margin-top: 26px; }.gallery-grid { display: block; }.gallery-tile { height: 270px; margin-bottom: 15px; }.tile-large { height: 390px; }.footer { align-items: flex-start; display: flex; flex-direction: column; gap: 17px; padding: 35px 7vw; } }