@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@200;300;400;500&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --abyss:     #0F1D2C;
  --chamber:   #1C3347;
  --meridian:  #2D4A62;
  --parchment: #C8B99A;
  --signal:    #A5281C;
  --linen:     #F2EDE6;
  --white:     #FFFFFF;
  --tod:       rgba(242,237,230,0.92);
  --tod-mid:   rgba(242,237,230,0.50);
  --tod-low:   rgba(242,237,230,0.28);
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--linen); color: var(--abyss); overflow-x: hidden; }
section { scroll-margin-top: 68px; }
a { text-decoration: none; }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 68px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 5vw;
  background: rgba(15,29,44,0.97);
  border-bottom: 1px solid rgba(200,185,154,0.1);
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo-bar { width: 3px; height: 28px; background: var(--signal); flex-shrink: 0; }
.nav-logo-wordmark { padding-left: 10px; }
.nav-logo-text { font-family: var(--serif); font-size: 20px; font-style: italic; font-weight: 400; color: var(--linen); letter-spacing: 4px; display: block; }
.nav-logo-sub { font-family: var(--sans); font-size: 8px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: var(--parchment); display: block; margin-top: -1px; }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a { font-size: 12px; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tod-mid); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--linen); }
.nav-cta { font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); text-decoration: none; border-bottom: 1px solid var(--signal); padding-bottom: 2px; transition: opacity 0.2s; }
.nav-cta:hover { opacity: 0.7; }

/* SHARED */
.btn-primary { padding: 13px 30px; background: var(--abyss); color: var(--linen); font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: background 0.2s; }
.btn-primary:hover { background: var(--chamber); color: var(--linen); }
.btn-primary-light { padding: 13px 30px; background: var(--linen); color: var(--abyss); font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: opacity 0.2s; }
.btn-primary-light:hover { opacity: 0.85; }
.btn-link { font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); text-decoration: none; border-bottom: 1px solid var(--signal); padding-bottom: 2px; transition: opacity 0.2s; }
.btn-link:hover { opacity: 0.7; }
.section-eyebrow { font-size: 10px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 16px; display: block; }
.section-headline { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.28; }
.section-rule { width: 36px; height: 2px; background: var(--signal); margin: 16px 0 20px; }
.section-sub { font-size: 15px; font-weight: 300; line-height: 1.8; max-width: 680px; }

/* HERO */
.hero { min-height: 100vh; background: var(--linen); display: flex; align-items: center; padding: 120px 5vw 80px; position: relative; overflow: hidden; }
.hero-watermark { position: absolute; right: -1vw; top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: clamp(100px, 16vw, 200px); font-style: italic; color: rgba(15,29,44,0.04); pointer-events: none; user-select: none; line-height: 1; white-space: nowrap; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1280px; width: 100%; }
.hero-eyebrow { font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--meridian); margin-bottom: 24px; }
.hero-headline { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(34px, 4.2vw, 56px); color: var(--abyss); line-height: 1.22; }
.hero-rule { width: 40px; height: 2px; background: var(--signal); margin: 22px 0 24px; }
.hero-sub { font-size: 15px; font-weight: 300; color: var(--meridian); line-height: 1.82; max-width: 420px; margin-bottom: 44px; }
.hero-actions { display: flex; gap: 24px; align-items: center; }
.hero-right { background: var(--abyss); padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.hero-outcome-label { font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--parchment); margin-bottom: 20px; }
.hero-outcome-text { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.2vw, 30px); color: var(--linen); line-height: 1.55; margin-bottom: 32px; }
.hero-outcome-rule { width: 36px; height: 2px; background: var(--signal); margin-bottom: 32px; }
.hero-metrics { display: flex; flex-direction: column; gap: 0; }
.hero-metric { padding: 14px 0; border-top: 1px solid rgba(200,185,154,0.1); display: flex; justify-content: space-between; align-items: center; }
.hm-label { font-size: 11px; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tod-mid); }
.hm-value { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--parchment); }

/* PROBLEM STRIP */
.problem-strip { background: var(--abyss); padding: 72px 5vw; }
.problem-strip-header { max-width: 1280px; margin-bottom: 36px; }
.problem-strip-inner { max-width: 1280px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; }
.ps-item { background: rgba(255,255,255,0.03); padding: 32px 28px; }
.ps-num { font-family: var(--serif); font-size: 20px; font-style: italic; color: rgba(200,185,154,0.25); margin-bottom: 12px; }
.ps-title { font-size: 14px; font-weight: 500; color: var(--linen); margin-bottom: 8px; }
.ps-body { font-size: 13px; font-weight: 300; color: var(--tod-mid); line-height: 1.72; }

/* SERVICES */
.services { background: var(--linen); padding: 110px 5vw; }
.services-header { margin-bottom: 60px; width: 100%; }
.services-header .section-headline { font-size: clamp(28px, 3.5vw, 48px); }
.services-header .section-sub { max-width: 100%; font-size: clamp(16px, 1.8vw, 22px); font-weight: 300; line-height: 1.6; color: var(--meridian); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.service-card { background: var(--white); padding: 40px 32px 36px; position: relative; overflow: hidden; transition: background 0.3s; }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; transition: background 0.3s; }
.service-card:hover::before { background: var(--signal); }
.service-card:hover { background: var(--abyss); }
.service-card:hover .sc-num { color: rgba(200,185,154,0.1); }
.service-card:hover .sc-title { color: var(--linen); }
.service-card:hover .sc-body { color: var(--tod-mid); }
.service-card:hover .sc-item { color: var(--tod-mid); }
.service-card:hover .sc-footer { border-top-color: rgba(200,185,154,0.1); }
.service-card:hover .sc-price { color: var(--parchment); }
.sc-num { font-family: var(--serif); font-style: italic; font-size: 48px; color: rgba(15,29,44,0.07); line-height: 1; margin-bottom: 20px; transition: color 0.3s; }
.sc-title { font-size: 15px; font-weight: 500; color: var(--abyss); margin-bottom: 12px; transition: color 0.3s; }
.sc-body { font-size: 13px; font-weight: 300; color: var(--meridian); line-height: 1.75; margin-bottom: 22px; transition: color 0.3s; }
.sc-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.sc-item { font-size: 12px; font-weight: 300; color: var(--meridian); padding-left: 14px; position: relative; line-height: 1.5; transition: color 0.3s; }
.sc-item::before { content: '—'; position: absolute; left: 0; font-size: 10px; color: var(--signal); top: 2px; }
.sc-footer { border-top: 1px solid rgba(15,29,44,0.08); padding-top: 20px; transition: border-color 0.3s; }
.sc-price { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--abyss); transition: color 0.3s; }

/* POSITIONING */
.positioning { background: var(--chamber); padding: 110px 5vw; }
.pos-header { margin-bottom: 60px; }
.pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 60px; }
.pos-card { background: rgba(255,255,255,0.04); padding: 36px 28px; transition: background 0.2s; }
.pos-card:hover { background: rgba(255,255,255,0.07); }
.pos-vs { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tod-low); margin-bottom: 10px; }
.pos-entity { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--linen); margin-bottom: 14px; }
.pos-them { font-size: 13px; font-weight: 300; color: var(--tod-mid); line-height: 1.72; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.pos-us-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--parchment); margin-bottom: 8px; }
.pos-us { font-size: 13px; font-weight: 300; color: var(--tod-mid); line-height: 1.72; }
.pos-statement { border-top: 1px solid rgba(200,185,154,0.1); padding-top: 52px; text-align: center; }
.pos-stmt-text { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.4vw, 30px); color: var(--linen); line-height: 1.7; }
.pos-stmt-rule { width: 36px; height: 2px; background: var(--signal); margin: 20px auto 0; }

/* CASE STUDIES */
.cases { background: var(--linen); padding: 110px 5vw; }
.cases-header { margin-bottom: 60px; }
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.case-card { background: var(--white); padding: 40px 32px 36px; display: flex; flex-direction: column; justify-content: space-between; transition: background 0.3s; position: relative; overflow: hidden; }
.case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; transition: background 0.3s; }
.case-card:hover::before { background: var(--signal); }
.case-card:hover { background: var(--abyss); }
.case-card:hover .case-type { color: var(--parchment); }
.case-card:hover .case-client { color: var(--linen); }
.case-card:hover .case-challenge-label { color: var(--parchment); }
.case-card:hover .case-challenge { color: var(--tod-mid); }
.case-card:hover .case-outcome-label { color: var(--parchment); }
.case-card:hover .case-outcome { color: var(--tod-mid); }
.case-card:hover .case-result { color: var(--parchment); border-top-color: rgba(200,185,154,0.15); }
.case-card:hover .case-divider { border-color: rgba(200,185,154,0.12); }
.case-type { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--meridian); margin-bottom: 14px; transition: color 0.3s; }
.case-client { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--abyss); line-height: 1.3; margin-bottom: 20px; transition: color 0.3s; }
.case-divider { border: none; border-top: 1px solid rgba(15,29,44,0.08); margin: 0 0 20px; transition: border-color 0.3s; }
.case-challenge-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); margin-bottom: 6px; transition: color 0.3s; }
.case-challenge { font-size: 13px; font-weight: 300; color: var(--meridian); line-height: 1.7; margin-bottom: 18px; transition: color 0.3s; }
.case-outcome-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--meridian); margin-bottom: 6px; transition: color 0.3s; }
.case-outcome { font-size: 13px; font-weight: 300; color: var(--meridian); line-height: 1.7; margin-bottom: 24px; transition: color 0.3s; }
.case-result { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--abyss); border-top: 1px solid rgba(15,29,44,0.08); padding-top: 18px; transition: color 0.3s; }

/* MID CTA */
.mid-cta { background: var(--signal); padding: 72px 5vw; text-align: center; }
.mid-cta-text { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.8vw, 36px); color: var(--white); line-height: 1.4; margin-bottom: 32px; max-width: 640px; margin-left: auto; margin-right: auto; }
.mid-cta-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* ICP */
.icp { background: var(--abyss); padding: 110px 5vw; }
.icp-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; max-width: 1280px; }
.icp-body { font-size: 15px; font-weight: 300; color: var(--tod-mid); line-height: 1.82; }
.icp-body + .icp-body { margin-top: 16px; }
.trigger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }
.trigger-tag { background: rgba(255,255,255,0.05); color: var(--tod-mid); padding: 11px 14px; font-size: 12px; font-weight: 300; letter-spacing: 0.04em; text-align: center; border: 1px solid rgba(200,185,154,0.1); }
.icp-card { background: var(--chamber); padding: 40px 36px; border-left: 3px solid var(--signal); }
.icp-card-title { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--linen); margin-bottom: 28px; }
.icp-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(200,185,154,0.08); gap: 16px; }
.icp-param { font-size: 12px; font-weight: 300; letter-spacing: 0.04em; color: var(--tod-mid); white-space: nowrap; }
.icp-value { font-size: 12px; font-weight: 500; color: var(--linen); text-align: right; }

/* INSIGHTS */
.insights { background: var(--linen); padding: 110px 5vw; }
.insights-header { margin-bottom: 52px; }
.insights-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2px; }
.insight-featured { background: var(--abyss); padding: 44px 40px; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; }
.insight-card { background: var(--white); padding: 32px 28px; display: flex; flex-direction: column; justify-content: space-between; transition: background 0.2s; }
.ins-type { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--parchment); margin-bottom: 16px; }
.ins-type-dark { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--meridian); margin-bottom: 16px; }
.ins-title { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--linen); line-height: 1.45; }
.ins-title-sm { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--abyss); line-height: 1.45; }
.ins-meta { margin-top: 20px; }
.ins-date { font-size: 11px; font-weight: 300; letter-spacing: 0.06em; color: var(--tod-low); margin-bottom: 10px; }
.ins-date-light { font-size: 11px; font-weight: 300; letter-spacing: 0.06em; color: rgba(15,29,44,0.35); margin-bottom: 10px; }
.ins-rule { width: 28px; height: 1.5px; background: var(--signal); }
.insights-more { margin-top: 36px; text-align: right; }

/* INSIGHTS LIST PAGE */
.insights-list { background: var(--linen); padding: 120px 5vw 110px; }
.insights-list-header { margin-bottom: 60px; max-width: 1280px; }
.insights-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: 1280px; }
.insight-list-card { background: var(--white); padding: 36px 32px; display: flex; flex-direction: column; justify-content: space-between; transition: background 0.3s; position: relative; }
.insight-list-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: transparent; transition: background 0.3s; }
.insight-list-card:hover::before { background: var(--signal); }
.insight-list-card:hover { background: var(--abyss); }
.insight-list-card:hover .ilc-type { color: var(--parchment); }
.insight-list-card:hover .ilc-title { color: var(--linen); }
.insight-list-card:hover .ilc-excerpt { color: var(--tod-mid); }
.insight-list-card:hover .ilc-date { color: var(--tod-low); }
.insight-list-card:hover .ilc-read { color: var(--parchment); border-color: var(--parchment); }
.ilc-type { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--meridian); margin-bottom: 14px; transition: color 0.3s; }
.ilc-title { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--abyss); line-height: 1.35; margin-bottom: 14px; transition: color 0.3s; }
.ilc-excerpt { font-size: 13px; font-weight: 300; color: var(--meridian); line-height: 1.72; margin-bottom: 24px; transition: color 0.3s; }
.ilc-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(15,29,44,0.08); padding-top: 16px; }
.ilc-date { font-size: 11px; font-weight: 300; color: rgba(15,29,44,0.35); transition: color 0.3s; }
.ilc-read { font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); border-bottom: 1px solid var(--signal); padding-bottom: 1px; transition: color 0.3s, border-color 0.3s; }

/* ARTICLE PAGE */
.article-page { background: var(--linen); padding: 120px 5vw 110px; }
.article-inner { max-width: 780px; margin: 0 auto; }
.article-type { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--meridian); margin-bottom: 20px; display: block; }
.article-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.5vw, 46px); color: var(--abyss); line-height: 1.2; margin-bottom: 0; }
.article-rule { width: 36px; height: 2px; background: var(--signal); margin: 20px 0 24px; }
.article-meta { font-size: 12px; font-weight: 300; color: var(--meridian); margin-bottom: 52px; letter-spacing: 0.04em; }
.article-body { font-size: 16px; font-weight: 300; color: var(--abyss); line-height: 1.9; }
.article-body h2 { font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--abyss); margin: 48px 0 16px; font-weight: 400; }
.article-body h3 { font-size: 16px; font-weight: 500; color: var(--abyss); margin: 32px 0 12px; letter-spacing: 0.02em; }
.article-body p { margin-bottom: 24px; }
.article-body ul { margin: 0 0 24px 20px; }
.article-body li { margin-bottom: 8px; line-height: 1.8; }
.article-body blockquote { border-left: 3px solid var(--signal); padding-left: 28px; margin: 36px 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--chamber); line-height: 1.65; }
.article-back { margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(15,29,44,0.1); }

/* ABOUT */
.about { background: var(--chamber); padding: 110px 5vw; }
.about-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 80px; align-items: start; max-width: 1280px; }
.about-name { font-family: var(--serif); font-style: italic; font-size: 42px; color: var(--linen); line-height: 1.15; }
.about-rule { width: 36px; height: 2px; background: var(--signal); margin: 18px 0; }
.about-role { font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--parchment); margin-bottom: 32px; }
.about-body { font-size: 16px; font-weight: 300; color: var(--tod-mid); line-height: 1.9; }
.about-body + .about-body { margin-top: 18px; }
.about-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 44px; }
.about-metric { background: rgba(255,255,255,0.04); padding: 22px 20px; }
.am-num { font-family: var(--serif); font-style: italic; font-size: 32px; color: var(--parchment); line-height: 1; margin-bottom: 6px; }
.am-label { font-size: 11px; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tod-low); }
.about-credentials { display: flex; flex-direction: column; }
.about-cred-title { font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--parchment); margin-bottom: 20px; }
.cred { padding: 16px 0; border-top: 1px solid rgba(200,185,154,0.1); display: flex; gap: 14px; }
.cred-dot { width: 4px; height: 4px; background: var(--signal); flex-shrink: 0; margin-top: 7px; }
.cred-text { font-size: 13px; font-weight: 300; color: var(--tod-mid); line-height: 1.72; }

/* CONTACT */
.contact { background: var(--linen); padding: 120px 5vw; text-align: center; }
.contact-eyebrow { font-size: 10px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--meridian); margin-bottom: 20px; display: block; }
.contact-headline { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.8vw, 48px); color: var(--abyss); line-height: 1.3; }
.contact-rule { width: 36px; height: 2px; background: var(--signal); margin: 20px auto 22px; }
.contact-sub { font-size: 15px; font-weight: 300; color: var(--meridian); max-width: 440px; margin: 0 auto 48px; line-height: 1.8; }
.contact-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* FOOTER */
footer { background: var(--abyss); padding: 36px 5vw; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(200,185,154,0.08); }
.footer-logo { display: flex; align-items: center; text-decoration: none; }
.footer-logo-bar { width: 2px; height: 22px; background: var(--signal); }
.footer-logo-text { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--linen); letter-spacing: 4px; padding-left: 9px; }
.footer-mid { font-size: 11px; font-weight: 300; letter-spacing: 0.06em; color: var(--tod-low); }
.footer-right { font-size: 11px; font-weight: 300; letter-spacing: 0.08em; color: var(--tod-low); }

@media (max-width: 960px) {
  .hero-inner, .icp-layout, .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-watermark { display: none; }
  .services-grid, .pos-grid, .cases-grid, .problem-strip-inner, .insights-list-grid { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .trigger-grid, .about-metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  footer { flex-direction: column; gap: 10px; text-align: center; }
  .about-metrics { grid-template-columns: 1fr 1fr; }
}