/* =========================================================
   V87 — COMPLETE HERO REBUILD
   Centered white ad-card heroes with rounded artwork, live HTML
   CTAs, promotions and contact information. Supplied hero artwork
   is never cropped. The hero starts below the fixed nav stack.
   ========================================================= */

:root{
  --v87-ink:#07121a;
  --v87-muted:#596672;
  --v87-line:rgba(7,18,26,.10);
  --v87-teal:#0798aa;
  --v87-teal-deep:#087b8a;
  --v87-orange:#ff5a0a;
  --v87-yellow:#ffbd15;
  --v87-soft:#f6fafb;
  --v87-nav-offset:148px;
}

body.theme-v38{
  background:#fff!important;
}

/* Retire the old cinematic hero runtime visually if any old markup remains. */
body.theme-v38 .v73-cinematic,
body.theme-v38 .v78-page-promo-hero{
  display:none!important;
}

body.v87-auto-hero main > :is(
  .v38-home-hero,
  .services-atelier-hero,
  .business-solutions-hero,
  .school-hero,
  .shop-rack-hero,
  .gallery-hero-split,
  .contact-router-hero,
  .studio-story-hero,
  .pc-hero,
  .local-proof-hero,
  .video-theater-hero,
  .learn-hero,
  .editorial-blog-hero,
  .pricing-center-hero,
  .file-prep-hero,
  .deadline-hero,
  .event-guide-hero,
  .production-hero,
  .page-hero.compact-hero
){display:none!important}

.v87-page-hero{
  position:relative;
  width:100%;
  margin:0;
  padding:var(--v87-nav-offset) clamp(12px,2.8vw,44px) clamp(34px,4vw,58px);
  background:#fff;
  color:var(--v87-ink);
  overflow:clip;
  isolation:isolate;
  scroll-margin-top:var(--v87-nav-offset);
}

.v87-page-hero::before,
.v87-page-hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:999px;
  filter:blur(1px);
  opacity:.58;
}
.v87-page-hero::before{
  width:420px;height:420px;
  right:-190px;top:calc(var(--v87-nav-offset) + 12px);
  background:radial-gradient(circle,rgba(7,152,170,.13),rgba(7,152,170,0) 68%);
}
.v87-page-hero::after{
  width:320px;height:320px;
  left:-160px;bottom:-145px;
  background:radial-gradient(circle,rgba(255,90,10,.09),rgba(255,90,10,0) 70%);
}

.v87-hero-container{
  width:min(1480px,100%);
  margin:0 auto;
}

.v87-hero-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(340px,.78fr) minmax(520px,1.22fr);
  grid-template-areas:
    "copy media"
    "proof proof";
  gap:clamp(18px,2vw,32px);
  align-items:center;
  padding:clamp(18px,2.2vw,34px);
  background:#fff;
  border:1px solid var(--v87-line);
  border-radius:clamp(24px,2.4vw,38px);
  box-shadow:0 24px 70px rgba(23,54,66,.13),0 4px 14px rgba(23,54,66,.05);
  overflow:hidden;
}

.v87-hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 92% 10%,rgba(7,152,170,.07),transparent 26%),
    radial-gradient(circle at 6% 96%,rgba(255,90,10,.055),transparent 24%);
}

.v87-hero-copy{
  grid-area:copy;
  position:relative;
  z-index:2;
  display:grid;
  align-content:center;
  gap:clamp(10px,1.15vw,16px);
  min-width:0;
}

.v87-hero-topline{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.v87-hero-kicker,
.v87-hero-status{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  border-radius:999px;
  padding:7px 11px;
  font-size:10px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.v87-hero-kicker{
  color:#066e7b;
  background:#e9f8fa;
  border:1px solid rgba(7,152,170,.14);
}
.v87-hero-status{
  color:#3f4d56;
  background:#f8fafb;
  border:1px solid rgba(7,18,26,.08);
}
.v87-hero-status i{
  width:8px;height:8px;margin-right:7px;border-radius:50%;
  background:#18a558;
  box-shadow:0 0 0 4px rgba(24,165,88,.10);
}

.v87-page-hero h1{
  margin:0;
  max-width:11ch;
  color:var(--v87-ink)!important;
  font-family:'Space Grotesk',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:clamp(44px,4.7vw,76px);
  line-height:.93;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.v87-hero-subheadline{
  margin:0;
  max-width:36ch;
  color:var(--v87-teal-deep)!important;
  font-size:clamp(18px,1.45vw,25px);
  line-height:1.18;
  font-weight:900;
  text-wrap:balance;
}

.v87-hero-description{
  margin:0;
  max-width:59ch;
  color:var(--v87-muted)!important;
  font-size:clamp(14px,1vw,17px);
  line-height:1.6;
}

.v87-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.v87-hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:50px;
  padding:12px 17px;
  border-radius:15px;
  text-decoration:none!important;
  font-size:13px;
  line-height:1.1;
  font-weight:950;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.v87-hero-btn:hover,.v87-hero-btn:focus-visible{transform:translateY(-2px)}
.v87-hero-btn:focus-visible{outline:3px solid rgba(7,152,170,.30);outline-offset:3px}
.v87-hero-btn--primary{
  color:#07121a!important;
  background:linear-gradient(135deg,#ffd338 0%,var(--v87-yellow) 58%,#ffa614 100%);
  box-shadow:0 12px 28px rgba(255,174,0,.24);
}
.v87-hero-btn--primary b{
  display:grid;place-items:center;
  width:27px;height:27px;
  border-radius:50%;
  background:#07121a;color:#fff;
  font-size:16px;
}
.v87-hero-btn--secondary{
  color:#07121a!important;
  background:#fff;
  border:1px solid rgba(7,18,26,.15);
  box-shadow:0 9px 20px rgba(15,43,54,.07);
}

.v87-hero-promo{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  align-items:start;
  padding:13px 14px;
  border-radius:18px;
  background:linear-gradient(135deg,#fff7ec,#fffdf8 72%);
  border:1px solid rgba(255,90,10,.18);
  box-shadow:0 9px 24px rgba(121,61,19,.055);
}
.v87-hero-promo-icon{
  display:grid;place-items:center;
  width:42px;height:42px;
  border-radius:14px;
  background:var(--v87-orange);
  color:#fff;
  font-weight:950;
  font-size:19px;
}
.v87-hero-promo span{
  display:block;
  margin-bottom:3px;
  color:#d74800;
  font-size:9px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.v87-hero-promo strong{
  display:block;
  color:#101820;
  font-size:clamp(15px,1.2vw,20px);
  line-height:1.15;
}
.v87-hero-promo p{
  margin:4px 0 0;
  color:#66717b;
  font-size:12px;
  line-height:1.4;
}

.v87-hero-contact{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.v87-hero-contact>a,.v87-hero-contact>div{
  display:grid;
  gap:3px;
  min-width:0;
  padding:9px 10px;
  border-radius:13px;
  background:#f7fafb;
  border:1px solid rgba(7,18,26,.075);
  color:#07121a!important;
  text-decoration:none!important;
}
.v87-hero-contact>a:hover,.v87-hero-contact>a:focus-visible{
  background:#eefbfc;
  border-color:rgba(7,152,170,.38);
}
.v87-hero-contact small{
  color:#7b8790;
  font-size:8px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.v87-hero-contact strong{
  color:#18242c;
  font-size:11px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.v87-hero-media{
  grid-area:media;
  position:relative;
  z-index:2;
  align-self:center;
  min-width:0;
  margin:0;
}
.v87-hero-image-frame{
  width:100%;
  padding:clamp(7px,.75vw,10px);
  border-radius:clamp(20px,2vw,30px);
  background:#fff;
  border:1px solid rgba(7,18,26,.10);
  box-shadow:0 22px 52px rgba(18,52,64,.15);
  overflow:hidden;
}
.v87-hero-media img{
  display:block;
  width:100%;
  height:auto!important;
  max-width:100%;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:clamp(15px,1.45vw,23px);
  background:#fff;
}
.v87-hero-media figcaption{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:9px 8px 0;
  color:#7b8790;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.v87-hero-media figcaption strong{color:#087d8c;text-align:right}

.v87-hero-proofbar{
  grid-area:proof;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  border-radius:17px;
  background:rgba(7,18,26,.08);
  border:1px solid rgba(7,18,26,.07);
}
.v87-hero-proofbar>div{
  display:grid;
  gap:3px;
  padding:11px 14px;
  background:#f8fbfc;
}
.v87-hero-proofbar small{
  color:#087f8f;
  font-size:8px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.v87-hero-proofbar strong{
  color:#26323b;
  font-size:12px;
  line-height:1.3;
}

.v87-page-hero--orange .v87-hero-kicker{color:#c94300;background:#fff1e8;border-color:rgba(255,90,10,.16)}
.v87-page-hero--orange .v87-hero-subheadline{color:#e24c06!important}
.v87-page-hero--yellow .v87-hero-kicker{color:#7d5700;background:#fff8db;border-color:rgba(255,189,21,.24)}

/* Campaign bars remain usable with the rebuilt hero. */
body.theme-v38 > .campaign-announcement,
body.theme-v38 .promo-bar{
  z-index:88;
}

@media (max-width:1180px){
  .v87-hero-card{grid-template-columns:minmax(310px,.82fr) minmax(430px,1.18fr);padding:22px;gap:22px}
  .v87-page-hero h1{font-size:clamp(40px,5.2vw,62px)}
  .v87-hero-description{font-size:14px}
  .v87-hero-contact strong{font-size:10px}
}

@media (max-width:900px){
  :root{--v87-nav-offset:132px}
  .v87-page-hero{padding-inline:14px;padding-bottom:40px}
  .v87-hero-card{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "media" "proof";
    gap:20px;
    padding:20px;
    border-radius:28px;
  }
  .v87-page-hero h1{max-width:15ch;font-size:clamp(40px,8.5vw,60px)}
  .v87-hero-subheadline{max-width:44ch}
  .v87-hero-description{max-width:65ch}
  .v87-hero-media{width:100%}
  .v87-hero-contact{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  :root{--v87-nav-offset:120px}
  .v87-page-hero{padding-inline:9px;padding-bottom:28px}
  .v87-hero-card{padding:13px;border-radius:22px;gap:15px;box-shadow:0 16px 42px rgba(23,54,66,.11)}
  .v87-hero-copy{gap:11px}
  .v87-hero-topline{align-items:flex-start}
  .v87-page-hero h1{font-size:clamp(34px,11vw,48px);line-height:.95;letter-spacing:-.045em}
  .v87-hero-subheadline{font-size:18px}
  .v87-hero-description{font-size:14px;line-height:1.5}
  .v87-hero-actions{display:grid;grid-template-columns:1fr}
  .v87-hero-btn{width:100%;min-height:49px}
  .v87-hero-promo{grid-template-columns:38px 1fr;padding:11px}
  .v87-hero-promo-icon{width:38px;height:38px;border-radius:12px}
  .v87-hero-contact{grid-template-columns:1fr 1fr}
  .v87-hero-contact>a,.v87-hero-contact>div{padding:8px 9px}
  .v87-hero-image-frame{padding:5px;border-radius:17px}
  .v87-hero-media img{border-radius:12px}
  .v87-hero-media figcaption{display:none}
  .v87-hero-proofbar{grid-template-columns:1fr}
  .v87-hero-proofbar>div{padding:10px 12px}
}

@media (max-width:390px){
  .v87-hero-contact{grid-template-columns:1fr}
  .v87-hero-kicker,.v87-hero-status{font-size:9px}
}

/* Short screens: compact the live content, never crop the supplied image. */
@media (min-width:901px) and (max-height:840px){
  .v87-page-hero{padding-bottom:24px}
  .v87-hero-card{padding:18px;gap:17px}
  .v87-hero-copy{gap:9px}
  .v87-page-hero h1{font-size:clamp(40px,4vw,60px)}
  .v87-hero-subheadline{font-size:17px}
  .v87-hero-description{font-size:13px;line-height:1.45}
  .v87-hero-btn{min-height:44px;padding-block:9px}
  .v87-hero-promo{padding:10px 12px}
  .v87-hero-contact>a,.v87-hero-contact>div{padding:7px 9px}
  .v87-hero-proofbar>div{padding:8px 12px}
}

@media (prefers-reduced-motion:reduce){
  .v87-hero-btn{transition:none}
}