/* =============================================================================
   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: currentColor; 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);
}
/* 10 Oct 2026: the actions sit under the heading on every width; on a computer they sat on Paemi's shoulder (three blind reviews) */
.hero-lede { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-32); 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; }

/* ---------------------------------------------------------------- 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; }
/* 14 October 2026 (owner, 17:02 ICT): each chapter names its own service pages beneath its call to action. */
.page-home .chapter-pages { display: flex; flex-wrap: wrap; column-gap: var(--s-24); row-gap: 0; }
.page-home .chapter-pages a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; line-height: 22px; font-weight: 500; }
.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 { 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) 0;
  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; }
/* 10 Oct 2026: the master portrait (FOUNDATION §4 rule 2, one picture of the two) beside the copy on a computer; in one column it
   would repeat the first screen's photograph a few screens later, so it shows only in two columns */
@media (max-width: 56rem) { .founders-figure { display: none; } }
/* on a computer the portrait stays in view beside the founders' copy as it scrolls (no empty half under it) */
@media (min-width: 56.0625em) { .founders-figure { position: sticky; top: var(--s-96); align-self: start; } }
.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 .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); }
/* Our work (10 Oct 2026; owner, 13:42 ICT: "THIS SITE NEEDS TO _BLOW_ AWAY ON MOBILE AND DESKTOP"): four reworked cases as
   Work's own small cards, the same shape as work-cases-20261001.css (owner, 1 Oct: "WE HAVE TO BE CONSISTENT", "NO CHAOS"):
   one screen, the name, one line, the way to the case. Three in one row on a computer (no card alone beside an empty half),
   one column below, at a reading width. */
.page-home .case-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-72); }
.page-home .case-card__link { display: flex; flex-direction: column; gap: var(--s-16); color: inherit; text-decoration: none; }
.page-home .case-card__link picture { display: block; }
.page-home .case-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; box-shadow: 0 0 0 1px var(--rule); }
.page-home .case-card__text { display: flex; flex-direction: column; gap: var(--s-8); }
.page-home .case-card__name { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.page-home .case-card__line { max-width: 52ch; font-size: 17px; line-height: 1.5; color: var(--sub); }
.page-home .case-card__more { margin-top: var(--s-4); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.page-home .case-card__more::after { content: " \2192"; }
.page-home .case-card__link:hover .case-card__name, .page-home .case-card__link:focus-visible .case-card__name { text-decoration: underline; text-underline-offset: 0.1em; text-decoration-thickness: 2px; }
@media (max-width: 56rem) { .page-home .case-grid { grid-template-columns: minmax(0, 1fr); max-width: 40rem; row-gap: var(--s-48); } }
/* on a phone each card shows the site's own phone screen, large enough to read (the blind re-test of 10 Oct) */
@media (max-width: 40rem) { .page-home .case-card .has-phone img { aspect-ratio: 4 / 5; } }

/* ---------------------------------------------------------------- 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,
  .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 .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 .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 .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%; }
}

@media (min-width: 64rem) {
  .page-home .chapter-figure figcaption { font-size: 15px; line-height: 22px; }
}

/* ---------------------------------------------------------------- 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: currentColor; }
.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,
      .capability-chapter > .campaign-label, .chapter-title, .chapter-intro, .chapter-scope li, .capabilities-more,
      .founders-intro > *, .founder-roles li,
      .selected-heading > *, .home-cases > 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; }
/* 10 Oct 2026: with the actions under it, the heading keeps to the left of the two (it would otherwise run across Tim's shirt at 900 to 1100 px) */
@media (min-width: 48.0625em) { .hero-lede h1 { max-width: min(38rem, 44vw); } }
.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: currentColor; }

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

/* 14 October 2026, 18:24 ICT (owner, before the Meta ads: "the homepage's first screen on a phone must load fast and show our
   faces, TIMPAEMI and one clear contact (email first), with nothing else competing"): the hero's one action is an email,
   the address and the reply promise beneath it; on a phone the second link and the offer strip leave the first screen. */
.hero-reply { flex-basis: 100%; margin: 0; font-size: 15px; line-height: 22px; font-weight: 500; color: rgba(255, 255, 255, 0.82); }
@media (max-width: 40rem) {
  .page-home .hero-stage { height: 100vh; height: 100svh; }
  .hero-actions { grid-template-columns: minmax(0, 1fr); }
  .page-home .hero-start { display: none; }
}