/* ============================================================
   CREOVANT — site-wide mobile / tablet hardening
   Loaded after each page's inline CSS so these rules win.
   ============================================================ */

html{overflow-x:clip}

/* ============================================================
   MOBILE MENU — close / exit button
   ============================================================ */
.mobile-close{
  position:absolute;
  top:max(14px, env(safe-area-inset-top));
  right:max(14px, env(safe-area-inset-right));
  z-index:2;
  width:48px;height:48px;padding:0;
  border-radius:50%;
  border:1px solid rgba(245,231,178,.28);
  background:rgba(11,9,7,.42);
  display:grid;place-items:center;
  cursor:pointer;
  opacity:0;transform:scale(.86);
  -webkit-tap-highlight-color:transparent;
}
.mobile-nav.is-open .mobile-close{
  opacity:1;transform:none;
  transition:opacity 360ms cubic-bezier(.22,.61,.36,1) 180ms,
             transform 360ms cubic-bezier(.34,1.4,.64,1) 180ms,
             background-color 200ms ease,border-color 200ms ease;
}
.mobile-close-x{position:relative;width:18px;height:18px;display:block}
.mobile-close-x::before,.mobile-close-x::after{
  content:"";position:absolute;left:0;top:50%;width:18px;height:2px;
  background:#F5E7B2;border-radius:2px;
}
.mobile-close-x::before{transform:rotate(45deg)}
.mobile-close-x::after{transform:rotate(-45deg)}
.mobile-close:hover,.mobile-close:focus-visible{
  border-color:rgba(224,167,94,.55);
  background:rgba(151,49,49,.5);
}
.site-header.menu-open .menu-toggle{
  opacity:0;pointer-events:none;
}
img,video,svg,canvas,iframe{max-width:100%;height:auto}
table{max-width:100%}
h1,h2,h3,h4,p,li,dd,blockquote{overflow-wrap:break-word;word-wrap:break-word}
.cta-btn,.btn-ghost,.plan-note a,.pr-group-bar a,.so-out a{max-width:100%}

/* grid children must be allowed to shrink */
.wrap,.header-inner,main,section,
[class*="-grid"],[class*="-hero"],[class*="-end"]{min-width:0}

/* ============================================================
   TABLET (≤1080)
   ============================================================ */
@media (max-width:1080px){
  .hero,.wk-hero,.wd-hero,.so-hero,.pr-hero,.ab-hero,.ct-hero,
  .em-hero,.ai-hero,.bg-hero,.bl-wrap{overflow-x:clip}
  .ai-hero{text-align:left}
  .ai-hero h1,.ai-hero-lede{margin-left:0;margin-right:0;max-width:100%}
  .ai-hero-actions{justify-content:flex-start}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stats .stat:last-child{grid-column:1 / -1}
  .hero-badge{flex-wrap:wrap;max-width:100%}
  .tabs{flex-wrap:wrap;max-width:100%;height:auto}
  .tab-glider{display:none}
  .tab{flex:1 1 auto}
  .marquee::before,.marquee::after,
  .em-loop::before,.em-loop::after{width:72px}
  .wk-filters{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-inline:-8px;padding-inline:8px;
  }
  .wk-filters::-webkit-scrollbar{display:none}
  .wk-filter{flex:0 0 auto}
  .wk-count{position:sticky;right:0;background:rgba(11,9,7,.92);padding-left:10px}
  .ai-sheet h3,.ai-sheet .amt{white-space:normal}
  .ai-sheet .line{flex-wrap:wrap}
  .ai-sheet .leader{display:none}
}

/* ============================================================
   PHONE (≤680)
   ============================================================ */
@media (max-width:680px){
  :root{--header-h:66px;--header-h-scrolled:58px}

  .wrap,.header-inner,.mega-inner{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
  }
  .mobile-nav{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
    padding-bottom:max(28px,env(safe-area-inset-bottom));
  }

  .logo img{height:34px;max-width:min(168px,46vw)}
  .site-header.is-scrolled .logo img{height:30px}
  .menu-toggle{display:flex;width:44px;height:44px;flex-shrink:0}
  .menu-toggle .bar{width:20px;height:2px}

  [class$="-crumbs"] ol,[class*="-crumbs"] ol{row-gap:4px}

  .hero,.wk-hero,.wd-hero,.so-hero,.pr-hero,.ab-hero,.ct-hero,
  .em-hero,.ai-hero,.bg-hero{padding-top:28px}

  .hero h1,.wk-hero h1,.wd-hero h1,.so-hero h1,.pr-hero h1,
  .ab-hero h1,.ct-hero h1,.em-hero h1,.ai-hero h1,.bl-copy h1,.bg-hero h1{
    font-size:clamp(28px,8.6vw,40px);
    max-width:100%;letter-spacing:-.03em;
  }
  .hero-lede,.wk-hero-lede,.wd-hero-lede,.so-hero-lede,.pr-hero-lede,
  .ab-hero-lede,.ct-hero-lede,.em-hero-lede,.ai-hero-lede,.bl-copy p{
    font-size:15.5px;
  }
  .hero-badge{gap:8px;padding:6px 8px 6px 12px;font-size:12px}
  .hero-badge .tag{font-size:10px;padding:3px 8px}
  .hero-stats{grid-template-columns:1fr;margin-top:40px}
  .hero-stats .stat:last-child{grid-column:auto}
  .stat{padding:22px 20px 24px}
  .stat-fig{font-size:clamp(32px,10vw,44px)}

  .section,.wd-sec,.wk-sec,.so-sec,.pr-sec,.ab-sec,.ct-sec,
  .em-sec,.ai-sec,.bg-sec{padding:64px 0}
  .section-head h2,.pr-head h2,.em-head h2,.ai-head h2{
    font-size:clamp(26px,7.4vw,36px);
  }
  .showcase{padding:56px 0 60px}
  .showcase-head{margin-bottom:28px}
  .closing{padding:72px 0}
  .closing h2,.ab-end h2{font-size:clamp(26px,8vw,36px)}

  .hero-actions,.wd-hero-actions,.em-hero-actions,.ai-hero-actions,
  .bg-hero-actions,.bl-actions,.closing .cta-row,.ab-end .row{
    gap:10px;width:100%;flex-direction:column;align-items:stretch;
  }
  .hero-actions .cta-btn,.hero-actions .btn-ghost,
  .wd-hero-actions .cta-btn,.wd-hero-actions .btn-ghost,
  .em-hero-actions .cta-btn,.em-hero-actions .btn-ghost,
  .ai-hero-actions .cta-btn,.ai-hero-actions .btn-ghost,
  .bg-hero-actions .cta-btn,.bg-hero-actions .btn-ghost,
  .bl-actions .cta-btn,.bl-actions .btn-ghost,
  .closing .cta-btn,.closing .btn-ghost,
  .ab-end .cta-btn,.ab-end .btn-ghost{
    width:100%;justify-content:center;text-align:center;
  }

  .tabs{width:100%;border-radius:16px;padding:4px}
  .tab{flex:1 1 40%;text-align:center;padding:10px 12px;font-size:13.5px}

  .cta-btn,.btn-ghost{white-space:normal;text-align:center;line-height:1.25}
  .m-label{font-size:24px}

  .gap-facts-head{flex-wrap:wrap;padding:16px 18px}
  .gap-fact{grid-template-columns:1fr;gap:8px;padding:18px 18px 18px 48px}
  .gap-fact dt{min-width:0;white-space:normal}

  .plan-ex{grid-template-columns:1fr}
  .plan-note a,.pr-group-bar a,.so-out a{white-space:normal}

  .faq summary{font-size:16px;padding:18px 48px 18px 48px}
  .faq .faq-body{padding:0 20px 20px 48px}

  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column}

  /* forms — 16px prevents iOS zoom on focus */
  .ct-field input,.ct-field textarea,.ct-field select{
    font-size:16px;max-width:100%;
  }
  .ct-form{padding:22px 16px}
  .ct-pair{grid-template-columns:1fr}
  .ct-chips label{max-width:100%}
  .ct-way{grid-template-columns:1fr auto;gap:12px}
  .ct-way b{font-size:17px}
  .ct-submit .cta-btn{width:100%;justify-content:center}

  /* work */
  .wk-tally-rows{flex-direction:column}
  .wk-grid{grid-template-columns:1fr}
  .wk-meta{grid-template-columns:minmax(0,1fr);gap:8px}
  .wk-meta .n{grid-column:1}
  .wk-tags{padding-left:0}
  .wk-end,.pr-end,.so-end,.wd-end,.ai-end,.em-end{padding:26px 20px}
  .wk-filters{padding:12px 0}

  /* website */
  .wd-ribbon ul,.wd-rail,.wd-ledger,.wd-work,.wd-end,
  .wd-hero-grid,.wd-why,.wd-inc{grid-template-columns:1fr}
  .wd-rate{grid-template-columns:1fr;gap:10px}
  .wd-rate .amt{text-align:left;white-space:normal}
  .wd-build-body{padding:24px 20px}
  .wd-faq summary{padding:20px 48px 20px 52px;font-size:16.5px}
  .wd-faq .faq-body{padding:0 20px 20px 52px}

  /* solutions */
  .so-pick,.so-steps{grid-template-columns:1fr}
  .so-symp,.so-out{padding:18px}
  .so-chapter-top{flex-wrap:wrap;gap:10px}

  /* pricing */
  .pr-row{grid-template-columns:1fr;gap:8px;padding:16px 18px}
  .pr-amt{text-align:left;white-space:normal}
  .pr-bar-row{grid-template-columns:1fr;gap:8px}
  .pr-terms,.pr-faq{grid-template-columns:1fr;columns:1}
  .pr-group-bar{padding:16px 18px}

  /* about */
  .ab-board,.ab-nope,.ab-who{grid-template-columns:1fr}
  .ab-facts{flex-direction:column}
  .ab-facts div{flex:1 1 100%;border-right:0;padding:18px 0 0}
  .ab-quote{padding:24px 20px}
  .ab-principle{grid-template-columns:1fr;gap:10px}
  .ab-who-side,.ab-who-main{padding:24px 20px}
  .ab-cols{columns:1}

  /* email / sms */
  .em-bar{grid-template-columns:1fr;gap:10px;padding:20px}
  .em-bar .amt{white-space:normal}
  .em-bar p{display:block}
  .em-vs,.em-comply,.em-faq{grid-template-columns:1fr}
  .em-vs-col,.em-comply-main,.em-comply-list{padding:24px 20px}
  .em-loop::before,.em-loop::after{width:40px}
  .em-card{flex-basis:min(260px,78vw)}

  /* ai */
  .ai-flow-track,.ai-bento,.ai-guard-grid{grid-template-columns:1fr}
  .ai-tile--lg,.ai-tile--md,.ai-tile--sm{grid-column:span 1}
  .ai-diff-head,.ai-diff-row{grid-template-columns:1fr}
  .ai-diff-arrow{padding:8px;border-left:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .ai-diff-now{border-left:0}
  .ai-diff-head span,.ai-diff-row > div{padding:14px 16px}
  .ai-slab{grid-template-columns:1fr;gap:12px;padding:24px 20px}
  .ai-slab-n{min-width:0}
  .ai-guard{padding:28px 20px}
  .ai-faq summary{grid-template-columns:1fr 36px;gap:12px;padding:18px 4px;font-size:16.5px}
  .ai-faq .faq-body{margin-left:0;padding:0 8px 20px}

  /* systems */
  .bg-cols,.bg-map,.bg-hero-grid,.bg-price,.bg-qa,.bg-start-grid{grid-template-columns:1fr}
  .bg-gantt{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bg-price-panel,.bg-start-cta{padding:22px 18px}
  .bg-stage{grid-template-columns:48px minmax(0,1fr)}

  /* blogs */
  .bl-grid{grid-template-columns:1fr}
  .bl-wrap{padding:40px 0 64px}

  /* tables that must stay wide: scroll, don't spill the page */
  .wd-table-wrap,.bg-gantt{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    max-width:100%;
  }
}

/* ============================================================
   SMALL PHONE (≤430)
   ============================================================ */
@media (max-width:430px){
  .hero-actions .cta-btn,.hero-actions .btn-ghost,
  .wd-hero-actions .cta-btn,.wd-hero-actions .btn-ghost,
  .em-hero-actions .cta-btn,.em-hero-actions .btn-ghost,
  .ai-hero-actions .cta-btn,.ai-hero-actions .btn-ghost,
  .bl-actions .cta-btn,.bl-actions .btn-ghost,
  .wk-end .cta-btn,.pr-end .cta-btn,.so-end .cta-btn,
  .wd-end .cta-btn,.ai-end .cta-btn,.em-end .cta-btn,
  .closing .cta-btn,.closing .btn-ghost,
  .ab-end .cta-btn,.ab-end .btn-ghost,
  .fit-foot .cta-btn,.plan-note .cta-btn,
  .bg-start-cta .cta-btn{
    width:100%;justify-content:center;
  }

  .m-label{font-size:22px}
  .stat{padding:18px 16px 20px}
  .plan,.fit-col,.post,.concept,.step{padding-left:18px;padding-right:18px}

  .hero-badge b{flex:1 1 140px}
}

/* ============================================================
   TOUCH
   ============================================================ */
@media (hover:none) and (pointer:coarse){
  .nav-link,.cta-btn,.btn-ghost,.tab,.cur-btn,.wk-filter,
  .m-link,.ct-chips label,.mobile-close{
    min-height:44px;
  }
  .showcase:hover .marquee-track,
  .em-loop:hover .em-loop-track{animation-play-state:running}
}