/* ==========================================================================
   Zero Next One BASE NIIKAPPU
   top-sec09.css
   Section 09 smartphone comp override
   --------------------------------------------------------------------------
   Section 09 / Final CTA
   - Full background image
   - HTML text / CTA buttons
   - Smartphone comp first
   - Phase 1 typography refinement
   ========================================================================== */

@media (max-width: 767px) {
  .page-top .p-ending {
    position: relative;
    width: 100%;
    min-height: max(100svh, 215.8vw);
    min-height: max(100dvh, 215.8vw);
    padding: 0 0 44px;
    color: #1f1c16;
    background: #2d2924;
    overflow: hidden;
    isolation: isolate;
  }

  .page-top .p-ending::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../img/top/sec09/sec09_bg_final_cta_sp.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center top;
  }

  .page-top .p-ending__bg,
  .page-top .p-ending__decor,
  .page-top .p-ending__layout,
  .page-top .p-ending__visual {
    display: none !important;
  }

  .page-top .p-ending__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: clamp(106px, 27vw, 132px) 34px 0;
  }

  .page-top .p-ending__heading {
    position: relative;
    isolation: isolate;
    width: min(100%, 360px);
    margin: 0 auto;
    text-align: center;
  }

  .page-top .p-ending__heading::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -24px;
    z-index: -1;
    width: min(112%, 390px);
    height: calc(100% + 42px);
    pointer-events: none;
    transform: translateX(-50%);
    background:
      radial-gradient(
        ellipse at 50% 42%,
        rgba(246, 238, 220, 0.74) 0%,
        rgba(246, 238, 220, 0.48) 48%,
        rgba(246, 238, 220, 0.15) 74%,
        rgba(246, 238, 220, 0) 100%
      );
    filter: blur(2.5px);
  }

  .page-top .p-ending__kicker {
    position: relative;
    display: inline-block;
    margin: 0 0 clamp(18px, 4.5vw, 24px);
    color: #171511;
    font-family: var(--font-label);
    font-size: clamp(0.72rem, 2.86vw, 0.84rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
    text-align: left;
    text-transform: uppercase;
    text-shadow:
      0 1px 6px rgba(246, 238, 220, 0.76),
      0 0 12px rgba(246, 238, 220, 0.34);
  }

  .page-top .p-ending__kicker::after {
    content: "";
    display: block;
    width: 68px;
    height: 1px;
    margin-top: 11px;
    background: currentColor;
    opacity: 0.62;
  }

  .page-top .p-ending__title {
    margin: 0;
    color: #15273d;
    font-family: var(--font-heading);
    font-size: clamp(2.08rem, 8.2vw, 2.58rem);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.065em;
    text-shadow:
      0 2px 10px rgba(246, 238, 220, 0.54),
      0 0 18px rgba(246, 238, 220, 0.26);
  }

  .page-top .p-ending__title span {
    display: inline-block;
    white-space: nowrap;
  }

  .page-top .p-ending__lead {
    margin: clamp(17px, 4.2vw, 24px) 0 0;
    color: #252019;
    font-family: var(--font-body);
    font-size: clamp(0.74rem, 2.9vw, 0.86rem);
    font-weight: 600;
    line-height: 1.72;
    letter-spacing: 0.04em;
    text-shadow:
      0 1px 7px rgba(246, 238, 220, 0.72),
      0 0 12px rgba(246, 238, 220, 0.3);
  }

  .page-top .p-ending__message {
    position: relative;
    isolation: isolate;
    width: min(100%, 360px);
    margin: clamp(300px, 68vw, 352px) auto 0;
    text-align: center;
  }

  .page-top .p-ending__message::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -26px;
    z-index: -1;
    width: min(112%, 390px);
    height: calc(100% + 54px);
    pointer-events: none;
    transform: translateX(-50%);
    background:
      radial-gradient(
        ellipse at 50% 50%,
        rgba(246, 238, 220, 0.74) 0%,
        rgba(246, 238, 220, 0.46) 52%,
        rgba(246, 238, 220, 0.16) 76%,
        rgba(246, 238, 220, 0) 100%
      );
    filter: blur(3px);
  }

  .page-top .p-ending__message p {
    margin: 0;
    color: #252019;
    font-family: var(--font-body);
    font-size: clamp(0.84rem, 3.28vw, 0.98rem);
    font-weight: 600;
    line-height: 2.02;
    letter-spacing: 0.055em;
    text-shadow: 0 1px 7px rgba(246, 238, 220, 0.68);
  }

  .page-top .p-ending__actions {
    display: grid;
    justify-items: center;
    gap: 14px;
    width: min(100%, 352px);
    margin: clamp(22px, 5.2vw, 30px) auto 0;
  }

  .page-top .p-ending__button,
  .page-top .p-ending__faq-link {
    text-decoration: none;
  }

  .page-top .p-ending__button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 0 22px;
    border-radius: 9px;
    font-family: var(--font-ui);
    font-size: clamp(0.96rem, 3.76vw, 1.1rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.065em;
  }

  .page-top .p-ending__button span:first-child {
    justify-self: center;
    transform: translateX(9px);
    white-space: nowrap;
  }

  .page-top .p-ending__button span[aria-hidden="true"] {
    justify-self: end;
    font-size: 1.16em;
    line-height: 1;
  }

  .page-top .p-ending__button--primary {
    color: #fffaf0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
      #b68b16;
    box-shadow:
      0 10px 20px rgba(80, 55, 5, 0.23),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }

  .page-top .p-ending__button--secondary {
    color: #171511;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
      rgba(255, 250, 240, 0.84);
    border: 1px solid rgba(70, 54, 30, 0.12);
    box-shadow:
      0 8px 18px rgba(42, 32, 18, 0.075),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
  }

  .page-top .p-ending__faq-link {
    position: relative;
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 34px;
    padding: 0 0 7px;
    color: #171511;
    font-family: var(--font-ui);
    font-size: clamp(0.84rem, 3.28vw, 0.98rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.055em;
    text-shadow: 0 1px 7px rgba(246, 238, 220, 0.66);
  }

  .page-top .p-ending__faq-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 32px;
    bottom: 0;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
  }

  .page-top .p-ending__faq-link span[aria-hidden="true"] {
    font-size: 1.12em;
    line-height: 1;
  }

  @supports not (height: 100dvh) {
    .page-top .p-ending {
      min-height: max(100vh, 215.8vw);
    }
  }
}

@media (max-width: 374px) {
  .page-top .p-ending {
    min-height: max(100svh, 222vw);
    min-height: max(100dvh, 222vw);
    padding-bottom: 38px;
  }

  .page-top .p-ending__inner {
    padding-top: 92px;
    padding-left: 28px;
    padding-right: 28px;
  }

  .page-top .p-ending__heading {
    width: min(100%, 324px);
  }

  .page-top .p-ending__title {
    font-size: 1.86rem;
  }

  .page-top .p-ending__lead {
    font-size: 0.68rem;
  }

  .page-top .p-ending__message {
    margin-top: 260px;
  }

  .page-top .p-ending__message p {
    font-size: 0.76rem;
  }

  .page-top .p-ending__actions {
    width: min(100%, 322px);
    gap: 12px;
  }

  .page-top .p-ending__button {
    min-height: 52px;
    padding: 0 18px;
    font-size: 0.84rem;
  }

  .page-top .p-ending__faq-link {
    font-size: 0.76rem;
  }

  @supports not (height: 100dvh) {
    .page-top .p-ending {
      min-height: max(100vh, 222vw);
    }
  }
}

/* --------------------------------------------------------------------------
   Section 09 / PC v3.1 - Closing Vista Final Polish
   --------------------------------------------------------------------------
   - Preserve the completed smartphone layout above.
   - Keep Header / Footer / main.css / JS untouched.
   - Use the PC Final CTA background as a full-width closing vista.
   - Keep the primary consultation CTA strongest while refining its brass tone.
   - Downgrade secondary / FAQ routes to quiet text routes.
   - Connect the section to the existing Footer from the Section 09 side only.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .page-top .p-ending {
    --sec09-night: #101720;
    --sec09-night-deep: #101720;
    --sec09-ink: var(--color-white-soft, #fffaf0);
    --sec09-ink-soft: rgba(255, 250, 240, 0.88);
    --sec09-gold: #b89c5a;
    --sec09-gold-hover: #c4a763;

    position: relative;
    width: 100%;
    min-height: clamp(760px, 92svh, 920px);
    min-height: clamp(760px, 92dvh, 920px);
    padding: 0;
    color: var(--sec09-ink);
    background: var(--sec09-night-deep);
    overflow: hidden;
    isolation: isolate;
  }

  .page-top .p-ending::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../img/top/sec09/sec09_bg_final_cta_pc.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 52% center;
    opacity: 0.95;
    transform: scale(1.006);
    transform-origin: center center;
  }

  .page-top .p-ending::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse at 50% 42%,
        rgba(8, 15, 18, 0.62) 0%,
        rgba(8, 15, 18, 0.45) 34%,
        rgba(8, 15, 18, 0.18) 58%,
        rgba(8, 15, 18, 0) 76%
      ),
      radial-gradient(
        ellipse at 50% 48%,
        rgba(255, 246, 218, 0.12) 0%,
        rgba(255, 246, 218, 0.05) 34%,
        rgba(255, 246, 218, 0) 66%
      ),
      linear-gradient(
        90deg,
        rgba(9, 16, 20, 0.62) 0%,
        rgba(9, 16, 20, 0.26) 24%,
        rgba(9, 16, 20, 0.1) 50%,
        rgba(9, 16, 20, 0.28) 76%,
        rgba(9, 16, 20, 0.66) 100%
      ),
      linear-gradient(
        180deg,
        rgba(9, 16, 20, 0.18) 0%,
        rgba(9, 16, 20, 0.11) 36%,
        rgba(9, 16, 20, 0.38) 66%,
        rgba(16, 23, 32, 0.86) 84%,
        var(--sec09-night) 100%
      );
  }

  .page-top .p-ending__bg,
  .page-top .p-ending__decor,
  .page-top .p-ending__layout,
  .page-top .p-ending__visual {
    display: none !important;
  }

  .page-top .p-ending__inner {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    justify-items: center;
    width: min(var(--pc-content-max, 1180px), 100%);
    min-height: inherit;
    margin: 0 auto;
    padding:
      clamp(116px, 12vw, 152px)
      var(--side-padding)
      clamp(144px, 13vw, 196px);
    text-align: center;
  }

  .page-top .p-ending__heading {
    position: relative;
    isolation: isolate;
    width: min(100%, 700px);
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .page-top .p-ending__heading::before {
    content: "";
    position: absolute;
    top: 47%;
    left: 50%;
    z-index: -1;
    width: min(134%, 920px);
    height: calc(100% + 104px);
    pointer-events: none;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(
        ellipse at 50% 46%,
        rgba(8, 15, 18, 0.56) 0%,
        rgba(8, 15, 18, 0.34) 48%,
        rgba(8, 15, 18, 0.12) 72%,
        rgba(8, 15, 18, 0) 100%
      );
    filter: blur(4px);
  }

  .page-top .p-ending__kicker {
    position: relative;
    display: inline-block;
    margin: 0 0 clamp(22px, 2.8vw, 32px);
    color: rgba(255, 250, 240, 0.74);
    font-family: var(--font-label);
    font-size: clamp(0.68rem, 0.85vw, 0.76rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.22em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.36);
  }

  .page-top .p-ending__kicker::after {
    content: "";
    display: block;
    width: clamp(50px, 5.2vw, 72px);
    height: 1px;
    margin: 13px auto 0;
    background:
      linear-gradient(
        90deg,
        rgba(230, 184, 90, 0),
        rgba(230, 184, 90, 0.62) 50%,
        rgba(230, 184, 90, 0)
      );
  }

  .page-top .p-ending__title {
    margin: 0;
    color: var(--sec09-ink);
    font-family: var(--font-heading);
    font-size: clamp(3.05rem, 6.5vw, 5rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.042em;
    text-shadow:
      0 5px 26px rgba(0, 0, 0, 0.62),
      0 1px 0 rgba(0, 0, 0, 0.36);
  }

  .page-top .p-ending__title span {
    display: inline-block;
    white-space: nowrap;
  }

  .page-top .p-ending__lead {
    width: min(100%, 54ch);
    margin: clamp(22px, 2.6vw, 32px) auto 0;
    color: var(--sec09-ink-soft);
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 1.14vw, 1.1rem);
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.036em;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  }

  .page-top .p-ending__lead br {
    display: none;
  }

  .page-top .p-ending__message {
    position: relative;
    isolation: isolate;
    width: min(100%, 54ch);
    margin: clamp(28px, 3vw, 42px) auto 0;
    padding: 0;
    text-align: center;
  }

  .page-top .p-ending__message::before {
    content: none;
    display: none;
  }

  .page-top .p-ending__message p {
    margin: 0;
    color: rgba(255, 250, 240, 0.78);
    font-family: var(--font-body);
    font-size: clamp(0.92rem, 1.02vw, 1.02rem);
    font-weight: 500;
    line-height: 1.95;
    letter-spacing: 0.038em;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.46);
  }

  .page-top .p-ending__message br {
    display: none;
  }

  .page-top .p-ending__actions {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 17px;
    width: min(100%, 460px);
    margin: clamp(30px, 3.4vw, 46px) auto 0;
  }

  .page-top .p-ending__button,
  .page-top .p-ending__faq-link {
    color: inherit;
    text-decoration: none;
  }

  .page-top .p-ending__button {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px;
    align-items: center;
    column-gap: 14px;
    width: 100%;
    min-height: 62px;
    padding: 0 24px 0 30px;
    border-radius: 7px;
    font-family: var(--font-ui);
    font-size: clamp(0.94rem, 1vw, 1.04rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.058em;
    transition:
      color 0.28s var(--ease-out-craft),
      background-color 0.28s var(--ease-out-craft),
      border-color 0.28s var(--ease-out-craft),
      opacity 0.28s var(--ease-out-craft),
      transform 0.28s var(--ease-out-craft),
      box-shadow 0.28s var(--ease-out-craft);
  }

  .page-top .p-ending__button span:first-child {
    min-width: 0;
    justify-self: center;
    transform: translateX(12px);
    white-space: nowrap;
  }

  .page-top .p-ending__button span[aria-hidden="true"] {
    justify-self: end;
    font-size: 1.12em;
    line-height: 1;
    transition: transform 0.28s var(--ease-out-craft);
  }

  .page-top .p-ending__button--primary {
    color: #fffaf0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0)),
      var(--sec09-gold);
    border: 1px solid rgba(255, 250, 240, 0.18);
    box-shadow:
      0 11px 24px rgba(49, 36, 12, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
    text-shadow: 0 1px 0 rgba(45, 28, 2, 0.28);
  }

  .page-top .p-ending__button--secondary {
    width: fit-content;
    min-width: min(100%, 320px);
    min-height: 42px;
    padding: 0 0 7px;
    border: 0;
    border-radius: 0;
    color: rgba(255, 250, 240, 0.86);
    background: transparent;
    box-shadow: none;
    font-size: clamp(0.86rem, 0.95vw, 0.96rem);
    letter-spacing: 0.05em;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.42);
  }

  .page-top .p-ending__button--secondary::after {
    content: "";
    position: absolute;
    left: 0;
    right: 28px;
    bottom: 0;
    height: 1px;
    background:
      linear-gradient(
        90deg,
        rgba(210, 174, 94, 0.72),
        rgba(255, 250, 240, 0.3)
      );
    transform: scaleX(0.86);
    transform-origin: left center;
    transition: transform 0.28s var(--ease-out-craft), opacity 0.28s var(--ease-out-craft);
  }

  .page-top .p-ending__button--secondary span:first-child {
    transform: none;
  }

  .page-top .p-ending__button--secondary span[aria-hidden="true"] {
    font-size: 1.04em;
  }

  .page-top .p-ending__faq-link {
    position: relative;
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 36px;
    margin-top: 2px;
    padding: 0 0 6px;
    color: rgba(255, 250, 240, 0.82);
    font-family: var(--font-ui);
    font-size: clamp(0.82rem, 0.9vw, 0.92rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.055em;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.42);
    transition:
      color 0.28s var(--ease-out-craft),
      opacity 0.28s var(--ease-out-craft);
  }

  .page-top .p-ending__faq-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 20px;
    bottom: 0;
    height: 1px;
    background: currentColor;
    opacity: 0.68;
    transform: scaleX(0.78);
    transform-origin: left center;
    transition: transform 0.28s var(--ease-out-craft), opacity 0.28s var(--ease-out-craft);
  }

  .page-top .p-ending__faq-link span[aria-hidden="true"] {
    font-size: 1.04em;
    line-height: 1;
    transition: transform 0.28s var(--ease-out-craft);
  }
}

@media (min-width: 1024px) {
  .page-top .p-ending {
    min-height: clamp(780px, 88svh, 940px);
    min-height: clamp(780px, 88dvh, 940px);
  }

  .page-top .p-ending::before {
    background-position: 52% center;
  }

  .page-top .p-ending__inner {
    padding-top: clamp(124px, 11vw, 160px);
    padding-bottom: clamp(152px, 13vw, 206px);
  }

  .page-top .p-ending__heading {
    width: min(100%, 760px);
  }
}

@media (min-width: 1280px) {
  .page-top .p-ending {
    min-height: clamp(820px, 86svh, 960px);
    min-height: clamp(820px, 86dvh, 960px);
  }

  .page-top .p-ending::before {
    background-position: center center;
  }

  .page-top .p-ending__heading {
    width: min(100%, 820px);
  }

  .page-top .p-ending__title {
    font-size: clamp(3.85rem, 5.65vw, 5.12rem);
  }
}

@media (min-width: 1440px) {
  .page-top .p-ending {
    min-height: clamp(860px, 88svh, 980px);
    min-height: clamp(860px, 88dvh, 980px);
  }

  .page-top .p-ending__title {
    font-size: clamp(4.15rem, 5.35vw, 5.24rem);
  }

  .page-top .p-ending__lead {
    font-size: 1.08rem;
  }

  .page-top .p-ending__message p {
    font-size: 0.98rem;
  }
}

@media (min-width: 1800px) {
  .page-top .p-ending {
    min-height: min(94svh, 1040px);
    min-height: min(94dvh, 1040px);
  }

  .page-top .p-ending__inner {
    width: min(1280px, 100%);
  }

  .page-top .p-ending__title {
    font-size: 5.35rem;
  }
}

@media (min-width: 1024px) and (max-height: 820px) {
  .page-top .p-ending {
    min-height: clamp(700px, 96svh, 820px);
    min-height: clamp(700px, 96dvh, 820px);
  }

  .page-top .p-ending__inner {
    padding-top: 108px;
    padding-bottom: 132px;
  }

  .page-top .p-ending__kicker {
    margin-bottom: 20px;
  }

  .page-top .p-ending__title {
    font-size: clamp(2.9rem, 5.2vw, 4.3rem);
    line-height: 1.24;
  }

  .page-top .p-ending__lead {
    margin-top: 20px;
    font-size: 0.95rem;
    line-height: 1.86;
  }

  .page-top .p-ending__message {
    margin-top: 22px;
  }

  .page-top .p-ending__message p {
    font-size: 0.88rem;
    line-height: 1.82;
  }

  .page-top .p-ending__actions {
    margin-top: 24px;
    gap: 12px;
  }

  .page-top .p-ending__button--primary {
    min-height: 58px;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .page-top .p-ending__button--primary:hover {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
      var(--sec09-gold-hover);
    border-color: rgba(255, 250, 240, 0.28);
    box-shadow:
      0 12px 26px rgba(49, 36, 12, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.26);
    transform: translateY(-1px);
  }

  .page-top .p-ending__button--primary:hover span[aria-hidden="true"] {
    transform: translateX(3px);
  }

  .page-top .p-ending__button--secondary:hover {
    color: var(--sec09-ink);
  }

  .page-top .p-ending__button--secondary:hover::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .page-top .p-ending__button--secondary:hover span[aria-hidden="true"] {
    transform: translateX(3px);
  }

  .page-top .p-ending__faq-link:hover {
    color: rgba(255, 250, 240, 0.92);
  }

  .page-top .p-ending__faq-link:hover::after {
    opacity: 0.9;
    transform: scaleX(1);
  }

  .page-top .p-ending__faq-link:hover span[aria-hidden="true"] {
    transform: translate(3px, -1px);
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .page-top .p-ending::before,
  .page-top .p-ending__button,
  .page-top .p-ending__button span[aria-hidden="true"],
  .page-top .p-ending__button--secondary::after,
  .page-top .p-ending__faq-link,
  .page-top .p-ending__faq-link::after,
  .page-top .p-ending__faq-link span[aria-hidden="true"] {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}