/* ============================================================
   MUNTHHA — AI Transformation Strategist
   Shared design system. Editorial, neutral, cinematic.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Monochrome surfaces (Autopilot scheme) */
  --paper:    #ffffff;   /* white base */
  --cream:    #f4f4f4;   /* light grey alt */
  --ink:      #0d0d0d;   /* near-black */
  --ink-soft: #1a1a1a;

  /* Text — black on white backgrounds */
  --text:        #171717;   /* near-black on light */
  --text-mut:    #171717;   /* black (was grey) */
  --text-faint:  #171717;   /* black (was grey) */
  --on-dark:     #f4f4f4;
  --on-dark-mut: #9a9a9a;
  --on-dark-faint:#6a6a6a;

  /* Lines */
  --rule:        #e7e7e7;
  --rule-dark:   #292929;

  /* Accent — monochrome by default; gold/rose optional via Tweaks */
  --accent:      #171717;
  --accent-soft: #707070;
  --accent-deep: #000000;

  /* Type */
  --display: 'Manrope', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --sans:    'Manrope', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono:    'Manrope', system-ui, -apple-system, sans-serif;

  /* Motion — overridden by .motion-* classes */
  --reveal-y: 26px;
  --reveal-blur: 0px;
  --reveal-dur: 1.1s;
  --reveal-ease: cubic-bezier(.22,.61,.36,1);

  /* Layout */
  --maxw: 1280px;
  --gutter: clamp(22px, 5vw, 88px);
}

/* Accent variants applied to :root */
:root.accent-gold {
  --accent:      #b08d4f;
  --accent-soft: #c4a877;
  --accent-deep: #927035;
}
:root.accent-rose {
  --accent:      #c0857c;
  --accent-soft: #d2a39c;
  --accent-deep: #a26960;
}
/* Dark sections stay monochrome — light details regardless of accent */
.section.ink, .live { --accent: #f2f2f2; --accent-soft: #c8c8c8; --accent-deep: #ffffff; }

/* Motion intensity */
:root.motion-whisper   { --reveal-y: 14px; --reveal-blur: 0px; --reveal-dur: 1.3s; }
:root.motion-cinematic { --reveal-y: 30px; --reveal-blur: 3px; --reveal-dur: 1.1s; }
:root.motion-dramatic  { --reveal-y: 56px; --reveal-blur: 7px; --reveal-dur: .95s; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--paper); }

/* ---------- Type primitives ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: .9em;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--accent);
  display: inline-block;
}
.eyebrow.no-rule::before { display: none; }

.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0;
}
.lead {
  font-family: var(--sans);
  font-weight: 500;
  font-style: normal;
  line-height: 1.34;
  letter-spacing: -.01em;
}
.lead .ital, .lead em { color: var(--text-mut); font-style: normal; }
h1,h2,h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -.02em; }

.chapter-mark {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Section scaffold ---------- */
.section {
  position: relative;
  padding: clamp(90px, 13vw, 190px) var(--gutter);
}
.wrap { max-width: var(--maxw); margin: 0 auto; width: 100%; }
.section.cream { background: var(--cream); }
.section.ink {
  background: var(--ink);
  color: var(--on-dark);
}
.section.ink .eyebrow { color: var(--on-dark-mut); }
.section.ink .chapter-mark { color: var(--on-dark-faint); }

/* hairline divider between adjoining light sections */
.section + .section:not(.ink):not(.cream)::before,
.section.cream + .section:not(.ink)::before { content: none; }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============================================================
   TOP NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background .5s ease, padding .5s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
  mix-blend-mode: normal;
}
.nav.scrolled {
  background: color-mix(in oklab, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.nav-brand {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .01em;
}
.nav-brand .dot { color: var(--accent); }
.nav-links { display: flex; gap: clamp(18px, 3vw, 40px); align-items: center; }
.nav-links a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mut);
  position: relative;
  padding: 4px 0;
  transition: color .3s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--accent); transition: width .4s var(--reveal-ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  font-family: var(--sans);
  font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  background: var(--ink); border: 1px solid var(--ink); border-radius: 999px;
  padding: 11px 20px; color: var(--paper) !important;
}
.nav-cta:hover { background: #000; border-color: #000; }
.nav-cta::after { display: none; }
@media (max-width: 760px) { .nav-links .hide-sm { display: none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px var(--gutter) 130px;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* drifting accent bloom */
.hero-bloom {
  position: absolute;
  width: 70vmax; height: 70vmax;
  left: 58%; top: 26%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at center,
     rgba(0,0,0,0.045) 0%,
     transparent 60%);
  filter: blur(30px);
  opacity: .9;
  animation: bloomDrift 22s ease-in-out infinite alternate;
}
@keyframes bloomDrift {
  0%   { transform: translate(-50%,-50%) scale(1); }
  100% { transform: translate(-42%,-58%) scale(1.18); }
}
/* soft top light wash */
.hero-wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in oklab,#fff 55%, transparent), transparent 55%),
    radial-gradient(100% 70% at 80% 110%, color-mix(in oklab,var(--cream) 80%, transparent), transparent 60%);
}
/* dust motes */
.motes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mote {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: #cfcfcf;
  opacity: 0;
  animation: floatMote linear infinite;
  filter: blur(.3px);
}
@keyframes floatMote {
  0%   { opacity: 0; transform: translateY(20px) translateX(0); }
  12%  { opacity: .5; }
  88%  { opacity: .4; }
  100% { opacity: 0; transform: translateY(-120px) translateX(24px); }
}
/* grain overlay */
.grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root.no-grain .grain { display: none; }

.hero-inner { max-width: var(--maxw); margin: 0 auto; width: 100%; position: relative; z-index: 1; text-align: center; }
.hero-inner .eyebrow, .hero-inner .hero-eyebrow { justify-content: center; }
.hero-eyebrow { margin-bottom: clamp(22px, 4vw, 38px); }
.hero-name {
  font-size: clamp(64px, 13.5vw, 232px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
}
/* keep the opening scene whole on short / landscape viewports */
@media (max-height: 720px) {
  .hero { min-height: 100svh; padding-top: 96px; padding-bottom: 84px; align-items: center; }
  .hero-name { font-size: clamp(52px, 10vw, 132px); }
  .hero-statement { font-size: clamp(14px, 1.35vw, 17px); margin-top: 18px; }
  .hero-meta { margin-top: 22px; }
  .hero-eyebrow { margin-bottom: 18px; }
}
@media (max-height: 560px) {
  .hero { align-items: flex-start; }
  .hero-name { font-size: clamp(46px, 9vw, 96px); }
  .scroll-cue { display: none; }
}
.hero-name .ital { font-style: normal; color: var(--text-mut); }
.hero-statement {
  margin-top: clamp(26px, 4vw, 44px);
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.6;
  text-wrap: pretty;
  color: var(--text-mut);
}
.hero-statement .accent-word { color: var(--text); font-style: normal; font-weight: 600; }
.hero-meta {
  margin-top: clamp(30px, 5vw, 56px);
  display: flex; gap: 30px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
}
.hero-meta span { display: inline-flex; gap: 9px; align-items: center; }
.hero-meta b { color: var(--text-mut); font-weight: 400; }

/* scroll cue */
.scroll-cue {
  position: absolute; left: var(--gutter); bottom: 34px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text);
  z-index: 1;
}
.scroll-cue .line {
  width: 1px; height: 46px; background: var(--rule); position: relative; overflow: hidden;
}
.scroll-cue .line::after {
  content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background: var(--accent); animation: cueRun 2.4s ease-in-out infinite;
}
@keyframes cueRun { 0%{top:-55%} 60%,100%{top:105%} }

/* Hero layout variants (Tweaks) */
:root.hero-centered .hero-inner { text-align: center; }
:root.hero-centered .hero-eyebrow { justify-content: center; }
:root.hero-centered .hero-statement { margin-left: auto; margin-right: auto; }
:root.hero-centered .hero-meta { justify-content: center; }

:root.hero-split .hero-inner {
  display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(30px,5vw,70px); align-items: end;
}
:root.hero-split .hero-statement { margin-top: 0; align-self: end; }
@media (max-width: 880px) {
  :root.hero-split .hero-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 52px; } }
.about-portrait-wrap { position: relative; }
.about-portrait {
  width: min(420px, 100%); aspect-ratio: 1; margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 40px 90px -40px rgba(40,33,20,.45);
}
.about-portrait-ring {
  position: absolute; inset: -16px;
  border: 1px solid var(--rule); border-radius: 50%;
  pointer-events: none;
  width: min(452px, calc(100% + 32px));
  aspect-ratio: 1;
  left: 50%; transform: translateX(-50%);
}
.about-portrait-tag {
  position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%);
  background: var(--paper); border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mut); padding: 7px 15px; border-radius: 999px; white-space: nowrap;
}
.about-narrative .lead {
  font-size: clamp(24px, 3vw, 38px);
  margin: 22px 0 26px;
}
.about-narrative p {
  color: var(--text-mut); max-width: 52ch; margin: 0 0 18px;
}
.about-sign {
  margin-top: 30px;
  font-family: var(--display); font-style: normal; font-weight: 700; font-size: 26px;
  letter-spacing: -.02em;
  color: var(--text);
}

/* video embed */
.about-video {
  margin-top: clamp(34px, 5vw, 64px);
  max-width: 840px;
  margin-left: auto; margin-right: auto;
  text-align: left;
}
.video-frame {
  position: relative; aspect-ratio: 16/9; width: 100%;
  border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
}
.video-frame image-slot { width: 100%; height: 100%; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 78px; height: 78px; border-radius: 50%;
  background: color-mix(in oklab, var(--paper) 70%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rule);
  display: grid; place-items: center; pointer-events: none;
}
.video-play::after {
  content:""; width:0;height:0;
  border-left: 18px solid var(--accent);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  margin-left: 5px;
}
.video-caption {
  margin-top: 16px; display: flex; gap: 12px; align-items: baseline;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mut);
}
.video-caption .dot { color: var(--accent); }

/* ============================================================
   PROJECTS (ink section)
   ============================================================ */
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 30px; flex-wrap: wrap; margin-bottom: clamp(50px, 7vw, 90px);
}
.section-head .title {
  font-size: clamp(40px, 6vw, 78px); font-weight: 700; line-height: 1;
  letter-spacing: -.025em; max-width: 16ch;
}
.section-head .title .ital { font-style: normal; color: var(--text-mut); }
.section.ink .section-head .title .ital { color: var(--on-dark-mut); }
.section-head .aside {
  max-width: 34ch; color: var(--text-mut); font-size: 16px;
}
.section.ink .section-head .aside { color: var(--on-dark-mut); }

.projects { display: grid; gap: 1px; background: var(--rule-dark); border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); }
.project-card {
  display: grid;
  grid-template-columns: 96px 1.4fr 1fr auto;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  padding: clamp(28px, 4vw, 46px) clamp(8px, 1.5vw, 20px);
  background: var(--ink);
  position: relative;
  cursor: pointer;
  transition: background .6s var(--reveal-ease);
  overflow: hidden;
}
.project-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .55s var(--reveal-ease);
}
.project-card:hover { background: var(--ink-soft); }
.project-card:hover::before { transform: scaleY(1); }
.project-idx {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  color: var(--on-dark-faint);
}
.project-card:hover .project-idx { color: var(--accent-soft); }
.project-name {
  font-family: var(--display); font-size: clamp(30px, 4vw, 54px);
  font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--on-dark);
  transition: transform .55s var(--reveal-ease);
}
.project-card:hover .project-name { transform: translateX(10px); }
.project-desc { color: var(--on-dark-mut); font-size: 15.5px; max-width: 40ch; }
.project-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-dark-mut); border: 1px solid var(--rule-dark); border-radius: 999px;
  padding: 4px 10px;
}
.project-go {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-mut); display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  transition: color .4s ease, gap .4s var(--reveal-ease);
}
.project-go .arrow { transition: transform .5s var(--reveal-ease); }
.project-card:hover .project-go { color: var(--accent-soft); gap: 16px; }
.project-card:hover .project-go .arrow { transform: translateX(4px); }
@media (max-width: 860px) {
  .project-card { grid-template-columns: 54px 1fr; row-gap: 14px; }
  .project-card .project-go { grid-column: 1 / -1; }
  .project-card .project-desc { grid-column: 1 / -1; }
}

/* ============================================================
   CAPABILITIES
   ============================================================ */
.cap-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 720px) { .cap-grid { grid-template-columns: 1fr; } }
.cap-cell {
  background: var(--paper);
  padding: clamp(34px, 4vw, 56px);
  min-height: 280px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: background .5s ease;
}
.section.cream .cap-cell { background: var(--cream); }
.cap-cell:hover { background: color-mix(in oklab, var(--accent) 7%, var(--paper)); }
.section.cream .cap-cell:hover { background: color-mix(in oklab, var(--accent) 8%, var(--cream)); }
.cap-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--accent-deep);
  margin-bottom: auto;
}
.cap-name {
  font-family: var(--display); font-size: clamp(26px, 3vw, 40px); font-weight: 600;
  line-height: 1.04; letter-spacing: -.02em; margin: 40px 0 14px;
}
.cap-sub { margin: 0 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--text); max-width: 40ch; }
.cap-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cap-list span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--text-mut); border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}

/* ============================================================
   FEBAI
   ============================================================ */
.febai-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); align-items: center;
}
@media (max-width: 820px) { .febai-grid { grid-template-columns: 1fr; gap: 44px; } }
.febai-logo-slot {
  aspect-ratio: 16/10; border: 1px solid var(--rule); border-radius: 4px;
}
.febai-copy .lead { font-size: clamp(26px, 3.4vw, 44px); margin: 18px 0 24px; max-width: 18ch; }
.febai-copy p { color: var(--text-mut); max-width: 44ch; }
.febai-link {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--accent); padding-bottom: 5px;
  transition: gap .4s var(--reveal-ease);
}
.febai-link:hover { gap: 18px; }

/* ============================================================
   CONTACT (ink closing)
   ============================================================ */
.contact { text-align: center; }
.contact .cta-line {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(44px, 8vw, 124px); line-height: .98; letter-spacing: -.035em;
  max-width: 16ch; margin: 28px auto 0;
}
.contact .cta-line .ital { font-style: normal; color: var(--on-dark-mut); }
.contact-rows {
  margin: clamp(50px,7vw,84px) auto 0; max-width: 720px;
  border-top: 1px solid var(--rule-dark);
}
.contact-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 8px; border-bottom: 1px solid var(--rule-dark);
  font-family: var(--mono); letter-spacing: .04em;
  transition: padding-left .5s var(--reveal-ease), color .4s ease;
}
.contact-row:hover { padding-left: 22px; color: var(--accent-soft); }
.contact-row .label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-faint); }
.contact-row .val { font-size: clamp(15px, 2vw, 21px); color: var(--on-dark); }
.contact-row:hover .val { color: var(--accent-soft); }
.contact-foot {
  margin-top: clamp(54px,8vw,90px);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-faint);
}

/* ============================================================
   BUTTONS / SHARED
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 16px 30px; border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  transition: background .4s ease, color .4s ease, gap .4s var(--reveal-ease);
}
.btn:hover { background: #000; border-color: #000; color: var(--paper); gap: 18px; }
.btn.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.solid:hover { background: #000; border-color: #000; }
.btn.on-dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.on-dark:hover { background: #e6e6e6; border-color: #e6e6e6; color: var(--ink); }

/* striped placeholder */
.ph {
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--text-faint) 16%, transparent) 0 1px,
      transparent 1px 11px),
    var(--cream);
  display: grid; place-items: center;
  color: var(--text-faint);
}
.ph .ph-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  background: var(--paper); padding: 6px 13px; border: 1px solid var(--rule); border-radius: 999px;
}
.section.ink .ph { --cream: #211d17; color: var(--on-dark-faint); }
.section.ink .ph .ph-label { background: var(--ink); border-color: var(--rule-dark); }

/* ============================================================
   AI TRANSFORMATION FRAMEWORK (main page, between Work & Capabilities)
   ============================================================ */
.framework-head { max-width: 740px; margin-bottom: clamp(46px, 6vw, 78px); }
.framework-title {
  font-size: clamp(40px, 6vw, 78px); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; margin: 16px 0 0;
}
.framework-title .ital { font-style: normal; color: var(--text-mut); }
.framework-sub {
  margin-top: 22px; color: var(--text-mut);
  font-size: clamp(17px, 2vw, 21px); max-width: 48ch;
}
.framework-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (max-width: 940px) { .framework-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .framework-row { grid-template-columns: 1fr; } }
.stage {
  background: var(--paper);
  padding: clamp(26px, 2.6vw, 34px) clamp(20px, 2vw, 26px);
  min-height: 240px; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: background .5s ease;
}
.section.cream .stage { background: var(--cream); }
.stage::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--reveal-ease);
}
.stage:hover { background: color-mix(in oklab, var(--accent) 6%, var(--paper)); }
.section.cream .stage:hover { background: color-mix(in oklab, var(--accent) 7%, var(--cream)); }
.stage:hover::before { transform: scaleX(1); }
.stage-no {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--accent-deep);
}
.stage-node {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--accent); margin: 22px 0 20px;
}
.stage-name {
  font-family: var(--display); font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
}
.stage-desc {
  margin: 14px 0 0; color: var(--text-faint); font-size: 14px; line-height: 1.5;
  border-top: 1px dashed var(--rule); padding-top: 14px;
}
.framework-foot {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint);
}
.framework-foot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* clickable stage affordance */
.stage { cursor: pointer; }
.stage-open {
  margin-top: auto; padding-top: 18px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mut); display: inline-flex; align-items: center; gap: 8px;
  transition: color .3s ease, gap .4s var(--reveal-ease);
}
.stage .stage-open .arrow { transition: transform .4s var(--reveal-ease); }
.stage:hover .stage-open { color: var(--text); gap: 12px; }
.stage:hover .stage-open .arrow { transform: translateX(3px); }
.stage:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }

/* ============================================================
   ALIGN FRAMEWORK — stage drawer
   ============================================================ */
.align-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(8,8,8,.44);
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.align-backdrop.open { opacity: 1; pointer-events: auto; }
.align-drawer {
  position: fixed; top: 0; right: -700px; bottom: 0; z-index: 301;
  width: min(640px, 100%); background: var(--paper);
  transition: right .5s var(--reveal-ease);
  display: flex; flex-direction: column;
  box-shadow: -30px 0 90px -45px rgba(0,0,0,.5);
}
.align-drawer.open { right: 0; }
.align-dhead {
  padding: clamp(30px,4vw,48px) clamp(26px,4vw,52px) 24px;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.align-kicker {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-mut); margin-bottom: 16px; display: flex; gap: 12px; align-items: center;
}
.align-kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent); }
.align-kicker .n { color: var(--text); font-weight: 700; }
.align-dtitle {
  font-family: var(--display); font-size: clamp(27px,3.2vw,38px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.04;
}
.align-close {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--paper); cursor: pointer;
  display: grid; place-items: center; font-size: 16px; color: var(--text);
  transition: background .3s ease, border-color .3s ease;
}
.align-close:hover { background: var(--cream); border-color: var(--text-faint); }
.align-dbody {
  padding: clamp(26px,4vw,40px) clamp(26px,4vw,52px) clamp(44px,6vw,68px);
  overflow-y: auto; flex: 1;
}
.align-lead { font-size: 18px; line-height: 1.62; color: var(--text); margin: 0 0 26px; }
.align-defs { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 0 0 26px; }
.align-def { background: var(--paper); padding: 16px 20px; font-size: 16px; line-height: 1.55; }
.align-def .term { font-weight: 700; color: var(--text); }
.align-def .desc { color: var(--text-mut); }
.align-closing { color: var(--text-mut); font-size: 16.5px; line-height: 1.62; margin: 0 0 28px; }
.align-diagnostic {
  border-left: 3px solid var(--accent); background: var(--cream);
  padding: 22px 24px; border-radius: 0 7px 7px 0;
}
.align-diagnostic .dlabel {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-mut); margin-bottom: 11px;
}
.align-diagnostic .dq {
  font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.4;
  color: var(--text); letter-spacing: -.015em;
}
@media (max-width: 520px) { .align-drawer { width: 100%; } }
body.drawer-open { overflow: hidden; }

/* ============================================================
   HERO — two-column split (Instrument Serif + Manrope)
   ============================================================ */
.hero-inner{text-align:left}
.hero-split{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,40fr);gap:clamp(28px,4vw,72px);align-items:start}
.hero-col-text{display:grid}
.hero-layered{margin:0;display:grid;justify-items:start;line-height:1}
.hero-layered .hl-1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(30px,4.2vw,62px);letter-spacing:-.01em;line-height:1.06}
.hero-layered .hl-2{font-weight:800;font-size:clamp(56px,9.6vw,146px);letter-spacing:-.045em;line-height:.94;
  margin-top:-.02em}
.hero-layered .hl-3{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(44px,7.2vw,110px);letter-spacing:-.015em;line-height:1.0;margin-top:-.03em;margin-left:0}

.hero-inner .hero-statement{margin-top:clamp(46px,5.6vw,84px);margin-left:0;margin-right:0;max-width:62ch;
  text-align:left;font-size:clamp(14.5px,1.15vw,17px);line-height:1.68}
.hero-col-photo{display:grid;gap:12px;padding-top:clamp(6px,1vw,16px)}
.hero-photo-slot{aspect-ratio:1/1;width:100%;border-radius:clamp(18px,2.4vw,34px);overflow:hidden;background:#f1f1f1}
.hero-photo-slot img{display:block;width:100%;height:100%;object-fit:cover}
.hero-photo-slot image-slot{display:block;width:100%;height:100%}
.hero-photo-note{margin:0;font-size:12px;font-style:italic;line-height:1.5;color:var(--text-mut)}
@media(max-width:900px){
  .hero-layered .hl-2{line-height:.98;margin-top:-.01em}
  .hero-layered .hl-3{line-height:1.04;margin-top:0}
  .hero-inner .hero-statement{margin-top:26px}
  .hero-split{grid-template-columns:1fr;gap:22px}
  .hero-col-text{display:contents}
  .hero-layered{order:1}
  .hero-col-photo{order:2}
  .hero-inner .hero-statement{order:3;margin-top:4px}
  .hero-photo-slot{border-radius:16px}
}

/* ---------- opening sequence: hero → marquee → video ---------- */
.hero{min-height:0;padding-bottom:clamp(30px,4vw,56px)}
.hero-marquee{overflow:hidden;padding:clamp(10px,1.3vw,19px) 0 clamp(8px,1vw,14px)}
.mq-track{display:flex;width:max-content;animation:mqSlide 6.1s linear infinite}
.hero-marquee:hover .mq-track{animation-play-state:paused}
.mq-group{display:flex;align-items:center;flex:none}
.mq-term,.mq-sep{font-size:clamp(22px,4.2vw,60px);font-weight:300;letter-spacing:.015em;line-height:1.1;white-space:nowrap}
.mq-term{padding:0 .18em}
.mq-sep{opacity:.4}
@keyframes mqSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none}}
.hero-video{padding:clamp(14px,1.8vw,26px) var(--gutter) clamp(56px,7vw,104px)}
.hv-slot{width:100%;max-width:1180px;margin:0 auto;aspect-ratio:16/9;border-radius:clamp(14px,1.6vw,22px);
  background:#f1f1f1;display:grid;place-items:center;gap:14px;align-content:center}
.hv-play{width:clamp(48px,4.4vw,66px);aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center}
.hv-play::after{content:"";width:0;height:0;border-left:15px solid var(--text);border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:4px}
.hv-label{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8f8f8f}

/* ---------- WORK: in-page sidebar + staggered grid ---------- */
.work-split{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;
  padding-left:var(--gutter);padding-right:var(--gutter);background:var(--paper);color:var(--text)}
.work-split .wg-side{position:sticky;top:92px;display:grid;gap:24px;align-content:start;
  padding-right:clamp(16px,2vw,28px);border-right:1px solid var(--rule)}
.wg-group{display:grid;gap:7px;font-size:15px}
.wg-group+.wg-group{padding-top:20px;border-top:1px solid var(--rule)}
.wg-group-name{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8f8f8f;margin-bottom:4px}
.wg-group a{text-decoration:none;color:var(--text)}
.wg-group a:hover{color:#8f8f8f}
.work-title{margin:0 0 clamp(24px,3vw,40px)}
.wg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,42px) clamp(18px,2.2vw,34px)}
.wg-grid>.wcard:nth-child(3n+2){margin-top:clamp(28px,4vw,72px)}
.wg-grid>.wcard:nth-child(3n+3){margin-top:clamp(56px,8vw,144px)}
.wcard{display:grid;gap:12px;text-decoration:none;color:var(--text);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.wcard:hover{transform:translateY(-4px);color:var(--text)}
.wtile{position:relative;aspect-ratio:4/3;background:#f1f1f1;border-radius:6px;overflow:hidden;display:grid;align-items:center}
.ghost{position:absolute;left:-.06em;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:clamp(48px,6.6vw,96px);font-weight:800;letter-spacing:-.05em;line-height:.82;color:#e0e0e0;transition:color .35s}
.wcard:hover .ghost{color:#cfcfcf}
.tmark{position:absolute;top:14px;right:16px;font-size:10.5px;font-weight:700;letter-spacing:.18em;color:#c2c2c2}
.v-type .wtile{box-shadow:inset 0 0 0 1px #e9e9e9}
.v-type .wtile::after{content:"";position:absolute;left:16px;right:16px;bottom:16px;height:1px;background:#e2e2e2}
.wart{position:absolute;inset:0;width:100%;aspect-ratio:auto;border-radius:6px;overflow:hidden;background:#e9e9e9}
.v-art .ghost{display:none}
.wart image-slot{display:block;width:100%;height:100%}
.wart img{display:block;width:100%;height:100%;object-fit:cover}
/* Workflow canvases are far wider than the tile — contain them on their own dark ground rather than cropping to a middle slice. */
.wart.canvas{background:#1a1a1a;display:grid;place-items:center;padding:0}
.wart.canvas img{width:100%;height:100%;object-fit:contain}
.wmeta{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.wtitle{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.wyear{font-size:13px;font-weight:500;color:#8f8f8f;white-space:nowrap}
.wcat{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8f8f8f;margin-top:-4px}
@media(max-width:1100px){
  .wg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wg-grid>.wcard:nth-child(3n+3){margin-top:clamp(28px,4vw,72px)}
}
@media(max-width:900px){
  .work-split{grid-template-columns:1fr}
  .work-split .wg-side{position:static;border-right:0;border-bottom:1px solid var(--rule);padding-bottom:22px}
  .wg-grid{grid-template-columns:1fr}
  .wg-grid>.wcard{margin-top:0 !important}
}

/* ---------- Work sidebar: sticky full height, pending items, mobile drawer ---------- */
.work-split .wg-side{position:sticky;top:0;align-self:start;min-height:100vh;padding:34px clamp(16px,2vw,28px) 48px 0;
  display:grid;gap:26px;align-content:start;background:var(--paper)}
.wg-top{display:grid;gap:7px;font-size:15px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.wg-group+.wg-group{padding-top:22px}
.wg-pending{display:inline-flex;align-items:baseline;gap:8px;color:#9c9c9c;cursor:default;font-size:15px;line-height:1.45}
.wg-pending em{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#b4b4b4;border:1px solid var(--rule);border-radius:100px;padding:3px 6px 2px}
.wg-group a,.wg-top a{line-height:1.45}
.wg-group a.is-active{font-weight:700;position:relative}
.wg-group a.is-active::before{content:"";position:absolute;left:-14px;top:.62em;width:7px;height:1.5px;background:var(--text)}
.wg-toggle{display:none;align-items:center;justify-content:space-between;gap:12px;width:100%;
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text);
  background:transparent;border:1px solid var(--rule);border-radius:3px;padding:13px 15px;cursor:pointer}
.wg-toggle-i{display:grid;gap:3px}
.wg-toggle-i i{display:block;width:15px;height:1.5px;background:var(--text)}
@media(max-width:900px){
  .wg-toggle{display:flex}
  .work-split .wg-side{display:none;min-height:0;padding:22px 0;border-bottom:1px solid var(--rule)}
  .work-split .wg-side.open{display:grid}
}

.wg-standalone{display:grid;gap:7px;font-size:15px;padding-top:22px;border-top:1px solid var(--rule)}
.wg-standalone a{text-decoration:none;color:var(--text);line-height:1.45}
.wg-standalone a:hover{color:#8f8f8f}
.wg-ext{display:inline-flex;align-items:baseline;gap:6px}
.wg-ext-i{font-size:10px;color:#b0b0b0;transition:transform .25s,color .25s}
.wg-ext:hover .wg-ext-i{color:#8f8f8f;transform:translate(1px,-1px)}
.wg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}