/* ─── Brand Palette ──────────────────────────────────── */
:root {
  --primary-green: #09413c;
  --accent-burgundy: #41090e;
  --bg-light-grey: #eaeaea;
  --cta-amber: #f39c12;
  --text-dark: #333333;
  --font-sans: 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Georgia', serif;
}

/* ─── Reset ──────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { max-width: 100%; overflow-x: hidden; }
body { background-color: var(--bg-light-grey); color: var(--text-dark); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
h1, h2, h3, h4, h5, h6 { color: var(--primary-green); text-transform: uppercase; font-weight: 800; line-height: 1; }
p { color: var(--text-dark); font-size: 1.2rem; line-height: 1.6; margin-bottom: 2rem; font-weight: 400; }
a { text-decoration: none; color: inherit; }

/* ─── Layout ─────────────────────────────────────────── */
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.section-pad { padding: 150px 0; }

/* ─── Navigation ─────────────────────────────────────── */
nav { padding: 30px 40px; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; width: 100%; z-index: 1000; background-color: rgba(234, 234, 234, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(9, 65, 60, 0.1); }
.logo { font-size: 1.2rem; font-weight: 900; color: var(--primary-green); text-transform: uppercase; letter-spacing: 2px; }
.nav-links { display: flex; gap: 40px; align-items: center; }
.nav-links a { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dark); transition: color 0.3s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--cta-amber); }

/* ─── Buttons ────────────────────────────────────────── */
.btn-sleek { background-color: var(--cta-amber); color: var(--text-dark); padding: 16px 32px; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; border-radius: 50px; border: none; cursor: pointer; transition: all 0.3s ease; display: inline-block; }
.btn-sleek:hover { background-color: var(--text-dark); color: var(--bg-light-grey); }

/* ─── Circle Button ──────────────────────────────────── */
.circle-btn { width: 140px; height: 140px; background-color: var(--cta-amber); color: var(--text-dark); border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center; text-transform: uppercase; font-weight: 800; font-size: 0.85rem; letter-spacing: 1px; cursor: pointer; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: absolute; right: 10%; bottom: -70px; z-index: 10; }
.circle-btn:hover { transform: scale(1.1); }

/* ─── Hamburger ──────────────────────────────────────── */
.hamburger { display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 18px; cursor: pointer; background: none; border: none; padding: 0; z-index: 1100; }
.hamburger span { display: block; height: 2px; width: 100%; background: var(--primary-green); border-radius: 2px; transition: all 0.3s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ─── Mobile Menu ────────────────────────────────────── */
.mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-light-grey); z-index: 999; flex-direction: column; justify-content: center; align-items: center; gap: 40px; text-align: center; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: var(--primary-green); transition: color 0.2s; }
.mobile-menu a:hover, .mobile-menu a.active { color: var(--cta-amber); }
.mobile-menu .mobile-cta { background: var(--cta-amber); color: var(--text-dark) !important; padding: 16px 40px; border-radius: 50px; font-size: 1rem !important; }

/* ─── Hero ───────────────────────────────────────────── */
.hero { padding: 220px 0 150px; position: relative; border-bottom: 1px solid rgba(9, 65, 60, 0.2); }
.hero-subtitle { font-size: 1rem; text-transform: uppercase; letter-spacing: 3px; font-weight: 600; margin-bottom: 40px; color: var(--text-dark); display: block; }
.hero h1 { font-size: clamp(4rem, 9vw, 10rem); letter-spacing: -2px; color: var(--primary-green); max-width: 100%; word-break: break-word; }

/* ─── Marquee ────────────────────────────────────────── */
.marquee-wrapper { background-color: var(--primary-green); padding: 20px 0; overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.marquee-text { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--bg-light-grey); animation: marquee 20s linear infinite; }
.marquee-text span { color: var(--cta-amber); margin: 0 30px; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ─── Split Layout ───────────────────────────────────── */
.split-section { display: flex; gap: 100px; position: relative; }
.sticky-side { width: 35%; position: sticky; top: 150px; height: fit-content; }
.scroll-side { width: 65%; }
.editorial-heading { font-size: 1rem; text-transform: uppercase; letter-spacing: 3px; font-weight: 600; color: var(--text-dark); margin-bottom: 20px; }
.editorial-heading span { display: block; font-size: 4.5rem; font-family: var(--font-serif); text-transform: none; font-style: italic; color: var(--primary-green); line-height: 1.2; margin-top: 10px; }
.large-paragraph { font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.4; font-weight: 300; color: var(--primary-green); margin-bottom: 50px; }
.large-paragraph strong { font-weight: 700; }

/* ─── Services List (Homepage) ───────────────────────── */
.service-row { border-top: 1px solid rgba(9, 65, 60, 0.2); padding: 50px 0; display: flex; justify-content: space-between; align-items: flex-start; transition: background-color 0.3s ease, padding-left 0.3s ease; cursor: pointer; }
.service-row:last-child { border-bottom: 1px solid rgba(9, 65, 60, 0.2); }
.service-row:hover { background-color: rgba(9, 65, 60, 0.03); padding-left: 20px; padding-right: 20px; }
.service-number { font-size: 1rem; font-weight: 700; color: var(--cta-amber); width: 10%; }
.service-title { font-size: 3rem; width: 40%; transition: color 0.3s ease; }
.service-row:hover .service-title { color: var(--cta-amber); }
.service-desc { width: 40%; font-size: 1.1rem; margin-bottom: 0; opacity: 0.8; }

/* ─── Services Detail Page ───────────────────────────── */
.split-intro { display: flex; gap: 100px; margin-bottom: 100px; }
.service-detail-row { border-top: 1px solid rgba(9, 65, 60, 0.2); padding: 100px 0; display: flex; gap: 100px; }
.service-detail-row:last-child { border-bottom: 1px solid rgba(9, 65, 60, 0.2); }
.service-header-side { width: 35%; }
.service-content-side { width: 65%; }
.service-large-num { font-size: 1.2rem; font-weight: 800; color: var(--cta-amber); margin-bottom: 20px; display: block; }
.service-large-title { font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1; margin-bottom: 20px; }
.service-content-side p { font-size: 1.4rem; font-weight: 300; color: var(--primary-green); max-width: 800px; }
.capabilities-list { margin-top: 40px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.capabilities-list li { font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dark); padding-bottom: 10px; border-bottom: 1px solid rgba(9, 65, 60, 0.1); }
.capabilities-list li::before { content: '+'; color: var(--cta-amber); margin-right: 10px; font-weight: 900; }

/* ─── Philosophy ─────────────────────────────────────── */
.philosophy-block { margin-bottom: 80px; border-bottom: 1px solid rgba(9, 65, 60, 0.2); padding-bottom: 80px; }
.philosophy-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.philosophy-block h3 { font-size: 2.5rem; margin-bottom: 24px; }
.philosophy-block p { font-size: 1.25rem; max-width: 800px; }
.quote-callout { border-left: 4px solid var(--cta-amber); padding-left: 30px; margin: 40px 0; font-family: var(--font-serif); font-size: 1.8rem; font-style: italic; color: var(--primary-green); line-height: 1.4; }

/* ─── Work / Case Studies ────────────────────────────── */
.story-feed { padding: 100px 0; display: flex; flex-direction: column; gap: 120px; }
.story-card { border-top: 1px solid rgba(9, 65, 60, 0.2); padding-top: 80px; }
.story-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.client-name { font-size: clamp(3rem, 5vw, 5rem); font-family: var(--font-serif); font-style: italic; color: var(--primary-green); text-transform: none; line-height: 1.1; margin: 0; max-width: 70%; }
.client-industry { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--cta-amber); margin-bottom: 15px; display: block; }
.story-hero-img { width: 100%; height: 500px; object-fit: cover; margin-bottom: 60px; display: block; }
.story-hero-placeholder { width: 100%; height: 500px; background-color: rgba(9, 65, 60, 0.05); border: 1px dashed rgba(9, 65, 60, 0.3); display: flex; justify-content: center; align-items: center; margin-bottom: 60px; }
.story-hero-placeholder span { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: rgba(9, 65, 60, 0.5); }
.narrative-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.narrative-column h4 { font-size: 1.5rem; color: var(--text-dark); margin-bottom: 20px; border-bottom: 2px solid var(--primary-green); padding-bottom: 10px; display: inline-block; }
.narrative-column p { font-size: 1.1rem; line-height: 1.7; font-weight: 300; }
.impact-statement { margin-top: 60px; padding: 40px; background-color: rgba(9, 65, 60, 0.03); border-left: 4px solid var(--cta-amber); font-size: 1.5rem; font-family: var(--font-serif); font-style: italic; color: var(--primary-green); line-height: 1.4; }

/* ─── Project / Case Study Detail ────────────────────── */
.project-hero { padding: 250px 0 100px; background-color: #f5f5f5; }
.project-title { font-family: var(--font-serif); font-size: clamp(5rem, 12vw, 12rem); font-weight: 400; color: var(--primary-green); line-height: 0.9; margin-bottom: 20px; letter-spacing: -2px; text-transform: none; }
.project-category { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dark); opacity: 0.6; }
.overview-section { padding: 120px 0; background-color: #f5f5f5; border-bottom: 1px solid rgba(9, 65, 60, 0.1); }
.overview-split { display: flex; justify-content: space-between; gap: 100px; }
.overview-left { width: 65%; }
.overview-right { width: 30%; }
.massive-lead { font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.2; color: var(--primary-green); font-weight: 400; margin-bottom: 40px; }
.standard-text { font-size: 1.3rem; line-height: 1.6; color: var(--text-dark); font-weight: 300; margin-bottom: 30px; }
.services-heading { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: var(--primary-green); margin-bottom: 30px; }
.services-list { list-style: none; }
.services-list li { font-size: 1.3rem; color: var(--text-dark); margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(9, 65, 60, 0.1); }
.narrow-container { max-width: 900px; margin: 0 auto; padding: 0 40px; }
.narrative-block { padding: 120px 0; }
.narrative-heading { font-size: 2.5rem; font-family: var(--font-serif); font-style: italic; color: var(--primary-green); margin-bottom: 30px; text-transform: none; }
.img-placeholder { width: 100%; background-color: rgba(9, 65, 60, 0.05); display: flex; justify-content: center; align-items: center; margin: 60px 0; }
.img-placeholder span { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; color: rgba(9, 65, 60, 0.4); }
.img-massive { height: 800px; }
.img-standard { height: 500px; }
.quote-section { padding: 150px 0; background-color: var(--primary-green); color: var(--bg-light-grey); text-align: center; }
.quote-text { font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.2; font-style: italic; max-width: 1100px; margin: 0 auto 40px; color: var(--bg-light-grey); text-transform: none; }
.quote-author { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--cta-amber); }
.next-project { padding: 150px 0; text-align: center; background-color: #f5f5f5; }
.next-label { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; color: var(--primary-green); margin-bottom: 20px; display: block; }
.next-title { font-family: var(--font-serif); font-size: clamp(4rem, 8vw, 8rem); color: var(--text-dark); transition: color 0.3s ease; text-transform: none; }
.next-title:hover { color: var(--cta-amber); }

/* ─── Contact ────────────────────────────────────────── */
.contact-info-block { margin-top: 60px; }
.contact-detail { margin-bottom: 30px; }
.contact-detail h4 { font-size: 0.85rem; color: var(--cta-amber); margin-bottom: 5px; letter-spacing: 2px; }
.contact-detail p, .contact-detail a { font-size: 1.2rem; font-weight: 700; color: var(--primary-green); margin: 0; transition: color 0.3s ease; }
.contact-detail a:hover { color: var(--text-dark); }
.contact-form { background: transparent; width: 100%; }
.form-group { margin-bottom: 50px; }
.form-row { display: flex; gap: 40px; }
.form-row .form-group { flex: 1; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--primary-green); margin-bottom: 15px; }
.form-group input, .form-group textarea, .form-group select { width: 100%; background: transparent; border: none; border-bottom: 2px solid rgba(9, 65, 60, 0.2); padding: 10px 0; font-size: 1.3rem; color: var(--text-dark); font-family: var(--font-sans); transition: border-color 0.3s ease; border-radius: 0; -webkit-appearance: none; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-bottom-color: var(--cta-amber); }
.form-group textarea { resize: vertical; min-height: 150px; }

/* ─── Burgundy Break ─────────────────────────────────── */
.burgundy-break { background-color: var(--accent-burgundy); padding: 120px 0; text-align: center; }
.burgundy-break h2 { color: var(--bg-light-grey); font-size: clamp(2.5rem, 5vw, 4.5rem); max-width: 1000px; margin: 0 auto 40px; line-height: 1.1; }

/* ─── Footer ─────────────────────────────────────────── */
footer { background-color: var(--primary-green); padding: 150px 0 50px; color: var(--bg-light-grey); }
.footer-grid { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid rgba(234, 234, 234, 0.2); padding-bottom: 80px; margin-bottom: 40px; }
.footer-huge-cta { font-size: clamp(4rem, 8vw, 9rem); color: var(--bg-light-grey); line-height: 0.9; transition: color 0.3s ease; }
.footer-huge-cta:hover { color: var(--cta-amber); }
.footer-info p { color: rgba(234, 234, 234, 0.7); font-size: 1rem; margin-bottom: 10px; }

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .split-section, .split-intro, .service-detail-row, .overview-split { flex-direction: column; gap: 60px; }
  .sticky-side, .service-header-side, .service-content-side, .overview-left, .overview-right { width: 100%; }
  .scroll-side { width: 100%; }
  .service-row { flex-wrap: wrap; gap: 20px; }
  .service-number, .service-title { width: 100%; }
  .service-title { font-size: 2.5rem; }
  .service-desc { width: 100%; }
  .service-detail-row { padding: 60px 0; }
  .narrative-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .client-name { max-width: 100%; }
  .circle-btn { width: 80px; height: 80px; font-size: 0.55rem; right: 20px; top: 50%; transform: translateY(-50%); bottom: auto; }
  .img-massive { height: 500px; }
}
@media (max-width: 768px) {
  nav { padding: 20px; }
  .hamburger { display: flex; }
  .nav-links { display: none !important; }
  nav > .btn-sleek { display: none; }
  .hero { padding: 160px 0 120px; }
  .section-pad { padding: 100px 0; }
  .footer-grid { flex-direction: column; align-items: flex-start; gap: 60px; }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 4rem) !important; letter-spacing: -1px; }
  .footer-huge-cta { font-size: clamp(2.5rem, 12vw, 5rem) !important; }
  .large-paragraph { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; }
  .container { padding: 0 20px !important; }
  .capabilities-list { grid-template-columns: 1fr; }
  .story-hero-img, .story-hero-placeholder { height: 300px; }
  .impact-statement { font-size: 1.2rem; padding: 20px; }
  .form-row { flex-direction: column; gap: 0; }
  .img-massive, .img-standard { height: 300px; }
  .narrative-block { padding: 80px 0; }
}