/* ==========================================================================
   pages.css — per-page primitives
   Page hero, long-form bodies, contact grid.
   ========================================================================== */


/* ==========================================================================
   § 01 — Page hero (inner-page heading block)
   Numeric "Section" marker top-right, oversized headline, sub copy.
   ========================================================================== */
.page-hero{
  position: relative;
  padding: clamp(80px, 9vw, 144px) 0 clamp(56px, 6vw, 96px);
  border-bottom: 1px solid var(--ink-deep);
  overflow: hidden;
}
.page-hero::before{
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image:
    linear-gradient(to right, transparent calc(50% - 0.5px), oklch(0.85 0.014 70 / 0.45) 50%, transparent calc(50% + 0.5px));
  background-size: 12.5% 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 60%, transparent 100%);
  pointer-events: none;
  opacity: 0.4;
}
.page-hero .container{ position: relative; }

.page-hero .eyebrow{
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink-deep);
}
.page-hero .eyebrow::before{ background: var(--signal); width: 36px; }

.page-hero h1{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 5.5vw + 0.5rem, 6.4rem);
  letter-spacing: -0.032em;
  line-height: 0.92;
  color: var(--ink-deep);
  margin: 0 0 28px;
  max-width: 22ch;
  text-wrap: balance;
}
.page-hero .sub{
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.2rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 56ch;
  font-weight: 400;
}
.page-hero .sub a{ color: var(--ink-deep); border-bottom: 1px solid var(--ink-deep); }
.page-hero .sub a:hover{ color: var(--signal); border-bottom-color: var(--signal); }

.page-hero.sage::before{
  background-image:
    linear-gradient(to right, transparent calc(50% - 0.5px), oklch(0.74 0.060 145 / 0.40) 50%, transparent calc(50% + 0.5px));
  background-size: 12.5% 100%;
}


/* ==========================================================================
   § 02 — About body (long-form essay)
   ========================================================================== */
.about-body{
  max-width: 64ch;
  margin: 0 auto;
}
.about-body h1{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 3.5vw + 1rem, 4.4rem);
  letter-spacing: -0.026em;
  line-height: 0.94;
  margin: 0 0 40px;
  text-wrap: balance;
}
.about-body p{
  font-family: var(--font-sans);
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 24px;
}
.about-body p em{
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  color: var(--signal);
}
.about-body .closer{
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.about-body .closer .flower{ margin-left: auto; }


/* ==========================================================================
   § 03 — Legal body (terms / privacy)
   ========================================================================== */
.legal-body{
  max-width: 64ch;
  margin: 0 auto;
}
.legal-body h1{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 3.5vw + 0.5rem, 4rem);
  letter-spacing: -0.028em;
  line-height: 0.94;
  margin: 0 0 36px;
}
.legal-body h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.014em;
  color: var(--ink-deep);
  margin: 48px 0 16px;
}
.legal-body p{
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 18px;
}


/* ==========================================================================
   § 04 — Contact grid
   ========================================================================== */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: var(--inner);
  margin: 0 auto;
}
@media (min-width: 880px){
  .contact-grid{ grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; }
}

.contact-info dl{ margin: 0; padding: 0; border-top: 1px solid var(--ink-deep); }
.contact-info dl > div{
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.contact-info dl > div:last-child{ border-bottom: 1px solid var(--ink-deep); }
.contact-info dt{
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.contact-info dd{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.012em;
  color: var(--ink-deep);
}
.contact-info dd a{
  color: var(--ink-deep);
  border-bottom: 1px solid var(--ink-deep);
}
.contact-info dd a:hover{ color: var(--signal); border-bottom-color: var(--signal); }


/* ==========================================================================
   § 05 — Pricing wrapper
   ========================================================================== */
.pricing-included{ max-width: var(--inner); margin: 0 auto; }