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

:root {
  --ink: #0a0a0a;
  --ink2: #444;
  --ink3: #767676;
  --ink4: #aaa;
  --surface: #fafaf8;
  --s2: #f2f0eb;
  --accent: #e8562a;
  --ah: #c94420;
  --navy: #14203b;
  --teal: #00BDD6;
  --border: rgba(0,0,0,0.08);
  --r: 4px;
  --rl: 10px;
  --max: 1100px;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

html { scroll-behavior: smooth }
body { font-family: var(--sans); background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased }

.p-section-eyebrow { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem }
.p-section-title { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--ink); line-height: 1.2; margin-bottom: 1.75rem; font-weight: 600; letter-spacing: -0.01em }

/* HERO */
.p-hero { background: var(--navy); padding: 5.5rem 2rem 4rem; position: relative; overflow: hidden }
.p-hero::after { content: ''; position: absolute; top: -100px; right: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(232,86,42,0.12) 0%, transparent 60%); pointer-events: none }
.p-hero-i { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1 }
.p-eyebrow { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); margin-bottom: 1rem }
.p-hero-h1 { font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 3.2rem); color: #fff; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1.25rem; font-weight: 400 }
.p-hero-sub { font-size: 1.05rem; color: rgba(255,255,255,0.65); max-width: 620px; line-height: 1.7; margin-bottom: 2rem }
.p-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem }
.p-btn-primary { background: var(--accent); color: #fff; padding: 0.8rem 1.6rem; border-radius: var(--r); font-size: 0.92rem; font-weight: 500; text-decoration: none; transition: background 0.18s, transform 0.18s, box-shadow 0.18s; display: inline-block }
.p-btn-primary:hover { background: var(--ah); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(232,86,42,0.4) }
.p-btn-secondary { color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.2); padding: 0.8rem 1.6rem; border-radius: var(--r); font-size: 0.92rem; text-decoration: none; transition: border-color 0.18s, color 0.18s; display: inline-block }
.p-btn-secondary:hover { border-color: rgba(255,255,255,0.5); color: #fff }
.p-btn-large { padding: 1rem 2rem; font-size: 1rem }
.p-hero-proof { display: flex; gap: 2.5rem; flex-wrap: wrap }
.p-proof-item { display: flex; flex-direction: column; gap: 0.2rem }
.p-proof-num { font-family: var(--serif); font-size: 1.6rem; color: #fff; font-weight: 700; line-height: 1 }
.p-proof-lbl { font-size: 0.78rem; color: rgba(255,255,255,0.45) }

/* POST-GO-LIVE GAP */
.p-gap { background: var(--s2); padding: 5rem 2rem; border-top: 1px solid var(--border) }
.p-gap-i { max-width: var(--max); margin: 0 auto }
.p-gap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 1.75rem }
.p-gap-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl); padding: 1.5rem }
.p-gap-num { font-family: var(--serif); font-size: 0.78rem; font-weight: 700; color: var(--accent); margin-bottom: 0.6rem; letter-spacing: 0.04em }
.p-gap-head { font-size: 0.97rem; font-weight: 600; color: var(--ink); margin-bottom: 0.6rem; line-height: 1.4 }
.p-gap-body { font-size: 0.88rem; color: var(--ink2); line-height: 1.65 }
.p-gap-note { font-size: 0.92rem; color: var(--ink2); max-width: 640px; line-height: 1.65; border-left: 3px solid var(--accent); padding-left: 1rem }

/* WHAT OPSGRID ADDS */
.p-adds { background: var(--navy); padding: 5rem 2rem; border-top: 1px solid rgba(255,255,255,0.06) }
.p-adds-i { max-width: var(--max); margin: 0 auto }
.p-adds-i .p-section-eyebrow { color: rgba(255,255,255,0.4) }
.p-adds-i .p-section-title { color: #fff }
.p-adds-flow { display: flex; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2rem }
.p-adds-step { flex: 1; min-width: 140px }
.p-adds-tag { display: inline-block; padding: 0.3rem 0.65rem; border-radius: 5px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 0.6rem }
.p-adds-tag--teal { background: rgba(0,189,214,0.1); border: 1px solid rgba(0,189,214,0.25); color: var(--teal) }
.p-adds-tag--orange { background: rgba(232,86,42,0.1); border: 1px solid rgba(232,86,42,0.3); color: var(--accent) }
.p-adds-step-body { font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.6 }
.p-adds-arrow { font-size: 1rem; color: rgba(255,255,255,0.2); padding-top: 0.5rem; flex-shrink: 0 }
.p-adds-note { font-size: 0.92rem; color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--rl); padding: 1.25rem 1.5rem; line-height: 1.65 }

/* PARTNER MODEL */
.p-model { background: var(--surface); padding: 5rem 2rem; border-top: 1px solid var(--border) }
.p-model-i { max-width: var(--max); margin: 0 auto }
.p-model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem }
.p-model-card { border: 1px solid var(--border); border-radius: var(--rl); padding: 1.75rem }
.p-model-card--featured { border-color: rgba(232,86,42,0.3); background: rgba(232,86,42,0.03) }
.p-model-track { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem }
.p-model-head { font-family: var(--serif); font-size: 1.25rem; color: var(--navy); margin-bottom: 0.75rem; font-weight: 600 }
.p-model-body { font-size: 0.9rem; color: var(--ink2); line-height: 1.65; margin-bottom: 1rem }
.p-model-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.4rem }
.p-model-list li { font-size: 0.88rem; color: var(--ink2); padding-left: 1rem; position: relative }
.p-model-list li::before { content: '·'; position: absolute; left: 0; color: var(--accent) }
.p-model-fit { font-size: 0.78rem; color: var(--ink3); border-top: 1px solid var(--border); padding-top: 0.75rem; line-height: 1.5 }
.p-model-card--connect { border-color: rgba(0,189,214,0.25); background: rgba(0,189,214,0.03) }
.p-model-card--connect .p-model-track { color: var(--teal,#00BDD6) }
.p-model-links { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem }
.p-model-link-li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 600; color: #0077b5; text-decoration: none; transition: opacity 0.15s }
.p-model-link-li:hover { opacity: 0.78 }
.p-model-link-contact { font-size: 0.88rem; font-weight: 600; color: var(--accent); text-decoration: none; transition: color 0.15s }
.p-model-link-contact:hover { color: var(--ah) }

/* WHY PARTNERS ADD OPSGRID */
.p-why { background: var(--s2); padding: 5rem 2rem; border-top: 1px solid var(--border) }
.p-why-i { max-width: var(--max); margin: 0 auto }
.p-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem }
.p-why-item { padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--rl) }
.p-why-head { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem }
.p-why-body { font-size: 0.88rem; color: var(--ink2); line-height: 1.65 }

/* WHO QUALIFIES */
.p-qualify { background: var(--surface); padding: 5rem 2rem; border-top: 1px solid var(--border) }
.p-qualify-i { max-width: var(--max); margin: 0 auto }
.p-qualify-list { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1.75rem }
.p-qualify-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; color: var(--ink2) }
.p-qualify-check { color: var(--accent); font-weight: 700; flex-shrink: 0; margin-top: 0.05rem }
.p-qualify-note { font-size: 0.88rem; color: var(--ink3); line-height: 1.6 }
.p-qualify-link { color: var(--accent); text-decoration: none; font-weight: 500 }
.p-qualify-link:hover { text-decoration: underline }

/* CTA */
.p-cta { background: var(--navy); padding: 5rem 2rem; text-align: center; border-top: 1px solid rgba(255,255,255,0.06) }
.p-cta-i { max-width: 600px; margin: 0 auto }
.p-cta-title { font-family: var(--serif); font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: #fff; margin-bottom: 0.8rem; font-weight: 400 }
.p-cta-body { font-size: 0.95rem; color: rgba(255,255,255,0.6); line-height: 1.7; margin-bottom: 1.75rem }
.p-cta-note { font-size: 0.8rem; color: rgba(255,255,255,0.35); margin-top: 1rem }

/* FOOTER */
footer { background: #080808; color: rgba(255,255,255,0.45); padding: 3rem 2rem }
.foot-i { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem }
.foot-logo { font-family: var(--serif); font-size: 1.1rem; color: rgba(255,255,255,0.8); text-decoration: none; display: block; margin-bottom: 0.8rem }
.foot-logo span { color: var(--accent) }
.foot-tag { font-size: 0.8rem; line-height: 1.6 }
.foot-col h5 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.25); margin-bottom: 1rem; font-weight: 400 }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem }
.foot-col a { font-size: 0.8rem; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s }
.foot-col a:hover { color: rgba(255,255,255,0.8) }
.foot-btm { max-width: var(--max); margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: space-between; font-size: 0.73rem; color: rgba(255,255,255,0.2); flex-wrap: wrap; gap: 0.5rem }
.foot-btm a { color: rgba(255,255,255,0.55); text-decoration: none }
.foot-btm a:hover { color: rgba(255,255,255,0.85) }

/* RESPONSIVE */
@media (max-width: 900px) {
  .p-gap-grid { grid-template-columns: 1fr }
  .p-model-grid { grid-template-columns: 1fr }
  .p-why-grid { grid-template-columns: 1fr }
  .foot-i { grid-template-columns: 1fr 1fr }
}
@media (max-width: 700px) {
  .p-hero { padding: 3.5rem 1.25rem 3rem }
  .p-hero-proof { gap: 1.5rem }
  .p-adds-flow { flex-direction: column }
  .p-adds-arrow { display: none }
  .p-gap, .p-adds, .p-model, .p-why, .p-qualify, .p-cta { padding: 3rem 1.25rem }
}
@media (max-width: 600px) {
  .foot-i { grid-template-columns: 1fr }
}