/* ==========================================================================
   SiteYourStory — inner pages
   Brings work / services / industries / about / contact onto the film page's
   language: the same black ground, the same nav, the same type. Loaded after
   scenes.css so it wins where the two disagree.

   The WebGL environment is gone from these pages — its structures were the
   drawn wireframe geometry that the rebuild removed everywhere else, and it
   read as decoration across the headlines. Nothing replaces it: the ground
   colour and the type carry the page.
   ========================================================================== */

body {
  background: #0a0a0b;
  color: #f2f1ee;
}

/* The atmosphere layer was tuned against an ivory page; on black it only
   muddies the ground. */
.atmos { display: none; }

/* --- Nav, as on the film page: a mark and a way in ----------------------- */
.nav--inner {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav--inner[data-lifted='true'] {
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.nav--inner .logo { color: #fff; }
.nav--inner .burger {
  display: block;
  border-color: rgba(255, 255, 255, 0.28);
}
.nav--inner .burger span { background: #fff; }

/* --- Type ---------------------------------------------------------------
   The inner pages keep their own headings but adopt the film page's scale
   and colour so a visitor never crosses a seam.
   ------------------------------------------------------------------------ */

.scene .label,
.label {
  color: rgba(242, 241, 238, 0.6);
  letter-spacing: 0.22em;
}
.head,
.display {
  color: #fff;
  letter-spacing: -0.038em;
}
.sub { color: #fff; }
.body,
.lede { color: rgba(242, 241, 238, 0.78); }

/* Rules and hairlines that were drawn for an ivory page. */
.rule,
hr { background: rgba(255, 255, 255, 0.14); }

/* --- Page opener ---------------------------------------------------------
   A single quiet band at the top of each page instead of a hero image.
   ------------------------------------------------------------------------ */
.scene:first-of-type { padding-top: clamp(130px, 20vh, 220px); }

/* --- Selected work, reused on work.html ---------------------------------
   The same six real builds as the homepage, as a plain editorial grid. No
   3D here — the sequence is the homepage's signature and repeating it would
   cheapen it.
   ------------------------------------------------------------------------ */

.wgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 70px) clamp(20px, 3vw, 44px);
  margin-top: clamp(38px, 6vh, 70px);
  list-style: none;
}
.wgrid a {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: #141416;
  aspect-ratio: 16 / 10;
  box-shadow: 0 40px 90px -45px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.wgrid a:hover { transform: translateY(-6px); }
.wgrid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  display: block;
}
.wgrid figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.wgrid .w-ind {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-lift);
  flex-basis: 100%;
}
.wgrid .w-name {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.026em;
  color: #fff;
}
.wgrid .w-kind {
  font-size: 0.84rem;
  color: rgba(242, 241, 238, 0.6);
  margin-left: auto;
}

/* --- Media plates on the inner pages -------------------------------------
   industries.html mounts a real client build beside each industry it has
   one for. Full brightness: these are the work, not a texture.
   ------------------------------------------------------------------------ */
.industry-card .media.is-mounted { opacity: 1; }
.industry-card .media > img { filter: none; }

@media (max-width: 760px) {
  .wgrid { grid-template-columns: 1fr; }
}