/* Palette: deep navy, racing green, cream, gold accents */
:root {
  --navy: #0a1722;         /* deeper navy */
  --green: #0f2a22;        /* darker racing green */
  --cream: #f4efe4;        /* warm cream */
  --paper: #faf6ec;        /* paper tint */
  --ink: #131312;          /* rich ink */
  --gold: #c4ad6a;         /* muted gold */
  --gold-2: #e2cf8e;       /* light gold */
  --muted: #7c8078;
  --maxw: 1120px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(196,173,106,.06), rgba(0,0,0,0)),
    linear-gradient(180deg, var(--navy), var(--green));
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}

.serif { font-family: "Cormorant Garamond", "Libre Baskerville", Georgia, serif; letter-spacing: .3px; font-feature-settings: "liga" 1, "kern" 1; }
.display { font-size: clamp(36px, 5vw, 72px); line-height: 1.06; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--gold-2); }
.eyebrow a { color: var(--gold-2); text-decoration: none; }
.eyebrow a:hover { color: var(--gold); }
.lede { font-size: 1.125rem; color: var(--cream); opacity: .9; max-width: 60ch; }
.muted { color: var(--cream); opacity: .75; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container.small { max-width: 840px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(10px); background: rgba(7,17,26,.6); border-bottom: 1px solid rgba(226,207,142,.16); box-shadow: 0 2px 20px rgba(0,0,0,.25); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.brand { display: inline-flex; gap: 12px; align-items: center; text-decoration: none; color: var(--cream); }
.brand-mark { width: 28px; height: 28px; object-fit: contain; filter: saturate(.2) brightness(1.2) contrast(1.1); }
.brand-name { font-family: "Cormorant Garamond", serif; font-weight: 600; letter-spacing: .04em; font-variant: small-caps; }

.primary-nav { display: none; gap: 22px; align-items: center; }
.primary-nav a { color: var(--cream); text-decoration: none; font-weight: 600; opacity: .92; letter-spacing: .02em; }
.primary-nav a:hover { color: var(--gold-2); }
.primary-nav a.active { color: var(--gold); }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(191,163,91,.35); background: transparent; color: var(--cream); border-radius: 6px; }

@media (min-width: 860px) {
  .primary-nav { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* Buttons */
.btn { display: inline-block; padding: 12px 20px; border-radius: 999px; text-decoration: none; cursor: pointer; font-weight: 700; letter-spacing: .02em; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.btn-outline { border: 1px solid var(--gold); color: var(--gold); background: linear-gradient(180deg, rgba(196,173,106,.08), rgba(226,207,142,.04)); box-shadow: inset 0 0 0 1px rgba(226,207,142,.15); }
.btn-ghost { border: 1px solid rgba(191,163,91,.35); color: var(--cream); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.btn-gold { color: var(--ink); background: linear-gradient(180deg, var(--gold-2), var(--gold)); border: 0; box-shadow: 0 6px 18px rgba(226,207,142,.18); }
.btn:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(226,207,142,.22); }

/* Hero */
.hero { padding: 110px 0 44px; border-bottom: 1px solid rgba(226,207,142,.14); background: linear-gradient(180deg, rgba(8,20,30,.75), rgba(14,35,29,.6)); position: relative; overflow: hidden; }
.hero-home { padding: 140px 0 80px; }
.hero-home::before { content: ""; position: absolute; inset: -10% -10% auto -10%; height: 80%; background-image: url('https://images.unsplash.com/photo-1519710164239-da123dc03ef4?q=80&w=1880&auto=format&fit=crop'); background-size: cover; background-position: center; opacity: .13; filter: grayscale(100%) contrast(1.1); pointer-events: none; }
.hero-ctas { display: flex; gap: 12px; margin-top: 20px; }

/* Sections */
.stats-ribbon { padding: 48px 0; background: rgba(7,18,26,.7); border-top: 1px solid rgba(191,163,91,.16); border-bottom: 1px solid rgba(191,163,91,.16); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; padding: 0 24px; }
.stat-item { text-align: center; }
.stat-number { font-family: "Cormorant Garamond", serif; font-size: clamp(32px, 4vw, 48px); font-weight: 600; color: var(--gold-2); line-height: 1.1; margin-bottom: 8px; letter-spacing: -.02em; }
.stat-label { font-size: .875rem; color: var(--cream); opacity: .8; text-transform: uppercase; letter-spacing: .1em; }

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .stat-number { font-size: 28px; }
}

.ribbon { padding: 42px 0; background: rgba(10,24,36,.6); border-top: 1px solid rgba(191,163,91,.12); border-bottom: 1px solid rgba(191,163,91,.12); text-align: center; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; padding: 42px 24px; }
.card { padding: 24px; border: 1px solid rgba(226,207,142,.22); border-radius: 12px; background: linear-gradient(180deg, rgba(12,26,38,.78), rgba(12,26,38,.72)); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.card .card-link { color: var(--gold-2); text-decoration: none; font-weight: 600; }
.card .card-link:hover { color: var(--gold); }

.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: stretch; padding: 64px 24px; }
.split-media { background-image: url('https://images.unsplash.com/photo-1567016432779-094069958ea5?q=80&w=1600&auto=format&fit=crop'); background-size: cover; background-position: center; border-radius: 14px; min-height: 340px; box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(226,207,142,.18); }
.split-copy { align-self: center; }

/* Clients Section */
.clients-section { padding: 80px 0; background: rgba(8,20,30,.45); border-top: 1px solid rgba(191,163,91,.12); border-bottom: 1px solid rgba(191,163,91,.12); position: relative; }
.clients-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1000px 500px at 50% 50%, rgba(226,207,142,.04), rgba(0,0,0,0)); pointer-events: none; }
.clients-header { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.clients-header h2 { margin: 12px 0 16px; }

.clients-gallery-wrapper { width: 100%; overflow: hidden; position: relative; }
.clients-gallery-wrapper::before,
.clients-gallery-wrapper::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 10; pointer-events: none; }
.clients-gallery-wrapper::before { left: 0; background: linear-gradient(to right, rgba(8,20,30,.9), rgba(8,20,30,0)); }
.clients-gallery-wrapper::after { right: 0; background: linear-gradient(to left, rgba(8,20,30,.9), rgba(8,20,30,0)); }

.clients-gallery { display: flex; gap: 40px; align-items: center; padding: 20px 24px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.clients-gallery::-webkit-scrollbar { display: none; }
.clients-gallery { -webkit-overflow-scrolling: touch; }

.client-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 160px; height: 100px; padding: 20px; border: 1px solid rgba(226,207,142,.12); border-radius: 10px; background: linear-gradient(180deg, rgba(12,26,38,.5), rgba(12,26,38,.4)); backdrop-filter: blur(4px); transition: all .4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.client-logo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(226,207,142,.05), rgba(196,173,106,.02)); opacity: 0; transition: opacity .4s ease; }
.client-logo:hover { border-color: rgba(226,207,142,.3); background: linear-gradient(180deg, rgba(12,26,38,.7), rgba(12,26,38,.6)); transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.client-logo:hover::before { opacity: 1; }

.client-logo img { max-width: 100%; max-height: 70px; width: auto; height: auto; object-fit: contain; filter: grayscale(100%) brightness(0.9) contrast(1.1); opacity: .7; transition: all .4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 1; }
.client-logo:hover img { filter: grayscale(0%) brightness(1) contrast(1); opacity: 1; transform: scale(1.05); }

.client-placeholder { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; position: absolute; inset: 0; }
.client-logo.has-placeholder .client-placeholder { display: flex; }
.client-logo.has-placeholder img { display: none; }

@media (max-width: 960px) {
  .clients-gallery { gap: 32px; }
  .client-logo { width: 140px; height: 90px; padding: 16px; }
  .client-logo img { max-height: 60px; }
}

@media (max-width: 640px) {
  .clients-section { padding: 60px 0; }
  .clients-gallery { gap: 24px; padding: 16px 20px; }
  .client-logo { width: 120px; height: 80px; padding: 14px; }
  .client-logo img { max-height: 50px; }
  .clients-gallery-wrapper::before,
  .clients-gallery-wrapper::after { width: 40px; }
}

.marquee { padding: 18px 0; border-top: 1px solid rgba(191,163,91,.12); border-bottom: 1px solid rgba(191,163,91,.12); background: rgba(8,20,30,.55); }
.marquee-track { display: flex; gap: 28px; overflow: hidden; white-space: nowrap; }
.marquee-track span { opacity: .75; }

.cta { text-align: center; padding: 64px 24px; }

/* Page hero */
.page-hero { padding: 120px 0 44px; background: linear-gradient(180deg, rgba(8,20,30,.74), rgba(14,35,29,.58)); border-bottom: 1px solid rgba(226,207,142,.14); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(800px 400px at 15% 0%, rgba(226,207,142,.08), rgba(0,0,0,0)); pointer-events: none; }

/* Services */
.service-section { padding: 48px 0; border-bottom: 1px solid rgba(191,163,91,.12); }
.service-head { margin-bottom: 18px; }
.list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.item { padding: 14px 14px; border: 1px dashed rgba(226,207,142,.32); border-radius: 10px; background: rgba(12,26,38,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.item.modal-trigger { cursor: pointer; text-align: left; color: var(--cream); }

/* Work */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding: 36px 0; }
.tile { padding: 20px; border: 1px solid rgba(191,163,91,.18); border-radius: 10px; background: rgba(12,26,38,.72); }

/* Contact */
.form-wrap { display: grid; gap: 22px; grid-template-columns: 1.2fr .8fr; padding: 48px 0; }
.form { display: grid; gap: 16px; padding: 18px; border: 1px solid rgba(226,207,142,.18); border-radius: 12px; background: rgba(12,26,38,.62); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font-weight: 600; }
.form input, .form textarea { background: rgba(245,240,230,.08); color: var(--cream); border: 1px solid rgba(191,163,91,.22); border-radius: 8px; padding: 12px 12px; font: inherit; }
.form input::placeholder, .form textarea::placeholder { color: rgba(245,240,230,.6); }
.contact-aside .well { height: 100%; display: grid; align-content: start; gap: 8px; }

@media (max-width: 920px) {
  .split { grid-template-columns: 1fr; }
  .form-wrap { grid-template-columns: 1fr; }
  .form .grid { grid-template-columns: 1fr; }
}

/* Prose */
.prose { padding: 48px 0; }
.prose h2 { margin: 20px 0 6px; font-weight: 600; }
.prose h2 a { color: var(--cream); text-decoration: none; }
.prose h2 a:hover { color: var(--gold-2); }
.prose p, .prose ul, .prose ol { max-width: 70ch; color: var(--cream); opacity: .95; }
.prose ul, .prose ol { padding-left: 18px; }
.prose .well { margin-top: 18px; }
.prose article p:first-of-type::first-letter { float: left; font-family: "Libre Baskerville", Georgia, serif; font-size: 3rem; line-height: .8; margin-right: .4rem; color: var(--gold-2); }
.articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 32px; }
.article-card { padding: 20px; border: 1px solid rgba(191,163,91,.18); border-radius: 10px; background: rgba(12,26,38,.72); }
.article-card h2 { margin: 0 0 8px; }
.article-card p { margin: 0 0 12px; }
.article-card .card-link { color: var(--gold-2); text-decoration: none; font-weight: 600; }
.article-card .card-link:hover { color: var(--gold); }

/* Utility */
.well { padding: 18px; border: 1px solid rgba(226,207,142,.22); border-radius: 12px; background: rgba(12,26,38,.62); box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* Modals */
.modal-overlay { position: fixed; inset: 0; background: rgba(6,14,21,.6); backdrop-filter: blur(6px); z-index: 90; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 100; }
.modal[hidden], .modal-overlay[hidden] { display: none !important; }
.modal-shell { width: min(860px, calc(100% - 32px)); max-height: min(80vh, 880px); background: linear-gradient(180deg, rgba(14,30,44,1), rgba(13,28,40,.96)); border: 1px solid rgba(191,163,91,.28); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: rgba(8,20,30,.6); border-bottom: 1px solid rgba(191,163,91,.16); }
.modal-header h3 { margin: 0; }
.modal-close { appearance: none; border: 1px solid rgba(191,163,91,.35); background: transparent; color: var(--cream); width: 36px; height: 36px; border-radius: 8px; font-size: 20px; cursor: pointer; }
.modal-body { padding: 16px; overflow: auto; max-height: calc(min(80vh, 880px) - 56px - 62px); }
.modal-body section { padding: 12px 0; border-bottom: 1px solid rgba(191,163,91,.12); }
.modal-body section:last-child { border-bottom: 0; }
.modal-body h4 { margin: 0 0 6px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; background: rgba(8,20,30,.6); border-top: 1px solid rgba(191,163,91,.16); }

/* Footer */
.site-footer { border-top: 1px solid rgba(226,207,142,.18); background: rgba(7,18,26,.76); margin-top: 42px; box-shadow: 0 -6px 24px rgba(0,0,0,.3) inset; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 22px; align-items: start; padding: 28px 24px; }
.footer-brand .brand-name { display: block; font-size: 1.1rem; }
.footer-col h4 { margin: 0 0 8px; color: var(--gold-2); font-weight: 600; }
.site-footer nav a { color: var(--cream); opacity: .9; text-decoration: none; display: block; margin: 6px 0; letter-spacing: .01em; }
.site-footer nav a:hover { color: var(--gold-2); }
.footer-bottom { border-top: 1px solid rgba(226,207,142,.14); padding: 16px 24px 24px; color: var(--cream); opacity: .78; text-align: center; }

@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
}