/* Kodawari v2 — mobile bug fixes. Load LAST (after v2.css and each page's own <style>).
   Every rule here fixes something that was broken at phone width; nothing here
   changes the desktop design. */

/* 1. Horizontal scroll, root cause.
   overflow-x:hidden on <body> alone is unreliable — the overflow simply moves to
   <html>, and on iOS Safari a hidden body also becomes a scroll container (breaks
   momentum scrolling and position:sticky children). Clip both, with a fallback. */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}

/* 2. Horizontal scroll, actual sources.
   a) the blurred decorative blobs are sized in px with negative offsets, so on a
      375px viewport they stuck out ~200px past the edge;
   b) SVG overflow:visible can paint (and scroll) outside its box. Contain both per
      section instead of relying on a root clip. */
.hero,.how,.phero,.band-w,.mq-w,.strip{overflow-x:clip}
@media (max-width:760px){
.wash{max-width:78vw;filter:blur(44px)}
}

/* 3. Hero dashboard card. Both grids had items with the default min-width:auto, so
   long money strings (€594,780) pushed the card wider than the screen. */
.trow>*{min-width:0}
.trow .num{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi em{white-space:normal}
@media (max-width:760px){
.dash{padding:16px 16px 12px;border-radius:12px}
.kpis{grid-template-columns:1fr 1fr;gap:8px}
.kpi b{font-size:15px}
.trow{grid-template-columns:1.5fr .9fr .6fr 1fr;gap:8px;font-size:10.5px}
.trow .spk,.trow.head span:nth-child(5){display:none}
#rev{overflow:visible}
}
@media (max-width:560px){
/* drop SPEND — least useful column on a phone — rather than shrink text further */
.trow{grid-template-columns:1.6fr .7fr 1fr}
.trow>*:nth-child(2){display:none}
}

/* 4. Nav. Below 900px it wraps to two rows; at ~375px the brand plus both pills no
   longer fit on the first row, so it wrapped to three and the taller bar covered
   the top of the hero. Keep one CTA on a phone and re-sync the offsets. */
@media (max-width:560px){
.nav-in{gap:12px;padding:11px 16px}
.nav .pill-ghost{display:none}
.nav-links{gap:16px;padding-bottom:0}
.hero{padding-top:112px}
.phero{padding-top:110px}
}
@media (max-width:900px){
section{scroll-margin-top:112px}
}

/* 5. Long unbreakable strings (mono notes, tags, emails) forcing width. */
@media (max-width:640px){
.hero-note,.mono-note,.foot span{overflow-wrap:anywhere}
.hero-ctas{gap:14px}
.foot-in{gap:14px}
.foot nav{margin-left:0;gap:16px}
}

/* 6. Feature strip / steps / marquee at phone width. */
@media (max-width:480px){
.strip-in{grid-template-columns:1fr}
.feat{border-left:none!important;border-top:1px solid var(--hairline)}
.feat:first-child{border-top:none}
.steps{grid-template-columns:1fr;gap:26px}
.step .illus{height:80px}
.step .illus svg{height:80px}
.mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.mq-in{animation-duration:34s}
}

/* 7. Cases / Services / About tables and grids that overflowed. */
.mets,.cstats-in,.eng-in,.fax-in,.prin-in{min-width:0}
.mets>*,.cstats-in>*,.eng-in>*,.fax-in>*,.prin-in>*{min-width:0}
@media (max-width:640px){
.cstats-in{grid-template-columns:1fr 1fr}
.cs b{font-size:21px}
.mets{grid-template-columns:1fr 1fr;gap:14px}
.case{padding:22px 20px}
.band{padding:26px 20px}
.q{padding-left:34px}
.q .qm{font-size:44px}
.eng-in{grid-template-columns:1fr 1fr}
.qa-q{font-size:14px;padding:15px 2px}
.qa-a p{padding-right:12px}
}
@media (max-width:420px){
.cstats-in{grid-template-columns:1fr}
.cs+.cs{border-left:none;border-top:1px solid var(--hairline)}
.mets{grid-template-columns:1fr}
.eng-in{grid-template-columns:1fr}
}

/* 8. Tap targets: links and pills below 44px on touch screens. */
@media (hover:none) and (max-width:900px){
.pill{padding:12px 18px}
.nav-links a{padding:6px 0}
.playlink .pc{width:38px;height:38px}
}
