/* ---------- mobile/tablet round 3 ---------- */
@media (max-width:1199px){
  /* sticky header */
  .page{isolation:auto;z-index:auto}
  .header{position:fixed!important;left:0;right:0;top:0;height:60px;padding:16px max(var(--gx),calc((100% - var(--hw,720px))/2))!important;
    background:rgba(19,19,19,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:1001;animation:none}
  .frame{padding-top:84px!important;padding-bottom:80px!important}
  body.menu-open .header{background:#131313}
  /* stacked cards: small gap, then the next one slides over */
  .p4-item{margin-bottom:40vh!important}
  .p4-item:last-child{margin-bottom:0!important}
  .p4-stack{padding-bottom:0}
  .p4-stack::after{display:block;height:24px}
  /* where are you now: spacing as in Figma */
  .wy-card .txt{max-width:calc(100% - 72px)}
  .wy-cta,.wy-card.on .wy-cta{width:calc(100% - 70px);max-width:none}
  /* Atlas: more air */
  .frame5{padding:72px 20px 72px!important;gap:40px}
  .frame5 h2{margin-bottom:8px}
  .p5-btn.ghost{margin-top:-20px!important}
  /* FAQ: opaque only while it covers the cases panel, then it melts into the gradient */
  .pageFaq{background:transparent!important}
  .pageFaq::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;transition:opacity .6s var(--ease);
    background:radial-gradient(120% 60% at 20% 0%,#10251b 0%,rgba(16,37,27,0) 60%),radial-gradient(90% 60% at 90% 70%,#0c1f16 0%,rgba(12,31,22,0) 60%),#0b120e}
  .pageFaq.clear::before{opacity:0}
  .pageFaq.clear{box-shadow:none}
}
@media (min-width:600px) and (max-width:1199px){ .frame5{padding:80px var(--gx)!important} }
@media (min-width:900px) and (max-width:1199px){ :root{--hw:1040px} }

/* ---------- mobile round 4: Where are you now staging, ripple pulse, CTA rides over testimonials ---------- */
@media (max-width:1199px){
  .page2.m-anim .wy-head:not(.m-in),.page2.m-anim .wy-card:not(.m-in){opacity:0;transform:translateY(28px)}
  .page2.m-anim .wy-head,.page2.m-anim .wy-card{transition:opacity .7s var(--ease),transform .8s cubic-bezier(.16,1,.3,1)}
  .page2.m-anim .wy-card .wy-cta{transition:background .45s var(--ease),color .45s var(--ease),box-shadow .45s}
  .wy-mpulse{opacity:0;transition:opacity .5s ease}
  .page2.m-line .wy-mpulse,.page2:not(.m-anim) .wy-mpulse{opacity:1}
  .wy-card{padding:20px!important}
  .wy-card .txt{padding:0!important;margin:0!important;left:auto!important;right:auto!important;top:auto!important}
  .wy-mpulse i{width:78px!important;height:78px!important;margin:-39px 0 0 -39px;left:50%;top:50%;border:1.5px solid var(--yellow);opacity:0;
    transform:scale(.17);animation:ripple 3s cubic-bezier(.22,.61,.36,1) infinite!important}
  .wy-mpulse i:nth-child(2){animation-delay:1s!important}.wy-mpulse i:nth-child(3){animation-delay:2s!important}
  #wyMbase,#wyMprog{stroke-width:2}
  /* testimonials stay pinned while the CTA slides up over them */
  .green-zone{padding-bottom:70vh!important}
  .page9{position:sticky!important;top:0}
  .pageCta{margin-top:-70vh!important}
}
@media (prefers-reduced-motion:reduce){.wy-mpulse i{animation:none!important;opacity:.4;transform:none!important}}

/* ---------- round 5 ---------- */
/* testimonials hold still while the white CTA slides over them — on every width, like Atlas over the stacked cards */
.page9{position:sticky;top:0}
.green-zone{padding-bottom:70vh}
.pageCta{margin-top:-70vh}
@media (max-width:1199px){
  /* header: #131313 → transparent with a progressive background blur */
  .header{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;height:76px!important;padding-bottom:32px!important}
  .header::before,.header::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
  .header::before{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    -webkit-mask:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%);mask:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%)}
  .header::after{background:linear-gradient(180deg,rgba(19,19,19,.85) 0%,rgba(19,19,19,.6) 40%,rgba(19,19,19,0) 100%)}
  body.menu-open .header::after{background:#131313}
}

/* sticky needs room inside its own container: the runway is a real element, not padding */
.green-zone,.green-zone[class]{padding-bottom:0!important}
.gz-runway{height:70vh;pointer-events:none}

@media (max-width:1199px){
  .frame3{padding:40px var(--gx) 120px!important;justify-content:center}
  .st-text{text-align:center;text-wrap:balance}
}

/* statement now follows the stacked cards; it holds still while the white Atlas panel rides over it */
.p4-stack::after{height:18vh}
.p3-wrap{position:relative;z-index:1}
.page3{position:sticky;top:0}
.p3-runway{height:100vh}
.page5{margin-top:-100vh!important}
@media (max-width:1199px){
  .frame3{padding:120px var(--gx) 120px!important}
}

/* ================= mobile round 6 — Figma 757:8804 update (fonts, section spacing, Modernization cards, testimonials) ================= */
@media (max-width:1199px){
  /* type */
  h1{font-size:28px!important;letter-spacing:.42px}
  .bl-head h2{font-size:32px!important;letter-spacing:.48px}
  /* section rhythm: 144px after most blocks */
  .frame{padding-bottom:80px!important}
  .frame2{padding:0 var(--gx) 144px!important}
  .p4-stack::after{height:144px!important}
  .frame3{padding:0 var(--gx) 144px!important}
  .frame5{padding:40px 20px 80px!important;gap:48px!important}
  .frame6{padding:40px var(--gx) 144px!important}
  .p7-h{margin-bottom:144px!important}
  .frame7{padding-bottom:80px!important}
  .p7-cta{margin-top:40px!important}
  .frame8{padding:40px var(--gx) 80px!important;gap:40px!important}
  .frameFaq{padding:40px var(--gx) 144px!important}
  .frame9{padding:0 0 144px!important}
  .frameCta{padding:48px var(--gx)!important}
  .frameBlog{padding:40px var(--gx) 144px!important;gap:32px!important}
  /* Why us: 2 × 3 stat cards */
  .p6-card{min-height:350px!important;padding:24px!important;gap:64px!important}
  .p6-num{font-size:28px!important;letter-spacing:.42px}
  .p6-card h3{font:500 16px/1.5 var(--rubik)!important;color:#dcdcdc}
  .p6-card p{font-size:12px!important;line-height:1.5}
  .p6-link{font-size:14px!important}
  /* testimonials: logo + score share a row, name/quote above, CTA below */
  .t-slide.video .t-body{display:grid;grid-template-columns:auto 1fr;align-items:center;row-gap:20px;column-gap:32px}
  .t-slide.video .t-top,.t-slide.video .t-foot{display:contents}
  .t-slide.video .t-top>div{grid-column:1/-1;grid-row:1}
  .t-slide.video .t-quote{grid-column:1/-1;grid-row:2}
  .t-slide.video .t-logo{grid-column:1;grid-row:3;width:48px;height:48px}
  .t-slide.video .t-score{grid-column:2;grid-row:3;justify-self:end;align-self:center;margin:0}
  .t-slide.video .t-cta{grid-column:1/-1;grid-row:4}
}
/* phones: Modernization cards run edge to edge like sheets */
@media (max-width:599px){
  .p4-head{padding:0 16px 24px!important}
  .p4-item{padding:0!important;margin-left:0!important;margin-right:0!important;max-width:none!important}
  .p4-card{border-radius:24px!important;padding:24px!important;gap:20px!important;background:#131313!important;
    box-shadow:0 -4px 13px rgba(0,0,0,.18),0 -8px 24px rgba(0,0,0,.2),0 -12px 32.5px rgba(0,0,0,.22),0 -16px 38.5px rgba(0,0,0,.2),0 -20px 42px rgba(0,0,0,.18)}
  .p4-img{aspect-ratio:327/266!important}
}

/* ================= mobile round 7 ================= */
@media (max-width:1199px){
  /* menu as in Figma 2494:36514: two stacked full-width CTAs */
  .mm-ctas{flex-direction:column;gap:12px;flex-shrink:0}
  .mm-cta{flex:none!important;width:100%;height:56px!important;padding:16px 16px 16px 20px!important;flex-direction:row!important;align-items:center;justify-content:space-between;font:500 16px/1.5 var(--mono)!important}
  .mm-cta svg{align-self:center!important;width:20px;height:20px}
  .mm-cta.solid{background:#fff;color:#131313;box-shadow:none}
  .mm-cta.ghost{background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px #f6f6f6;color:#f6f6f6}
  .mm-crumbs b.br{flex-basis:auto}
  .mm-card svg{width:40px;height:40px}
  /* last service card scrolls away normally, so the 144px gap before the statement is real */
  .p4-item:last-child{position:relative!important;top:auto!important}
  /* Where are you now: each card stops under the header with its title and CTA in view */
  html{scroll-snap-type:y proximity}
  .wy-card{scroll-snap-align:start;scroll-margin-top:84px}
  /* How we build: tap a node to see its tooltip */
  .p7-node{overflow:visible}
  .p7-node.tap{z-index:20;background:#131313}
  .p7-node .p7-tip{display:block!important;position:absolute!important;top:calc(100% + 8px);left:0;width:210px;padding:14px 16px;border-radius:12px;
    font:400 14px/1.45 var(--rubik)!important;text-align:left!important;text-transform:none;letter-spacing:0;color:#fff;opacity:0!important;transform:translateY(-4px)!important;pointer-events:none;
    background:rgba(10,20,15,.55)!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(255,255,255,.08),0 16px 32px -16px rgba(0,0,0,.7)!important;transition:opacity .25s var(--ease),transform .3s var(--ease)!important;margin:0!important}
  .p7-node .p7-tip::before{display:block!important}
  .p7-node[data-i="0"] .p7-tip,.p7-node[data-i="5"] .p7-tip,.p7-node[data-i="6"] .p7-tip,.p7-node[data-i="7"] .p7-tip{left:auto;right:0}
  .p7-node[data-i="2"] .p7-tip,.p7-node[data-i="3"] .p7-tip,.p7-node[data-i="4"] .p7-tip{left:50%;margin-left:-105px!important}
  .p7-node[data-i="7"] .p7-tip{top:auto;bottom:calc(100% + 8px)}
  .p7-node.tap .p7-tip{opacity:1!important;transform:none!important}
  .p7-node:hover .p7-tip{opacity:0}
  .p7-node.tap:hover .p7-tip{opacity:1!important}
}
/* image cards keep all four corners rounded even with the blurred caption inside */
.p8-card,.bl-card,.fq-card,.t-media,.p4-img{clip-path:inset(0 round 8px)}
.p4-img{clip-path:inset(0 round 16px)}
@media (max-width:1199px){.p4-img{clip-path:inset(0 round 8px)}}

@media (max-width:1199px){
  body.menu-open .header{height:60px!important;padding-bottom:16px!important}
  body.menu-open .header::before{display:none}
  .mmenu{padding-top:68px!important}
  .mm-crumbs{padding-top:4px!important;line-height:1.5}
}