/* ============================================================
   KOFFEESHOT CONSULTING — Global Design System
   ============================================================
   Direction: Modern Executive Luxury. Matte black / charcoal / graphite,
   brushed gold primary accent, restrained electric-blue and deep-purple
   "technology" accents used sparingly. Luxury first, technology second.

   Signature element: "The Aperture" — a thin gold arc echoing the crescent
   in the Koffeeshot mark, rotating almost imperceptibly slowly behind the
   hero frame and section dividers. It's the one recurring motif the site
   is built around — everything else stays quiet on purpose.

   Type: Fraunces (display, soft high-contrast serif — carries the luxury
   editorial feel) paired with Manrope (body/UI — clean geometric sans,
   never competes with the display face).

   Sections in this file:
   1. Tokens
   2. Base/reset + type scale
   3. Nav (incl. mobile hamburger)
   4. Buttons
   5. The Aperture (signature motif) + hero frame
   6. Hero (split layout)
   7. Glass cards / generic content patterns
   8. Process steps (Discover/Define/Design/Deliver — a real sequence)
   9. Pricing tier cards
   10. Client logo wall (case studies)
   11. Partner strip (North Pointe AI)
   12. Footer
   13. Scroll reveal + responsive
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------- 1. TOKENS ---------- */
:root {
  --black: #07060a;
  --charcoal: #121016;
  --graphite: #1c1920;
  --graphite-2: #242028;
  --line: rgba(230, 214, 181, 0.14);
  --line-soft: rgba(255, 255, 255, 0.07);

  --gold: #c7a15f;
  --gold-bright: #e6c98d;
  --gold-dim: rgba(199, 161, 95, 0.32);

  --tech-blue: #5d84b8;
  --tech-purple: #8871c2;

  --ivory: #efe9df;
  --ivory-dim: #ada89d;
  --ivory-faint: #79766e;

  --radius: 20px;
  --radius-sm: 12px;
  --max: 1200px;

  --ease-slow: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. BASE / RESET ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

section { padding: 140px 0; position: relative; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ivory);
}

h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-bright);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.section-head { max-width: 640px; margin: 0 0 64px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.14; }
.section-copy { color: var(--ivory-dim); font-size: 1.08rem; max-width: 56ch; margin-top: 20px; }
.section-head.centered .section-copy { margin-left: auto; margin-right: auto; }

/* ---------- 3. NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(7, 6, 10, 0.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 56px; width: auto; }

.nav-links {
  display: flex;
  gap: 38px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

.nav-links a { transition: color 400ms var(--ease-slow); }
.nav-links a:hover, .nav-links a.active { color: var(--gold-bright); }

.nav-cta { white-space: nowrap; }

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 9px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-menu-toggle span { display: block; height: 1px; width: 100%; background: var(--gold-bright); transition: transform 300ms var(--ease-slow), opacity 300ms var(--ease-slow); }
.mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 24px 28px;
  background: rgba(7,6,10,0.98);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu a {
  padding: 16px 4px;
  color: var(--ivory-dim);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .btn { margin-top: 14px; text-align: center; }
.mobile-menu.is-open { display: flex; }

/* ---------- 4. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 500ms var(--ease-slow), box-shadow 500ms var(--ease-slow), border-color 500ms var(--ease-slow);
  border: 1px solid transparent;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 70%);
  color: #16130c;
  box-shadow: 0 0 0 rgba(199,161,95,0);
}
.btn-gold:hover { box-shadow: 0 0 34px rgba(230, 201, 141, 0.28); transform: translateY(-2px); }

.btn-glass {
  background: rgba(255,255,255,0.03);
  border-color: var(--gold-dim);
  color: var(--ivory);
  backdrop-filter: blur(8px);
}
.btn-glass:hover { border-color: var(--gold-bright); transform: translateY(-2px); }

.btn-row { display: flex; gap: 18px; flex-wrap: wrap; }
button.btn { font-family: inherit; }

/* ---------- 5. THE APERTURE (signature motif) + hero frame ---------- */
@keyframes aperture-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes gold-sweep {
  0% { transform: translateX(-40%) translateY(-10%) rotate(8deg); opacity: 0; }
  15% { opacity: 0.5; }
  50% { opacity: 0.65; }
  85% { opacity: 0.4; }
  100% { transform: translateX(40%) translateY(10%) rotate(8deg); opacity: 0; }
}

.aperture-ring {
  position: absolute;
  inset: -8% -8% auto auto;
  width: 62%;
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  animation: aperture-rotate 70s linear infinite;
}

.hero-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gold-dim);
  box-shadow: 0 40px 100px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(230,201,141,0.16) 48%, transparent 56%);
  animation: gold-sweep 13s var(--ease-slow) infinite;
  mix-blend-mode: overlay;
}

.hero-frame-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--gold-bright);
  opacity: 0.7;
  z-index: 2;
}
.hero-frame-corner.tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.hero-frame-corner.br { bottom: 14px; right: 14px; border-left: none; border-top: none; }

/* ---------- 6. HERO (split layout) ---------- */
.hero { padding: 74px 0 120px; position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  line-height: 1.08;
  margin-bottom: 26px;
}

.hero-sub {
  font-size: 1.14rem;
  color: var(--ivory-dim);
  max-width: 50ch;
  margin-bottom: 40px;
}

.hero-visual { position: relative; }

/* Single-column hero variant for inner pages with a wide banner rather than a portrait frame */
.hero-solo .hero-frame { aspect-ratio: 16/7; }
.hero-solo .aperture-ring { width: 38%; inset: -10% -6% auto auto; opacity: 0.4; }

/* ---------- 7. GLASS CARDS / GENERIC CONTENT PATTERNS ---------- */
.glass-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  backdrop-filter: blur(6px);
  transition: border-color 500ms var(--ease-slow), transform 500ms var(--ease-slow);
}
.glass-card:hover { border-color: var(--gold-dim); transform: translateY(-3px); }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.four-col { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  margin: 0 auto;
}

.statement-panel {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 8px 0;
}
.statement-panel h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.32; }

/* ---------- 8. PROCESS STEPS (real sequence — numbering is earned here) ---------- */
.process-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2px; background: var(--line-soft); border-radius: var(--radius); overflow: hidden; }

.process-step { background: var(--charcoal); padding: 44px 32px; position: relative; }
.process-step .step-index { font-family: 'Fraunces', serif; font-style: italic; font-size: 0.95rem; color: var(--gold); margin-bottom: 22px; display: block; }
.process-step h3 { font-size: 1.4rem; margin-bottom: 12px; }
.process-step p { color: var(--ivory-dim); font-size: 0.95rem; margin: 0; }

/* ---------- 9. PRICING TIER CARDS ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }

.tier-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--charcoal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 500ms var(--ease-slow), transform 500ms var(--ease-slow);
}
.tier-card:hover { transform: translateY(-4px); }

.tier-card--featured { border-color: var(--gold-dim); box-shadow: 0 30px 80px rgba(199,161,95,0.1); }

.tier-visual { aspect-ratio: 16/10; overflow: hidden; position: relative; }
.tier-visual img { width: 100%; height: 100%; object-fit: cover; }

.tier-body { padding: 32px; display: flex; flex-direction: column; flex: 1; }
.tier-name { font-family: 'Fraunces', serif; font-size: 1.3rem; margin-bottom: 6px; }
.tier-tagline { font-size: 0.85rem; color: var(--ivory-dim); margin-bottom: 22px; }
.tier-price { font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--gold-bright); margin-bottom: 24px; }
.tier-price span { font-family: 'Manrope', sans-serif; font-size: 0.78rem; color: var(--ivory-faint); font-weight: 600; letter-spacing: 0.04em; }

.tier-features { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; flex: 1; }
.tier-features li { position: relative; padding-left: 22px; color: var(--ivory-dim); font-size: 0.92rem; }
.tier-features li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }

/* ---------- 10. CLIENT LOGO WALL (case studies) ---------- */
.logo-wall { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }

.logo-card {
  background: var(--charcoal);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px;
  transition: border-color 500ms var(--ease-slow), background 500ms var(--ease-slow), transform 500ms var(--ease-slow);
}
.logo-card:hover { border-color: var(--gold-dim); background: var(--graphite); transform: translateY(-3px); }
.logo-card img { max-height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.logo-card-name {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory-faint);
  text-align: center;
  transition: color 500ms var(--ease-slow);
}
.logo-card:hover .logo-card-name { color: var(--gold-bright); }
a.logo-card { cursor: pointer; }

/* ---------- 11. PARTNER STRIP (North Pointe AI) ---------- */
.partner-strip {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 36px 0;
}
.partner-strip .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  text-align: center;
}
.partner-strip-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}
.partner-strip img { height: 56px; width: auto; opacity: 0.9; }
.partner-strip a { display: flex; align-items: center; gap: 14px; transition: opacity 400ms var(--ease-slow); }
.partner-strip a:hover { opacity: 0.75; }

/* Force the Whop checkout iframe taller (product-*.html pages). Whop's own
   auto-resize apparently isn't growing it enough on its own, so instead of waiting
   on that, this targets the iframe by where it's guaranteed to actually be — "inside
   the element with the plan id" per Whop's own docs — rather than a guessed class
   name. !important overrides whatever height Whop's script sets inline. Doubled from
   the previous attempt per Erik's request 8/2/2026; adjust this one number if it's
   still not enough, or too much. */
[data-whop-checkout-plan-id] iframe {
  width: 100% !important;
  height: 1100px !important;
  min-height: 1100px !important;
  border: none !important;
}

/* ---------- 12. FOOTER ---------- */
footer { padding: 70px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
.footer-brand img { height: 44px; margin-bottom: 18px; }
.footer-brand p { color: var(--ivory-faint); font-size: 0.92rem; max-width: 34ch; }
.footer-col h5 { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer-col a { display: block; color: var(--ivory-dim); font-size: 0.92rem; margin-bottom: 12px; transition: color 400ms var(--ease-slow); }
.footer-col a:hover { color: var(--gold-bright); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 32px; border-top: 1px solid var(--line-soft); color: var(--ivory-faint); font-size: 0.82rem; }

/* ---------- 13. SCROLL REVEAL + RESPONSIVE ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease-slow), transform 900ms var(--ease-slow); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  section { padding: 90px 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .two-col, .three-col, .four-col, .process-row, .tier-grid { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }

  .nav-links { display: none; }
  .nav-cta { display: none; }
  .mobile-menu-toggle { display: flex; }
}

@media (max-width: 560px) {
  .logo-wall { grid-template-columns: 1fr 1fr; }
  .btn-row { flex-direction: column; align-items: stretch; }
}