/* Common Intent · site styles
   Newsreader (Production Type) and Inter (Rasmus Andersson), both under the SIL Open Font License, served from this site. */
@font-face { font-family: 'Newsreader 36'; src: url('../fonts/newsreader-36-400.woff') format('woff'); font-weight: 100 449; font-style: normal; font-display: block; }
@font-face { font-family: 'Newsreader 36'; src: url('../fonts/newsreader-36-500.woff') format('woff'); font-weight: 450 900; font-style: normal; font-display: block; }
@font-face { font-family: 'Newsreader 36'; src: url('../fonts/newsreader-36-italic-400.woff') format('woff'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; }

html { background: #2A1E1B; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #2A1E1B; color: #F6F1E8; font-family: 'Newsreader 36', Georgia, serif; }
a { color: #F6F1E8; }
a:hover { color: #F6F1E8; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the home page is one screen */
body.home { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.ci-home { display: contents; }
.m27-home { display: contents; }
.r27-h:focus, .m27-h:focus { outline: none; }
/* arriving on commonintent.com.au/#about and so on: no opening line, the section is already open */
.deep .ci-intro, .deep .m27-intro { display: none !important; }
.deep .ci-caption, .deep .ci-caption .ci-st span, .deep .m27-line .m27-st { animation: none !important; }

/* one layout at a time: the spread on landscape screens wider than 900px, the phone layout on phones, tablets held upright and narrow windows */
.view-phone { display: none; }
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .view-desktop { display: none !important; }
  .view-phone { display: block; }
}

/* ---------- the desktop spread (from the design canvas, Round 28) ---------- */
/* Common Intent · The Seam · shared styles for the homepage and Information page */
.ci-q { container-type: inline-size; width: 100%; height: 100vh; }
.ci {
  --cream: #F6F1E8;
  --choc: #2A1E1B;
  --serif: 'Sorts Mill Goudy', Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --edge: 32px;
  --fade: 450ms;
  position: relative; width: 100%; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
  background: var(--choc); color: var(--cream);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 18px rgba(20, 12, 10, .35);
}
.ci * { box-sizing: border-box; }
.ci a { color: inherit; text-decoration: none; }

/* image pairs */
.ci-pair { position: absolute; inset: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); pointer-events: none; }
.ci-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-pair::after {
  content: ''; position: absolute; inset: 0;
  /* a soft shade where the words sit: behind the nav, along the bottom and at each edge */
  background:
    radial-gradient(ellipse 24% 36% at 50% 50%, rgba(42, 30, 27, .5), rgba(42, 30, 27, 0)),
    linear-gradient(to top, rgba(42, 30, 27, .55), rgba(42, 30, 27, 0) 34%),
    linear-gradient(to right, rgba(42, 30, 27, .35), rgba(42, 30, 27, 0) 20%, rgba(42, 30, 27, 0) 80%, rgba(42, 30, 27, .35)),
    rgba(42, 30, 27, .1);
}

/* default: three client results crossfade */
.ci-cycle { opacity: 0; animation: ci-three 12s linear infinite; }
.ci-cycle.c1 { animation-delay: -1s; }
.ci-cycle.c2 { animation-delay: -9s; }
.ci-cycle.c3 { animation-delay: -5s; }
@keyframes ci-three { 0% { opacity: 0; } 4% { opacity: 1; } 33.33% { opacity: 1; } 37.33% { opacity: 0; } 100% { opacity: 0; } }

/* the name */
.ci-word { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; font-size: 30px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.ci-common { left: var(--edge); }
.ci-intent { right: var(--edge); }

/* nav on the seam */
.ci-nav ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.ci-item { display: grid; place-items: center; height: 42px; min-width: 200px; }
.ci-lab { grid-area: 1 / 1; position: relative; z-index: 2; transition: opacity 250ms ease; white-space: nowrap; }
.ci-lab.a { font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.ci-lab.b { font-family: var(--serif); font-style: italic; font-size: 25px; opacity: 0; }
.ci-item .ci-pair { z-index: 1; opacity: 0; transition: opacity var(--fade) ease; }
.ci-item .ci-line { opacity: 0; transition: opacity var(--fade) ease; }
.ci-item:hover .ci-pair, .ci-item:focus-visible .ci-pair,
.ci-item:hover .ci-line, .ci-item:focus-visible .ci-line { opacity: 1; }
.ci-item:hover .ci-lab.a, .ci-item:focus-visible .ci-lab.a { opacity: 0; }
.ci-item:hover .ci-lab.b, .ci-item:focus-visible .ci-lab.b { opacity: 1; }
.ci-item:focus-visible { outline: 1px solid var(--cream); outline-offset: 2px; }

/* forced states, for the static boards */
.ci[data-show="clients"] .it-clients .ci-pair, .ci[data-show="clients"] .it-clients .ci-line, .ci[data-show="clients"] .it-clients .ci-lab.b,
.ci[data-show="services"] .it-services .ci-pair, .ci[data-show="services"] .it-services .ci-line, .ci[data-show="services"] .it-services .ci-lab.b,
.ci[data-show="about"] .it-about .ci-pair, .ci[data-show="about"] .it-about .ci-line, .ci[data-show="about"] .it-about .ci-lab.b,
.ci[data-show="journal"] .it-journal .ci-pair, .ci[data-show="journal"] .it-journal .ci-line, .ci[data-show="journal"] .it-journal .ci-lab.b,
.ci[data-show="work"] .it-work .ci-pair, .ci[data-show="work"] .it-work .ci-line, .ci[data-show="work"] .it-work .ci-lab.b { opacity: 1; }
.ci[data-show="clients"] .it-clients .ci-lab.a, .ci[data-show="services"] .it-services .ci-lab.a, .ci[data-show="about"] .it-about .ci-lab.a,
.ci[data-show="journal"] .it-journal .ci-lab.a, .ci[data-show="work"] .it-work .ci-lab.a { opacity: 0; }
.ci:not([data-show="auto"]) .ci-caption { opacity: 0; }

/* bottom left line */
.ci-line, .ci-caption { position: absolute; left: var(--edge); bottom: var(--edge); z-index: 3; max-width: 520px; pointer-events: none; text-align: left; }
.ci-st { display: block; margin: 0 0 10px; font-family: var(--serif); font-size: 26px; line-height: 1.2; }
.ci-line small, .ci-caption small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.ci-caption { transition: opacity var(--fade) ease; }
.ci-nav:hover ~ .ci-caption, .ci-nav:focus-within ~ .ci-caption { opacity: 0; }
.ci-proof { display: grid; }
.ci-proof small { grid-area: 1 / 1; opacity: 0; animation: ci-three 12s linear infinite; }
.ci-proof .c1 { animation-delay: -1s; }
.ci-proof .c2 { animation-delay: -9s; }
.ci-proof .c3 { animation-delay: -5s; }

/* information link */
.ci-info { position: absolute; right: var(--edge); bottom: var(--edge); z-index: 3; display: flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--serif); font-style: italic; font-size: 22px; }
.ci-info svg { width: 30px; height: 20px; }
.ci-info:hover { opacity: .75; }

/* phone: halves stack, the nav plays itself */
@container (max-width: 700px) {
  .ci { --edge: 20px; }
  .ci-pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .ci-word { top: auto; transform: none; font-size: 24px; }
  .ci-common { top: 26px; }
  .ci-intent { bottom: 26px; }
  .ci-info { top: 14px; bottom: auto; font-size: 19px; }
  .ci-caption, .ci-cycle { display: none; }
  .ci-line { bottom: 68px; max-width: calc(100% - 40px); }
  .ci-st { font-size: 20px; }
  .ci-item { height: 46px; }
  .ci-item .ci-pair, .ci-item .ci-line, .ci-item .ci-lab.b { animation: ci-five 17.5s linear infinite; }
  .ci-item .ci-lab.a { animation: ci-five-off 17.5s linear infinite; }
  .ci-nav li:nth-child(1) .ci-item * { animation-delay: -0.5s; }
  .ci-nav li:nth-child(2) .ci-item * { animation-delay: -14.5s; }
  .ci-nav li:nth-child(3) .ci-item * { animation-delay: -11s; }
  .ci-nav li:nth-child(4) .ci-item * { animation-delay: -7.5s; }
  .ci-nav li:nth-child(5) .ci-item * { animation-delay: -4s; }
}
@keyframes ci-five { 0% { opacity: 0; } 3% { opacity: 1; } 20% { opacity: 1; } 23% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ci-five-off { 0% { opacity: 1; } 3% { opacity: 0; } 20% { opacity: 0; } 23% { opacity: 1; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ci *, .ci *::after { animation: none !important; transition: none !important; }
  .ci-cycle.c1, .ci-proof .c1 { opacity: 1; }
}

/* ---------- Information page ---------- */
.ci-ip {
  --cream: #F6F1E8;
  --serif: 'Sorts Mill Goudy', Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  position: relative; width: 100%; min-height: 100vh; box-sizing: border-box;
  padding: 32px; display: flex; flex-direction: column; gap: 56px;
  color: var(--cream); font-family: var(--serif); -webkit-font-smoothing: antialiased;
}
.ci-ip * { box-sizing: border-box; }
.ci-ip a { color: inherit; text-decoration: none; }
.ci-ip-lede { margin: 0; max-width: 1240px; font-size: 42px; line-height: 1.18; font-weight: 400; }
.ci-ip-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
.ci-ip-contact { grid-column: 4 / span 4; display: flex; flex-direction: column; gap: 6px; font-size: 26px; line-height: 1.3; }
.ci-ip-contact a:hover { opacity: .7; }
.ci-ip-news { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 14px; }
.ci-ip-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.ci-ip-news p { margin: 0; font-size: 26px; line-height: 1.25; }
.ci-ip-form { display: flex; align-items: center; border-bottom: 1px solid rgba(246, 241, 232, .5); }
.ci-ip-form input { flex: 1; min-width: 0; height: 48px; background: transparent; border: 0; color: var(--cream); font-family: var(--serif); font-size: 20px; outline: none; }
.ci-ip-form input::placeholder { color: rgba(246, 241, 232, .6); }
.ci-ip-form button { width: 48px; height: 48px; background: transparent; border: 0; color: var(--cream); font-size: 22px; cursor: pointer; }
.ci-ip-foot { margin-top: auto; display: flex; flex-direction: column; gap: 20px; }
.ci-ip-ack { margin: 0; max-width: 560px; font-family: var(--mono); font-size: 11px; line-height: 1.6; letter-spacing: .04em; opacity: .75; }
.ci-ip-bar { display: flex; justify-content: space-between; align-items: center; }
.ci-ip-mark { font-size: 30px; letter-spacing: .06em; text-transform: uppercase; }
.ci-ip-close { display: flex; align-items: center; gap: 10px; min-height: 44px; font-style: italic; font-size: 22px; }
.ci-ip-close svg { width: 30px; height: 20px; }
.ci-ipq { container-type: inline-size; width: 100%; }
@container (max-width: 700px) {
  .ci-ip { padding: 20px; gap: 40px; }
  .ci-ip-lede { font-size: 28px; }
  .ci-ip-contact, .ci-ip-news { grid-column: 1 / -1; }
  .ci-ip-contact { font-size: 21px; }
  .ci-ip-news p { font-size: 21px; }
  .ci-ip-mark { font-size: 22px; }
}

/* Common Intent · round 24 · Round 1 A, the Seam, reset in Newsreader 36pt and Inter
   Newsreader at its 36pt optical size for everything that was the serif. Inter for everything that was mono.
   .plain: no capitals and no italics, following the feedback since round 18. Without it: as first designed. */

.r24 .ci, .r24 .ci-ip { --serif: 'Newsreader 36', Georgia, serif; --mono: 'Inter', Arial, sans-serif; }

/* as first designed, in the new fonts */
.r24 .ci-lab.a { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .12em; }
.r24 .ci-line small, .r24 .ci-caption small, .r24 .ci-ip-label { font-weight: 500; letter-spacing: .1em; }
.r24 .ci-ip-ack { font-size: 12px; letter-spacing: 0; }
.r24 .ci-word, .r24 .ci-ip-mark { letter-spacing: .04em; }

/* plain: no capitals, no italics */
.r24.plain * { text-transform: none !important; font-style: normal !important; }
.r24.plain .ci-word { font-size: 34px; letter-spacing: -.005em; }
.r24.plain .ci-lab.a { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase !important; }
.r24.plain .ci-lab.b { font-size: 25px; letter-spacing: -.005em; }
.r24.plain .ci-line small, .r24.plain .ci-caption small { font-size: 13px; font-weight: 400; letter-spacing: 0; opacity: .9; }
.r24.plain .ci-ip-label { font-size: 13px; font-weight: 500; letter-spacing: 0; }
.r24.plain .ci-ip-mark { font-size: 32px; letter-spacing: -.005em; }
.r24.plain .ci-ip-ack { font-size: 13px; }

/* the logo stays the logo: the COMMON and INTENT wordmarks, not typeset words */
.r24 img.ci-logo { height: 24px; width: auto; filter: drop-shadow(0 1px 14px rgba(20, 12, 10, .4)); }
.r24 .ci-ip-mark { display: flex; align-items: center; gap: 12px; }
.r24 .ci-ip-mark img { height: 22px; width: auto; }
@container (max-width: 700px) {
  .r24 img.ci-logo { height: 20px; }
  .r24 .ci-ip-mark img { height: 18px; }
}

/* ---------- the opening line ---------- */
.r24 .ci-intro { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--choc); text-shadow: none; pointer-events: none;
  animation: r24lift 4.2s cubic-bezier(.7, 0, .2, 1) 1 both; }
.r24 .ci-intro p { margin: 0; max-width: 980px; padding: 0 32px; text-align: center; font-family: var(--serif); font-size: 50px; line-height: 1.12; letter-spacing: -.005em; }
.r24 .ci-intro p span { display: inline-block; opacity: 0; transform: translateY(14px); animation: r24word .8s cubic-bezier(.2, .7, .2, 1) 1 both; }
@keyframes r24word { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes r24lift { 0%, 72% { clip-path: inset(0 0 0 0); visibility: visible; } 100% { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.r24 .ci-intro.hold { animation: none; }
.r24 .ci-intro.hold p span { animation: none; opacity: 1; transform: none; }
.r24 .ci-intro.off { display: none; }
@media (prefers-reduced-motion: reduce) { .r24 .ci-intro { display: none; } }

/* ---------- the menu, off the centre ---------- */
/* bottom: four columns along the foot of the page, a rule over each, the hovered one drawn solid */
.r24 .ci[data-nav="bottom"] .ci-nav { align-self: end; justify-self: stretch; padding: 0 var(--edge) 18px; }
.r24 .ci[data-nav="bottom"] .ci-nav ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; text-align: left; }
.r24 .ci[data-nav="bottom"] .ci-item { justify-items: start; align-items: start; height: 60px; min-width: 0; padding-top: 14px; border-top: 1px solid rgba(246, 241, 232, .6); transition: border-color 250ms ease; }
.r24 .ci[data-nav="bottom"] .ci-item:hover, .r24 .ci[data-nav="bottom"] .ci-item:focus-visible { border-top-color: var(--cream); }
.r24 .ci[data-nav="bottom"] .ci-lab.b { margin-top: -6px; }
.r24 .ci[data-nav="bottom"] :is(.ci-line, .ci-caption) { bottom: 112px; }
/* top: one line across the top of the page, centred */
.r24 .ci[data-nav="top"] .ci-nav { align-self: start; justify-self: center; padding-top: 22px; }
.r24 .ci[data-nav="top"] .ci-nav ul { display: flex; gap: 48px; }
.r24 .ci[data-nav="top"] .ci-item { min-width: 0; height: 44px; }
.r24 .ci[data-nav="top"] .ci-pair::after {
  background:
    linear-gradient(to bottom, rgba(42, 30, 27, .55), rgba(42, 30, 27, 0) 24%),
    linear-gradient(to top, rgba(42, 30, 27, .55), rgba(42, 30, 27, 0) 34%),
    linear-gradient(to right, rgba(42, 30, 27, .35), rgba(42, 30, 27, 0) 20%, rgba(42, 30, 27, 0) 80%, rgba(42, 30, 27, .35)),
    rgba(42, 30, 27, .1); }
.r24 .ci[data-nav="bottom"] .ci-pair::after, .r24 .ci[data-nav="corner"] .ci-pair::after {
  background:
    linear-gradient(to top, rgba(42, 30, 27, .6), rgba(42, 30, 27, 0) 40%),
    linear-gradient(to right, rgba(42, 30, 27, .35), rgba(42, 30, 27, 0) 20%, rgba(42, 30, 27, 0) 80%, rgba(42, 30, 27, .35)),
    rgba(42, 30, 27, .1); }
/* corner: stacked in the bottom right, right aligned */
.r24 .ci[data-nav="corner"] .ci-nav { align-self: end; justify-self: end; padding: 0 var(--edge) 22px 0; }
.r24 .ci[data-nav="corner"] .ci-nav ul { text-align: right; }
.r24 .ci[data-nav="corner"] .ci-item { justify-items: end; min-width: 0; height: 38px; }
@container (max-width: 700px) {
  .r24 .ci[data-nav] .ci-nav { align-self: center; justify-self: center; padding: 0; }
  .r24 .ci[data-nav] .ci-nav ul { display: block; text-align: center; }
  .r24 .ci[data-nav] .ci-item { justify-items: center; align-items: center; height: 46px; padding: 0; border: 0; }
  .r24 .ci-intro p { font-size: 32px; }
}

/* ---------- the logo at the top, beside the top menu ---------- */
/* the logo sits on the menu's centre line: 32px down, 24px tall, centred on the 44px line of the words */
.r24 .ci[data-logo] .ci-word { top: var(--edge); transform: none; }
/* split: COMMON top left, INTENT top right, the menu between them on the seam */
/* together: the one-line wordmark top left, the menu to the right */
.r24 .ci[data-logo="together"] .ci-mark { left: var(--edge); }
.r24 .ci[data-logo="together"] .ci-nav { justify-self: end; padding-right: var(--edge); }
.r24 .ci[data-logo="together"] .ci-nav ul { gap: 40px; }
.r24 .ci[data-logo="together"] .ci-item { justify-items: end; }
/* centre: the name together at the top, broken exactly on the seam, the menu on a line beneath */
.r24 .ci[data-logo="centre"] .ci-common { left: auto; right: calc(50% + 7px); }
.r24 .ci[data-logo="centre"] .ci-intent { right: auto; left: calc(50% + 7px); }
.r24 .ci[data-logo="centre"] .ci-nav { padding-top: 74px; }
.r24 .ci[data-logo="centre"] .ci-pair::after {
  background:
    linear-gradient(to bottom, rgba(42, 30, 27, .6), rgba(42, 30, 27, 0) 28%),
    linear-gradient(to top, rgba(42, 30, 27, .55), rgba(42, 30, 27, 0) 34%),
    linear-gradient(to right, rgba(42, 30, 27, .35), rgba(42, 30, 27, 0) 20%, rgba(42, 30, 27, 0) 80%, rgba(42, 30, 27, .35)),
    rgba(42, 30, 27, .1); }
@container (max-width: 700px) {
  .r24 .ci[data-logo] .ci-word { top: 26px; }
  .r24 .ci[data-logo="split"] .ci-intent { top: auto; bottom: 26px; }
  .r24 .ci[data-logo] .ci-nav { padding-top: 0; }
}

/* ---------- About: the Information page, with the home page header ---------- */
/* the same line as the home page: the wordmark top left, the menu to the right, About drawn as the current page */
.r24 .ci-ip-head { display: flex; justify-content: space-between; align-items: center; height: 24px; margin-bottom: 40px; }
.r24 .ci-ip-home { display: block; line-height: 0; }
.r24 .ci-ip-home img { height: 24px; width: auto; }
.r24 .ci-ip-nav ul { display: flex; gap: 40px; margin: 0; padding: 0; list-style: none; }
.r24 .ci-ip-nav .ci-item { min-width: 0; height: 44px; justify-items: end; }
.r24 .ci-ip-nav .ci-item[aria-current] .ci-lab.a { opacity: 0; }
.r24 .ci-ip-nav .ci-item[aria-current] .ci-lab.b { opacity: 1; }
.r24 .ci-ip-bar { min-height: 44px; }
@container (max-width: 700px) {
  .r24 .ci-ip-head { flex-direction: column; align-items: flex-start; height: auto; gap: 14px; margin-bottom: 8px; }
  .r24 .ci-ip-nav ul { flex-wrap: wrap; gap: 4px 22px; }
  .r24 .ci-ip-nav .ci-item { justify-items: start; }
  .r24 .ci-ip-nav .ci-item * { animation: none !important; }
  .r24 .ci-ip-home img { height: 18px; }
}

/* the hover lines: a little wider, and no single word left on a line of its own */
.r24 .ci[data-logo="together"] :is(.ci-line, .ci-caption) { max-width: 580px; }
.r24 .ci-st { text-wrap: pretty; }

/* ---------- the photo test: two across or three across ---------- */
.r24 .ci[data-cols="3"] .ci-pair { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 700px) {
  .r24 .ci[data-cols="3"] .ci-pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); }
}
/* the new photos run lighter at the top: a deeper shade behind the name and the menu */
.r24 .ci[data-cols] .ci-pair::after {
  background:
    linear-gradient(to bottom, rgba(42, 30, 27, .62), rgba(42, 30, 27, .18) 14%, rgba(42, 30, 27, 0) 28%),
    linear-gradient(to top, rgba(42, 30, 27, .6), rgba(42, 30, 27, 0) 36%),
    linear-gradient(to right, rgba(42, 30, 27, .3), rgba(42, 30, 27, 0) 20%, rgba(42, 30, 27, 0) 80%, rgba(42, 30, 27, .3)),
    rgba(42, 30, 27, .08); }

/* ---------- round 25 · four ways to show the brand photos up the top ----------
   A brand's photos only sit beside each other. Four sets play in turn: Gentle Habits, LUI, Cooke Swim, Gentle Habits. */
.r24 .ci[data-hero] .ci-cycle { animation: r25four 20s linear infinite; }
.r24 .ci[data-hero] .ci-proof small { animation: r25four 20s linear infinite; }
.r24 .ci[data-hero] :is(.ci-cycle, .ci-proof small).s1 { animation-delay: -.6s; }
.r24 .ci[data-hero] :is(.ci-cycle, .ci-proof small).s2 { animation-delay: -15.6s; }
.r24 .ci[data-hero] :is(.ci-cycle, .ci-proof small).s3 { animation-delay: -10.6s; }
.r24 .ci[data-hero] :is(.ci-cycle, .ci-proof small).s4 { animation-delay: -5.6s; }
@keyframes r25four { 0% { opacity: 0; } 3% { opacity: 1; } 25% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .r24 .ci[data-hero] :is(.ci-cycle, .ci-proof small).s1 { opacity: 1; } }

/* 1 · edge to edge: the set fills the page, two or three across depending on the brand */
.r24 .ci[data-hero="full"] .ci-pair { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.r24 .ci[data-hero="full"] .ci-pair::after {
  background:
    linear-gradient(to bottom, rgba(42, 30, 27, .62), rgba(42, 30, 27, .18) 14%, rgba(42, 30, 27, 0) 28%),
    linear-gradient(to top, rgba(42, 30, 27, .6), rgba(42, 30, 27, 0) 36%),
    linear-gradient(to right, rgba(42, 30, 27, .3), rgba(42, 30, 27, 0) 20%, rgba(42, 30, 27, 0) 80%, rgba(42, 30, 27, .3)),
    rgba(42, 30, 27, .08); }

/* 2 · a framed row: the set sits on the brown like prints on a table, true to its shape, the words beneath */
.r24 .ci[data-hero="sheet"] .ci-pair { display: flex; justify-content: center; align-items: flex-start; gap: 12px; padding-top: 104px; background: var(--choc); }
.r24 .ci[data-hero="sheet"] .ci-pair img { flex: none; width: auto; height: min(calc(100% - 166px), calc((100cqw - 88px) / 3 * 4 / 3)); aspect-ratio: 3 / 4; }
.r24 .ci[data-hero="sheet"] .ci-pair::after { display: none; }

/* 3 · a moving filmstrip: every brand in one slow line, grouped and named, never mixed */
.r24 .ci[data-hero="strip"] :is(.ci-cycle, .ci-item .ci-pair, .ci-proof) { display: none; }
.r24 .r25-strip { position: absolute; left: 0; right: 0; top: 104px; height: calc(100% - 270px); overflow: hidden; }
.r24 .r25-track { display: flex; height: 100%; width: max-content; animation: r25strip 110s linear infinite; }
.r24 .r25-group { position: relative; flex: none; display: flex; gap: 10px; height: 100%; padding-bottom: 30px; margin-right: 64px; }
.r24 .r25-group img { flex: none; height: 100%; width: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.r24 .r25-group span { position: absolute; left: 0; bottom: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .12em; text-transform: uppercase !important; text-shadow: none; }
.r24 .ci[data-hero="strip"]:has(.ci-nav:hover) .r25-track { animation-play-state: paused; }
@keyframes r25strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .r24 .r25-track { animation: none; } }

/* 4 · a magazine spread: one large photo, two smaller ones set off it, the words in the space between */
.r24 .ci[data-hero="mosaic"] { --big-h: calc(var(--H, 100vh) - 136px); --col2: calc(var(--edge) * 2 + var(--big-h) * .75); }
.r24 .ci[data-hero="mosaic"] .ci-pair { display: block; background: var(--choc); }
.r24 .ci[data-hero="mosaic"] .ci-pair::after { display: none; }
.r24 .ci[data-hero="mosaic"] .ci-pair img { position: absolute; object-fit: cover; }
.r24 .ci[data-hero="mosaic"] .ci-pair img:nth-child(1) { left: var(--edge); top: 104px; height: var(--big-h); width: auto; aspect-ratio: 3 / 4; }
.r24 .ci[data-hero="mosaic"] .ci-pair img:nth-child(2) { left: var(--col2); top: 104px; width: 25%; height: auto; aspect-ratio: 3 / 4; }
.r24 .ci[data-hero="mosaic"] .ci-pair img:nth-child(3) { right: var(--edge); bottom: var(--edge); width: 27%; height: auto; aspect-ratio: 3 / 4; }
.r24 .ci[data-hero="mosaic"] :is(.ci-line, .ci-caption) { left: var(--col2); max-width: 25%; }

/* on the brown the words need no shadow */
.r24 .ci:is([data-hero="sheet"], [data-hero="strip"], [data-hero="mosaic"]) { text-shadow: none; }
.r24 .ci:is([data-hero="sheet"], [data-hero="strip"], [data-hero="mosaic"]) img.ci-logo { filter: none; }
/* the spread with pairs: the words take the empty third column, set larger, sitting on the same line as the foot of the big photo */
.r24 .ci[data-hero="mosaic"] { --col3: calc(var(--col2) + 25% + var(--edge)); }
.r24 .ci[data-hero="mosaic"] :is(.ci-line, .ci-caption) { left: var(--col3); right: var(--edge); bottom: var(--edge); max-width: 600px; }
.r24 .ci[data-hero="mosaic"] .ci-st { margin: 0; font-size: clamp(26px, 2.2vw, 36px); line-height: 1.18; text-wrap: pretty; }

/* ---------- round 25 · the locked spread ----------
   1 · the opening line stays: it sets itself word by word on the brown, then the brown lifts and the line settles into the third column.
   2 · the page waits for you: no timer. The first pair holds. Hover a menu word and its pair, its words and its Newsreader stay until you choose another.
   5 · every other pair turns around: the small photo moves to the left, low, and the big photo sits beside it. The words always live in the third column, centred in it. */
.r24 .ci[data-hold] { --col3c: calc(var(--edge) * 3 + (var(--H, 100vh) - 136px) * .75 + 25cqw); }

/* the words: centred in the third column, top to bottom and side to side */
.r24 .ci[data-hold] :is(.ci-line, .ci-caption) { left: var(--col3); right: var(--edge); top: calc(50% + 36px); bottom: auto; max-width: none; transform: translateY(-50%); }
.r24 .ci[data-hold] :is(.ci-line, .ci-caption) .ci-st { max-width: 460px; margin: 0 auto; }

/* 1 · the opening line */
.r24 .ci[data-hold] .ci-intro { animation: r25curtain 3.8s cubic-bezier(.7, 0, .2, 1) 1 both; }
@keyframes r25curtain { 0%, 62% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
.r24 .ci[data-hold] .ci-caption { z-index: 21; transform-origin: 50% 50%; animation: r25settle 3.8s cubic-bezier(.7, 0, .2, 1) 1 both; }
@keyframes r25settle {
  0%, 62% { transform: translate(calc(16px - var(--col3c) / 2), calc(-50% - 36px)) scale(1.45); }
  100% { transform: translate(0, -50%) scale(1); } }
.r24 .ci[data-hold] .ci-caption .ci-st span { display: inline-block; opacity: 0; transform: translateY(14px); animation: r24word .8s cubic-bezier(.2, .7, .2, 1) 1 both; }
.r24 .ci[data-hold]:has(.ci-intro.off) .ci-caption { animation: none; }
.r24 .ci[data-hold]:has(.ci-intro.hold) .ci-caption { animation: none; transform: translate(calc(16px - var(--col3c) / 2), calc(-50% - 36px)) scale(1.45); }
.r24 .ci[data-hold]:has(.ci-intro:is(.off, .hold)) .ci-caption .ci-st span { animation: none; opacity: 1; transform: none; }
.r24 .ci[data-hold] .ci-intro.hold { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .r24 .ci[data-hold] .ci-caption { animation: none; }
  .r24 .ci[data-hold] .ci-caption .ci-st span { animation: none; opacity: 1; transform: none; }
}

/* 2 · the page waits for you
   The resting values are a hair off 0 and 1 so that hovering the next word always changes the value and starts a fresh fade.
   Words never cross-fade: the old words go at once, the new words come in a beat later. Only the photos cross-fade. */
.r24 .ci[data-hold] .ci-cycle { animation: none; opacity: 0; }
.r24 .ci[data-hold] .ci-cycle.s1 { opacity: 1; }
.r24 .ci[data-hold] .ci-item :is(.ci-pair, .ci-line, .ci-lab) { transition: opacity var(--fade) ease 99999s; }
.r24 .ci[data-hold] .ci-item :is(.ci-pair, .ci-line, .ci-lab.b) { opacity: .001; }
.r24 .ci[data-hold] .ci-item .ci-lab.a { opacity: .999; }
.r24 .ci[data-hold] .ci-item:is(:hover, :focus-visible) :is(.ci-pair, .ci-lab.b) { opacity: 1; transition-delay: 0s; }
.r24 .ci[data-hold] .ci-item:is(:hover, :focus-visible) .ci-lab.a { opacity: 0; transition-delay: 0s; }
.r24 .ci[data-hold] .ci-item:is(:hover, :focus-visible) .ci-line { opacity: 1; transition: opacity 320ms ease 140ms; }
.r24 .ci[data-hold]:has(.ci-item:hover, .ci-item:focus-visible) .ci-item:not(:hover, :focus-visible) :is(.ci-pair, .ci-lab.b) { opacity: 0; transition-delay: 0s; }
.r24 .ci[data-hold]:has(.ci-item:hover, .ci-item:focus-visible) .ci-item:not(:hover, :focus-visible) .ci-lab.a { opacity: 1; transition-delay: 0s; }
.r24 .ci[data-hold]:has(.ci-item:hover, .ci-item:focus-visible) .ci-item:not(:hover, :focus-visible) .ci-line { opacity: 0; transition: none; }
.r24 .ci[data-hold] .ci-caption { transition: opacity var(--fade) ease 99999s; }
.r24 .ci[data-hold] .ci-nav:is(:hover, :focus-within) ~ .ci-caption { opacity: 0; transition: none; }

/* 5 · every other pair turns around */
.r24 .ci[data-hold] .ci-pair[data-flip] img:nth-child(1) { left: calc(var(--edge) * 2 + 25%); }
.r24 .ci[data-hold] .ci-pair[data-flip] img:nth-child(2) { left: var(--edge); top: auto; bottom: var(--edge); }

/* ---------- round 25 · the opening line, typed ----------
   Each letter appears on its own beat with a thin caret on the newest letter. The caret blinks a few times at the end, then goes. */
.r24 .ci[data-open] .ci-caption { animation: none; }
.r24 .ci[data-open] .ci-caption .ci-st span { display: inline; transform: none; opacity: 1; animation: none; }
.r24 .ci[data-open] .r25-type span.c { position: relative; opacity: 0; animation: r25ch 1ms steps(1) forwards; }
@keyframes r25ch { to { opacity: 1; } }
.r24 .ci[data-open] .r25-type span.c::after { content: ''; position: absolute; top: .12em; right: -.08em; width: .055em; height: 1em; background: currentColor; opacity: 0;
  animation: r25caret var(--d) steps(1) forwards; animation-delay: inherit; }
.r24 .ci[data-open] .r25-type span.c.last::after { animation: r25blink 1s steps(1) 3 forwards; animation-delay: inherit; }
@keyframes r25caret { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes r25blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }

/* A · lands on the site: the photos are there at once, and the line types itself in the third column, broken evenly over two lines */
.r24 .ci[data-open="type"] .ci-caption .ci-st { text-wrap: balance; }

/* B · the opening slide: one line, typed on the brown. The line drifts right and goes, then the brown lifts, then the line lands in the third column.
   One thing at a time, so the line is never seen over the photos. */
.r24 .ci[data-open="slide"] .ci-intro { animation: r25curtainB 4.7s cubic-bezier(.6, 0, .2, 1) 1 both; }
@keyframes r25curtainB { 0%, 85% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
.r24 .ci[data-open="slide"] .ci-intro p { max-width: none; white-space: nowrap; font-size: clamp(30px, 3.6vw, 58px); animation: r25drift 4.1s cubic-bezier(.5, 0, .5, 1) 1 both; }
@keyframes r25drift { 0%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(40px); } }
.r24 .ci[data-open="slide"] .ci-caption .ci-st { text-wrap: balance; animation: r25land 5.3s cubic-bezier(.2, .7, .2, 1) 1 both; }
@keyframes r25land { 0%, 87% { opacity: 0; transform: translateX(-18px); } 100% { opacity: 1; transform: none; } }
.r24 .ci[data-open="slide"] .ci-intro.hold, .r24 .ci[data-open="slide"] .ci-intro.hold p { animation: none; }
.r24 .ci[data-open="slide"] .ci-intro.hold span.c { animation: none; opacity: 1; }
.r24 .ci[data-open="slide"] .ci-intro.hold span.c::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .r24 .ci[data-open] .r25-type span.c { animation: none; opacity: 1; }
  .r24 .ci[data-open] .r25-type span.c::after { display: none; }
  .r24 .ci[data-open="slide"] .ci-caption .ci-st { animation: none; }
}

/* ---------- round 26 · Work with us gets a way in ----------
   A square button under the Work with us words, held on screen with them, so you can reach it. It takes you to the contact form. */
.r24 .r26-cta { display: none; }
.r24 .ci[data-hold] .r26-cta {
  display: inline-flex; align-items: center; margin-top: 26px; padding: 15px 22px 14px; border: 1px solid var(--cream);
  font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .12em; text-transform: uppercase !important; text-shadow: none;
  pointer-events: auto; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, visibility 0s 99999s; visibility: collapse; }
.r24 .ci[data-hold] :is(.ci-line, .ci-caption) .r26-cta { margin-left: max(0px, calc((100% - 460px) / 2)); }
.r24 .ci[data-hold] .ci-item:is(:hover, :focus-visible) .r26-cta { visibility: visible; transition-delay: 0s, 0s, 0s; }
.r24 .ci[data-hold]:has(.ci-item:hover, .ci-item:focus-visible) .ci-item:not(:hover, :focus-visible) .r26-cta { visibility: hidden; transition: none; }
.r24 .ci[data-hold] .r26-cta:hover { background: var(--cream); color: var(--choc); }

/* ---------- round 26 · the contact form ---------- */
.r24 .r26-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 34px; }
.r24 .r26-form .f { grid-column: span 6; display: flex; flex-direction: column; gap: 8px; }
.r24 .r26-form .f.wide { grid-column: 1 / -1; }
.r24 .r26-form .f > span, .r24 .r26-form legend { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0; opacity: .85; }
.r24 .r26-form input:not([type="checkbox"]), .r24 .r26-form textarea {
  width: 100%; padding: 6px 0 10px; background: transparent; border: 0; border-bottom: 1px solid rgba(246, 241, 232, .5); border-radius: 0;
  color: var(--cream); font-family: var(--serif); font-size: 24px; line-height: 1.3; outline: none; resize: vertical; }
.r24 .r26-form :is(input, textarea):focus { border-bottom-color: var(--cream); }
.r24 .r26-form ::placeholder { color: rgba(246, 241, 232, .45); }
.r24 .r26-form fieldset { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.r24 .r26-form legend { padding: 0; margin-bottom: 14px; }
.r24 .r26-chip { position: relative; }
.r24 .r26-chip input { position: absolute; opacity: 0; pointer-events: none; }
.r24 .r26-chip span { display: inline-block; padding: 12px 16px 11px; border: 1px solid rgba(246, 241, 232, .55); font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .12em; text-transform: uppercase !important; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.r24 .r26-chip input:checked + span { background: var(--cream); color: var(--choc); border-color: var(--cream); }
.r24 .r26-chip input:focus-visible + span { outline: 1px solid var(--cream); outline-offset: 3px; }
.r24 .r26-send { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; }
.r24 .r26-btn { padding: 17px 30px 16px; background: var(--cream); color: var(--choc); border: 1px solid var(--cream); border-radius: 0; font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .12em; text-transform: uppercase !important; cursor: pointer; }
.r24 .r26-btn:hover { background: transparent; color: var(--cream); }
.r24 .r26-send p { margin: 0; font-family: var(--mono); font-size: 13px; opacity: .85; }
.r24 .r26-send p a { text-decoration: underline; text-underline-offset: 3px; }
.r24 .ci-ip.r26-contact .ci-ip-lede { max-width: 980px; }
.r24 .ci-ip.r26-contact .r26-sub { margin: -36px 0 0; max-width: 620px; font-size: 22px; line-height: 1.4; opacity: .85; }
@container (max-width: 700px) {
  .r24 .r26-form .f { grid-column: 1 / -1; }
  .r24 .r26-send { flex-direction: column; align-items: flex-start; gap: 16px; }
}
/* the About and contact pages need the brown as a colour too, for the filled buttons */
.r24 .ci-ip { --choc: #2A1E1B; }
/* the standing line only steps aside when a menu word is actually chosen, not when the pointer is in the gap between two words */
.r24 .ci[data-hold] .ci-nav:is(:hover, :focus-within) ~ .ci-caption { opacity: 1; transition: opacity var(--fade) ease 99999s; }
.r24 .ci[data-hold]:has(.ci-item:hover, .ci-item:focus-visible) .ci-caption { opacity: 0; transition: none; }

/* ---------- round 26b ----------
   The typed line rests finished: if a viewer shows the board without running its animations, every letter is there.
   When the animation runs, each letter starts hidden and appears on its beat, exactly as before. */
.r24 .ci[data-open] .r25-type span.c { opacity: 1; animation: r25chIn 1ms steps(1) both; }
@keyframes r25chIn { from { opacity: 0; } to { opacity: 1; } }
/* the opening slide rests lifted, for the same reason; it only covers the page while it is playing */
.r24 .ci[data-open="slide"] .ci-intro { opacity: 0; visibility: hidden; }
@keyframes r25curtainB { 0%, 85% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
.r24 .ci[data-open="slide"] .ci-intro.hold { opacity: 1; visibility: visible; }

/* the buttons, inverted: an outline on the brown, never a white block. Hover firms the line and nudges the arrow. */
.r24 .ci[data-hold] .r26-cta { gap: 12px; border-color: rgba(246, 241, 232, .55); }
.r24 .ci[data-hold] .r26-cta:hover { background: transparent; color: var(--cream); border-color: var(--cream); }
.r24 .r26-arrow { display: inline-block; transition: transform 200ms ease; }
.r24 .r26-cta:hover .r26-arrow { transform: translateX(4px); }
.r24 .r26-btn { background: transparent; color: var(--cream); border-color: rgba(246, 241, 232, .55); display: inline-flex; align-items: center; gap: 12px; }
.r24 .r26-btn:hover { background: transparent; color: var(--cream); border-color: var(--cream); }
.r24 .r26-btn:hover .r26-arrow { transform: translateX(4px); }

/* ---------- round 26 · the home page, long ----------
   The first screen stays exactly as it is. Below it, the four menu words become four sections, each one screen tall,
   in the same spread: a big photo, a small one, the words in the third column. The pair turns around on every other section.
   On the canvas the screen is set at 900px; on the live site --H becomes 100svh. */
.r24.long { --H: 900px; --cream: #F6F1E8; --choc: #2A1E1B; --serif: 'Newsreader 36', Georgia, serif; --mono: 'Inter', Arial, sans-serif; --edge: 32px;
  height: auto; background: var(--choc); }
.r24.long .ci { height: var(--H); }
.r24 .r26-secs { color: var(--cream); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
.r24 .r26-sec { position: relative; height: var(--H); --big-h: calc(var(--H) - 128px); --col2: calc(var(--edge) * 2 + var(--big-h) * .75); --col3: calc(var(--col2) + 25% + var(--edge)); }
.r24 .r26-sec img { position: absolute; display: block; object-fit: cover; }
.r24 .r26-sec .big { left: var(--edge); top: 64px; height: var(--big-h); width: auto; aspect-ratio: 3 / 4; }
.r24 .r26-sec .small { left: var(--col2); top: 64px; width: 25%; height: auto; aspect-ratio: 3 / 4; }
.r24 .r26-sec.flip .big { left: calc(var(--edge) * 2 + 25%); }
.r24 .r26-sec.flip .small { left: var(--edge); top: auto; bottom: 64px; }
.r24 .r26-copy { position: absolute; left: var(--col3); right: var(--edge); top: 50%; transform: translateY(-50%); }
.r24 .r26-in { max-width: 460px; margin: 0 auto; }
.r24 .r26-label { margin: 0 0 22px; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .12em; text-transform: uppercase !important; opacity: .8; }
.r24 .r26-lede { margin: 0 0 30px; font-size: clamp(26px, 2.2vw, 36px); line-height: 1.18; text-wrap: pretty; }
.r24 .r26-body { margin: 0 0 28px; font-family: var(--mono); font-size: 15px; line-height: 1.6; opacity: .9; }
.r24 .r26-list { list-style: none; margin: 0; padding: 0; }
.r24 .r26-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; align-items: baseline; padding: 11px 0 10px; border-top: 1px solid rgba(246, 241, 232, .22); }
.r24 .r26-list li:last-child { border-bottom: 1px solid rgba(246, 241, 232, .22); }
.r24 .r26-list .n { font-size: 19px; line-height: 1.2; }
.r24 .r26-list .m { font-family: var(--mono); font-size: 12px; opacity: .7; text-align: right; }
.r24 .r26-list .r { grid-column: 1 / -1; font-family: var(--mono); font-size: 13px; line-height: 1.45; opacity: .9; }
.r24 .r26-list.services li { grid-template-columns: minmax(0, 1fr); }
.r24 .r26-list .h { font-family: var(--mono); font-size: 13px; line-height: 1.45; opacity: .78; }
.r24 .r26-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(246, 241, 232, .55);
  font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .12em; text-transform: uppercase !important; }
.r24 .r26-link:hover { border-bottom-color: var(--cream); }
.r24 .r26-link:hover .r26-arrow { transform: translateX(4px); }
.r24 .r26-secs a.r26-btn { text-decoration: none; }
.r24 .r26-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; height: 260px; box-sizing: border-box; padding: 0 var(--edge) var(--edge); border-top: 1px solid rgba(246, 241, 232, .14); margin: 0 var(--edge); padding-left: 0; padding-right: 0; }
.r24 .r26-foot .ci-ip-ack { margin: 0; max-width: 560px; font-family: var(--mono); font-size: 13px; line-height: 1.6; opacity: .75; }
.r24 .r26-foot ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase !important; }
@container (max-width: 700px) {
  .r24.long .ci { height: 100svh; }
  .r24 .r26-sec { height: auto; display: flex; flex-direction: column; gap: 12px; padding: 48px 20px; }
  .r24 .r26-sec img, .r24 .r26-copy { position: static; transform: none; }
  .r24 .r26-sec .big, .r24 .r26-sec .small { width: 100%; height: auto; }
  .r24 .r26-sec .small { width: 60%; }
  .r24 .r26-copy { margin-top: 20px; }
  .r24 .r26-foot { flex-direction: column; align-items: flex-start; height: auto; padding: 40px 0 24px; }
}
.r24 .r26-secs a { color: inherit; text-decoration: none; }

/* ---------- round 27 · the home page stays one screen; each menu word opens its own section ----------
   The sections are written from the homepage copy document. Each has an address (#p-clients and so on), so it can be linked to,
   and Close takes you back to the spread exactly as you left it. Two ways to open:
   spread · the section opens beside its photo: the big photo stays, the section takes the rest of the page.
   page   · the section rises as a page of its own, set like About. */
.r24 .r27-panel { position: absolute; z-index: 6; top: 88px; bottom: 0; right: 0; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  background: var(--choc); color: var(--cream); text-shadow: none; visibility: hidden; opacity: 0;
  transition: opacity 420ms ease, transform 560ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 560ms; }
.r24 .r27-panel:target { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.r24 .ci:is([data-force], [data-po="clients"], [data-po="services"], [data-po="about"]) :is(.ci-line, .ci-caption) { visibility: hidden; }
.r24 .r27-in { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 0 56px; scrollbar-width: thin; scrollbar-color: rgba(246, 241, 232, .3) transparent; }
.r24 .r27-close { position: absolute; z-index: 2; top: 16px; right: var(--edge); display: flex; align-items: center; gap: 10px; min-height: 24px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase !important; }
.r24 .r27-close span { font-family: var(--serif); font-size: 22px; letter-spacing: 0; line-height: 1; }
.r24 .r27-close:hover { opacity: .7; }
.r24 .r27-label { margin: 0 0 22px; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase !important; opacity: .8; }
.r24 .r27-h { margin: 0 0 22px; font-weight: 400; font-size: 38px; line-height: 1.12; letter-spacing: -.005em; text-wrap: pretty; }
.r24 .r27-h3 { margin: 0 0 16px; font-weight: 400; font-size: 26px; line-height: 1.2; text-wrap: pretty; }
.r24 .r27-p { margin: 0 0 22px; max-width: 620px; font-family: var(--mono); font-size: 15px; line-height: 1.65; opacity: .92; }
.r24 .r27-in .r26-btn { margin-top: 8px; text-decoration: none; }
/* clients */
.r24 .r27-clients { list-style: none; margin: 12px 0 0; padding: 0; }
.r24 .r27-clients li { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr) minmax(0, 1.5fr); column-gap: 20px; align-items: baseline;
  padding: 13px 0 12px; border-top: 1px solid rgba(246, 241, 232, .22); }
.r24 .r27-clients li:last-child { border-bottom: 1px solid rgba(246, 241, 232, .22); }
.r24 .r27-clients .n { font-size: 21px; line-height: 1.2; }
.r24 .r27-clients .m, .r24 .r27-clients .r { font-family: var(--mono); font-size: 13px; line-height: 1.45; }
.r24 .r27-clients .m { opacity: .7; }
/* services: one line each, open for the whole story */
.r24 .r27-acc { margin-top: 8px; }
.r24 .r27-acc details { border-top: 1px solid rgba(246, 241, 232, .22); }
.r24 .r27-acc details:last-child { border-bottom: 1px solid rgba(246, 241, 232, .22); }
.r24 .r27-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0 13px; cursor: pointer; list-style: none; font-size: 22px; line-height: 1.2; }
.r24 .r27-acc summary::-webkit-details-marker { display: none; }
.r24 .r27-acc summary i { position: relative; flex: none; width: 14px; height: 14px; }
.r24 .r27-acc summary i::before, .r24 .r27-acc summary i::after { content: ''; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1px; background: currentColor; transition: transform 250ms ease; }
.r24 .r27-acc summary i::after { transform: rotate(90deg); }
.r24 .r27-acc details[open] summary i::after { transform: rotate(0deg); }
.r24 .r27-acc details p { margin: 0 0 14px; max-width: 620px; font-family: var(--mono); font-size: 15px; line-height: 1.65; opacity: .92; }
.r24 .r27-acc details p:last-child { margin-bottom: 20px; }
/* about: the third-person description, small, for people and for search */
.r24 .r27-c { margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(246, 241, 232, .22); }
.r24 .r27-c p { margin: 0 0 12px; max-width: 760px; font-family: var(--mono); font-size: 13px; line-height: 1.6; opacity: .75; }
.r24 .r27-c .r27-small-h { margin-bottom: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase !important; font-size: 12px; opacity: .8; }

/* spread · beside its photo. The big photo of the chosen pair stays on the left; a turned pair turns back so its big photo is the one you see. */
.r24 .ci[data-panel="spread"] .r27-panel { left: var(--col2); padding-right: var(--edge); transform: translateX(48px); }
.r24 .ci[data-panel="spread"] .r27-in { padding-right: 8px; }
.r24 .ci[data-panel="spread"] .r27-in > * { max-width: 700px; }
.r24 .ci[data-panel="spread"] .r27-b, .r24 .ci[data-panel="spread"] .r27-a + .r27-b { margin-top: 30px; }
.r24 .ci[data-panel="spread"] .ci-pair[data-flip] img { transition: left 560ms cubic-bezier(.2, .7, .2, 1); }
.r24 .ci[data-panel="spread"]:is([data-force], [data-po="clients"], [data-po="services"], [data-po="about"]) .ci-pair[data-flip] img:nth-child(1) { left: var(--edge); }
.r24 .ci[data-panel="spread"]:is([data-force], [data-po="clients"], [data-po="services"], [data-po="about"]) .ci-pair[data-flip] img:nth-child(2) { left: var(--col2); top: 104px; bottom: auto; }

/* page · a page of its own, set like About: a large first line, then the detail on a twelve-column grid */
.r24 .ci[data-panel="page"] .r27-panel { left: 0; padding: 0 var(--edge); transform: translateY(36px); }
.r24 .ci[data-panel="page"] .r27-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-content: start; }
.r24 .ci[data-panel="page"] .r27-in > * { grid-column: 1 / -1; }
.r24 .ci[data-panel="page"] .r27-h { grid-column: 1 / span 9; font-size: 46px; line-height: 1.1; margin-bottom: 40px; }
.r24 .ci[data-panel="page"] .r27-clients { grid-column: 4 / -1; margin-top: 0; }
.r24 .ci[data-panel="page"] .r27-a { grid-column: 1 / span 5; }
.r24 .ci[data-panel="page"] .r27-a .r27-h { font-size: 46px; }
.r24 .ci[data-panel="page"] .r27-b { grid-column: 7 / -1; }
.r24 .ci[data-panel="page"] #p-about .r27-b { padding-top: 6px; }
.r24 .ci[data-panel="page"] .r27-c { columns: 2; column-gap: 48px; }
.r24 .ci[data-panel="page"] .r27-c p { break-inside: avoid; }
.r24 .ci[data-panel="page"] .r27-c .r27-small-h { column-span: all; }
.r24 .ci[data-panel="page"] #p-work .r27-p, .r24 .ci[data-panel="page"] #p-work .r26-btn { grid-column: 1 / span 6; justify-self: start; }
@container (max-width: 700px) {
  .r24 .ci[data-panel] .r27-panel { left: 0; padding: 0 20px; }
  .r24 .ci[data-panel] .r27-in > * { grid-column: 1 / -1 !important; }
  .r24 .ci[data-panel] .r27-h { font-size: 30px; }
  .r24 .r27-clients li { grid-template-columns: 1fr auto; }
  .r24 .r27-clients .r { grid-column: 1 / -1; }
}
.r24 .ci[data-hold][data-show="clients"] .it-clients :is(.ci-pair, .ci-lab.b) { opacity: 1; }
.r24 .ci[data-hold][data-show="clients"] .it-clients .ci-lab.a { opacity: 0; }
.r24 .ci[data-force="clients"] #p-clients { visibility: visible; opacity: 1; transform: none; transition: none; }
.r24 .ci[data-hold][data-show="services"] .it-services :is(.ci-pair, .ci-lab.b) { opacity: 1; }
.r24 .ci[data-hold][data-show="services"] .it-services .ci-lab.a { opacity: 0; }
.r24 .ci[data-force="services"] #p-services { visibility: visible; opacity: 1; transform: none; transition: none; }
.r24 .ci[data-hold][data-show="about"] .it-about :is(.ci-pair, .ci-lab.b) { opacity: 1; }
.r24 .ci[data-hold][data-show="about"] .it-about .ci-lab.a { opacity: 0; }
.r24 .ci[data-force="about"] #p-about { visibility: visible; opacity: 1; transform: none; transition: none; }
.r24 .ci[data-hold][data-show="work"] .it-work :is(.ci-pair, .ci-lab.b) { opacity: 1; }
.r24 .ci[data-hold][data-show="work"] .it-work .ci-lab.a { opacity: 0; }
.r24 .ci[data-force="work"] #p-work { visibility: visible; opacity: 1; transform: none; transition: none; }
/* opening a section must never nudge the page sideways: clip rather than hide, so nothing can scroll the spread to reach the section */
.r24 .ci[data-panel] { overflow: clip; }
.r24 .ci[data-panel] .r27-panel:target { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }

/* round 27b · the canvas player handles in-page links itself, so the sections open from state, not from the address */
.r24 .ci[data-po="clients"] #p-clients, .r24 .ci[data-po="services"] #p-services, .r24 .ci[data-po="about"] #p-about { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.r24 button.ci-item, .r24 button.r27-close { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.r24 button.ci-item { text-shadow: inherit; }
.r24 button.r27-close { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; }

/* round 27c · the opening line, typed as one line: the text is uncovered in 38 steps, one caret rides the edge, then blinks three times.
   Without animation it simply rests finished. */
.r24 .ci[data-open="slide"] .ci-intro p span.r27-typer { position: relative; display: inline-block; opacity: 1; transform: none; animation: none; }
.r24 .ci[data-open="slide"] .ci-intro p span.r27-typer > span.t { display: inline-block; opacity: 1; transform: none; clip-path: inset(0 0 0 0);
  animation: r27type 2.3s steps(38, end) .45s both; }
.r24 .ci[data-open="slide"] .ci-intro p span.r27-typer::after { content: ''; position: absolute; top: .16em; left: 0; width: .055em; height: 1em; background: currentColor; opacity: 0;
  animation: r27caret 2.3s steps(38, end) .45s both, r27blink 1s steps(1) 2.8s 3 forwards; }
@keyframes r27type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes r27caret { from { left: 0; opacity: 1; } to { left: 100%; opacity: 1; } }
@keyframes r27blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .r24 .ci[data-open="slide"] .ci-intro p span.r27-typer > span.t, .r24 .ci[data-open="slide"] .ci-intro p span.r27-typer::after { animation: none; }
}

/* r28 · clients: one line, then every brand we have worked with, each with an arrow to its site. Two columns, read down. */
.r24 .r27-wl { margin: 4px 0 14px; font-family: var(--mono); font-size: 15px; line-height: 1.6; opacity: .8; }
.r24 .r27-clients.r27-cl { display: grid; grid-auto-flow: column; grid-template-rows: repeat(9, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; margin: 0; }
.r24 .r27-cl li { display: block; padding: 0; border-top: 1px solid rgba(246, 241, 232, .22); }
.r24 .r27-cl li:last-child, .r24 .r27-cl li:nth-child(9) { border-bottom: 1px solid rgba(246, 241, 232, .22); }
.r24 .r27-cl .r27-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 11px 0 10px; color: inherit; text-decoration: none; }
.r24 .r27-cl .n { font-size: 20px; line-height: 1.2; }
.r24 .r27-cl .go { font-family: var(--mono); font-size: 15px; line-height: 1; opacity: .75; transition: transform 250ms ease, opacity 250ms ease; }
.r24 .r27-cl a.r27-row:hover .go, .r24 .r27-cl a.r27-row:focus-visible .go { transform: translateX(4px); opacity: 1; }
.r24 .r27-cl div.r27-row .go { opacity: .45; }
.r24 .ci[data-panel="page"] .r27-wl { grid-column: 4 / -1; }
@container (max-width: 700px) {
  .r24 .r27-clients.r27-cl { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); }
  .r24 .r27-cl li:nth-child(9) { border-bottom: 0; }
}

/* r28 · about: the long letter, set for reading. Short lines in the serif, the three things as a numbered list, signed off by hand */
.r24 .r27-ab { max-width: 640px; }
.r24 .r27-ab .r27-p { max-width: none; }
.r24 .r27-ab-ls { margin: 0 0 26px; }
.r24 .r27-ab-ls p { margin: 0; font-size: 26px; line-height: 1.25; text-wrap: pretty; }
.r24 .r27-ab-q { margin: 32px 0; font-size: 26px; line-height: 1.25; text-wrap: pretty; }
.r24 .r27-ab-ol { list-style: none; counter-reset: ab; margin: 0 0 32px; padding: 0; }
.r24 .r27-ab-ol li { counter-increment: ab; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 13px 0 12px; border-top: 1px solid rgba(246, 241, 232, .22); font-size: 22px; line-height: 1.25; }
.r24 .r27-ab-ol li:last-child { border-bottom: 1px solid rgba(246, 241, 232, .22); }
.r24 .r27-ab-ol li::before { content: counter(ab); font-family: var(--mono); font-size: 13px; opacity: .7; }
.r24 .r27-ab .r27-h3 { margin: 44px 0 16px; }
.r24 .r27-ab-sign { margin: 34px 0 0; font-size: 30px; line-height: 1.2; font-style: italic; }
/* the button on to the next section */
.r24 .r27-nx { margin-top: 44px; }
.r24 .r27-in .r27-nx .r26-btn { margin-top: 0; }
.r24 .ci[data-panel="page"] #p-about .r27-ab { grid-column: 4 / span 6; }
.r24 .ci[data-panel="page"] #p-clients .r27-nx, .r24 .ci[data-panel="page"] #p-about .r27-nx { grid-column: 4 / -1; }
.r24 .ci[data-panel="page"] #p-services .r27-nx { grid-column: 7 / -1; }
/* with a section open, the photo and the menu word follow the section, so moving on with the button brings its pair with it */
.r24 .ci[data-hold]:is([data-po="clients"], [data-po="services"], [data-po="about"]) .ci-item :is(.ci-pair, .ci-lab.b) { opacity: 0 !important; transition: opacity var(--fade) ease !important; }
.r24 .ci[data-hold]:is([data-po="clients"], [data-po="services"], [data-po="about"]) .ci-item .ci-lab.a { opacity: 1 !important; transition: opacity var(--fade) ease !important; }
.r24 .ci[data-hold][data-po="clients"] .ci-item.it-clients :is(.ci-pair, .ci-lab.b),
.r24 .ci[data-hold][data-po="services"] .ci-item.it-services :is(.ci-pair, .ci-lab.b),
.r24 .ci[data-hold][data-po="about"] .ci-item.it-about :is(.ci-pair, .ci-lab.b) { opacity: 1 !important; }
.r24 .ci[data-hold][data-po="clients"] .ci-item.it-clients .ci-lab.a,
.r24 .ci[data-hold][data-po="services"] .ci-item.it-services .ci-lab.a,
.r24 .ci[data-hold][data-po="about"] .ci-item.it-about .ci-lab.a { opacity: 0 !important; }

/* ---------- the phone layout ---------- */
/* Common Intent · round 28 · the home page on a phone
   The same spread, the same pairs, the same typed opening. A phone has no hover, so the menu moves to a bar under the thumb:
   tap a word to see its pair and its words, tap it again (or the button under the words) to open its section.
   The section rises out of the menu bar as a sheet. Close, or tap another word, and the spread is as you left it. */

.m27q { width: 100%; height: 100vh; height: 100dvh; }
.m27 {
  --cream: #F6F1E8; --choc: #2A1E1B; --rule: rgba(246, 241, 232, .22);
  --serif: 'Newsreader 36', Georgia, serif; --mono: 'Inter', Arial, sans-serif;
  --edge: 20px; --top: 64px; --bar: 76px; --fade: 450ms; --gap: 10px;
  /* the photos take the full width, unless the screen is short: then they shrink so the words and the button always clear the menu bar */
  --sw: max(160px, min(100cqw - var(--edge) * 2, (100cqh - 390px) * 350 / 281));
  position: relative; width: 100%; height: 100%; overflow: clip;
  background: var(--choc); color: var(--cream); font-family: var(--serif);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.m27 * { box-sizing: border-box; }
.m27 a { color: inherit; text-decoration: none; }
.m27 button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.m27 :focus-visible { outline: 1px solid var(--cream); outline-offset: 4px; }

/* the logo, top left, always on top of the sheet */
.m27-logo { position: absolute; z-index: 7; top: 24px; left: var(--edge); height: 15px; width: auto; display: block; }

/* ---------- the spread: the big photo and its small partner, side by side ---------- */
.m27-stage { position: absolute; left: var(--edge); width: var(--sw); top: var(--top); aspect-ratio: 350 / 281; pointer-events: none; }
.m27-pair { position: absolute; inset: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1.64fr) minmax(0, 1fr); column-gap: var(--gap); align-items: start;
  opacity: 0; transition: opacity var(--fade) ease; }
.m27-pair img { grid-row: 1; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #3a2b27; }
.m27-pair img:nth-child(1) { grid-column: 1; }
.m27-pair img:nth-child(2) { grid-column: 2; }
/* every other pair turns around: the small photo goes left and low, the big photo sits beside it */
.m27-pair[data-flip] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.64fr); }
.m27-pair[data-flip] img:nth-child(1) { grid-column: 2; }
.m27-pair[data-flip] img:nth-child(2) { grid-column: 1; align-self: end; }
/* the pair for the chosen word; before any word is chosen, the first pair holds */
.m27:is([data-sel="none"], [data-sel="clients"]) .m27-pair.p-clients,
.m27[data-sel="services"] .m27-pair.p-services,
.m27[data-sel="about"] .m27-pair.p-about,
.m27[data-sel="work"] .m27-pair.p-work { opacity: 1; }

/* ---------- the words, under the photos, always starting on the same line ---------- */
.m27-words { position: absolute; left: var(--edge); right: var(--edge); top: calc(var(--top) + var(--sw) * 281 / 350 + 30px); bottom: calc(var(--bar) + 16px); }
/* short screens (a small phone with the browser bars showing): the words a little smaller */
@container (max-height: 700px) { .m27-st { font-size: 22px; } .m27 .m27-more { margin-top: 16px; } .m27-words { top: calc(var(--top) + var(--sw) * 281 / 350 + 22px); } }
.m27q { container-type: size; }
.m27-line { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transition: none; }
.m27-st { margin: 0; font-size: 25px; line-height: 1.2; letter-spacing: -.005em; text-wrap: pretty; }
/* the old words go at once; the new words come in a beat later. Only the photos cross-fade */
.m27[data-sel="none"] .m27-line.l-none,
.m27[data-sel="clients"] .m27-line.l-clients,
.m27[data-sel="services"] .m27-line.l-services,
.m27[data-sel="about"] .m27-line.l-about,
.m27[data-sel="work"] .m27-line.l-work { opacity: 1; visibility: visible; transition: opacity 320ms ease 140ms, visibility 0s linear 140ms; }

/* the square, outlined button under the words */
.m27 .m27-more { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; min-height: 46px; padding: 0 20px;
  border: 1px solid rgba(246, 241, 232, .55) !important; border-radius: 0;
  font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1; letter-spacing: .12em !important; text-transform: uppercase; }
.m27-more .ar { font-size: 14px; letter-spacing: 0; text-transform: none; }
.m27-more:active { background: var(--cream); color: var(--choc); }

/* ---------- the menu bar, under the thumb ---------- */
.m27-bar { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: var(--bar); padding: 0 var(--edge) env(safe-area-inset-bottom);
  background: var(--choc); border-top: 1px solid var(--rule); }
.m27-bar ul { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; justify-content: space-between; align-items: stretch; }
.m27-item { position: relative; display: grid; place-items: center; height: 100%; min-width: 44px; }
.m27-item::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--cream); transform: scaleX(0); transition: transform 320ms cubic-bezier(.2, .7, .2, 1); }
.m27-lab { grid-area: 1 / 1; white-space: nowrap; transition: opacity 250ms ease; }
.m27-lab.a { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.m27-lab.b { font-family: var(--serif); font-size: 19px; letter-spacing: -.005em; opacity: 0; }
/* the chosen word turns Newsreader, as it does on hover on the desktop, with a line over it */
.m27 .m27-item { --on: 0; }
.m27[data-sel="clients"] .m27-item.i-clients, .m27[data-sel="services"] .m27-item.i-services,
.m27[data-sel="about"] .m27-item.i-about, .m27[data-sel="work"] .m27-item.i-work { --on: 1; }
.m27-item .m27-lab.a { opacity: calc(1 - var(--on)); }
.m27-item .m27-lab.b { opacity: var(--on); }
.m27-item::before { transform: scaleX(var(--on)); }

/* ---------- the section, rising out of the menu bar ---------- */
.m27-sheet { position: absolute; z-index: 5; left: 0; right: 0; top: 56px; bottom: var(--bar); display: flex; flex-direction: column;
  background: var(--choc); border-top: 1px solid var(--rule);
  visibility: hidden; transform: translateY(100%);
  transition: transform 380ms cubic-bezier(.6, 0, .8, .4), visibility 0s linear 380ms; }
.m27[data-po="clients"] #m-clients, .m27[data-po="services"] #m-services, .m27[data-po="about"] #m-about {
  visibility: visible; transform: none; transition: transform 560ms cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.m27-sh { flex: none; display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 var(--edge); }
.m27-label { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.m27-close { display: flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .12em !important; text-transform: uppercase; }
.m27-close span { font-family: var(--serif); font-size: 22px; line-height: 1; letter-spacing: 0; text-transform: none; }
.m27-in { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px var(--edge) 40px; scrollbar-width: none; }
.m27-in::-webkit-scrollbar { display: none; }
/* the words inside settle a beat after the sheet arrives */
.m27-in > * { opacity: 0; transform: translateY(12px); transition: opacity 200ms ease, transform 200ms ease; }
.m27[data-po="clients"] #m-clients .m27-in > *, .m27[data-po="services"] #m-services .m27-in > *, .m27[data-po="about"] #m-about .m27-in > * {
  opacity: 1; transform: none; transition: opacity 420ms ease 220ms, transform 520ms cubic-bezier(.2, .7, .2, 1) 220ms; }

.m27-h { margin: 0 0 18px; font-weight: 400; font-size: 29px; line-height: 1.14; letter-spacing: -.005em; text-wrap: pretty; }
.m27-h3 { margin: 34px 0 12px; font-weight: 400; font-size: 23px; line-height: 1.2; text-wrap: pretty; }
.m27-p { margin: 0 0 18px; font-family: var(--mono); font-size: 14px; line-height: 1.65; opacity: .92; }

.m27-wl { margin: 2px 0 12px; font-family: var(--mono); font-size: 14px; line-height: 1.6; opacity: .8; }
.m27-clients { list-style: none; margin: 0; padding: 0; }
.m27-clients li { border-top: 1px solid var(--rule); }
.m27-clients li:last-child { border-bottom: 1px solid var(--rule); }
.m27-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; min-height: 48px; padding: 8px 0; }
.m27-clients .n { font-size: 20px; line-height: 1.2; }
.m27-clients .go { font-family: var(--mono); font-size: 15px; line-height: 1; opacity: .75; }
.m27-clients div.m27-row .go { opacity: .45; }
.m27-clients a.m27-row:active .go { transform: translateX(4px); opacity: 1; }

.m27-acc { margin-top: 26px; }
.m27-acc details { border-top: 1px solid var(--rule); }
.m27-acc details:last-child { border-bottom: 1px solid var(--rule); }
.m27-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 54px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 21px; line-height: 1.2; }
.m27-acc summary::-webkit-details-marker { display: none; }
.m27-acc summary i { position: relative; flex: none; width: 14px; height: 14px; }
.m27-acc summary i::before, .m27-acc summary i::after { content: ''; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1px; background: currentColor; transition: transform 250ms ease; }
.m27-acc summary i::after { transform: rotate(90deg); }
.m27-acc details[open] summary i::after { transform: rotate(0deg); }
.m27-acc details p { margin: 0 0 14px; font-family: var(--mono); font-size: 14px; line-height: 1.65; opacity: .92; }
.m27-acc details p:last-child { margin-bottom: 20px; }

.m27-c { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--rule); }
.m27-c p { margin: 0 0 12px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; opacity: .75; }
.m27-c .m27-small-h { margin-bottom: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; opacity: .8; }


/* about: the long letter. Short lines in the serif, the three things numbered, signed off by hand */
.m27-ab-ls { margin: 0 0 22px; }
.m27-ab-ls p { margin: 0; font-size: 21px; line-height: 1.25; text-wrap: pretty; }
.m27-ab-q { margin: 26px 0; font-size: 21px; line-height: 1.25; text-wrap: pretty; }
.m27-ab-ol { list-style: none; counter-reset: ab; margin: 0 0 26px; padding: 0; }
.m27-ab-ol li { counter-increment: ab; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; padding: 12px 0 11px; border-top: 1px solid var(--rule); font-size: 19px; line-height: 1.25; }
.m27-ab-ol li:last-child { border-bottom: 1px solid var(--rule); }
.m27-ab-ol li::before { content: counter(ab); font-family: var(--mono); font-size: 12px; opacity: .7; }
.m27-ab .m27-h3 { margin: 36px 0 12px; }
.m27-ab-sign { margin: 28px 0 0; font-size: 25px; line-height: 1.2; font-style: italic; }
/* the button on to the next section */
.m27-nx { margin-top: 34px; }
.m27 .m27-nx .m27-more { margin-top: 0; }

/* ---------- the opening: the line types itself on the brown, on one line ---------- */
.m27-intro { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--choc); pointer-events: none;
  opacity: 0; visibility: hidden; animation: m27curtain 4.7s cubic-bezier(.6, 0, .2, 1) 1 both; }
@keyframes m27curtain { 0%, 85% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
.m27-intro p { margin: 0; white-space: nowrap; font-size: 21px; line-height: 1.2; letter-spacing: -.005em; animation: m27drift 4.1s cubic-bezier(.5, 0, .5, 1) 1 both; }
@keyframes m27drift { 0%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(16px); } }
.m27-typer { position: relative; display: inline-block; }
.m27-typer > .t { display: inline-block; clip-path: inset(0 0 0 0); animation: m27type 2.3s steps(38, end) .45s both; }
.m27-typer::after { content: ''; position: absolute; top: .16em; left: 0; width: .055em; height: 1em; background: currentColor; opacity: 0;
  animation: m27caret 2.3s steps(38, end) .45s both, m27blink 1s steps(1) 2.8s 3 forwards; }
@keyframes m27type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m27caret { from { left: 0; opacity: 1; } to { left: 100%; opacity: 1; } }
@keyframes m27blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
/* then the brown lifts and the words land under the photos */
.m27[data-sel="none"] .m27-line.l-none .m27-st { animation: m27land 5.3s cubic-bezier(.2, .7, .2, 1) 1 both; }
@keyframes m27land { 0%, 87% { opacity: 0; transform: translateX(-14px); } 100% { opacity: 1; transform: none; } }
/* the boards that show one moment: the opening held, or the opening already over */
.m27-intro.hold, .m27-intro.hold p, .m27-intro.hold .t { animation: none; opacity: 1; visibility: visible; }
.m27-intro.hold .m27-typer::after { animation: none; left: 100%; opacity: 1; }
.m27-intro.off { display: none; }
.m27:has(.m27-intro:is(.off, .hold)) .m27-line.l-none .m27-st { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .m27-intro { display: none; }
  .m27 .m27-line.l-none .m27-st { animation: none; }
  .m27-pair, .m27-line, .m27-sheet, .m27-in > *, .m27-item::before, .m27-lab { transition: none !important; }
}

/* ---------- the form page ---------- */
body.page { min-height: 100vh; }
.r24 .ci-ip-head { position: relative; }
.m27f .m27f-back { display: none; }
.r26-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.r24 .r26-status { grid-column: 1 / -1; margin: 0; font-family: 'Inter', Arial, sans-serif; font-size: 15px; line-height: 1.6; }
.r24 .r26-status[hidden] { display: none; }
.r24 .r26-form.sent > :not(.r26-status) { display: none; }
.r24 .nf .nf-go { margin: 8px 0 0; }
.r24 .r26-form.sent .r26-status { font-family: 'Newsreader 36', Georgia, serif; font-size: 28px; line-height: 1.25; }
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .m27f .ci-ip-nav { display: none; }
  .m27f .m27f-back { display: flex; }
  .m27f .m27f-back { display: flex; align-items: center; gap: 8px; min-height: 44px; font-family: 'Inter', Arial, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase !important; }
  .m27f .m27f-back span { font-family: 'Newsreader 36', Georgia, serif; font-size: 22px; line-height: 1; letter-spacing: 0; }
  .r24.m27f .ci-ip { gap: 36px; padding-top: 14px; }
  .r24.m27f .ci-ip-head { flex-direction: row; align-items: center; justify-content: space-between; height: 44px; margin-bottom: 4px; }
  .r24.m27f .ci-ip-home img { height: 15px; }
  .r24.m27f .ci-ip-lede { font-size: 29px; line-height: 1.14; }
  .r24.m27f .ci-ip.r26-contact .r26-sub { margin: -22px 0 0; font-size: 18px; line-height: 1.45; }
  .r24.m27f .r26-form fieldset { gap: 8px; }
  .r24.m27f .r26-chip span { padding: 11px 13px 10px; font-size: 11px; }
  .r24.m27f .r26-form { row-gap: 28px; }
  .r24.m27f .ci-ip-foot { margin-top: 24px; }
  .r24.m27f .ci-ip-ack { font-size: 12px; line-height: 1.6; opacity: .75; }
}