/* ============================================================
   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;
}

/* ============================================================
   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; }
}