/* ============================================================
   Project Hospitality — Design System CSS
   Sourced from Claude Design handoff (ph-styles.css, 2025).
   Mobile-first. Tailwind-default breakpoints:
   sm: 640  md: 768  lg: 1024  xl: 1280  2xl: 1536
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 80px; scroll-padding-bottom: 80px; }
/* Sectioned anchors clear the ~68px sticky nav on top and the ~60px bottom
   tab bar on mobile so in-page jumps don't land underneath them. */
section[id], [id]:target { scroll-margin-top: 80px; scroll-margin-bottom: 80px; }
html, body { margin: 0; padding: 0; background: #F6F4EE; }
.ph-skip { position: absolute; left: -9999px; top: 0; padding: 10px 14px; background: #111; color: #F6F4EE; font-family: "JetBrains Mono", monospace; font-size: 12px; z-index: 100; }
.ph-skip:focus { left: 10px; top: 10px; }

/* ---------- TOKENS ---------- */
:root {
  --ph-bg:          #F6F4EE;
  --ph-bg-alt:      #ECE8DE;
  --ph-ink:         #111111;
  --ph-text:        #2A2824;
  --ph-muted:       #6B6862;
  --ph-hair:        rgba(17,17,17,0.14);
  --ph-hair-2:      rgba(17,17,17,0.07);
  --ph-signal:      #D97757;
  --ph-signal-warm: #B4532A;
  --ph-invert:      #111111;
  --ph-invert-text: #F6F4EE;

  --ph-f-display:   "Archivo", sans-serif;
  --ph-f-headline:  "Archivo", sans-serif;
  --ph-f-body:      "Inter Tight", system-ui, sans-serif;
  --ph-f-mono:      "JetBrains Mono", ui-monospace, monospace;

  --ph-gutter:      20px;
  --ph-section-y:   72px;
  --ph-max:         1440px;
}
@media (min-width: 768px) {
  :root { --ph-gutter: 32px; --ph-section-y: 96px; }
}
@media (min-width: 1024px) {
  :root { --ph-gutter: 40px; --ph-section-y: 112px; }
}
@media (min-width: 1280px) {
  :root { --ph-gutter: 48px; --ph-section-y: 120px; }
}

/* ---------- BASE ---------- */
/* NOTE: no overflow-x on .ph-root — it breaks `position: sticky` on descendants
   (creates a scroll container, so sticky pins to this element instead of the
   viewport and simply scrolls off). If something overflows horizontally, fix
   the root cause at that element instead. */
html, body { overflow-x: clip; }  /* `clip` prevents horizontal scroll without creating a scroll container */
.ph-root {
  background: var(--ph-bg);
  color: var(--ph-text);
  font-family: var(--ph-f-body);
  width: 100%;
}
.ph-root * { box-sizing: border-box; }
.ph-root img { display: block; max-width: 100%; }
.ph-root a { color: inherit; }

.ph-container {
  max-width: var(--ph-max);
  margin-inline: auto;
  padding-inline: var(--ph-gutter);
}

.ph-section { padding-block: var(--ph-section-y); }

/* ---------- TYPE ---------- */
.ph-display {
  font-family: var(--ph-f-display);
  font-stretch: 75%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
}
.ph-headline {
  font-family: var(--ph-f-headline);
  font-stretch: 85%;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
}
.ph-mono {
  font-family: var(--ph-f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ph-tag {
  font-family: var(--ph-f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Signal-warm (#B4532A) hits 4.7:1 on the cream canvas — passes WCAG AA
     for small text. The brighter --ph-signal (#D97757) at 3.0:1 is reserved
     for large-scale brand accents (hero headline, CTAs, bullets). */
  color: var(--ph-signal-warm);
}
.ph-kpi {
  font-family: var(--ph-f-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-stretch: 75%;
}

.ph-h-hero   { font-size: clamp(52px, 11vw, 148px); }
.ph-h-xl     { font-size: clamp(40px, 7vw, 80px);  }
.ph-h-lg     { font-size: clamp(36px, 6vw, 64px);  }
.ph-h-md     { font-size: clamp(32px, 5vw, 56px);  }
.ph-h-sm     { font-size: clamp(28px, 4.5vw, 52px);}

/* ---------- BUTTONS ---------- */
.ph-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  border: 1px solid transparent;
  min-height: 48px;
  text-decoration: none;
  white-space: nowrap;
}
.ph-btn-signal { background: var(--ph-signal); color: #fff; }
.ph-btn-signal:hover,
.ph-btn-signal:focus-visible { background: var(--ph-signal-warm); color: #fff; }
.ph-btn-ghost  { border-color: var(--ph-hair); color: var(--ph-ink); background: transparent; }
.ph-btn-ghost:hover,
.ph-btn-ghost:focus-visible { border-color: var(--ph-ink); background: var(--ph-ink); color: var(--ph-bg); }
.ph-btn-sm { padding: 10px 16px; font-size: 12px; min-height: 40px; }

/* Focus ring */
.ph-root a:focus-visible,
.ph-root button:focus-visible,
.ph-root input:focus-visible,
.ph-root select:focus-visible,
.ph-root textarea:focus-visible,
.ph-root [role="button"]:focus-visible,
.ph-root [tabindex]:focus-visible {
  outline: 2px solid var(--ph-signal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- HAIRLINES & CARDS ---------- */
.ph-hair-top    { border-top: 1px solid var(--ph-hair); }
.ph-hair-bottom { border-bottom: 1px solid var(--ph-hair); }
.ph-card        { background: var(--ph-bg-alt); border: 1px solid var(--ph-hair); }

/* ============================================================
   NAV
   ============================================================ */
.ph-nav-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,244,238,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ph-hair);
}
.ph-nav-inner {
  display: grid;
  grid-template-columns: auto auto;
  gap: 16px;
  align-items: center;
  padding-block: 14px;
  padding-inline: var(--ph-gutter);
  max-width: var(--ph-max);
  margin-inline: auto;
  justify-content: space-between;
}
.ph-nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ph-nav-brand-logo { width: 32px; height: 32px; object-fit: contain; }
.ph-nav-brand-name {
  font-family: var(--ph-f-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ph-ink);
}
.ph-nav-brand-sub {
  font-family: var(--ph-f-mono);
  color: var(--ph-muted);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}
.ph-nav-links { display: none; }
.ph-nav-link {
  color: var(--ph-ink);
  text-decoration: none;
  font-size: 13px;
  padding: 6px 0;
  font-weight: 500;
  transition: color .2s;
}
.ph-nav-link:hover { color: var(--ph-signal); }
.ph-nav-loc { display: none; color: var(--ph-muted); white-space: nowrap; }
.ph-nav-cta-desktop { display: none; }
.ph-nav-cta-mobile {
  display: inline-flex;
  font-size: 11px;
  padding: 8px 14px;
  min-height: 36px;
}

@media (min-width: 1024px) {
  .ph-nav-inner {
    grid-template-columns: auto 1fr auto auto;
    gap: 32px;
  }
  .ph-nav-links {
    display: flex;
    gap: 20px;
    justify-self: center;
    white-space: nowrap;
  }
  .ph-nav-cta-desktop { display: inline-flex; }
  .ph-nav-cta-mobile  { display: none; }
}
@media (min-width: 1280px) {
  .ph-nav-inner { gap: 40px; }
  .ph-nav-links { gap: 24px; }
  .ph-nav-loc { display: block; }
}

.ph-nav-bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: rgba(246,244,238,0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--ph-hair);
  padding-bottom: env(safe-area-inset-bottom);
}
.ph-nav-bottom-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 640px;
  margin-inline: auto;
}
.ph-nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  min-height: 60px;
  color: var(--ph-muted);
  text-decoration: none;
  font-family: var(--ph-f-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color .2s;
}
.ph-nav-tab:hover,
.ph-nav-tab:focus-visible { color: var(--ph-ink); }
.ph-nav-tab svg { width: 20px; height: 20px; }
@media (min-width: 1024px) {
  .ph-nav-bottom { display: none; }
}

.ph-root { padding-bottom: 60px; }
@media (min-width: 1024px) {
  .ph-root { padding-bottom: 0; }
}

/* ============================================================
   HERO
   ============================================================ */
.ph-hero { padding-block: clamp(56px, 8vw, 100px) clamp(48px, 6vw, 80px); }
.ph-hero-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.ph-hero-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--ph-muted);
}
.ph-hero-meta-right { text-align: left; }
@media (min-width: 768px) {
  .ph-hero-top {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .ph-hero-meta { flex-direction: column; gap: 6px; }
  .ph-hero-meta-right { text-align: right; }
}

.ph-hero-title { color: var(--ph-ink); }
.ph-hero-title .accent { color: var(--ph-signal); }

.ph-hero-brief {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--ph-hair);
}
.ph-hero-brief-item {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ph-ink);
}
.ph-hero-brief-label {
  font-family: var(--ph-f-mono);
  color: var(--ph-signal-warm);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ph-hero-brief-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .ph-hero-brief {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 48px;
    padding-top: 40px;
  }
}
@media (min-width: 1024px) {
  .ph-hero-brief {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 56px;
  }
  .ph-hero-brief-cta {
    align-self: end;
    align-items: flex-end;
  }
}

/* ============================================================
   METER BAR
   ============================================================ */
.ph-meterbar {
  background: var(--ph-bg-alt);
  border-top: 1px solid var(--ph-hair);
  border-bottom: 1px solid var(--ph-hair);
  padding-block: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ph-meterbar::-webkit-scrollbar { display: none; }
.ph-meterbar-inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 1px;
  background: var(--ph-hair);
  padding-inline: var(--ph-gutter);
  max-width: var(--ph-max);
  margin-inline: auto;
}
@media (min-width: 640px) {
  .ph-meterbar-inner {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}
@media (min-width: 1024px) {
  .ph-meterbar-inner {
    grid-template-columns: repeat(6, 1fr);
  }
}
.ph-meterbar-cell {
  background: var(--ph-bg-alt);
  padding: 10px 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 48px;
}
.ph-meterbar-n {
  font-size: 22px;
  color: var(--ph-ink);
}
.ph-meterbar-l { color: var(--ph-muted); font-size: 11px; }

/* ============================================================
   TWO-COL SECTION
   ============================================================ */
.ph-twocol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.ph-twocol-label { color: var(--ph-muted); }
@media (min-width: 1024px) {
  .ph-twocol {
    grid-template-columns: 280px 1fr;
    gap: 56px;
  }
}

/* ============================================================
   ABOUT
   ============================================================ */
.ph-about-meta {
  font-family: var(--ph-f-mono);
  color: var(--ph-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.9;
}
.ph-about-body { max-width: 800px; }
.ph-about-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ph-text);
  margin-top: 24px;
}
@media (min-width: 768px) {
  .ph-about-lead { font-size: 18px; margin-top: 32px; }
}
.ph-about-body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ph-text);
  margin-top: 18px;
}

/* ============================================================
   GRID-OF-BOXES (differentiators, approach)
   ============================================================ */
.ph-gridbox {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ph-hair);
}
.ph-gridbox-cell {
  padding: 28px 0;
  border-bottom: 1px solid var(--ph-hair);
}
.ph-gridbox-cell:last-child { border-bottom: 1px solid var(--ph-hair); }
.ph-gridbox-n {
  font-size: 40px;
  color: var(--ph-signal);
  margin-bottom: 14px;
}
.ph-gridbox-h {
  font-size: 17px;
  font-weight: 700;
  color: var(--ph-ink);
  margin-bottom: 10px;
  font-family: var(--ph-f-display);
}
.ph-gridbox-b {
  font-size: 14px;
  color: var(--ph-muted);
  line-height: 1.55;
}
@media (min-width: 640px) {
  .ph-gridbox {
    grid-template-columns: 1fr 1fr;
  }
  .ph-gridbox-cell {
    padding: 32px 24px;
  }
  .ph-gridbox-cell:nth-child(2n+1) { padding-left: 0; border-right: 1px solid var(--ph-hair); }
  .ph-gridbox-cell:nth-child(2n)   { padding-right: 0; }
  .ph-gridbox-cell:nth-last-child(-n+2):not(:nth-last-child(1):nth-child(odd)) { border-bottom: none; }
}
@media (min-width: 1024px) {
  .ph-gridbox { grid-template-columns: repeat(3, 1fr); }
  .ph-gridbox-cell {
    padding: 40px 32px !important;
    border-right: 1px solid var(--ph-hair);
    border-bottom: 1px solid var(--ph-hair);
  }
  .ph-gridbox-cell:nth-child(3n)   { border-right: none; padding-right: 0 !important; }
  .ph-gridbox-cell:nth-child(3n+1) { padding-left: 0 !important; }
  .ph-gridbox-cell:nth-last-child(-n+3) { border-bottom: none; }
  .ph-gridbox-n { font-size: 48px; }
  .ph-gridbox-h { font-size: 18px; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.ph-services-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .ph-services-wrap { grid-template-columns: 440px 1fr; gap: 48px; align-items: start; }
  /* List stays visible as the user scrolls through the anchor zones */
  .ph-service-list {
    position: sticky;
    top: 100px;
    align-self: start;
    z-index: 2;
  }
}

/* Scroll-tied service activation: 6 invisible anchor zones stacked after the
   sticky detail panel extend the section's scroll height. An IntersectionObserver
   in ph-reveal.js watches these and dispatches a 'svc-change' event that Alpine
   binds to `open`. Hidden on mobile — the click handler remains authoritative there. */
.ph-service-anchor { display: none; }
@media (min-width: 1024px) {
  .ph-service-anchor {
    display: block;
    height: 60vh;
    pointer-events: none;
  }
}
.ph-service-list { border-top: 1px solid var(--ph-hair); }
.ph-service-row {
  padding: 20px 12px 20px 12px;
  border-bottom: 1px solid var(--ph-hair);
  cursor: pointer;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  color: var(--ph-text);
  border-left: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
  min-height: 56px;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  border-top: none;
  border-right: none;
}
.ph-service-row:hover { background: rgba(17,17,17,0.02); }
.ph-service-row.is-active {
  color: var(--ph-ink);
  background: rgba(17,17,17,0.04);
  border-left-color: var(--ph-signal);
}
.ph-service-row-n {
  font-family: var(--ph-f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.ph-service-row.is-active .ph-service-row-n { color: var(--ph-signal-warm); }
.ph-service-row-title {
  font-size: 15px;
  font-weight: 500;
  font-family: var(--ph-f-display);
  line-height: 1.25;
}
@media (min-width: 768px) {
  .ph-service-row-title { font-size: 16px; }
}
.ph-service-row-dot {
  width: 6px; height: 6px; border-radius: 3px;
  background: transparent;
  border: 1px solid var(--ph-muted);
}
.ph-service-row.is-active .ph-service-row-dot {
  background: var(--ph-signal); border-color: var(--ph-signal);
}

.ph-service-detail { max-width: 720px; }
@media (min-width: 1024px) {
  .ph-service-detail {
    position: sticky;
    top: 100px;
  }
}
.ph-service-detail-n {
  font-size: clamp(56px, 8vw, 84px);
  color: var(--ph-signal);
  line-height: 1;
  margin-bottom: 16px;
}
.ph-service-detail-title {
  font-size: clamp(30px, 4.5vw, 44px);
  margin: 0 0 20px;
  color: var(--ph-ink);
}
.ph-service-detail-intro {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ph-text);
  margin: 0 0 24px;
}
@media (min-width: 768px) {
  .ph-service-detail-intro { font-size: 17px; margin-bottom: 32px; }
}
.ph-service-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 640px) {
  .ph-service-items { grid-template-columns: 1fr 1fr; gap: 10px; }
}
.ph-service-item {
  padding: 12px 14px;
  background: var(--ph-bg-alt);
  border: 1px solid var(--ph-hair);
  font-size: 12.5px;
  color: var(--ph-text);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
}
.ph-service-item .bullet {
  width: 5px; height: 5px;
  background: var(--ph-signal);
  display: inline-block;
  margin-top: 6px;
  flex-shrink: 0;
}
.ph-service-outcome {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--ph-bg-alt);
  border-left: 3px solid var(--ph-signal);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .ph-service-outcome {
    grid-template-columns: 110px 1fr;
    gap: 16px;
  }
}
.ph-service-outcome-label {
  font-family: var(--ph-f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-signal-warm);
  padding-top: 3px;
}
.ph-service-outcome-text {
  font-size: 14.5px;
  color: var(--ph-ink);
  font-weight: 500;
  line-height: 1.5;
}

/* ============================================================
   WORK — case studies
   ============================================================ */
.ph-work-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .ph-work-head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}
.ph-work-list { display: grid; gap: 40px; }
.ph-case {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .ph-case {
    grid-template-columns: 1.15fr 1fr;
    gap: 36px;
    min-height: 440px;
  }
  .ph-case.is-reverse { grid-template-columns: 1fr 1.15fr; }
  .ph-case.is-reverse .ph-case-image { order: 2; }
  .ph-case.is-reverse .ph-case-body  { order: 1; }
}
.ph-case-image {
  background-size: cover;
  background-position: center;
  border: 1px solid var(--ph-hair);
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}
@media (min-width: 1024px) {
  .ph-case-image { aspect-ratio: auto; }
}
.ph-case-image-top,
.ph-case-image-bot {
  position: absolute;
  left: 16px; right: 16px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(246,244,238,0.92);
  backdrop-filter: blur(4px);
  font-family: var(--ph-f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ph-case-image-top { top: 16px; }
.ph-case-image-bot { bottom: 16px; }
.ph-case-image-top .muted,
.ph-case-image-bot .muted { color: var(--ph-muted); }
.ph-case-image-top .signal { color: var(--ph-signal); }
.ph-case-image-bot .ink    { color: var(--ph-ink); }

.ph-case-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
}
.ph-case-loc {
  font-family: var(--ph-f-mono);
  /* Small monospace — use the WCAG-AA passing variant. */
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-signal-warm);
  margin-bottom: 14px;
}
.ph-case-title {
  font-size: clamp(28px, 5vw, 44px);
  font-stretch: 80%;
  color: var(--ph-ink);
  margin: 0 0 18px;
}
.ph-case-blurb {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ph-text);
  margin: 0 0 20px;
  max-width: 540px;
}
.ph-case-points { list-style: none; padding: 0; margin: 0 0 24px; max-width: 540px; }
.ph-case-points li {
  font-size: 13.5px;
  color: var(--ph-text);
  padding: 6px 0 6px 18px;
  position: relative;
}
.ph-case-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 8px; height: 1px;
  background: var(--ph-signal);
}
.ph-case-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ph-hair);
  border-bottom: 1px solid var(--ph-hair);
  max-width: 540px;
}
.ph-case-stat {
  padding: 18px 14px 18px 0;
  border-right: 1px solid var(--ph-hair);
}
.ph-case-stat:nth-child(n+2) { padding-left: 14px; }
.ph-case-stat:last-child     { border-right: none; }
.ph-case-stat-n {
  font-size: clamp(22px, 3vw, 26px);
  color: var(--ph-ink);
}
.ph-case-stat-l {
  font-family: var(--ph-f-mono);
  color: var(--ph-muted);
  margin-top: 8px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================
   METRICS DASHBOARD
   ============================================================ */
.ph-metrics-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .ph-metrics-head { grid-template-columns: 1fr auto; align-items: end; }
}
.ph-metrics-sub {
  color: var(--ph-muted);
  font-size: 12px;
  line-height: 1.5;
  max-width: 320px;
  text-transform: none;
  letter-spacing: 0;
}
.ph-metrics-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  scroll-snap-type: x mandatory;
}
.ph-metrics-tabs::-webkit-scrollbar { display: none; }
.ph-metrics-tab {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 10.5px;
  font-family: var(--ph-f-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  color: var(--ph-muted);
  border: 1px solid var(--ph-hair);
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
  scroll-snap-align: start;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.ph-metrics-tab:hover { color: var(--ph-ink); border-color: var(--ph-ink); }
.ph-metrics-tab.is-active {
  background: var(--ph-ink);
  color: var(--ph-bg);
  border-color: var(--ph-ink);
}
@media (min-width: 768px) {
  .ph-metrics-tabs { flex-wrap: wrap; gap: 8px; }
  .ph-metrics-tab { padding: 10px 18px; font-size: 11px; }
}

/* On desktop, the tabs + active grid pin to the top so the user sees the
   numbers update as they scroll through the anchor zones below. */
.ph-metrics-sticky { position: static; }
@media (min-width: 1024px) {
  .ph-metrics-sticky {
    position: sticky;
    top: 100px;
    z-index: 2;
    background: var(--ph-bg);
    padding-bottom: 8px;
  }
}

/* Scroll-tied anchor zones for metrics — desktop only, same pattern as services. */
.ph-metric-anchor { display: none; }
@media (min-width: 1024px) {
  .ph-metric-anchor {
    display: block;
    height: 60vh;
    pointer-events: none;
  }
}

.ph-metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ph-hair);
  border: 1px solid var(--ph-hair);
}
@media (min-width: 640px) { .ph-metrics-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ph-metrics-grid { grid-template-columns: repeat(3, 1fr); } }
.ph-metric-cell {
  background: var(--ph-bg);
  padding: 28px 24px;
}
@media (min-width: 1024px) { .ph-metric-cell { padding: 36px; } }
.ph-metric-cell-n {
  font-family: var(--ph-f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-signal-warm);
  margin-bottom: 20px;
}
.ph-metric-cell-v {
  font-size: clamp(44px, 6vw, 68px);
  color: var(--ph-ink);
  line-height: 0.95;
  letter-spacing: 0.01em;
  word-spacing: 0.05em;
}
.ph-metric-cell-l {
  font-size: 13px;
  color: var(--ph-muted);
  margin-top: 16px;
  line-height: 1.45;
}

/* ============================================================
   FOOD TRUCK LAB
   ============================================================ */
.ph-ftl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 1024px) {
  .ph-ftl { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.ph-ftl-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--ph-hair);
  margin-bottom: 24px;
  font-family: var(--ph-f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-ink);
}
.ph-ftl-badge-dot {
  width: 8px; height: 8px;
  background: var(--ph-signal);
  border-radius: 50%;
}
.ph-ftl-title {
  font-size: clamp(44px, 7vw, 64px);
  color: var(--ph-ink);
  margin: 0;
}
.ph-ftl-tagline {
  color: var(--ph-signal-warm);
  font-family: var(--ph-f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 14px;
  margin-bottom: 24px;
}
.ph-ftl-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ph-text);
  max-width: 520px;
}
@media (min-width: 768px) { .ph-ftl-desc { font-size: 17px; } }
.ph-ftl-pillars { border-top: 1px solid var(--ph-hair); }
.ph-ftl-pillar {
  padding: 22px 0;
  border-bottom: 1px solid var(--ph-hair);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
}
.ph-ftl-pillar-n {
  font-family: var(--ph-f-mono);
  color: var(--ph-signal-warm);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ph-ftl-pillar-h {
  font-size: 16px;
  font-weight: 700;
  color: var(--ph-ink);
  margin-bottom: 8px;
  font-family: var(--ph-f-display);
}
.ph-ftl-pillar-b {
  font-size: 14px;
  color: var(--ph-muted);
  line-height: 1.55;
}

/* ============================================================
   PRODUCTS — home §07 band, /products/ listing, deep page
   Added in v2.0.0
   ============================================================ */

/* --- Home §07 PRODUCTS band (slim, replaces FTL hero callout) --- */
.ph-products-band {
  display: grid;
  gap: 24px;
}
@media (min-width: 1024px) {
  .ph-products-band { grid-template-columns: 280px 1fr; gap: 64px; align-items: start; }
}
.ph-products-band-tiles {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ph-hair);
}
@media (min-width: 768px)  { .ph-products-band-tiles { grid-template-columns: repeat(3, 1fr); } }
.ph-products-band-tile {
  padding: 24px 0;
  border-bottom: 1px solid var(--ph-hair);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Pin the tile's primary CTA to the bottom of its tile so all 3 tile buttons
   align on the same baseline regardless of variable copy length. The grid
   parent (.ph-products-band-tiles repeat(3, 1fr)) stretches each tile to the
   tallest sibling's height, and `margin-top: auto` on the last child absorbs
   the free space. */
.ph-products-band-tile > .ph-btn {
  margin-top: auto;
  align-self: flex-start;
}
@media (min-width: 768px) {
  .ph-products-band-tile { padding: 28px 24px; border-right: 1px solid var(--ph-hair); }
  .ph-products-band-tile:last-child { border-right: none; }
}
.ph-products-band-tile-n {
  font-family: var(--ph-f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ph-signal-warm);
}
.ph-products-band-tile-h {
  font-family: var(--ph-f-display);
  font-size: 22px;
  font-weight: 700;
  font-stretch: 85%;
  color: var(--ph-ink);
  line-height: 1.1;
}
.ph-products-band-tile-h a {
  color: inherit;
  text-decoration: none;
}
.ph-products-band-tile-h a:hover { color: var(--ph-signal-warm); }
.ph-products-band-tile-b {
  font-family: var(--ph-f-body);
  font-size: 14px;
  color: var(--ph-muted);
  line-height: 1.55;
  max-width: 32ch;
}
/* .ph-products-band-tile-link removed in v2.0.3 — tile CTAs now use the
   shared .ph-btn .ph-btn-ghost .ph-btn-sm classes for visual consistency
   with the "Explore products →" CTA in the same band. */

/* --- TOP NAV: Products dropdown --- */
.ph-nav-dropdown {
  position: relative;
  display: inline-block;
}
.ph-nav-dropdown-toggle {
  /* Match .ph-nav-link typography exactly so the dropdown trigger sits flush
     with the regular nav links. (Earlier `font: inherit` + `padding: 0` were
     overriding .ph-nav-link's 13px/500/6px-0 because .ph-nav-dropdown-toggle
     comes later in the cascade.) */
  font-family: var(--ph-f-body);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: var(--ph-ink);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ph-nav-dropdown-caret {
  font-family: var(--ph-f-display);
  font-size: 9px;
  line-height: 1;
  transition: transform 160ms ease;
  transform-origin: center;
}
/* Caret flips when the menu is open (hover or keyboard focus inside the dropdown) */
.ph-nav-dropdown:hover .ph-nav-dropdown-caret,
.ph-nav-dropdown:focus-within .ph-nav-dropdown-caret { transform: rotate(180deg); }

.ph-nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 16px;
  min-width: 280px;
  background: var(--ph-bg);
  border: 1px solid var(--ph-hair);
  box-shadow: 0 12px 32px -16px rgba(17,17,17,0.18);
  z-index: 60;
  display: none;       /* hidden by default — open on hover / focus-within */
  opacity: 0;
  transition: opacity 120ms ease;
}
/* Hover bridge — transparent strip above the menu so the cursor can travel
   from the trigger to the menu through the 16px visual gap without losing
   :hover on the parent .ph-nav-dropdown. */
.ph-nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.ph-nav-dropdown:hover .ph-nav-dropdown-menu,
.ph-nav-dropdown:focus-within .ph-nav-dropdown-menu {
  display: grid;
  opacity: 1;
}
.ph-nav-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-family: var(--ph-f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ph-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ph-hair);
  min-height: 44px;
}
.ph-nav-dropdown-item:last-child { border-bottom: 0; }
.ph-nav-dropdown-item:hover,
.ph-nav-dropdown-item:focus-visible {
  background: var(--ph-bg-alt);
  color: var(--ph-signal-warm);
  outline: none;
}
.ph-nav-dropdown-item-ext {
  font-family: var(--ph-f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ph-muted);
}
.ph-nav-dropdown-foot {
  background: var(--ph-bg-alt);
  font-family: var(--ph-f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ph-ink);
}
.ph-nav-dropdown-foot:hover,
.ph-nav-dropdown-foot:focus-visible { color: var(--ph-signal-warm); }

/* Mobile: drop dropdown chrome to a flat link in the top nav (≤1023.98px the
   ph-nav-links block already collapses the inline nav to the burger zone) */
@media (max-width: 1023.98px) {
  .ph-nav-dropdown-menu {
    position: fixed;
    top: var(--ph-mob-nav-h, 65px);
    left: 0;
    right: 0;
    box-shadow: none;
    border-top: 1px solid var(--ph-hair);
  }
}

/* --- SUBPAGE CHROME: slim breadcrumb top-bar (sits below ph-nav-top) --- */
.ph-breadcrumb-bar {
  position: sticky;
  top: 0;
  z-index: 49;
  background: rgba(246,244,238,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ph-hair);
}
@media (min-width: 1024px) {
  .ph-breadcrumb-bar { top: 65px; }
}
@media (max-width: 1023.98px) {
  .ph-breadcrumb-bar { top: var(--ph-mob-nav-h, 65px); }
}
.ph-breadcrumb-inner {
  max-width: var(--ph-max);
  margin-inline: auto;
  padding: 0 var(--ph-gutter);
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ph-f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 1023.98px) {
  .ph-breadcrumb-inner { height: 44px; font-size: 11px; gap: 8px; }
}
.ph-breadcrumb-home {
  color: var(--ph-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-block: 8px;
}
.ph-breadcrumb-home:hover { color: var(--ph-signal-warm); }
.ph-breadcrumb-home:focus-visible {
  outline: 2px solid var(--ph-signal);
  outline-offset: 2px;
  border-radius: 2px;
}
.ph-breadcrumb-arrow {
  font-family: var(--ph-f-display);
  font-size: 14px;
  line-height: 1;
}
.ph-breadcrumb-sep {
  color: var(--ph-muted);
  font-weight: 400;
}
.ph-breadcrumb-current {
  color: var(--ph-ink);
  font-weight: 600;
}
.ph-breadcrumb-parent {
  color: var(--ph-muted);
  text-decoration: none;
}
.ph-breadcrumb-parent:hover { color: var(--ph-signal-warm); }

/* --- /products/ LISTING: family blocks + product cards --- */
.ph-product-family {
  /* No vertical margin: each family is wrapped in a .ph-section that already
     supplies padding-block: var(--ph-section-y). */
}
/* When two families share one section, separate them with a hairline + 80px
   breathing room. Section-to-section padding (240px @1280) was excessive
   for adjacent product families. */
.ph-product-family + .ph-product-family {
  margin-top: 80px;
  padding-top: 80px;
  border-top: 1px solid var(--ph-hair);
}
.ph-product-family-head {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--ph-hair);
  padding-bottom: 24px;
  margin-bottom: 32px;
}
@media (min-width: 1024px) {
  .ph-product-family-head { grid-template-columns: 280px 1fr; gap: 64px; align-items: end; }
}
.ph-product-family-tag {
  font-family: var(--ph-f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-signal-warm);
}
.ph-product-family-h {
  font-family: var(--ph-f-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1;
  color: var(--ph-ink);
}

.ph-product-grid {
  display: grid;
  gap: 24px;
}
@media (min-width: 768px) { .ph-product-grid { grid-template-columns: repeat(2, 1fr); } }

.ph-product-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  border: 1px solid var(--ph-hair);
  background: var(--ph-bg);
  padding: 24px;
}
.ph-product-card-image {
  background-color: var(--ph-bg-alt);
  background-size: cover;
  background-position: center;
  aspect-ratio: 16/10;
  border: 1px solid var(--ph-hair);
}
.ph-product-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ph-f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.ph-product-card-meta .signal { color: var(--ph-signal-warm); font-weight: 500; }
.ph-product-card-h {
  font-family: var(--ph-f-display);
  font-size: 28px;
  font-weight: 700;
  font-stretch: 85%;
  line-height: 1;
  color: var(--ph-ink);
}
.ph-product-card-tagline {
  font-family: var(--ph-f-body);
  font-size: 16px;
  color: var(--ph-text);
  line-height: 1.45;
}
.ph-product-card-meter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ph-hair);
  border: 1px solid var(--ph-hair);
}
.ph-product-card-meter-cell {
  background: var(--ph-bg);
  padding: 12px;
  display: grid;
  gap: 4px;
}
.ph-product-card-meter-n {
  font-family: var(--ph-f-display);
  font-size: 18px;
  font-weight: 700;
  font-stretch: 85%;
  color: var(--ph-ink);
}
.ph-product-card-meter-l {
  font-family: var(--ph-f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ph-muted);
  line-height: 1.3;
}
.ph-product-card-cta {
  font-family: var(--ph-f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ph-hair);
  padding: 14px 20px;
  min-height: 44px;
  justify-self: start;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.ph-product-card-cta:hover,
.ph-product-card-cta:focus-visible {
  background: var(--ph-ink);
  color: var(--ph-bg);
  border-color: var(--ph-ink);
  outline: none;
}
.ph-product-card-cta-ext { color: var(--ph-signal-warm); }

/* --- DEEP PAGE: /products/grape-to-glass/ specific blocks --- */
.ph-pp-hero {
  padding-block: 72px 56px;
}
.ph-pp-hero-grid {
  display: grid;
  gap: 32px;
  align-items: end;
}
@media (min-width: 1024px) {
  .ph-pp-hero-grid { grid-template-columns: 1fr 1.1fr; gap: 64px; }
}
.ph-pp-hero-tag {
  font-family: var(--ph-f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-signal-warm);
  margin-bottom: 16px;
}
.ph-pp-hero-h {
  font-family: var(--ph-f-display);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.95;
  color: var(--ph-ink);
  margin: 0 0 24px;
}
.ph-pp-hero-h .accent { color: var(--ph-signal); }
.ph-pp-hero-pitch {
  font-family: var(--ph-f-body);
  font-size: 18px;
  color: var(--ph-text);
  max-width: 50ch;
  line-height: 1.45;
}
.ph-pp-hero-image {
  background-color: var(--ph-bg-alt);
  background-size: cover;
  background-position: center;
  aspect-ratio: 4/3;
  border: 1px solid var(--ph-hair);
}

/* Five-step "experience" grid (Scan → Survey → Match → Queue → Pour) */
.ph-pp-steps {
  display: grid;
  gap: 1px;
  background: var(--ph-hair);
  border: 1px solid var(--ph-hair);
}
@media (min-width: 768px)  { .ph-pp-steps { grid-template-columns: repeat(5, 1fr); } }
.ph-pp-step {
  background: var(--ph-bg);
  padding: 24px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.ph-pp-step-n {
  font-family: var(--ph-f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-signal-warm);
}
.ph-pp-step-h {
  font-family: var(--ph-f-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ph-ink);
}
.ph-pp-step-b {
  font-family: var(--ph-f-body);
  font-size: 13px;
  color: var(--ph-muted);
  line-height: 1.5;
}

/* "The machine" — image + spec callouts */
.ph-pp-machine {
  display: grid;
  gap: 32px;
}
@media (min-width: 1024px) {
  .ph-pp-machine { grid-template-columns: 1.1fr 1fr; gap: 64px; }
}
.ph-pp-machine-image {
  background-color: var(--ph-bg-alt);
  background-size: cover;
  background-position: center;
  aspect-ratio: 4/3;
  border: 1px solid var(--ph-hair);
}
.ph-pp-machine-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ph-hair);
  border: 1px solid var(--ph-hair);
  align-self: start;
}
@media (min-width: 540px) { .ph-pp-machine-specs { grid-template-columns: repeat(2, 1fr); } }
.ph-pp-machine-spec {
  background: var(--ph-bg);
  padding: 16px 20px;
  display: grid;
  gap: 4px;
}
.ph-pp-machine-spec-k {
  font-family: var(--ph-f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-muted);
}
.ph-pp-machine-spec-v {
  font-family: var(--ph-f-body);
  font-size: 14px;
  color: var(--ph-ink);
  font-weight: 500;
}

/* "What the client gets" — 5 deliverable rows */
.ph-pp-deliverables {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ph-hair);
}
.ph-pp-deliverable {
  display: grid;
  gap: 4px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ph-hair);
}
@media (min-width: 768px) {
  .ph-pp-deliverable {
    grid-template-columns: 60px 1fr;
    gap: 32px;
    align-items: baseline;
    padding: 28px 0;
  }
}
.ph-pp-deliverable-n {
  font-family: var(--ph-f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-signal-warm);
}
.ph-pp-deliverable-h {
  font-family: var(--ph-f-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ph-ink);
  margin-bottom: 4px;
}
.ph-pp-deliverable-b {
  font-family: var(--ph-f-body);
  font-size: 14px;
  color: var(--ph-text);
  line-height: 1.55;
}

/* External-link glyph used inline next to product names that point off-domain */
.ph-ext-glyph {
  font-family: var(--ph-f-display);
  color: var(--ph-signal-warm);
  font-size: 0.7em;
  margin-left: 2px;
  position: relative;
  top: -2px;
}

/* ============================================================
   CLIENTS
   ============================================================ */
.ph-clients-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ph-hair);
  border: 1px solid var(--ph-hair);
}
@media (min-width: 480px) { .ph-clients-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .ph-clients-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .ph-clients-grid { grid-template-columns: repeat(5, 1fr); } }
.ph-client-cell {
  background: var(--ph-bg);
  padding: 24px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.ph-client-cell img {
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  filter: grayscale(100%) contrast(0.85);
  opacity: 0.75;
  transition: filter .3s, opacity .3s;
}
.ph-client-cell:hover img,
.ph-client-cell:focus-within img {
  filter: none;
  opacity: 1;
}

/* ============================================================
   CONTACT
   ============================================================ */
.ph-contact {
  background: var(--ph-invert);
  color: var(--ph-invert-text);
}
.ph-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1024px) {
  .ph-contact-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.ph-contact-title {
  font-size: clamp(44px, 8vw, 80px);
  color: var(--ph-invert-text);
  font-stretch: 75%;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  font-family: var(--ph-f-display);
  letter-spacing: -0.02em;
  line-height: 0.92;
}
.ph-contact-title .accent { color: var(--ph-signal); }
.ph-contact-lead {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(246,244,238,0.75);
  margin-top: 24px;
  max-width: 460px;
}
.ph-contact-meta {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(246,244,238,0.15);
  display: grid;
  gap: 12px;
}
.ph-contact-meta-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: 15px;
}
.ph-contact-meta-row .k {
  font-family: var(--ph-f-mono);
  color: var(--ph-signal);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ph-contact-meta-row a {
  color: var(--ph-invert-text);
  text-decoration: none;
}
.ph-contact-meta-row a:hover,
.ph-contact-meta-row a:focus-visible {
  color: var(--ph-signal);
}

.ph-form {
  display: grid;
  gap: 0;
  background: rgba(246,244,238,0.06);
  padding: 28px;
}
@media (min-width: 768px) { .ph-form { padding: 40px; } }
.ph-form-head {
  font-family: var(--ph-f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ph-signal);
  margin-bottom: 20px;
}
.ph-form input,
.ph-form select,
.ph-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(246,244,238,0.25);
  padding: 14px 0;
  font-size: 15px;
  color: var(--ph-invert-text);
  outline: none;
  margin-bottom: 4px;
  font-family: inherit;
  min-height: 48px;
}
.ph-form select { appearance: none; }
.ph-form select option { color: #111; background: #F6F4EE; }
.ph-form textarea { resize: none; min-height: 120px; }
.ph-form input::placeholder,
.ph-form textarea::placeholder { color: rgba(246,244,238,0.5); }
.ph-form-submit {
  margin-top: 28px;
  background: var(--ph-invert-text);
  color: var(--ph-invert);
  border: none;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  justify-self: start;
  min-height: 48px;
  font-family: inherit;
}
.ph-form-submit:hover,
.ph-form-submit:focus-visible {
  background: var(--ph-signal);
  color: #fff;
}
.ph-form-flash {
  grid-column: 1 / -1;
  margin-bottom: 16px;
  padding: 12px 16px;
  font-size: 13px;
  font-family: var(--ph-f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ph-form-flash.is-success {
  border-left: 3px solid var(--ph-signal);
  color: var(--ph-invert-text);
  background: rgba(217,119,87,0.1);
}
.ph-form-flash.is-error {
  border-left: 3px solid #E25555;
  color: #E25555;
  background: rgba(226,85,85,0.08);
}

/* Visually-hidden honeypot */
.ph-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ph-footer {
  padding: 28px var(--ph-gutter);
  background: var(--ph-bg);
  color: var(--ph-muted);
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  border-top: 1px solid var(--ph-hair);
  text-align: center;
  max-width: var(--ph-max);
  margin-inline: auto;
}
.ph-footer img { height: 18px; object-fit: contain; margin-inline: auto; }
@media (min-width: 768px) {
  .ph-footer {
    grid-template-columns: 1fr auto 1fr;
    text-align: left;
    padding-block: 32px;
  }
  .ph-footer .end { justify-self: end; text-align: right; }
}

/* ============================================================
   MOTION — scroll reveals
   ============================================================ */
@keyframes ph-reveal-fade-up {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
html.ph-reveal--on .ph-reveal:not(.is-in) {
  opacity: 0;
}
html.ph-reveal--on .ph-reveal.is-in {
  animation: ph-reveal-fade-up .7s ease-out both;
  animation-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  html.ph-reveal--on .ph-reveal:not(.is-in),
  html.ph-reveal--on .ph-reveal.is-in {
    opacity: 1;
    animation: none;
  }
}

/* ============================================================
   MOTION — PH mark settle on load
   ============================================================ */
@keyframes ph-mark-settle {
  0%   { opacity: 0; transform: scale(.85) rotate(-4deg); }
  60%  { opacity: 1; transform: scale(1.03) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes ph-brand-slide {
  0%   { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
html.ph-reveal--on .ph-nav-brand-logo {
  animation: ph-mark-settle .85s cubic-bezier(.34, 1.2, .36, 1) both;
  animation-delay: 120ms;
}
html.ph-reveal--on .ph-nav-brand-name {
  animation: ph-brand-slide .5s ease-out both;
  animation-delay: 420ms;
}
html.ph-reveal--on .ph-nav-brand-sub {
  animation: ph-brand-slide .5s ease-out both;
  animation-delay: 520ms;
}
html.ph-reveal--on .ph-nav-loc,
html.ph-reveal--on .ph-nav-cta-desktop,
html.ph-reveal--on .ph-nav-cta-mobile {
  animation: ph-brand-slide .5s ease-out both;
  animation-delay: 620ms;
}
html.ph-reveal--on .ph-nav-link {
  animation: ph-brand-slide .4s ease-out both;
}
html.ph-reveal--on .ph-nav-link:nth-child(1) { animation-delay: 500ms; }
html.ph-reveal--on .ph-nav-link:nth-child(2) { animation-delay: 540ms; }
html.ph-reveal--on .ph-nav-link:nth-child(3) { animation-delay: 580ms; }
html.ph-reveal--on .ph-nav-link:nth-child(4) { animation-delay: 620ms; }
html.ph-reveal--on .ph-nav-link:nth-child(5) { animation-delay: 660ms; }
html.ph-reveal--on .ph-nav-link:nth-child(6) { animation-delay: 700ms; }

@media (prefers-reduced-motion: reduce) {
  html.ph-reveal--on .ph-nav-brand-logo,
  html.ph-reveal--on .ph-nav-brand-name,
  html.ph-reveal--on .ph-nav-brand-sub,
  html.ph-reveal--on .ph-nav-link,
  html.ph-reveal--on .ph-nav-loc,
  html.ph-reveal--on .ph-nav-cta-desktop,
  html.ph-reveal--on .ph-nav-cta-mobile {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.ph-kpi.is-counting { font-variant-numeric: tabular-nums; }

/* Meter bar sweep */
@keyframes ph-meter-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
html.ph-reveal--on .ph-meterbar.is-in::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(217, 119, 87, .08) 50%, transparent 100%);
  animation: ph-meter-sweep 1.8s ease-out;
  pointer-events: none;
}
.ph-meterbar { position: relative; overflow: hidden; }

/* ---------- UTILITIES ---------- */
.ph-bg-alt { background: var(--ph-bg-alt); }
.ph-accent { color: var(--ph-signal); }
.ph-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   MOBILE-ONLY OVERRIDES (≤1023.98px) — v1.0.7
   Scoped to phones/small tablets so desktop (>=1024px) is
   untouched. Targets iPhone 15 Pro (393×852), Galaxy S24
   (360×780 / 384×832), iPhone SE worst-case (375×667).
   ============================================================ */
@media (max-width: 1023.98px) {

  /* --- Safe-area inset for notched iPhones so the sticky top
     nav clears the Dynamic Island / status bar overlap. --- */
  .ph-nav-top { padding-top: env(safe-area-inset-top, 0px); }

  /* Expose the effective sticky-nav offset as a CSS custom prop so
     in-section sticky sub-nav rows can compute their own `top` without
     re-measuring in JS. ~65px nav + any notch inset. */
  :root { --ph-mob-nav-h: calc(65px + env(safe-area-inset-top, 0px)); }

  /* --- Touch targets ≥44px for all interactive pill/tab elements. --- */
  .ph-btn-sm,
  .ph-nav-cta-mobile,
  .ph-metrics-tab,
  .ph-service-row-dot {
    min-height: 44px;
  }
  .ph-nav-cta-mobile { padding-inline: 14px; }

  /* --- § 03 Services: wrapper is `display: grid` at base, which
     creates explicit row tracks that confine a sticky child to its
     own track (= zero room to stick). Force `display: block` on
     mobile so the list can stick across the full wrapper height. --- */
  .ph-services-wrap {
    position: relative;
    display: block;
  }
  .ph-service-detail-wrap { margin-top: 0; }

  /* Tighten row typography/padding on mobile so the 6-row list is
     more compact regardless of whether it's sticky. */
  .ph-service-row {
    padding-block: 12px;  /* was 20px */
    gap: 12px;
  }
  .ph-service-row-n { font-size: 10px; }
  .ph-service-row-title { font-size: 14px; line-height: 1.25; }
  .ph-service-row-dot { transform: scale(0.85); }

  /* --- § 05 Metrics: make just the tabs row (42px) sticky below the
     top nav on all phones. The strip is thin enough to not crowd any
     viewport, so it's safe across all mobile heights. --- */
  .ph-metrics-tabs {
    position: sticky;
    top: var(--ph-mob-nav-h);
    z-index: 3;
    background: var(--ph-bg);
    margin-inline: calc(-1 * var(--ph-gutter));
    padding: 10px var(--ph-gutter);
    border-block: 1px solid var(--ph-hair);
  }
  .ph-bg-alt .ph-metrics-tabs { background: var(--ph-bg-alt); }

  /* Visual affordance: fade the right edge of the horizontally-
     scrolled metrics tabs strip so users see there's more to swipe. */
  .ph-metrics-tabs {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent);
  }

  /* Meter bar horizontal swipe affordance + snap */
  .ph-meterbar { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .ph-meterbar::-webkit-scrollbar { display: none; }
  .ph-meter-cell { scroll-snap-align: start; }

  /* Scroll-padding so in-page jumps clear the nav + any sticky strips. */
  html { scroll-padding-top: calc(var(--ph-mob-nav-h) + 60px); }
}

/* Services sticky list ONLY activates when the viewport is tall
   enough (≥700px height) to still leave meaningful room for the
   detail panel below. On iPhone SE (667) and landscape phones, the
   list falls back to the standard in-flow accordion behaviour —
   scroll up to change service. */
@media (max-width: 1023.98px) and (min-height: 700px) {
  .ph-service-list {
    position: sticky;
    top: var(--ph-mob-nav-h);
    z-index: 3;
    background: var(--ph-bg);
    margin-inline: calc(-1 * var(--ph-gutter));
    padding-inline: var(--ph-gutter);
    padding-block: 4px;
    border-bottom: 1px solid var(--ph-hair);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  }
  .ph-bg-alt .ph-service-list { background: var(--ph-bg-alt); }
}

/* Only hide the meter-bar scrollbar cosmetic edge fade on wider screens
   where the strip naturally fits without scroll. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ph-metrics-tabs { mask-image: none; -webkit-mask-image: none; }
}