/* Work page — v3 light theme, larger iframe frames */

.page-hero {
  padding: calc(140px + env(safe-area-inset-top, 0px)) 0 var(--space-2xl);
  background: var(--color-cream-white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* v5: atmospheric photo accent in the bottom-right corner */
.page-hero__photo-accent {
  position: absolute;
  bottom: -8%;
  right: -6%;
  width: 34vw;
  max-width: 420px;
  height: auto;
  opacity: 0.22;
  filter: grayscale(0.55) sepia(0.3) brightness(0.85);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
  border-radius: 2px;
}
@media (max-width: 768px) {
  .page-hero__photo-accent {
    width: 60vw;
    bottom: -4%;
    right: -12%;
    opacity: 0.14;
  }
}
.page-hero__inner {
  position: relative;
  z-index: 2;
}
.page-hero h1 {
  font-size: clamp(48px, 7.5vw, 108px);
  color: var(--color-ink);
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin-top: var(--space-md);
  max-width: 14ch;
}
.page-hero p {
  font-family: var(--font-body);
  font-size: var(--text-sub);
  color: var(--color-mid-char);
  margin-top: var(--space-md);
  max-width: 52ch;
  line-height: 1.55;
}
.page-hero__meta-strip {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-mid-char);
}
.page-hero__meta-strip span::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--color-amber);
  margin-right: 10px;
  vertical-align: middle;
}

/* =========================================================
   DEMO SHOWCASE — light variants
   Iframes sized to ~85-90% of content column width,
   taller (above-fold of demo visible without inner scroll)
   ========================================================= */
/* v15.1: let the browser skip rendering off-screen demo sections */
.demo-showcase {
  content-visibility: auto;
  contain-intrinsic-size: auto 820px;
}
.demo-showcase {
  padding: var(--space-2xl) 0;
  position: relative;
}
.demo-showcase--light { background: var(--color-cream-white); }
.demo-showcase--cream { background: var(--color-cream); }

/* v5: wider iframe frames — 0.62/1.38 split so iframe gets ~70% width */
.demo-showcase__grid {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: var(--space-xl);
  align-items: center;
}
.demo-showcase__grid--reversed {
  grid-template-columns: 1.38fr 0.62fr;
}
.demo-showcase__grid--reversed .demo-showcase__copy { order: 2; }
.demo-showcase__grid--reversed .demo-showcase__frame { order: 1; }
.demo-showcase__grid--centered {
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
.demo-showcase__grid--centered .demo-showcase__copy {
  max-width: 64ch;
  margin: 0 auto;
  text-align: center;
}
.demo-showcase__grid--centered .demo-showcase__callout {
  justify-content: center;
}

@media (max-width: 1024px) {
  .demo-showcase__grid,
  .demo-showcase__grid--reversed {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .demo-showcase__grid--reversed .demo-showcase__copy { order: 1; }
  .demo-showcase__grid--reversed .demo-showcase__frame { order: 2; }
}

.demo-showcase__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.demo-showcase__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-mid-char);
}
.demo-showcase__eyebrow .num {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--color-amber);
  letter-spacing: 0;
  line-height: 1;
}
.demo-showcase__h2 {
  font-size: clamp(36px, 4.8vw, 60px);
  color: var(--color-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.demo-showcase__tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tier-badge--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid oklch(18% 0.04 264 / 0.3);
}
.demo-showcase__body {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-mid-char);
  line-height: 1.7;
  max-width: 56ch;
}
.demo-showcase__callout {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Browser chrome frame wrapping the live iframe — v3 sizing */
.demo-showcase__frame {
  /* Frame takes ~90% of right column width */
  max-width: 100%;
  width: 100%;
}
.demo-showcase__frame--centered {
  max-width: 1200px;
  margin: 0 auto;
}

.demo-frame {
  position: relative;
  background: var(--color-ink);
  border: 1px solid oklch(18% 0.04 264 / 0.15);
  box-shadow: 0 20px 48px oklch(18% 0.04 264 / 0.14),
              0 4px 12px oklch(18% 0.04 264 / 0.06);
  opacity: 0;
  transform: scale(0.965) translateY(14px);
  transition: opacity 700ms var(--ease-out-quart),
              transform 700ms var(--ease-out-quart);
  /* v5: taller aspect — above-the-fold of demo more visible (was 16/11) */
  aspect-ratio: 16 / 12;
  /* v15.1: MacBook dark aluminum bezel (dark-gray, not silver).
     Bottom padding creates breathing room so the iframe doesn't
     touch the hinge. */
  padding: 16px 14px 14px 14px;
  background: linear-gradient(180deg, #26292f 0%, #14171c 100%);
  border-radius: 12px 12px 0 0;
  border: 1px solid #0a0d14;
  border-bottom: 0;
}
/* v15.1: MacBook lid bottom — dark hinge strip with tapered edges */
.demo-showcase__frame::after {
  content: "";
  display: block;
  position: relative;
  height: 12px;
  margin: 0 -3%;
  background:
    linear-gradient(180deg, #2c2f36 0%, #15181e 55%, #05080f 100%);
  border-radius: 0 0 12px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 14px 20px -10px rgba(0,0,0,0.45);
  border: 1px solid #0a0d14;
  border-top: 0;
}
/* v15.1: tiny trackpad notch at the front of the hinge */
.demo-showcase__frame::before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  height: 4px;
  background: linear-gradient(180deg, #1a1d24 0%, #06080d 100%);
  border-radius: 0 0 6px 6px;
  z-index: 5;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.5);
}
.demo-frame.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.demo-frame__chrome {
  background: oklch(22% 0.03 264);
  border-bottom: 1px solid oklch(96% 0.008 85 / 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 36px;
}
.demo-frame__dots { display: flex; gap: 6px; }
.demo-frame__dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: oklch(50% 0.02 85);
  transition: background-color 180ms var(--ease-out-quart);
}
/* v15.1: traffic-light hover — close/minimize/maximize like macOS */
.demo-frame__dots:hover span:nth-child(1),
.demo-frame__dots:active span:nth-child(1),
.demo-frame__dots span:nth-child(1):active { background: #FF5F57; }
.demo-frame__dots:hover span:nth-child(2),
.demo-frame__dots:active span:nth-child(2),
.demo-frame__dots span:nth-child(2):active { background: #FEBC2E; }
.demo-frame__dots:hover span:nth-child(3),
.demo-frame__dots:active span:nth-child(3),
.demo-frame__dots span:nth-child(3):active { background: #28C840; }
/* v16: touch devices can't hover — always show the colors so they're visible */
@media (hover: none) {
  .demo-frame__dots span:nth-child(1) { background: #FF5F57; }
  .demo-frame__dots span:nth-child(2) { background: #FEBC2E; }
  .demo-frame__dots span:nth-child(3) { background: #28C840; }
}
.demo-frame__address {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: oklch(28% 0.03 264);
  padding: 5px 14px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 11px;
  color: oklch(82% 0.012 85);
  letter-spacing: 0.06em;
  max-width: 460px;
  margin: 0 auto;
  transition: color 200ms var(--ease-out-quart);
  border-radius: 3px;
}
.demo-frame__address svg {
  width: 10px; height: 10px;
  stroke: var(--color-amber);
  fill: none;
}
.demo-frame:hover .demo-frame__address { color: var(--color-cream-white); }

.demo-frame__load {
  position: absolute;
  top: 36px;
  left: 0; right: 0;
  height: 2px;
  background: var(--color-amber);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 3;
  pointer-events: none;
}
.demo-frame.is-loading .demo-frame__load {
  animation: frame-load 1400ms var(--ease-out-quart) forwards;
}
@keyframes frame-load {
  0%   { transform: scaleX(0); }
  70%  { transform: scaleX(0.75); }
  100% { transform: scaleX(1); opacity: 0; }
}

.demo-frame iframe {
  width: 100%;
  height: calc(100% - 36px);
  border: 0;
  display: block;
  background: var(--color-cream-white);
}
.demo-frame__fallback {
  position: absolute;
  inset: 36px 0 0 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.demo-frame__fallback img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.demo-frame.is-fallback iframe { display: none; }
.demo-frame.is-fallback .demo-frame__fallback { display: flex; }

@media (max-width: 768px) {
  /* Mobile: always use fallback screenshots instead of iframes */
  .demo-frame iframe { display: none; }
  .demo-frame__fallback { display: flex; }
  .demo-frame { aspect-ratio: 4 / 3; }
  /* v16: tighter bezel on mobile — the screen should dominate, not the frame.
     Also nudge the chrome + fallback inset so they line up with the screen. */
  .demo-frame {
    padding: 10px 7px 8px 7px;
  }
  .demo-frame__chrome {
    padding: 0 10px;
    height: 30px;
  }
  .demo-frame__fallback { inset: 30px 0 0 0; }
  .demo-showcase__frame::after { height: 10px; }
}

/* =========================================================
   v10: DEMO PHONE — iPhone silhouette with live mobile iframe,
   positioned as an inset below/beside the desktop browser frame.
   Hidden on mobile (user is already on mobile).
   ========================================================= */
.demo-showcase__frame { position: relative; }

.demo-phone {
  position: absolute;
  bottom: -40px;
  right: -30px;
  width: 200px;
  z-index: 4;
  /* v15.1: single drop-shadow (was two) — cheaper paint */
  filter: drop-shadow(0 14px 30px oklch(18% 0.04 264 / 0.26));
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 700ms var(--ease-out-quart) 200ms,
              transform 700ms var(--ease-out-quart) 200ms;
  /* v16: mobile previews are decorative — not interactive (better perf) */
  pointer-events: none;
}
/* Left-anchored variant: reversed grids (tincanbar) */
.demo-phone--left {
  right: auto;
  left: -30px;
}
/* Centered variant (logans) — float bottom-right under centered frame */
.demo-phone--centered {
  bottom: -50px;
  right: 6%;
}
/* When the desktop frame reveals, the phone follows shortly after */
.demo-frame.is-visible ~ .demo-phone {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.demo-phone__frame {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 1;
}
.demo-phone__iframe-wrap {
  position: absolute;
  top: 2.5%;
  left: 5%;
  width: 90%;
  height: 95%;
  overflow: hidden;
  border-radius: 28px;
  z-index: 2;
  background: var(--color-ink);
}
/* v16: notch drawn on top of the iframe — pure black with a thin
   cream-ish outer ring so the notch silhouette is visible against
   both dark and light website content inside the iframe. */
.demo-phone::after {
  content: "";
  position: absolute;
  top: 2.5%;
  left: 34.3%;
  width: 31.4%;
  height: 4.5%;
  background: #000;
  border-radius: 0 0 10px 10px;
  z-index: 5;
  pointer-events: none;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(230, 230, 235, 0.18);
}
.demo-phone::before {
  /* camera dot inside notch */
  content: "";
  position: absolute;
  top: 3.3%;
  left: 49%;
  width: 4px;
  height: 4px;
  background: #2a2d33;
  border-radius: 50%;
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.15);
}
.demo-phone iframe {
  /* v16: 425 source width guarantees any white iframe-body edge
     (scrollbar track, site body padding) lands outside the visible
     wrap — no more white sliver on the right. margin-top pushes
     content below the notch so real mobile content isn't clipped. */
  width: 425px;
  height: 880px;
  border: 0;
  display: block;
  transform: scale(0.46);
  transform-origin: top left;
  background: var(--color-ink);
  margin-top: 24px;
  scrollbar-width: none; /* Firefox */
}
.demo-phone iframe::-webkit-scrollbar { display: none; }
.demo-phone__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: none;
}
.demo-phone.is-fallback iframe { display: none; }
.demo-phone.is-fallback .demo-phone__fallback { display: block; }

@media (prefers-reduced-motion: reduce) {
  .demo-phone {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Tablet — slightly smaller, keep visible */
@media (max-width: 1024px) {
  .demo-phone { width: 160px; bottom: -30px; right: -10px; }
  .demo-phone--left { left: -10px; right: auto; }
  .demo-phone iframe { transform: scale(0.37); }
}

/* Mobile — hide entirely (user is already on mobile) */
@media (max-width: 768px) {
  .demo-phone { display: none; }
}

.demo-showcase__footnote {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-md);
  padding: 8px 14px;
  background: oklch(68% 0.155 55 / 0.12);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-amber-lo);
  align-self: flex-start;
}
.demo-showcase__footnote::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-amber);
  animation: pulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .demo-showcase__footnote::before { animation: none; }
}