/* ==========================================================================
   Pyn Consulting — Subpage chrome (shared by Workshops / Hackathon / Upskilling)
   Lifts the header, footer, buttons, eyebrows etc. from index.html so all
   four pages stay in lockstep.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--paper-2); }
a { color: inherit; }

/* ---------- Layout primitives ---------- */
.gutter { padding-left: 56px; padding-right: 56px; }
.hairline-bottom { border-bottom: 1px solid var(--ink); }
.hairline-top    { border-top:    1px solid var(--ink); }

/* ---------- Editorial bits ---------- */
.overline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.overline .num { font-variant-numeric: tabular-nums; color: var(--ink); }
.overline .dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-orange);
}
.overline.muted { color: var(--fg-muted); }
.overline.muted .num { color: var(--ink); }
.overline.inverse { color: var(--fg-on-inverse-muted); }
.overline.inverse .num { color: var(--paper); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 0.94;
  margin: 0;
  text-wrap: balance;
}
h1 em, h2 em, h3 em, h4 em { font-style: italic; font-weight: 400; }

.lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lead.inverse { color: rgba(255,255,255,0.78); }
.lead em { color: var(--accent-orange); font-style: italic; }

.body {
  font-size: 16px; line-height: 1.55; font-weight: 300; color: var(--ink-2);
  text-wrap: pretty;
}
.body.inverse { color: rgba(255,255,255,0.72); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-sans); font-weight: 400; font-size: 14.5px;
  letter-spacing: 0.005em;
  padding: 14px 22px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover  { background: #2a2a28; }
.btn:active { transform: scale(0.98); }
.btn .arrow { display: inline-block; transition: transform var(--dur-med) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn.ghost  { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper-2); }
.btn.paper  { background: var(--paper-2); color: var(--ink); border-color: var(--paper-2); }
.btn.paper:hover { background: var(--accent-orange); border-color: var(--accent-orange); color: var(--ink); }

.text-link {
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  font-weight: 400;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.text-link:hover { color: var(--accent-orange); border-color: var(--accent-orange); }
.text-link.inverse { color: var(--paper-2); border-color: var(--paper-2); }
.text-link.inverse:hover { color: var(--accent-orange); border-color: var(--accent-orange); }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink);
}
header.site .row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
  padding: 0 32px;
}
header.site .brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
}
header.site .brand .logo { height: 18px; display: block; }
header.site .brand .crumb {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; color: var(--ink); padding-left: 12px;
  border-left: 1px solid var(--hairline-soft);
}
header.site nav.primary {
  display: flex; gap: 36px; justify-self: center;
  font-size: 14.5px; font-weight: 400;
}
header.site nav.primary a {
  text-decoration: none; color: var(--ink); position: relative;
  padding: 4px 0;
  transition: color var(--dur-fast);
}
header.site nav.primary a:hover { color: var(--accent-rust); }
header.site nav.primary a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -22px;
  height: 2px; background: var(--accent-orange);
}
header.site .right { justify-self: end; display: flex; gap: 10px; align-items: center; }

/* ---------- Pyn shape devices (gradient, never alongside accent) ---------- */
.shape-stack {
  position: relative;
  aspect-ratio: 1 / 1.05;
  display: flex; align-items: center; justify-content: center;
}
.shape-stack .stadium {
  width: 88%; aspect-ratio: 0.8 / 1;
  border-radius: 9999px;
  background: var(--gradient-sunset);
  position: relative;
}
.shape-stack .pin {
  position: absolute; bottom: 12%; right: 4%;
  width: 38%; aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--gradient-bloom);
  border: 1px solid var(--ink);
}
.shape-stack .bead {
  position: absolute; top: 2%; left: -2%;
  width: 22%; aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--gradient-prism);
}
.shape-stack.compact { aspect-ratio: 1 / 0.78; }

/* Single-shape decoratives */
.shape-circle {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--gradient-bloom);
  border: 1px solid var(--ink);
}
.shape-stadium {
  width: 100%; aspect-ratio: 0.85 / 1;
  border-radius: 9999px;
  background: var(--gradient-sunset);
}
.shape-prism {
  width: 100%; aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--gradient-prism);
}

/* Photo-cell with brand wash */
.photo-cell {
  position: relative;
  background-size: cover;
  background-position: center 30%;
  min-height: 520px;
}
.photo-cell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(252,253,248,0) 60%, rgba(252,253,248,0.18) 100%);
  pointer-events: none;
}
.photo-cell .badge-overline {
  position: absolute; left: 24px; top: 24px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 8px 14px 7px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; color: var(--ink);
}

/* ---------- Subpage hero (large editorial masthead) ---------- */
section.subhero {
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink);
  padding: 96px 56px 72px;
}

/* Split hero: masthead left, photo/art panel right */
section.subhero.split {
  padding: 0;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
}
section.subhero.split .left-col {
  padding: 80px 56px 56px;
  display: flex; flex-direction: column;
  gap: 24px;
}
section.subhero.split .left-col .meta-row {
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--ink);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
section.subhero.split .left-col .meta-row .v {
  font-size: clamp(16px, 1.3vw, 20px);
}
section.subhero.split .right-art {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  min-height: 560px;
  border-left: 1px solid var(--ink);
}
section.subhero.split .right-art .photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.95) contrast(1.02);
}
section.subhero.split .right-art .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
}
section.subhero.split .right-art .pull {
  position: absolute; left: 28px; bottom: 28px;
  color: var(--paper-2);
  max-width: 26ch;
}
section.subhero.split .right-art .pull .badge {
  display: inline-block;
  background: var(--paper-2); color: var(--ink);
  border-radius: 999px;
  padding: 7px 13px 6px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
}
section.subhero.split .right-art .pull q {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1.18;
  letter-spacing: -0.008em;
  font-style: italic;
  quotes: "\201C" "\201D";
}

@media (max-width: 1080px) {
  section.subhero.split { grid-template-columns: 1fr; }
  section.subhero.split .left-col { padding: 56px 32px 40px; }
  section.subhero.split .right-art { min-height: 360px; border-left: none; border-top: 1px solid var(--ink); }
}

/* Shape band — used between sections to break rhythm */
section.shape-band {
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink);
  padding: 110px 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center;
}
section.shape-band.flip { direction: rtl; }
section.shape-band.flip > * { direction: ltr; }
section.shape-band .copy h2 {
  font-size: clamp(40px, 4.6vw, 76px);
  letter-spacing: -0.018em; line-height: 0.94;
}
section.shape-band .copy h2 em { font-style: italic; color: var(--accent-orange); }
section.shape-band .copy .lead { margin-top: 24px; max-width: 44ch; }
section.shape-band .copy .actions { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 1080px) {
  section.shape-band { grid-template-columns: 1fr; padding-left: 32px; padding-right: 32px; }
}
.subhero .crumbs {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 56px;
}
.subhero .crumbs a { text-decoration: none; color: var(--fg-muted); }
.subhero .crumbs a:hover { color: var(--accent-orange); }
.subhero .crumbs .sep { color: rgba(0,0,0,0.25); }
.subhero .crumbs .here { color: var(--ink); }

.subhero .row {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 80px;
  align-items: end;
  padding-bottom: 24px;
}
.subhero h1 {
  font-size: clamp(56px, 7.4vw, 124px);
  line-height: 0.88;
  letter-spacing: -0.024em;
  max-width: 14ch;
}
.subhero h1 em { color: var(--accent-orange); font-style: italic; }
.subhero .right-col {
  display: flex; flex-direction: column; gap: 28px;
}
.subhero .right-col .lead { max-width: 38ch; }

.subhero .meta-row {
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--ink);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.subhero .meta {
  display: flex; flex-direction: column; gap: 8px;
}
.subhero .meta .k {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
}
.subhero .meta .v {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 26px);
  letter-spacing: -0.012em; line-height: 1.1;
  color: var(--ink);
}
.subhero .meta .v em { font-style: italic; color: var(--accent-orange); }

/* ---------- Generic editorial section ---------- */
section.band {
  padding: 110px 56px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper-2);
}
section.band.dark {
  background: var(--ink);
  color: var(--paper-2);
}
section.band.dark h2, section.band.dark h3, section.band.dark h4 { color: var(--paper-2); }
section.band .head {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 64px; align-items: end; margin-bottom: 64px;
  max-width: 1280px;
}
section.band .head h2 {
  font-size: clamp(36px, 4vw, 64px);
  letter-spacing: -0.014em; line-height: 0.96;
}
section.band .head h2 em { color: var(--accent-orange); font-style: italic; }
section.band.dark .head h2 em { color: var(--accent-orange); }

/* ---------- Numbered phase rows (reused on Workshops + Upskilling) ---------- */
.phase-list { display: flex; flex-direction: column; }
.phase-list .phase {
  display: grid;
  grid-template-columns: 80px 1fr 1.6fr;
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--hairline-soft);
  align-items: start;
}
.phase-list .phase:last-child { border-bottom: 1px solid var(--hairline-soft); }
.phase-list .phase .ph-num {
  font-family: var(--font-display);
  font-size: 32px; line-height: 1; letter-spacing: -0.02em;
  color: var(--accent-orange);
}
.phase-list .phase .ph-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.05; letter-spacing: -0.01em;
  color: var(--ink);
}
.phase-list .phase .ph-body {
  font-size: 15.5px; line-height: 1.55; color: var(--ink-2); font-weight: 300;
}
section.band.dark .phase-list .phase {
  border-top-color: rgba(255,255,255,0.18);
}
section.band.dark .phase-list .phase:last-child {
  border-bottom-color: rgba(255,255,255,0.18);
}
section.band.dark .phase-list .phase .ph-title { color: var(--paper-2); }
section.band.dark .phase-list .phase .ph-body { color: rgba(255,255,255,0.7); }

/* ---------- 3-up feature grid ---------- */
.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
}
.feature {
  padding: 28px 28px 36px;
  border-right: 1px solid var(--ink);
}
.feature:last-child { border-right: none; }
.feature .num {
  font-family: var(--font-display);
  font-size: 48px; line-height: 1;
  letter-spacing: -0.02em;
}
.feature .num em { color: var(--accent-orange); font-style: italic; font-weight: 400; }
.feature h4 {
  margin: 18px 0 10px;
  font-size: 24px; line-height: 1.05;
  letter-spacing: -0.012em;
}
.feature .body { font-size: 15px; }

/* ---------- Cities row (workshops) ---------- */
.cities {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
}
.city {
  padding: 36px 28px;
  border-right: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 12px;
}
.city:last-child { border-right: none; }
.city .name {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.014em; line-height: 0.95;
}
.city .name em { font-style: italic; color: var(--accent-orange); }
.city .when {
  font-size: 14px; color: var(--ink-2); font-weight: 400;
}
.city .seats {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted); font-weight: 500;
}
.city .seats .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-orange);
}
.city .seats.full .dot { background: rgba(0,0,0,0.4); }

/* ---------- FAQ list ---------- */
.faq { border-top: 1px solid var(--ink); }
.faq details {
  border-bottom: 1px solid var(--hairline-soft);
  padding: 24px 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.01em; line-height: 1.1;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-sans); font-weight: 300;
  font-size: 28px; transition: transform var(--dur-fast);
}
.faq details[open] summary::after { content: "–"; }
.faq .answer {
  margin-top: 14px; max-width: 70ch;
  font-size: 16px; color: var(--ink-2); font-weight: 300; line-height: 1.55;
}

/* ---------- Closing CTA strip ---------- */
section.cta {
  background: var(--ink);
  color: var(--paper-2);
  padding: 110px 56px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  align-items: end;
}
.cta h2 {
  color: var(--paper-2);
  font-size: clamp(44px, 5vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.018em;
  max-width: 16ch;
}
.cta h2 em { color: var(--accent-orange); font-style: italic; }
.cta .right {
  display: flex; flex-direction: column; gap: 28px;
  align-items: flex-start;
}
.cta .right .lead { color: rgba(255,255,255,0.78); }
.cta .right .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--ink);
  color: var(--paper-2);
  padding: 110px 56px 36px;
  border-top: 1px solid var(--ink);
}
.footer-display {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 158px);
  line-height: 0.86;
  letter-spacing: -0.028em;
  margin: 0 0 56px;
  color: var(--paper-2);
  max-width: 14ch;
}
.footer-display em { font-style: italic; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 56px;
}
.footer-grid h6 {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-orange);
  margin: 0 0 18px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a {
  color: var(--paper-2); text-decoration: none; font-size: 14.5px;
  opacity: 0.82;
  transition: opacity var(--dur-fast), color var(--dur-fast);
}
.footer-grid a:hover { color: var(--accent-orange); opacity: 1; }
.footer-grid .lead-cell .lead { color: rgba(255,255,255,0.72); margin-bottom: 24px; }
.footer-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 12px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}
.footer-bar .colophon { display: flex; gap: 24px; align-items: center; }
.footer-bar .colophon img { height: 16px; opacity: 0.85; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  section.subhero, section.band, section.cta, footer.site,
  header.site .row { padding-left: 32px; padding-right: 32px; }
  .subhero .row { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .subhero .meta-row { grid-template-columns: repeat(2, 1fr); }
  section.band .head, section.cta { grid-template-columns: 1fr; }
  .feature-grid, .cities { grid-template-columns: 1fr; }
  .feature, .city { border-right: none; border-bottom: 1px solid var(--ink); }
  .feature:last-child, .city:last-child { border-bottom: none; }
  .phase-list .phase { grid-template-columns: 60px 1fr; gap: 12px 18px; }
  .phase-list .phase .ph-body { grid-column: 1 / -1; padding-top: 4px; }
  .footer-grid { grid-template-columns: 1fr; }
  header.site nav.primary { display: none; }
}