/* =============================================================================
   TIMPAEMI · Homepage layer · 26 September 2026
   Loaded after flagship-system-20260926.css on / only: hero, chapters, founders,
   work summary, events and the enquiry form. Tokens, type, header and footer live in the system.
   Round 2 (26 Sep 2026): the first screen says what we do in plain words and offers Contact;
   actions and labels are sentence case, nothing below 14 px.
   ============================================================================= */

/* campaign actions keep their reviewed class names and share the system button */
.page-home .campaign-request,
.page-home .campaign-white-link,
.page-home .access-actions button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-12);
  width: fit-content; min-height: 52px; padding: 0 var(--s-24);
  background: var(--white); color: var(--night); border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--sans); font-size: 16px; line-height: 20px; font-weight: 600;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.page-home .campaign-request::after,
.page-home .campaign-white-link::after,
.page-home .access-actions button[type="submit"]::after { content: ""; width: 8px; height: 8px; background: var(--pink); flex-shrink: 0; }
.page-home .campaign-request:hover,
.page-home .campaign-white-link:hover { background: var(--bone); }

/* ---------------------------------------------------------------- hero */
.page-home .campaign-hero { position: relative; background: var(--night); }
.hero-stage {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 640px; max-height: 1080px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.page-home .campaign-photograph { position: absolute; inset: 0; }
.page-home .campaign-photograph img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--hero-desktop-position, 50% 40%);
  animation: settle 2.4s var(--ease) both;
}
.hero-stage::before,
.hero-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero-stage::before { background: linear-gradient(180deg, rgba(11, 11, 12, 0.62) 0%, rgba(11, 11, 12, 0) 18%); }
.hero-stage::after { background: linear-gradient(180deg, rgba(11, 11, 12, 0) 46%, rgba(11, 11, 12, 0.94) 92%); }
.hero-masthead {
  position: relative; z-index: 1;
  width: 100%; max-width: 1440px; margin: 0 auto;
  padding: 0 var(--margin) var(--s-72);
}
.hero-lede { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-24) var(--s-48); color: var(--white); }
.hero-lede p { max-width: 38rem; font-size: clamp(1.125rem, 1.53vw, 1.375rem); line-height: 1.45; font-weight: 500; text-wrap: pretty; text-shadow: 0 1px 12px rgba(11, 11, 12, 0.55); }
.page-home .hero-contact { flex-shrink: 0; }
/* Round 2, after the first stranger test: a second, navigational choice on the first screen */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16); flex-shrink: 0; }
.page-home .hero-start {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--s-24);
  color: var(--white); background: rgba(11, 11, 12, 0.4); box-shadow: inset 0 0 0 1px var(--white);
  font-size: 16px; line-height: 20px; font-weight: 600; transition: background-color 0.25s var(--ease);
}
.page-home .hero-start:hover { background: rgba(255, 255, 255, 0.14); }
.page-home .campaign-masthead { margin-top: var(--s-32); }
.page-home .campaign-masthead img { width: 100%; height: auto; }

.hero-statement {
  max-width: 1440px; margin: 0 auto;
  padding: var(--section) var(--margin);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48);
  align-items: end;
}
.hero-statement .statement-title { grid-column: 1 / span 8; }
.page-home .campaign-invitation { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: var(--s-32); }
.page-home .campaign-invitation p { font-size: var(--lead); line-height: 1.58; }

/* ---------------------------------------------------------------- the standard (day) */
.page-home .campaign-brief { --fg: var(--night); --sub: var(--stone); --rule: var(--line); --bg: var(--bone); background: var(--bone); color: var(--night); }
.brief-grid {
  padding-block: var(--section);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48);
  align-items: start;
}
.brief-grid > .label { grid-column: 1 / -1; padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--night); }
.brief-grid h2 { grid-column: 1 / span 7; }
.page-home .campaign-brief-copy { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--s-24); }
.page-home .campaign-brief-copy p { font-size: var(--lead); line-height: 1.58; }

/* ---------------------------------------------------------------- capability chapters */
.page-home .campaign-capabilities { background: var(--night); }
.page-home .capability-chapter {
  --fg: var(--white); --sub: var(--mist); --rule: var(--graphite);
  max-width: none; margin: 0;
  background: var(--night); color: var(--fg);
  padding: var(--section) max(var(--margin), calc((100% - 1440px) / 2 + var(--margin)));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48);
  align-items: start;
}
.page-home .capability-chapter.chapter-digital { --fg: var(--night); --sub: var(--stone); --rule: var(--line); background: var(--bone); }
.page-home .capability-chapter > .campaign-label {
  grid-column: 1 / -1; color: var(--fg);
  padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--fg);
}
.page-home .chapter-layout {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--gutter); row-gap: var(--s-32);
  align-items: start;
}
.page-home .chapter-title {
  grid-column: 1 / span 6; grid-row: 1;
  font-size: var(--display-l); line-height: 1; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase;
}
.page-home .chapter-intro { grid-column: 1 / span 5; grid-row: 2; display: flex; flex-direction: column; gap: var(--s-24); }
.page-home .chapter-intro p { font-size: var(--lead); line-height: 1.58; }
.page-home .chapter-scope {
  grid-column: 8 / span 5; grid-row: 1 / span 3;
  display: flex; flex-direction: column; box-shadow: inset 0 -1px 0 var(--rule);
  counter-reset: scope;
}
.page-home .chapter-scope li {
  counter-increment: scope;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 0; align-items: baseline;
  padding: var(--s-16) 0; box-shadow: inset 0 1px 0 var(--rule);
}
.page-home .chapter-scope li::before {
  content: counter(scope, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.page-home .chapter-scope h4 { font-size: 17px; line-height: 24px; font-weight: 600; }
.page-home .chapter-scope p { grid-column: 2; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--sub); }

/* chapters with a founder photograph (marked .has-figure by the renderer): text on one side, the picture on the other */
.page-home .has-figure .chapter-layout { grid-column: 1 / span 6; grid-row: 2; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.page-home .has-figure .chapter-title { grid-column: 1 / -1; }
.page-home .has-figure .chapter-intro { grid-column: 1 / span 5; }
.page-home .has-figure .chapter-scope { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s-16); }
.page-home .chapter-figure { grid-column: 8 / span 5; grid-row: 2; display: flex; flex-direction: column; gap: var(--s-12); }
.page-home .chapter-media.has-figure .chapter-layout { grid-column: 8 / span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.page-home .chapter-media .chapter-figure { grid-column: 1 / span 6; }
.page-home .chapter-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.page-home .chapter-figure figcaption, .founders-figure figcaption { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.page-home .capabilities-more { padding-block: 0 var(--section); }
.page-home .capabilities-more .text-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--s-24) 0; box-shadow: inset 0 1px 0 var(--graphite), inset 0 -1px 0 var(--graphite); background: none; }
.page-home .capabilities-more .text-link::after { content: "\2192"; font-size: 18px; letter-spacing: 0; transition: transform 0.3s var(--ease); }
.page-home .capabilities-more .text-link:hover::after { transform: translateX(6px); }
.page-home .capabilities-more .text-link { color: var(--white); }

/* ---------------------------------------------------------------- founders */
.page-home .campaign-founders { background: var(--night); box-shadow: inset 0 1px 0 var(--graphite); }
.founders-grid {
  padding-block: var(--section);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48);
  align-items: stretch;
}
.founders-figure { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s-12); }
.founders-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.founders-copy { grid-column: 8 / span 5; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-48); }
.founders-intro { display: flex; flex-direction: column; gap: var(--s-24); }
.founders-intro .label { color: var(--mist); }
.founders-intro h2 .line-human { margin-top: var(--s-4); }
.founder-roles { display: flex; flex-direction: column; box-shadow: inset 0 -1px 0 var(--graphite); }
.founder-roles li { box-shadow: inset 0 1px 0 var(--graphite); }
.founder-roles a, .founder-roles .founder-row { display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-24) 0; }
.founder-name { font-size: var(--display-l); line-height: 1; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.founder-name.founder-together { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--accent-l); line-height: 0.9; letter-spacing: -0.01em; text-transform: none; }
.founder-role { font-size: 16px; line-height: 26px; color: var(--mist); }
/* profile links: the arrow sits at the end of the row, on the name's centre line */
.founder-roles a .founder-name { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); }
.founder-roles a .founder-name::after {
  content: "→"; font-family: var(--sans); font-size: 24px; line-height: 1; font-weight: 400; letter-spacing: 0;
  transform: translateX(0); transition: transform 0.35s var(--ease);
}
.founder-roles a:hover .founder-name::after,
.founder-roles a:focus-visible .founder-name::after { transform: translateX(6px); }

/* ---------------------------------------------------------------- the network */
.page-home .campaign-selected { --fg: var(--night); --sub: var(--stone); --rule: var(--line); --bg: var(--bone); background: var(--bone); color: var(--night); }
.page-home .campaign-selected .shell { padding-block: var(--section); display: flex; flex-direction: column; gap: var(--s-48); }
.page-home .selected-heading {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-24); align-items: end;
}
.page-home .selected-heading .label { grid-column: 1 / -1; padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--night); }
.page-home .selected-heading h2 { grid-column: 1 / span 7; }
.page-home .selected-heading .lead { grid-column: 8 / span 5; }
.page-home .selected-work-list { display: flex; flex-direction: column; box-shadow: inset 0 -1px 0 var(--line); }
.page-home .selected-work-list > li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline;
  padding: var(--s-32) 0; box-shadow: inset 0 1px 0 var(--line);
}
.page-home .selected-work-list > li > div { grid-column: span 6; display: flex; flex-direction: column; gap: var(--s-12); }
.page-home .selected-work-list > li > div:last-child { grid-column: 8 / span 5; }
.page-home .selected-work-list h3 { font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; }
.page-home .selected-kind { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--stone); }
.page-home .work-summary-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-24); }
.page-home .work-summary-list a { display: flex; flex-direction: column; gap: var(--s-16); height: 100%; padding: var(--s-24) 0 var(--s-32); box-shadow: inset 0 1px 0 var(--night); transition: box-shadow 0.3s var(--ease); }
.page-home .work-summary-list a:hover, .page-home .work-summary-list a:focus-visible { box-shadow: inset 0 3px 0 var(--night); }
.page-home .summary-count { font-size: var(--display-l); line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.page-home .summary-copy { display: flex; flex-direction: column; gap: var(--s-8); }
.page-home .summary-copy strong { display: flex; justify-content: space-between; gap: var(--s-12); font-size: 18px; line-height: 26px; font-weight: 700; }
.page-home .summary-copy strong::after { content: "\2192"; font-weight: 400; transition: transform 0.3s var(--ease); }
.page-home .work-summary-list a:hover .summary-copy strong::after { transform: translateX(6px); }
.page-home .summary-copy > span { font-size: 16px; line-height: 25px; color: var(--stone); }
.page-home .selected-description { font-size: 16px; line-height: 26px; }
.page-home .selected-work-list .campaign-text-link { margin-top: var(--s-12); }
.page-home .selected-work-list > li.network-feature { align-items: center; }
.page-home .network-preview { grid-column: 1 / span 6; display: block; overflow: hidden; background: var(--night); }
.page-home .network-preview img { width: 100%; height: auto; filter: grayscale(1); transition: transform 0.8s var(--ease), filter 0.6s var(--ease); }
.page-home .network-preview:hover img, .page-home .network-preview:focus-visible img { filter: none; }
.page-home .network-preview:hover img { transform: scale(1.02); }
.page-home .network-feature > div { grid-column: 8 / span 5 !important; }
.page-home .campaign-selected > .shell > .campaign-text-link { color: var(--night); }

/* ---------------------------------------------------------------- private events */
.page-home .campaign-events { position: relative; overflow: hidden; color: var(--white); background: var(--night); min-height: 900px; }
.events-photograph { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; }
.events-photograph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.events-photograph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 12, 0) 72%, rgba(11, 11, 12, 1) 100%);
}
.events-copy {
  position: relative; z-index: 1;
  min-height: 900px; padding-block: var(--section);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: center;
}
.events-copy > * { grid-column: 8 / span 5; }
.events-copy .label { color: var(--mist); }
.events-copy h2 { margin-top: var(--s-24); }
.events-copy h2 + p { margin-top: var(--s-32); font-size: var(--lead); line-height: 1.58; }
.page-home .campaign-white-link { margin-top: var(--s-48); }
.page-home .campaign-event-enquiry { margin-top: var(--s-32); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-8) var(--s-16); font-size: 15px; line-height: 24px; color: var(--mist); }
.page-home .campaign-event-enquiry .campaign-text-link { color: var(--white); }
.page-home .campaign-discretion { margin-top: var(--s-48); font-size: 15px; line-height: 22px; font-weight: 500; color: var(--mist); }
.page-home .campaign-standard { margin: var(--s-24) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-8); }
.page-home .campaign-standard li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--white); }

/* ---------------------------------------------------------------- work with us */
.page-home .campaign-access { background: var(--night); }
.access-grid {
  padding-block: var(--section);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-72);
  align-items: start;
}
.page-home .campaign-access-intro { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s-24); }
.page-home .campaign-access-intro .label { color: var(--mist); }
.page-home .campaign-access-intro h2 .line-human { font-size: var(--accent-l); line-height: 0.9; margin-top: var(--s-4); }
.page-home .channel-list { margin-top: var(--s-24); }
.page-home .access-partners { max-width: 30rem; font-size: 16px; line-height: 25px; color: var(--mist); }
.page-home .access-how { max-width: 30rem; font-size: 16px; line-height: 25px; color: var(--white); }
.page-home .access-partners a { color: var(--white); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.page-home .campaign-direct-email {
  width: fit-content;
  font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; padding-bottom: var(--s-4);
}
.page-home .campaign-access-form { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--s-32); }
.page-home .access-field { display: flex; flex-direction: column; gap: var(--s-8); }
.page-home .access-field label { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--mist); }
.page-home .access-field label span { font-weight: 400; }
.page-home .access-field input,
.page-home .access-field select,
.page-home .access-field textarea {
  width: 100%; min-height: 52px; margin: 0; padding: 13px 0; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--mist); background: transparent; color: var(--white);
  font: 400 16px/26px var(--sans); outline: none;
  transition: border-color 0.2s;
}
.page-home .access-field textarea { resize: vertical; min-height: 104px; }
.page-home .access-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: var(--s-32);
  background: linear-gradient(45deg, transparent 50%, var(--white) 50%) calc(100% - 13px) 50% / 6px 6px no-repeat,
              linear-gradient(135deg, var(--white) 50%, transparent 50%) calc(100% - 7px) 50% / 6px 6px no-repeat;
}
.page-home .access-field select option { background: var(--night); color: var(--white); }
.page-home .access-field input:focus,
.page-home .access-field select:focus,
.page-home .access-field textarea:focus { border-bottom-color: var(--white); }
.page-home .access-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-24); }
.page-home .access-field-pair[hidden] { display: none; }
.page-home .access-method { font-size: 15px; line-height: 24px; color: var(--mist); }
.page-home .access-method a { color: var(--white); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.page-home .access-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16) var(--s-24); }
.page-home .access-actions button[type="submit"]:disabled { background: var(--graphite); color: var(--mist); cursor: not-allowed; }
.page-home .access-actions button[type="submit"]:disabled::after { background: var(--mist); }
.page-home .access-actions button[type="submit"]:not(:disabled):hover { background: var(--bone); }
.page-home .access-actions button[data-copy-enquiry] {
  height: 52px; padding: 0 var(--s-24); border: 0; border-radius: 0; cursor: pointer;
  background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px var(--white);
  font: 600 16px/20px var(--sans);
}
.page-home .access-actions button[data-copy-enquiry]:disabled { color: var(--mist); box-shadow: inset 0 0 0 1px var(--graphite); cursor: not-allowed; }
.page-home .access-status { font-size: 15px; line-height: 24px; color: var(--white); min-height: 24px; }
.page-home .campaign-access-form noscript p { font-size: 15px; line-height: 24px; color: var(--mist); }

/* the portrait crop is served in portrait orientation; frame it with its own focal point */
@media (orientation: portrait) {
  .page-home .campaign-photograph img { object-position: var(--hero-mobile-position, 50% 30%); }
}

/* ---------------------------------------------------------------- small laptops and landscape tablets (up to 1024px): same grid, rebalanced */
@media (max-width: 64rem) {
  .founders-figure { grid-column: 1 / span 6; }
  .founders-copy { grid-column: 8 / span 5; }
  .events-photograph { width: 50%; }
  .events-copy > * { grid-column: 8 / span 5; }
}

/* ---------------------------------------------------------------- portrait tablets (up to 896px): one column, reading measure kept */
@media (max-width: 56rem) {
  .hero-statement .statement-title, .page-home .campaign-invitation,
  .brief-grid h2, .page-home .campaign-brief-copy,
  .page-home .selected-heading h2, .page-home .selected-heading .lead,
  .founders-figure, .founders-copy,
  .page-home .campaign-access-intro, .page-home .campaign-access-form { grid-column: 1 / -1; }
  .page-home .campaign-invitation, .page-home .campaign-brief-copy, .page-home .chapter-intro,
  .founders-intro .lead, .founder-roles, .page-home .selected-heading .lead,
  .events-copy > *, .page-home .campaign-access-form { max-width: 36rem; }

  .page-home .chapter-layout,
  .page-home .has-figure .chapter-layout,
  .page-home .chapter-media.has-figure .chapter-layout { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .page-home .chapter-title, .page-home .chapter-intro, .page-home .chapter-scope,
  .page-home .has-figure .chapter-title, .page-home .has-figure .chapter-intro, .page-home .has-figure .chapter-scope { grid-column: 1 / -1; grid-row: auto; }
  /* every chapter reads in one order: label, title, introduction, photograph, list */
  .page-home .has-figure .chapter-layout { display: contents; }
  .page-home .has-figure .chapter-title { grid-row: 2; }
  .page-home .has-figure .chapter-intro { grid-row: 3; }
  .page-home .chapter-figure, .page-home .chapter-media .chapter-figure { grid-column: 1 / span 8; grid-row: 4; }
  .page-home .has-figure .chapter-scope { grid-row: 5; margin-top: 0; }

  .page-home .work-summary-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-home .selected-work-list > li > div,
  .page-home .selected-work-list > li > div:last-child,
  .page-home .network-preview,
  .page-home .network-feature > div { grid-column: 1 / -1 !important; }
  .page-home .selected-work-list > li { row-gap: var(--s-16); }

  .page-home .campaign-events { min-height: 0; }
  .events-photograph { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 88svh; }
  .events-photograph::after { background: linear-gradient(180deg, rgba(11, 11, 12, 0) 55%, rgba(11, 11, 12, 1) 100%); }
  .events-copy { min-height: 0; padding-top: var(--s-48); }
  .events-copy > * { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- tablets and phones (up to 768px) */
@media (max-width: 48rem) {
  .hero-lede { flex-direction: column; align-items: flex-start; gap: var(--s-24); }
  .page-home .chapter-scope li { grid-template-columns: 40px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- phones (up to 640px) */
@media (max-width: 40rem) {
  .hero-stage { min-height: 600px; }
  .hero-masthead { padding-bottom: var(--s-48); }
  .page-home .campaign-masthead { margin-top: var(--s-24); }
  .hero-statement { row-gap: var(--s-32); }
  .page-home .campaign-request, .page-home .campaign-white-link, .page-home .access-actions button[type="submit"] { width: 100%; justify-content: center; }
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); width: 100%; }
  .page-home .hero-start { padding: 0 var(--s-12); }
  .page-home .work-summary-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .page-home .work-summary-list a { flex-direction: row; align-items: baseline; gap: var(--s-16); padding: var(--s-24) 0; }
  .page-home .summary-count { flex: 0 0 56px; font-size: var(--display-m); }
  .page-home .summary-copy { flex: 1; }
  .page-home .chapter-figure, .page-home .chapter-media .chapter-figure { grid-column: 1 / -1; }
  .events-photograph { aspect-ratio: 3 / 4; }
  .page-home .access-field-pair { grid-template-columns: 1fr; }
  .page-home .access-actions { flex-direction: column; align-items: stretch; }
  .page-home .access-actions button[data-copy-enquiry] { width: 100%; }
}

/* Round 2, after the first stranger test: "Where would you like to start?" routes each visitor from the second screen. */
.page-home .start-label { grid-column: 1 / -1; margin-top: var(--s-24); font-size: 15px; line-height: 24px; font-weight: 600; color: var(--fg); }
.page-home .start-list { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: calc(var(--s-32) * -1); }
.page-home .start-more { grid-column: 1 / -1; width: fit-content; }
.page-home .start-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-16); row-gap: var(--s-4); padding: var(--s-16) 0; box-shadow: inset 0 1px 0 var(--night); transition: box-shadow 0.25s var(--ease); }
.page-home .start-list li:last-child a { box-shadow: inset 0 1px 0 var(--night), inset 0 -1px 0 var(--night); }
.page-home .start-list a::after { content: "\2192"; grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 20px; line-height: 1; }
.page-home .start-list strong { font-size: 18px; line-height: 26px; font-weight: 700; }
.page-home .start-list span { font-size: 16px; line-height: 24px; color: var(--sub); }
.page-home .start-list a:hover { box-shadow: inset 0 2px 0 var(--night); }
.page-home .start-list li:last-child a:hover { box-shadow: inset 0 2px 0 var(--night), inset 0 -1px 0 var(--night); }
@media (min-width: 64rem) {
  .page-home .chapter-figure figcaption, .founders-figure figcaption { font-size: 15px; line-height: 22px; }
}
@media (min-width: 64rem) {
  .page-home .start-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
  .page-home .start-list a, .page-home .start-list li:last-child a { height: 100%; box-shadow: inset 0 1px 0 var(--night); padding: var(--s-16) 0 var(--s-24); }
  .page-home .start-list a:hover, .page-home .start-list li:last-child a:hover { box-shadow: inset 0 3px 0 var(--night); }
  .page-home .start-list a::after { grid-row: 1; align-self: start; }
}

/* ---------------------------------------------------------------- round 2c (26 Sep 2026): a page that rewards scrolling
   Owner, 12:58 PDT: "When people come on the website they need to have the URGE to scroll through".
   1. The offer strip peeks into the first screen under the hero and slides sideways as the page scrolls. It is
      scroll-linked and never starts by itself, so it needs no pause control (WCAG 2.2.2). It is hidden from assistive
      technology because every item on it is named in the chapters below.
   2. Section content rises into place as it enters the screen; the two photographs settle from a slight zoom.
   Both use CSS scroll-driven animation only. Without support, or with reduced motion, the page is simply static.
   Animated boxes sit in overflow: clip (not hidden) containers, so their view timeline follows the page scroll. */
.page-home { --ticker-h: 88px; --ticker-travel: 45vw; }
.page-home .hero-stage { height: calc(100vh - var(--ticker-h)); height: calc(100svh - var(--ticker-h)); }
.offer-ticker {
  height: var(--ticker-h); display: flex; align-items: center; overflow: hidden; overflow: clip;
  background: var(--bone); color: var(--night); position: relative;
}
/* Soft edges: the words run into the bone band instead of being cut off at the screen edge. */
.offer-ticker::before, .offer-ticker::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; pointer-events: none; }
.offer-ticker::before { left: 0; width: var(--margin); background: linear-gradient(90deg, var(--bone), rgba(244, 241, 236, 0)); }
.offer-ticker::after { right: 0; width: clamp(4rem, 14vw, 13rem); background: linear-gradient(270deg, var(--bone) 12%, rgba(244, 241, 236, 0)); }
.offer-track { display: flex; align-items: center; width: max-content; padding-left: var(--margin); }
.offer-track span {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: clamp(1.375rem, 2.78vw, 2.5rem); line-height: 1; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase;
}
.offer-track span::after { content: ""; flex-shrink: 0; width: 0.26em; height: 0.26em; margin-inline: 0.62em; background: var(--pink); }
.page-home .campaign-events { overflow: clip; }
.page-home .events-photograph { overflow: hidden; overflow: clip; }
.page-home .founders-figure picture { display: block; overflow: hidden; overflow: clip; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .offer-track { animation: tp-ticker linear both; animation-timeline: view(); animation-range: entry 100% exit 100%; }
    .page-home :is(
      .hero-statement .statement-title, .campaign-invitation,
      .brief-grid > .label, .brief-grid h2, .campaign-brief-copy, .start-label, .start-list li, .start-more,
      .capability-chapter > .campaign-label, .chapter-title, .chapter-intro, .chapter-scope li, .capabilities-more,
      .founders-intro > *, .founder-roles li,
      .selected-heading > *, .work-summary-list li, .campaign-selected .shell > .campaign-text-link,
      .events-copy > *, .campaign-access-intro > *
    ) {
      animation: tp-rise var(--ease) both; animation-timeline: view(); animation-range: entry 5% entry 85%;
    }
    .page-home :is(.founders-figure img, .events-photograph img) {
      animation: tp-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%;
    }
  }
}
@keyframes tp-ticker { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--ticker-travel))); } }
@keyframes tp-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes tp-settle { from { transform: scale(1.1); } to { transform: none; } }

@media (max-width: 40rem) {
  .page-home { --ticker-h: 60px; --ticker-travel: 120vw; }
  /* the two first-screen actions stay on one line each down to 344px, then stack */
  .page-home .hero-actions a { white-space: nowrap; padding-inline: var(--s-12); gap: var(--s-8); }
}
@media (max-width: 21.5rem) {
  .hero-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Round 2e (26 Sep 2026). Owner, 16:30: "TimPaemi should rank for events and TimPaemi, and PREMIUM VIP experiences in Pattaya".
   The first-screen sentence is the page heading (same look as before); the campaign line stays the big statement, as an h2. */
.hero-lede h1 {
  max-width: 38rem; margin: 0; font-size: clamp(1.125rem, 1.53vw, 1.375rem); line-height: 1.45; font-weight: 500;
  letter-spacing: 0; text-transform: none; text-wrap: pretty; text-shadow: 0 1px 12px rgba(11, 11, 12, 0.55);
}
main .hero-lede h1 { margin-left: 0; }
.hero-statement .statement-title { font-size: var(--display-xl); line-height: 0.958; }
.hero-statement .statement-title .line-human { font-size: var(--accent-xl); line-height: 0.885; }
/* the founders speak for themselves: a short signed note built only from promises the site already makes */
.founders-note { margin: 0; display: flex; flex-direction: column; gap: var(--s-16); }
.founders-note blockquote { margin: 0; }
.founders-note p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; }
.founders-note figcaption { display: flex; align-items: center; gap: var(--s-12); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--mist); }
.founders-note figcaption::before { content: ""; width: 24px; height: 1px; background: currentColor; }

/* Round 2f (26 Sep 2026). Owner, 17:15: "the most important is to present US in the first screen. What we can offer comes after."
   The heading opens with the two of them in the serif voice (the person behind the brand); the offer line follows. */
.hero-lede h1 .hero-name {
  display: block; margin-bottom: var(--s-12);
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.125rem, 3.4vw, 3.25rem); line-height: 1; letter-spacing: -0.01em;
}
.hero-lede h1 .hero-line { display: block; }
/* Round 2g (27 Sep 2026): the four verified profiles, on the homepage only (BRAND-POSITIONING.md, 18 Sep; owner: "Do everything necessary"). */
.founders-follow { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-24); row-gap: 0; margin: 0; font-size: 15px; line-height: 22px; }
.founders-follow-label { color: var(--mist); font-weight: 600; }
.founders-follow a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.founders-follow a:hover, .founders-follow a:focus-visible { text-decoration-color: var(--pink); }

/* on the smallest phones the heading stays below the faces; the start list is one scroll away (kept last so it wins the cascade) */
@media (max-width: 21.5rem) {
  .page-home .hero-start { display: none; }
  .hero-lede h1 { font-size: 1rem; line-height: 1.5; }
  .hero-lede h1 .hero-name { font-size: 1.875rem; }
}

/* ---------------------------------------------------------------- deluxe preview (28 Sep 2026): private events first */
/* Owner, 11:15 ICT: "lets make it really vip premium exclusive, all coisive. TRUSTLEVEL high." The events come first as a matched
   pair of illustrations (the yacht and the villa), then the standard of every event, then the founders. */
.page-home .campaign-experiences { position: relative; padding-block: var(--section); background: var(--night); color: var(--white); box-shadow: inset 0 1px 0 var(--graphite); }
.page-home .experiences-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-24); align-items: end; }
.page-home .experiences-head .label { grid-column: 1 / -1; color: var(--mist); }
.page-home .experiences-head h2 { grid-column: 1 / span 7; }
.page-home .experiences-head h2 .line-human { margin-top: var(--s-4); }
.page-home .experiences-lead { grid-column: 9 / span 4; font-size: var(--lead); line-height: 1.58; color: var(--white); }
.page-home .experience-cards { list-style: none; margin: var(--s-72) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-48) var(--gutter); }
.page-home .experience-card a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.page-home .experience-card picture { display: block; aspect-ratio: 5 / 4; overflow: hidden; overflow: clip; background: #121014; }
.page-home .experience-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.page-home .experience-card a:hover img { transform: scale(1.025); }
.page-home .experience-caption { display: flex; flex-direction: column; gap: var(--s-12); margin-top: var(--s-24); padding-top: var(--s-24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.page-home .experience-title { font-size: var(--title); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.page-home .experience-line { max-width: 30rem; font-size: 16px; line-height: 25px; color: var(--mist); }
.page-home .experience-more { width: fit-content; margin-top: var(--s-4); padding-bottom: 2px; font-size: 15px; line-height: 22px; font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.page-home .experience-card a:hover .experience-more { background-size: 40% 1px; }
.page-home .experiences-foot { margin-top: var(--s-72); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-24) var(--s-48); }
.page-home .experiences-note { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--mist); }

.page-home .home-standard { --fg: var(--night); --sub: var(--stone); --rule: var(--line); --bg: var(--bone); padding-block: var(--section); background: var(--bone); color: var(--night); }
.page-home .home-standard .label { color: var(--stone); }
.page-home .home-standard h2 { margin-top: var(--s-24); }
.page-home .home-standard h2 .line-human { margin-top: var(--s-4); }
.page-home .standard-grid { list-style: none; margin: var(--s-72) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-48) var(--gutter); }
.page-home .standard-grid li { padding-top: var(--s-24); box-shadow: inset 0 1px 0 var(--night); }
.page-home .standard-grid h3 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.005em; }
.page-home .standard-grid p { margin-top: var(--s-12); max-width: 26rem; font-size: 16px; line-height: 25px; color: var(--stone); }
.page-home .standard-company { margin-top: var(--s-72); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--stone); }

@media (max-width: 64rem) {
  .page-home .experiences-head h2 { grid-column: 1 / span 8; }
  .page-home .experiences-lead { grid-column: 1 / span 8; }
  .page-home .standard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 56rem) {
  .page-home .experiences-head > * { grid-column: 1 / -1; }
  .page-home .experience-cards { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-48); }
  .page-home .experiences-foot { margin-top: var(--s-48); }
  .page-home .experiences-foot .btn { width: 100%; }
  .page-home .standard-grid { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-48); gap: var(--s-32); }
  .page-home .standard-company { margin-top: var(--s-48); }
}

/* Illustrations on the homepage (29 September 2026): Our standard beside its heading, and one in each What we do chapter,
   in the chapter's picture place; the shared .scene-figure is in the system stylesheet. */
.page-home .standard-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); align-items: end; }
.page-home .standard-head__text { grid-column: 1 / span 6; }
.page-home .standard-figure { grid-column: 7 / span 6; }
.page-home .chapter-figure--illustration { display: block; }
.page-home .chapter-figure--illustration img { aspect-ratio: auto; }
.page-home .experience-card a { position: relative; }
@media (max-width: 56rem) {
  .page-home .standard-head__text, .page-home .standard-figure { grid-column: 1 / -1; }
  .page-home .standard-figure { max-width: 40rem; }
}