/* ==========================================================================
   LEGACY COMPATIBILITY — Persica Homes 2026
   Keeps the HTML already saved in WordPress pages (About, The Process,
   Testimonials, Contact, and any page built with the v1 "ph-" classes)
   rendering correctly under the new theme.
   1. Maps the v1 design tokens onto the 2026 tokens.
   2. Ports the v1 component rules those pages use (extracted from the
      v1 components.css, minus the old nav / scene / footer shell).
   ========================================================================== */
:root {
  --ph-bg: var(--bg); --ph-surface-1: var(--dark); --ph-surface-2: var(--bg-2);
  --ph-border: var(--line); --ph-border-gold: rgba(207,169,0,.28);
  --ph-text: var(--text); --ph-text-dim: var(--text-2); --ph-text-muted: var(--text-3);
  --ph-gold: var(--gold); --ph-gold-light: var(--gold-2); --ph-gold-dim: var(--gold-soft); --ph-red: var(--red);
  --ph-font-display: var(--f-display); --ph-font-serif: var(--f-serif); --ph-font-body: var(--f-body);
  --ph-text-xs: var(--t-xs); --ph-text-sm: var(--t-sm); --ph-text-base: var(--t-base); --ph-text-md: var(--t-lg);
  --ph-text-lg: var(--t-lg); --ph-text-xl: var(--t-xl); --ph-text-2xl: var(--t-2xl); --ph-text-3xl: var(--t-2xl);
  --ph-text-4xl: var(--t-3xl); --ph-text-hero: var(--t-hero);
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;
  --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; --sp-40: 10rem; --sp-48: 12rem;
  --ph-max-w: var(--max); --ph-gutter: var(--gutter); --ph-nav-h: var(--nav-h);
  --ph-ease: var(--ease); --ph-ease-out: cubic-bezier(0,0,.2,1); --ph-dur-fast: .25s; --ph-dur: .65s; --ph-dur-slow: 1.1s;
}

/* Inner-page shell (v1 page.php structure) */
.ph-main--page { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(3rem, 7vw, 6rem); }
.ph-page-hero { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.ph-page-hero__title { font-family: var(--f-display); font-size: var(--t-3xl); margin-top: 1rem; max-width: 16ch; line-height: .95; }
.ph-page-hero__title em { color: var(--red); }
.ph-page-hero__lead { margin-top: 1.25rem; max-width: 52ch; color: var(--text-2); font-size: var(--t-lg); line-height: 1.5; }
.ph-page-hero__lead p { margin: 0; }
.ph-label { font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 700; display: inline-flex; align-items: center; gap: .75rem; }
.ph-label::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.ph-page-content > * + * { margin-top: 0; }
.ph-page-content p { line-height: 1.65; }
.ph-page-content em { font-family: var(--f-serif); font-style: italic; }
.ph-btn.ph-btn--primary { border-radius: 2px; font-size: var(--t-sm); letter-spacing: .14em; font-weight: 700; padding: 1rem 1.6rem; }

/* ---- Ported v1 component rules ---- */
.ph-btn {display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.875rem 2.25rem;
  font-family: var(--ph-font-body);      
  font-size: var(--ph-text-xs);
  font-weight: 400;                      
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--ph-dur-fast) var(--ph-ease),
    color      var(--ph-dur-fast) var(--ph-ease),
    border-color var(--ph-dur-fast) var(--ph-ease),
    opacity    var(--ph-dur-fast);}
.ph-btn--primary {background: var(--ph-gold);
  color: #1C1A17;
  border: 1px solid var(--ph-gold);
  border-radius: 10px;      
  font-size: 20px;          
  font-weight: 400;         
  letter-spacing: 0.08em;}
.ph-btn--primary:hover {background: var(--ph-gold-light);
  border-color: var(--ph-gold-light);}
.ph-btn--outline {background: transparent;
  color: var(--ph-text);
  border: 1px solid var(--ph-border);}
.ph-btn--outline:hover {border-color: var(--ph-text);}
.ph-btn--ghost {background: transparent;
  color: var(--ph-gold);
  border: 1px solid var(--ph-border-gold);}
.ph-btn--ghost:hover {border-color: var(--ph-gold);
  background: var(--ph-gold-dim);}
.ph-btn--hero {background: transparent;
  color: rgba(245, 241, 235, 0.88);
  border: 1px solid rgba(245, 241, 235, 0.38);}
.ph-btn--hero:hover {background: rgba(245, 241, 235, 0.08);
  border-color: rgba(245, 241, 235, 0.70);
  color: #F5F1EB;}
.ph-btn--hero-gold {background: var(--ph-gold);
  color: #1C1A17;
  border: 1px solid var(--ph-gold);}
.ph-btn--hero-gold:hover {background: var(--ph-gold-light);
  border-color: var(--ph-gold-light);}
.ph-contact-form-section__form .wpcf7 {margin: 0;}
.ph-contact-form-section__form .ph-form-row {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);}
.ph-contact-form-section__form .ph-form-field {margin: 0 0 var(--sp-8);
  display: flex;
  flex-direction: column;}
.ph-contact-form-section__form .ph-form-row .ph-form-field {margin-bottom: 0;}
.ph-contact-form-section__form .ph-form-field label {font-family: var(--ph-font-body);
  font-size: var(--ph-text-sm);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ph-text-dim);
  margin-bottom: var(--sp-2);
  display: block;}
.ph-contact-form-section__form .ph-input {width: 100%;
  background: var(--ph-surface-2);
  border: 1px solid var(--ph-border);
  padding: var(--sp-3);
  font-family: var(--ph-font-body);
  font-size: var(--ph-text-base);
  color: #1C1A17;
  outline: none;
  border-radius: 2px;
  transition: border-color var(--ph-dur-fast) var(--ph-ease);}
.ph-contact-form-section__form .ph-input:focus {border-color: var(--ph-gold);}
.ph-contact-form-section__form textarea.ph-input {min-height: 110px;
  resize: vertical;}
.ph-contact-form-section__form .ph-submit {display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-2);
  padding: 0.875rem 2.25rem;
  background: var(--ph-gold);
  color: #1C1A17;
  border: 1px solid var(--ph-gold);
  border-radius: 10px;                 
  font-family: var(--ph-font-body);    
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ph-dur-fast) var(--ph-ease), border-color var(--ph-dur-fast);}
.ph-contact-form-section__form .ph-submit:hover {background: var(--ph-gold-light);
  border-color: var(--ph-gold-light);}
.ph-contact-form-section__form .wpcf7-response-output {margin: var(--sp-6) 0 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--ph-text-sm);
  border: 1px solid var(--ph-border);
  border-radius: 2px;}
.ph-contact-form-section__form .wpcf7-not-valid-tip {font-size: var(--ph-text-xs);
  color: var(--ph-red);
  margin-top: var(--sp-2);}
.ph-contact-form-section__form .wpcf7-spinner {margin: var(--sp-3) 0 0;}
.ph-back-to-top {display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(240, 235, 224, 0.30);
  background: transparent;
  color: rgba(240, 235, 224, 0.70);
  cursor: pointer;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
  transition: border-color var(--ph-dur-fast), color var(--ph-dur-fast), background var(--ph-dur-fast);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ph-ease), transform 0.4s var(--ph-ease), border-color 0.2s, color 0.2s;}
.ph-back-to-top.is-visible {opacity: 1;
  transform: translateY(0);}
.ph-back-to-top:hover {border-color: var(--ph-gold);
  color: var(--ph-gold);
  background: rgba(207, 169, 0, 0.08);}
.ph-back-to-top svg {width: 18px;
  height: 18px;}
.ph-process__step {border-top: 1px solid var(--ph-border);
  padding-top: var(--sp-6);
  transition: border-color var(--ph-dur-fast), opacity var(--ph-dur-fast);}
.ph-process__step--toggle {display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--ph-border);
  color: inherit;
  font: inherit;
  padding: var(--sp-6) 0 var(--sp-4);
  cursor: pointer;
  transition:
    border-top-color var(--ph-dur-fast) var(--ph-ease),
    background       var(--ph-dur-fast) var(--ph-ease),
    padding-inline   var(--ph-dur-fast) var(--ph-ease);}
.ph-process__step--toggle:hover, .ph-process__step--toggle.is-open {border-top-color: var(--ph-gold);
  background: rgba(207, 169, 0, 0.04);
  padding-inline: var(--sp-3);}
.ph-process__step--toggle:hover .ph-process__num, .ph-process__step--toggle:hover .ph-process__title, .ph-process__step--toggle.is-open .ph-process__num, .ph-process__step--toggle.is-open .ph-process__title {color: var(--ph-gold);}
.ph-process__step--toggle .ph-process__title {display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);}
.ph-process__step--toggle .ph-process__title::after {content: '+';
  font-family: var(--ph-font-body);
  font-style: normal;
  color: var(--ph-gold);
  flex-shrink: 0;}
.ph-process__step--toggle.is-open .ph-process__title::after {content: '\2013';}
.ph-process__step--toggle.is-open .ph-process__desc {max-height: 20em;
  opacity: 1;}
.ph-testimonials {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);}
.ph-testimonial {border-top: 1px solid var(--ph-border);
  padding-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);}
.ph-testimonial__quote {flex: 1;}
.ph-testimonial__quote::before {content: '\201C';
  font-family: var(--ph-font-serif);
  font-size: 4rem;
  line-height: 0.5;
  color: var(--ph-gold);
  opacity: 0.5;
  display: block;
  margin-bottom: var(--sp-4);}
.ph-testimonial__quote p {font-family: var(--ph-font-serif);
  font-style: italic;
  font-size: var(--ph-text-md);
  color: var(--ph-text-dim);
  line-height: 1.8;
  max-width: 52ch;}
.ph-testimonial__attr {display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-style: normal;
  border-left: 2px solid var(--ph-gold);
  padding-left: var(--sp-4);}
.ph-testimonial__name {font-family: var(--ph-font-display);
  font-size: var(--ph-text-base);
  font-weight: 500;
  color: var(--ph-text);}
.ph-testimonial__loc {font-size: var(--ph-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-text-muted);}
.ph-quotes {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  width: 100%;}
.ph-quote {border-top: 1px solid var(--ph-border);
  padding-top: var(--sp-6);}
.ph-quote__text {font-family: var(--ph-font-serif);
  font-style: italic;
  font-size: var(--ph-text-md);
  color: var(--ph-text-dim);
  line-height: 1.75;
  margin-bottom: var(--sp-4);}
.ph-quote__text::before {content: '\201C'; color: var(--ph-gold);}
.ph-quote__text::after {content: '\201D'; color: var(--ph-gold);}
.ph-quote__attr {font-family: var(--ph-font-display);
  font-size: var(--ph-text-sm);
  color: var(--ph-text-muted);
  letter-spacing: 0.06em;}
@media (max-width: 768px) {
  .ph-testimonials {grid-template-columns: 1fr;}
  .ph-quotes {grid-template-columns: 1fr;}
}
.ph-section--team {text-align: center;}
.ph-about-portraits {margin-bottom: var(--sp-24);}
.ph-about-portraits__grid {display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);}
.ph-about-portrait-card {display: flex;
  flex-direction: column;}
.ph-about-portrait-card__photo {width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ph-surface-2);
  margin-bottom: var(--sp-6);}
.ph-about-portrait-card__photo img {width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.7s var(--ph-ease);}
.ph-about-portrait-card:hover .ph-about-portrait-card__photo img {transform: scale(1.03);}
.ph-about-portrait-card__name {font-family: var(--ph-font-display);
  font-weight: 500;
  font-size: var(--ph-text-xl);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ph-text);
  margin-bottom: var(--sp-2);}
.ph-about-portrait-card__role {font-family: var(--ph-font-serif);
  font-style: italic;
  font-size: var(--ph-text-sm);
  color: var(--ph-gold);
  letter-spacing: 0.06em;}
.ph-about-intro {border-top: 1px solid var(--ph-border);
  border-bottom: 1px solid var(--ph-border);
  padding-block: var(--sp-24);
  margin-bottom: var(--sp-24);}
.ph-about-intro__inner {display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--sp-16);
  align-items: start;}
.ph-about-intro__heading {font-family: var(--ph-font-display);
  font-weight: 500;
  font-size: var(--ph-text-3xl);
  line-height: 1.05;}
.ph-about-intro__body-col p {font-size: var(--ph-text-md);
  color: var(--ph-text-dim);
  line-height: 1.8;
  max-width: 62ch;
  margin-bottom: var(--sp-6);}
.ph-about-intro__body-col p:last-child {margin-bottom: 0;}
.ph-about-bio {display: grid;
  gap: clamp(3rem, 6vw, 8rem);
  align-items: start;
  border-top: 1px solid var(--ph-border);
  padding-block: var(--sp-24);}
.ph-about-bio--left {grid-template-columns: 1fr 1.6fr;}
.ph-about-bio--right {grid-template-columns: 1.6fr 1fr;}
.ph-about-bio__photo {position: relative;
  overflow: hidden;}
.ph-about-bio__photo img {width: 100%;
  height: auto;
  display: block;
  object-fit: cover;}
.ph-about-bio__name {font-family: var(--ph-font-display);
  font-weight: 500;
  font-size: var(--ph-text-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ph-text);
  margin-bottom: var(--sp-8);
  margin-top: var(--sp-4);}
.ph-about-bio__text p {font-size: var(--ph-text-base);
  color: var(--ph-text-dim);
  line-height: 1.85;
  max-width: 58ch;
  margin-bottom: var(--sp-6);}
.ph-about-bio__text p:last-child {margin-bottom: 0;}
.ph-about-bio__quote {border-left: 2px solid var(--ph-gold);
  padding-left: var(--sp-6);
  margin-top: var(--sp-10);
  font-family: var(--ph-font-serif);
  font-style: italic;
  font-size: var(--ph-text-lg);
  color: var(--ph-text);
  line-height: 1.5;
  max-width: 46ch;}
@media (max-width: 900px) {
  .ph-about-portraits__grid {grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);}
  .ph-about-intro__inner {grid-template-columns: 1fr;}
  .ph-about-bio--left, .ph-about-bio--right {grid-template-columns: 1fr;}
  .ph-about-bio--right .ph-about-bio__photo {order: -1;}
}
.ph-page-hero {padding-top: calc(var(--ph-nav-h) - 36px);
  padding-bottom: var(--sp-10);
  padding-inline: var(--ph-gutter);
  max-width: var(--ph-max-w);
  margin-inline: auto;
  border-bottom: 1px solid var(--ph-border);
  margin-bottom: var(--sp-12);}
.ph-page-hero__label {margin-bottom: var(--sp-6);}
.ph-page-hero__title {font-size: var(--ph-text-4xl);
  max-width: 20ch;}
.ph-page-hero__lead {max-width: 50ch;
  font-size: var(--ph-text-lg);
  color: var(--ph-text-dim);
  line-height: 1.7;
  margin-top: var(--sp-8);}
.ph-contact-top {display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-20);
  align-items: start;
  border-top: 1px solid var(--ph-border);
  padding-block: var(--sp-20);
  margin-bottom: var(--sp-20);}
.ph-contact-top__copy p {font-size: var(--ph-text-md);
  color: var(--ph-text-dim);
  line-height: 1.8;
  max-width: 58ch;
  margin-bottom: var(--sp-6);}
.ph-contact-info {background: var(--ph-surface-2);
  padding: var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);}
.ph-contact-info__block {display: flex;
  flex-direction: column;
  gap: var(--sp-2);}
.ph-contact-info__label {font-family: var(--ph-font-body);
  font-size: var(--ph-text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-text-muted);}
.ph-contact-info__value {font-size: var(--ph-text-md);
  color: var(--ph-text-dim);
  line-height: 1.6;
  font-style: normal;}
.ph-contact-info__link {color: var(--ph-gold);
  transition: opacity var(--ph-dur-fast);}
.ph-contact-info__link:hover {opacity: 0.75;}
.ph-contact-form-section {display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-20);
  align-items: start;
  border-top: 1px solid var(--ph-border);
  padding-block: var(--sp-20);
  margin-bottom: var(--sp-20);}
.ph-contact-form-section__heading {font-family: var(--ph-font-display);
  font-weight: 500;
  font-size: var(--ph-text-3xl);
  margin-block: var(--sp-4) var(--sp-6);}
.ph-contact-form-section__sub {font-size: var(--ph-text-md);
  color: var(--ph-text-dim);
  line-height: 1.8;
  max-width: 42ch;}
.ph-contact-closing {border-top: 1px solid var(--ph-border);
  padding-block: var(--sp-20);
  max-width: 64ch;}
.ph-contact-closing p {font-size: var(--ph-text-md);
  color: var(--ph-text-dim);
  line-height: 1.8;}
@media (max-width: 900px) {
  .ph-contact-top, .ph-contact-form-section {grid-template-columns: 1fr;}
  .ph-contact-form-section__form .ginput_complex {grid-template-columns: 1fr;}
}
.ph-page-content {max-width: var(--ph-max-w);
  margin-inline: auto;
  padding-inline: var(--ph-gutter);
  padding-bottom: var(--sp-48);}
.ph-page-content img, .ph-prose img {display: block;
  margin-inline: auto;}
.ph-section {padding-block: var(--sp-20);
  border-bottom: 1px solid var(--ph-border);}
.ph-section:last-child {border-bottom: none;}
.ph-section__heading {font-size: var(--ph-text-2xl);
  max-width: 22ch;
  margin-bottom: var(--sp-12);}
.ph-prose p {font-size: var(--ph-text-base);
  color: var(--ph-text-dim);
  line-height: 1.8;
  max-width: 50ch;
  margin-bottom: var(--sp-6);}
.ph-prose p:last-child {margin-bottom: 0;}
.ph-section--terminus {border-bottom: none;
  padding-top: var(--sp-24);}
@media (max-width: 640px) {
  .ph-quotes {grid-template-columns: 1fr;}
  .ph-page-hero {padding-block: var(--sp-12) var(--sp-10);}
  .ph-page-hero__title {font-size: var(--ph-text-3xl);}
  .ph-about-portraits__grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); max-width: 100%; overflow: hidden;}
  .ph-about-portrait-card {min-width: 0; width: 100%;}
  .ph-about-portrait-card__photo {margin-bottom: var(--sp-2);}
  .ph-about-portrait-card__name {font-size: clamp(0.6rem, 2.5vw, 1rem); margin-bottom: var(--sp-1);}
  .ph-about-portrait-card__role {font-size: clamp(0.5rem, 1.8vw, 0.75rem);}
  .ph-about-portrait-card__cue {font-size: clamp(0.5rem, 1.5vw, 0.7rem);}
  .ph-about-bio--left, .ph-about-bio--right {grid-template-columns: 1fr;}
  .ph-about-bio__photo {max-width: 280px;}
  .ph-contact-top, .ph-contact-form-section {grid-template-columns: 1fr;}
  .ph-testimonials {grid-template-columns: 1fr;}
}
.ph-page-hero--tight {padding-block: var(--sp-16) var(--sp-8);}
.ph-link-arrow--garamond {font-family: var(--ph-font-serif);
  font-weight: 700;
  font-size: var(--ph-text-base);
  letter-spacing: 0.06em;
  color: var(--ph-gold);
  position: relative;
  padding-bottom: 3px;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: color var(--ph-dur-fast) var(--ph-ease);}
.ph-link-arrow--garamond::after {content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--ph-gold), rgba(207, 169, 0, 0.4));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);}
.ph-link-arrow--garamond:hover {color: var(--ph-gold-light);}
.ph-link-arrow--garamond:hover::after {transform: scaleX(1);}
.single-ph_project .ph-page-hero {padding-top: var(--sp-4);
  margin-bottom: var(--sp-6);}
.ph-process-page__header {padding-bottom: var(--sp-6);}
.ph-process-page__title {font-family: var(--ph-font-display);
  font-weight: 500;
  font-size: var(--ph-text-2xl);
  margin-block: var(--sp-4) var(--sp-3);
  line-height: 1;}
.ph-process-page__sub {font-size: var(--ph-text-base);
  color: var(--ph-text-dim);
  max-width: 58ch;
  line-height: 1.7;}
.ph-process-tabs {display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ph-border);
  margin-bottom: 0;
  max-width: var(--ph-max-w);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--ph-gutter);
  box-sizing: border-box;}
.ph-process-tab {font-family: var(--ph-font-serif);
  font-style: italic;
  font-size: 1.875rem;
  letter-spacing: 0.10em;
  color: var(--ph-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  flex: 1;
  text-align: center;
  transition: color var(--ph-dur-fast), border-color var(--ph-dur-fast);}
.ph-process-tab:hover {color: var(--ph-text);}
.ph-process-tab.is-active {color: var(--ph-text);
  border-bottom-color: var(--ph-gold);}
.ph-process-book {position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: calc(100dvh - var(--ph-nav-h) - 140px);
  min-height: 500px;
  max-height: 900px;
  background: #1A1713;
  overflow: hidden;
  display: flex;
  align-items: stretch;}
.ph-process-book__track {position: relative;
  flex: 1;
  overflow: hidden;}
.ph-process-book__slide {position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(4rem, 12vw, 14rem);
  transform: translateX(100%);
  transition: none;
  pointer-events: none;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}
.ph-process-book__slide::before {content: '';
  position: absolute;
  inset: 0;
  background: rgba(12, 9, 5, 0.30);   
  z-index: 0;}
.ph-process-book__slide.is-active {transform: translateX(0);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: all;
  z-index: 2;}
.ph-process-slide--under {transform: translateX(0) !important;
  transition: none !important;
  z-index: 1;
  pointer-events: none;}
.ph-process-slide--cover-from-right {transform: translateX(100%);
  transition: none !important;
  z-index: 2;}
.ph-process-slide--cover-from-left {transform: translateX(-100%);
  transition: none !important;
  z-index: 2;}
.ph-process-book__content {position: relative;   
  z-index: 1;
  max-width: 660px;
  width: 100%;
  
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.6);}
.ph-process-book__num {display: block;
  font-family: var(--ph-font-serif);
  font-style: italic;
  font-size: clamp(8rem, 18vw, 18rem);
  line-height: 0.85;
  color: var(--ph-gold);
  opacity: 0.20;
  letter-spacing: -0.04em;
  margin-bottom: var(--sp-4);
  user-select: none;}
.ph-process-book__title {font-family: var(--ph-font-display);
  font-weight: 500;
  font-size: var(--ph-text-3xl);
  color: #F5F1EB;
  line-height: 1;
  margin-bottom: var(--sp-8);}
.ph-process-book__text {font-family: var(--ph-font-serif);
  font-style: italic;
  font-size: var(--ph-text-md);
  color: rgba(245, 241, 235, 0.88);   
  line-height: 1.85;
  max-width: 54ch;}
.ph-process-book__arrow {position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 241, 235, 0.06);
  border: 1px solid rgba(245, 241, 235, 0.14);
  border-radius: 50%;
  color: rgba(245, 241, 235, 0.65);
  cursor: pointer;
  transition:
    background var(--ph-dur-fast),
    color var(--ph-dur-fast),
    opacity var(--ph-dur-fast);
  flex-shrink: 0;}
.ph-process-book__arrow:hover {background: rgba(245, 241, 235, 0.12);
  color: #F5F1EB;}
.ph-process-book__arrow.is-disabled {opacity: 0.18;
  pointer-events: none;}
.ph-process-book__arrow svg {width: 20px; height: 20px;}
.ph-process-book__arrow--prev {left:  max(var(--ph-gutter), calc((100% - var(--ph-max-w)) / 2 + var(--ph-gutter)));}
.ph-process-book__arrow--next {right: max(var(--ph-gutter), calc((100% - var(--ph-max-w)) / 2 + var(--ph-gutter)));}
@media (max-width: 768px) {
  .ph-process-book {height: calc(100dvh - var(--ph-nav-h) - 210px);
    min-height: 320px;}
  .ph-process-book__slide {padding-inline: 3.5rem;}
  .ph-process-book__title {font-size: var(--ph-text-2xl);}
  .ph-process-book__text {font-size: var(--ph-text-base);}
  .ph-process-book__arrow {width: 40px; height: 40px;}
  .ph-process-tab {padding-inline: var(--sp-3);}
}
a.ph-about-portrait-card {text-decoration: none;
  cursor: pointer;
  transition: opacity var(--ph-dur-fast);}
a.ph-about-portrait-card:hover {opacity: 0.88;}
.ph-about-portrait-card__cue {display: block;
  font-family: var(--ph-font-serif);
  font-style: italic;
  font-size: var(--ph-text-xs);
  color: var(--ph-gold);
  letter-spacing: 0.06em;
  margin-top: var(--sp-2);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--ph-dur-fast) var(--ph-ease),
    transform var(--ph-dur-fast) var(--ph-ease);}
a.ph-about-portrait-card:hover .ph-about-portrait-card__cue {opacity: 1;
  transform: translateY(0);}
.ph-about-values-strip {display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ph-border);   
  margin-top: var(--sp-12);
  border: 1px solid var(--ph-border);}
.ph-about-values-strip__item {display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--sp-4) var(--sp-6);
  background: var(--ph-bg);
  transition: background var(--ph-dur-fast);
  cursor: pointer;
  user-select: none;}
.ph-about-values-strip__item:hover {background: var(--ph-surface-2);}
.ph-about-values-strip__item.is-open {background: var(--ph-surface-2);}
.ph-about-values-strip__header {display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;}
.ph-about-values-strip__num {font-family: var(--ph-font-serif);
  font-style: italic;
  font-size: var(--ph-text-xs);
  color: var(--ph-gold);
  letter-spacing: 0.08em;
  flex-shrink: 0;}
.ph-about-values-strip__title {font-family: var(--ph-font-display);
  font-size: var(--ph-text-sm);
  color: var(--ph-text);
  line-height: 1.2;
  flex: 1;}
.ph-about-values-strip__arrow {font-size: var(--ph-text-xs);
  color: var(--ph-gold);
  transition: transform var(--ph-dur-fast) var(--ph-ease);
  flex-shrink: 0;}
.ph-about-values-strip__item.is-open .ph-about-values-strip__arrow {transform: rotate(180deg);}
.ph-about-values-strip__desc {max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: var(--ph-text-sm);
  color: var(--ph-text-dim);
  line-height: 1.7;
  margin: 0;
  transition: max-height 0.4s var(--ph-ease), opacity 0.35s, margin 0.4s;}
.ph-about-values-strip__item.is-open .ph-about-values-strip__desc {max-height: 200px;
  opacity: 1;
  margin-top: var(--sp-3);}
@media (max-width: 768px) {
  .ph-about-values-strip {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 480px) {
  .ph-about-values-strip {grid-template-columns: 1fr;}
}
.ph-label {display: block;
  font-family: var(--ph-font-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ph-gold);
  line-height: 1;}
.ph-label--gold {color: var(--ph-gold);}
.ph-label--scene {font-family: var(--ph-font-serif);  
  font-weight: 700;                   
  font-style: normal;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  letter-spacing: 0.18em;}
.ph-link-arrow {display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--ph-text-sm);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-gold);
  transition: gap var(--ph-dur-fast) var(--ph-ease), opacity var(--ph-dur-fast);}
.ph-link-arrow::after {content: '→';
  transition: transform var(--ph-dur-fast) var(--ph-ease);}
.ph-link-arrow:hover {opacity: 0.8;}
.ph-link-arrow:hover::after {transform: translateX(4px);}
.ph-divider {width: 100%;
  height: 1px;
  background: var(--ph-border);}
.ph-divider--gold {height: 1px;
  width: 3rem;
  background: var(--ph-gold);}
.ph-main {position: relative;
  min-height: 100svh;}
.ph-main--page {zoom: 0.8;
  padding-top: calc((var(--ph-nav-h) + var(--sp-3)) / 0.8);}

/* ---- Overrides for the 2026 shell ---- */
.ph-main--page { padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 5rem)) !important; }
.ph-btn.ph-btn--primary { border-radius: 2px; font-size: var(--t-sm); letter-spacing: .14em; font-weight: 700; padding: 1rem 1.6rem; }
.ph-page-hero__title em { color: var(--red); }
.ph-process-book__slide, .ph-process-slide--under { transition-timing-function: var(--ease); }