/* ==========================================================================
   LWF Self Clearing Permitting — Select Work spotlight
   (Figma: DaveDoesDesigns pu97KqseHKGCWses8YJaH5 — 2026-08-25 redesign:
   desktop 619:5649 / dark 663:105, tablet 633:290 / 663:701,
   mobile 633:85 / 663:408, lightbox mock 664:147)

   Layout: full-width photo hero under the nav, overview band with a
   bordered metadata card, then three sections whose screens run as
   touch-enabled snap sliders at EVERY width — full-bleed to the right,
   aligned to the 1184px content column. At tablet/desktop each section
   gets a control cluster ([prev][next] | copy link) on the lede line; mobile
   keeps the bare snap slider. More Select Work tiles and the always-dark
   contact footer close the page. No lightbox on this page.

   Theming: every color routes through a --lwf-* token; the dark block
   follows the la-wallet mapping (white→#1e0c32, #fbfafd→#0e011c,
   accents→#b679ff). The LWF app screens are light in both themes by
   design. Breakpoints: mobile ≤640 / tablet ≤1024 / desktop ≥1025.
   ========================================================================== */

.lwf {
  --lwf-bg: #fbfafd;
  --lwf-surface: #ffffff;
  --lwf-fg: #1e0c32;
  --lwf-muted: #5e5072;
  --lwf-subtle: #978aaa;      /* step labels */
  --lwf-label: #a899b9;       /* metadata card labels */
  --lwf-accent: #6a00d1;      /* eyebrows, active dot */
  --lwf-border: #e9e5f0;      /* card + screen borders */
  --lwf-tag-border: #d2d2d2;
  --lwf-chip-bg: #ffffff;
  --lwf-chip-fg: #6a00d1;
  --lwf-chip-border: #e9e5f0;
  --lwf-dot: #d2d2d2;
  --lwf-thumb: #c3b8cf;    /* neutral-300: between #ded7e6 (200) and #a899b9 (400) */

  background: var(--lwf-bg);
  font-family: var(--font-body);
  color: var(--lwf-fg);
}

:root[data-theme='dark'] .lwf {
  --lwf-bg: #0e011c;
  --lwf-surface: #1e0c32;
  --lwf-fg: #ffffff;
  --lwf-muted: #b3a0c8;
  --lwf-subtle: #a79cb7;
  --lwf-label: #a79cb7;
  --lwf-accent: #b679ff;
  --lwf-border: #3d3350;
  --lwf-tag-border: #3d3350;
  --lwf-chip-bg: #b679ff;
  --lwf-chip-fg: #1e0c32;
  --lwf-chip-border: transparent;
  --lwf-dot: #3d3350;
  --lwf-thumb: #726783;    /* dark neutral-300: between #3d3350 and #a79cb7 */
}

/* Shared content column (1184 at full width, like the case studies) */
.lwf-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* --------------------------------------------------------------------------
   Hero: full-width photo band under the floating nav
   -------------------------------------------------------------------------- */
.lwf-hero {
  margin: 0;
  height: min(37.5vw, 720px);
  min-height: 480px;
  overflow: hidden;
}

/* The iPhone is the hero at every width. hero.jpg (1920x720) is authored
   at the desktop band's ratio, so desktop shows it uncropped; the device
   screen sits at 50% x / 56% y, so tablet/mobile cover-crop toward that
   point and zoom about it so the phone stays the focal size instead of
   shrinking with the photo. */
.lwf-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% 56%;
}

/* --------------------------------------------------------------------------
   Overview band: details left, bordered metadata card right
   -------------------------------------------------------------------------- */
.lwf-overview {
  padding: 96px 0;
  background: var(--lwf-surface);
}

.lwf-overview__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 48px;
  align-items: start;
}

.lwf-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lwf-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.2;
  letter-spacing: 0.612px;
  color: var(--lwf-fg);
}

.lwf-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lwf-tag {
  padding: 4px 8px;
  border: 1.5px solid var(--lwf-tag-border);
  border-radius: 64px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--lwf-muted);
}

.lwf-overview__body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 24px;
  color: var(--lwf-muted);
}

.lwf-meta-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--lwf-border);
  border-radius: 8px;
  background: var(--lwf-surface);
}

.lwf-meta-card dt {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--lwf-label);
}

.lwf-meta-card dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lwf-fg);
}

/* --------------------------------------------------------------------------
   Screen sections: alternating surfaces, header with chips, snap slider
   -------------------------------------------------------------------------- */
.lwf-section { padding: 96px 0; }
.lwf-section--bg { background: var(--lwf-bg); }
.lwf-section--surface { background: var(--lwf-surface); }

.lwf-section__head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lwf-eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--lwf-accent);
}

.lwf-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.125rem;
  line-height: 1.2;
  letter-spacing: 0.612px;
  color: var(--lwf-fg);
}

.lwf-lede {
  margin: 0;
  max-width: 720px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lwf-muted);
}

/* --------------------------------------------------------------------------
   Slider: native scroll-snap at every width; full-bleed right, aligned to
   the content column left. No JS-driven scrolling — dots ride along via
   scroll events and can jump the track.
   -------------------------------------------------------------------------- */
.lwf-track {
  display: flex;
  gap: 48px;
  margin-top: 48px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* pad the scroller to the 1184 content edge; 100% here is the
     viewport-wide track itself */
  padding-inline: max(48px, calc((100% - 1184px) / 2));
  scroll-padding-inline: max(48px, calc((100% - 1184px) / 2));
  /* breathing room so nothing clips focus rings */
  padding-top: 4px;
  padding-bottom: 8px;
}

.lwf-track::-webkit-scrollbar { display: none; }

.lwf-screen {
  margin: 0;
  flex: 0 0 260px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.lwf-screen__media {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background: var(--lwf-surface);
}

/* 1px inner stroke over the screen art, in the tag-pill stroke color —
   painted as an overlay ring so it sits inside the image edge */
.lwf-screen__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--lwf-tag-border);
  border-radius: inherit;
  pointer-events: none;
}

.lwf-screen__media img {
  display: block;
  width: 100%;
  height: auto;
}

.lwf-screen__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lwf-screen__label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--lwf-subtle);
}

.lwf-screen__caption {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--lwf-muted);
}

/* --------------------------------------------------------------------------
   Control cluster (tablet/desktop; hidden ≤640): [prev][next] | [copy link],
   riding the right end of the intro paragraph's line. The lede and the
   cluster share .lwf-section__meta (built by lwf.js): space-between,
   bottoms aligned; the paragraph keeps its own max-width. On tablet the
   pair would crowd, so the cluster stacks below the paragraph, flush
   right. Hidden entirely when the row doesn't overflow.
   -------------------------------------------------------------------------- */
.lwf-section__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.lwf-cluster {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.lwf-cluster[hidden] { display: none; }

/* chevron pair: 4px apart */
.lwf-cluster .lwf-arrow + .lwf-arrow { margin-left: 4px; }

/* divider: 1x16 rule, muted border token, 12px clearance both sides */
.lwf-cluster__divider {
  width: 1px;
  height: 16px;
  margin: 0 12px;
  background: var(--lwf-border);
}

/* Copy-link tooltip: dark chip above the button, 300ms linger, desktop
   pointers only. Right-aligned — the cluster ends at the content edge. */
.lwf-arrow[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  padding: 7px 10px;
  border-radius: 6px;
  background: #0e011c;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(14, 1, 28, 0.35);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .lwf-arrow[data-tooltip]:hover::after,
  .lwf-arrow[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 300ms;
  }
}

/* copy confirmation shows immediately on every device */
.lwf-arrow.is-copied::after {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

@media (max-width: 1024px) {
  .lwf-section__meta {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .lwf-cluster { align-self: flex-end; }
}

@media (max-width: 640px) {
  .lwf-cluster { display: none; }
  .lwf-section__meta { display: block; }
}

/* Circular buttons in the control row (chevrons + copy link) */
.lwf-arrow {
  position: relative; /* anchors the copy button's tooltip */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--lwf-chip-border);
  border-radius: 50%;
  background: var(--lwf-chip-bg);
  color: var(--lwf-chip-fg);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(14, 1, 28, 0.12);
  transition: transform 200ms var(--ease-out), opacity 200ms ease;
}

.lwf-arrow svg { width: 18px; height: 18px; }

.lwf-arrow:hover:not([disabled]),
.lwf-arrow:focus-visible:not([disabled]) { transform: translateY(-1px); }

.lwf-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

/* Drag affordance: mouse users can grab the track; snap is suspended
   while dragging so it can't fight the pointer (lwf.js re-snaps) */
@media (hover: hover) and (pointer: fine) {
  .lwf-track { cursor: grab; }
}

.lwf-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* --------------------------------------------------------------------------
   More Select Work: the homepage .sw-grid / .sw-tile system verbatim (see
   styles.css), wrapped in the case-study .xm band so the section's bottom
   corners curve into the footer fill (case-study.css owns .xm-wrap / .xm /
   .xm__inner and the light-mode 0 0 30px 30px radius). Only the two band
   tokens are set here, since .xm's tokens are otherwise scoped to
   .csp-shell. Tiles are rendered by lwf.js — three random pieces,
   excluding the one being viewed.
   -------------------------------------------------------------------------- */
.lwf-explore-wrap {
  --xm-behind: #0e011c; /* the footer's fill, both themes */
  --xm-band-bg: #ffffff;
}

:root[data-theme='dark'] .lwf-explore-wrap { --xm-band-bg: #0e011c; }

/* --------------------------------------------------------------------------
   Tablet ≤1024 (Figma 633:290): single column overview with a 2x2 metadata
   card; slider unchanged (peeking screens); tiles stack full width
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .lwf-hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  /* recenter on the phone and zoom about it so it stays the focal size */
  .lwf-hero img { object-position: 50% 50%; transform: scale(1.2); }

  .lwf-overview { padding: 64px 0; }
  .lwf-overview__inner { grid-template-columns: minmax(0, 1fr); }

  .lwf-meta-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 24px;
  }

  .lwf-section { padding: 80px 0; }

}

/* --------------------------------------------------------------------------
   Mobile ≤640 (Figma 633:85): 24px gutters, ~78vw slides, labels rise in
   as their slide snaps into view (lwf.js toggles .is-snapped)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .lwf-container { padding-left: 24px; padding-right: 24px; }

  .lwf-hero { aspect-ratio: 8 / 9; }
  .lwf-hero img { object-position: 50% 50%; transform: scale(1.2); transform-origin: 50% 58%; }

  .lwf-overview { padding: 48px 0; }
  .lwf-title { font-size: 1.75rem; }
  .lwf-overview__body { font-size: 0.9375rem; line-height: 1.5; }
  .lwf-meta-card { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .lwf-meta-card dd { font-size: 1rem; }

  .lwf-section { padding: 72px 0; }
  .lwf-headline { font-size: 1.625rem; line-height: 1.15; }
  .lwf-lede { font-size: 1rem; line-height: 1.45; }
  .lwf-screen__label { font-size: 0.75rem; }

  .lwf-track {
    gap: 16px;
    margin-top: 40px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }

  .lwf-screen { flex-basis: clamp(240px, 78vw, 306px); gap: 20px; }
  .lwf-screen__media { border-radius: 24px; }
  .lwf-screen__caption { font-size: 0.9375rem; } /* 16.4px mobile floor */


  .lwf-screen__text {
    opacity: 0.35;
    transform: translateY(8px);
    transition: opacity 400ms ease, transform 400ms var(--ease-out);
  }

  .lwf-screen.is-snapped .lwf-screen__text {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lwf-screen__text { transition: none; }
  .lwf-screen__text {
    opacity: 1 !important;
    transform: none !important;
  }
}