/* ============================================================================
   Pecan & Petal. Editorial pages (About / Our Story, Flower Care, Contact + FAQ)
   Slice: editorial  .  Author: Facet
   ----------------------------------------------------------------------------
   FLOWERBX-style luxury / minimal / editorial: abundant whitespace, a narrow
   reading column, Fraunces display + Manrope body, dark-bronze feature bands
   with white text.

   PALETTE RULE: the central theme layer (mu-plugins/zzz-pnp-overrides.php) owns
   every color. This file NEVER hardcodes a palette hex. All color comes from:
     var(--pnp-bronze)       #6e5a43  dark bands / buttons  (WHITE text on these)
     var(--pnp-bronze-dark)  #574733  hover
     var(--pnp-peach)        #f6ede7  page ground
     var(--pnp-coral)        #c6634a  Sale / Subscribe spark
     var(--pnp-ink)          #2a2620  body text on light
   Muted text, hairlines and image scrims are DERIVED from those via color-mix(),
   so one palette retune in the central layer cascades through every page here.
   White (#fff) is used only for text on bronze bands and for card surfaces;
   rgba(0,0,0,x) is used only for shadows. Both are structural, not palette.

   Everything is scoped under .pnp-ed so this slice is self-contained and never
   collides with the homepage slice (.pnp-home). The primitives below intentionally
   mirror homepage.css so the two pages read as one system.
   ============================================================================ */

/* ---- scope + derived tokens ------------------------------------------------ */
.pnp-ed{
  /* derived, palette-driven. Do not hardcode; retunes with the central layer */
  --pnp-muted:      color-mix(in srgb, var(--pnp-ink)   58%, var(--pnp-peach));
  --pnp-line:       color-mix(in srgb, var(--pnp-bronze) 20%, transparent);
  --pnp-line-soft:  color-mix(in srgb, var(--pnp-bronze) 12%, transparent);
  --pnp-surface:    #fff;                 /* card surface (structural white) */
  --pnp-peach-deep: color-mix(in srgb, var(--pnp-peach) 82%, var(--pnp-bronze));
  --pnp-peach-soft: color-mix(in srgb, var(--pnp-peach) 55%, #fff);
  --pnp-scrim:      color-mix(in srgb, var(--pnp-ink) 42%, transparent);
  --pnp-scrim-hi:   color-mix(in srgb, var(--pnp-ink) 72%, transparent);
  --pnp-onbronze:   color-mix(in srgb, #fff 82%, var(--pnp-bronze)); /* soft white on bronze */

  --pnp-maxw:  1240px;
  --pnp-read:  760px;                      /* narrow editorial reading column */
  --pnp-gap:   2rem;

  /* break out of the theme content column so bands can go edge to edge */
  width: 100vw;
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  overflow-x: clip;

  background: var(--pnp-peach);
  color: var(--pnp-ink);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.pnp-ed *,
.pnp-ed *::before,
.pnp-ed *::after{ box-sizing: border-box; }

.pnp-ed h1,.pnp-ed h2,.pnp-ed h3,.pnp-ed h4{
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  color: var(--pnp-ink);
  margin: 0;
}
.pnp-ed p{ margin: 0; }
.pnp-ed img{ max-width: 100%; display: block; }

/* shared inner container + section rhythm (generous editorial whitespace) */
.pnp-ed .pnp-wrap{ max-width: var(--pnp-maxw); margin: 0 auto; padding: 0 var(--pnp-gap); }
.pnp-ed .pnp-wrap--read{ max-width: calc(var(--pnp-read) + var(--pnp-gap) * 2); }
.pnp-ed .pnp-section{ padding: 5.5rem 0; }
.pnp-ed .pnp-section--tight{ padding: 3.75rem 0; }

/* shared eyebrow + section heading + lead (match homepage.css) */
.pnp-ed .pnp-eyebrow{
  font-family: "Manrope", sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--pnp-bronze);
  margin: 0 0 .9rem;
}
.pnp-ed .pnp-h2{ font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 500; line-height: 1.08; }
.pnp-ed .pnp-lead{
  font-family: "Manrope", sans-serif;
  font-size: 1.12rem; line-height: 1.75; color: var(--pnp-muted);
}

/* shared buttons + link (match homepage.css button system) */
.pnp-ed .pnp-btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  padding: .95rem 2.1rem; border-radius: 3px; border: 1.5px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pnp-ed .pnp-btn--solid{ background: var(--pnp-bronze); color: #fff; }
.pnp-ed .pnp-btn--solid:hover{ background: var(--pnp-bronze-dark); color: #fff; }
.pnp-ed .pnp-btn--ghost{ background: transparent; color: var(--pnp-bronze); border-color: var(--pnp-bronze); }
.pnp-ed .pnp-btn--ghost:hover{ background: var(--pnp-bronze); color: #fff; }
.pnp-ed .pnp-btn--onphoto{ background: #fff; color: var(--pnp-bronze); }
.pnp-ed .pnp-btn--onphoto:hover{ background: var(--pnp-bronze); color: #fff; }
.pnp-ed .pnp-btn--onbronze{ background: #fff; color: var(--pnp-bronze); }
.pnp-ed .pnp-btn--onbronze:hover{ background: var(--pnp-bronze-dark); color: #fff; }
.pnp-ed .pnp-link{
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pnp-bronze); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
}
.pnp-ed .pnp-link svg{ width: 15px; height: 15px; transition: transform .18s ease; }
.pnp-ed .pnp-link:hover{ color: var(--pnp-bronze-dark); }
.pnp-ed .pnp-link:hover svg{ transform: translateX(4px); }

/* ============================================================================
   MASTHEAD. page header for every editorial page.
   Two variants share one block:
     .pnp-ed__masthead--photo  full-bleed image + scrim + white type
     .pnp-ed__masthead--plain  quiet peach ground + bronze eyebrow (default)
   The image is set inline with style="background-image:url(...)"; if it is
   absent or fails to load, the palette tint shows through, never a broken box.
   ============================================================================ */
.pnp-ed__masthead{ position: relative; }
.pnp-ed__masthead .pnp-wrap{ position: relative; z-index: 2; }

/* plain (default): centered, airy, peach ground with a hairline rule under it */
.pnp-ed__masthead--plain{
  background: var(--pnp-peach);
  text-align: center;
  padding: clamp(3.5rem, 8vh, 6rem) 0 clamp(2.75rem, 5vh, 4rem);
  border-bottom: 1px solid var(--pnp-line-soft);
}
.pnp-ed__masthead--plain .pnp-ed__title{ color: var(--pnp-ink); }
.pnp-ed__masthead--plain .pnp-ed__sub{ color: var(--pnp-muted); margin-left: auto; margin-right: auto; }

/* photo: full-bleed image, bottom-weighted scrim, white type */
.pnp-ed__masthead--photo{
  min-height: clamp(360px, 52vh, 540px);
  background-color: var(--pnp-peach-deep);
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
  text-align: center;
}
.pnp-ed__masthead--photo::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, var(--pnp-scrim-hi) 0%, var(--pnp-scrim) 40%, transparent 78%);
}
.pnp-ed__masthead--photo .pnp-wrap{
  padding-top: 3rem; padding-bottom: clamp(2.5rem, 6vh, 4rem);
  width: 100%;
}
.pnp-ed__masthead--photo .pnp-eyebrow{ color: #fff; opacity: .92; }
.pnp-ed__masthead--photo .pnp-ed__title{ color: #fff; }
.pnp-ed__masthead--photo .pnp-ed__sub{ color: #fff; opacity: .95; margin-left: auto; margin-right: auto; }

.pnp-ed__title{
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  line-height: 1.04;
  margin: 0;
}
.pnp-ed__title em{ font-style: italic; color: var(--pnp-bronze); }
.pnp-ed__masthead--photo .pnp-ed__title em{ color: #fff; }
.pnp-ed__sub{
  font-family: "Manrope", sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.65;
  max-width: 48ch; margin: 1.1rem 0 0;
}

/* ============================================================================
   PROSE. the shared rich-text skin for authored copy AND the page editor's
   the_content() fallback. Anything inside .pnp-ed__prose reads as editorial.
   ============================================================================ */
.pnp-ed__prose{
  max-width: var(--pnp-read);
  margin: 0 auto;
  font-family: "Manrope", sans-serif;
  font-size: 1.08rem; line-height: 1.8; color: var(--pnp-ink);
}
.pnp-ed__prose > * + *{ margin-top: 1.35rem; }
.pnp-ed__prose h2{
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500; line-height: 1.14;
  margin-top: 3rem; margin-bottom: .2rem;
}
.pnp-ed__prose h3{
  font-size: 1.32rem; font-weight: 500; line-height: 1.2;
  margin-top: 2.2rem; margin-bottom: .1rem;
}
.pnp-ed__prose p{ color: var(--pnp-ink); }
.pnp-ed__prose a{ color: var(--pnp-bronze); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pnp-ed__prose a:hover{ color: var(--pnp-bronze-dark); }
.pnp-ed__prose strong,
.pnp-ed__prose b{ color: var(--pnp-ink); font-weight: 700; }
.pnp-ed__prose ul,
.pnp-ed__prose ol{ padding-left: 1.35rem; }
.pnp-ed__prose li{ margin: .5rem 0; }
.pnp-ed__prose li::marker{ color: var(--pnp-bronze); }
.pnp-ed__prose figure{ margin: 2.5rem 0; }
.pnp-ed__prose figure img{ border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.1); width: 100%; }
.pnp-ed__prose figcaption{
  margin-top: .7rem; text-align: center;
  font-size: .84rem; letter-spacing: .04em; color: var(--pnp-muted);
}
.pnp-ed__prose blockquote{
  margin: 2.5rem 0; padding: .2rem 0 .2rem 1.6rem;
  border-left: 3px solid var(--pnp-bronze);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 400; font-style: italic;
  line-height: 1.4; color: var(--pnp-ink);
}
.pnp-ed__prose hr{
  border: 0; height: 1px; background: var(--pnp-line-soft);
  margin: 3rem 0;
}

/* shared editorial figure (used outside .pnp-ed__prose too) */
.pnp-ed__figure{ margin: 0; }
.pnp-ed__figure .media{
  border-radius: 12px; overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: var(--pnp-peach-deep);
  background-size: cover; background-position: center;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}
.pnp-ed__figure figcaption{
  margin-top: .8rem; text-align: center;
  font-size: .84rem; letter-spacing: .04em; color: var(--pnp-muted);
}

/* a large centered pull quote band on the peach ground */
.pnp-ed__pull{ text-align: center; }
.pnp-ed__pull .pnp-wrap{ max-width: 900px; }
.pnp-ed__pull blockquote{
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400; font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.28;
  color: var(--pnp-ink);
}
.pnp-ed__pull blockquote em{ color: var(--pnp-bronze); }
.pnp-ed__pull cite{
  display: block; margin-top: 1.4rem;
  font-family: "Manrope", sans-serif; font-style: normal;
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pnp-muted);
}

/* ============================================================================
   INTRO. a two-column opener (lead statement + supporting paragraph)
   used at the top of About / Our Story under the masthead.
   ============================================================================ */
.pnp-ed__intro .pnp-wrap{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
}
.pnp-ed__intro-lead{
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 400; line-height: 1.3;
  color: var(--pnp-ink);
}
.pnp-ed__intro-lead em{ font-style: italic; color: var(--pnp-bronze); }
.pnp-ed__intro-body{ font-family: "Manrope", sans-serif; font-size: 1.04rem; line-height: 1.8; color: var(--pnp-muted); }
.pnp-ed__intro-body p + p{ margin-top: 1.1rem; }

/* ============================================================================
   SPLIT. reusable 2-col image + copy row (alternate with --flip).
   Used for founder note, sourcing story, care philosophy, etc.
   ============================================================================ */
.pnp-ed__split .pnp-wrap{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.pnp-ed__split--flip .pnp-ed__split-media{ order: 2; }
.pnp-ed__split-media{
  border-radius: 12px; overflow: hidden;
  aspect-ratio: 5 / 6;
  background-color: var(--pnp-peach-deep);
  background-size: cover; background-position: center;
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
}
.pnp-ed__split-copy h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 400; line-height: 1.1; margin: 0 0 1.2rem; }
.pnp-ed__split-copy h2 em{ font-style: italic; color: var(--pnp-bronze); }
.pnp-ed__split-copy p{ font-family: "Manrope", sans-serif; font-size: 1.03rem; line-height: 1.78; color: var(--pnp-muted); }
.pnp-ed__split-copy p + p{ margin-top: 1.1rem; }
.pnp-ed__split-copy .pnp-ed__sign{
  margin-top: 1.6rem;
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: 1.25rem; color: var(--pnp-bronze);
}
.pnp-ed__split-copy .pnp-ed__sign span{
  display: block; margin-top: .2rem;
  font-family: "Manrope", sans-serif; font-style: normal;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--pnp-muted);
}
.pnp-ed__split .pnp-btn,
.pnp-ed__split .pnp-link{ margin-top: 1.8rem; }

/* ============================================================================
   VALUES / FEATURE GRID. icon-led cards (About values, Care principles)
   ============================================================================ */
.pnp-ed__grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.pnp-ed__grid--2{ grid-template-columns: repeat(2, 1fr); }
.pnp-ed__grid--4{ grid-template-columns: repeat(4, 1fr); }
.pnp-ed__card{
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line-soft);
  border-radius: 10px;
  padding: 2rem 1.8rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pnp-ed__card:hover{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.pnp-ed__card-ico{
  width: 46px; height: 46px; margin-bottom: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pnp-bronze) 10%, transparent);
  color: var(--pnp-bronze);
}
.pnp-ed__card-ico svg{ width: 24px; height: 24px; }
.pnp-ed__card h3{ font-size: 1.28rem; font-weight: 500; margin: 0 0 .5rem; }
.pnp-ed__card p{ font-family: "Manrope", sans-serif; font-size: .95rem; line-height: 1.65; color: var(--pnp-muted); }

/* ============================================================================
   STAT ROW. three or four numbers, editorial (About: "since 2019", etc.)
   ============================================================================ */
.pnp-ed__stats{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.pnp-ed__stat b{
  display: block;
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1; color: var(--pnp-bronze);
}
.pnp-ed__stat span{
  display: block; margin-top: .6rem;
  font-family: "Manrope", sans-serif; font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pnp-muted);
}

/* ============================================================================
   BRONZE BAND. dark feature strip (sourcing promise, freshness guarantee, CTA).
   Full width because .pnp-ed is 100vw; content re-centers with .pnp-wrap.
   ============================================================================ */
.pnp-ed__band{ background: var(--pnp-bronze); color: #fff; }
.pnp-ed__band .pnp-wrap{ text-align: center; max-width: 820px; }
.pnp-ed__band .pnp-eyebrow{ color: var(--pnp-onbronze); }
.pnp-ed__band h2{ color: #fff; font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.12; margin: 0 0 1rem; }
.pnp-ed__band h2 em{ font-style: italic; }
.pnp-ed__band p{ color: var(--pnp-onbronze); font-family: "Manrope", sans-serif; font-size: 1.06rem; line-height: 1.7; margin: 0 auto; max-width: 56ch; }
.pnp-ed__band .pnp-cta-row{ margin-top: 2rem; display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================================
   NUMBERED STEPS. the Flower Care "how to make them last" sequence.
   CSS counters drive the big serif numerals so markup stays a plain list.
   ============================================================================ */
.pnp-ed__steps{ counter-reset: pnpstep; list-style: none; padding: 0; margin: 0; }
.pnp-ed__steps > li{
  counter-increment: pnpstep;
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--pnp-line-soft);
}
.pnp-ed__steps > li:last-child{ border-bottom: 0; }
.pnp-ed__steps > li::before{
  content: counter(pnpstep, decimal-leading-zero);
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1;
  color: var(--pnp-bronze);
  min-width: 2.6rem;
}
.pnp-ed__steps h3{ font-size: 1.24rem; font-weight: 500; margin: .1rem 0 .4rem; }
.pnp-ed__steps p{ font-family: "Manrope", sans-serif; font-size: 1rem; line-height: 1.7; color: var(--pnp-muted); }

/* ============================================================================
   CARE CARDS. per-flower / per-type quick guidance, icon-led (no photos, so
   nothing can 404 in the rehearsal store). Grid of small cards.
   ============================================================================ */
.pnp-ed__care{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.pnp-ed__care-card{
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line-soft);
  border-radius: 10px;
  padding: 1.7rem 1.5rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.05);
}
.pnp-ed__care-card .top{ display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.pnp-ed__care-card .ico{
  width: 40px; height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pnp-bronze) 10%, transparent);
  color: var(--pnp-bronze);
}
.pnp-ed__care-card .ico svg{ width: 22px; height: 22px; }
.pnp-ed__care-card h3{ font-size: 1.16rem; font-weight: 500; margin: 0; }
.pnp-ed__care-card p{ font-family: "Manrope", sans-serif; font-size: .93rem; line-height: 1.62; color: var(--pnp-muted); }

/* a compact "at a glance" reference table (vase life, light, water) */
.pnp-ed__table{
  width: 100%; border-collapse: collapse;
  font-family: "Manrope", sans-serif; font-size: .96rem;
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line-soft); border-radius: 10px;
  overflow: hidden;
}
.pnp-ed__table th,
.pnp-ed__table td{ text-align: left; padding: .95rem 1.2rem; border-bottom: 1px solid var(--pnp-line-soft); }
.pnp-ed__table thead th{
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pnp-bronze); background: color-mix(in srgb, var(--pnp-bronze) 7%, transparent);
}
.pnp-ed__table tbody tr:last-child td{ border-bottom: 0; }
.pnp-ed__table td:first-child{ font-weight: 600; color: var(--pnp-ink); }
.pnp-ed__table td{ color: var(--pnp-muted); }
.pnp-ed__table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================================
   CONTACT. two columns: studio details + form. Form is styled markup only;
   see INTEGRATION.md for wiring a real form plugin. No checkout logic here.
   ============================================================================ */
.pnp-ed__contact .pnp-wrap{
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.pnp-ed__contact-info h2{ font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 500; margin: 0 0 1.4rem; }
.pnp-ed__contact-list{ list-style: none; padding: 0; margin: 0; }
.pnp-ed__contact-list li{
  display: grid; grid-template-columns: 26px 1fr; gap: .9rem;
  padding: 1rem 0; border-bottom: 1px solid var(--pnp-line-soft);
}
.pnp-ed__contact-list li:last-child{ border-bottom: 0; }
.pnp-ed__contact-list svg{ width: 22px; height: 22px; color: var(--pnp-bronze); margin-top: .15rem; }
.pnp-ed__contact-list b{
  display: block;
  font-family: "Manrope", sans-serif; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pnp-muted); margin-bottom: .2rem;
}
.pnp-ed__contact-list span,
.pnp-ed__contact-list a{
  font-family: "Manrope", sans-serif; font-size: 1.02rem; line-height: 1.5; color: var(--pnp-ink);
}
.pnp-ed__contact-list a{ color: var(--pnp-bronze); text-decoration: none; }
.pnp-ed__contact-list a:hover{ color: var(--pnp-bronze-dark); text-decoration: underline; }

/* the styled form shell (applies to the fallback form AND most plugin markup) */
.pnp-ed__form{
  background: var(--pnp-surface);
  border: 1px solid var(--pnp-line-soft);
  border-radius: 12px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.pnp-ed__form .row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pnp-ed__form label{
  display: block; margin-bottom: .4rem;
  font-family: "Manrope", sans-serif; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pnp-muted);
}
.pnp-ed__form .field{ margin-bottom: 1.1rem; }
.pnp-ed__form input,
.pnp-ed__form select,
.pnp-ed__form textarea{
  width: 100%;
  font-family: "Manrope", sans-serif; font-size: 1rem; color: var(--pnp-ink);
  background: var(--pnp-peach-soft);
  border: 1px solid var(--pnp-line);
  border-radius: 6px;
  padding: .85rem 1rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.pnp-ed__form input::placeholder,
.pnp-ed__form textarea::placeholder{ color: var(--pnp-muted); }
.pnp-ed__form input:focus,
.pnp-ed__form select:focus,
.pnp-ed__form textarea:focus{
  outline: none;
  border-color: var(--pnp-bronze);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pnp-bronze) 18%, transparent);
}
.pnp-ed__form textarea{ min-height: 140px; resize: vertical; }
.pnp-ed__form button,
.pnp-ed__form input[type="submit"]{
  width: 100%;
  font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--pnp-bronze);
  border: 0; border-radius: 3px; cursor: pointer;
  padding: 1.05rem 2rem;
  transition: background .18s ease;
}
.pnp-ed__form button:hover,
.pnp-ed__form input[type="submit"]:hover{ background: var(--pnp-bronze-dark); }
.pnp-ed__form .fine{
  margin-top: .9rem;
  font-family: "Manrope", sans-serif; font-size: .82rem; line-height: 1.5; color: var(--pnp-muted);
}

/* ============================================================================
   FAQ. native <details> accordion. No JavaScript, keyboard accessible.
   ============================================================================ */
.pnp-ed__faq{ max-width: var(--pnp-read); margin: 0 auto; }
.pnp-ed__faq details{
  border-bottom: 1px solid var(--pnp-line-soft);
}
.pnp-ed__faq details:first-of-type{ border-top: 1px solid var(--pnp-line-soft); }
.pnp-ed__faq summary{
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.4rem .2rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem); font-weight: 500; line-height: 1.3;
  color: var(--pnp-ink);
  transition: color .18s ease;
}
.pnp-ed__faq summary::-webkit-details-marker{ display: none; }
.pnp-ed__faq summary:hover{ color: var(--pnp-bronze); }
.pnp-ed__faq summary .chev{
  flex: 0 0 20px; width: 20px; height: 20px; color: var(--pnp-bronze);
  transition: transform .2s ease;
}
.pnp-ed__faq details[open] summary .chev{ transform: rotate(180deg); }
.pnp-ed__faq .ans{
  padding: 0 .2rem 1.5rem;
  font-family: "Manrope", sans-serif; font-size: 1.02rem; line-height: 1.72; color: var(--pnp-muted);
}
.pnp-ed__faq .ans p + p{ margin-top: .9rem; }
.pnp-ed__faq .ans a{ color: var(--pnp-bronze); text-decoration: underline; text-underline-offset: 3px; }
.pnp-ed__faq .ans a:hover{ color: var(--pnp-bronze-dark); }

/* ============================================================================
   CROSS-LINKS. a quiet band at the foot of every editorial page that points to
   the sibling pages + Shop, so the set reads as one editorial suite.
   ============================================================================ */
.pnp-ed__more{ border-top: 1px solid var(--pnp-line-soft); }
.pnp-ed__more .pnp-wrap{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.pnp-ed__more a{
  display: block; text-decoration: none;
  padding: 1.8rem; border-radius: 10px;
  background: var(--pnp-surface); border: 1px solid var(--pnp-line-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pnp-ed__more a:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.09); }
.pnp-ed__more .k{
  font-family: "Manrope", sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--pnp-bronze);
}
.pnp-ed__more .t{
  display: block; margin-top: .5rem;
  font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; font-weight: 500; color: var(--pnp-ink);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1000px){
  .pnp-ed .pnp-section{ padding: 4rem 0; }
  .pnp-ed__intro .pnp-wrap,
  .pnp-ed__split .pnp-wrap,
  .pnp-ed__contact .pnp-wrap{ grid-template-columns: 1fr; gap: 2.2rem; }
  .pnp-ed__split--flip .pnp-ed__split-media{ order: -1; }   /* image first on stack */
  .pnp-ed__grid,
  .pnp-ed__grid--4{ grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
  .pnp-ed__care{ grid-template-columns: repeat(2, 1fr); }
  .pnp-ed__more .pnp-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .pnp-ed .pnp-section{ padding: 3.25rem 0; }
  .pnp-ed__grid,
  .pnp-ed__grid--2,
  .pnp-ed__grid--4,
  .pnp-ed__care,
  .pnp-ed__stats{ grid-template-columns: 1fr; }
  .pnp-ed__form .row{ grid-template-columns: 1fr; }
  .pnp-ed__steps > li{ grid-template-columns: 1fr; gap: .4rem; }
  .pnp-ed__steps > li::before{ font-size: 1.6rem; }
}

/* ============================================================================
   MOTION SAFETY
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  .pnp-ed__card,
  .pnp-ed__more a,
  .pnp-ed .pnp-link svg,
  .pnp-ed__faq summary,
  .pnp-ed__faq summary .chev{ transition: none; }
}