/* Warmflow UI refinement · 2026-10-14
   frontend-design: one signature image, no collage seams; typography and restraint.
   web-design-guidelines: focus, motion control, responsive space, touch targets.
   All changes are additive and preserve the original information architecture.
*/
:root{
  --v4-ink:#192a57;
  --v4-sub:#525e7e;
  --v4-sky:#eef2fb;
  --v4-outline:#c8d2e6;
  --v4-brand:#ef8200;
  --sec-y:102px;
}
html{scroll-padding-top:calc(var(--nav-h) + 16px)}
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}
a,button,[role="button"]{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #163da8!important;
  outline-offset:3px!important;
}
img{max-width:100%}
.section .sec-title,.pagehead h1{text-wrap:balance}
.section .sec-desc,.pc-res{overflow-wrap:anywhere}
.nav.scrolled{border-bottom-color:var(--v4-outline)}
.nav .btn-primary{box-shadow:none}
.btn-primary{background:var(--v4-brand)}
.btn:active{transform:translateY(0)!important}
/* The fallback becomes ONE real heating-network image, instead of four unrelated quadrants.
   The supplied hero-overview.png supersedes it automatically when securely imported. */
.hero-v3 .hero-mosaic{
  display:block;
  background-image:url("../img/scenes/scene-heating.jpg");
  background-size:cover;
  background-position:53% 51%;
  filter:saturate(.9) brightness(1.09);
  transform-origin:center center;
  animation:v4-breathe 25s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-v3 .hero-mosaic .hero-tile{display:none!important}
.hero-v3:not(.has-user-art)[data-focus="1"] .hero-mosaic{background-image:url("../img/scenes/scene-park.jpg")}
.hero-v3:not(.has-user-art)[data-focus="2"] .hero-mosaic{background-image:url("../img/scenes/scene-dc.jpg")}
.hero-v3:not(.has-user-art)[data-focus="3"] .hero-mosaic{background-image:url("../img/scenes/scene-mfg.jpg")}
/* The old generic SVG flowlines don't follow real pipelines: hide until source-specific paths are drawn. */
.hero-v3 .energy-paths{display:none!important}
@keyframes v4-breathe{
  from{transform:scale(1.015) translate3d(0,0,0)}
  to{transform:scale(1.072) translate3d(-.65%,-.5%,0)}
}
/* Text occupies the quiet left part; hero image remains visible on the right */
.hero-v3 .hero-scrim{
  background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.95) 26%,rgba(255,255,255,.76) 42%,rgba(255,255,255,.18) 72%,rgba(255,255,255,.02) 100%),
             linear-gradient(0deg,rgba(238,242,251,.94),transparent 22%);
}
.hero-v3 .hero-title{color:#253256;letter-spacing:-.052em}
.hero-v3 .hero-sub{color:#3b486d;max-width:840px;text-wrap:pretty}
.hero-v3 .hero-fact{max-width:780px;font-size:14px;line-height:1.75}
.hero-v3 .hero-actions{position:relative;z-index:3}
.hero-scene-nav{gap:10px;bottom:26px}
.hero-scene{
  background:rgba(251,252,255,.91);
  border:1px solid rgba(153,166,196,.56);
  border-top:2px solid rgba(132,143,170,.6);
  box-shadow:0 8px 20px rgba(28,45,90,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.hero-scene:hover,.hero-scene.is-active{
  border-top-color:#ef8200;
  box-shadow:0 8px 22px rgba(21,36,79,.12);
}
.hero-scene small{color:#b66512}
.hero-scene strong{color:var(--v4-ink)}
.hero-scene span{color:var(--v4-sub)}
/* Motion pause button: required for long cinematic loops; dynamically inserted by hero JS */
.hero-motion{
  position:absolute;
  right:0;
  bottom:calc(100% + 13px);
  z-index:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  min-width:102px;
  padding:9px 14px;
  border:1px solid rgba(146,158,186,.68);
  border-radius:4px;
  background:rgba(255,255,255,.92);
  color:#253256;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(30,47,92,.08);
}
.hero-motion:hover,.hero-motion:focus-visible{background:#fff;border-color:#ef8200}
.hero-v3.motion-paused .hero-mosaic,
.hero-v3.motion-paused .hero-overview,
.hero-v3.motion-paused .hero-tile,
.hero-v3.motion-paused .energy-flow{
  animation-play-state:paused!important;
  transition-duration:0ms!important;
}
/* Interior hero: retain strong image, remove overly dark corporate overlay. */
.pagehead.has-photo{background:#dce4f5}
.pagehead.has-photo .ph-veil{
  background:linear-gradient(90deg,rgba(239,243,252,.96) 0%,rgba(239,243,252,.88) 34%,rgba(239,243,252,.5) 62%,rgba(239,243,252,.13) 100%);
}
.pagehead.has-photo h1{color:#253256;text-shadow:none}
.pagehead.has-photo p{color:#3b486d;max-width:63ch}
.pagehead.has-photo .pagehead-inner{max-width:920px}
.v3-scope-note{border-color:#dce3f1;background:#edf2fb}
.v3-scope-note span{color:#5a698c}
/* Make project sections readable without decorative overframing. */
.pcard .pc-res{line-height:1.82}
.story-summary{min-height:0!important;max-width:70ch}
.fabe-case,.pcard{scroll-margin-top:calc(var(--nav-h) + 18px)}
@media(max-width:1100px){
  .hero-v3 .hero-title{font-size:clamp(56px,9vw,99px)}
}
@media(max-width:767px){
  :root{--sec-y:70px}
  .hero-v3{
    min-height:780px;
    padding-top:var(--nav-h);
  }
  .hero-v3 .hero-inner{
    justify-content:flex-start;
    padding-top:clamp(77px,14vh,124px);
    padding-bottom:205px;
  }
  .hero-v3 .hero-title{
    font-size:clamp(40px,11vw,55px);
    line-height:1.05;
    letter-spacing:-.05em;
    overflow-wrap:anywhere;
  }
  .hero-v3 .hero-sub{font-size:14px;line-height:1.75;max-width:100%}
  .hero-v3 .hero-fact{
    display:flex!important;align-items:flex-start;
    font-size:12px;line-height:1.76;
    margin:19px 0 20px;
    max-width:100%;
    white-space:normal;
  }
  .hero-v3 .hero-fact .dot{flex:none;margin-top:8px}
  .hero-v3 .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero-v3 .hero-actions .btn{width:100%;padding:0 9px;font-size:12px;min-width:0;white-space:normal;text-align:center;line-height:1.4;height:50px}
  .hero-v3 .hero-scrim{
    background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.91) 36%,rgba(255,255,255,.56) 68%,rgba(237,242,251,.85) 100%);
  }
  .hero-scene-nav{bottom:16px;left:16px;right:16px;gap:8px}
  .hero-scene{min-height:66px;padding:10px 11px;box-shadow:none}
  .hero-motion{min-height:36px;font-size:11px;bottom:calc(100% + 9px);min-width:95px}
  .home .mcta{display:none!important}
  .pagehead.has-photo{min-height:330px}
  .pagehead.has-photo .pagehead-inner{padding-top:calc(var(--nav-h) + 72px);padding-bottom:38px}
  .pagehead h1{font-size:clamp(31px,8vw,42px)}
  .pagehead p{font-size:14px;line-height:1.75}
  .v3-proof-inner{gap:8px}
  .v3-proof-source{text-align:left}
}
@media(max-width:390px){
  .hero-v3{min-height:790px}
  .hero-v3 .hero-title{font-size:clamp(38px,10.7vw,43px)}
  .hero-v3 .hero-sub{font-size:13px}
  .hero-v3 .hero-inner{padding-top:75px}
}
@media(prefers-reduced-motion:reduce){
  .hero-v3 .hero-mosaic,.hero-v3 .hero-overview,.hero-v3 .hero-tile{animation:none!important;transform:none!important;transition:none!important}
  .hero-motion{display:none!important}
}