/*
 * KVA STUDIOS
 * P37 — HOSPITALITY PARTICIPATION
 * P37-C STRUCTURAL FOUNDATION
 *
 * Namespace: pa1-*
 * Motion is intentionally deferred to P37-E.
 */

:root {
  --pa1-ink: #080a08;
  --pa1-ink-deep: #050705;
  --pa1-graphite: #111512;
  --pa1-graphite-raised: #171d18;

  --pa1-paper: #f2eee5;
  --pa1-paper-soft: #e9e3d8;

  --pa1-light: #f5f1e9;
  --pa1-muted-dark: #aab2aa;
  --pa1-muted-light: #555c56;

  --pa1-gold: #c8aa72;
  --pa1-gold-hi: #e0c58f;

  --pa1-green: #0b1710;
  --pa1-green-raised: #122219;
  --pa1-green-soft: #183022;

  --pa1-line-dark: rgba(255, 255, 255, 0.09);
  --pa1-line-dark-strong: rgba(255, 255, 255, 0.16);
  --pa1-line-light: rgba(14, 19, 15, 0.12);

  --pa1-shell:
    min(
      1480px,
      calc(100vw - 80px)
    );

  --pa1-section-y:
    clamp(
      86px,
      8vw,
      132px
    );
}


/* =========================================================
   01 — ROOT
   ========================================================= */

html {
  background:
    var(--pa1-ink);
}

body.pa1-page {
  margin: 0;
  overflow-x: clip;
  background:
    var(--pa1-ink);
  color:
    var(--pa1-light);
}

.pa1-page *,
.pa1-page *::before,
.pa1-page *::after {
  box-sizing: border-box;
}

.pa1-page img,
.pa1-page svg {
  display: block;
  max-width: 100%;
}

.pa1-page img {
  height: auto;
}

.pa1-page a {
  text-decoration: none;
}

.pa1-page main,
.pa1-page section,
.pa1-page footer {
  min-width: 0;
}

.pa1-shell {
  width:
    var(--pa1-shell);
  margin-inline:
    auto;
}


/* =========================================================
   02 — NAVIGATION
   ========================================================= */

.pa1-page .site-header {
  position: relative;
  z-index: 100;
}

.pa1-brand__symbol {
  overflow: hidden;
}

.pa1-brand__symbol img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* =========================================================
   03 — TYPE / SHARED
   ========================================================= */

.pa1-eyebrow {
  margin: 0;
  color: #727b73;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pa1-eyebrow--gold {
  color:
    var(--pa1-gold);
}

.pa1-heading {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(280px, 0.65fr);
  gap:
    clamp(42px, 7vw, 112px);
  align-items: end;
}

.pa1-heading h2,
.pa1-learn__copy h2,
.pa1-expect h2,
.pa1-product h2,
.pa1-close h2 {
  margin:
    18px 0 0;
  font-weight:
    510;
  letter-spacing:
    -0.055em;
  text-wrap:
    balance;
}

.pa1-heading h2 {
  max-width:
    12ch;
  color:
    #111611;
  font-size:
    clamp(
      3rem,
      5vw,
      5.5rem
    );
  line-height:
    0.96;
}

.pa1-heading h2 span {
  color:
    #5f675f;
}

.pa1-heading > p {
  max-width:
    48ch;
  margin:
    0;
  color:
    var(--pa1-muted-light);
  font-size:
    16px;
  line-height:
    1.7;
}

.pa1-heading--dark h2 {
  color:
    var(--pa1-light);
}

.pa1-heading--dark h2 span {
  color:
    #96a198;
}

.pa1-heading--dark > p {
  color:
    var(--pa1-muted-dark);
}

.pa1-actions,
.pa1-close__actions {
  display:
    flex;
  flex-wrap:
    wrap;
  align-items:
    center;
  gap:
    16px 26px;
}

.pa1-button {
  min-height:
    52px;
  display:
    inline-flex;
  align-items:
    center;
  justify-content:
    center;
  gap:
    12px;
  padding:
    0 22px;
  border:
    1px solid transparent;
  border-radius:
    12px;
  font-size:
    14px;
  font-weight:
    700;
}

.pa1-button--primary {
  background:
    var(--pa1-gold);
  color:
    #0b0d0b;
}

.pa1-button--light {
  background:
    var(--pa1-paper);
  color:
    #0b0d0b;
}

.pa1-text-link {
  display:
    inline-flex;
  align-items:
    center;
  gap:
    10px;
  color:
    inherit;
  font-size:
    14px;
  font-weight:
    680;
}


/* =========================================================
   04 — HERO
   ========================================================= */

.pa1-hero {
  position:
    relative;
  overflow:
    hidden;
  border-bottom:
    1px solid var(--pa1-line-dark);
  background:
    radial-gradient(
      circle at 78% 48%,
      rgba(200, 170, 114, 0.11),
      transparent 29%
    ),
    linear-gradient(
      rgba(130, 160, 137, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(130, 160, 137, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      150deg,
      #060806,
      #0a120d 58%,
      #07100b
    );
  background-size:
    auto,
    72px 72px,
    72px 72px,
    auto;
}

.pa1-hero__layout {
  min-height:
    clamp(
      680px,
      82vh,
      860px
    );
  display:
    grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(440px, 0.9fr);
  align-items:
    center;
  gap:
    clamp(
      48px,
      7vw,
      118px
    );
  padding:
    74px 0 72px;
}

.pa1-hero__copy {
  max-width:
    820px;
}

.pa1-hero h1 {
  max-width:
    10.5ch;
  margin:
    24px 0 0;
  color:
    var(--pa1-light);
  font-size:
    clamp(
      4rem,
      5.6vw,
      6.7rem
    );
  font-weight:
    500;
  letter-spacing:
    -0.068em;
  line-height:
    0.91;
}

.pa1-hero h1 span {
  display:
    block;
  color:
    #98a39a;
}

.pa1-lead {
  max-width:
    55ch;
  margin:
    30px 0 0;
  color:
    var(--pa1-muted-dark);
  font-size:
    clamp(
      16px,
      1.2vw,
      18px
    );
  line-height:
    1.72;
}

.pa1-hero .pa1-actions {
  margin-top:
    34px;
}


/* =========================================================
   05 — HERO OPERATION MAP
   ========================================================= */

.pa1-operation-map {
  min-width:
    0;
  padding:
    22px;
  border:
    1px solid var(--pa1-line-dark);
  border-radius:
    26px;
  background:
    rgba(8, 12, 9, 0.72);
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.3);
}

.pa1-operation-map__rail {
  display:
    grid;
  grid-template-columns:
    auto 1fr auto 1fr auto 1fr auto;
  align-items:
    center;
  gap:
    10px;
  padding:
    4px 2px 18px;
  border-bottom:
    1px solid var(--pa1-line-dark);
  color:
    #7e8980;
  font-size:
    8px;
  font-weight:
    760;
  letter-spacing:
    0.12em;
}

.pa1-operation-map__rail i {
  height:
    1px;
  background:
    linear-gradient(
      90deg,
      rgba(200, 170, 114, 0.12),
      rgba(200, 170, 114, 0.54)
    );
}

.pa1-operation-map__field {
  position:
    relative;
  min-height:
    470px;
  margin-top:
    18px;
  overflow:
    hidden;
  border-radius:
    18px;
  background:
    radial-gradient(
      circle at center,
      rgba(200, 170, 114, 0.1),
      transparent 32%
    ),
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );
  background-size:
    auto,
    48px 48px,
    48px 48px;
}

.pa1-operation-map__field::before,
.pa1-operation-map__field::after {
  content:
    "";
  position:
    absolute;
  left:
    50%;
  top:
    50%;
  border:
    1px solid rgba(200, 170, 114, 0.16);
  border-radius:
    50%;
  transform:
    translate(-50%, -50%);
}

.pa1-operation-map__field::before {
  width:
    310px;
  height:
    310px;
}

.pa1-operation-map__field::after {
  width:
    210px;
  height:
    210px;
  border-color:
    rgba(255, 255, 255, 0.08);
}

.pa1-operation-core {
  position:
    absolute;
  z-index:
    3;
  left:
    50%;
  top:
    50%;
  width:
    132px;
  height:
    132px;
  display:
    flex;
  flex-direction:
    column;
  align-items:
    center;
  justify-content:
    center;
  border:
    1px solid rgba(200, 170, 114, 0.34);
  border-radius:
    50%;
  background:
    #09100b;
  transform:
    translate(-50%, -50%);
}

.pa1-operation-core > span,
.pa1-operation-core > small {
  color:
    #8e998f;
  font-size:
    8px;
  letter-spacing:
    0.11em;
  text-transform:
    uppercase;
}

.pa1-operation-core strong {
  margin:
    5px 0;
  color:
    var(--pa1-gold-hi);
  font-size:
    42px;
  font-weight:
    520;
}

.pa1-operation-node {
  position:
    absolute;
  z-index:
    4;
  min-width:
    118px;
  display:
    grid;
  gap:
    5px;
  padding:
    12px 14px;
  border:
    1px solid var(--pa1-line-dark);
  border-radius:
    12px;
  background:
    rgba(14, 21, 16, 0.92);
}

.pa1-operation-node small {
  color:
    var(--pa1-gold);
  font-size:
    8px;
}

.pa1-operation-node strong {
  color:
    #d7ddd7;
  font-size:
    11px;
}

.pa1-operation-node--reception {
  left:
    5%;
  top:
    15%;
}

.pa1-operation-node--rooms {
  right:
    3%;
  top:
    23%;
}

.pa1-operation-node--housekeeping {
  left:
    6%;
  bottom:
    15%;
}

.pa1-operation-node--payments {
  right:
    5%;
  bottom:
    12%;
}


/* =========================================================
   06 — WHY
   ========================================================= */

.pa1-why {
  padding:
    var(--pa1-section-y) 0;
  background:
    var(--pa1-paper);
}

.pa1-friction-grid {
  display:
    grid;
  grid-template-columns:
    repeat(3, 1fr);
  margin-top:
    64px;
  border-top:
    1px solid var(--pa1-line-light);
  border-bottom:
    1px solid var(--pa1-line-light);
}

.pa1-friction-grid article {
  min-height:
    260px;
  padding:
    30px;
  border-right:
    1px solid var(--pa1-line-light);
}

.pa1-friction-grid article:last-child {
  border-right:
    0;
}

.pa1-friction-grid article > span {
  color:
    #8b7045;
  font-size:
    9px;
  font-weight:
    760;
  letter-spacing:
    0.12em;
}

.pa1-friction-grid strong {
  display:
    block;
  max-width:
    16ch;
  margin-top:
    40px;
  color:
    #171c17;
  font-size:
    24px;
  line-height:
    1.1;
}

.pa1-friction-grid p {
  max-width:
    34ch;
  margin:
    18px 0 0;
  color:
    var(--pa1-muted-light);
  font-size:
    13px;
  line-height:
    1.65;
}


/* =========================================================
   07 — STATUS
   ========================================================= */

.pa1-status {
  padding:
    var(--pa1-section-y) 0;
  background:
    linear-gradient(
      145deg,
      #07100b,
      #101a13
    );
}

.pa1-maturity {
  margin-top:
    64px;
  border-top:
    1px solid var(--pa1-line-dark);
}

.pa1-maturity__row {
  min-height:
    78px;
  display:
    grid;
  grid-template-columns:
    50px 180px minmax(120px, 1fr) 190px;
  align-items:
    center;
  gap:
    18px;
  border-bottom:
    1px solid var(--pa1-line-dark);
  color:
    #68736a;
}

.pa1-maturity__row > span,
.pa1-maturity__row > small {
  font-size:
    9px;
  letter-spacing:
    0.1em;
  text-transform:
    uppercase;
}

.pa1-maturity__row strong {
  color:
    #a8b1aa;
  font-size:
    15px;
}

.pa1-maturity__row i {
  height:
    2px;
  background:
    rgba(255, 255, 255, 0.07);
}

.pa1-maturity__row.is-advanced {
  color:
    #89958c;
}

.pa1-maturity__row.is-advanced strong {
  color:
    #d6ded7;
}

.pa1-maturity__row.is-advanced i {
  background:
    linear-gradient(
      90deg,
      var(--pa1-gold),
      rgba(200, 170, 114, 0.26)
    );
}

.pa1-maturity__row.is-current {
  color:
    var(--pa1-gold-hi);
}

.pa1-maturity__row.is-current strong {
  color:
    var(--pa1-gold-hi);
}

.pa1-maturity__row.is-current i {
  background:
    var(--pa1-gold);
}

.pa1-status__note {
  margin:
    22px 0 0;
  color:
    #68736a;
  font-size:
    11px;
}


/* =========================================================
   08 — LEARN / SCANNER
   ========================================================= */

.pa1-learn {
  padding:
    var(--pa1-section-y) 0;
  background:
    var(--pa1-paper-soft);
}

.pa1-learn__layout {
  display:
    grid;
  grid-template-columns:
    minmax(0, 0.75fr)
    minmax(520px, 1.25fr);
  gap:
    clamp(
      56px,
      8vw,
      130px
    );
  align-items:
    center;
}

.pa1-learn__copy h2 {
  max-width:
    10ch;
  color:
    #131813;
  font-size:
    clamp(
      3rem,
      4.6vw,
      5rem
    );
  line-height:
    0.96;
}

.pa1-learn__copy h2 span {
  color:
    #697069;
}

.pa1-learn__copy > p:last-child {
  max-width:
    44ch;
  margin:
    28px 0 0;
  color:
    var(--pa1-muted-light);
  font-size:
    15px;
  line-height:
    1.7;
}

.pa1-scanner {
  padding:
    20px;
  border:
    1px solid var(--pa1-line-light);
  border-radius:
    22px;
  background:
    rgba(255, 255, 255, 0.36);
}

.pa1-scanner__header {
  min-height:
    46px;
  display:
    flex;
  align-items:
    center;
  justify-content:
    space-between;
  gap:
    18px;
  border-bottom:
    1px solid var(--pa1-line-light);
  color:
    #7d6540;
  font-size:
    9px;
  font-weight:
    760;
  letter-spacing:
    0.11em;
}

.pa1-scanner__header small {
  color:
    #727972;
  font-size:
    9px;
}

.pa1-scanner__grid {
  display:
    grid;
  grid-template-columns:
    repeat(2, 1fr);
  gap:
    1px;
  margin-top:
    18px;
  background:
    var(--pa1-line-light);
}

.pa1-scanner__grid > span {
  min-height:
    88px;
  display:
    grid;
  align-content:
    center;
  gap:
    8px;
  padding:
    16px;
  background:
    var(--pa1-paper);
  color:
    #303630;
  font-size:
    12px;
}

.pa1-scanner__grid b {
  color:
    #987a4b;
  font-size:
    8px;
}

.pa1-scanner__result {
  min-height:
    60px;
  display:
    grid;
  grid-template-columns:
    auto 1fr auto 1fr auto;
  align-items:
    center;
  gap:
    12px;
  margin-top:
    18px;
  color:
    #757c75;
  font-size:
    8px;
  letter-spacing:
    0.09em;
}

.pa1-scanner__result i {
  height:
    1px;
  background:
    var(--pa1-line-light);
}

.pa1-scanner__result strong {
  color:
    #172018;
  font-size:
    10px;
}


/* =========================================================
   09 — PARTICIPATION
   ========================================================= */

.pa1-participate {
  scroll-margin-top:
    90px;
  padding:
    var(--pa1-section-y) 0;
  background:
    var(--pa1-paper);
}

.pa1-participation-grid {
  display:
    grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap:
    14px;
  margin-top:
    64px;
}

.pa1-participation-card {
  min-height:
    390px;
  display:
    flex;
  flex-direction:
    column;
  padding:
    28px;
  border:
    1px solid var(--pa1-line-light);
  border-radius:
    18px;
  background:
    rgba(255, 255, 255, 0.34);
  color:
    #111611;
}

.pa1-participation-card__number {
  color:
    #9e8150;
  font-size:
    10px;
  font-weight:
    760;
}

.pa1-participation-card__type {
  margin:
    54px 0 0;
  color:
    #747b74;
  font-size:
    9px;
  font-weight:
    760;
  letter-spacing:
    0.13em;
}

.pa1-participation-card h3 {
  max-width:
    11ch;
  margin:
    12px 0 0;
  font-size:
    clamp(
      2rem,
      2.5vw,
      2.8rem
    );
  font-weight:
    520;
  letter-spacing:
    -0.045em;
  line-height:
    0.98;
}

.pa1-participation-card > p:not(.pa1-participation-card__type) {
  max-width:
    34ch;
  margin:
    22px 0 0;
  color:
    var(--pa1-muted-light);
  font-size:
    13px;
  line-height:
    1.65;
}

.pa1-participation-card > a {
  display:
    flex;
  align-items:
    center;
  justify-content:
    space-between;
  gap:
    18px;
  margin-top:
    auto;
  padding-top:
    24px;
  border-top:
    1px solid var(--pa1-line-light);
  color:
    #1b241c;
  font-size:
    13px;
  font-weight:
    700;
}


/* =========================================================
   10 — EXPECTATION
   ========================================================= */

.pa1-expect {
  padding:
    var(--pa1-section-y) 0;
  background:
    #0a100c;
}

.pa1-expect__layout {
  display:
    grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(340px, 0.72fr);
  gap:
    clamp(
      54px,
      8vw,
      130px
    );
  align-items:
    center;
}

.pa1-expect h2 {
  max-width:
    10ch;
  color:
    var(--pa1-light);
  font-size:
    clamp(
      3rem,
      5vw,
      5.5rem
    );
  line-height:
    0.95;
}

.pa1-expect h2 span {
  display:
    block;
  color:
    #95a098;
}

.pa1-expect__list {
  border-top:
    1px solid var(--pa1-line-dark);
}

.pa1-expect__list > span {
  min-height:
    62px;
  display:
    flex;
  align-items:
    center;
  gap:
    18px;
  border-bottom:
    1px solid var(--pa1-line-dark);
  color:
    #d8dfd9;
  font-size:
    14px;
}

.pa1-expect__list b {
  color:
    var(--pa1-gold);
  font-size:
    8px;
}

.pa1-expect__list p {
  margin:
    26px 0 0;
  color:
    #8d978f;
  font-size:
    13px;
  line-height:
    1.65;
}


/* =========================================================
   11 — PRODUCT PROOF
   ========================================================= */

.pa1-product {
  padding:
    var(--pa1-section-y) 0;
  background:
    linear-gradient(
      150deg,
      #07100b,
      #102016
    );
}

.pa1-product__layout {
  display:
    grid;
  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(500px, 1.18fr);
  align-items:
    center;
  gap:
    clamp(
      54px,
      8vw,
      130px
    );
}

.pa1-product h2 {
  max-width:
    10ch;
  color:
    var(--pa1-light);
  font-size:
    clamp(
      3rem,
      4.8vw,
      5.2rem
    );
  line-height:
    0.95;
}

.pa1-product h2 span {
  color:
    #9baa9e;
}

.pa1-product__copy > p:not(.pa1-eyebrow) {
  max-width:
    45ch;
  margin:
    28px 0 0;
  color:
    #a8b5aa;
  font-size:
    15px;
  line-height:
    1.7;
}

.pa1-product__copy .pa1-button {
  margin-top:
    32px;
}

.pa1-product-map {
  position:
    relative;
  min-height:
    520px;
  border:
    1px solid var(--pa1-line-dark);
  border-radius:
    24px;
  overflow:
    hidden;
  background:
    radial-gradient(
      circle at center,
      rgba(200, 170, 114, 0.1),
      transparent 26%
    ),
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );
  background-size:
    auto,
    54px 54px,
    54px 54px;
}

.pa1-product-map__core {
  position:
    absolute;
  left:
    50%;
  top:
    50%;
  width:
    142px;
  height:
    142px;
  display:
    flex;
  flex-direction:
    column;
  align-items:
    center;
  justify-content:
    center;
  gap:
    12px;
  border:
    1px solid rgba(200, 170, 114, 0.31);
  border-radius:
    50%;
  background:
    #07100b;
  transform:
    translate(-50%, -50%);
}

.pa1-product-map__core img {
  width:
    48px;
  height:
    48px;
  object-fit:
    contain;
}

.pa1-product-map__core strong {
  color:
    var(--pa1-gold-hi);
  font-size:
    8px;
  letter-spacing:
    0.1em;
}

.pa1-product-map__node {
  position:
    absolute;
  min-width:
    112px;
  min-height:
    42px;
  display:
    grid;
  place-items:
    center;
  padding:
    10px;
  border:
    1px solid var(--pa1-line-dark);
  border-radius:
    10px;
  background:
    rgba(10, 18, 12, 0.94);
  color:
    #b5c0b7;
  font-size:
    10px;
}

.pa1-product-map__node:nth-child(1) {
  left:
    7%;
  top:
    15%;
}

.pa1-product-map__node:nth-child(2) {
  right:
    7%;
  top:
    18%;
}

.pa1-product-map__node:nth-child(3) {
  left:
    4%;
  top:
    47%;
}

.pa1-product-map__node:nth-child(4) {
  right:
    4%;
  top:
    49%;
}

.pa1-product-map__node:nth-child(5) {
  left:
    10%;
  bottom:
    13%;
}

.pa1-product-map__node:nth-child(6) {
  right:
    10%;
  bottom:
    14%;
}


/* =========================================================
   12 — CLOSE
   ========================================================= */

.pa1-close {
  padding:
    var(--pa1-section-y) 0;
  border-top:
    1px solid var(--pa1-line-dark);
  background:
    radial-gradient(
      circle at 78% 48%,
      rgba(200, 170, 114, 0.1),
      transparent 28%
    ),
    var(--pa1-ink-deep);
}

.pa1-close__layout {
  display:
    grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 0.55fr);
  gap:
    clamp(
      56px,
      8vw,
      130px
    );
  align-items:
    center;
}

.pa1-close h2 {
  max-width:
    13ch;
  color:
    var(--pa1-light);
  font-size:
    clamp(
      3rem,
      4.7vw,
      5rem
    );
  line-height:
    0.96;
}

.pa1-close h2 span {
  color:
    #949e96;
}

.pa1-close p:not(.pa1-eyebrow) {
  margin:
    24px 0 0;
  color:
    #8e988f;
  font-size:
    16px;
}

.pa1-close__actions {
  justify-content:
    flex-start;
}


/* =========================================================
   13 — FOOTER
   ========================================================= */

.pa1-footer {
  border-top:
    1px solid var(--pa1-line-dark);
  background:
    #050705;
}

.pa1-footer__inner {
  min-height:
    106px;
  display:
    grid;
  grid-template-columns:
    1fr auto 1fr;
  align-items:
    center;
  gap:
    28px;
  color:
    #747d75;
  font-size:
    10px;
}

.pa1-footer__brand {
  color:
    #d9dfda;
  font-weight:
    700;
}

.pa1-footer nav {
  justify-self:
    end;
  display:
    flex;
  align-items:
    center;
  gap:
    20px;
}

.pa1-footer nav a {
  color:
    #858f87;
}


/* =========================================================
   14 — TABLET
   ========================================================= */

@media (max-width: 1050px) {

  :root {
    --pa1-shell:
      min(
        calc(100vw - 48px),
        1120px
      );
  }

  .pa1-heading,
  .pa1-learn__layout,
  .pa1-expect__layout,
  .pa1-product__layout,
  .pa1-close__layout {
    grid-template-columns:
      1fr;
  }

  .pa1-heading {
    gap:
      30px;
  }

  .pa1-hero__layout {
    min-height:
      auto;
    grid-template-columns:
      1fr;
    padding:
      72px 0 60px;
  }

  .pa1-operation-map {
    width:
      min(
        100%,
        720px
      );
  }

  .pa1-friction-grid {
    grid-template-columns:
      1fr;
  }

  .pa1-friction-grid article {
    min-height:
      0;
    border-right:
      0;
    border-bottom:
      1px solid var(--pa1-line-light);
  }

  .pa1-friction-grid article:last-child {
    border-bottom:
      0;
  }

  .pa1-participation-grid {
    grid-template-columns:
      1fr;
  }

  .pa1-participation-card {
    min-height:
      320px;
  }

  .pa1-product-map {
    width:
      min(
        100%,
        720px
      );
  }

  .pa1-close__actions {
    justify-content:
      flex-start;
  }
}


/* =========================================================
   15 — MOBILE
   ========================================================= */

@media (max-width: 720px) {

  :root {
    --pa1-shell:
      calc(100vw - 36px);

    --pa1-section-y:
      74px;
  }

  .pa1-hero__layout {
    gap:
      38px;
    padding:
      52px 0 48px;
  }

  .pa1-hero h1 {
    max-width:
      10ch;
    font-size:
      clamp(
        3.1rem,
        13.5vw,
        4.8rem
      );
  }

  .pa1-lead {
    font-size:
      15px;
  }

  .pa1-actions,
  .pa1-close__actions {
    align-items:
      stretch;
  }

  .pa1-button {
    width:
      100%;
  }

  .pa1-operation-map {
    padding:
      12px;
    border-radius:
      18px;
  }

  .pa1-operation-map__rail {
    grid-template-columns:
      repeat(4, 1fr);
    gap:
      6px;
    text-align:
      center;
  }

  .pa1-operation-map__rail i {
    display:
      none;
  }

  .pa1-operation-map__field {
    min-height:
      420px;
  }

  .pa1-operation-map__field::before {
    width:
      250px;
    height:
      250px;
  }

  .pa1-operation-map__field::after {
    width:
      174px;
    height:
      174px;
  }

  .pa1-operation-core {
    width:
      112px;
    height:
      112px;
  }

  .pa1-operation-node {
    min-width:
      96px;
    max-width:
      108px;
    padding:
      10px;
  }

  .pa1-operation-node strong {
    font-size:
      9px;
  }

  .pa1-operation-node--reception {
    left:
      1%;
    top:
      12%;
  }

  .pa1-operation-node--rooms {
    right:
      1%;
    top:
      17%;
  }

  .pa1-operation-node--housekeeping {
    left:
      1%;
    bottom:
      13%;
  }

  .pa1-operation-node--payments {
    right:
      1%;
    bottom:
      10%;
  }

  .pa1-heading h2,
  .pa1-learn__copy h2,
  .pa1-expect h2,
  .pa1-product h2,
  .pa1-close h2 {
    font-size:
      clamp(
        2.7rem,
        11vw,
        4rem
      );
  }

  .pa1-friction-grid {
    margin-top:
      42px;
  }

  .pa1-friction-grid article {
    padding:
      26px 4px;
  }

  .pa1-friction-grid strong {
    margin-top:
      22px;
  }

  .pa1-maturity {
    margin-top:
      42px;
  }

  .pa1-maturity__row {
    min-height:
      74px;
    grid-template-columns:
      34px 1fr;
    gap:
      8px 12px;
  }

  .pa1-maturity__row i {
    grid-column:
      1 / -1;
  }

  .pa1-maturity__row small {
    grid-column:
      2;
  }

  .pa1-scanner {
    padding:
      12px;
  }

  .pa1-scanner__grid {
    grid-template-columns:
      1fr;
  }

  .pa1-scanner__result {
    grid-template-columns:
      1fr;
    gap:
      8px;
  }

  .pa1-scanner__result i {
    display:
      none;
  }

  .pa1-participation-grid {
    margin-top:
      42px;
  }

  .pa1-participation-card {
    min-height:
      340px;
    padding:
      24px;
  }

  .pa1-product-map {
    min-height:
      470px;
  }

  .pa1-product-map__node {
    min-width:
      90px;
    font-size:
      8px;
  }

  .pa1-product-map__core {
    width:
      116px;
    height:
      116px;
  }

  .pa1-product-map__core img {
    width:
      40px;
    height:
      40px;
  }

  .pa1-footer__inner {
    min-height:
      150px;
    grid-template-columns:
      1fr;
    align-content:
      center;
    justify-items:
      start;
    gap:
      12px;
  }

  .pa1-footer nav {
    justify-self:
      start;
    flex-wrap:
      wrap;
  }
}


/* =========================================================
   16 — COMPACT PHONE
   ========================================================= */

@media (max-width: 390px) {

  :root {
    --pa1-shell:
      calc(100vw - 28px);
  }

  .pa1-hero h1 {
    font-size:
      clamp(
        2.9rem,
        13vw,
        3.75rem
      );
  }

  .pa1-operation-map__field {
    min-height:
      405px;
  }

  .pa1-operation-node {
    min-width:
      86px;
    max-width:
      96px;
  }

  .pa1-operation-node strong {
    font-size:
      8px;
  }

  .pa1-participation-card h3 {
    font-size:
      2.1rem;
  }
}


/* =========================================================
   17 — REDUCED MOTION
   P37-C contains no page-specific animation.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }
}
/* =========================================================
   P37-D — VISUAL + RESPONSIVE REFINEMENT
   Static visual refinement only.
   Advanced motion remains deferred to P37-E.
   ========================================================= */


/* =========================================================
   D01 — PAGE ATMOSPHERE
   ========================================================= */

.pa1-page {
  background:
    #050705;
}

.pa1-page::before {
  content:
    "";
  position:
    fixed;
  z-index:
    -1;
  inset:
    0;
  pointer-events:
    none;
  background:
    radial-gradient(
      circle at 14% 8%,
      rgba(200, 170, 114, 0.05),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 36%,
      rgba(66, 105, 77, 0.05),
      transparent 26%
    );
}


/* =========================================================
   D02 — HEADER INTEGRATION
   ========================================================= */

.pa1-header {
  border-bottom:
    1px solid rgba(255, 255, 255, 0.075);
  background:
    linear-gradient(
      180deg,
      rgba(5, 8, 6, 0.94),
      rgba(5, 8, 6, 0.78)
    );
  backdrop-filter:
    blur(18px);
  -webkit-backdrop-filter:
    blur(18px);
}

.pa1-page .desktop-nav a {
  position:
    relative;
}

.pa1-page .desktop-nav .nav-active::after {
  content:
    "";
  position:
    absolute;
  left:
    50%;
  bottom:
    -11px;
  width:
    18px;
  height:
    1px;
  background:
    var(--pa1-gold);
  transform:
    translateX(-50%);
}

.pa1-page .header-contact {
  border-color:
    rgba(200, 170, 114, 0.28);
}


/* =========================================================
   D03 — HERO DEPTH
   ========================================================= */

.pa1-hero::before {
  content:
    "";
  position:
    absolute;
  inset:
    0;
  pointer-events:
    none;
  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 6, 0.1),
      transparent 42%,
      rgba(5, 8, 6, 0.08)
    );
}

.pa1-hero::after {
  content:
    "";
  position:
    absolute;
  left:
    0;
  right:
    0;
  bottom:
    0;
  height:
    180px;
  pointer-events:
    none;
  background:
    linear-gradient(
      transparent,
      rgba(4, 7, 5, 0.32)
    );
}

.pa1-hero__layout {
  position:
    relative;
  z-index:
    2;
}

.pa1-hero__copy {
  position:
    relative;
}

.pa1-hero__copy::before {
  content:
    "";
  position:
    absolute;
  left:
    -28px;
  top:
    3px;
  width:
    1px;
  height:
    42px;
  background:
    linear-gradient(
      var(--pa1-gold),
      transparent
    );
}

.pa1-hero .pa1-eyebrow {
  color:
    #8f9a91;
}

.pa1-lead {
  color:
    #aab5ac;
}

.pa1-operation-map {
  position:
    relative;
  isolation:
    isolate;
}

.pa1-operation-map::before {
  content:
    "";
  position:
    absolute;
  z-index:
    -1;
  inset:
    -1px;
  border-radius:
    inherit;
  background:
    linear-gradient(
      145deg,
      rgba(200, 170, 114, 0.15),
      transparent 34%,
      transparent 70%,
      rgba(71, 111, 82, 0.1)
    );
}

.pa1-operation-map__field {
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   D04 — OPERATIONAL CONNECTION SYSTEM
   ========================================================= */

.pa1-operation-map__field {
  --pa1-core-x:
    50%;
  --pa1-core-y:
    50%;
}

.pa1-operation-node::after {
  content:
    "";
  position:
    absolute;
  z-index:
    -1;
  height:
    1px;
  pointer-events:
    none;
  background:
    linear-gradient(
      90deg,
      rgba(200, 170, 114, 0.55),
      rgba(200, 170, 114, 0.04)
    );
  transform-origin:
    left center;
}

.pa1-operation-node--reception::after {
  left:
    96%;
  top:
    68%;
  width:
    125px;
  transform:
    rotate(24deg);
}

.pa1-operation-node--rooms::after {
  right:
    96%;
  top:
    62%;
  width:
    118px;
  transform:
    rotate(-22deg);
  transform-origin:
    right center;
}

.pa1-operation-node--housekeeping::after {
  left:
    96%;
  bottom:
    64%;
  width:
    128px;
  transform:
    rotate(-24deg);
}

.pa1-operation-node--payments::after {
  right:
    96%;
  bottom:
    64%;
  width:
    118px;
  transform:
    rotate(22deg);
  transform-origin:
    right center;
}

.pa1-operation-core {
  box-shadow:
    0 0 0 10px rgba(200, 170, 114, 0.025),
    0 0 55px rgba(200, 170, 114, 0.08);
}

.pa1-operation-core::before {
  content:
    "";
  position:
    absolute;
  inset:
    15px;
  border:
    1px solid rgba(255, 255, 255, 0.055);
  border-radius:
    50%;
}

.pa1-operation-node {
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   D05 — WHY / FRICTION SYSTEM
   ========================================================= */

.pa1-why {
  position:
    relative;
  overflow:
    hidden;
}

.pa1-why::before {
  content:
    "";
  position:
    absolute;
  inset:
    0;
  pointer-events:
    none;
  background:
    linear-gradient(
      90deg,
      rgba(34, 44, 35, 0.022) 1px,
      transparent 1px
    );
  background-size:
    92px 100%;
}

.pa1-why .pa1-shell {
  position:
    relative;
}

.pa1-friction-grid {
  position:
    relative;
}

.pa1-friction-grid::before {
  content:
    "REAL OPERATION / OBSERVATION LAYER";
  position:
    absolute;
  right:
    0;
  top:
    -25px;
  color:
    rgba(52, 62, 53, 0.42);
  font-size:
    8px;
  font-weight:
    760;
  letter-spacing:
    0.14em;
}

.pa1-friction-grid article {
  position:
    relative;
}

.pa1-friction-grid article::after {
  content:
    "";
  position:
    absolute;
  left:
    30px;
  right:
    30px;
  bottom:
    0;
  height:
    2px;
  background:
    linear-gradient(
      90deg,
      rgba(151, 119, 69, 0.48),
      transparent
    );
}

.pa1-friction-grid article:nth-child(2)::after {
  background:
    linear-gradient(
      90deg,
      rgba(73, 104, 78, 0.52),
      transparent
    );
}

.pa1-friction-grid article:nth-child(3)::after {
  background:
    linear-gradient(
      90deg,
      rgba(78, 91, 105, 0.42),
      transparent
    );
}


/* =========================================================
   D06 — STATUS / MATURITY
   ========================================================= */

.pa1-status {
  position:
    relative;
  overflow:
    hidden;
}

.pa1-status::after {
  content:
    "";
  position:
    absolute;
  right:
    -160px;
  top:
    -180px;
  width:
    520px;
  height:
    520px;
  border:
    1px solid rgba(200, 170, 114, 0.05);
  border-radius:
    50%;
  box-shadow:
    0 0 0 90px rgba(200, 170, 114, 0.018),
    0 0 0 180px rgba(200, 170, 114, 0.012);
}

.pa1-status .pa1-shell {
  position:
    relative;
  z-index:
    1;
}

.pa1-maturity__row {
  position:
    relative;
}

.pa1-maturity__row i {
  position:
    relative;
  overflow:
    visible;
}

.pa1-maturity__row i::after {
  content:
    "";
  position:
    absolute;
  right:
    -1px;
  top:
    50%;
  width:
    7px;
  height:
    7px;
  border:
    1px solid currentColor;
  border-radius:
    50%;
  background:
    #101a13;
  transform:
    translateY(-50%);
}

.pa1-maturity__row.is-advanced i::after {
  background:
    var(--pa1-gold);
  border-color:
    var(--pa1-gold);
}

.pa1-maturity__row.is-current {
  background:
    linear-gradient(
      90deg,
      rgba(200, 170, 114, 0.055),
      transparent 62%
    );
}

.pa1-maturity__row.is-current::before {
  content:
    "CURRENT VALIDATION";
  position:
    absolute;
  right:
    0;
  top:
    12px;
  color:
    rgba(224, 197, 143, 0.55);
  font-size:
    7px;
  letter-spacing:
    0.12em;
}


/* =========================================================
   D07 — OPERATIONAL SCANNER
   ========================================================= */

.pa1-scanner {
  position:
    relative;
  overflow:
    hidden;
  box-shadow:
    0 24px 64px rgba(48, 40, 28, 0.08);
}

.pa1-scanner::before {
  content:
    "";
  position:
    absolute;
  left:
    0;
  right:
    0;
  top:
    47%;
  height:
    1px;
  pointer-events:
    none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(154, 122, 73, 0.34),
      transparent
    );
}

.pa1-scanner__header::before {
  content:
    "";
  width:
    7px;
  height:
    7px;
  margin-right:
    10px;
  flex:
    0 0 auto;
  border:
    1px solid #987a4b;
  border-radius:
    50%;
  background:
    rgba(152, 122, 75, 0.13);
}

.pa1-scanner__header > span {
  margin-right:
    auto;
}

.pa1-scanner__grid > span {
  position:
    relative;
}

.pa1-scanner__grid > span::after {
  content:
    "";
  position:
    absolute;
  right:
    13px;
  top:
    13px;
  width:
    5px;
  height:
    5px;
  border:
    1px solid rgba(55, 69, 57, 0.3);
  border-radius:
    50%;
}

.pa1-scanner__result {
  padding:
    0 4px;
}


/* =========================================================
   D08 — PARTICIPATION CARDS
   ========================================================= */

.pa1-participate {
  position:
    relative;
  overflow:
    hidden;
}

.pa1-participate::before {
  content:
    "";
  position:
    absolute;
  right:
    0;
  top:
    0;
  width:
    40%;
  height:
    100%;
  pointer-events:
    none;
  background:
    linear-gradient(
      135deg,
      transparent,
      rgba(30, 48, 34, 0.025)
    );
}

.pa1-participation-grid {
  position:
    relative;
}

.pa1-participation-card {
  position:
    relative;
  overflow:
    hidden;
}

.pa1-participation-card::before {
  content:
    "";
  position:
    absolute;
  left:
    -1px;
  top:
    -1px;
  width:
    58px;
  height:
    2px;
  background:
    var(--pa1-gold);
}

.pa1-participation-card:nth-child(2)::before {
  width:
    88px;
  background:
    #708575;
}

.pa1-participation-card:nth-child(3)::before {
  width:
    118px;
  background:
    #354c3c;
}

.pa1-participation-card:nth-child(2) {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.48),
      rgba(224, 230, 222, 0.26)
    );
}

.pa1-participation-card:nth-child(3) {
  border-color:
    rgba(49, 75, 56, 0.22);
  background:
    linear-gradient(
      145deg,
      rgba(229, 235, 227, 0.56),
      rgba(205, 220, 209, 0.3)
    );
}

.pa1-participation-card__number {
  display:
    inline-grid;
  place-items:
    center;
  width:
    30px;
  height:
    30px;
  border:
    1px solid rgba(158, 129, 80, 0.24);
  border-radius:
    50%;
}

.pa1-participation-card > a {
  position:
    relative;
}

.pa1-participation-card > a::before {
  content:
    "";
  position:
    absolute;
  left:
    0;
  top:
    -1px;
  width:
    34px;
  height:
    1px;
  background:
    rgba(151, 119, 69, 0.65);
}


/* =========================================================
   D09 — EXPECTATION
   ========================================================= */

.pa1-expect {
  position:
    relative;
  overflow:
    hidden;
}

.pa1-expect::before {
  content:
    "LOW PRESSURE / HIGH CONTEXT";
  position:
    absolute;
  right:
    4vw;
  bottom:
    30px;
  color:
    rgba(255, 255, 255, 0.06);
  font-size:
    clamp(18px, 3vw, 42px);
  font-weight:
    700;
  letter-spacing:
    0.06em;
  white-space:
    nowrap;
}

.pa1-expect__list > span {
  position:
    relative;
}

.pa1-expect__list > span::after {
  content:
    "—";
  margin-left:
    auto;
  color:
    rgba(200, 170, 114, 0.32);
}


/* =========================================================
   D10 — PRODUCT PROOF CONNECTION MAP
   ========================================================= */

.pa1-product-map {
  isolation:
    isolate;
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.22);
}

.pa1-product-map::before,
.pa1-product-map::after {
  content:
    "";
  position:
    absolute;
  z-index:
    -1;
  left:
    50%;
  top:
    50%;
  border:
    1px solid rgba(200, 170, 114, 0.1);
  border-radius:
    50%;
  transform:
    translate(-50%, -50%);
}

.pa1-product-map::before {
  width:
    310px;
  height:
    310px;
}

.pa1-product-map::after {
  width:
    420px;
  height:
    420px;
  border-color:
    rgba(255, 255, 255, 0.045);
}

.pa1-product-map__node {
  z-index:
    3;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.16);
}

.pa1-product-map__node::after {
  content:
    "";
  position:
    absolute;
  z-index:
    -1;
  top:
    50%;
  width:
    120px;
  height:
    1px;
  background:
    linear-gradient(
      90deg,
      rgba(200, 170, 114, 0.34),
      rgba(200, 170, 114, 0.03)
    );
}

.pa1-product-map__node:nth-child(odd)::after {
  left:
    90%;
}

.pa1-product-map__node:nth-child(even)::after {
  right:
    90%;
  transform:
    rotate(180deg);
}

.pa1-product-map__core {
  z-index:
    5;
  box-shadow:
    0 0 0 12px rgba(200, 170, 114, 0.018),
    0 0 72px rgba(200, 170, 114, 0.09);
}


/* =========================================================
   D11 — CLOSE
   ========================================================= */

.pa1-close {
  position:
    relative;
  overflow:
    hidden;
}

.pa1-close::before {
  content:
    "";
  position:
    absolute;
  right:
    6vw;
  top:
    50%;
  width:
    min(30vw, 430px);
  aspect-ratio:
    1;
  border:
    1px solid rgba(200, 170, 114, 0.055);
  border-radius:
    50%;
  transform:
    translateY(-50%);
  box-shadow:
    0 0 0 70px rgba(200, 170, 114, 0.018),
    0 0 0 140px rgba(200, 170, 114, 0.01);
}

.pa1-close__layout {
  position:
    relative;
  z-index:
    2;
}


/* =========================================================
   D12 — STATIC HOVER / FOCUS CLARITY
   No transition or animation in P37-D.
   ========================================================= */

@media (hover: hover) {

  .pa1-button:hover {
    border-color:
      rgba(255, 255, 255, 0.18);
    filter:
      brightness(1.04);
  }

  .pa1-text-link:hover,
  .pa1-footer a:hover {
    text-decoration:
      underline;
    text-underline-offset:
      5px;
  }

  .pa1-participation-card:hover {
    border-color:
      rgba(151, 119, 69, 0.38);
  }
}

.pa1-page a:focus-visible,
.pa1-page button:focus-visible {
  outline:
    2px solid var(--pa1-gold-hi);
  outline-offset:
    4px;
}


/* =========================================================
   D13 — LARGE TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1180px) {

  .pa1-hero__layout {
    grid-template-columns:
      minmax(0, 0.92fr)
      minmax(400px, 0.82fr);
    gap:
      52px;
  }

  .pa1-hero h1 {
    font-size:
      clamp(3.8rem, 6.6vw, 5.8rem);
  }

  .pa1-operation-map__field {
    min-height:
      440px;
  }

  .pa1-product__layout {
    gap:
      70px;
  }

  .pa1-product-map {
    min-height:
      500px;
  }
}


/* =========================================================
   D14 — TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .pa1-hero__copy::before {
    display:
      none;
  }

  .pa1-hero__layout {
    grid-template-columns:
      1fr;
  }

  .pa1-operation-map,
  .pa1-product-map {
    margin-inline:
      auto;
  }

  .pa1-operation-map {
    width:
      min(100%, 760px);
  }

  .pa1-product-map {
    width:
      min(100%, 760px);
  }

  .pa1-friction-grid article::after {
    left:
      0;
    right:
      auto;
    width:
      72px;
  }

  .pa1-participation-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .pa1-participation-card {
    min-height:
      380px;
    padding:
      24px;
  }

  .pa1-participation-card h3 {
    font-size:
      clamp(1.7rem, 3.1vw, 2.3rem);
  }
}


/* =========================================================
   D15 — INTERMEDIATE MOBILE / TABLET
   ========================================================= */

@media (max-width: 860px) {

  .pa1-participation-grid {
    grid-template-columns:
      1fr;
  }

  .pa1-participation-card {
    min-height:
      290px;
  }

  .pa1-participation-card__type {
    margin-top:
      34px;
  }

  .pa1-maturity__row {
    grid-template-columns:
      42px 150px minmax(90px, 1fr) 150px;
  }

  .pa1-operation-node::after {
    opacity:
      0.55;
  }
}


/* =========================================================
   D16 — MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .pa1-page::before {
    display:
      none;
  }

  .pa1-hero::after {
    height:
      100px;
  }

  .pa1-hero__layout {
    padding-top:
      44px;
  }

  .pa1-hero h1 {
    letter-spacing:
      -0.062em;
  }

  .pa1-lead {
    max-width:
      38ch;
  }

  .pa1-operation-map__rail {
    padding-bottom:
      13px;
  }

  .pa1-operation-map__field {
    min-height:
      390px;
  }

  .pa1-operation-map__field::before {
    width:
      224px;
    height:
      224px;
  }

  .pa1-operation-map__field::after {
    width:
      154px;
    height:
      154px;
  }

  .pa1-operation-node::after {
    display:
      none;
  }

  .pa1-operation-node {
    min-width:
      88px;
    max-width:
      100px;
  }

  .pa1-operation-core {
    width:
      104px;
    height:
      104px;
  }

  .pa1-operation-core strong {
    font-size:
      34px;
  }

  .pa1-friction-grid::before {
    display:
      none;
  }

  .pa1-maturity__row {
    padding:
      12px 0;
    grid-template-columns:
      30px 1fr;
  }

  .pa1-maturity__row.is-current::before {
    display:
      none;
  }

  .pa1-scanner::before {
    display:
      none;
  }

  .pa1-scanner__header {
    align-items:
      flex-start;
  }

  .pa1-scanner__header small {
    text-align:
      right;
  }

  .pa1-participation-card {
    min-height:
      310px;
  }

  .pa1-expect::before {
    display:
      none;
  }

  .pa1-product-map {
    min-height:
      420px;
  }

  .pa1-product-map::before {
    width:
      230px;
    height:
      230px;
  }

  .pa1-product-map::after {
    width:
      320px;
    height:
      320px;
  }

  .pa1-product-map__node::after {
    display:
      none;
  }

  .pa1-product-map__node {
    min-width:
      82px;
    max-width:
      96px;
    padding:
      8px;
    text-align:
      center;
  }

  .pa1-product-map__core {
    width:
      108px;
    height:
      108px;
  }

  .pa1-close::before {
    right:
      -100px;
    width:
      300px;
  }
}


/* =========================================================
   D17 — NARROW PHONE
   ========================================================= */

@media (max-width: 480px) {

  :root {
    --pa1-shell:
      calc(100vw - 32px);
  }

  .pa1-hero h1 {
    max-width:
      9.3ch;
  }

  .pa1-operation-map {
    padding:
      10px;
  }

  .pa1-operation-map__rail {
    font-size:
      7px;
  }

  .pa1-operation-map__field {
    min-height:
      360px;
  }

  .pa1-operation-map__field::before {
    width:
      200px;
    height:
      200px;
  }

  .pa1-operation-map__field::after {
    width:
      138px;
    height:
      138px;
  }

  .pa1-operation-node {
    min-width:
      78px;
    max-width:
      90px;
    padding:
      8px;
  }

  .pa1-operation-node strong {
    font-size:
      8px;
  }

  .pa1-operation-core {
    width:
      94px;
    height:
      94px;
  }

  .pa1-operation-core strong {
    font-size:
      30px;
  }

  .pa1-heading h2,
  .pa1-learn__copy h2,
  .pa1-expect h2,
  .pa1-product h2,
  .pa1-close h2 {
    letter-spacing:
      -0.05em;
  }

  .pa1-scanner__grid > span {
    min-height:
      76px;
  }

  .pa1-product-map {
    min-height:
      390px;
  }

  .pa1-product-map::before {
    width:
      205px;
    height:
      205px;
  }

  .pa1-product-map::after {
    width:
      286px;
    height:
      286px;
  }

  .pa1-product-map__node {
    min-width:
      72px;
    max-width:
      82px;
    font-size:
      7px;
  }

  .pa1-product-map__core {
    width:
      96px;
    height:
      96px;
  }

  .pa1-product-map__core img {
    width:
      34px;
    height:
      34px;
  }

  .pa1-product-map__core strong {
    font-size:
      7px;
  }

  .pa1-footer nav {
    gap:
      12px 16px;
  }
}


/* =========================================================
   D18 — VERY COMPACT PHONE
   ========================================================= */

@media (max-width: 360px) {

  :root {
    --pa1-shell:
      calc(100vw - 24px);
  }

  .pa1-operation-map__field {
    min-height:
      340px;
  }

  .pa1-operation-node {
    min-width:
      70px;
    max-width:
      78px;
  }

  .pa1-operation-node--reception,
  .pa1-operation-node--housekeeping {
    left:
      0;
  }

  .pa1-operation-node--rooms,
  .pa1-operation-node--payments {
    right:
      0;
  }

  .pa1-product-map__node {
    min-width:
      66px;
    max-width:
      72px;
  }
}


/* =========================================================
   D19 — REDUCED MOTION CONTRACT
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .pa1-page *,
  .pa1-page *::before,
  .pa1-page *::after {
    scroll-behavior:
      auto !important;
  }
}
/* =========================================================
   P37-E — MOTION + INTERACTION
   Motion communicates state, flow and operational connection.
   ========================================================= */


/* =========================================================
   E01 — MOTION TOKENS
   ========================================================= */

:root {
  --pa1-motion-fast:
    180ms;

  --pa1-motion-medium:
    520ms;

  --pa1-motion-long:
    900ms;

  --pa1-motion-ease:
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --pa1-motion-ease-soft:
    cubic-bezier(
      0.4,
      0,
      0.2,
      1
    );
}


/* =========================================================
   E02 — SCROLL REVEAL
   ========================================================= */

html.pa1-motion-ready
[data-pa1-reveal] {
  opacity:
    0;

  transform:
    translate3d(
      0,
      24px,
      0
    );

  transition:
    opacity
      var(--pa1-motion-long)
      var(--pa1-motion-ease),
    transform
      var(--pa1-motion-long)
      var(--pa1-motion-ease);
}

html.pa1-motion-ready
[data-pa1-reveal].is-visible {
  opacity:
    1;

  transform:
    translate3d(
      0,
      0,
      0
    );
}

html.pa1-motion-ready
[data-pa1-reveal="soft"] {
  transform:
    translate3d(
      0,
      14px,
      0
    );
}

html.pa1-motion-ready
[data-pa1-reveal="left"] {
  transform:
    translate3d(
      -22px,
      0,
      0
    );
}

html.pa1-motion-ready
[data-pa1-reveal="right"] {
  transform:
    translate3d(
      22px,
      0,
      0
    );
}

html.pa1-motion-ready
[data-pa1-reveal="left"].is-visible,
html.pa1-motion-ready
[data-pa1-reveal="right"].is-visible {
  transform:
    translate3d(
      0,
      0,
      0
    );
}


/* =========================================================
   E03 — HERO OPERATIONAL SIGNAL
   ========================================================= */

.pa1-operation-core {
  animation:
    pa1CoreSignal
    4.8s
    var(--pa1-motion-ease-soft)
    infinite;
}

.pa1-operation-map__field::before {
  animation:
    pa1RingSignalOuter
    7.2s
    ease-in-out
    infinite;
}

.pa1-operation-map__field::after {
  animation:
    pa1RingSignalInner
    5.8s
    ease-in-out
    infinite;
}

.pa1-operation-node {
  transition:
    border-color
      var(--pa1-motion-medium)
      var(--pa1-motion-ease),
    background
      var(--pa1-motion-medium)
      var(--pa1-motion-ease),
    transform
      var(--pa1-motion-medium)
      var(--pa1-motion-ease),
    box-shadow
      var(--pa1-motion-medium)
      var(--pa1-motion-ease);
}

.pa1-operation-node.is-signal-active {
  border-color:
    rgba(
      200,
      170,
      114,
      0.43
    );

  background:
    rgba(
      21,
      31,
      23,
      0.97
    );

  box-shadow:
    0 16px 38px
      rgba(
        0,
        0,
        0,
        0.2
      ),
    0 0 24px
      rgba(
        200,
        170,
        114,
        0.065
      );

  transform:
    translate3d(
      0,
      -2px,
      0
    );
}


/* =========================================================
   E04 — MATURITY SIGNAL
   ========================================================= */

.pa1-maturity__row.is-current i::after {
  animation:
    pa1CurrentStage
    2.8s
    ease-in-out
    infinite;
}

.pa1-maturity__row.is-current {
  transition:
    background
      var(--pa1-motion-medium)
      ease;
}


/* =========================================================
   E05 — OPERATIONAL SCANNER
   ========================================================= */

.pa1-scanner::after {
  content:
    "";

  position:
    absolute;

  z-index:
    4;

  left:
    0;

  right:
    0;

  top:
    -18%;

  height:
    18%;

  pointer-events:
    none;

  opacity:
    0.7;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(
        171,
        135,
        80,
        0.07
      ),
      rgba(
        171,
        135,
        80,
        0.28
      ),
      transparent
    );

  animation:
    pa1ScannerSweep
    7.5s
    ease-in-out
    infinite;
}

.pa1-scanner__grid > span {
  transition:
    background
      var(--pa1-motion-medium)
      var(--pa1-motion-ease),
    transform
      var(--pa1-motion-medium)
      var(--pa1-motion-ease);
}

.pa1-scanner__grid > span.is-scan-active {
  background:
    #f8f3e9;

  transform:
    translate3d(
      0,
      -1px,
      0
    );
}


/* =========================================================
   E06 — PARTICIPATION INTERACTION
   ========================================================= */

.pa1-participation-card {
  transition:
    transform
      var(--pa1-motion-medium)
      var(--pa1-motion-ease),
    border-color
      var(--pa1-motion-medium)
      var(--pa1-motion-ease),
    box-shadow
      var(--pa1-motion-medium)
      var(--pa1-motion-ease),
    background
      var(--pa1-motion-medium)
      var(--pa1-motion-ease);
}

.pa1-participation-card > a span,
.pa1-button span,
.pa1-text-link span {
  display:
    inline-block;

  transition:
    transform
      var(--pa1-motion-fast)
      var(--pa1-motion-ease);
}

@media (hover: hover) {

  .pa1-participation-card:hover {
    transform:
      translate3d(
        0,
        -5px,
        0
      );

    box-shadow:
      0 20px 46px
        rgba(
          29,
          38,
          30,
          0.09
        );
  }

  .pa1-participation-card:hover > a span,
  .pa1-button:hover span,
  .pa1-text-link:hover span {
    transform:
      translate3d(
        3px,
        -2px,
        0
      );
  }
}


/* =========================================================
   E07 — PRODUCT SYSTEM
   ========================================================= */

.pa1-product-map__core {
  animation:
    pa1ProductCore
    5.2s
    ease-in-out
    infinite;
}

.pa1-product-map::before {
  animation:
    pa1ProductRingA
    9s
    ease-in-out
    infinite;
}

.pa1-product-map::after {
  animation:
    pa1ProductRingB
    11s
    ease-in-out
    infinite;
}

.pa1-product-map__node {
  transition:
    border-color
      var(--pa1-motion-medium)
      var(--pa1-motion-ease),
    background
      var(--pa1-motion-medium)
      var(--pa1-motion-ease),
    transform
      var(--pa1-motion-medium)
      var(--pa1-motion-ease);
}

.pa1-product-map__node.is-system-active {
  border-color:
    rgba(
      200,
      170,
      114,
      0.38
    );

  background:
    rgba(
      16,
      29,
      19,
      0.99
    );

  transform:
    translate3d(
      0,
      -2px,
      0
    );
}


/* =========================================================
   E08 — CLOSE SIGNAL
   ========================================================= */

.pa1-close::before {
  animation:
    pa1CloseSignal
    8s
    ease-in-out
    infinite;
}


/* =========================================================
   E09 — POINTER RESPONSE
   ========================================================= */

.pa1-operation-map,
.pa1-product-map {
  --pa1-pointer-x:
    50%;

  --pa1-pointer-y:
    50%;
}

.pa1-operation-map::after,
.pa1-product-map > .pa1-product-map__core::after {
  content:
    "";

  position:
    absolute;

  pointer-events:
    none;

  opacity:
    0;

  transition:
    opacity
      320ms
      ease;
}

.pa1-operation-map::after {
  inset:
    0;

  border-radius:
    inherit;

  background:
    radial-gradient(
      circle
      at
      var(--pa1-pointer-x)
      var(--pa1-pointer-y),
      rgba(
        200,
        170,
        114,
        0.07
      ),
      transparent
      28%
    );
}

.pa1-operation-map.is-pointer-active::after {
  opacity:
    1;
}


/* =========================================================
   E10 — KEYFRAMES
   ========================================================= */

@keyframes pa1CoreSignal {

  0%,
  100% {
    box-shadow:
      0 0 0 10px
        rgba(
          200,
          170,
          114,
          0.025
        ),
      0 0 55px
        rgba(
          200,
          170,
          114,
          0.08
        );
  }

  50% {
    box-shadow:
      0 0 0 16px
        rgba(
          200,
          170,
          114,
          0.018
        ),
      0 0 70px
        rgba(
          200,
          170,
          114,
          0.13
        );
  }
}


@keyframes pa1RingSignalOuter {

  0%,
  100% {
    opacity:
      0.48;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(1);
  }

  50% {
    opacity:
      0.85;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(1.035);
  }
}


@keyframes pa1RingSignalInner {

  0%,
  100% {
    opacity:
      0.46;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(1);
  }

  50% {
    opacity:
      0.72;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(0.965);
  }
}


@keyframes pa1CurrentStage {

  0%,
  100% {
    box-shadow:
      0 0 0 0
        rgba(
          200,
          170,
          114,
          0
        );
  }

  45% {
    box-shadow:
      0 0 0 6px
        rgba(
          200,
          170,
          114,
          0.11
        );
  }
}


@keyframes pa1ScannerSweep {

  0% {
    top:
      -20%;

    opacity:
      0;
  }

  12% {
    opacity:
      0.7;
  }

  76% {
    opacity:
      0.56;
  }

  100% {
    top:
      104%;

    opacity:
      0;
  }
}


@keyframes pa1ProductCore {

  0%,
  100% {
    box-shadow:
      0 0 0 12px
        rgba(
          200,
          170,
          114,
          0.018
        ),
      0 0 72px
        rgba(
          200,
          170,
          114,
          0.09
        );
  }

  50% {
    box-shadow:
      0 0 0 18px
        rgba(
          200,
          170,
          114,
          0.014
        ),
      0 0 86px
        rgba(
          200,
          170,
          114,
          0.14
        );
  }
}


@keyframes pa1ProductRingA {

  0%,
  100% {
    opacity:
      0.5;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(1);
  }

  50% {
    opacity:
      0.8;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(1.025);
  }
}


@keyframes pa1ProductRingB {

  0%,
  100% {
    opacity:
      0.42;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(1);
  }

  50% {
    opacity:
      0.7;

    transform:
      translate(
        -50%,
        -50%
      )
      scale(0.975);
  }
}


@keyframes pa1CloseSignal {

  0%,
  100% {
    opacity:
      0.72;

    transform:
      translateY(-50%)
      scale(1);
  }

  50% {
    opacity:
      1;

    transform:
      translateY(-50%)
      scale(1.03);
  }
}


/* =========================================================
   E11 — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html.pa1-motion-ready
  [data-pa1-reveal],
  html.pa1-motion-ready
  [data-pa1-reveal].is-visible {
    opacity:
      1 !important;

    transform:
      none !important;

    transition:
      none !important;
  }

  .pa1-operation-core,
  .pa1-operation-map__field::before,
  .pa1-operation-map__field::after,
  .pa1-maturity__row.is-current i::after,
  .pa1-scanner::after,
  .pa1-product-map__core,
  .pa1-product-map::before,
  .pa1-product-map::after,
  .pa1-close::before {
    animation:
      none !important;
  }

  .pa1-operation-node,
  .pa1-scanner__grid > span,
  .pa1-participation-card,
  .pa1-participation-card > a span,
  .pa1-button span,
  .pa1-text-link span,
  .pa1-product-map__node {
    transition:
      none !important;
  }

  .pa1-operation-node.is-signal-active,
  .pa1-scanner__grid > span.is-scan-active,
  .pa1-product-map__node.is-system-active,
  .pa1-participation-card:hover {
    transform:
      none !important;
  }

  .pa1-operation-map::after {
    display:
      none !important;
  }
}


/* =========================================================
   E12 — MOBILE MOTION CALIBRATION
   ========================================================= */

@media (max-width: 720px) {

  html.pa1-motion-ready
  [data-pa1-reveal] {
    transform:
      translate3d(
        0,
        16px,
        0
      );
  }

  html.pa1-motion-ready
  [data-pa1-reveal].is-visible {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  .pa1-scanner::after {
    opacity:
      0.46;
  }
}