/* ============================================================
   Lynn Bakshi - Portfolio
   Design system: warm cream paper · warm ink · lime funk
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Josefin+Sans:wght@400;500;600;700&display=swap');

:root {
  /* warm neutrals */
  --paper:      #FEFDFB;
  --paper-deep: #F6F3EC;
  --card:       #F8F5EE;
  --ink:        #16140E;
  --ink-soft:   #6A6356;
  --ink-line:   #EBE6DA;
  /* funk */
  --lime:       #C6FF00;
  --lime-deep:  #AEE000;

  --font-display: 'Hanken Grotesk', sans-serif;
  --font-body:    'Hanken Grotesk', sans-serif;
  --font-mono:    'Josefin Sans', sans-serif;

  --maxw: 1320px;
  --gutter: clamp(28px, 6vw, 96px);
  --radius: 18px;

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

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--lime); color: var(--ink); }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: color-mix(in oklab, var(--paper) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--ink-line); }
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 22px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
.brand {
  font-family: var(--font-display);
  font-weight: 700; font-size: 19px; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 9px;
}
.brand__logo {
  position: relative; height: 44px; width: auto; display: block;
  transition: transform .3s var(--ease);
}
.brand__logo img {
  height: 44px; width: auto; display: block;
}
.brand__logo img:last-child {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease);
}
.brand:hover .brand__logo img:last-child { opacity: 1; }
.brand:hover .brand__logo { transform: rotate(-6deg) scale(1.05); }
@keyframes logoWiggle {
  0%   { transform: rotate(0deg) scale(1.04); }
  25%  { transform: rotate(-5deg) scale(1.04); }
  50%  { transform: rotate(0deg) scale(1.04); }
  75%  { transform: rotate(5deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1.04); }
}
.brand__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 var(--lime-deep);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--lime) 70%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__link {
  font-size: 14.5px; font-weight: 500;
  padding: 8px 14px; border-radius: 100px;
  position: relative; transition: color .2s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__link:hover::after, .nav__link.active::after { transform: scaleX(1); }
.nav__cta {
  font-size: 14.5px; font-weight: 600;
  padding: 9px 18px; border-radius: 100px;
  background: transparent; border: 1px solid color-mix(in oklab, var(--ink) 32%, transparent); color: var(--ink-soft);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav__cta:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.nav__burger { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 100px;
  border: 1.5px solid var(--ink);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  cursor: pointer; background: transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn--fill { background: var(--ink); color: var(--paper); }
.btn--fill:hover { background: #000; }
.btn--lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--lime-deep); border-color: var(--lime-deep); }
.btn__arrow { transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translate(3px,-3px); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ---------- marquee ---------- */
.marquee {
  background: var(--lime); color: var(--ink);
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  overflow: hidden; white-space: nowrap; padding: 14px 0;
}
.marquee__track { display: inline-flex; gap: 28px; will-change: transform; animation: marquee 26s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 28px;
}
.marquee__star { color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- footer ---------- */
.footer { background: var(--paper); color: var(--ink); padding: clamp(40px,5vw,64px) 0 36px; border-top: 1px solid var(--ink-line); }
.footer a { color: var(--ink); }
.footer__cols {
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start;
}
.footer__brand { order: 3; margin-left: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer__logo img { height: 90px; width: auto; display: block; opacity: .92; transform-origin: center bottom; transition: transform .3s var(--ease); }
.footer__logo:hover img { animation: logoWiggle 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .footer__logo:hover img { animation: none; transform: scale(1.04); }
}
.footer__meta { color: var(--ink-soft); font-size: 13px; }
@media (max-width: 640px) {
  .footer__cols { gap: 30px 22px; }
  .footer__social { flex: 1 1 0; min-width: 0; }
  .footer__brand { order: 3; width: 100%; margin: 4px 0 0; flex-direction: row; align-items: center; gap: 14px; }
  .footer__logo img { height: 56px; }
  .footer__meta { text-align: left; }
}
.footer__social { display: flex; flex-direction: column; gap: 10px; }
.footer__social a { width: fit-content; position: relative; font-size: 16px; transition: color .25s var(--ease); }
.footer__social a::after { content: "\2197\FE0E"; margin-left: 6px; opacity: .45; transition: transform .25s var(--ease); display: inline-block; }
.footer__social a:hover { color: var(--ink-soft); }
.footer__social a:hover::after { transform: translate(2px,-2px); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .nav__links { position: fixed; inset: 0 0 auto 0; top: 60px;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--paper); padding: 18px var(--gutter) 26px;
    border-bottom: 1px solid var(--ink-line);
    transform: translateY(-120%); transition: transform .4s var(--ease); }
  .nav__links.open { transform: none; }
  .nav__link, .nav__cta { width: 100%; font-size: 18px; padding: 12px 0; }
  .nav__cta { text-align: center; margin-top: 8px; }
  .nav__burger { display: flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
  .nav__burger span { width: 24px; height: 2px; background: var(--ink); transition: .3s var(--ease); }
  .nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger.open span:nth-child(2) { opacity: 0; }
  .nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   PROJECT DETAIL PAGES
   ============================================================ */
.back { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14.5px;
        padding: 26px 0 0; transition: gap .25s var(--ease); }
.back:hover { gap: 13px; }

.pj-head { padding: clamp(20px,4vw,40px) 0 clamp(36px,5vw,56px); }
.pj-cat { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; }
.pj-cat .swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--lime); }
.pj-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
            font-size: clamp(44px, 6vw, 64px); line-height: 0.95; margin: 0; }
.pj-lead { max-width: 72ch; font-size: 18px; line-height: 1.45; margin-top: 4px; }

.pj-info { display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,64px); margin-top: clamp(32px,5vw,56px);
           padding-top: 26px; border-top: 1px solid var(--ink-line); }
.pj-info__group { display: flex; flex-direction: column; gap: 12px; }
.pj-info__k { color: var(--ink-soft); }
.pj-info__balloons { display: flex; flex-wrap: wrap; gap: 9px; }
.balloon { font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; padding: 11px 17px; border-radius: 100px;
           background: var(--card); border: 1px solid var(--ink-line); }

/* media placeholders */
.ph { position: relative; border-radius: var(--radius); overflow: hidden;
      background: repeating-linear-gradient(45deg, #DCD6C8 0 2px, transparent 2px 13px), #D5CEBE;
      border: 1px solid var(--ink-line); display: grid; place-items: center; }
.ph__label { text-align: center; color: var(--ink-soft); }
.ph__label .ico { width: 30px; height: 30px; margin: 0 auto 9px; opacity: .5; }
.ph--hero { aspect-ratio: 16/9; }
.ph--tall { aspect-ratio: 4/5; }
.ph--wide { aspect-ratio: 16/9; }
.ph--square { aspect-ratio: 1/1; }
.ph--phone { aspect-ratio: 9/16; max-width: 320px; margin-inline: auto; }
.ph.dark { background: repeating-linear-gradient(45deg,#2A2820 0 2px, transparent 2px 13px), #221F18; border-color:#2E2B22; }
.ph.dark .ph__label { color: rgba(255,255,255,.45); }
.ph.lime { background: repeating-linear-gradient(45deg, var(--lime-deep) 0 2px, transparent 2px 13px), var(--lime); border-color: var(--lime-deep); }
.ph.lime .ph__label { color: color-mix(in oklab, var(--ink) 70%, transparent); }

/* interactive prototype embed */
.proto { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink-line);
         background: #0E1320; box-shadow: 0 30px 70px -40px rgba(0,0,0,.5); }
.proto__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 11px 16px;
              background: var(--card); border-bottom: 1px solid var(--ink-line); }
.proto__dots { display: inline-flex; gap: 7px; }
.proto__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-line); }
.proto__dots i:nth-child(1){ background:#E5806B; } .proto__dots i:nth-child(2){ background:#E5C15A; } .proto__dots i:nth-child(3){ background:#7FB98A; }
.proto__url { grid-column: 2; flex: none; text-align: center; color: var(--ink-soft); }
.proto__open { grid-column: 3; justify-self: end; }
.proto__open { color: var(--ink); border: 1px solid var(--ink-line); border-radius: 100px; padding: 6px 12px;
               transition: border-color .2s var(--ease), background .2s var(--ease); }
.proto__open:hover { border-color: var(--ink); background: var(--paper); }
.proto__stage { position: relative; aspect-ratio: 16/10; background: #0E1320; }
.proto__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* "click to explore" activation overlay - signals the embed is live, not a screenshot */
.proto__activate { position: absolute; inset: 0; z-index: 3; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: color-mix(in oklab, #0E1320 38%, transparent);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  transition: opacity .5s var(--ease), visibility .5s var(--ease); }
.proto__activate.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.proto__activate-card { display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 30px; border-radius: 16px; background: var(--paper);
  box-shadow: 0 20px 50px -20px rgba(14,19,32,.55); transform: translateY(0);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.proto__activate:hover .proto__activate-card { transform: translateY(-3px); box-shadow: 0 26px 60px -22px rgba(14,19,32,.6); }
.proto__activate-cursor { width: 42px; height: 42px; margin-bottom: 6px; color: var(--ink);
  display: grid; place-items: center; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 0 rgba(198,255,0,.6); animation: protoPulse 2s var(--ease) infinite; }
.proto__activate-cursor svg { width: 20px; height: 20px; transform: none; }
.proto__activate-txt { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.proto__activate-txt strong { color: inherit; }
.proto__activate-sub { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); }
@keyframes protoPulse { 0% { box-shadow: 0 0 0 0 rgba(198,255,0,.55); } 70% { box-shadow: 0 0 0 14px rgba(198,255,0,0); } 100% { box-shadow: 0 0 0 0 rgba(198,255,0,0); } }
.proto__cap { display: flex; align-items: center; justify-content: center; gap: 9px;
              padding: 13px; background: var(--card); border-top: 1px solid var(--ink-line); color: var(--ink-soft); }
.proto__live { display: inline-block; vertical-align: middle; margin-right: 8px; margin-bottom: 2px;
               width: 8px; height: 8px; border-radius: 50%; background: #A6E22E;
               box-shadow: 0 0 0 0 rgba(166,226,46,.6); animation: pulse 2.4s var(--ease) infinite; }
@media (max-width: 640px){ .proto__stage { aspect-ratio: 3/4; } .proto__url { display:none; } }

/* phone-prototype variant - app sits centered on its own backdrop */
.proto--phone { max-width: 660px; margin-inline: auto; }
.proto--phone .proto__stage { aspect-ratio: 5/4; background: radial-gradient(120% 120% at 50% 0%, #f3f1ec 0%, #e2e0da 100%); overflow: hidden; }
/* parent-controlled scaling - the embedded app's own fit script doesn't run in this context,
   so we give the iframe a fixed logical surface and scale it to fit the stage (never crops) */
.proto--phone .proto__frame { inset: auto; top: 50%; left: 50%; width: 440px; height: 940px;
  transform: translate(-50%,-50%) scale(var(--gscale, 1)); transform-origin: center; }
@media (max-width: 640px){ .proto--phone .proto__stage { aspect-ratio: 3/4; } }

/* flow animation grid */
.anim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px,3vw,32px); margin-top: clamp(28px,4vw,44px); }
.anim { margin: 0; }
.anim__stage { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink-line);
  aspect-ratio: 4/3; background: radial-gradient(120% 120% at 50% 0%, #f3f1ec 0%, #e2e0da 100%);
  box-shadow: 0 18px 50px -34px rgba(0,0,0,.4); }
.anim__stage iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.anim__stage:has(.ph__label) { display: grid; place-items: center; }
.feature__stage:has(.ph__label) { display: grid; place-items: center; }
.anim__cap { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(16px,1.6vw,20px); letter-spacing: -0.01em; }
.anim__n { color: var(--ink-soft); }
@media (max-width: 760px){ .anim-grid { grid-template-columns: 1fr; } }

/* problem / solution - side by side */
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.5vw,28px); }
.ps-col { border: 1px solid var(--ink-line); border-radius: var(--radius); padding: clamp(24px,3vw,38px);
  background: var(--paper); }
.ps-col--accent { background: var(--card); }
.ps-h { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(22px,2.6vw,32px); line-height: 1.05; margin: 14px 0 0; }
.ps-body { font-size: clamp(15px,1.4vw,17px); line-height: 1.55; color: var(--ink-soft); margin-top: 12px; }
@media (max-width: 700px){ .ps-grid { grid-template-columns: 1fr; } }

/* signature feature - hold & reserve */
.feature { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px,4vw,60px); align-items: center;
  background: var(--card); border: 1px solid var(--ink-line); border-radius: calc(var(--radius) + 6px);
  padding: clamp(28px,4vw,56px); }
.feature__eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-soft); }
.feature__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 0 var(--lime); animation: pulse 2.4s var(--ease) infinite; }
.feature__title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(30px,4vw,52px); line-height: 1.0; margin: 16px 0 0; }
.feature__lead { font-size: clamp(17px,1.6vw,21px); line-height: 1.5; margin-top: 18px; }
.feature__lead em { font-style: italic; }
.feature__body { font-size: clamp(15px,1.4vw,17px); line-height: 1.6; color: var(--ink-soft); margin-top: 14px; }
.feature__body strong { color: var(--ink); font-weight: 600; }
.feature__points { list-style: none; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.feature__points li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; line-height: 1.45; }
.feature__points strong { font-weight: 600; }
.feature__pn { color: var(--lime-deep); font-weight: 700; }
.feature__demo { margin: 0; }
.feature__stage { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink-line);
  aspect-ratio: 4/5; background: radial-gradient(120% 120% at 50% 0%, #f3f1ec 0%, #e2e0da 100%);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.45); }
.feature__stage iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.feature__cap { text-align: center; margin-top: 12px; color: var(--ink-soft); }
@media (max-width: 820px){ .feature { grid-template-columns: 1fr; } .feature__stage { max-width: 360px; margin-inline: auto; } }

/* stacked variant - text on top, wide demo below */.feature.feature--stack { grid-template-columns: 1fr; gap: clamp(28px,3.5vw,44px); }
.feature--stack .feature__stage { aspect-ratio: 16/10; max-width: 100%; }
.feature--stack .feature__demo { width: 100%; }
@media (max-width: 820px){ .feature--stack .feature__stage { max-width: 100%; aspect-ratio: 4/3; } }

/* live narration caption rendered by the host below the demo stage */
.tour-cap { display: flex; align-items: center; gap: 9px; width: fit-content; max-width: 92%;
  margin: 14px auto 0; min-height: 40px; box-sizing: border-box;
  font-family: var(--font-body); font-weight: 500; font-size: 13.5px; line-height: 1.3; color: var(--ink);
  background: #EAF2FC; border: 1px solid #D2E4F7; padding: 9px 18px 9px 15px; border-radius: 100px;
  box-shadow: 0 6px 18px -10px rgba(20,18,14,.25);
  opacity: 0; transform: translateY(-4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.tour-cap.show { opacity: 1; transform: none; }
.tour-cap::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 0 rgba(198,255,0,.5); animation: tourDot 2.2s ease infinite; }
@keyframes tourDot { 0%{box-shadow:0 0 0 0 rgba(198,255,0,.5)} 70%{box-shadow:0 0 0 7px rgba(198,255,0,0)} 100%{box-shadow:0 0 0 0 rgba(198,255,0,0)} }

.pj-section { padding-block: clamp(48px,7vw,90px); }
.pj-section--tight { padding-block: clamp(28px,4vw,44px); }
.pj-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.5vw,32px); align-items: start; }
.pj-grid-2:has(.pj-eyebrow) { grid-template-columns: 1fr; gap: clamp(16px,2.5vw,26px); text-align: left; }
.pj-grid-2:has(.pj-eyebrow) .pj-textblock { margin-inline: 0; }
.pj-grid-2:has(.pj-list) .pj-list { text-align: left; width: 100%; max-width: 760px; margin-inline: 0; }
.pj-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.5vw,32px); }
@media (max-width:760px){ .pj-grid-2, .pj-grid-3 { grid-template-columns: 1fr; } }

.pj-textblock { max-width: 80ch; }
.pj-eyebrow { margin-bottom: 18px; }
.pj-h2 { font-family: var(--font-display); font-weight: 700; letter-spacing:-0.03em;
         font-size: clamp(30px,4vw,52px); line-height: 1.02; }
.pj-body { font-size: clamp(16px,1.4vw,19px); line-height: 1.6; color: var(--ink); margin-top: 18px; }
.pj-body + .pj-body { margin-top: 14px; }
.pj-body strong { font-weight: 600; }

.pj-list { list-style: none; margin-top: 26px; border-top: 1px solid var(--ink-line); }
.pj-list li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--ink-line); align-items: baseline; }
.pj-list .n { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); min-width: 28px; }
.pj-list .t { font-weight: 600; font-size: clamp(17px,1.6vw,21px); }
.pj-list .d { color: var(--ink-soft); font-size: 15px; margin-top: 3px; }

/* Oasis flows & featured sections */
.flow-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,3vw,32px); margin-top:clamp(32px,5vw,56px); }
.flow-card { display:flex; flex-direction:column; gap:14px; }
.flow-anim { position:relative; width:100%; aspect-ratio:9/16; border-radius:14px; overflow:hidden; background:var(--paper-deep); }
.flow-anim iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.flow-title { font-family:var(--font-display); font-weight:600; font-size:clamp(16px,2vw,18px); color:var(--ink); }
.flow-desc { font-size:14px; color:var(--ink-soft); line-height:1.5; }

.feature { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,72px); align-items:center; padding:clamp(28px,4vw,56px); }
.feature__text { display:flex; flex-direction:column; gap:clamp(16px,2.5vw,24px); }
.feature__eyebrow { display:flex; align-items:center; gap:8px; text-transform:uppercase; font-size:12px; letter-spacing:.08em; color:var(--ink-soft); }
.feature__dot { width:6px; height:6px; border-radius:50%; background:var(--lime); }
.feature__anim { position:relative; width:100%; aspect-ratio:9/16; border-radius:14px; overflow:hidden; background:var(--paper-deep); }
.feature__anim iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }

.pj-card { padding:clamp(24px,3vw,32px); background:var(--paper-deep); border-radius:12px; display:flex; flex-direction:column; gap:12px; }
.pj-card .pj-eyebrow { margin-bottom:4px; }

@media (max-width:720px){
  .feature { grid-template-columns:1fr; }
  .flow-grid { grid-template-columns:1fr; }
}

.pj-quote { font-family: var(--font-display); font-weight: 600; letter-spacing:-0.02em;
            font-size: clamp(24px,3.2vw,40px); line-height: 1.18; max-width: 20ch; }
.pj-quote .hl { background: linear-gradient(var(--lime), var(--lime)) left bottom / 100% 2px no-repeat; padding-bottom: 1px; }

/* next project */
.pj-section:has(.next) { display: flex; justify-content: flex-end; }
.next { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; width: fit-content;
        padding: clamp(22px,3vw,34px) 0 0; border-top: 1px solid var(--ink-line);
        font-size: clamp(15px,1.4vw,18px); line-height: 1; }
.next .swatch { width: 11px; height: 11px; border-radius: 3px; background: var(--lime); flex: none; }
.next__lbl { color: var(--ink-soft); }
.next__name { font-weight: 700; color: var(--ink); }
.next__arrow { display: inline-block; animation: nextArrow 1.9s ease-in-out infinite; transition: transform .3s var(--ease); }
.next:hover .next__arrow { animation: none; transform: translateX(8px); }
@keyframes nextArrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .next__arrow { animation: none; } }