/* =====================================================================
   Home page. Requires tokens.css + site.css.
   Sections: hero, service strip, journey, featured tiles, manage,
   industries, process, integrations wall, final CTA.
   Mock screens (.m-*) are decorative CSS stand-ins that sit under real
   images; they scale with their frame through container query units.
   ===================================================================== */

/* Images armed by home.js stay transparent until loaded. */
img[data-fb], .manage__img { opacity: 0; transition: opacity .6s var(--ease-out); }
img[data-fb].is-loaded, .manage__img.is-loaded { opacity: 1; }

/* =====================================================================
   1. Hero: the workshop wall
   The still (LCP) paints first. In live mode the WebGL canvas fades in
   over it; with no WebGL the four screens sit over the still as videos.
   ===================================================================== */
.hero { position: relative; overflow: hidden; background: var(--navy-950); }
.hero__stick { position: relative; min-height: 100svh; display: flex; align-items: flex-end; }
@media (min-width: 960px) { .home-live .hero__stick { height: 100svh; } }
.home-still .wall__canvas, .home-nogl .wall__canvas { display: none; }
.workshop { position: absolute; inset: 0; overflow: hidden; }
.hero__img, .wall__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.wall__canvas { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero.is-gl .wall__canvas { opacity: 1; }
.wall__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 19, 34, .92) 0%, rgba(10, 19, 34, .6) 38%, rgba(10, 19, 34, .05) 70%), linear-gradient(0deg, rgba(10, 19, 34, .85) 0%, rgba(10, 19, 34, 0) 40%); pointer-events: none; }
/* The four screens: positioned over the still for the no-WebGL and still versions */
.wall-screens { position: absolute; inset: 0; margin: 0; }
.wall-screens figure { position: absolute; margin: 0; width: 20%; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 0 0 4px #1b110e, 0 30px 60px rgba(0, 0, 0, .55), 0 0 60px rgba(148, 170, 204, .18); }
.wall-screens figure video, .wall-screens figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-screens [data-slug="osteria-lume"] { left: 54%; top: 14%; }
.wall-screens [data-slug="juniper-vale"] { left: 76%; top: 9%; width: 21%; }
.wall-screens [data-slug="basecamp"] { left: 56%; top: 50%; width: 18%; }
.wall-screens [data-slug="lanternway"] { left: 77%; top: 46%; width: 21%; }
.hero.is-gl .wall-screens { visibility: hidden; }
/* Narrower desktops: the screens move right and shrink so they never touch the headline. */
@media (min-width: 960px) and (max-width: 1399.98px) {
  .wall-screens figure { width: 18%; }
  .wall-screens [data-slug="osteria-lume"] { left: 56%; top: 16%; }
  .wall-screens [data-slug="juniper-vale"] { left: 77%; top: 11%; width: 20%; }
  .wall-screens [data-slug="basecamp"] { left: 58%; top: 52%; width: 17%; }
  .wall-screens [data-slug="lanternway"] { left: 78%; top: 48%; width: 20%; }
  .hero h1 { font-size: clamp(2.6rem, 1rem + 4.2vw, 4.6rem); }
  .wall-screens [data-slug="osteria-lume"] { left: 60%; }
  .wall-screens [data-slug="basecamp"] { left: 61%; }
}
@media (min-width: 960px) and (max-width: 1199.98px) {
  .wall-screens figure { width: 15%; }
  .wall-screens [data-slug="osteria-lume"] { left: 64%; top: 18%; }
  .wall-screens [data-slug="juniper-vale"] { left: 81%; top: 12%; width: 16%; }
  .wall-screens [data-slug="basecamp"] { left: 65%; top: 54%; width: 14%; }
  .wall-screens [data-slug="lanternway"] { left: 82%; top: 50%; width: 16%; }
  .hero h1 { max-width: 10ch; }
  .hero .lead { max-width: 34ch; }
}
.hero.is-gl .wall__canvas { opacity: 1; }
/* A wall that gave up fades back to the still; the screens return with it. */
.hero:not(.is-gl) .wall__canvas { opacity: 0; }
.hero__copy { position: relative; z-index: 2; width: 100%; padding-top: clamp(120px, 16vh, 200px); padding-bottom: clamp(56px, 10vh, 120px); }
.hero__copy .eyebrow { display: flex; align-items: center; gap: 14px; }
.hero__copy .eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; flex: none; }
.hero h1 { margin: 22px 0 24px; color: var(--ivory); max-width: 12ch; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.6rem); line-height: .98; }
.hero .lead { max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__note { display: flex; flex-wrap: wrap; margin-top: 40px; padding: 0; list-style: none; font-family: var(--font-label); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--ember); }
.hero__note li { display: flex; align-items: center; }
.hero__note li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ember); margin: 0 14px; }
.hero__scroll { position: absolute; right: var(--gutter); bottom: 28px; margin: 0; z-index: 2; font-family: var(--font-label); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-muted); }
.home-still .hero__scroll, .home-nogl .hero__scroll { display: none; }

/* =====================================================================
   2. The reel
   Still: stacked cards, each in its showpiece's colors. Live: pinned,
   one at a time (motion.js).
   ===================================================================== */
.featured { background: var(--navy-950); }
.reel__head { padding: clamp(72px, 9vw, 128px) 0 clamp(24px, 4vw, 48px); }
.reel__head .sec-head { margin-bottom: 0; }
.featured__all { margin-top: 22px; font-family: var(--font-label); font-weight: 500; font-size: 1.0625rem; }
.featured__all a { text-decoration: none; }
.featured__all a:hover { text-decoration: underline; }
.featured__noscript { padding: 48px var(--gutter); text-align: center; }
.reel { display: grid; gap: 12px; padding: 0 0 12px; }
.reel:empty { min-height: 600px; }
.reel__item { background: var(--reel-bg); color: var(--reel-fg); padding: clamp(56px, 8vw, 104px) 0; }
.reel__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.reel__kick { display: flex; align-items: center; gap: 14px; margin: 0; font-family: var(--font-label); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; }
.reel__kick > span:nth-child(2) { opacity: .85; }
.reel__n { font-family: var(--font-head); font-weight: 700; font-size: 1.1em; color: var(--reel-fg); }
.reel__item .badge-concept { background: var(--reel-accent); color: var(--reel-bg); border: 0; }
.reel__title { margin: 18px 0 10px; font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 1.2rem + 3vw, 4rem); line-height: 1; letter-spacing: -.02em; color: var(--reel-fg); }
.reel__brand { margin: 0; font-size: 1.125rem; opacity: .8; max-width: 44ch; }
.reel__highlights { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.reel__highlights li { position: relative; padding-left: 26px; font-family: var(--font-label); font-weight: 500; }
.reel__highlights li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 2px; background: var(--reel-accent); }
.reel__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 32px 0 0; }
.reel__item .btn--primary { --btn-bg: var(--reel-accent); --btn-fg: var(--reel-bg); color: var(--reel-bg); }
.reel__item .btn--primary:hover { --btn-bg: var(--reel-accent); filter: brightness(1.08); color: var(--reel-bg); }
.reel__item .btn--ghost { --btn-fg: var(--reel-fg); --btn-bd: var(--reel-fg); color: var(--reel-fg); }
.reel__item .btn--ghost:hover { --btn-bg: transparent; --btn-bd: var(--reel-accent); color: var(--reel-fg); }
.reel__item a:not(.btn) { color: var(--reel-fg); }
.reel__item a:not(.btn):hover { color: var(--reel-fg); }
.reel__build { font-family: var(--font-label); font-weight: 500; text-decoration: none; }
.reel__build:hover { text-decoration: underline; }
.reel__build .chev { display: inline-block; margin-left: .3em; }
.reel__media { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); transform: perspective(1200px) rotateY(-6deg); }
.reel__media video, .reel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =====================================================================
   Mock screens (shared by hero, tiles and the manage section)
   Sized in em; each mock sets its font-size from its container.
   ===================================================================== */
.m-line { display: block; height: .5em; border-radius: 1em; background: currentColor; opacity: .18; }
.m-line--short { width: 60%; }

/* Website */
.m-site {
  --m-bg: #0A1322; --m-fg: var(--ivory); --m-acc: var(--ember); --m-card: rgba(247, 244, 238, .06);
  display: flex; flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0 4.5%;
  background: var(--m-bg);
  color: var(--m-fg);
  font-family: var(--font-body);
  font-size: 1.35cqw;
  line-height: 1.25;
}
.h-frame .m-site { font-size: 1.15cqw; }
.m-site--church {
  --m-bg: radial-gradient(70% 60% at 75% 40%, rgba(94, 128, 176, .32), rgba(10, 19, 34, 0) 70%), #0A1322;
}
.m-site--education { --m-bg: var(--ivory); --m-fg: var(--navy); --m-acc: var(--teal); --m-card: var(--paper); }
.m-site--business { --m-bg: var(--paper); --m-fg: var(--ink); --m-acc: var(--navy-700); --m-card: #F1E8DC; }

.m-nav { display: flex; align-items: center; gap: 1em; padding: 1.1em 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.m-logo { display: flex; align-items: center; gap: .5em; font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.m-logo i { width: 1.2em; height: 1.3em; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--m-acc, var(--ember)); }
.m-links { display: flex; gap: 1.2em; margin-left: auto; }
.m-links i { width: 3em; height: .45em; border-radius: 1em; background: currentColor; opacity: .3; }
.m-btn {
  display: inline-flex; align-items: center;
  padding: .55em 1.1em; border-radius: .45em;
  background: var(--m-acc); color: var(--m-bg-solid, #fff);
  font-family: var(--font-label); font-weight: 500; font-size: .85em; white-space: nowrap;
}
.m-site--church .m-btn { color: #0A1322; background: var(--ember); }
.m-site--education .m-btn { color: #fff; background: #4A5E28; }
.m-site--business .m-btn { color: #fff; background: var(--navy); }
.m-btn--ghost { background: transparent !important; color: inherit !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }

.m-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 6%; align-items: center; flex: 1; padding: 6% 0 5%; }
.m-hero__copy { display: grid; gap: .8em; justify-items: start; }
.m-kick { font-family: var(--font-label); font-weight: 500; font-size: .8em; letter-spacing: .16em; text-transform: uppercase; color: var(--m-acc); }
.m-site--church .m-kick { color: var(--ember); }
.m-site--education .m-kick { color: #4A5E28; }
.m-h { font-family: var(--font-head); font-weight: 700; font-size: 3em; line-height: 1.02; letter-spacing: -.03em; margin-bottom: .1em; }
.m-hero__copy .m-line { width: 90%; }
.m-hero__copy .m-line--short { width: 64%; }
.m-ctas { display: flex; gap: .7em; margin-top: .5em; }
.m-hero__art { position: relative; height: 100%; min-height: 9em; max-height: 20em; border-radius: .8em; overflow: hidden; }

.m-arch {
  position: absolute; left: 22%; right: 22%; top: 8%; bottom: 0;
  border-radius: 999px 999px 0 0;
  background:
    linear-gradient(90deg, transparent 49%, rgba(10, 19, 34, .55) 49% 51%, transparent 51%),
    linear-gradient(180deg, transparent 45%, rgba(10, 19, 34, .55) 45% 47%, transparent 47%),
    radial-gradient(80% 70% at 50% 30%, #F7C27A, #F2A23A 45%, #C77A12);
  box-shadow: 0 0 4em rgba(242, 162, 58, .35), inset 0 0 0 .5em #4A3322;
}
.m-site--education .m-hero__art { background: linear-gradient(160deg, #E9DCC8, #DCCBB2); }
.m-sun { position: absolute; right: 16%; top: 16%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #F7C27A, var(--ember)); }
.m-books { position: absolute; left: 14%; bottom: 0; display: flex; align-items: flex-end; gap: 4%; width: 60%; height: 70%; }
.m-books i { flex: 1; border-radius: .3em .3em 0 0; background: var(--teal); }
.m-books i:nth-child(1) { height: 70%; }
.m-books i:nth-child(2) { height: 100%; background: var(--navy-700); }
.m-books i:nth-child(3) { height: 82%; background: var(--ember); }
.m-site--business .m-hero__art { background: linear-gradient(160deg, var(--navy), #0A1322); }
.m-rise { position: absolute; inset: 22% 14% 0; display: flex; align-items: flex-end; gap: 9%; }
.m-rise i { flex: 1; border-radius: .3em .3em 0 0; background: rgba(242, 162, 58, .5); }
.m-rise i:nth-child(1) { height: 32%; }
.m-rise i:nth-child(2) { height: 52%; }
.m-rise i:nth-child(3) { height: 70%; }
.m-rise i:nth-child(4) { height: 100%; background: var(--ember); }

.m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; padding-bottom: 5%; }
.m-card { display: grid; gap: .55em; padding: 1em; border-radius: .6em; background: var(--m-card); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent); }
.m-card i { width: 1.6em; height: 1.6em; border-radius: .45em; background: color-mix(in srgb, var(--m-acc) 35%, transparent); }
.m-card b { font-family: var(--font-label); font-weight: 500; font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-card .m-line { width: 80%; }

/* Phone app */
.m-app {
  display: flex; flex-direction: column; gap: .7em;
  height: 100%; overflow: hidden;
  padding: 2.6em .9em .9em;
  background: var(--ivory); color: var(--navy);
  font-size: 1.05cqw; line-height: 1.25;
}
.tile .m-app { font-size: .95cqw; }
.m-app__bar { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.15em; }
.m-app__bar i { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--ember); }
.m-app__card {
  display: grid; gap: .35em; justify-items: start;
  padding: 1em; border-radius: .9em;
  background: linear-gradient(150deg, var(--navy-700), var(--navy));
  color: var(--ivory);
}
.m-app__card small { font-size: .8em; color: var(--ivory-muted); letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-label); }
.m-app__card b { font-family: var(--font-head); font-weight: 700; font-size: 1.2em; line-height: 1.15; }
.m-app__pill { margin-top: .3em; padding: .35em .8em; border-radius: 999px; background: var(--ember); color: #0A1322; font-family: var(--font-label); font-size: .85em; }
.m-app--education .m-app__card { background: linear-gradient(150deg, #5E7A33, #3F5222); }
.m-app--business .m-app__card { background: linear-gradient(150deg, #3A2B26, var(--ink)); }
.m-app__row { display: flex; align-items: center; gap: .7em; padding: .6em; border-radius: .7em; background: var(--paper); }
.m-app__row i { flex: none; width: 1.8em; height: 1.8em; border-radius: .5em; background: rgba(242, 162, 58, .45); }
.m-app__row .m-line { flex: 1; }
.m-app__tabs { display: flex; justify-content: space-around; margin-top: auto; padding-top: .8em; border-top: 1px solid var(--line-light); }
.m-app__tabs i { width: 1.4em; height: 1.4em; border-radius: .4em; background: rgba(15, 27, 45, .25); }
.m-app__tabs i:first-child { background: var(--navy-700); }

/* Admin dashboard */
.m-admin {
  display: grid; grid-template-columns: 22% 1fr;
  height: 100%; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 1.2cqw; line-height: 1.25;
}
.m-side { display: flex; flex-direction: column; gap: .3em; padding: 1.4em .9em; background: #0A1322; color: var(--ivory-muted); }
.m-side .m-logo { margin-bottom: 1em; color: var(--ivory); --m-acc: var(--ember); }
.m-side > span:not(.m-logo) { display: flex; align-items: center; gap: .6em; padding: .55em .7em; border-radius: .5em; font-size: .92em; }
.m-side > span i { width: .9em; height: .9em; border-radius: .25em; background: currentColor; opacity: .5; }
.m-side .is-on { background: rgba(148, 170, 204, .16); color: var(--ivory); }
.m-main { display: flex; flex-direction: column; gap: 1em; padding: 1.4em 1.6em; min-width: 0; }
.m-top { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.m-top b { font-family: var(--font-head); font-weight: 700; font-size: 1.35em; letter-spacing: -.01em; color: var(--navy); }
.m-search { width: 30%; height: 1.9em; border-radius: .6em; background: #EFE6DA; }
.m-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; }
.m-stat { display: grid; gap: .2em; padding: .9em 1em; border-radius: .7em; background: #fff; box-shadow: 0 0 0 1px var(--line-light); }
.m-stat small { font-size: .82em; color: var(--slate); }
.m-stat b { font-family: var(--font-head); font-weight: 700; font-size: 1.7em; letter-spacing: -.02em; color: var(--navy); line-height: 1.1; }
.m-stat em { font-style: normal; font-size: .8em; color: #3F5222; }
.m-chart { padding: .9em 1em .4em; border-radius: .7em; background: #fff; box-shadow: 0 0 0 1px var(--line-light); }
.m-chart small { font-size: .82em; color: var(--slate); }
.m-chart svg { width: 100%; height: 5.5em; margin-top: .4em; }
.m-chart__area { fill: rgba(148, 170, 204, .22); }
.m-chart__line { fill: none; stroke: var(--navy-700); stroke-width: 2; vector-effect: non-scaling-stroke; }
.m-table { display: grid; border-radius: .7em; background: #fff; box-shadow: 0 0 0 1px var(--line-light); }
.m-table span { display: flex; align-items: center; gap: .8em; padding: .65em 1em; }
.m-table span + span { border-top: 1px solid var(--line-light); }
.m-table i { width: 1.6em; height: 1.6em; border-radius: 50%; background: rgba(242, 162, 58, .4); }
.m-table b { flex: 1; font-weight: 500; font-size: .95em; color: var(--ink); }
.m-table em { font-style: normal; font-size: .8em; padding: .25em .7em; border-radius: 999px; background: #EFE6DA; color: var(--slate); }
.m-table em.ok { background: rgba(85, 107, 47, .14); color: #3F5222; }

/* Browser frame used by tiles and the manage section */
.h-frame {
  position: relative;
  container-type: inline-size;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(15, 27, 45, .1), 0 40px 80px -40px rgba(10, 19, 34, .55);
}
.h-frame__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #EFE6DA; border-bottom: 1px solid var(--line-light); }
.h-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(15, 27, 45, .2); }
.h-frame__bar span { flex: 0 1 34%; height: 18px; margin: 0 auto; border-radius: 6px; background: rgba(15, 27, 45, .07); font-size: 11px; line-height: 18px; text-align: center; color: var(--slate); }
.h-frame__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.section--dark .h-frame, .h-frame--dark { background: #3A2622; box-shadow: 0 0 0 1px rgba(148, 170, 204, .16), 0 48px 90px -40px rgba(0, 0, 0, .8); }
.section--dark .h-frame__bar, .h-frame--dark .h-frame__bar { background: #3A2622; border-bottom-color: rgba(148, 170, 204, .14); }
.section--dark .h-frame__bar i, .h-frame--dark .h-frame__bar i { background: rgba(247, 244, 238, .22); }
.section--dark .h-frame__bar span, .h-frame--dark .h-frame__bar span { background: rgba(247, 244, 238, .08); color: var(--ivory-muted); }

/* =====================================================================
   2. Service strip
   ===================================================================== */
.strip { padding: clamp(48px, 6vw, 80px) 0; border-bottom: 1px solid var(--line-light); }
.strip__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.strip__head h2 { font-size: var(--fs-h3); font-weight: 600; color: var(--navy); }
.strip__list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); list-style: none; border-top: 1px solid var(--line-light); }
.strip__list li {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 6px 4px; text-align: center;
  font-family: var(--font-label); font-weight: 500; font-size: .75rem; line-height: 1.35;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
}
.strip__list li + li { border-left: 1px solid var(--line-light); }
.strip__list svg { width: 30px; height: 30px; color: var(--ember-ink); }

/* =====================================================================
   3. Journey
   ===================================================================== */
.journey-sec {
  padding: clamp(72px, 10vw, 140px) 0;
  overflow: hidden;
  background-image: radial-gradient(900px 500px at 50% 0%, rgba(148, 170, 204, .12), rgba(15, 27, 45, 0) 70%);
}
.journey {
  --p: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* The track behind the dots, and its fill */
.journey::before, .journey::after {
  content: ""; position: absolute; z-index: 0;
  left: calc(100% / 16); right: calc(100% / 16); top: 27px; height: 2px; border-radius: 2px;
}
.journey::before { background: rgba(148, 170, 204, .22); }
.journey::after {
  background: linear-gradient(90deg, var(--ember), var(--ember));
  transform-origin: left center;
  transform: scaleX(var(--p));
}
.journey li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.journey__dot {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy-950);
  border: 1px solid rgba(242, 162, 58, .5);
  color: var(--ember);
}
.journey__dot svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.journey h3 {
  margin-top: 20px;
  font-family: var(--font-label); font-weight: 500; font-size: .8125rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ivory);
}
.journey p { margin-top: 8px; font-size: .875rem; line-height: 1.5; color: var(--ivory-muted); max-width: 18ch; }

/* Live mode (motion allowed): steps wait in the dim until reached */
.journey--live::after { transition: transform .7s var(--ease-out); }
.journey--live li .journey__dot { transition: background-color .5s var(--ease-out), border-color .5s var(--ease-out), color .5s var(--ease-out), box-shadow .5s var(--ease-out), transform .5s var(--ease-out); }
.journey--live li:not(.is-lit) .journey__dot { border-color: rgba(148, 170, 204, .22); color: rgba(242, 162, 58, .55); }
.journey--live li.is-lit .journey__dot { background: #1A2D4A; border-color: var(--ember); }
.journey--live li.is-active .journey__dot {
  background: var(--ember); border-color: var(--ember); color: var(--navy-950);
  box-shadow: 0 0 0 6px rgba(94, 128, 176, .32), 0 0 32px rgba(242, 162, 58, .35);
  transform: scale(1.08);
}

/* =====================================================================
   5. Manage
   ===================================================================== */
.manage {
  overflow: hidden;
  padding: clamp(80px, 10vw, 140px) 0;
  background-image: radial-gradient(800px 500px at 90% 50%, rgba(148, 170, 204, .14), rgba(15, 27, 45, 0) 70%);
}
.manage__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.manage h2 { margin-top: 14px; color: var(--ivory); }
.manage .lead { margin-top: 18px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 28px; list-style: none; }
.manage__close { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-dark); font-family: var(--font-head); font-weight: 600; font-size: 1.1875rem; line-height: 1.4; letter-spacing: -.01em; color: var(--ivory); max-width: 32ch; }
.checks li { position: relative; padding-left: 32px; color: var(--ivory); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(148, 170, 204, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.2 2.6 2.6L14.2 7' fill='none' stroke='%23C89B6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.manage__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 36px; }
.manage__note { font-size: var(--fs-small); color: var(--ivory-muted); }
.manage__art .h-frame { border-radius: 14px; }
.manage .m-admin { font-size: 1.6cqw; }
.manage__img { position: absolute; left: 0; right: 0; bottom: 0; top: 34px; width: 100%; height: calc(100% - 34px); object-fit: cover; object-position: top left; }
.h-frame.has-img .h-frame__view { visibility: hidden; }

/* =====================================================================
   6. Industries
   ===================================================================== */
.industries { padding: clamp(80px, 10vw, 140px) 0; }
.ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; }
.ind-grid > li { display: flex; }
.ind-card {
  display: flex; flex-direction: column;
  width: 100%;
  padding: 32px 28px 28px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line-light);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  text-decoration: none;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.ind-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(122, 86, 52, .35); color: var(--ink); }
.ind-card svg { width: 36px; height: 36px; fill: none; stroke: var(--ember-ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ind-card h3 { margin-top: 28px; color: var(--navy); }
.ind-card p { margin-top: 10px; font-size: .9375rem; line-height: 1.55; color: var(--slate); }
.ind-card__more { margin-top: auto; padding-top: 24px; font-family: var(--font-label); font-weight: 500; font-size: .9375rem; color: var(--ember-ink); }
.ind-card:hover .ind-card__more { color: var(--navy); }

/* The connected system (services): a map of the seven services around the organization */
.sys { display: block; width: 100%; height: auto; margin: 8px 0 28px; overflow: visible; }
.sys .edge__line { stroke: rgba(122, 86, 52, .28); stroke-width: 1.5; transition: stroke .3s; }
.sys .edge__dot { stroke: var(--ember); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 22; opacity: 0; transition: opacity .3s; }
.sys .edge.is-on .edge__line { stroke: var(--ember); stroke-width: 2; }
.sys .edge.is-on .edge__dot, .sys .edge.is-pulse .edge__dot { opacity: 1; animation: sys-flow 1.1s linear infinite; }
@keyframes sys-flow { to { stroke-dashoffset: -23; } }
.sys .node circle { fill: var(--paper); stroke: var(--ember-ink); stroke-width: 1.5; transition: fill .3s, stroke .3s, r .3s; }
.sys .node text { font-family: var(--font-label); font-weight: 500; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; fill: var(--navy); text-anchor: middle; }
.sys .node--hub circle { fill: var(--navy); stroke: var(--ember); }
.sys .node--hub text { fill: var(--ivory); font-size: 12px; letter-spacing: .06em; }
.sys .node.is-on circle { fill: var(--ember); stroke: var(--navy); }
.sys .node--hub.is-on circle { fill: var(--navy); stroke: var(--ember); stroke-width: 3; }
.strip__list li { transition: color .3s, background-color .3s; cursor: default; }
.strip__list li.is-on { color: var(--navy); background: rgba(148, 170, 204, .16); }
.strip__list li.is-on svg { color: var(--navy); }

/* The reel when pinned (motion.js): items stack and cross-fade */
.featured { --reel-bg: var(--navy-950); --reel-fg: var(--ivory); background: var(--reel-bg); color: var(--reel-fg); transition: none; }
.reel.is-pinned { position: relative; height: 100svh; display: block; padding: 0; gap: 0; overflow: hidden; }
.reel.is-pinned .reel__item { position: absolute; inset: 0; display: flex; align-items: center; padding: 0; opacity: 0; pointer-events: none; transition: opacity .5s; background: transparent; }
.reel.is-pinned .reel__item.is-active { opacity: 1; pointer-events: auto; }
.reel.is-pinned .reel__grid { width: 100%; }
.reel.is-pinned .reel__media { transform: perspective(1200px) rotateY(-6deg); }

/* The journey when wide and live (motion.js): one long row that slides sideways */
.home-live .journey-sec { overflow: hidden; }
.journey--wide { display: flex; gap: 40px; width: max-content; will-change: transform; }
.journey--wide li { width: 240px; flex: none; }
.journey--wide p { max-width: none; }

/* The integrations marquee (motion.js): the list stays for readers; two drifting rows are decoration */
.wall--src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wall-row { overflow: hidden; margin-top: 18px; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.wall-track { display: flex; gap: 48px; width: max-content; padding: 6px 0; will-change: transform; }
.wall-track span { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); letter-spacing: -.01em; color: var(--navy); white-space: nowrap; opacity: .82; }
.wall-row[data-dir="-1"] .wall-track span { color: var(--ember-ink); }

/* Industry cards: a loop plays under the icon on hover (motion.js) */
.ind-card { overflow: hidden; }
.ind-card__media { display: block; margin: -24px -24px 20px; aspect-ratio: 16 / 10; background: var(--navy-950); overflow: hidden; }
.ind-card__media video, .ind-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: transform 1.2s var(--ease-out), opacity .4s; }
.ind-card:hover .ind-card__media video, .ind-card:hover .ind-card__media img { transform: scale(1.05); opacity: 1; }

/* =====================================================================
   6b. The Lab
   ===================================================================== */
.labstrip { padding: clamp(72px, 9vw, 128px) 0; background: var(--navy-950); }
.labstrip__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.labstrip h2 { margin-top: 14px; color: var(--ivory); }
.labstrip .lead { margin: 18px 0 30px; }
.labstrip__media { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.labstrip__media video, .labstrip__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Process: the line that draws through the steps (motion.js) */
.process .container { position: relative; }
.process__line { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; width: calc(100% - 2 * var(--gutter)); height: 40px; display: none; }
.process__line path { fill: none; stroke: var(--ember); stroke-width: 2; vector-effect: non-scaling-stroke; }
.steps li.is-on .steps__n { color: var(--ember); }

/* Final call to action: the warm lamp (motion.js) */
.final { position: relative; overflow: hidden; }
.final__lamp { position: absolute; left: 0; top: 0; width: 700px; height: 700px; margin: -350px 0 0 -350px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 162, 58, .28), rgba(148, 170, 204, .12) 40%, rgba(15, 27, 45, 0) 70%); pointer-events: none; opacity: 0; transition: opacity .8s; mix-blend-mode: screen; }
.final__lamp.is-on { opacity: 1; }
.final__in { position: relative; z-index: 1; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1099.98px) {
  .reel__grid, .labstrip__grid { grid-template-columns: 1fr; }
  .reel__media { transform: none; }
}
@media (max-width: 1099.98px) {
  .journey { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 12px; }
  .journey::before, .journey::after { display: none; }
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959.98px) {
  .hero h1 { max-width: 14ch; }
  .wall-screens figure { width: 34%; }
  /* Rows are measured from the top in vw (the screens scale with width), and the copy starts below the
     lowest screen (72px + 48.75vw), so the eyebrow and headline never sit on a screen at any height. */
  .wall-screens [data-slug="osteria-lume"] { left: 12%; top: calc(72px + 2vw); }
  .wall-screens [data-slug="juniper-vale"] { left: 56%; top: 72px; width: 36%; }
  .wall-screens [data-slug="basecamp"] { left: 10%; top: calc(72px + 27vw); width: 32%; }
  .wall-screens [data-slug="lanternway"] { left: 55%; top: calc(72px + 25vw); width: 38%; }
  .hero__copy { padding-top: calc(72px + 49vw + 36px); }
  .wall__shade { background: linear-gradient(0deg, rgba(10, 19, 34, .96) 0%, rgba(10, 19, 34, .85) 45%, rgba(10, 19, 34, .1) 80%); }
  .strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 20px; }
  .strip__list li:nth-child(5) { border-left: 0; }
  .manage__grid { grid-template-columns: 1fr; }
}
@media (max-width: 699.98px) {
  /* Journey becomes a vertical timeline */
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey::before, .journey::after { display: block; left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; }
  .journey::after { transform-origin: center top; transform: scaleY(var(--p)); }
  .journey li { display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; align-items: start; text-align: left; padding-bottom: 26px; }
  .journey li:last-child { padding-bottom: 0; }
  .journey__dot { grid-row: span 2; width: 48px; height: 48px; }
  .journey__dot svg { width: 21px; height: 21px; }
  .journey h3 { margin-top: 4px; }
  .journey p { margin-top: 4px; max-width: none; }

  .h-frame .m-site { font-size: 1.9cqw; }
  .h-frame__bar { height: 26px; gap: 5px; padding: 0 10px; }
  .h-frame__bar i { width: 7px; height: 7px; }
  .h-frame__bar span { height: 12px; font-size: 0; }
  .manage__img { top: 26px; height: calc(100% - 26px); }
}
@media (max-width: 559.98px) {
  .ind-grid { grid-template-columns: 1fr; }
  .strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__list li:nth-child(n) { border-left: 0; }
  .strip__list li:nth-child(even) { border-left: 1px solid var(--line-light); }
  .strip__list li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 479.98px) {
}
@media (prefers-reduced-motion: reduce) {
  .ind-card, .tile__links .chev, img[data-fb], .hero__img, .manage__img { transition: none; }
}