/**
 * Raven — capability detail pages (raven/capabilities/<capability>/).
 * Load after: page-article.css and motion.css.
 *
 * A scroll-driven header, then short centred sections. Everything is scoped
 * under .cap, because page-article.css is shared with the case studies,
 * industry pages and articles.
 */

/* The header runs edge to edge; the nav and footer keep the site's width. */
.page--bleed{max-width:none}
@media (min-width:1441px){
  .page--bleed > .nav{margin-left:calc((100% - 1400px) / 2);margin-right:calc((100% - 1400px) / 2)}
  .page--bleed > footer{max-width:1440px;margin-left:auto;margin-right:auto}
}

/* ── Header ─────────────────────────────────────────────────────────────────
   The runway is as tall as the scroll that plays the scene; the pin inside
   it holds one screen. It slides up under the floating nav (--cap-nav) so
   the first screen is exactly the header. Without motion it is one screen. */
.cap{--cap-nav:calc(88px + env(safe-area-inset-top, 0px));--run:400vh}
@supports (height:1svh){.cap{--run:400svh}}
@media (max-width:1080px){.cap{--cap-nav:calc(86px + env(safe-area-inset-top, 0px))}}

.cap-stage{position:relative;margin-top:calc(-1 * var(--cap-nav))}
.cap-stage.is-live{height:calc(100vh + var(--run))}
@supports (height:1svh){.cap-stage.is-live{height:calc(100svh + var(--run))}}
.cap-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}

.cap-film{position:absolute;inset:0;border:0;border-radius:0}
.cap .cap-film .rm-stage{position:absolute;inset:0;max-width:none;margin:0;aspect-ratio:auto}
/* Keeps the step captions legible over the photograph and the map. */
.cap-film::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
  opacity:0;transition:opacity 420ms ease;pointer-events:none;
}
.cap-stage[data-rm-step]:not([data-rm-step="0"]) .cap-film::after{opacity:1}

.cap-hero{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--cap-nav) + clamp(24px, 5.5vh, 64px)) 24px clamp(24px, 5vh, 56px);
  text-align:center;pointer-events:none;
}
/* The copy gives way as the photograph opens out. */
.cap-hero-copy{
  display:flex;flex-direction:column;align-items:center;pointer-events:auto;
  opacity:clamp(0, calc(1 - var(--rm-p, 0) * 20), 1);
  transform:translateY(calc(var(--rm-p, 0) * -200px));
}
.cap-stage[data-rm-step]:not([data-rm-step="0"]) .cap-hero-copy{pointer-events:none}
.cap-hero-copy:focus-within{opacity:1;pointer-events:auto}

.cap-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:500 14px/1 var(--font-sans);letter-spacing:-0.005em;color:rgba(255,255,255,0.88);
}
.cap-eyebrow .cap-glyph{width:28px;height:28px;margin:0;border-radius:7px}
.cap-eyebrow .cap-glyph svg{width:15px;height:15px}
.cap-h1{
  margin-top:24px;
  font:300 clamp(38px, 4.2vw, 60px)/1.04 var(--font-sans);
  letter-spacing:-0.04em;color:#fff;text-wrap:balance;
}
.cap-sub{
  margin-top:18px;max-width:50ch;
  font:300 clamp(17px, 1.4vw, 20px)/1.42 var(--font-serif);
  color:rgba(255,255,255,0.74);text-wrap:pretty;
}
.cap-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.cap .cap-ctas .btn{padding:14px 22px;font-size:15px}
.cap-note{margin-top:16px;font:400 13px/1.4 var(--font-sans);color:rgba(255,255,255,0.46)}

/* Where the scene's opening frame sits. The photograph inside shows until
   the canvas is ready, cropped as the canvas crops it. */
.cap-slot{
  position:relative;flex:1 1 0;min-height:140px;max-width:100%;
  aspect-ratio:16 / 9;margin-top:clamp(28px, 5vh, 56px);
  border:1px solid rgba(255,255,255,0.1);border-radius:14px;overflow:hidden;background:#0b0b0b;
}
.cap-slot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 75%}
/* For a photo whose subject sits high in the frame; the scene's crop matches. */
.cap-slot--high img{object-position:50% 30%}
.cap-slot--mid img{object-position:50% 54%}
.cap-film.is-ready ~ .cap-hero .cap-slot{visibility:hidden}

.cap-steps{
  position:absolute;left:0;right:0;bottom:clamp(44px, 8vh, 84px);z-index:1;
  display:grid;justify-items:center;margin:0;padding:0 24px;list-style:none;pointer-events:none;
}
.cap-steps li{
  grid-area:1 / 1;max-width:34ch;
  font:300 clamp(18px, 1.6vw, 22px)/1.4 var(--font-sans);letter-spacing:-0.01em;
  color:#fff;text-align:center;text-wrap:balance;text-shadow:0 1px 16px rgba(0,0,0,0.65);
  opacity:0;transform:translateY(8px);
  transition:opacity 420ms var(--ease-std, cubic-bezier(0.2,0,0,1)), transform 420ms var(--ease-std, cubic-bezier(0.2,0,0,1));
}
.cap-steps .n{
  display:block;margin-bottom:12px;
  font:500 10.5px/1 var(--font-mono);letter-spacing:0.22em;color:rgba(255,255,255,0.55);
}
.cap-stage[data-rm-step="1"] .cap-steps li:nth-child(1),
.cap-stage[data-rm-step="2"] .cap-steps li:nth-child(2),
.cap-stage[data-rm-step="3"] .cap-steps li:nth-child(3),
.cap-stage[data-rm-step="4"] .cap-steps li:nth-child(4),
.cap-stage[data-rm-step="5"] .cap-steps li:nth-child(5),
.cap-stage[data-rm-step="6"] .cap-steps li:nth-child(6),
.cap-stage[data-rm-step="7"] .cap-steps li:nth-child(7),
.cap-steps li:focus-within{opacity:1;transform:none}
.cap-stage .cap-steps:focus-within li:not(:focus-within){opacity:0}
.cap-step-link{
  display:block;width:fit-content;margin:14px auto 0;padding-bottom:5px;
  font:500 15px/1 var(--font-sans);letter-spacing:-0.005em;color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.35);transition:border-color 160ms ease;
}
.cap-step-link:hover{border-color:#fff}
.cap-step-link:focus-visible{outline:2px solid rgba(138,161,255,0.9);outline-offset:3px}
.cap-stage[data-rm-step="7"] .cap-steps li:nth-child(7) .cap-step-link,
.cap-steps li:focus-within .cap-step-link{pointer-events:auto}
.cap-stage-note{
  position:absolute;left:max(24px, env(safe-area-inset-left, 0px));right:max(24px, env(safe-area-inset-right, 0px));bottom:24px;z-index:1;margin:0;
  font:500 10px/1.3 var(--font-mono);letter-spacing:0.16em;text-transform:uppercase;text-align:right;
  color:rgba(255,255,255,0.4);opacity:0;transition:opacity 420ms ease;
}
.cap-stage[data-rm-step]:not([data-rm-step="0"]):not([data-rm-step="1"]) .cap-stage-note{opacity:1}
.cap-stage:not(.is-live) .cap-steps,
.cap-stage:not(.is-live) .cap-stage-note{display:none}

/* "See how it works" lands on the full-frame photograph; without the
   runway it lands on the result. */
.cap-how{position:absolute;left:0;top:100%;width:1px;height:1px}
.cap-stage.is-live .cap-how{top:calc(var(--run) * 0.104)}
@media (prefers-reduced-motion:no-preference){html:has(.cap-stage){scroll-behavior:smooth}}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.cap-wrap{max-width:1200px;margin:0 auto;padding:0 44px}
.cap-sec{padding-top:clamp(96px, 13vh, 150px)}
.cap-head{max-width:760px;margin:0 auto;text-align:center}
.cap-h2{
  font:300 clamp(32px, 3.6vw, 52px)/1.04 var(--font-sans);
  letter-spacing:-0.04em;color:#fff;text-wrap:balance;
}
.cap-lead{
  margin:20px auto 0;max-width:52ch;
  font:300 clamp(17px, 1.35vw, 20px)/1.42 var(--font-serif);
  color:rgba(255,255,255,0.72);text-wrap:pretty;
}

.cap-shot{margin:56px 0 0}
.cap-shot img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,0.1);border-radius:14px}
.cap-shot figcaption,
.cap-detail figcaption{
  font:400 13.5px/1.55 var(--font-sans);color:rgba(255,255,255,0.5);text-wrap:pretty;
}
.cap-shot figcaption{max-width:64ch;margin:18px auto 0;text-align:center}

.cap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;margin:56px 0 0}
.cap-grid > div{padding-top:22px;border-top:1px solid rgba(255,255,255,0.14)}
.cap-grid dt{font:500 16px/1.3 var(--font-sans);letter-spacing:-0.005em;color:#fff}
.cap-grid dd{margin:10px 0 0;font:400 15px/1.55 var(--font-sans);color:rgba(255,255,255,0.6);text-wrap:pretty}

.cap-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px, 6vw, 96px);align-items:center}
.cap-split-copy .cap-lead{margin-left:0}
.cap-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding-bottom:6px;
  font:500 15px/1 var(--font-sans);color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.3);transition:border-color 160ms ease;
}
.cap-link:hover{border-color:#fff}
.cap-link:focus-visible{outline:2px solid rgba(138,161,255,0.9);outline-offset:3px}
.cap-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 32px}
.cap-detail{
  margin:0;padding:clamp(20px, 3vw, 36px);
  border:1px solid rgba(255,255,255,0.08);border-radius:18px;background:var(--gs-chrome, #111);
}
.cap-detail img{display:block;width:100%;max-width:420px;height:auto;margin:0 auto;border-radius:12px}
.cap-detail figcaption{margin-top:16px;text-align:center}
.cap-detail--tall img{max-width:300px}
.cap-disclosure{
  max-width:62ch;margin:48px auto 0;padding:16px 18px;
  border:1px dashed rgba(255,255,255,0.18);border-radius:10px;
  font:400 12px/1.55 var(--font-mono);letter-spacing:0.02em;color:rgba(255,255,255,0.55);
}
.cap-disclosure b{color:rgba(255,255,255,0.85);font-weight:500}

.cap-powered{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:clamp(96px, 13vh, 150px) auto 0;padding:0 24px;
  font:400 14px/1.4 var(--font-sans);color:rgba(255,255,255,0.5);text-align:center;
}
.cap-powered svg{flex-shrink:0;width:16px;height:16px;stroke-width:1.5;color:rgba(255,255,255,0.62)}

.cap-faq .faq{max-width:760px;margin:48px auto 0}
.cap-further{
  max-width:760px;margin:28px auto 0;
  font:400 14px/1.6 var(--font-sans);color:rgba(255,255,255,0.5);text-wrap:pretty;
}
.cap-further a{color:rgba(255,255,255,0.85);border-bottom:1px solid rgba(255,255,255,0.3);transition:color 160ms ease, border-color 160ms ease}
.cap-further a:hover{color:#fff;border-color:rgba(255,255,255,0.7)}

.cap-cta{max-width:760px;margin:0 auto;padding:clamp(112px, 16vh, 180px) 24px clamp(96px, 14vh, 160px);text-align:center}
.cap-cta .cap-ctas{margin-top:36px}

/* ── Narrow screens ───────────────────────────────────────────────────────── */
@media (max-width:900px){
  .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cap-split{grid-template-columns:1fr}
}
@media (max-width:780px){
  .cap-wrap{padding:0 22px}
  .cap-hero{padding-left:22px;padding-right:22px}
  .cap .cap-ctas .btn{padding:13px 16px;font-size:14px}
  .cap-steps{bottom:68px;padding:0 22px}
  .cap-stage-note{left:0;right:0;bottom:24px;padding:0 22px;text-align:center;letter-spacing:0.12em}
  .cap-shot{margin-top:40px}
  .cap-shot img{border-radius:10px}
}
@media (max-width:560px){
  .cap-grid{grid-template-columns:1fr;gap:28px}
}

/* ── Paired slot, titled steps, walkthrough, video ──────────────────────────
   Short-Term Rental ID opens on two photographs, the room and its listing.
   The scene splits the slot the same way: 12px apart, each centre-cropped. */
.cap-slot--pair{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;
  aspect-ratio:2.3 / 1;border:0;border-radius:0;background:none;overflow:visible;
}
.cap-slot--pair picture{display:block;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,0.12);border-radius:12px;background:#0b0b0b}
.cap-slot--pair img{object-position:50% 50%}
.cap-slot--pair picture:first-child img{object-position:80% 50%}

/* A step with a title and a line under it. */
.cap-steps--titled li{max-width:42ch}
.cap-step-t{display:block}
.cap-step-d{
  display:block;margin-top:6px;
  font-size:clamp(15px, 1.15vw, 17px);line-height:1.45;color:rgba(255,255,255,0.72);
}

/* The steps as a sequence when the runway isn't live: reduced motion, or the
   scene not loaded. While it is live the captions carry the same beats. */
.cap:has(.cap-stage.is-live) .cap-walk{display:none}
.cap-walk-list{display:grid;gap:clamp(56px, 9vh, 104px);margin:0;padding:0;list-style:none}
.cap-walk-step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px, 5vw, 72px);align-items:center}
.cap-walk .n{display:block;margin-bottom:14px;font:500 10.5px/1 var(--font-mono);letter-spacing:0.22em;color:rgba(255,255,255,0.55)}
.cap-walk-t{display:block;font:300 clamp(24px, 2.2vw, 32px)/1.15 var(--font-sans);letter-spacing:-0.03em;color:#fff}
.cap-walk-d{margin:12px 0 0;max-width:40ch;font:300 clamp(17px, 1.35vw, 19px)/1.45 var(--font-serif);color:rgba(255,255,255,0.72);text-wrap:pretty}
.cap-walk-media{margin:0}
.cap-walk-media img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,0.1);border-radius:12px}

.cap-video video{
  display:block;width:100%;height:auto;aspect-ratio:16 / 9;background:#000;
  border:1px solid rgba(255,255,255,0.1);border-radius:14px;
}
.cap-video video:focus-visible{outline:2px solid rgba(138,161,255,0.9);outline-offset:3px}
.cap-shot--detail{max-width:760px;margin-left:auto;margin-right:auto}
.cap-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Kept apart from the demonstration above it by a rule and by its own space. */
.cap-context .cap-head{padding-top:clamp(56px, 8vh, 88px);border-top:1px solid rgba(255,255,255,0.12)}

@media (max-width:780px){
  .cap-walk-step{grid-template-columns:1fr;gap:20px}
  .cap-video video{border-radius:10px}
  .cap-grid--3{grid-template-columns:1fr;gap:28px}
}