/* SIHO site-wide visual system — approved direction from C07.
   This file does not force every page into one template. It normalizes the
   visual language: readable title scale, balanced spacing, honest media
   proportions and one clear action hierarchy across product, application,
   knowledge, video and conversion pages. */

.site-unified-page{
  --su-ink:#08242b;
  --su-deep:#092f33;
  --su-teal:#0b8589;
  --su-mint:#75d9cf;
  --su-soft:#eef8f5;
  --su-line:#cfe0dd;
  --su-orange:#f5a342;
  --su-orange-top:#ffc16a;
  --su-orange-deep:#b9601c;
  --su-green:#0b8d69;
  --su-green-deep:#075d48;
  --su-muted:#52696e;
}

.site-unified-page main h1,
.site-unified-page main h2,
.site-unified-page main h3{
  text-wrap:balance;
}

.site-unified-page main h1{
  letter-spacing:-.035em;
  line-height:1.08;
}

.site-unified-page main h2{
  letter-spacing:-.028em;
  line-height:1.13;
}

/* Product titles stay readable without filling four or five lines. */
.site-unified-page.product-page .page-hero h1{
  max-width:18ch;
  font-size:clamp(2.05rem,2.85vw,2.5rem);
  line-height:1.08;
}

.site-unified-page.home.product-page .page-hero .button:not(.secondary){
  border:1px solid #ffbb72;
  color:#182c30;
  background:linear-gradient(180deg,var(--su-orange-top) 0%,var(--su-orange) 100%);
  box-shadow:0 5px 0 var(--su-orange-deep),0 13px 24px rgba(189,96,28,.24);
}

.site-unified-page.home.product-page .page-hero .button.secondary{
  border:1px solid rgba(255,255,255,.42);
  color:#f5fbfc;
  background:rgba(255,255,255,.055);
  box-shadow:0 4px 0 rgba(0,0,0,.26);
}

/* The two technical-answer pages use the same approved visual language as
   the video answer pages, while preserving their own evidence and copy. */
.site-unified-page:not(.video-standard-page) .guide{
  width:min(1240px,calc(100% - 48px));
  margin:22px auto 64px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.site-unified-page:not(.video-standard-page) .guide-head{
  align-items:center;
  padding:clamp(34px,4vw,52px);
  border-radius:28px;
  color:#f5fbfc;
  background:
    radial-gradient(circle at 84% 12%,rgba(117,217,207,.15),transparent 34%),
    linear-gradient(135deg,#08292f 0%,#0a3b3b 100%);
  box-shadow:0 22px 54px rgba(7,35,42,.15);
}

.site-unified-page:not(.video-standard-page) .guide-head-copy h1{
  max-width:23ch;
  font-size:clamp(2rem,2.8vw,2.65rem);
  line-height:1.08;
}

.site-unified-page:not(.video-standard-page) .guide-head-copy .lede{
  color:#d4e4e5;
}

.site-unified-page:not(.video-standard-page) .guide-head .meta{
  color:#84ddd4;
}

.site-unified-page:not(.video-standard-page) .guide-facts{
  margin:clamp(34px,4vw,48px) 0;
  padding:clamp(28px,3.2vw,40px);
}

.site-unified-page:not(.video-standard-page) .guide-sec{
  margin:clamp(38px,4.6vw,56px) 0;
}

.site-unified-page:not(.video-standard-page) .guide-faq,
.site-unified-page:not(.video-standard-page) .guide-related{
  margin:clamp(42px,5vw,58px) 0;
  padding:0;
}

.site-unified-page:not(.video-standard-page) .guide-cta{
  margin-top:clamp(42px,5vw,58px);
}

.site-unified-page main img,
.site-unified-page main video{
  max-width:100%;
}

.site-unified-page main img{
  object-fit:cover;
}

/* Never stretch product, factory or process media to fill the wrong shape. */
.site-unified-page figure,
.site-unified-page picture{
  min-width:0;
}

/* One action hierarchy across the site. Existing semantic classes are kept. */
.site-unified-page main .button:not(.secondary),
.site-unified-page main .btn:not(.secondary),
.site-unified-page main .hero-actions a:first-child,
.site-unified-page main .actions a:first-child,
.site-unified-page main .cta-button,
.site-unified-page main a.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 20px;
  border:1px solid #ffbd72;
  border-radius:12px;
  color:#172d31;
  background:linear-gradient(180deg,var(--su-orange-top) 0%,var(--su-orange) 100%);
  box-shadow:0 5px 0 var(--su-orange-deep),0 13px 24px rgba(185,96,28,.21);
  font-weight:850;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}

.site-unified-page main .button.secondary,
.site-unified-page main .btn.secondary,
.site-unified-page main .hero-actions a:nth-child(2),
.site-unified-page main .actions a:nth-child(2){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 20px;
  border:1px solid #82a9a6;
  border-radius:12px;
  color:#164f51;
  background:#eff8f5;
  box-shadow:0 4px 0 #b6d2ce;
  font-weight:820;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
}

.site-unified-page main .button:not(.secondary):hover,
.site-unified-page main .btn:not(.secondary):hover,
.site-unified-page main .hero-actions a:hover,
.site-unified-page main .actions a:hover,
.site-unified-page main .cta-button:hover,
.site-unified-page main a.primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  text-decoration:none;
}

/* Old base stylesheet used 96px repeatedly. The approved rhythm is tighter. */
.site-unified-page .page-hero,
.site-unified-page .scenes,
.site-unified-page .materials,
.site-unified-page .process,
.site-unified-page .answers,
.site-unified-page .industries,
.site-unified-page .solutions,
.site-unified-page .comparison,
.site-unified-page .choice,
.site-unified-page .tools,
.site-unified-page .real,
.site-unified-page .faq,
.site-unified-page .apps,
.site-unified-page .person,
.site-unified-page .customer-proof,
.site-unified-page .evaluation-path,
.site-unified-page .decision-next,
.site-unified-page .testcond,
.site-unified-page .pattern,
.site-unified-page .reqpanel,
.site-unified-page .ask,
.site-unified-page .next,
.site-unified-page .signcta{
  padding-top:clamp(46px,5.2vw,68px);
  padding-bottom:clamp(46px,5.2vw,68px);
}

.site-unified-page.product-page .evaluation-path{
  padding-top:clamp(48px,5.2vw,68px);
  padding-bottom:clamp(48px,5.2vw,68px);
}

/* The powder-coating guide has one opening question block without a class.
   Keep it on the same compact rhythm as the named sections below it. */
.site-unified-page main > section:not(.hero){
  padding-top:clamp(46px,5.2vw,68px);
  padding-bottom:clamp(46px,5.2vw,68px);
}

/* Reusable cards should feel related, without turning every block into a box. */
.site-unified-page .app,
.site-unified-page .scene,
.site-unified-page .solution,
.site-unified-page .answer,
.site-unified-page .tool,
.site-unified-page .industry{
  border-color:var(--su-line);
}

/* Final inquiry areas use deep green rather than another pale button. */
.site-unified-page .signcta .navcta,
.site-unified-page .cta .navcta,
.site-unified-page .ask .navcta,
.site-unified-page .reqpanel .navcta{
  color:#fff;
  border:1px solid #18a780;
  background:linear-gradient(180deg,#19ad82 0%,var(--su-green) 100%);
  box-shadow:0 5px 0 var(--su-green-deep),0 14px 26px rgba(7,93,72,.25);
}

@media(max-width:760px){
  .site-unified-page .crumb li:last-child{
    display:none;
  }

  .site-unified-page main h1{
    font-size:clamp(1.92rem,8.5vw,2.35rem)!important;
    line-height:1.1!important;
  }

  .site-unified-page main h2{
    font-size:clamp(1.58rem,7vw,2rem)!important;
    line-height:1.15!important;
  }
  .site-unified-page.product-page .page-hero h1{
    font-size:clamp(1.95rem,8.2vw,2.28rem)!important;
  }
  .site-unified-page:not(.video-standard-page) .guide{
    width:min(100% - 28px,1240px);
    margin:14px auto 42px;
  }
  .site-unified-page:not(.video-standard-page) .guide-head{
    gap:22px;
    padding:28px 20px;
    border-radius:22px;
  }

  .site-unified-page:not(.video-standard-page) .guide-head-copy h1{
    font-size:clamp(1.78rem,7.7vw,2.08rem)!important;
  }

  .site-unified-page main > section:not(.hero){
    padding-top:38px;
    padding-bottom:38px;
  }

  .site-unified-page .page-hero,
  .site-unified-page .scenes,
  .site-unified-page .materials,
  .site-unified-page .process,
  .site-unified-page .answers,
  .site-unified-page .industries,
  .site-unified-page .solutions,
  .site-unified-page .comparison,
  .site-unified-page .choice,
  .site-unified-page .tools,
  .site-unified-page .real,
  .site-unified-page .faq,
  .site-unified-page .apps,
  .site-unified-page .person,
  .site-unified-page .customer-proof,
  .site-unified-page .evaluation-path,
  .site-unified-page .decision-next,
  .site-unified-page .testcond,
  .site-unified-page .pattern,
  .site-unified-page .reqpanel,
  .site-unified-page .ask,
  .site-unified-page .next,
  .site-unified-page .signcta{
    padding-top:38px;
    padding-bottom:38px;
  }

  .site-unified-page main .button,
  .site-unified-page main .btn,
  .site-unified-page main .hero-actions a,
  .site-unified-page main .actions a,
  .site-unified-page main .cta-button,
  .site-unified-page main a.primary{
    width:100%;
    min-height:48px;
  }
}