.cwf-scroll-progress{position:fixed;inset:0 auto auto 0;height:3px;width:0;background:linear-gradient(90deg,#ffd429,#15b8ff,#05c755);z-index:9999;box-shadow:0 0 18px rgba(21,184,255,.55)}
.cwf-landing-root .btn,.cwf-landing-root .cwf26-btn,.cwf-landing-root .cwf26-head-call,.cwf-landing-root .cwf26-head-line{transform:translateZ(0);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.cwf-landing-root .btn:hover,.cwf-landing-root .cwf26-btn:hover,.cwf-landing-root .cwf26-head-call:hover,.cwf-landing-root .cwf26-head-line:hover{transform:translateY(-2px);filter:saturate(1.08);box-shadow:0 16px 36px rgba(4,35,74,.18)}
.cwf-landing-root .promo-card,.cwf-landing-root .price-panel,.cwf-landing-root .cwf26-price-card,.cwf-landing-root .service-card{position:relative;overflow:hidden}
.cwf-landing-root .promo-card:after,.cwf-landing-root .price-panel:after,.cwf-landing-root .cwf26-price-card:after{content:"";position:absolute;inset:-45% auto auto -70%;width:55%;height:190%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:rotate(20deg);animation:cwfShine 5.8s ease-in-out infinite;pointer-events:none}
@keyframes cwfShine{0%,70%{left:-70%}100%{left:130%}}
.cwf-landing-root .hero-art img,.cwf-landing-root .cwf26-hero-media img{animation:cwfFloat 6.5s ease-in-out infinite}
@keyframes cwfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.cwf-landing-root .reveal{will-change:opacity,transform}
@media (prefers-reduced-motion:reduce){.cwf-scroll-progress,.cwf-landing-root *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (max-width:760px){.cwf-scroll-progress{height:2px}.cwf-landing-root{padding-bottom:70px}.cwf-landing-root .sticky-cta,.cwf-landing-root .cwf26-sticky{max-height:74px}}

/* Accessibility: skip-to-content link (visible only on keyboard focus) */
.cwf-skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:#082a4f;color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-weight:700;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.cwf-skip-link:focus{left:0;outline:3px solid #ffd429;outline-offset:2px}


/* homepage reviews eyebrow: cream bg had light-cyan text -> dark for contrast (cwf-reviews .section-eyebrow contrast) */
.cwf-landing-root.cwf-v4415 .cwf-reviews .section-eyebrow{color:#0a4fa0 !important;}

/* =========================================================
   HOMEPAGE (v4415) READABILITY + MOBILE LAYOUT FIXES — 2026-08
   ========================================================= */

/* 1) Reviews section header: base CSS painted it a near-white card
      (rgba(255,255,255,.8)) while its text stayed white -> invisible.
      Make it dark glass so the white heading/paragraph/badges read. */
.cwf-landing-root.cwf-v4415 #reviews .review-section-head{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.cwf-landing-root.cwf-v4415 #reviews .review-section-head .review-proof-badges span{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #ffffff !important;
}

/* 2) Outline/ghost buttons that sit on DARK panels were blue-on-dark. */
.cwf-landing-root.cwf-v4415 .hero-copy .hero-actions .btn-outline{
  color: #ffffff !important;
  border-color: rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.08) !important;
}
.cwf-landing-root.cwf-v4415 .cwf-areas .areas-card .btn-ghost{
  color: #ffffff !important;
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.34) !important;
}

/* 3) Strikethrough "ปกติ xxx บาท" was too faint to read. */
.cwf-landing-root.cwf-v4415 .cwf-hp-orig{ color: rgba(0,0,0,.52) !important; }

/* 4) MOBILE: the service-area card's grid column resolved wider than the
      card itself (auto min-size), so its content overflowed the padding box.
      minmax(0,1fr) + min-width:0 lets it shrink to fit. */
@media (max-width: 1024px){
  .cwf-landing-root.cwf-v4415 .cwf-areas .areas-card{
    grid-template-columns: minmax(0,1fr) !important;
  }
  .cwf-landing-root.cwf-v4415 .cwf-areas .areas-card > *{ min-width: 0 !important; }
  .cwf-landing-root.cwf-v4415 .cwf-areas .areas-map-visual{
    grid-template-columns: repeat(auto-fit, minmax(88px,1fr)) !important;
  }
}
@media (max-width: 560px){
  .cwf-landing-root.cwf-v4415 .cwf-areas .areas-card{ padding: 20px 16px !important; }
}

/* 5) Strikethrough "ปกติ xxx บาท" was too faint on inner + ad pages too. */
.cwf-landing-root.cwf-v430 .cwf430-orig{ color: rgba(255,255,255,.62) !important; }
.cwf-ads26 .cwf26-price-orig{ color: rgba(0,0,0,.58) !important; }

/* 6) New logo has a different aspect ratio (1.97) than the old one (2.17);
      existing CSS pins both width & height on the logo, which squashed it.
      object-fit:contain keeps it undistorted inside whatever box CSS gives. */
img[src*="coldwindflow-logo-2026"]{ object-fit: contain !important; object-position: left center !important; }
footer img[src*="coldwindflow-logo-2026"], .footer-grid img[src*="coldwindflow-logo-2026"]{ object-position: left center !important; }

/* 7) Homepage mobile header logo was only 67x31 — too small to read the
      wordmark. Header is 67px tall and there is spare width, so size it up. */
@media (max-width: 560px){
  .cwf-landing-root.cwf-v4415 .cwf-brand img[src*="coldwindflow-logo-2026"]{
    width: 96px !important;
    max-width: 96px !important;
    height: 49px !important;
  }
}

/* =========================================================
   8) THAI READABILITY — body copy was 11.6–14.5px with tight
   leading. Thai needs larger text + more line-height than Latin
   because of stacked vowel/tone marks.
   ========================================================= */
.cwf-landing-root.cwf-v4415 .svc-card p,
.cwf-landing-root.cwf-v4415 .why-card p,
.cwf-landing-root.cwf-v4415 .article-card p,
.cwf-landing-root.cwf-v4415 .faq-intro p,
.cwf-landing-root.cwf-v4415 .review-text,
.cwf-landing-root.cwf-v4415 .ba-problem-card p,
.cwf-landing-root.cwf-v4415 .ba-result-text p,
.cwf-landing-root.cwf-v4415 .areas-card-copy p{
  font-size: 15.4px !important;
  line-height: 1.78 !important;
  letter-spacing: .005em !important;
}
.cwf-landing-root.cwf-v4415 .hero-lead{ font-size: 16.2px !important; line-height: 1.85 !important; }
.cwf-landing-root.cwf-v4415 .section-head p{ line-height: 1.8 !important; }
.cwf-landing-root.cwf-v4415 .trust-chip .tc-sub{ font-size: 12.6px !important; line-height: 1.56 !important; }
.cwf-landing-root.cwf-v4415 .stat-label{ font-size: 13.2px !important; line-height: 1.55 !important; }
.cwf-landing-root.cwf-v4415 .footer-desc,
.cwf-landing-root.cwf-v4415 .footer-links span,
.cwf-landing-root.cwf-v4415 .footer-social-copy,
.cwf-landing-root.cwf-v4415 .footer-copy{ font-size: 14.2px !important; line-height: 1.78 !important; }
.cwf-promo-bar .cwf-promo-text{ font-size: 13.2px !important; line-height: 1.55 !important; }
@media (min-width: 861px){
  .cwf-landing-root.cwf-v4415 .svc-card p,
  .cwf-landing-root.cwf-v4415 .why-card p,
  .cwf-landing-root.cwf-v4415 .article-card p,
  .cwf-landing-root.cwf-v4415 .faq-intro p,
  .cwf-landing-root.cwf-v4415 .review-text,
  .cwf-landing-root.cwf-v4415 .areas-card-copy p{ font-size: 16.2px !important; }
  .cwf-landing-root.cwf-v4415 .hero-lead{ font-size: 17.4px !important; }
}
/* inner pages (v430) + ad pages: same Thai leading treatment */
.cwf-landing-root.cwf-v430 .cwf-content-section p,
.cwf-landing-root.cwf-v430 .cwf-check-list li,
.cwf-landing-root.cwf-v430 .faq-list p,
.cwf-landing-root.cwf-v430 .lead{ line-height: 1.82 !important; }
.cwf-landing-root.cwf-v430 .cwf-content-section p,
.cwf-landing-root.cwf-v430 .cwf-check-list li{ font-size: 15.6px !important; }
@media (min-width: 861px){
  .cwf-landing-root.cwf-v430 .cwf-content-section p,
  .cwf-landing-root.cwf-v430 .cwf-check-list li{ font-size: 16.4px !important; }
}

/* =========================================================
   9) PREMIUM POLISH — micro-interactions, focus states, shine
   ========================================================= */
.cwf-landing-root .svc-card,
.cwf-landing-root .why-card,
.cwf-landing-root .article-card,
.cwf-landing-root .review-card,
.cwf-landing-root .service-card,
.cwf-landing-root .cwf-article-card-link,
.cwf-landing-root .stat-item{
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease !important;
  will-change: transform;
}
.cwf-landing-root .svc-card:hover,
.cwf-landing-root .why-card:hover,
.cwf-landing-root .article-card:hover,
.cwf-landing-root .service-card:hover,
.cwf-landing-root .cwf-article-card-link:hover{
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 48px rgba(4,22,60,.20) !important;
}

/* tactile buttons */
.cwf-landing-root .btn{ transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, filter .2s ease !important; }
.cwf-landing-root .btn:hover{ transform: translateY(-2px) !important; filter: brightness(1.04) !important; }
.cwf-landing-root .btn:active{ transform: translateY(0) scale(.985) !important; }

/* keyboard focus ring (accessibility + looks deliberate) */
.cwf-landing-root a:focus-visible,
.cwf-landing-root button:focus-visible,
.cwf-landing-root summary:focus-visible,
.cwf-promo-bar a:focus-visible{
  outline: 3px solid #ffd429 !important;
  outline-offset: 3px !important;
  border-radius: 12px !important;
}

/* slow shine sweep across the primary yellow CTA */
.cwf-landing-root .btn-yellow{ position: relative !important; overflow: hidden !important; }
.cwf-landing-root .btn-yellow::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: -130% !important;
  width: 55% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent) !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  animation: cwfShine 5.5s ease-in-out infinite !important;
}
@keyframes cwfShine{ 0%,74%{ left:-130%; } 90%,100%{ left:140%; } }

/* FAQ open/close feels smoother */
.cwf-landing-root .faq-list details summary{ transition: color .2s ease, background .2s ease !important; cursor: pointer !important; }

@media (prefers-reduced-motion: reduce){
  .cwf-landing-root .btn-yellow::after{ animation: none !important; display: none !important; }
  .cwf-landing-root .svc-card:hover,
  .cwf-landing-root .why-card:hover,
  .cwf-landing-root .article-card:hover,
  .cwf-landing-root .service-card:hover,
  .cwf-landing-root .cwf-article-card-link:hover,
  .cwf-landing-root .btn:hover{ transform: none !important; }
}