/*
Theme Name: Black Rudder
Theme URI: https://blackrudder.com
Author: Black Rudder Advisory
Author URI: https://blackrudder.com
Description: Black Rudder — Discrete Navigation. Custom theme for Black Rudder Advisory.
Version: 1.0.3
License: Proprietary
License URI: https://blackrudder.com
Text Domain: blackrudder
*/

/* ── RESET & BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --navy:    #1a2744;
  --dnavy:   #0f1a2e;
  --gold:    #c9a84c;
  --gold-lt: #d4b86a;
  --white:   #f5f4f0;
  --mgrey:   #8a9099;
  --lgrey:   #2a3350;
  --rule:    #2e3d5e;
  --crimson: #8b1a1a;
}

body {
  background: var(--dnavy);
  color: var(--white);
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
}

/* ── NOISE OVERLAY ────────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1000;
  opacity: 0.6;
}

/* ── NAVIGATION ───────────────────────────────────────────────────────────── */
nav.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 60px;
  background: linear-gradient(to bottom, rgba(15,26,46,0.95) 0%, transparent 100%);
}

.site-logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.15em;
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: center;
}
.site-logo .bar { color: var(--gold); margin: 0 2px; }

.nav-right { display: flex; align-items: center; gap: 40px; }

.nav-link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--mgrey);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav-link:hover { color: var(--white); }
.nav-link.active { color: var(--gold); border-bottom-color: var(--gold); }

/* Hamburger — hidden on desktop, shown on mobile */
.nav-hamburger { display: none; }
.nav-close { display: none; }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 60px 80px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  right: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(201,168,76,0.04) 0%, transparent 60%),
              conic-gradient(from 0deg,
                transparent 44deg, rgba(201,168,76,0.03) 45deg, transparent 46deg,
                transparent 89deg, rgba(201,168,76,0.03) 90deg, transparent 91deg,
                transparent 134deg, rgba(201,168,76,0.03) 135deg, transparent 136deg,
                transparent 179deg, rgba(201,168,76,0.03) 180deg, transparent 181deg,
                transparent 224deg, rgba(201,168,76,0.03) 225deg, transparent 226deg,
                transparent 269deg, rgba(201,168,76,0.03) 270deg, transparent 271deg,
                transparent 314deg, rgba(201,168,76,0.03) 315deg, transparent 316deg);
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.06);
  pointer-events: none;
}

.hero-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.3s;
}

.hero-headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(52px, 7vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 800px;
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.5s;
}
.hero-headline em { font-style: italic; color: var(--gold); }

.hero-sub {
  margin-top: 40px;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--mgrey);
  max-width: 420px;
  line-height: 1.8;
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.7s;
}

.hero-rule {
  margin-top: 60px;
  width: 60px;
  height: 1px;
  background: var(--gold);
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.9s;
}

/* ── SECTIONS ─────────────────────────────────────────────────────────────── */
.br-section { padding: 120px 60px; position: relative; }

.section-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ── PROBLEM ──────────────────────────────────────────────────────────────── */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
}

.problem-statement {
  padding: 60px;
  border-right: 1px solid var(--rule);
}
.problem-statement h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 32px;
}
.problem-statement p {
  font-size: 15px;
  line-height: 2;
  color: var(--mgrey);
  font-weight: 300;
}

.problem-signals { padding: 60px; display: flex; flex-direction: column; justify-content: center; }

.signal-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  transition: all 0.3s;
}
.signal-item:first-child { border-top: 1px solid var(--rule); }
.signal-item:hover .signal-name { color: var(--gold); }
.signal-item:hover .signal-arrow { opacity: 1; transform: translateX(0); }

.signal-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--white);
  transition: color 0.3s;
}
.signal-arrow {
  font-size: 18px;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.3s;
}

/* ── METHODOLOGY ──────────────────────────────────────────────────────────── */
.method-section {
  padding: 120px 60px;
  background: rgba(26,39,68,0.4);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.method-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 80px;
}

.method-headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  color: var(--white);
}

.method-desc p {
  font-size: 15px;
  line-height: 2;
  color: var(--mgrey);
  font-weight: 300;
  margin-bottom: 16px;
}

.method-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.pillar {
  background: var(--dnavy);
  padding: 48px 40px;
  position: relative;
  transition: background 0.3s;
}
.pillar:hover { background: rgba(26,39,68,0.8); }

.pillar-accent {
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 0;
  background: var(--gold);
  transition: height 0.4s ease;
}
.pillar:hover .pillar-accent { height: 100%; }

.pillar-number {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 24px;
  display: block;
}
.pillar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.2;
}
.pillar-body {
  font-size: 15px;
  line-height: 1.9;
  color: var(--mgrey);
  font-weight: 300;
}

/* ── SOLUTION ─────────────────────────────────────────────────────────────── */
.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  margin-top: 48px;
}

.solution-statement {
  padding: 60px;
  border-right: 1px solid var(--rule);
}
.solution-statement h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 32px;
}
.solution-statement p {
  font-size: 15px;
  line-height: 2;
  color: var(--mgrey);
  font-weight: 300;
}

.solution-outputs { padding: 60px; display: flex; flex-direction: column; justify-content: center; }

.output-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.output-item:first-child { border-top: 1px solid var(--rule); }

.output-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gold);
  flex-shrink: 0;
  width: 24px;
}
.output-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.3;
}

/* ── WORK ─────────────────────────────────────────────────────────────────── */
.work-section {
  padding: 120px 60px;
  background: rgba(26,39,68,0.3);
  border-top: 1px solid var(--rule);
}

.work-intro { max-width: 640px; margin-bottom: 72px; }
.work-intro h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 24px;
}
.work-intro p {
  font-size: 15px;
  line-height: 2;
  color: var(--mgrey);
  font-weight: 300;
}

.work-case {
  border: 1px solid var(--rule);
  margin-bottom: 1px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  transition: border-color 0.3s, background 0.3s;
}
.work-case:hover {
  border-color: rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.02);
}

.work-case-body {
  padding: 48px 60px;
  border-right: 1px solid var(--rule);
}

.work-case-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.work-tag {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  border: 1px solid rgba(201,168,76,0.3);
  padding: 4px 10px;
}

.work-reliability {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--mgrey);
  text-transform: uppercase;
}

.work-case-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 16px;
}

.work-case-body > p {
  font-size: 15px;
  line-height: 1.9;
  color: var(--mgrey);
  font-weight: 300;
  max-width: 640px;
}

.work-downloads {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}

.dl-btn {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mgrey);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 10px 20px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dl-btn:hover {
  color: var(--gold);
  border-color: rgba(201,168,76,0.4);
  background: rgba(201,168,76,0.04);
}

.work-case-findings {
  padding: 48px 48px 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 280px;
  justify-content: center;
}

.finding-pill {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--mgrey);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.finding-pill::before {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 7px;
}

/* ── CONTACT ──────────────────────────────────────────────────────────────── */
.contact-section {
  padding: 120px 60px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.contact-left h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.0;
  color: var(--white);
  margin-bottom: 24px;
}
.contact-left h2 em { font-style: italic; color: var(--gold); }
.contact-left p {
  font-size: 15px;
  line-height: 2;
  color: var(--mgrey);
  max-width: 420px;
  font-weight: 300;
}

.contact-link {
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--mgrey);
  text-decoration: none;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.3s;
}
.contact-link:first-child { border-top: 1px solid var(--rule); }
.contact-link:hover { color: var(--gold); }
.contact-link:hover .contact-arrow { transform: translateX(4px); color: var(--gold); }

.contact-arrow {
  font-size: 17px;
  color: var(--rule);
  transition: all 0.3s;
}

/* ── FOOTER ───────────────────────────────────────────────────────────────── */
.site-footer {
  padding: 40px 60px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--mgrey);
}
.footer-logo .bar { color: var(--gold); }

.footer-copy { font-size: 12px; color: rgba(138,144,153,0.5); letter-spacing: 0.05em; }
.footer-tagline {
  font-size: 12px;
  color: rgba(138,144,153,0.5);
  letter-spacing: 0.12em;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
}

/* ── WORDPRESS FALLBACK CONTENT ───────────────────────────────────────────── */
.content-main { min-height: 100vh; padding: 140px 60px 100px; }
.content-entry { max-width: 820px; margin: 0 auto; }
.content-header { border-bottom: 1px solid var(--rule); margin-bottom: 40px; padding-bottom: 32px; }
.content-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.05;
  color: var(--white);
}
.content-body {
  font-size: 16px;
  line-height: 1.95;
  color: rgba(245,244,240,0.82);
  font-weight: 300;
}
.content-body > * { margin-bottom: 22px; }
.content-body h2,
.content-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  color: var(--white);
  line-height: 1.2;
  margin: 42px 0 18px;
}
.content-body a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,168,76,0.45); }
.content-body ul,
.content-body ol { padding-left: 22px; }
.content-body img { max-width: 100%; height: auto; }

/* ── ANIMATIONS ───────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (max 900px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  nav.site-nav { padding: 22px 32px; }
  .nav-right { gap: 24px; }
  .nav-link { font-size: 12px; }
  .hero { padding: 110px 32px 70px; }
  .br-section, .method-section, .work-section { padding: 80px 32px; }
  .contact-section { padding: 80px 32px; grid-template-columns: 1fr; gap: 48px; }
  .problem-grid, .method-intro, .solution-grid { grid-template-columns: 1fr; }
  .problem-statement { border-right: none; border-bottom: 1px solid var(--rule); }
  .solution-statement { border-right: none; border-bottom: 1px solid var(--rule); }
  .method-pillars { grid-template-columns: 1fr; }
  .work-case { grid-template-columns: 1fr; }
  .work-case-body { border-right: none; border-bottom: 1px solid var(--rule); }
  .work-case-findings { min-width: unset; padding: 32px 40px; }
  .site-footer { flex-direction: column; gap: 14px; text-align: center; padding: 32px; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (max 600px)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  nav.site-nav { padding: 20px 24px; background: rgba(15,26,46,0.98); }
  .nav-right {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--dnavy);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 200;
  }
  .nav-right.open { display: flex; }
  .nav-link { font-size: 14px; letter-spacing: 0.25em; padding: 8px 0; }
  .nav-close {
    display: block;
    position: absolute; top: 24px; right: 24px;
    background: none; border: none; color: var(--mgrey);
    font-size: 28px; cursor: pointer; line-height: 1; padding: 4px;
  }
  .nav-hamburger {
    display: flex; flex-direction: column; gap: 5px;
    cursor: pointer; padding: 4px; background: none; border: none;
  }
  .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--white); transition: all 0.3s; }
  .hero { padding: 100px 24px 60px; }
  .hero::after { display: none; }
  .hero-headline { font-size: 42px; }
  .hero-sub { font-size: 15px; margin-top: 28px; }
  .hero-rule { margin-top: 40px; }
  .br-section, .method-section, .work-section, .contact-section { padding: 60px 24px; }
  .section-label { font-size: 10.5px; margin-bottom: 32px; }
  .section-label::before { width: 20px; }
  .problem-statement { padding: 36px 24px; }
  .problem-statement h2 { font-size: 32px; margin-bottom: 24px; }
  .problem-signals { padding: 28px 24px; }
  .signal-item { padding: 20px 0; }
  .signal-name { font-size: 22px; }
  .method-headline { font-size: 32px; }
  .method-desc p { font-size: 15px; }
  .pillar { padding: 32px 24px; }
  .pillar-title { font-size: 20px; }
  .solution-statement { padding: 36px 24px; }
  .solution-statement h2 { font-size: 32px; }
  .solution-outputs { padding: 28px 24px; }
  .output-text { font-size: 18px; }
  .work-intro h2 { font-size: 32px; }
  .work-case-body { padding: 36px 24px; }
  .work-case-title { font-size: 22px; }
  .work-case-body > p { font-size: 15px; }
  .work-downloads { flex-direction: column; gap: 8px; }
  .dl-btn { justify-content: center; padding: 12px 16px; }
  .work-case-findings { padding: 28px 24px; gap: 14px; }
  .contact-left h2 { font-size: 36px; }
  .contact-left p { font-size: 15px; }
  .contact-link { padding: 20px 0; font-size: 14.5px; }
  .site-footer { padding: 28px 24px; }
  .footer-tagline { display: none; }
}
@media (max-width: 800px) {
  .content-main { padding: 110px 32px 70px; }
}

@media (max-width: 600px) {
  .content-main { padding: 92px 24px 60px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE REFINEMENTS — Additional touch and layout fixes
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Improve tap targets site-wide on touch devices ──────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .nav-link         { padding: 10px 4px; }
  .dl-btn           { min-height: 44px; }
  .contact-link     { min-height: 52px; }
  .signal-item      { min-height: 52px; }
  .nav-hamburger    { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
}

/* ── 480px — tighten further on small phones ─────────────────────────────── */
@media (max-width: 480px) {
  .hero-headline  { font-size: 38px; line-height: 1.05; }
  .hero-sub       { font-size: 14px; }
  .problem-statement h2,
  .solution-statement h2,
  .work-intro h2,
  .contact-left h2,
  .method-headline { font-size: 28px; }
  .pillar-title   { font-size: 18px; }
  .signal-name    { font-size: 20px; }
  .output-text    { font-size: 17px; }
  .work-case-title { font-size: 20px; }
}

/* ── Prevent overflow on very narrow screens ─────────────────────────────── */
@media (max-width: 380px) {
  nav.site-nav    { padding: 18px 20px; }
  .hero           { padding: 90px 20px 50px; }
  .br-section, .method-section, .work-section,
  .contact-section { padding: 50px 20px; }
  .work-case-body, .work-case-findings, .problem-statement,
  .problem-signals, .solution-statement,
  .solution-outputs, .pillar { padding-left: 20px; padding-right: 20px; }
  .site-footer    { padding: 24px 20px; }
}

/* ── Fix nav overlay z-index on all pages ────────────────────────────────── */
@media (max-width: 600px) {
  .nav-right {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15,26,46,0.99);
    z-index: 999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
  }
  .nav-right.open { display: flex; }
  .nav-hamburger  { display: flex; }
}