@charset "UTF-8";

/* =========================================================
   TOP MOBILE — SERVICE HUB REVEAL v2
   Common behavior with service pages:
   - TOP icon in initial HERO
   - SCROLL label + complete down arrow
   - first scroll runs a 5 second animation
   - completed graphic stays in the page
   - tap the completed graphic to replay only the graphic
   ========================================================= */

.top-service-reveal,
.growth-hero__mobile-icon,
.growth-hero__mobile-scroll{
  display:none;
}

@media screen and (max-width:767px){
  :root{
    --top-reveal-header:72px;
    --top-reveal-panel-progress:0;
    --top-reveal-node-progress:0;
    --top-reveal-connect-progress:0;
    --top-reveal-growth-progress:0;
    --top-reveal-done-progress:0;
  }

  html.top-mobile-reveal-running,
  html.top-mobile-replay-running{
    overscroll-behavior-y:none;
  }

  .growth-page[data-top-mobile-reveal]{
    overflow:visible!important;
  }

  /* ---------- Initial TOP HERO ---------- */
  .growth-page .growth-hero[data-top-reveal-hero]{
    position:relative;
    z-index:1;
    min-height:calc(100svh - var(--top-reveal-header))!important;
  }

  .growth-page .growth-hero__inner{
    min-height:calc(100svh - var(--top-reveal-header))!important;
  }

  .growth-hero__mobile-icon{
    position:relative;
    width:clamp(118px,34vw,150px);
    height:clamp(118px,34vw,150px);
    margin:14px auto 2px;
    display:grid;
    place-items:center;
    isolation:isolate;
  }

  .growth-hero__mobile-icon::before{
    content:"";
    position:absolute;
    inset:13%;
    z-index:-2;
    border-radius:50%;
    background:radial-gradient(circle,rgba(22,135,239,.20),rgba(111,210,242,.08) 42%,transparent 72%);
    filter:blur(11px);
  }

  .growth-hero__mobile-icon-ring{
    position:absolute;
    inset:8%;
    z-index:-1;
    border:1px solid rgba(22,135,239,.20);
    border-radius:50%;
    box-shadow:
      0 0 0 10px rgba(22,135,239,.035),
      0 14px 30px rgba(6,27,61,.07);
  }

  .growth-hero__mobile-icon img{
    width:116%;
    max-width:none;
    height:116%;
    object-fit:contain;
    filter:drop-shadow(0 15px 20px rgba(10,77,150,.12));
  }

  .growth-hero__mobile-scroll{
    position:relative;
    width:max-content;
    margin:16px auto max(16px,env(safe-area-inset-bottom));
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    color:rgba(6,27,61,.58);
    font-size:10px;
    font-weight:800;
    line-height:1;
    letter-spacing:.20em;
  }

  .growth-hero__mobile-scroll-arrow{
    display:block;
    overflow:visible;
  }

  .growth-hero__mobile-scroll-arrow path{
    fill:none;
    stroke:#1687ef;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* Existing desktop visual remains off on small smartphones. */
  .growth-page .growth-hero__visual{
    display:none!important;
  }

  /* ---------- SERVICES + persistent reveal ---------- */
  .growth-page .growth-services[data-top-reveal-services]{
    position:relative;
    z-index:3;
    overflow:visible!important;
  }

  .top-service-reveal{
    position:absolute;
    top:0;
    right:0;
    left:0;
    z-index:40;
    height:calc(100svh - var(--top-reveal-header));
    display:block;
    pointer-events:none;
    opacity:1;
    transform:translate3d(0,calc((1 - var(--top-reveal-panel-progress)) * 100svh),0);
    will-change:transform,opacity;
    outline:none;
  }

  .top-service-reveal__panel{
    position:relative;
    width:100%;
    height:100%;
    min-height:610px;
    padding:28px 16px 24px;
    overflow:hidden;
    border:1px solid rgba(22,135,239,.14);
    border-top-color:rgba(22,135,239,.24);
    border-radius:28px 28px 0 0;
    background:
      radial-gradient(circle at 84% 14%,rgba(111,210,242,.18),transparent 25%),
      linear-gradient(180deg,#ffffff 0%,#f7fbff 58%,#eef7ff 100%);
    box-shadow:0 -22px 56px rgba(6,27,61,.13);
  }

  .top-service-reveal__heading{
    padding:0 8px;
    text-align:left;
  }

  .top-service-reveal__heading>p{
    margin:0 0 8px;
    color:#1687ef;
    font-size:9px;
    font-weight:900;
    letter-spacing:.18em;
  }

  .top-service-reveal__heading h2{
    margin:0;
    color:#061b3d;
    font-family:"Noto Serif JP","Yu Mincho",serif;
    font-size:clamp(25px,7.2vw,31px);
    font-weight:600;
    line-height:1.45;
    letter-spacing:.025em;
  }

  .top-service-reveal__heading>span{
    display:block;
    margin-top:9px;
    color:#596b81;
    font-size:10px;
    line-height:1.75;
  }

  /* Replay hint: same interaction pattern as service pages. */
  .top-service-reveal__replay-hint{
    position:absolute;
    top:22px;
    right:15px;
    z-index:30;
    min-height:28px;
    padding:4px 9px;
    display:flex;
    align-items:center;
    gap:5px;
    border:1px solid rgba(22,135,239,.18);
    border-radius:999px;
    color:#1687ef;
    background:rgba(255,255,255,.92);
    box-shadow:0 6px 16px rgba(6,27,61,.07);
    font-size:8px;
    font-weight:800;
    line-height:1;
    opacity:0;
    transform:translateY(-5px);
    transition:opacity .2s ease,transform .2s ease;
    pointer-events:none;
  }

  .top-service-reveal__replay-hint i{
    font-style:normal;
    font-size:13px;
    line-height:1;
  }

  html.top-mobile-reveal-complete .top-service-reveal__replay-hint,
  html.top-mobile-replay-running .top-service-reveal__replay-hint{
    opacity:1;
    transform:none;
  }

  html.top-mobile-replay-running .top-service-reveal__replay-hint b::after{
    content:" 再生中";
  }

  .top-service-reveal__hub{
    position:relative;
    width:min(100%,380px);
    height:360px;
    margin:12px auto 0;
  }

  .top-service-reveal__core{
    position:absolute;
    top:50%;
    left:50%;
    z-index:8;
    width:112px;
    height:112px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(22,135,239,.36);
    border-radius:50%;
    color:#061b3d;
    background:
      radial-gradient(circle at 35% 28%,#fff 0 32%,rgba(255,255,255,.84) 54%,rgba(237,248,255,.96) 100%);
    box-shadow:
      0 18px 40px rgba(13,94,180,.14),
      0 0 0 12px rgba(22,135,239,.055),
      inset 0 1px 0 #fff;
    transform:translate(-50%,-50%) scale(calc(.78 + var(--top-reveal-connect-progress) * .22));
  }

  .top-service-reveal__core::before,
  .top-service-reveal__core::after{
    content:"";
    position:absolute;
    inset:-19px;
    border:1px solid rgba(22,135,239,.14);
    border-radius:50%;
  }

  .top-service-reveal__core::after{
    inset:-34px;
    border-color:rgba(111,210,242,.13);
  }

  .top-service-reveal__core strong{
    font-family:"Noto Serif JP","Yu Mincho",serif;
    font-size:22px;
    font-weight:600;
    letter-spacing:.04em;
  }

  .top-service-reveal__core small{
    margin-top:3px;
    color:#1687ef;
    font-size:7px;
    font-weight:900;
    letter-spacing:.14em;
  }

  .top-service-reveal__node{
    --node-start-x:0px;
    --node-start-y:0px;
    position:absolute;
    z-index:10;
    width:108px;
    min-height:54px;
    padding:6px 7px;
    display:grid;
    grid-template-columns:38px 1fr;
    align-items:center;
    gap:6px;
    border:1px solid color-mix(in srgb,var(--node-color) 38%,transparent);
    border-radius:15px;
    color:#061b3d;
    background:rgba(255,255,255,.96);
    box-shadow:0 10px 24px rgba(6,27,61,.075);
    opacity:var(--top-reveal-node-progress);
    transform:translate3d(
      calc(var(--node-start-x) * (1 - var(--top-reveal-node-progress))),
      calc(var(--node-start-y) * (1 - var(--top-reveal-node-progress))),0
    ) scale(calc(.84 + var(--top-reveal-node-progress) * .16));
    will-change:transform,opacity;
  }

  .top-service-reveal__icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--node-color) 23%,transparent);
    border-radius:11px;
    background:linear-gradient(145deg,#fff,#f2f9ff);
  }

  .top-service-reveal__icon img{
    width:120%;
    max-width:none;
    height:120%;
    object-fit:contain;
    mix-blend-mode:multiply;
  }

  .top-service-reveal__node>span:last-child{
    min-width:0;
    display:block;
  }

  .top-service-reveal__node b{
    display:block;
    overflow:hidden;
    color:var(--node-color);
    font-size:8px;
    line-height:1.15;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .top-service-reveal__node small{
    display:block;
    margin-top:4px;
    color:#64758a;
    font-size:7px;
    font-weight:700;
  }

  .top-service-reveal__node--01{top:38px;left:2px;--node-start-x:-130px;--node-start-y:18px;}
  .top-service-reveal__node--02{top:4px;left:50%;margin-left:-54px;--node-start-x:0px;--node-start-y:-110px;}
  .top-service-reveal__node--03{top:38px;right:2px;--node-start-x:130px;--node-start-y:18px;}
  .top-service-reveal__node--04{bottom:36px;left:2px;--node-start-x:-130px;--node-start-y:42px;}
  .top-service-reveal__node--05{bottom:2px;left:50%;margin-left:-54px;--node-start-x:0px;--node-start-y:110px;}
  .top-service-reveal__node--06{right:2px;bottom:36px;--node-start-x:130px;--node-start-y:42px;}

  .top-service-reveal__lines{
    position:absolute;
    inset:15px 0 15px;
    z-index:4;
    width:100%;
    height:calc(100% - 30px);
    overflow:visible;
    pointer-events:none;
  }

  .top-service-reveal__line{
    fill:none;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-dasharray:1;
    stroke-dashoffset:calc(1 - var(--top-reveal-connect-progress));
  }

  .top-service-reveal__line--01{stroke:#e60012;}
  .top-service-reveal__line--02{stroke:#0b72e7;}
  .top-service-reveal__line--03{stroke:#1687ef;}
  .top-service-reveal__line--04{stroke:#24272c;}
  .top-service-reveal__line--05{stroke:#00856a;}
  .top-service-reveal__line--06{stroke:#5b22a8;}

  .top-service-reveal__status{
    margin:2px 0 0;
    color:#1687ef;
    font-size:8px;
    font-weight:900;
    letter-spacing:.16em;
    text-align:center;
    opacity:var(--top-reveal-done-progress);
  }

  /* First run: actual SERVICES waits behind the animated sheet. */
  html.top-mobile-reveal-running .growth-services>.growth-container{
    opacity:.12;
    pointer-events:none;
  }

  .growth-services>.growth-container{
    transition:opacity .25s ease;
  }

  /*
   * Completion:
   * change the animated sheet from overlay to normal document flow.
   * The completed graphic therefore remains above the real SERVICES section.
   */
  html.top-mobile-reveal-complete .top-service-reveal,
  html.top-mobile-replay-running .top-service-reveal{
    position:relative;
    top:auto;
    right:auto;
    left:auto;
    z-index:5;
    width:calc(100% - 24px);
    height:clamp(500px,68svh,590px);
    margin:0 auto 24px;
    pointer-events:auto;
    cursor:pointer;
    opacity:1;
    transform:none!important;
  }

  html.top-mobile-reveal-complete .top-service-reveal__panel,
  html.top-mobile-replay-running .top-service-reveal__panel{
    min-height:0;
    height:100%;
    border-radius:24px;
    box-shadow:0 16px 38px rgba(6,27,61,.09);
  }

  html.top-mobile-reveal-complete .growth-services>.growth-container,
  html.top-mobile-replay-running .growth-services>.growth-container{
    opacity:1;
    pointer-events:auto;
  }

  html.top-mobile-reveal-complete .top-service-reveal:focus-visible{
    box-shadow:0 0 0 3px rgba(22,135,239,.22);
    border-radius:24px;
  }

  /* Existing service icons remain visible on mobile cards. */
  .growth-services .growth-service-card__icon{
    width:64px!important;
    height:64px!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 64px!important;
    overflow:hidden!important;
    border-radius:18px!important;
  }

  .growth-services .growth-service-card__icon img{
    display:block!important;
    width:118%!important;
    height:118%!important;
    max-width:none!important;
    object-fit:contain!important;
  }

  @media (max-height:720px){
    .growth-hero__mobile-icon{
      width:112px;
      height:112px;
      margin-top:8px;
    }

    .growth-hero__mobile-scroll{
      margin-top:10px;
    }

    .top-service-reveal__panel{
      padding-top:18px;
      min-height:560px;
    }

    .top-service-reveal__heading h2{
      font-size:23px;
    }

    .top-service-reveal__heading>span{
      font-size:9px;
    }

    .top-service-reveal__hub{
      height:326px;
      margin-top:5px;
      transform:scale(.91);
      transform-origin:top center;
    }

    html.top-mobile-reveal-complete .top-service-reveal,
    html.top-mobile-replay-running .top-service-reveal{
      height:520px;
    }
  }

  @media (prefers-reduced-motion:reduce){
    .top-service-reveal{
      position:relative!important;
      width:calc(100% - 24px)!important;
      height:520px!important;
      margin:0 auto 24px!important;
      opacity:1!important;
      transform:none!important;
      pointer-events:auto!important;
    }

    .top-service-reveal__replay-hint{
      display:none!important;
    }
  }

  /* v5: legacy growth route must never render */
  .top-service-reveal__growth-line,
  .top-service-reveal__growth-arrow{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
  }


  /* =========================================================
     v6 | SMARTPHONE HERO WIDTH / ALIGNMENT NORMALIZATION
     All HERO elements share one horizontal rhythm.
     ========================================================= */

  .growth-page .growth-hero{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  .growth-page .growth-hero .growth-container,
  .growth-page .growth-hero .growth-hero__inner{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-right:18px!important;
    padding-left:18px!important;
  }

  .growth-page .growth-hero .growth-hero__inner{
    display:block!important;
  }

  .growth-page .growth-hero .growth-hero__content{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }

  .growth-page .growth-hero h1,
  .growth-page .growth-hero .growth-hero__lead{
    width:100%!important;
    max-width:100%!important;
    margin-right:0!important;
    margin-left:0!important;
    overflow-wrap:anywhere;
  }

  .growth-page .growth-hero h1{
    font-size:clamp(31px,8.1vw,38px)!important;
    line-height:1.44!important;
    letter-spacing:.01em!important;
  }

  .growth-page .growth-hero .growth-hero__lead{
    margin-top:18px!important;
    font-size:clamp(12px,3.25vw,14px)!important;
    line-height:1.9!important;
  }

  /* Icon stays centered and never changes the content width. */
  .growth-page .growth-hero .growth-hero__mobile-icon{
    margin-right:auto!important;
    margin-left:auto!important;
  }

  /* CTA uses exactly the same available width as copy/stats. */
  .growth-page .growth-hero .growth-actions{
    width:100%!important;
    max-width:none!important;
    margin:18px 0 0!important;
    padding:0!important;
  }

  .growth-page .growth-hero .growth-actions > .growth-button{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    justify-content:center!important;
    gap:26px!important;
    padding-right:18px!important;
    padding-left:18px!important;
  }

  /* Reset old negative-margin stats rules. */
  .growth-page .growth-hero .growth-hero__stats{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:0!important;
    margin:20px 0 0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
  }

  .growth-page .growth-hero .growth-hero__stats article,
  .growth-page .growth-hero .growth-hero__stats article:nth-child(3){
    width:auto!important;
    min-width:0!important;
    min-height:112px!important;
    margin:0!important;
    padding:20px 4px 12px!important;
    overflow:hidden!important;
    border-radius:13px!important;
    background-size:100% 100%!important;
  }

  .growth-page .growth-hero .growth-hero__stats article + article{
    margin-left:0!important;
  }

  .growth-page .growth-hero .growth-hero__stats .growth-stat__content,
  .growth-page .growth-hero .growth-hero__stats article > div{
    width:100%!important;
    min-width:0!important;
    padding:0!important;
  }

  .growth-page .growth-hero .growth-hero__stats small{
    display:block!important;
    width:100%!important;
    font-size:clamp(7px,2.05vw,9px)!important;
    line-height:1.35!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }

  .growth-page .growth-hero .growth-hero__stats p,
  .growth-page .growth-hero .growth-hero__stats article:nth-child(3) p{
    width:100%!important;
    margin:6px 0 0!important;
    display:flex!important;
    align-items:baseline!important;
    justify-content:center!important;
    gap:2px!important;
    white-space:nowrap!important;
  }

  .growth-page .growth-hero .growth-hero__stats strong{
    font-size:clamp(24px,7.6vw,32px)!important;
    line-height:1!important;
    letter-spacing:-.035em!important;
  }

  .growth-page .growth-hero .growth-hero__stats article:nth-child(3) strong{
    font-size:clamp(21px,6.8vw,29px)!important;
  }

  .growth-page .growth-hero .growth-hero__stats em{
    flex:0 0 auto!important;
    font-size:clamp(6px,1.8vw,8px)!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }

  .growth-page .growth-hero .growth-stat__stars{
    margin-top:10px!important;
    font-size:5px!important;
    letter-spacing:.25em!important;
  }

  .growth-page .growth-hero .growth-hero__mobile-scroll{
    margin-right:auto!important;
    margin-left:auto!important;
  }

  /* Narrow devices: preserve 3 columns, reduce only internal type. */
  @media (max-width:374px){
    .growth-page .growth-hero .growth-container,
    .growth-page .growth-hero .growth-hero__inner{
      padding-right:14px!important;
      padding-left:14px!important;
    }

    .growth-page .growth-hero h1{
      font-size:clamp(29px,8vw,33px)!important;
    }

    .growth-page .growth-hero .growth-hero__stats{
      gap:5px!important;
    }

    .growth-page .growth-hero .growth-hero__stats article,
    .growth-page .growth-hero .growth-hero__stats article:nth-child(3){
      min-height:104px!important;
      padding:18px 2px 10px!important;
    }

    .growth-page .growth-hero .growth-hero__stats strong{
      font-size:clamp(22px,7.3vw,27px)!important;
    }

    .growth-page .growth-hero .growth-hero__stats article:nth-child(3) strong{
      font-size:clamp(19px,6.5vw,25px)!important;
    }
  }


  /* =========================================================
     v7 | HEADER / PAGE GUTTER UNIFICATION
     The original TOP mobile CSS used:
       .growth-page { padding-top:64px; }
       .growth-container { padding-inline:14px; }
     while the added HERO used 18px.
     Unify every mobile TOP section to one horizontal gutter.
     ========================================================= */

  :root{
    --top-mobile-gutter:20px;
  }

  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:clip!important;
  }

  .growth-page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding-top:0!important;
    overflow-x:clip!important;
  }

  /* All TOP sections align to the same left/right guide as the header. */
  .growth-page .growth-container,
  .growth-page .growth-hero .growth-container,
  .growth-page .growth-hero .growth-hero__inner{
    width:100%!important;
    max-width:none!important;
    margin-right:0!important;
    margin-left:0!important;
    padding-right:var(--top-mobile-gutter)!important;
    padding-left:var(--top-mobile-gutter)!important;
    box-sizing:border-box!important;
  }

  /* Header-to-HERO vertical spacing: avoid the old duplicate 64px page padding. */
  .growth-page .growth-hero .growth-hero__inner{
    padding-top:22px!important;
  }

  .growth-page .growth-hero .growth-hero__content{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    inset:auto!important;
  }

  .growth-page .growth-hero h1,
  .growth-page .growth-hero .growth-hero__lead,
  .growth-page .growth-hero .growth-actions,
  .growth-page .growth-hero .growth-hero__stats{
    width:100%!important;
    max-width:100%!important;
    margin-right:0!important;
    margin-left:0!important;
  }

  /* Prevent any inherited negative translations/margins from desktop/tablet rules. */
  .growth-page .growth-hero,
  .growth-page .growth-hero__inner,
  .growth-page .growth-hero__content,
  .growth-page .growth-hero__stats,
  .growth-page .growth-hero__stats article{
    transform:none!important;
  }

  .growth-page .growth-hero__stats,
  .growth-page .growth-hero__stats article,
  .growth-page .growth-hero__stats article + article{
    margin-left:0!important;
    margin-right:0!important;
  }

  /* The persistent reveal card uses the same side guide. */
  html.top-mobile-reveal-complete .top-service-reveal,
  html.top-mobile-replay-running .top-service-reveal{
    width:calc(100% - (var(--top-mobile-gutter) * 2))!important;
    margin-right:var(--top-mobile-gutter)!important;
    margin-left:var(--top-mobile-gutter)!important;
  }

  /* SERVICES and every following TOP container inherit the same gutter. */
  .growth-page > .growth-section > .growth-container,
  .growth-page .growth-final-cta > .growth-container{
    padding-right:var(--top-mobile-gutter)!important;
    padding-left:var(--top-mobile-gutter)!important;
  }

  @media (max-width:374px){
    :root{
      --top-mobile-gutter:16px;
    }

    .growth-page .growth-hero .growth-hero__inner{
      padding-top:18px!important;
    }
  }


  /* =========================================================
     v8 | MOBILE FOOTER — FOLLOW / FIXED POSITION OFF
     Keep footer in normal document flow on smartphone TOP.
     ========================================================= */
  body > #footer,
  #footer,
  #footer .footer,
  #footer footer{
    position:static!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    translate:none!important;
    z-index:auto!important;
  }

  #footer{
    display:block!important;
    flex:0 0 auto!important;
    margin-top:0!important;
  }

  #footer .footer{
    min-height:0!important;
  }

  /* Disable sticky/fixed descendants if footer.css applies them. */
  #footer [style*="position: fixed"],
  #footer [style*="position:fixed"],
  #footer [style*="position: sticky"],
  #footer [style*="position:sticky"]{
    position:static!important;
    inset:auto!important;
    transform:none!important;
  }


  /* =========================================================
     v9 | FIXED HEADER OFFSET + REMOVE MOBILE CONTACT BAR
     ========================================================= */

  /* The header is fixed on the live site.
     Use the JS-measured header height so the first headline can never sit under it. */
  .growth-page .growth-hero .growth-hero__inner{
    padding-top:calc(var(--top-reveal-header, 72px) + 18px)!important;
  }

  /* Give the first line a little extra breathing room below the fixed header. */
  .growth-page .growth-hero h1{
    margin-top:0!important;
  }

  /* Old fixed smartphone contact bar: disable defensively even if stale HTML/CSS remains cached. */
  .growth-mobile-actions{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    position:static!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  /* Remove legacy bottom padding that existed only to make room for the fixed contact bar. */
  body,
  .growth-page{
    padding-bottom:0!important;
  }

  @media (max-height:720px){
    .growth-page .growth-hero .growth-hero__inner{
      padding-top:calc(var(--top-reveal-header, 72px) + 12px)!important;
    }
  }

}


@media screen and (max-width:767px){
  /* v10 | Supplied company emblem replaces center company name */
  .top-service-reveal__core{
    padding:9px 8px 7px!important;
  }

  .top-service-reveal__core-emblem{
    display:block!important;
    width:72px!important;
    height:72px!important;
    max-width:none!important;
    margin:-3px auto -2px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 7px 10px rgba(6,27,61,.10));
  }

  .top-service-reveal__core small{
    margin-top:0!important;
    font-size:6px!important;
    letter-spacing:.14em!important;
  }
}


/* =========================================================
   v16 | TOP MOBILE FOOTER NAVY FIX
   TOP smartphone only: ensure the dynamically loaded footer
   and its full wrapper stay on the original dark navy.
   ========================================================= */
@media screen and (max-width:767px){
  body > #footer,
  .growth-page ~ #footer,
  #footer,
  #footer > footer,
  #footer .footer,
  body > #footer .footer{
    background:#061b3d!important;
    background-color:#061b3d!important;
  }

  #footer{
    min-height:200px!important;
    overflow:visible!important;
  }

  #footer .footer{
    min-height:200px!important;
    color:#fff!important;
  }

  #footer .footer-info,
  #footer .footer-left,
  #footer .footer-contact{
    background:transparent!important;
    background-color:transparent!important;
  }
}


/* =========================================================
   v17 | TOP MOBILE BACKGROUND SCOPE FIX
   Root cause:
   .growth-page::before / ::after were position:fixed and could
   visually remain over the footer after the main content ended.
   Scope those layers to .growth-page only.
   ========================================================= */
@media screen and (max-width:767px){
  .growth-page{
    position:relative!important;
    isolation:isolate!important;
  }

  .growth-page::before,
  .growth-page::after{
    position:absolute!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    inset:0!important;
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    pointer-events:none!important;
  }

  /* Footer must start a clean stacking context above any TOP page layer. */
  body > #footer,
  #footer{
    position:relative!important;
    z-index:50!important;
    isolation:isolate!important;
    background:#061b3d!important;
    background-color:#061b3d!important;
    background-image:none!important;
  }

  #footer > footer,
  #footer .footer,
  body > #footer .footer{
    position:relative!important;
    z-index:1!important;
    background:#061b3d!important;
    background-color:#061b3d!important;
    background-image:none!important;
  }

  #footer::before,
  #footer::after,
  #footer .footer::before,
  #footer .footer::after{
    content:none!important;
    display:none!important;
    background:none!important;
    background-image:none!important;
    opacity:0!important;
  }

  #footer .footer-info,
  #footer .footer-left,
  #footer .footer-contact{
    position:relative!important;
    z-index:2!important;
    background:transparent!important;
    background-image:none!important;
  }
}

/* =========================================================
   2026-09-05 | v18 TOP MOBILE REVEAL STABILITY PATCH
   Based on L.EVER MOBILE ANIMATION RESIZE SPEC.
   - outer reveal stays in normal flow in every state
   - card height is fixed by viewport-height band
   - only inner panel moves with transform / opacity
   - no absolute -> relative switch at completion
   ========================================================= */
@media screen and (max-width:767px){
  :root{
    --top-reveal-header:72px;
    --top-reveal-shell-height:calc(100svh - var(--top-reveal-header));
    --top-card-height:560px;
    --top-hub-height:350px;
  }

  .growth-page .growth-hero[data-top-reveal-hero],
  .growth-page .growth-hero__inner{
    min-height:var(--top-reveal-shell-height)!important;
  }

  /* Reserve the completed card space from first paint. */
  .top-service-reveal,
  html.top-mobile-reveal-running .top-service-reveal,
  html.top-mobile-reveal-complete .top-service-reveal,
  html.top-mobile-replay-running .top-service-reveal{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    z-index:5!important;
    width:calc(100% - (var(--top-mobile-gutter,20px) * 2))!important;
    height:var(--top-card-height)!important;
    min-height:var(--top-card-height)!important;
    margin:0 var(--top-mobile-gutter,20px) 24px!important;
    opacity:1!important;
    transform:none!important;
    will-change:auto!important;
    box-sizing:border-box!important;
  }

  .top-service-reveal{
    pointer-events:none!important;
    cursor:default!important;
  }
  html.top-mobile-reveal-complete .top-service-reveal,
  html.top-mobile-replay-running .top-service-reveal{
    pointer-events:auto!important;
    cursor:pointer!important;
  }

  /* Animate only the inner panel; outer dimensions never change. */
  .top-service-reveal__panel,
  html.top-mobile-reveal-running .top-service-reveal__panel,
  html.top-mobile-reveal-complete .top-service-reveal__panel,
  html.top-mobile-replay-running .top-service-reveal__panel{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:22px 16px 18px!important;
    border-radius:24px!important;
    box-shadow:0 16px 34px rgba(6,27,61,.10)!important;
    transform:translate3d(0,calc((1 - var(--top-reveal-panel-progress)) * 24px),0)!important;
    opacity:calc(.01 + var(--top-reveal-panel-progress) * .99)!important;
    will-change:transform,opacity!important;
    contain:paint;
  }

  .top-service-reveal__heading{
    padding:0 8px!important;
  }

  /* Keep the replay hint in its own top-right row. */
  .top-service-reveal__heading>p{
    max-width:calc(100% - 132px)!important;
    min-height:28px!important;
    display:flex!important;
    align-items:center!important;
  }
  .top-service-reveal__replay-hint{
    top:14px!important;
    right:14px!important;
  }

  .top-service-reveal__hub{
    width:min(100%,380px)!important;
    height:var(--top-hub-height)!important;
    margin:8px auto 0!important;
    transform:none!important;
  }

  .top-service-reveal__core{
    width:92px!important;
    height:92px!important;
    padding:7px!important;
  }
  .top-service-reveal__core-emblem{
    width:72px!important;
    height:72px!important;
  }

  .top-service-reveal__node{
    width:104px!important;
    min-height:52px!important;
    grid-template-columns:38px 1fr!important;
  }
  .top-service-reveal__icon{
    width:38px!important;
    height:38px!important;
  }

  /* Same geometry for running, complete and replay states. */
  html.top-mobile-reveal-running .growth-services>.growth-container{
    opacity:.12;
    pointer-events:none;
  }
  html.top-mobile-reveal-complete .growth-services>.growth-container,
  html.top-mobile-replay-running .growth-services>.growth-container{
    opacity:1;
    pointer-events:auto;
  }
}

@media screen and (max-width:767px) and (max-height:700px){
  :root{--top-card-height:520px;--top-hub-height:326px;}
  .top-service-reveal__panel{padding-top:18px!important;padding-bottom:14px!important;}
  .top-service-reveal__heading h2{font-size:23px!important;line-height:1.38!important;}
  .top-service-reveal__heading>span{font-size:9px!important;line-height:1.6!important;}
  .top-service-reveal__hub{margin-top:4px!important;}
}

@media screen and (max-width:767px) and (min-height:881px){
  :root{--top-card-height:580px;--top-hub-height:350px;}
}

@media screen and (max-width:374px){
  .top-service-reveal,
  html.top-mobile-reveal-running .top-service-reveal,
  html.top-mobile-reveal-complete .top-service-reveal,
  html.top-mobile-replay-running .top-service-reveal{
    width:calc(100% - (var(--top-mobile-gutter,16px) * 2))!important;
    margin-right:var(--top-mobile-gutter,16px)!important;
    margin-left:var(--top-mobile-gutter,16px)!important;
  }
  .top-service-reveal__heading>p{max-width:calc(100% - 124px)!important;}
  .top-service-reveal__replay-hint{right:10px!important;padding-inline:8px!important;}
}

@media screen and (max-width:767px) and (prefers-reduced-motion:reduce){
  .top-service-reveal{
    position:relative!important;
    height:var(--top-card-height)!important;
    min-height:var(--top-card-height)!important;
    transform:none!important;
  }
  .top-service-reveal__panel{
    transform:none!important;
    opacity:1!important;
  }
}