/* Nicole Chin — personal site */

:root {
  color-scheme: light;
  --bg: #f7f7f6;
  --bg-raised: #ffffff;
  --ink: #121214;
  --ink-soft: #55555b;
  --ink-faint: #717178;
  --rule: #e3e3e1;
  --accent: #7e6733;
  --accent-soft: #f1ede4;
  /* Text that sits ON the accent, not beside it. It has to invert with the
     theme: the light accent is a dark brown, the dark accent is a pale gold. */
  --on-accent: #ffffff;
  --danger: #c0392b;
  --shadow: 0 1px 2px rgba(22, 21, 26, .04), 0 8px 28px rgba(22, 21, 26, .06);
  --maxw: 1040px;
  /* Instrument Serif is a display face: its hairlines thin out below ~24px.
     Serif at 24px and up, sans below. Nothing in between. */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dark palette. Applied when the device asks for it and the visitor has not
   chosen light, and whenever the visitor has explicitly chosen dark. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #101012;
    --bg-raised: #17171a;
    --ink: #f2f2f0;
    --ink-soft: #b2b2b8;
    --ink-faint: #82828a;
    --rule: #26262b;
    --accent: #d4bd8d;
    --accent-soft: #221f19;
    --on-accent: #101012;
    --danger: #ef8a7c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101012;
  --bg-raised: #17171a;
  --ink: #f2f2f0;
  --ink-soft: #b2b2b8;
  --ink-faint: #82828a;
  --rule: #26262b;
  --accent: #d4bd8d;
  --accent-soft: #221f19;
  --on-accent: #101012;
  --danger: #ef8a7c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);
}

:root[data-theme="light"] {
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 10;
  background: var(--bg-raised);
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Top bar */

.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 24px 0;
}

/* Spaced caps rather than the display serif. Instrument Serif needs 24px to
   hold its hairlines, and the wordmark had been sitting at 21px — the one place
   on the site breaking its own type rule. Caps also stop the mark competing
   with the serif h1 below it: it reads as identity rather than as a heading. */
.mark {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The tracking adds a gap after the final N that the full stop would otherwise
   float in, so it is pulled back and carries no tracking of its own. */
.mark-dot {
  margin-left: -.14em;
  letter-spacing: 0;
  color: var(--accent);
}

.topbar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  min-width: 0;
  margin-left: auto;
  font-size: 14px;
  color: var(--ink-soft);
}

.topbar nav a {
  text-decoration: none;
  transition: color .15s ease;
}

.topbar nav a:hover { color: var(--accent); }

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
  max-width: var(--maxw);
  margin: 0 auto;
  /* Tuned so the hero and the Featured in strip both sit above the fold on a
     typical laptop viewport. */
  padding: clamp(34px, 4.6vw, 58px) 24px clamp(30px, 3.8vw, 46px);
}

h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -.01em;
}

.intro {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: 17px;
  color: var(--ink-soft);
}

/* Cut-out portrait: the frame is a ring, the inside stays transparent so the
   page shows through behind her. */
.hero-photo img {
  display: block;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  height: auto;
  margin-left: auto;
  border-radius: 50%;
  background: transparent;
}

/* Buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-raised);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* Sections */

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-block: clamp(48px, 7vw, 80px);
  padding-inline: 24px;
  border-top: 1px solid var(--rule);
}

.section-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.section-lede {
  margin: 20px 0 0;
  font-size: 17px;
  color: var(--ink-soft);
}

/* Impact metrics */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}

.metrics li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px 28px;
  background: var(--bg-raised);
}

.metric-value {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  color: var(--accent);
}

.metric-label {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.stack-group h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Stack */

.stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px 40px;
  margin-top: 36px;
}

.stack-group p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Contact */

.contact .actions { margin-top: 28px; }

/* Every work page ends on the contact form, so no page is a dead end. Inside
   the detail column it lines up with the text and keeps clear of the CTA. */
.detail .contact {
  margin-top: clamp(38px, 5vw, 52px);
  padding-inline: 0;
}

/* Footer */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 24px 48px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-faint);
}

.footer p { margin: 0; }

/* Narrow screens */

@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero-photo { order: -1; }
  .hero-photo img {
    max-width: 230px;
    margin-left: 0;
  }
}

/* ---- Hero, Notion voice ---- */

.ipa {
  font-style: italic;
  color: var(--accent);
  white-space: nowrap;
}

.hint {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--ink-faint);
}

.statement {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-size: clamp(26px, 3.3vw, 35px);
  line-height: 1.28;
}

/* ---- Featured events gallery ---- */

.gallery {
  columns: 3 260px;
  column-gap: 20px;
  margin-top: 36px;
}

.gallery figure {
  break-inside: avoid;
  margin: 0 0 20px;
}

.gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--accent-soft);
  box-shadow: var(--shadow);
}

/* ---- My work ---- */

/* Work slider: three cards at a time, two then one as it narrows. */

.slider {
  margin-top: 36px;
  --per-view: 3;
  --slide-gap: 24px;
}

.slider-track {
  display: flex;
  gap: var(--slide-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.slider-track::-webkit-scrollbar { display: none; }

.slider-track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 14px;
}

/* Any direct child of a track is a slide. */
.slider-track > * {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
  scroll-snap-align: start;
}

.work-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--bg-raised);
}

/* Arrows sit on the row itself rather than under it. */
.slider { position: relative; }

.slider-btn {
  position: absolute;
  top: 27%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}

.slider-prev { left: -14px; }
.slider-next { right: -14px; }

.slider-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slider-btn:hover:not([disabled]) {
  border-color: var(--accent);
  color: var(--accent);
}

.slider-btn[disabled] {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .slider { --per-view: 2; --slide-gap: 18px; }
}

@media (max-width: 620px) {
  .slider { --per-view: 1; }
}

.work-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--accent-soft);
}

/* Every card image fills the frame from the top edge down: the title and
   headline of a screenshot are the point, so the crop takes the bottom. */
.work-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.work-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 24px;
  /* Cards in a row stretch to the tallest. The body takes the slack so the
     tag row can be pushed to the bottom edge of every card, whatever the
     length of the title and the description above it. */
  flex: 1 1 auto;
}

.work-body .tags {
  margin-top: auto;
  padding-top: 10px;
}

.work-for {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.work-body h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}

.work-body h3 a {
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .2s ease;
}

.work-body h3 a:hover { background-size: 100% 1px; }

.work-kind {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ---- Kind words ---- */

.quote {
  margin: 0;
  padding: 24px 26px 26px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--bg-raised);
}

.quote blockquote {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.quote blockquote::before { content: "\201C"; }
.quote blockquote::after  { content: "\201D"; }

/* Sentence case, not the uppercase label treatment used elsewhere. These are
   full attributions now — name, title, company — and uppercase with tracking
   runs about a quarter wider, which put the longest of them onto two lines at
   every width the slider shows three cards. */
.quote figcaption {
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--ink-faint);
}

/* ---- Work detail pages ---- */

.detail {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px) 24px clamp(48px, 7vw, 72px);
}

.backlink,
.detail-next {
  margin: 0;
  font-size: 14px;
  color: var(--ink-faint);
}

.detail-next {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.backlink a,
.detail-next a {
  text-decoration: none;
  transition: color .15s ease;
}

.backlink a:hover,
.detail-next a:hover { color: var(--accent); }

.detail-head { margin-top: 28px; }

.detail-head h1 {
  margin: 10px 0 0;
  font-size: clamp(34px, 5.6vw, 52px);
  line-height: 1.06;
}

.detail-kind {
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--ink-soft);
}

.detail-role {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.detail-role span {
  display: inline-block;
  margin-right: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.detail-cta { margin: 26px 0 0; }

.detail-cover {
  margin: clamp(32px, 5vw, 48px) 0 0;
}

.detail-cover img,
.detail-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--accent-soft);
}

.detail-h {
  margin: clamp(38px, 5vw, 52px) 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.detail-p {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.detail-list {
  margin: 18px 0 0;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.detail-list li { margin-top: 10px; }

.detail-list li::marker { color: var(--accent); }

.detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}

.detail-stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 22px 26px;
  background: var(--bg-raised);
}

.detail-shot { margin: 28px 0 0; }

/* A 16:9 embed that sits in the column like a cover image does. */
.detail-video {
  margin: 22px 0 0;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--accent-soft);
}

.detail-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Pixapp's products, auto-advancing. Portrait tiles at 4:5 with a peek of
   the next one, staggered so the row reads like a pinned wall, not a grid. */
.slider-products { --per-view: 2.6; --slide-gap: 18px; margin-top: 26px; }
.slider-products .slider-track { align-items: flex-start; padding-bottom: 30px; }
.slider-products figure { margin: 0; }
.slider-products figure:nth-child(even) { margin-top: 30px; }
.slider-products img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--tile-ratio, 4 / 5);
  object-fit: cover;
  border-radius: 12px;
  background: var(--accent-soft);
  box-shadow: var(--shadow);
}
.slider-products figcaption {
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 620px) { .slider-products { --per-view: 1.6; } }
/* Square tiles, for app screens and track covers (Omvana). */
.slider-square { --tile-ratio: 1 / 1; }

.detail-shot figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.detail-tags {
  margin-top: clamp(38px, 5vw, 52px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

a.mark { text-decoration: none; }

/* ---- Contact form ---- */

.form {
  display: grid;
  gap: 18px;
  margin-top: 32px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--ink);
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.5;
  transition: border-color .15s ease;
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
}

.field-hint {
  font-size: 12.5px;
  color: var(--ink-faint);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 22px;
}

/* The free-text box only appears once "Others" is picked, so the row stays
   one quiet question for everyone else. auto-fill keeps the empty track, so
   the select holds half width like the one above it. */
.source-row { grid-template-columns: repeat(auto-fill, minmax(max(240px, calc(50% - 11px)), 1fr)); }
.source-other { display: none; }
.source-row:has(option[value="Others"]:checked) .source-other { display: grid; }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.form-status {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.form-status[data-state="error"] { color: var(--danger); }
.form-status[data-state="ok"] { color: var(--accent); }

:root[data-theme="dark"] .form-status[data-state="error"] { color: #ef8a7c; }

button.btn {
  cursor: pointer;
  font-family: inherit;
}

button.btn[disabled] {
  opacity: .55;
  cursor: progress;
}

/* Once the message is away the button stays down for good, so the cursor stops
   implying that something is still in flight. */
button.btn[data-sent] {
  cursor: not-allowed;
}

/* ---- Training & workshops ---- */

/* Three posters in view, the enquiry card one step to the right. */
.slider-training {
  --per-view: 3;
  margin-top: 36px;
}

.slider-training .slider-track { align-items: stretch; }

@media (max-width: 1000px) { .slider-training { --per-view: 2; } }
@media (max-width: 620px)  { .slider-training { --per-view: 1; } }

.slider-training figure { margin: 0; }

.slider-training img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--accent-soft);
}

.slider-training figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* Visible to screen readers and crawlers, not on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- MentorCruise card ---- */

.mentor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr .55fr;
  gap: 22px;
  margin: 36px 0 0;
  align-items: stretch;
}

.mentor-grid figure { margin: 0; }

/* Narrower than the cards by design — only the height needs to agree, and the
   grid row gives us that for free. */
.mentor-grid .training-cta {
  aspect-ratio: auto;
  height: 100%;
}

@media (max-width: 900px) {
  .mentor-grid { grid-template-columns: 1fr 1fr; }
  .mentor-grid .training-cta { grid-column: 1 / -1; min-height: 150px; }
}

@media (max-width: 560px) {
  .mentor-grid { grid-template-columns: 1fr; }
  .mentor-grid .training-cta { aspect-ratio: auto; }
}

/* Scoped to the banner links only — unscoped, this also caught the enquiry
   card's button and squared off its pill. */
.mentorcruise a:not(.btn),
.mentor-grid a:not(.btn) {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease;
}

.mentorcruise a:not(.btn):hover { transform: translateY(-2px); }

.mentorcruise img,
.mentor-grid img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 14px;
}


/* ---- Theme control ---- */

.theme-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-raised);
}

.theme-toggle button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.theme-toggle button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle button:hover { color: var(--ink); }

.theme-toggle button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---- Typographic wrapping ---- */

/* Keeps last lines from stranding a single orphan word. */
.intro,
.statement,
.section-lede,
.detail-p,
.detail-list li,
.metric-label,
.work-kind,
.quote blockquote,
.hint {
  text-wrap: pretty;
}

/* Evens out short display text across its lines. Headings only — on a statement
   that runs to three lines, balance pulls every line well short of the measure
   and the paragraph reads as though it broke off halfway. */
h1,
.work-body h3,
.detail-head h1,
.callout h3 {
  text-wrap: balance;
}

/* ---- Menu button: hidden until the nav collapses ---- */

.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
  grid-area: 1 / 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.nav-toggle .nav-icon-close,
.nav-toggle[aria-expanded="true"] .nav-icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-icon-close { display: block; }

/* ---- Narrow screens: full-screen menu ---- */

@media (max-width: 820px) {
  .topbar {
    position: relative;
    z-index: 60;
    padding-top: 18px;
    gap: 14px;
  }

  .mark { font-size: 12px; letter-spacing: .18em; }

  .theme-toggle { margin-left: auto; }

  .nav-toggle { display: grid; }

  /* The panel is a child of the header, so the header's own controls need to
     sit above it to stay reachable while the menu is open. */
  .topbar .mark,
  .topbar .theme-toggle,
  .topbar .nav-toggle {
    position: relative;
    z-index: 55;
  }

  /* The nav element becomes the panel itself. Toggled with display rather than
     visibility, so links are focusable the instant the panel opens. */
  .topbar nav {
    display: none;
  }

  .topbar nav[data-open="true"] {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 84px 28px 40px;
    background: var(--bg);
    overflow-y: auto;
    animation: menu-in .18s ease;
  }

  @keyframes menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }

  /* Tap targets comfortably over the 44px minimum. */
  .topbar nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--serif);
    font-size: 27px;
    line-height: 1.2;
    color: var(--ink);
  }

  .topbar nav a:last-child { border-bottom: 0; }

  /* Keep the page still behind the open menu. */
  body.nav-open { overflow: hidden; }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .topbar nav[data-open="true"] { animation: none; }
}

/* ---- Enquiry cards ---- */

/* Three of these sit at the end of the training slider, the mentorship grid and
   the work slider. One rule for all three so they cannot drift apart again.
   These cells are short, so they take the sans at normal weight — the display
   serif needs 24px to hold up, and bold read as shouty next to the quieter
   cards around them. */
.cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 20px 24px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--bg-raised);
}

.cta-card p {
  margin: 0;
  max-width: 30ch;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
}

.cta-card .btn {
  align-self: center;
  padding: 8px 18px;
  font-size: 14px;
}

/* Matches the posters' aspect exactly, so the row has one height. */
.training-cta { aspect-ratio: 900 / 491; }

/* Once the grid drops to one column the card would become very wide and short. */
@media (max-width: 560px) {
  .training-cta {
    aspect-ratio: auto;
    padding: 26px 24px;
    gap: 18px;
  }
  .training-cta p { font-size: 22px; }
}


/* On narrow screens the arrows would cover the single visible card. */
@media (max-width: 620px) {
  .slider-prev { left: 4px; }
  .slider-next { right: 4px; }
}

/* ---- Enquiry slide at the end of the work slider ---- */

/* A full-height slide rather than a fixed aspect, so it matches the work cards
   beside it. Everything else comes from .cta-card. */
.work-card-cta { padding: 0; }

.work-card-cta .work-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 28px;
  text-align: center;
}


/* ---- Platform labels ---- */

.mentor-grid figure { position: relative; }

.mentor-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Emphasis inside body copy takes the accent. */
.intro strong {
  font-weight: 600;
  color: var(--accent);
}

/* ---- Advisory landing page ---- */

.advisory {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px) 24px 0;
}

/* The first section draws a border-top; without this the hero's button sits
   flush against it. */
.advisory .detail-head {
  margin-top: 28px;
  padding-bottom: clamp(40px, 6vw, 64px);
}

/* Each sentence of the advisory statement gets its own line, and still wraps
   normally within itself once the screen is narrow. */
.advisory .detail-head .statement span { display: block; }

.advisory .detail-head h1 {
  margin: 10px 0 0;
  font-size: clamp(38px, 6.4vw, 62px);
}

.advisory .section {
  padding-inline: 0;
  max-width: none;
}

/* Sits beside the hero button, not under it, so the offer and its reassurance
   read as one line. */
.detail-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* The quieter of the two paths: same destination, lower commitment than
   booking a call. */
.cta-inline {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}

.cta-inline:hover,
.cta-inline:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px 44px;
  margin-top: 36px;
}

.help h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
}

.help p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.advisory .section-lede strong { color: var(--accent); font-weight: 600; }



/* ---- Step diagram ---- */

.steps {
  display: flex;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 14px;
}

/* the connector runs behind the markers, from each one to the next */
.steps li::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--rule);
  z-index: 0;
}

.steps li:last-child::after { display: none; }

.step-n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1;
  color: var(--accent);
}

.step-t {
  margin-top: 18px;
  max-width: 22ch;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .steps { flex-direction: column; gap: 26px; }

  .steps li {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    text-align: left;
    padding: 0;
  }

  /* connector turns vertical between stacked rows */
  .steps li::after {
    top: 44px;
    left: 21px;
    width: 1px;
    height: 26px;
  }

  .step-n { flex: 0 0 44px; }
  .step-t { margin-top: 0; max-width: none; }
}


/* ---- Review slider ---- */

.slider-quotes { --per-view: 3; }

.slider-quotes .slider-track { align-items: stretch; }

.slider-quotes .quote {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.slider-quotes .quote blockquote { flex: 1; font-size: 15px; }

@media (max-width: 900px)  { .slider-quotes { --per-view: 2; } }
@media (max-width: 640px)  { .slider-quotes { --per-view: 1; } }

/* Chevron on the first step, linking down to the form. Padding and a matching
   negative margin give it a 44px tap target without shifting the layout. */
.step-go {
  display: inline-block;
  padding: 12px 18px;
  margin: -12px -12px;
  font-size: 1.35em;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  transform: translateY(1px);
  transition: transform .15s ease;
}

.step-go:hover { transform: translate(3px, 1px); }

/* ---- Footer navigation ---- */

.footer {
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  font-size: 14px;
}

.footer-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .15s ease;
}

.footer-nav a:hover { color: var(--accent); }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.footer-social {
  display: flex;
  align-items: center;
  /* Negative, so the last glyph sits on the right margin rather than its
     target's padding sitting there. */
  margin-right: -5px;
}

/* The icons carry their own padding, so the label only needs the difference. */
.footer-social-label { margin-right: 5px; }

/* Tall enough to stay an easy target, narrow enough that the two glyphs read as
   a pair. At 40px square the padding alone put 23px between them. */
.footer-social a {
  display: grid;
  place-items: center;
  width: 27px;
  height: 40px;
  margin-block: -10px;
  border-radius: 8px;
  color: var(--ink-faint);
  transition: color .15s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible { color: var(--accent); }

.footer-social svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: currentColor;
}


/* ---- Featured in: one sliding row ---- */

/* This section is a single 34px strip, so the standard 80px section padding
   left it mostly empty space. */
.featured { padding-block: clamp(26px, 3vw, 38px); }

.marquee {
  margin-top: 20px;
  overflow: hidden;
  /* fade the ends so marks enter and leave rather than being clipped */
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 56s linear infinite;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

.marquee-row {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One fixed slot per mark keeps the spacing even whatever the aspect ratio. */
.marquee-row li {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 160px;
  height: 34px;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logo {
  display: block;
  width: 112px;
  height: 26px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .9;
  transition: opacity .15s ease;
}

.marquee li:hover .logo { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

@media (max-width: 560px) {
  .marquee-row li { width: 124px; height: 30px; }
  .logo { width: 92px; height: 22px; }
}

/* The client marks carry more internal structure than the press logos — a
   stacked lockup, a script — so they get a taller slot to sit in. */
.brands .marquee-row li { width: 176px; height: 44px; }
.brands .logo { width: 136px; height: 34px; }

@media (max-width: 560px) {
  .brands .marquee-row li { width: 138px; height: 38px; }
  .brands .logo { width: 108px; height: 28px; }
}

/* ---- Client brands, small business page ----
   Extracted from a flattened screenshot, so each mark sits on a shared 600x150
   canvas at a hand-set scale. `contain` then cannot rescale them relative to
   one another, and a stacked lockup like Photobook keeps its weight next to a
   long wordmark like Mindvalley. */
.logo-mindvalley { background-image: url(assets/logos/brands/mindvalley.png); }
.logo-photobook { background-image: url(assets/logos/brands/photobook.png); }
.logo-blinkist { background-image: url(assets/logos/brands/blinkist.png); }
.logo-society6 { background-image: url(assets/logos/brands/society6.png); }
.logo-redbubble { background-image: url(assets/logos/brands/redbubble.png); }
.logo-flixbus { background-image: url(assets/logos/brands/flixbus.png); }
.logo-rvezy { background-image: url(assets/logos/brands/rvezy.png); }
.logo-hairqare { background-image: url(assets/logos/brands/hairqare.png); }

.logo-google { background-image: url(assets/logos/google.png); }
.logo-meta { background-image: url(assets/logos/meta.png); }
.logo-amplitude { background-image: url(assets/logos/amplitude.png); }
.logo-braze { background-image: url(assets/logos/braze.png); }
.logo-leanin { background-image: url(assets/logos/leanin.png); }
.logo-etail { background-image: url(assets/logos/etail.png); }
.logo-martechsummit { background-image: url(assets/logos/martechsummit.png); }
.logo-martechweekly { background-image: url(assets/logos/martechweekly.png); }
.logo-appgrowthsummit { background-image: url(assets/logos/appgrowthsummit.png); }
.logo-businessofapps { background-image: url(assets/logos/businessofapps.png); }
.logo-nasacademy { background-image: url(assets/logos/nasacademy.png); }

/* Several marks are near-black and one is a white knockout, so the dark theme
   gets its own set: neutral ink inverted, brand colour brightened in place. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-mindvalley { background-image: url(assets/logos/brands/dark/mindvalley.png); }
  :root:not([data-theme="light"]) .logo-photobook { background-image: url(assets/logos/brands/dark/photobook.png); }
  :root:not([data-theme="light"]) .logo-blinkist { background-image: url(assets/logos/brands/dark/blinkist.png); }
  :root:not([data-theme="light"]) .logo-society6 { background-image: url(assets/logos/brands/dark/society6.png); }
  :root:not([data-theme="light"]) .logo-redbubble { background-image: url(assets/logos/brands/dark/redbubble.png); }
  :root:not([data-theme="light"]) .logo-flixbus { background-image: url(assets/logos/brands/dark/flixbus.png); }
  :root:not([data-theme="light"]) .logo-rvezy { background-image: url(assets/logos/brands/dark/rvezy.png); }
  :root:not([data-theme="light"]) .logo-hairqare { background-image: url(assets/logos/brands/dark/hairqare.png); }
  :root:not([data-theme="light"]) .logo-google { background-image: url(assets/logos/dark/google.png); }
  :root:not([data-theme="light"]) .logo-meta { background-image: url(assets/logos/dark/meta.png); }
  :root:not([data-theme="light"]) .logo-amplitude { background-image: url(assets/logos/dark/amplitude.png); }
  :root:not([data-theme="light"]) .logo-braze { background-image: url(assets/logos/dark/braze.png); }
  :root:not([data-theme="light"]) .logo-leanin { background-image: url(assets/logos/dark/leanin.png); }
  :root:not([data-theme="light"]) .logo-etail { background-image: url(assets/logos/dark/etail.png); }
  :root:not([data-theme="light"]) .logo-martechsummit { background-image: url(assets/logos/dark/martechsummit.png); }
  :root:not([data-theme="light"]) .logo-martechweekly { background-image: url(assets/logos/dark/martechweekly.png); }
  :root:not([data-theme="light"]) .logo-appgrowthsummit { background-image: url(assets/logos/dark/appgrowthsummit.png); }
  :root:not([data-theme="light"]) .logo-businessofapps { background-image: url(assets/logos/dark/businessofapps.png); }
  :root:not([data-theme="light"]) .logo-nasacademy { background-image: url(assets/logos/dark/nasacademy.png); }
}

:root[data-theme="dark"] .logo-mindvalley { background-image: url(assets/logos/brands/dark/mindvalley.png); }
:root[data-theme="dark"] .logo-photobook { background-image: url(assets/logos/brands/dark/photobook.png); }
:root[data-theme="dark"] .logo-blinkist { background-image: url(assets/logos/brands/dark/blinkist.png); }
:root[data-theme="dark"] .logo-society6 { background-image: url(assets/logos/brands/dark/society6.png); }
:root[data-theme="dark"] .logo-redbubble { background-image: url(assets/logos/brands/dark/redbubble.png); }
:root[data-theme="dark"] .logo-flixbus { background-image: url(assets/logos/brands/dark/flixbus.png); }
:root[data-theme="dark"] .logo-rvezy { background-image: url(assets/logos/brands/dark/rvezy.png); }
:root[data-theme="dark"] .logo-hairqare { background-image: url(assets/logos/brands/dark/hairqare.png); }
:root[data-theme="dark"] .logo-google { background-image: url(assets/logos/dark/google.png); }
:root[data-theme="dark"] .logo-meta { background-image: url(assets/logos/dark/meta.png); }
:root[data-theme="dark"] .logo-amplitude { background-image: url(assets/logos/dark/amplitude.png); }
:root[data-theme="dark"] .logo-braze { background-image: url(assets/logos/dark/braze.png); }
:root[data-theme="dark"] .logo-leanin { background-image: url(assets/logos/dark/leanin.png); }
:root[data-theme="dark"] .logo-etail { background-image: url(assets/logos/dark/etail.png); }
:root[data-theme="dark"] .logo-martechsummit { background-image: url(assets/logos/dark/martechsummit.png); }
:root[data-theme="dark"] .logo-martechweekly { background-image: url(assets/logos/dark/martechweekly.png); }
:root[data-theme="dark"] .logo-appgrowthsummit { background-image: url(assets/logos/dark/appgrowthsummit.png); }
:root[data-theme="dark"] .logo-businessofapps { background-image: url(assets/logos/dark/businessofapps.png); }
:root[data-theme="dark"] .logo-nasacademy { background-image: url(assets/logos/dark/nasacademy.png); }

/* Short laptop viewports: compress the hero further so the Featured in strip
   still lands above the fold. */
@media (min-width: 760px) and (max-height: 790px) {
  .hero {
    padding-block: 22px 20px;
    gap: clamp(24px, 4vw, 48px);
  }

  .hero h1 { font-size: clamp(30px, 4.2vw, 46px); }
  .hero .intro { margin-top: 15px; }
  .hero .hint { margin-top: 11px; }
  .hero .actions { margin-top: 20px; }
  .hero-photo img { max-width: 270px; }

  .featured { padding-block: 18px; }
}

/* ---- FAQ ----
   Landing pages answer their own query in prose. <details> keeps the page
   short for a reader without hiding the text from a crawler, which reads the
   markup regardless of the open state. */

.faq {
  margin-top: 36px;
  border-top: 1px solid var(--rule);
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1;
  color: var(--ink-faint);
  transition: transform .18s ease, color .18s ease;
}

.faq-item[open] summary::after {
  content: "\2212";
  color: var(--accent);
}

.faq-item summary:hover { color: var(--accent); }

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.faq-a {
  padding: 0 0 22px;
  max-width: 64ch;
}

.faq-a p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.faq-a p:last-child { margin-bottom: 0; }

/* The opening paragraph of a landing page: the one passage written to be
   quoted whole by an answer engine. */

.section-lede.answer {
  max-width: 68ch;
  color: var(--ink);
}

.help h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

.help h3 a:hover,
.help h3 a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 620px) {
  .faq-item summary { font-size: 21px; }
}