/* ============================================================
   hero.css — LiquidPixels canonical hero styles
   Load on every page that has a .page-hero section.
   This file owns all hero rules. Do not write hero CSS
   anywhere else. Do not override these values in page CSS.
   ============================================================ */

.page-hero {
  padding: calc(136px + env(safe-area-inset-top, 0px)) 0 96px;
  background: var(--white);
  border-bottom: 1px solid var(--warm-200);
  position: relative;
  height: 624px;
  min-height: 624px;
}

/* Crosshatch grid */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--warm-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--warm-200) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .6;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 70%);
  pointer-events: none;
}

/* Content sits above grid */
.page-hero .wrap {
  position: relative;
  z-index: 1;
}

/* Overline */
.page-hero .section-tag {
  font-family: var(--f-label);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

/* H1 */
.page-hero h1 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.08;
  color: var(--ink-900);
  max-width: 680px;
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
}

/* Sub-heading */
.page-hero-sub {
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-600);
  max-width: 560px;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Illustration panel —
   top: 96px  = 2 × 48px grid units from section top
   height: 384px = 8 × 48px grid units
   image fills the 384px container, anchored to top        */
.page-hero-illustration {
  position: absolute;
  top: 0px;
  right: 0;
  height: 432px;
  pointer-events: none;
  mask-image: linear-gradient(to left, black 0%, black 30%, transparent 80%);
  -webkit-mask-image: linear-gradient(to left, black 0%, black 30%, transparent 80%);
  opacity: .7;
  z-index: 0;
}
.page-hero-illustration img {
  height: 100%;
  width: auto;
  display: block;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .page-hero-illustration { width: 440px; }
}

@media (max-width: 900px) {
  .page-hero-illustration { display: none; }
}

@media (max-width: 768px) {
  .page-hero {
    padding: calc(88px + env(safe-area-inset-top, 0px)) 0 60px;
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .page-hero h1 {
    font-size: clamp(32px, 8vw, 44px);
  }
}