/* ═══════════════════════════════════════════════════════════
   PROJECT PAGE — shared stylesheet for all case study pages
   Matches main portfolio tokens. Hero bg set per-page via
   <style>:root{--hero-bg:#xxx}</style> in each HTML file.
   ═══════════════════════════════════════════════════════════ */
:root {
  --black:  #111111;
  --amber:  #FFC200;
  --white:  #ffffff;
  --ink:    #1a1a1a;
  --ink-2:  #444444;
  --ink-3:  #777777;
  --rule:   rgba(0,0,0,0.09);
  --col:    min(1100px, 100vw - 4rem);
  --gut:    clamp(1.5rem, 5vw, 3rem);
  --sans:   'Poppins', system-ui, sans-serif;
  --eout:   cubic-bezier(0.16, 1, 0.3, 1);
  --left-w: 220px;
  --hero-bg:#0b1a24; /* fallback — overridden per page */
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); font-size: 1rem;
  color: var(--ink); background: var(--white);
  line-height: 1.75; -webkit-font-smoothing: antialiased;
}

/* ── Lock screen ── */
.lock-screen {
  position: fixed; inset: 0;
  background: #111111;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9999;
  transform: translateY(0);
  /* Slightly longer — lock exits while page is already rising */
  transition: transform 0.80s cubic-bezier(0.76,0,0.24,1);
  will-change: transform;
}
.lock-screen::before { display: none; }
.ds-unlocked .lock-screen {
  transform: translateY(-100%);
  pointer-events: none;
}
.lock-nav {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem var(--gut);
}
.lock-back {
  display: flex; align-items: center; gap: 0.5rem;
  color: rgba(255,255,255,0.55); font-size: 0.8rem; font-weight: 500;
  text-decoration: none; transition: color 0.2s;
}
.lock-back:hover { color: var(--white); }
/* Back btn in page nav — dark grey on white nav */
.back-btn {
  display: flex; align-items: center; gap: 0.5rem;
  color: #444444; font-size: 0.82rem; font-weight: 500;
  text-decoration: none; transition: color 0.2s;
}
.back-btn:hover { color: var(--ink); }
.lock-back svg, .back-btn svg {
  width: 15px; height: 15px; stroke: currentColor;
  stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.lock-logo { font-size: 0.9rem; font-weight: 600; color: var(--amber); text-decoration: none; }
/* Logan. in page nav — red accent */
.nav-logo { font-size: 0.9rem; font-weight: 700; color: #E53E3E; text-decoration: none; letter-spacing: -0.01em; }
.nav-logo:hover { color: #C53030; }
.lock-card {
  width: min(400px, 90vw);
  text-align: center;
  background: transparent;
  border: none;
  padding: 0;
}
.lock-icon { display: none; }
.lock-title {
  font-size: 1.5rem; font-weight: 700;
  color: #ffffff; margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.lock-msg { font-size: 0.82rem; margin-bottom: 1.6rem; color: rgba(255,255,255,0.50); }
.lock-msg.error { color: #ff7070; }
.lock-input {
  width: 100%; padding: 0.85rem 1rem; margin-bottom: 0.85rem;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #ffffff; font-family: var(--sans); font-size: 0.95rem;
  outline: none; text-align: left; transition: border-color 0.2s;
}
.lock-input:focus { border-color: var(--amber); }
.lock-input::placeholder { color: rgba(255,255,255,0.28); }
.lock-btn {
  width: 100%; padding: 0.9rem; background: var(--amber); color: #111111;
  border: none; border-radius: 8px; font-family: var(--sans);
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.lock-btn:hover { background: #e6af00; transform: translateY(-1px); }
.lock-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.lock-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 1.5rem 0; }
.lock-contact { font-size: 0.78rem; color: rgba(255,255,255,0.35); line-height: 1.8; }
.lock-contact a { color: var(--amber); text-decoration: none; }
.lock-contact a:hover { text-decoration: underline; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }

/* ── Page content: sits below lock, slides up into view on unlock ── */
.page-content {
  display: block;
  position: relative;
  /* Start below and invisible — page slides up as lock lifts */
  transform: translateY(60px);
  opacity: 0;
  will-change: transform, opacity;
  /* Delay 0s — starts the moment ds-unlocked is added,
     so page begins rising as the lock screen lifts simultaneously */
  transition: transform 0.75s cubic-bezier(0.16,1,0.3,1) 0s,
              opacity   0.55s ease 0s;
}
.ds-unlocked .page-content {
  transform: translateY(0);
  opacity: 1;
}

/* ── Scroll bar ── */
.scroll-bar {
  position: fixed; top: 0; left: 0; height: 3px;
  background: var(--amber); width: 0%; z-index: 500;
  transition: width 0.08s linear;
}

/* ── Nav ── */
.project-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 0.95rem var(--gut);
}
.project-nav-inner {
  max-width: var(--col); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}

/* ── Hero ── */
.project-hero {
  background: var(--hero-bg);
  padding: calc(4rem + 64px) var(--gut) 0;
  position: relative; overflow: hidden;
}
.project-hero::after {
  content: ''; position: absolute; top: 10%; right: -5%; width: 60%; height: 60%;
  background: radial-gradient(ellipse at 80% 40%, rgba(255,194,0,0.07), transparent 65%);
  pointer-events: none;
}
.hero-inner { max-width: var(--col); margin: 0 auto; position: relative; z-index: 1; }
.prj-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 1.4rem;
}
.prj-eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--amber); flex-shrink: 0; }
.prj-title {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 700; line-height: 1.0; letter-spacing: -0.04em;
  color: var(--white); margin-bottom: 1.2rem; max-width: 840px;
}
.prj-subtitle {
  font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 300;
  color: rgba(255,255,255,0.60); line-height: 1.75;
  max-width: 660px; margin-bottom: 2.5rem;
}
.prj-meta {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 1.4rem; margin-bottom: 3.5rem;
}
.meta-item { display: flex; flex-direction: column; gap: 0.2rem; }
.meta-lbl {
  font-size: 0.60rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.meta-val { font-size: 0.86rem; font-weight: 500; color: rgba(255,255,255,0.88); }
.meta-tools { display: flex; align-items: center; gap: 0.5rem; }
.meta-tools img { height: 20px; width: auto; }
.hero-img { margin: 0 calc(0px - var(--gut)); position: relative; z-index: 1; }
.hero-img img {
  width: 100%; display: block;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.40);
}

/* ── Body / Two-column layout ── */
/* ── Body wrapper ── */
.prj-body {
  padding: 0;
  margin-bottom: 0;
}

/* ── Each section: full-bleed bg, content constrained to col ──
   Alternating mild backgrounds — warm whites, barely-there tints.
   nth-child pattern cycles through 4 colours.
   No saturated colours — just enough to delineate sections.    */
.prj-section {
  padding: 5rem var(--gut);
  background: #ffffff;
}
/* Section inner: two-column grid, constrained to col width */
.prj-section-inner {
  max-width: var(--col);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--left-w) 1fr;
  gap: 0 4rem;
}

/* All sections: white background */

/* Left: sticky label + h2 */
.sec-left {
  position: sticky;
  top: calc(56px + 2rem);
  align-self: start;
  padding-top: 0.2rem;
}
/* sec-tag hidden in all sections by default */
.sec-tag {
  display: none;
}
/* Show only in outcome section (left col is on dark bg) */
.prj-section.outcome-section .sec-tag {
  display: flex;
  font-size: 0.60rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 0.75rem;
  align-items: center; gap: 0.5rem;
}
.prj-section.outcome-section .sec-tag::before { content: ''; width: 14px; height: 2px; background: var(--amber); flex-shrink: 0; }
.sec-left h2 {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700; color: var(--ink); line-height: 1.3;
}

/* Right: content */
.sec-right { min-width: 0; }
.sec-right h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 2rem 0 0.7rem; }
.sec-right h3.first { margin-top: 0; }
.sec-right p { color: var(--ink-2); line-height: 1.88; margin-bottom: 1rem; }
.sec-right p:last-child { margin-bottom: 0; }
.sec-right ul { padding-left: 1.4rem; color: var(--ink-2); margin-bottom: 1rem; }
.sec-right ul li { margin-bottom: 0.45rem; line-height: 1.8; }
.sec-right strong { color: var(--ink); font-weight: 600; }
.lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 400; font-style: italic; color: var(--ink); line-height: 1.8; }

/* ── Images — Rich McNabb style ──────────────────────────────
   Full-bleed images with generous breathing room.
   No border, no card background — just the image with a
   clean shadow lifting it slightly off the page.
   2-up grid for side-by-side comparisons.
   4-up mosaic for gallery groupings.
   ─────────────────────────────────────────────────────── */

/* Full-width single image */
/* ── Images: all stacked single column, no shadows ──────────
   All image containers display as single-column stacks.
   img-2col, img-4up, img-3col all become single-column.
   Clean edges — no border-radius, no box-shadow.
   ──────────────────────────────────────────────────────── */
.img-full {
  margin: 2rem 0;
}
.img-full img {
  width: 100%; display: block;
  border-radius: 4px;
}

/* Stack — all multi-col variants display single column */
.img-2col,
.img-4up,
.img-3col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 2rem 0;
}
.img-2col img,
.img-4up img,
.img-3col img {
  width: 100%; display: block;
  border-radius: 4px;
}

/* Caption below any image group */
.img-caption {
  font-size: 0.78rem; color: var(--ink-3);
  margin-top: 0.6rem; text-align: center;
  font-style: italic;
}

/* AI callout — hidden */
.ai-note { display: none; }
.ai-icon { display: none; }

/* Stats */
.stats-row { display: flex; flex-wrap: wrap; gap: 3rem; padding: 1.6rem 0; margin: 1.5rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat-item { display: flex; flex-direction: column; gap: 0.15rem; }
.stat-num { font-size: 2.8rem; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.04em; }
.stat-lbl { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }

/* Insights grid */
.insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 1.5rem 0; }
.insight-item {
  background: rgba(255,194,0,0.05); border: 1px solid rgba(255,194,0,0.18);
  border-radius: 10px; padding: 0.9rem 1rem; font-size: 0.85rem; color: var(--ink); line-height: 1.55;
}

/* Pain points */
.painpoints { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 1.5rem 0; }
.pain-item {
  background: var(--white); border: 1px solid var(--rule); border-radius: 10px;
  padding: 1rem; font-size: 0.85rem; color: var(--ink-2); line-height: 1.65;
}
.pain-q { font-size: 1.8rem; font-weight: 700; color: var(--amber); line-height: 0.6; margin-bottom: 0.5rem; }

/* ── Results: full-width section, split background ──────────
   The outcome .prj-section has a black left half / white right half.
   Left half = sec-left (label + h2) on black bg, white text.
   Right half = results grid on white bg, dark text.
   Achieved with a CSS gradient on the section itself.
   ──────────────────────────────────────────────────────── */
/* ── Outcome + CTA + Footer — unified dark block at bottom ────
   outcome-section: left col #111 (label+h2 in white), right col #f6f6f4 (warm off-white, results list)
   prj-cta: full-bleed #111, content col-aligned
   footer: #111 with subtle top border
   All three flush together — no gaps, no radius, no margin between them.
   ─────────────────────────────────────────────────────────────────── */
/* ── Outcome: inline inside the last prj-section ── */
.prj-section.outcome-section {
  background: #ffffff !important;
  padding-bottom: 5rem;
  margin-bottom: 0;
}
.prj-section.outcome-section .sec-left h2 {
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* Results grid: horizontal cards spread across right column */
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: var(--rule);    /* gap colour = rule, shows between cards */
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
}
.result-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.8rem 1.5rem;
  background: #ffffff;
  text-align: left;
}
.result-num {
  display: block;
  font-size: 2rem; font-weight: 700;
  color: var(--ink); letter-spacing: -0.03em;
  line-height: 1;
}
.result-num.good { color: #1e6e2e; }
.result-desc {
  font-size: 0.78rem; font-weight: 400;
  color: var(--ink-3); line-height: 1.45;
}


/* ── Outcome inline — inside last prj-section sec-right ── */
.outcome-inline {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
.outcome-inline h3 {
  margin-top: 0;
  margin-bottom: 1.2rem;
}
/* ── Reveal animations ── */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.75s var(--eout), transform 0.75s var(--eout);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.stagger > .reveal { transition-delay: calc(var(--i, 0) * 0.08s); }
.sec-left.reveal { opacity: 0; transform: translateX(-12px); transition: opacity 0.6s var(--eout), transform 0.6s var(--eout); }
.sec-left.reveal.in-view { opacity: 1; transform: translateX(0); }

/* ── CTA: full-bleed dark, col-aligned, no radius, no margin ── */
.prj-cta {
  background: #111111;
  border-radius: 0;
  padding: 5rem var(--gut);
  text-align: left;
  margin: 0;
}
.prj-cta-inner {
  max-width: var(--col);
  margin: 0 auto;
}
.prj-cta h2 {
  color: #ffffff;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 600;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}
.prj-cta p { color: rgba(255,255,255,0.45); margin-bottom: 1.8rem; font-size: 0.92rem; }
.cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; padding: 0.9rem 2.2rem;
  background: var(--amber); color: var(--black); border-radius: 10px;
  font-weight: 600; font-size: 0.9rem; text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: #e6af00; transform: translateY(-2px); }
.btn-secondary {
  display: inline-flex; align-items: center; padding: 0.9rem 2.2rem;
  background: transparent; border: 1.5px solid rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.75); border-radius: 10px;
  font-weight: 500; font-size: 0.9rem; text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: rgba(255,255,255,0.55); color: var(--white); }

/* ── Footer: flush with CTA, same dark bg ── */
.prj-footer {
  background: #111111;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 0;
}
.prj-footer-inner {
  max-width: var(--col); margin: 0 auto;
  padding: 1.4rem var(--gut) 1.6rem;
  display: flex; align-items: center; justify-content: space-between;
}
.footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.28); }
.footer-logo img { height: 20px; opacity: 0.45; display: block; }

/* ── Mobile ── */
@media (max-width: 760px) {
  :root { --left-w: 100%; }
  .prj-section-inner { grid-template-columns: 1fr; gap: 0; }
  .sec-left { position: relative; top: auto; margin-bottom: 1.2rem; }
  /* images already stacked — nothing to override */
  .insights-grid { grid-template-columns: 1fr; }
  .painpoints { grid-template-columns: 1fr; }
  .prj-section.outcome-section { background: #ffffff !important; }
  .results-grid { grid-template-columns: 1fr 1fr; }
  .prj-title { font-size: 2.4rem; }
  .stats-row { gap: 2rem; }
  .prj-meta { gap: 1.5rem; }
}
@media (max-width: 440px) {
  /* results already single column */
}
/* ── Mobile nav for project pages ── */
@media (max-width: 860px) {
  .project-nav { padding: 0.8rem var(--gut); }
  .back-btn span { display: none; }        /* hide text, keep arrow on small screens */
}
@media (max-width: 520px) {
  .prj-title { font-size: 2rem; }
  .prj-subtitle { font-size: 0.92rem; }
  .prj-meta { flex-wrap: wrap; gap: 1rem; }
  .result-item { padding: 1.2rem 1rem; }
  .result-num { font-size: 1.5rem; }
}