/* oa.css: Omar Ali kit for Squarespace 7.1, served from town.omarali.xyz.
   PART A is the style kit (omar-kit.css, Some Shape moves), merged in with two changes:
   it never hides the system cursor, and its font @import moved into oa.js (an @import
   here would hold back this whole stylesheet until Google Fonts answers).
   PART B styles the components oa.js mounts.
   Everything is scoped under .oa-kit. Source: ~/Code/omarali-squarespace (README). */

/* ==========================================================================
   PART A. STYLE KIT
   ========================================================================== */
/* ==========================================================================
   OMAR ALI STYLE KIT  (omar-kit.css)
   Moves borrowed from Some Shape Studio, rebuilt for omarali.xyz.
   Everything is scoped under .oa-kit, so nothing here touches the rest
   of the Squarespace site. Put markup inside <div class="oa-kit">…</div>
   (a Code block, or a page wrapper added by code injection).

   Fonts (both free, SIL Open Font License, served by Google Fonts):
     Display  Archivo at width 125 (Archivo Expanded)
     Text     Instrument Sans
   Load them once, either with this @import (Squarespace Custom CSS
   accepts it at the very top) or with this tag in Settings > Code
   Injection > Header:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,300..600&family=Instrument+Sans:wdth,wght@75..100,400..600&display=swap">
   ========================================================================== */
/* ---------- 1. Tokens ---------------------------------------------------- */
.oa-kit {
  /* color */
  --oa-paper: #f6f6f2;        /* page base: chalk white, low chroma */
  --oa-white: #ffffff;
  --oa-ink: #17171b;          /* text and hairlines */
  --oa-ink-soft: #4a4a52;     /* secondary text */
  --oa-rule: rgba(23, 23, 27, 0.2);
  --oa-poppy: #ef4a24;        /* the one loud accent: giant words, fills, cursor */
  --oa-poppy-text: #b02a10;   /* poppy for small text, 4.7:1 or better on chalk and every tint */
  --oa-poppy-fill: #d63a12;   /* poppy behind white button text (4.7:1); bright poppy stays for display and marks */
  --oa-poppy-fill-hover: #b02a10;
  --oa-sky: #cfe3f4;          /* block tint + text highlight */
  --oa-blush: #f9d6dd;        /* block tint */
  --oa-lilac: #dcd6f7;        /* block tint */

  /* type */
  --oa-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --oa-font-text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --oa-display-stretch: 125%;
  --oa-step-giant: clamp(4.5rem, 14.5vw, 15rem);   /* one word that owns a section */
  --oa-step-split: clamp(3.4rem, 10.6vw, 10.5rem); /* split headline words */
  --oa-step-h2: clamp(2.4rem, 5.6vw, 5.25rem);     /* section titles */
  --oa-step-h3: clamp(1.5rem, 2.6vw, 2.5rem);      /* line titles, service names */
  --oa-step-lead: clamp(1.25rem, 2.05vw, 1.9rem);  /* big quotes, lead statements */
  --oa-step-text: clamp(1rem, 1.32vw, 1.22rem);    /* statements and body */
  --oa-step-small: 0.875rem;                       /* captions, footnotes */
  --oa-step-label: 0.9375rem;                      /* buttons, nav, tags */
  --oa-track-display: -0.035em;
  --oa-track-text: 0.004em;
  --oa-track-label: 0.03em;

  /* space */
  --oa-gutter: max(16px, 2vw);          /* page side margin (Some Shape: 2vw) */
  --oa-gap: 11px;                       /* grid gap (Fluid Engine default) */
  --oa-section-y: clamp(64px, 9vw, 150px);
  --oa-stack-s: 12px;
  --oa-stack-m: 24px;
  --oa-stack-l: 48px;

  /* motion */
  --oa-ease: cubic-bezier(0.19, 1, 0.22, 1); /* ease-out-expo, as on Some Shape */
  --oa-dur: 0.8s;
  --oa-dur-fast: 0.35s;
  --oa-marquee-speed: 32s;
  --oa-pin-top: 16px;                   /* where pinned words stop; set to header height on Squarespace */

  background: var(--oa-paper);
  color: var(--oa-ink);
  font-family: var(--oa-font-text);
  font-size: var(--oa-step-text);
  line-height: 1.3;
  letter-spacing: var(--oa-track-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 1b. Squarespace theme guard -------------------------------- */
/* Squarespace colors headings, paragraphs and links from the section theme, so on a
   dark section they turn white. Inside the kit, Squarespace's color variables point
   back to kit ink, and text inherits the panel's ink unless a kit class sets its own
   color. Kit class rules come later and outrank this reset. */
.oa-kit {
  --headingExtraLargeColor: var(--oa-ink, #17171b);
  --headingLargeColor: var(--oa-ink, #17171b);
  --headingMediumColor: var(--oa-ink, #17171b);
  --headingSmallColor: var(--oa-ink, #17171b);
  --headingLinkColor: var(--oa-ink, #17171b);
  --paragraphLargeColor: var(--oa-ink, #17171b);
  --paragraphMediumColor: var(--oa-ink, #17171b);
  --paragraphSmallColor: var(--oa-ink, #17171b);
  --paragraphLinkColor: var(--oa-ink, #17171b);
}
.oa-kit :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, label, a) { color: inherit; }

/* local reset, scoped */
.oa-kit *, .oa-kit *::before, .oa-kit *::after { box-sizing: border-box; }
.oa-kit :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
.oa-kit :where(ul, ol) { list-style: none; }
.oa-kit :where(img) { display: block; max-width: 100%; }
.oa-kit :where(a) { color: inherit; text-decoration: none; }
.oa-kit :where(h1, h2, h3, h4) { font-weight: 400; }

/* ---------- 2. Type helpers --------------------------------------------- */
.oa-kit .oa-caps { text-transform: uppercase; }
.oa-kit .oa-statement {               /* Some Shape's uppercase statement paragraph */
  font-size: var(--oa-step-text);
  line-height: 1.3;
  text-transform: uppercase;
  max-width: 34ch;
}
.oa-kit .oa-body { font-size: var(--oa-step-text); line-height: 1.38; max-width: 46ch; }
.oa-kit .oa-body + .oa-body { margin-top: 0.9em; }
.oa-kit .oa-lead { font-size: var(--oa-step-lead); line-height: 1.25; text-transform: uppercase; }
.oa-kit .oa-small { font-size: var(--oa-step-small); line-height: 1.25; }
.oa-kit .oa-label {
  font-size: var(--oa-step-label);
  letter-spacing: var(--oa-track-label);
  text-transform: uppercase;
  line-height: 1.2;
}
.oa-kit .oa-h2 {
  font-family: var(--oa-font-display);
  font-stretch: var(--oa-display-stretch);
  font-weight: 400;
  font-size: var(--oa-step-h2);
  line-height: 1;
  letter-spacing: var(--oa-track-display);
  text-transform: uppercase;
}
.oa-kit .oa-h3 {
  font-family: var(--oa-font-display);
  font-stretch: var(--oa-display-stretch);
  font-weight: 400;
  font-size: var(--oa-step-h3);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
/* highlighter word: one or two per paragraph, never more */
.oa-kit .oa-mark {
  background: var(--oa-sky);
  color: inherit;
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.oa-kit .oa-block--sky .oa-mark { background: var(--oa-white); }

/* ---------- 3. Giant display word --------------------------------------- */
.oa-kit .oa-giant {
  display: block;
  font-family: var(--oa-font-display);
  font-stretch: var(--oa-display-stretch);
  font-weight: 400;
  font-size: var(--oa-step-giant);
  line-height: 0.82;
  letter-spacing: var(--oa-track-display);
  text-transform: uppercase;
  color: var(--oa-poppy);
  white-space: nowrap;
}
.oa-kit .oa-giant--ink { color: var(--oa-ink); }
.oa-kit .oa-giant--white { color: var(--oa-white); }
.oa-kit .oa-giant--center { text-align: center; }
.oa-kit .oa-giant--fit { font-size: min(var(--oa-step-giant), calc(92vw / var(--oa-chars, 5) * 1.12)); }

/* ---------- 4. Layout shell --------------------------------------------- */
.oa-kit .oa-wrap { padding-inline: var(--oa-gutter); }
.oa-kit .oa-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--oa-gap);
}
.oa-kit .oa-section { padding-block: var(--oa-section-y); position: relative; }
.oa-kit .oa-section--tight { padding-block: calc(var(--oa-section-y) * 0.5); }

/* simple header for pages built entirely in the kit */
.oa-kit .oa-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--oa-gutter);
  position: relative; z-index: 20;
}
.oa-kit .oa-nav__brand {
  font-family: var(--oa-font-display); font-stretch: var(--oa-display-stretch);
  font-size: 1.05rem; letter-spacing: -0.01em; text-transform: uppercase;
}
.oa-kit .oa-nav__links { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.oa-kit .oa-nav__links a:not(.oa-pill) {
  font-size: var(--oa-step-label); letter-spacing: var(--oa-track-label); text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--oa-dur-fast) var(--oa-ease);
  padding-bottom: 2px;
}
.oa-kit .oa-nav__links a:not(.oa-pill):hover,
.oa-kit .oa-nav__links a[aria-current="page"] { background-size: 100% 1px; }
@media (max-width: 767px) { .oa-kit .oa-nav__links a:not(.oa-pill) { display: none; } }

/* ---------- 5. Split headline around an image --------------------------- */
/* Word A sits behind the photo, word B in front. On wide screens both words
   pin (position: sticky) and meet on one line while the photo slides up
   between them, the way SOME / SHAPE do on Some Shape's homepage.
   Markup: .oa-split > .oa-split__stage (word a, media, word b) + .oa-split__after.
   The pin lasts exactly as long as the stage, so captions in __after never
   run into the pinned words.                                               */
.oa-kit .oa-split { padding-inline: var(--oa-gutter); padding-bottom: var(--oa-stack-l); position: relative; }
.oa-kit .oa-split__stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--oa-gap);
  position: relative;
}
.oa-kit .oa-split__word {
  font-family: var(--oa-font-display);
  font-stretch: var(--oa-display-stretch);
  font-weight: 400;
  font-size: var(--oa-step-split);
  line-height: 0.8;
  letter-spacing: var(--oa-track-display);
  text-transform: uppercase;
  white-space: nowrap;
  grid-row: 1;
  align-self: start;
}
.oa-kit .oa-split__word--a {        /* behind the photo */
  grid-column: var(--oa-split-a-col, 3 / 9);
  margin-top: var(--oa-split-a-top, 2.2vw);
  z-index: 1;
  color: var(--oa-ink);
}
.oa-kit .oa-split__word--b {        /* in front of the photo */
  grid-column: var(--oa-split-b-col, 8 / 13);
  margin-top: var(--oa-split-b-top, 30vw);
  margin-left: var(--oa-split-b-shift, 0.2em); /* the word space once the two words meet */
  z-index: 3;
  color: var(--oa-poppy);
}
.oa-kit .oa-split__media {
  grid-column: var(--oa-split-media-col, 6 / 10);
  grid-row: 1;
  margin-top: var(--oa-split-media-top, 7.5vw);
  /* the tail keeps row 1 open after the photo has passed, so the pinned
     words sit together on one clean line for a moment before they leave */
  margin-bottom: var(--oa-split-tail, 30vh);
  z-index: 2;
  position: relative;
}
.oa-kit .oa-split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.oa-kit .oa-split__after {          /* captions and statement under the stage */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--oa-gap);
  row-gap: var(--oa-stack-l);
  padding-top: var(--oa-split-handoff, max(16vh, 140px)); /* lets the pinned words leave before captions arrive */
}
@media (min-width: 768px) {
  .oa-kit .oa-split--pin .oa-split__word { position: sticky; top: var(--oa-pin-top); }
}
@media (max-width: 767px) {
  .oa-kit .oa-split__stage { padding-bottom: var(--oa-stack-l); }
  .oa-kit .oa-split__media { margin-bottom: 0; }
  .oa-kit .oa-split__word--b { margin-left: 0; }
  .oa-kit .oa-split__after { padding-top: 0; }
  .oa-kit .oa-split__word { font-size: clamp(3.2rem, 22vw, 6rem); }
  .oa-kit .oa-split__word--a { grid-column: 1 / -1; margin-top: 2vw; }
  .oa-kit .oa-split__word--b { grid-column: 1 / -1; justify-self: end; margin-top: 90vw; }
  .oa-kit .oa-split__media { grid-column: 3 / 13; margin-top: 15vw; }
  .oa-kit .oa-split__after > * { grid-column: 1 / -1 !important; }
}

/* sentence spread across columns: "STRATEGIST / WRITER / FILMMAKER" */
.oa-kit .oa-spread {
  display: grid;
  grid-template-columns: repeat(var(--oa-spread-n, 3), minmax(0, 1fr));
  column-gap: var(--oa-gap);
  font-size: var(--oa-step-text);
  text-transform: uppercase;
  line-height: 1.2;
}
.oa-kit .oa-spread > *:nth-child(2) { text-align: center; }
.oa-kit .oa-spread > *:last-child { text-align: right; }
.oa-kit .oa-spread--5 { --oa-spread-n: 5; }
.oa-kit .oa-spread--5 > * { text-align: left !important; }
.oa-kit .oa-spread__num { display: block; color: var(--oa-poppy-text); font-size: var(--oa-step-small); margin-bottom: 6px; }
.oa-kit .oa-block--poppy .oa-spread__num { color: var(--oa-ink); }
@media (max-width: 767px) {
  .oa-kit .oa-spread { grid-template-columns: 1fr; row-gap: 6px; text-align: left; }
  .oa-kit .oa-spread > * { text-align: left !important; }
  .oa-kit .oa-spread--5 { grid-template-columns: 1fr 1fr; row-gap: 18px; }
}

/* ---------- 6. Color-block section -------------------------------------- */
/* Full-bleed, hard edges, no gradients or shadows. Light tints carry ink
   text; poppy is the one loud block per page.                             */
.oa-kit .oa-block {
  --oa-block-bg: var(--oa-paper);
  --oa-block-fg: var(--oa-ink);
  background: var(--oa-block-bg);
  color: var(--oa-block-fg);
  padding-block: var(--oa-section-y);
  position: relative;
  overflow: clip;
}
.oa-kit .oa-block--sky   { --oa-block-bg: var(--oa-sky); }
.oa-kit .oa-block--blush { --oa-block-bg: var(--oa-blush); }
.oa-kit .oa-block--lilac { --oa-block-bg: var(--oa-lilac); }
.oa-kit .oa-block--white { --oa-block-bg: var(--oa-white); }
.oa-kit .oa-block--poppy { --oa-block-bg: var(--oa-poppy); --oa-block-fg: var(--oa-ink); }
.oa-kit .oa-block--poppy .oa-h2,
.oa-kit .oa-block--poppy .oa-giant { color: var(--oa-white); }
/* half-and-half block: text one side, photo bleeding to the edge */
.oa-kit .oa-block--split { padding-block: 0; }
.oa-kit .oa-block__cols { display: grid; grid-template-columns: 1fr 1fr; min-height: min(92vh, 860px); }
.oa-kit .oa-block__text {
  padding: var(--oa-section-y) var(--oa-gutter);
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--oa-stack-m);
}
.oa-kit .oa-block__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .oa-kit .oa-block__cols { grid-template-columns: 1fr; min-height: 0; }
  .oa-kit .oa-block__media { aspect-ratio: 4 / 3; }
}

/* ---------- 7. Pill buttons and tags ------------------------------------ */
.oa-kit .oa-pill {
  --oa-pill-c: var(--oa-ink);
  --oa-pill-on: var(--oa-paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 34px;
  padding: 0.38em 1.7em 0.34em;
  border: 1px solid var(--oa-pill-c);
  border-radius: 999px;
  background: transparent;
  color: var(--oa-pill-c);
  font: 400 var(--oa-step-label)/1.1 var(--oa-font-text);
  letter-spacing: 0.005em;
  text-transform: none; /* sentence case: buttons say what happens, in plain words */
  cursor: pointer;
  transition: background-color 0.6s var(--oa-ease), color 0.6s var(--oa-ease), border-color 0.6s var(--oa-ease);
}
.oa-kit .oa-pill:hover, .oa-kit .oa-pill:focus-visible { background: var(--oa-pill-c); color: var(--oa-pill-on); }
.oa-kit .oa-pill--solid { background: var(--oa-pill-c); color: var(--oa-pill-on); }
.oa-kit .oa-pill--solid:hover, .oa-kit .oa-pill--solid:focus-visible { background: transparent; color: var(--oa-pill-c); }
.oa-kit .oa-pill--poppy { --oa-pill-c: var(--oa-poppy-fill); --oa-pill-on: var(--oa-white); }
.oa-kit .oa-pill--poppy:not(.oa-pill--solid) { color: var(--oa-poppy-text); border-color: var(--oa-poppy); }
.oa-kit .oa-pill--poppy:not(.oa-pill--solid):hover { color: var(--oa-white); background: var(--oa-poppy-fill); }
.oa-kit .oa-pill--white { --oa-pill-c: var(--oa-white); --oa-pill-on: var(--oa-ink); }
.oa-kit .oa-pill--wide { min-width: min(100%, 300px); }
.oa-kit .oa-pill:focus-visible { outline: 2px solid var(--oa-ink); outline-offset: 3px; }
.oa-kit .oa-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.oa-kit .oa-tag {
  display: inline-block;
  padding: 0.3em 0.9em 0.26em;
  border: 1px solid var(--oa-rule);
  border-radius: 999px;
  font-size: 0.75rem; letter-spacing: var(--oa-track-label); text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

/* ---------- 8. Numbered lines (services, project index) ----------------- */
.oa-kit .oa-lines { border-top: 1px solid var(--oa-ink); counter-reset: oa-line; }
.oa-kit .oa-line {
  position: relative;
  display: grid;
  grid-template-columns: minmax(48px, 1fr) minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2fr);
  column-gap: var(--oa-gap);
  align-items: start;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--oa-ink);
  isolation: isolate;
}
.oa-kit .oa-line::before {           /* tint that wipes in from the left on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--oa-line-tint, var(--oa-sky));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.7s var(--oa-ease);
}
.oa-kit a.oa-line:hover::before, .oa-kit a.oa-line:focus-visible::before { transform: scaleX(1); }
.oa-kit .oa-line__num {
  font-size: var(--oa-step-text); color: var(--oa-poppy-text); line-height: 1.3;
  padding-left: 2px; font-variant-numeric: tabular-nums;
}
.oa-kit .oa-line__title { transition: transform 0.7s var(--oa-ease); }
.oa-kit a.oa-line:hover .oa-line__title { transform: translateX(14px); }
.oa-kit .oa-line__desc { font-size: var(--oa-step-text); line-height: 1.35; max-width: 42ch; }
.oa-kit .oa-line__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.oa-kit .oa-line__arrow { font-size: 1.5rem; line-height: 1; transition: transform 0.7s var(--oa-ease); }
.oa-kit a.oa-line:hover .oa-line__arrow { transform: translateX(-6px) rotate(-45deg); }
/* compact variant: number + one line, poppy text, like Some Shape's 001-004 */
.oa-kit .oa-lines--compact { border-top: 0; }
.oa-kit .oa-lines--compact .oa-line {
  grid-template-columns: 3.4em minmax(0, 1fr);
  border-bottom: 0; padding: 0 0 26px;
  color: var(--oa-poppy-text);
}
.oa-kit .oa-lines--compact .oa-line::before { display: none; }
.oa-kit .oa-lines--compact .oa-line__desc { color: var(--oa-poppy-text); }
.oa-kit .oa-lines--compact a.oa-line:hover .oa-line__desc { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 767px) {
  .oa-kit .oa-line { grid-template-columns: 2.8em minmax(0, 1fr); row-gap: 12px; }
  .oa-kit .oa-line__desc, .oa-kit .oa-line__meta { grid-column: 2; }
  .oa-kit .oa-line__meta { align-items: flex-start; text-align: left; flex-direction: row; justify-content: space-between; }
}

/* ---------- 9. Scatter: giant word with numbered images around it -------- */
.oa-kit .oa-scatter {
  position: relative;
  min-height: var(--oa-scatter-h, 64vw);
  max-height: 1100px;
  margin-inline: var(--oa-gutter);
}
.oa-kit .oa-scatter__word {
  position: absolute; left: 50%; top: var(--oa-scatter-word-top, 34%);
  transform: translateX(-50%);
  z-index: 1;
}
.oa-kit .oa-scatter__item {
  position: absolute;
  left: var(--x, 0%); top: var(--y, 0%);
  width: var(--w, 15.5%);
  z-index: var(--z, 2);
}
.oa-kit .oa-scatter__item img { width: 100%; aspect-ratio: var(--ar, 9 / 10); object-fit: cover; }
.oa-kit .oa-scatter__cap {
  display: block; text-align: right; margin-top: 8px;
  font-size: var(--oa-step-text); color: var(--oa-poppy-text); line-height: 1;
}
@media (max-width: 767px) {
  .oa-kit .oa-scatter {
    min-height: 0; max-height: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--oa-gap);
  }
  .oa-kit .oa-scatter__word { position: static; transform: none; grid-column: 1 / -1; order: -1; }
  .oa-kit .oa-scatter__item { position: static; width: auto; }
  .oa-kit .oa-scatter__item:nth-child(odd) { margin-top: 36px; }
}

/* ---------- 10. Marquee band --------------------------------------------- */
.oa-kit .oa-marquee {
  --oa-marquee-bg: transparent;
  display: flex;
  overflow: hidden;
  background: var(--oa-marquee-bg);
  border-block: 1px solid currentColor;
  white-space: nowrap;
  user-select: none;
}
.oa-kit .oa-marquee__track {
  display: flex; flex: none; align-items: center;
  gap: 0.9em; padding-right: 0.9em;
  padding-block: 0.32em 0.26em;
  font-size: var(--oa-marquee-size, clamp(1.25rem, 1.75vw, 1.6rem));
  line-height: 1.2;
  text-transform: uppercase;
  animation: oa-marquee var(--oa-marquee-speed) linear infinite;
}
.oa-kit .oa-marquee--reverse .oa-marquee__track { animation-direction: reverse; }
.oa-kit .oa-marquee--display .oa-marquee__track {
  font-family: var(--oa-font-display); font-stretch: var(--oa-display-stretch);
  letter-spacing: var(--oa-track-display);
  --oa-marquee-size: clamp(3rem, 9vw, 8.5rem);
  padding-block: 0.06em 0;
  line-height: 1;
}
.oa-kit .oa-marquee--bare { border-block: 0; }
.oa-kit .oa-marquee__dot {
  display: inline-block; width: 0.42em; height: 0.42em; border-radius: 50%;
  background: var(--oa-poppy); flex: none; transform: translateY(-0.04em);
}
.oa-kit .oa-marquee--sky { --oa-marquee-bg: var(--oa-sky); }
.oa-kit .oa-marquee:hover .oa-marquee__track { animation-play-state: var(--oa-marquee-hover, running); }
@keyframes oa-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- 11. Dot cursor ---------------------------------------------- */
/* Kit markup version. On Squarespace, oa.js draws one page-wide dot instead
   (see .oa-dot in Part B), so this stays hidden unless a page adds its own
   script. The system cursor is never hidden.                             */
.oa-kit .oa-cursor { display: none; }
@media (pointer: fine) {
  .oa-kit.has-oa-cursor .oa-cursor {
    display: block;
    position: fixed; left: 0; top: 0; z-index: 9999;
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: var(--oa-poppy);
    border: 2px solid transparent;
    pointer-events: none;
    transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0);
    transition: width var(--oa-dur-fast) var(--oa-ease), height var(--oa-dur-fast) var(--oa-ease),
                margin var(--oa-dur-fast) var(--oa-ease), background-color var(--oa-dur-fast) var(--oa-ease),
                border-color var(--oa-dur-fast) var(--oa-ease), opacity 0.2s linear;
  }
  .oa-kit.has-oa-cursor .oa-cursor.is-link {
    width: 46px; height: 46px; margin: -23px 0 0 -23px;
    background: transparent; border-color: var(--oa-poppy);
  }
  .oa-kit.has-oa-cursor .oa-cursor.is-accent { background: var(--oa-ink); }
  .oa-kit.has-oa-cursor .oa-cursor.is-accent.is-link { background: transparent; border-color: var(--oa-ink); }
  .oa-kit.has-oa-cursor .oa-cursor.is-out { opacity: 0; }
}

/* ---------- 12. Scroll reveal (fade + blur in, once) --------------------- */
.oa-kit.oa-js .oa-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  filter: blur(12px);
  transition: opacity 0.9s var(--oa-ease), transform 1.1s var(--oa-ease), filter 0.9s var(--oa-ease);
  transition-delay: var(--oa-delay, 0s);
}
.oa-kit.oa-js .oa-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- 13. Footer line ---------------------------------------------- */
.oa-kit .oa-foot {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--oa-gap);
  padding: 28px var(--oa-gutter) 36px;
  font-size: var(--oa-step-small); text-transform: uppercase; line-height: 1.4;
}
.oa-kit .oa-foot a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.oa-kit .oa-foot a:hover { color: var(--oa-poppy-text); }
.oa-kit .oa-foot > *:last-child { text-align: right; }
@media (max-width: 767px) { .oa-kit .oa-foot { grid-template-columns: 1fr 1fr; row-gap: 18px; } }

/* ---------- 14. Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .oa-kit *, .oa-kit *::before, .oa-kit *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .oa-kit .oa-marquee__track { animation: none !important; }
  .oa-kit .oa-marquee { flex-wrap: nowrap; }
  .oa-kit .oa-marquee__track[aria-hidden="true"] { display: none; }
  .oa-kit .oa-split--pin .oa-split__word { position: relative; top: auto; }
  .oa-kit.oa-js .oa-reveal { opacity: 1; transform: none; filter: none; }
  .oa-kit .oa-cursor { display: none !important; }
  .oa-kit a.oa-line:hover .oa-line__title,
  .oa-kit a.oa-line:hover .oa-line__arrow { transform: none; }
}


/* ==========================================================================
   PART B. COMPONENTS (oa.js mounts these into <div data-oa="..."> placeholders)
   They read the kit tokens above. Component roots carry .oa-kit and .oa-c.
   ========================================================================== */

.oa-kit {
  --_paper: var(--oa-paper, #f6f6f2);
  --_white: var(--oa-white, #ffffff);
  --_ink: var(--oa-ink, #17171b);
  --_muted: var(--oa-ink-soft, #4a4a52);
  --_line: var(--oa-rule, rgba(23, 23, 27, 0.2));
  --_accent: var(--oa-poppy, #ef4a24);
  --_accent-text: var(--oa-poppy-text, #b02a10);
  --_sky: var(--oa-sky, #cfe3f4);
  --_blush: var(--oa-blush, #f9d6dd);
  --_lilac: var(--oa-lilac, #dcd6f7);
  --_display: var(--oa-font-display, "Archivo", "Helvetica Neue", Arial, sans-serif);
  --_stretch: var(--oa-display-stretch, 125%);
  --_text: var(--oa-font-text, "Instrument Sans", "Helvetica Neue", Arial, sans-serif);
  --_dt: var(--oa-track-display, -0.035em);
  --_lt: var(--oa-track-label, 0.03em);
  --_fs-text: var(--oa-step-text, clamp(1rem, 1.32vw, 1.22rem));
  --_fs-lead: var(--oa-step-lead, clamp(1.25rem, 2.05vw, 1.9rem));
  --_fs-small: var(--oa-step-small, 0.875rem);
  --_fs-label: var(--oa-step-label, 0.9375rem);
  --_ease: var(--oa-ease, cubic-bezier(0.19, 1, 0.22, 1));
}

.oa-kit.oa-c {
  --_pad: var(--oa-panel-pad, clamp(16px, 3vw, 40px));
  position: relative;
  display: block;
  container-type: inline-size;
  overflow-x: clip;
  text-align: left;
  /* Each component is a chalk panel with its own inner padding, so it reads well
     on any section color. On a chalk #F6F6F2 section the panel edges disappear. */
  background: var(--oa-component-bg, var(--oa-paper, #f6f6f2));
  padding: var(--_pad);
}
/* a component placed inside another one (audience pages) uses its parent's panel */
.oa-kit.oa-c.oa-nested { --_pad: 0px; background: none; }

:where(.oa-kit.oa-c) :where(h1, h2, h3, h4, h5, p, li, figcaption) { color: inherit; text-transform: none; }
.oa-kit.oa-c :where(li)::before { content: none; }
.oa-kit.oa-c :where(video) { display: block; max-width: 100%; }
/* zero specificity, so the kit's .oa-pill and component classes always win */
:where(.oa-kit.oa-c) :where(button) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
}
:where(.oa-kit.oa-c) :where(input) { font: inherit; color: inherit; margin: 0; }
.oa-kit.oa-c :where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--_ink);
  outline-offset: 3px;
}

.oa-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- shared bits ---------- */

.oa-kit .oa-display {
  color: inherit;
  font-family: var(--_display);
  font-stretch: var(--_stretch);
  font-weight: 400;
  letter-spacing: var(--_dt);
  text-transform: uppercase;
  line-height: 0.9;
}

.oa-kit .oa-c-label {
  display: block;
  color: var(--_accent-text);
  font-size: var(--_fs-label);
  letter-spacing: var(--_lt);
  text-transform: uppercase;
  line-height: 1.2;
}

.oa-kit .oa-draft {
  display: inline-block;
  margin: 0 0 18px;
  padding: 0.38em 1em 0.32em;
  border: 1px dashed var(--_accent);
  border-radius: 999px;
  color: var(--_accent-text);
  font-size: 0.75rem;
  letter-spacing: var(--_lt);
  text-transform: uppercase;
  line-height: 1.1;
}

.oa-kit.oa-hiw.is-poppy .oa-c-label,
.oa-kit.oa-hiw.is-poppy .oa-draft { color: var(--_ink); border-color: var(--_ink); }

/* pills inside components: same look as the kit pill, a touch taller for fingers */
.oa-kit.oa-c .oa-pill { min-height: 40px; white-space: nowrap; }
.oa-kit.oa-c .oa-pill sup { font-size: 0.7em; vertical-align: 0.45em; line-height: 0; opacity: 0.7; }
.oa-kit.oa-c .oa-pill[aria-pressed="true"] { background: var(--_ink); color: var(--_paper); }
.oa-kit.oa-c .oa-pill[disabled] { opacity: 0.4; cursor: default; }

/* Shown in place of a component while editing in Squarespace */
.oa-kit.oa-editor-card {
  display: block;
  padding: 18px 20px;
  border: 1.5px dashed rgba(0, 0, 0, 0.35);
  background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0 10px, transparent 10px 20px);
  font: 500 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #444;
  letter-spacing: 0;
  text-transform: none;
}
.oa-kit.oa-editor-card strong { color: #111; font-weight: 700; }

/* ---------- 1. work-index ---------- */

.oa-wi__head { margin-bottom: 24px; }
.oa-wi__heading { font-size: clamp(2.4rem, 8cqw, 5.25rem); margin-top: 10px; }
.oa-wi__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.oa-kit .oa-wi__status { padding: 18px 0; line-height: 1.3; font-size: var(--_fs-label); letter-spacing: var(--_lt); text-transform: uppercase; color: var(--_muted); }
.oa-wi__status a { text-decoration: underline; text-underline-offset: 3px; }
.oa-wi__list { position: relative; z-index: 1; border-top: 1px solid var(--_ink); }
.oa-wi__item { display: block; }
.oa-wi__item[hidden] { display: none; }
.oa-wi__row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 10px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--_ink);
}
.oa-wi__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--oa-line-tint, var(--_sky));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--_ease);
}
.oa-wi__num {
  font-size: var(--_fs-text);
  line-height: 1.3;
  color: var(--_accent-text);
  font-variant-numeric: tabular-nums;
  padding-left: 2px;
}
.oa-wi__text { min-width: 0; }
.oa-wi__name {
  display: block;
  font-family: var(--_display);
  font-stretch: var(--_stretch);
  font-weight: 400;
  letter-spacing: var(--_dt);
  text-transform: uppercase;
  font-size: clamp(1.45rem, 5cqw, 3.6rem); /* most names fit one line, so rows keep one height */
  line-height: 0.95;
  text-wrap: balance;
  transition: transform 0.7s var(--_ease);
}
.oa-wi__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oa-wi__side { display: none; }
.oa-wi__arrow { font-size: 1.5rem; line-height: 1; transition: transform 0.7s var(--_ease); }
.oa-wi__thumb {
  width: 58px;
  height: 58px;
  object-fit: cover;
  background: var(--_white);
  border: 1px solid var(--_line);
}
.oa-wi.is-entering .oa-wi__item:not([hidden]) .oa-wi__row {
  animation: oa-rise 0.7s var(--_ease) both;
  animation-delay: calc(var(--_i, 0) * 40ms);
}
@keyframes oa-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.oa-wi__follow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: clamp(240px, 30cqw, 440px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
  background: var(--_white);
  border: 1px solid var(--_ink);
  display: none;
}
.oa-wi__follow.is-on { opacity: 1; }
.oa-wi__follow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.oa-wi__follow img.is-on { opacity: 1; }

@container (min-width: 700px) {
  .oa-wi__row {
    grid-template-columns: minmax(48px, 1fr) minmax(0, 8fr) minmax(0, 3fr);
    column-gap: 11px;
    padding: 22px 0 24px;
  }
  .oa-wi__text .oa-wi__tags { display: none; }
  .oa-wi__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    text-align: right;
  }
  .oa-wi__side .oa-wi__tags { justify-content: flex-end; margin-top: 0; }
  .oa-wi__side .oa-wi__tags > :nth-child(n+4) { display: none; } /* three tags at most, on one line */
  .oa-wi__thumb { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .oa-wi--follow .oa-wi__follow { display: block; }
  .oa-wi__row:hover::before,
  .oa-wi__row:focus-visible::before { transform: scaleX(1); }
  .oa-wi__row:hover .oa-wi__name { transform: translateX(14px); }
  .oa-wi__row:hover .oa-wi__arrow { transform: translateX(-6px) rotate(-45deg); }
}

/* ---------- 2. how-i-work ---------- */

.oa-hiw { --_active: var(--_sky); }
.oa-hiw__side { margin-bottom: 16px; }
.oa-hiw__title { font-size: clamp(2.6rem, 12cqw, 5.25rem); margin-top: 10px; }
.oa-hiw__tracker { display: none; }
.oa-hiw__steps { display: grid; gap: 0; }
.oa-hiw__step {
  position: relative;
  padding: 28px 20px 32px;
  background: var(--_c);
  color: var(--_ink);
}
.oa-hiw__num { display: block; font-size: var(--_fs-text); font-variant-numeric: tabular-nums; margin-bottom: 22px; }
.oa-hiw__stitle { font-size: clamp(1.9rem, 9cqw, 3.4rem); }
.oa-hiw__text { margin-top: 16px; font-size: var(--_fs-lead); line-height: 1.25; max-width: 30ch; }
.oa-hiw__img { margin-top: 22px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

@container (min-width: 820px) {
  /* on wide screens the color block fills the whole panel, edge to edge */
  .oa-hiw--pin .oa-hiw__wrap {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 11px;
    margin: calc(-1 * var(--_pad));
    padding: clamp(32px, 4cqw, 64px) clamp(20px, 3cqw, 48px);
    background: var(--_active);
    transition: background-color 0.9s var(--_ease);
  }
  .oa-hiw--pin .oa-hiw__side {
    position: sticky;
    top: var(--_stick, 96px);
    transition: top 0.35s var(--_ease);
    align-self: start;
    margin: 0;
    padding: 8px 0;
  }
  .oa-hiw--pin.oa-hiw--manual .oa-hiw__side { position: relative; top: auto; will-change: transform; }
  .oa-hiw--pin .oa-hiw__title { font-size: clamp(3rem, 6.6cqw, 6.5rem); }
  .oa-hiw--pin .oa-hiw__tracker { display: flex; gap: 8px; margin-top: 40px; }
  .oa-hiw--pin .oa-hiw__dot {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--_ink);
    font-size: var(--_fs-label);
    font-variant-numeric: tabular-nums;
    transition: background-color 0.4s var(--_ease), color 0.4s var(--_ease);
  }
  .oa-hiw--pin .oa-hiw__dot[aria-current="step"] { background: var(--_ink); color: var(--_paper); }
  .oa-hiw--pin .oa-hiw__step {
    /* one-sentence steps: about half a screen each, so the four take two screens, not four */
    min-height: 46vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 0;
    background: none;
    opacity: 0.22;
    transition: opacity 0.6s var(--_ease);
  }
  .oa-hiw--pin .oa-hiw__step.is-active { opacity: 1; }
  .oa-hiw--pin .oa-hiw__stitle { font-size: clamp(2.4rem, 5cqw, 5rem); }
  .oa-hiw--pin .oa-hiw__img { max-width: 520px; }
}

/* ---------- 3. places ---------- */

.oa-places { --_mask: var(--oa-places-mask, var(--_paper)); }
.oa-places__hero { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 18px; }
.oa-places__word {
  display: block;
  font-family: var(--_display);
  font-stretch: var(--_stretch);
  font-weight: var(--oa-places-weight, 600);
  letter-spacing: var(--_dt);
  text-transform: uppercase;
  line-height: 0.82;
  white-space: nowrap;
  text-align: center;
  color: var(--_accent);
  font-size: 18cqw;
  padding: 0.05em 0 0.04em;
}
.oa-places__wordtext { display: inline-block; }
.oa-places__word--clip {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: var(--_fill);
  background-size: cover;
  background-position: 50% 50%;
  animation: oa-drift 26s ease-in-out infinite alternate;
}
@keyframes oa-drift { from { background-position: 30% 35%; } to { background-position: 70% 65%; } }

.oa-places__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* The word punched out of a paper layer: black type blended with "screen" shows the video only inside the letters */
.oa-places__mask {
  position: relative;
  z-index: 1;
  background: var(--_mask);
  color: #000;
  -webkit-text-fill-color: #000;
  mix-blend-mode: screen;
}

.oa-places__ch {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 14px;
  padding: 18px 0 40px;
  border-top: 1px solid var(--_ink);
}
.oa-places__idx { font-size: var(--_fs-text); color: var(--_accent-text); font-variant-numeric: tabular-nums; }
.oa-places__name { font-size: clamp(2.4rem, 11cqw, 11rem); line-height: 0.85; }
.oa-places__line { font-size: var(--_fs-lead); line-height: 1.25; max-width: 26ch; }
.oa-places__line.is-todo { color: var(--_accent-text); }
.oa-places__media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--_c); }
.oa-places__media img,
.oa-places__media video { width: 100%; height: 100%; object-fit: cover; }
.oa-places__media.is-empty {
  background:
    repeating-linear-gradient(135deg, rgba(23, 23, 27, 0.08) 0 1px, transparent 1px 14px),
    var(--_c);
  display: grid;
  place-items: center;
}
.oa-places__media.is-empty .oa-tag { background: var(--_paper); border-color: var(--_ink); }
.oa-places .oa-in { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--_ease), transform 1.1s var(--_ease); }
.oa-places .oa-in.is-in { opacity: 1; transform: none; }

@container (min-width: 820px) {
  .oa-places__ch {
    grid-template-columns: minmax(48px, 1fr) minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 11px;
    row-gap: 26px;
    padding: 22px 0 64px;
  }
  .oa-places__idx { grid-row: 1; padding-top: 0.2em; }
  .oa-places__name { grid-column: 2 / 4; }
  .oa-places__line { grid-column: 2; align-self: end; }
  .oa-places__media { grid-column: 3; }
  /* Type-only chapter: the line sits under the name on the right */
  .oa-places__ch--text .oa-places__line { grid-column: 3; }
}
.oa-places__ch--text { padding-bottom: 32px; }

/* ---------- 4. notes ---------- */

.oa-notes__headtext { display: inline-block; }
.oa-kit .oa-notes__headline {
  font-size: 13cqw;
  line-height: 0.82;
  text-align: center;
  color: var(--_accent);
  white-space: nowrap;
}
.oa-notes__board { display: grid; gap: 14px; margin-top: 24px; padding: 0 6px; }
.oa-note {
  position: relative;
  padding: 20px 20px 18px;
  background: var(--_c);
  color: var(--_ink);
  border: 1px solid var(--_ink);
  transform: rotate(var(--_rm, 0deg));
  transition: transform 0.7s var(--_ease), scale 0.3s var(--_ease), box-shadow 0.3s var(--_ease);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* picked up: it lifts off the board a little and casts a soft shadow */
.oa-note.is-held { cursor: grabbing; scale: 1.035; box-shadow: 0 26px 34px -22px rgba(23, 23, 27, 0.5); }
/* "Tidy up" shows once a note has moved; it sits in the space under the board, so the
   section keeps its height either way */
.oa-notes__foot { position: relative; height: 0; }
.oa-kit .oa-notes__tidy {
  position: absolute;
  left: 50%;
  top: 22px;
  translate: -50% 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--_ease), visibility 0s linear 0.4s, background-color 0.6s var(--_ease), color 0.6s var(--_ease);
}
.oa-kit .oa-notes__tidy.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.oa-note__mark {
  display: block;
  font-family: var(--_display);
  font-stretch: var(--_stretch);
  font-size: 3.2rem;
  line-height: 0.7;
  height: 0.45em;
  margin-bottom: 12px;
  color: var(--_accent-text);
}
.oa-note__quote { font-size: var(--_fs-lead); line-height: 1.22; }
.oa-note__who { margin-top: 16px; font-size: var(--_fs-label); letter-spacing: var(--_lt); text-transform: uppercase; line-height: 1.3; }
.oa-note__who strong { display: block; font-weight: 400; }
.oa-note__who span { display: block; color: var(--_muted); }
.oa-note--empty {
  background: var(--_paper);
  border: 1px dashed var(--_accent);
  color: var(--_accent-text);
  min-height: 110px;
  display: grid;
  place-items: center;
  text-align: center;
}
.oa-note--empty .oa-note__quote { font-size: var(--_fs-label); letter-spacing: var(--_lt); text-transform: uppercase; }

@container (min-width: 820px) {
  .oa-notes__wrap {
    position: relative;
    min-height: clamp(520px, 56cqw, 760px);
    display: grid;
    place-items: center;
  }
  .oa-notes__headline { position: relative; z-index: 1; }
  .oa-notes__board { position: absolute; inset: 0; margin: 0; padding: 0; display: block; z-index: 2; }
  .oa-note {
    position: absolute;
    left: var(--_x);
    top: var(--_y);
    width: clamp(250px, 29cqw, 380px);
    transform: rotate(var(--_r, 0deg));
  }
  .oa-note:hover,
  .oa-note:focus-within { transform: rotate(0deg); }
  .oa-note__quote { font-size: clamp(1.05rem, 1.55cqw, 1.4rem); }
}

/* more than three notes: a board as wide as the window, the headline in the middle and
   the notes pinned up around it (oa.js places each one on the grid) */
.oa-notes--ring .oa-notes__wrap {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--_cols, 2), minmax(0, 1fr));
  gap: clamp(18px, 2.6cqw, 44px) clamp(14px, 2cqw, 32px);
  align-items: center;
  justify-items: stretch;
}
.oa-kit.oa-notes--ring { box-sizing: border-box; padding-inline: clamp(24px, 3vw, 40px); }
.oa-notes--ring .oa-notes__board { display: contents; }
.oa-notes--ring .oa-notes__headline { position: relative; z-index: 1; margin: 0; align-self: center; }
.oa-notes--ring.is-ring .oa-notes__headline { line-height: 0.84; }
.oa-notes--ring.is-ring .oa-notes__word { display: block; }
.oa-notes--ring .oa-note {
  position: relative;
  z-index: 2;
  left: var(--_jx, 0px);
  top: var(--_jy, 0px);
  width: 100%;
  max-width: 400px;
  justify-self: center;
  transform: rotate(var(--_r, 0deg));
}
.oa-notes--ring .oa-note:hover { transform: rotate(var(--_r, 0deg)); }
/* rows packed closer together: half the nudge and a calmer tilt, so corners stay apart */
.oa-notes--ring:not(.is-ring) .oa-note,
.oa-notes--ring:not(.is-ring) .oa-note:hover {
  left: calc(var(--_jx, 0px) * 0.5);
  top: calc(var(--_jy, 0px) * 0.5);
  transform: rotate(calc(var(--_r, 0deg) * 0.6));
}
/* phones: one column, straight down, inside the page margins */
@container (max-width: 559px) {
  .oa-notes--ring:not(.is-ring) .oa-note,
  .oa-notes--ring:not(.is-ring) .oa-note:hover { left: 0; top: 0; transform: rotate(var(--_rm, 0deg)); }
}
@container (min-width: 820px) {
  .oa-notes--ring .oa-note__quote { font-size: clamp(1.02rem, 1.25cqw, 1.3rem); }
}

/* ---------- 5. ask ---------- */

.oa-ask { border: 1px solid var(--_ink); }
.oa-ask__title { font-size: clamp(2.2rem, 8cqw, 5.25rem); margin-top: 10px; }
.oa-kit .oa-ask__sub { margin-top: 14px; max-width: 44ch; line-height: 1.38; color: var(--_muted); }
.oa-ask__form { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.oa-ask__input {
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 22px;
  border: 1px solid var(--_ink);
  border-radius: 999px;
  background: var(--_white);
  font-family: var(--_text);
  font-size: 16px;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}
.oa-ask__input::placeholder { color: var(--_muted); opacity: 1; }
.oa-kit.oa-c .oa-ask__form .oa-pill { min-height: 52px; padding: 0 2.2em; }
.oa-ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.oa-kit.oa-c .oa-ask__chips .oa-pill { white-space: normal; text-align: left; font-size: 0.8rem; min-height: 38px; padding: 0.5em 1.2em 0.45em; }
.oa-ask__out { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--_ink); }
.oa-ask__out:empty { display: none; }
.oa-ask__answer { font-size: var(--_fs-lead); line-height: 1.28; white-space: pre-line; max-width: 46ch; }
.oa-ask__answer.is-wait { color: var(--_muted); }
.oa-kit .oa-ask__sources { margin-top: 14px; line-height: 1.5; font-size: var(--_fs-small); letter-spacing: var(--_lt); text-transform: uppercase; color: var(--_muted); }
.oa-kit .oa-ask__sources a { color: var(--_ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.oa-ask__dots span { display: inline-block; animation: oa-blink 1.2s infinite both; }
.oa-ask__dots span:nth-child(2) { animation-delay: 0.2s; }
.oa-ask__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes oa-blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

@container (min-width: 600px) {
  .oa-ask__form { flex-direction: row; }
  .oa-ask__input { flex: 1; }
}

/* ---------- 6. flipbook ---------- */

.oa-fb__stage { position: relative; width: 100%; }
.oa-fb__book { margin: 0 auto; }
.oa-fb__page { background: #fff; overflow: hidden; }
.oa-fb__page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.oa-fb__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 20px; }
.oa-fb__nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--_ink);
  display: inline-grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  transition: background-color 0.6s var(--_ease), color 0.6s var(--_ease);
}
@media (hover: hover) and (pointer: fine) {
  .oa-fb__nav:not([disabled]):hover { background: var(--_ink); color: var(--_paper); }
}
.oa-fb__nav[disabled] { opacity: 0.3; cursor: default; }
.oa-fb__count { min-width: 8.5em; text-align: center; font-size: var(--_fs-label); letter-spacing: var(--_lt); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.oa-kit .oa-fb__caption { margin-top: 14px; text-align: center; font-size: var(--_fs-small); letter-spacing: var(--_lt); text-transform: uppercase; line-height: 1.5; color: var(--_muted); }
.oa-kit .oa-fb__caption a { color: var(--_accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.oa-fb__hint { display: block; margin-top: 4px; text-transform: none; letter-spacing: 0; }
.oa-fb--simple .oa-fb__book { position: relative; max-width: min(100%, 560px); aspect-ratio: var(--_ratio, 0.7075); border: 1px solid var(--_line); }
.oa-fb--simple .oa-fb__page { position: absolute; inset: 0; display: none; }
.oa-fb--simple .oa-fb__page.is-current { display: block; }
.oa-fb .stf__parent { margin: 0 auto; }

/* ---------- 8. audience page ---------- */

.oa-aud__head { padding-bottom: clamp(28px, 5cqw, 72px); }
.oa-aud__kicker { color: var(--_accent-text); margin-bottom: 16px; }
.oa-kit .oa-aud__title { font-size: clamp(2.3rem, 8.4cqw, 8rem); line-height: 0.9; max-width: 16ch; text-wrap: balance; }
.oa-aud__intro { margin-top: 24px; font-size: var(--_fs-lead); line-height: 1.25; max-width: 36ch; }
.oa-aud__sec { padding: clamp(20px, 3cqw, 40px) 0; }
.oa-aud__sechead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.oa-aud__sechead .oa-draft { margin: 0; }
.oa-kit .oa-aud__label { color: var(--_accent-text); font-size: var(--_fs-label); letter-spacing: var(--_lt); text-transform: uppercase; line-height: 1.2; }
.oa-aud__list { border-top: 1px solid var(--_ink); list-style: none; margin: 0; padding: 0; }
.oa-aud__get {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr);
  column-gap: 11px;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--_ink);
}
.oa-aud__num { color: var(--_accent-text); font-size: var(--_fs-text); line-height: 1.3; font-variant-numeric: tabular-nums; padding-left: 2px; }
.oa-aud__gettext { font-size: var(--_fs-lead); line-height: 1.22; }
.oa-aud__case {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--_ink);
}
.oa-aud__case.is-plain { grid-template-columns: 64px minmax(0, 1fr); }
a.oa-aud__case::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--oa-line-tint, var(--_sky));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--_ease);
}
.oa-aud__thumb {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  background: var(--_white);
  border: 1px solid var(--_line);
}
.oa-aud__swatch { background: var(--_c, var(--_sky)); border-color: transparent; }
.oa-aud__tile { position: relative; display: block; overflow: hidden; background: #c9c4bb; border-color: transparent; }
.oa-aud__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 23, 27, 0.2), rgba(23, 23, 27, 0.42)); }
.oa-aud__tilebg, .oa-aud__tilelogo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; }
.oa-aud__tilelogo { z-index: 1; filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.3)); }
@media (hover: hover) { .oa-aud__tilebg { transition: transform 1s var(--_ease); } a.oa-aud__case:hover .oa-aud__tilebg { transform: scale(1.06); } }
.oa-aud__text { min-width: 0; }
.oa-aud__name {
  display: block;
  font-family: var(--_display);
  font-stretch: var(--_stretch);
  font-weight: 400;
  letter-spacing: var(--_dt);
  text-transform: uppercase;
  font-size: clamp(1.15rem, 4.2cqw, 2.6rem);
  line-height: 0.95;
  transition: transform 0.7s var(--_ease);
}
.oa-aud__line { display: block; margin-top: 6px; font-size: var(--_fs-text); line-height: 1.3; color: var(--_muted); }
.oa-aud__arrow { font-size: 1.5rem; line-height: 1; padding-right: 2px; transition: transform 0.7s var(--_ease); }
.oa-aud__embed { padding: clamp(24px, 4cqw, 56px) 0; }
.oa-aud__cta { padding-top: clamp(28px, 5cqw, 64px); }
.oa-kit.oa-c .oa-aud__ctabtn {
  min-height: 52px;
  max-width: 100%;
  padding: 0.6em 2.2em 0.55em;
  white-space: normal;
  text-align: center;
}

@container (min-width: 700px) {
  .oa-aud__case { grid-template-columns: 168px minmax(0, 1fr) auto; column-gap: 24px; padding: 18px 0; }
  .oa-aud__case.is-plain { grid-template-columns: 168px minmax(0, 1fr); }
  .oa-aud__thumb { width: 168px; height: 105px; }
}

@media (hover: hover) and (pointer: fine) {
  a.oa-aud__case:hover::before,
  a.oa-aud__case:focus-visible::before { transform: scaleX(1); }
  a.oa-aud__case:hover .oa-aud__name { transform: translateX(10px); }
  a.oa-aud__case:hover .oa-aud__arrow { transform: translateX(-6px) rotate(-45deg); }
}

/* ---------- 7. craft: dot cursor + word reveal ---------- */
/* One dot for the whole page (opt in with <div data-oa="cursor"></div>). The system
   cursor always stays visible. Over links and pills the dot opens into a ring, over
   [data-oa-cursor="open"|"play"] it becomes a disc with the word. */

.oa-kit.oa-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--oa-ink, #17171b);
  border: 1.5px solid transparent;
  color: #fff;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  padding: 0;
  font: 400 0.8rem/1 var(--oa-font-text, "Instrument Sans", Arial, sans-serif);
  transition: width 0.35s var(--_ease), height 0.35s var(--_ease), margin 0.35s var(--_ease),
              background-color 0.35s var(--_ease), border-color 0.35s var(--_ease), opacity 0.2s linear;
}
.oa-kit.oa-dot.is-on { opacity: 1; }
.oa-kit.oa-dot.is-on.is-away { opacity: 0; }
/* the ring sits over the link's own words, so it stays faint enough to read through */
.oa-kit.oa-dot.is-link { width: 38px; height: 38px; margin: -19px 0 0 -19px; background: transparent; border-color: rgba(23, 23, 27, 0.32); }
.oa-kit.oa-dot.is-accent { background: var(--oa-white, #fff); }
.oa-kit.oa-dot.is-accent.is-link { background: transparent; border-color: var(--oa-white, #fff); }
.oa-kit.oa-dot span {
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.35s var(--_ease);
  white-space: nowrap;
}
.oa-kit.oa-dot.is-label { width: 84px; height: 84px; margin: 8px 0 0 8px; border-color: transparent; background: var(--oa-poppy, #ef4a24); }
.oa-kit.oa-dot.is-label span { opacity: 1; transform: none; }

/* Firefox drops the space between two word boxes under Squarespace's pre-wrap at some widths
   ("UK-educatedEgyptian" on /about, a friend of Omar's, 14 Oct); normal wrapping keeps every space */
.oa-words { white-space: normal !important; }
.oa-words .oa-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.oa-words .oa-w > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--_d, 0ms);
}
.oa-words.is-in .oa-w > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .oa-places .oa-in { opacity: 1; transform: none; }
  .oa-wi__row:hover .oa-wi__name,
  .oa-wi__row:hover .oa-wi__arrow { transform: none; }
  .oa-words .oa-w > span { transform: none; transition: none; }
  .oa-kit.oa-dot { display: none !important; }
}

/* ---------- 9. project reel (homepage "Selected projects") ---------- */
/* The Squarespace carousel stays in the page as the source; the reel replaces it on screen. */
.oa-reel-src { display: none !important; }
.oa-kit.oa-reel {
  --oa-reel-size: clamp(132px, 14.5vw, 216px);
  --oa-reel-gap: clamp(10px, 1.2vw, 16px);
  position: relative;
  display: block;
  max-width: none;
  background: transparent; /* the section's color shows through */
}
.oa-kit .oa-reel__rail {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.oa-kit .oa-reel__rail::-webkit-scrollbar { display: none; }
.oa-kit .oa-reel__list {
  display: flex;
  gap: var(--oa-reel-gap);
  width: max-content;
  margin: 0;
  padding: 6px 0;
  list-style: none;
}
.oa-kit .oa-reel__item { flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
.oa-kit .oa-reel__item::before { content: none; }
.oa-kit .oa-reel__card {
  display: block;
  width: var(--oa-reel-size);
  aspect-ratio: 1;
  perspective: 900px;
  color: var(--oa-ink);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
.oa-kit .oa-reel__in {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--oa-ease);
}
.oa-kit .oa-reel__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--oa-white);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.oa-kit .oa-reel__img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; pointer-events: none; }
.oa-kit .oa-reel__back { transform: rotateY(180deg); padding: 12%; background: var(--oa-reel-tint, var(--oa-sky)); }
/* case tiles: a photograph from the work, softened, under the logo in white */
.oa-kit .oa-reel__photo { position: absolute; inset: 0; display: block; background: var(--oa-reel-tint, #c9c4bb); }
.oa-kit .oa-reel__bg, .oa-kit .oa-reel__logo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; pointer-events: none; }
.oa-kit .oa-reel__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 23, 27, 0.2), rgba(23, 23, 27, 0.42)); }
.oa-kit .oa-reel__logo { z-index: 1; filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.3)); }

/* body:not(...) span sets the text face site-wide, so the name needs the extra weight */
body .oa-kit.oa-reel .oa-reel__name,
body .oa-kit.oa-reel .oa-reel__word {
  font-family: var(--oa-font-display) !important;
  font-stretch: var(--oa-display-stretch);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.3vw, 1.25rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}
@media (hover: hover) and (pointer: fine) {
  .oa-kit .oa-reel__card:hover .oa-reel__in { transform: rotateY(180deg); }
}
.oa-kit .oa-reel__card:focus-visible .oa-reel__in,
.oa-kit .oa-reel__card.is-turned .oa-reel__in { transform: rotateY(180deg); }
.oa-kit .oa-reel__card:focus-visible .oa-reel__back { box-shadow: inset 0 0 0 2px var(--oa-ink); }
/* drag: grab the row, throw it, cards lean into the motion and bounce back */
.oa-kit .oa-reel__rail { cursor: grab; -webkit-user-select: none; user-select: none; }
.oa-kit.oa-reel.is-grabbed .oa-reel__rail,
.oa-kit.oa-reel.is-grabbed .oa-reel__card { cursor: grabbing; }
.oa-kit .oa-reel__item { transform: skewX(var(--oa-reel-lean, 0deg)); }
.oa-kit .oa-reel__card { transition: scale 0.65s cubic-bezier(0.34, 1.7, 0.64, 1); }
.oa-kit.oa-reel.is-grabbed .oa-reel__card { scale: 0.93; transition-duration: 0.28s; }
.oa-kit.oa-reel.is-dragging .oa-reel__card:hover .oa-reel__in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .oa-kit .oa-reel__in { transition: none; }
  .oa-kit .oa-reel__item { transform: none; }
}

/* ---------- 10. section wash (set by oa.js on pages listed in WASH) ---------- */
/* The page itself carries the color and eases between sections; the sections
   and kit panels go see-through so the color shows behind them. */
body.oa-wash {
  background-color: var(--oa-wash, #f6f6f2) !important;
  transition: background-color 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}
body.oa-wash section.page-section,
body.oa-wash section.page-section > .section-border,
body.oa-wash section.page-section .section-background { background-color: transparent !important; }
body.oa-wash .oa-kit.oa-c { --oa-component-bg: transparent; }

/* ---------- 11. section rhythm (with the wash) ---------- */
/* One space above and below every section's content (--oa-rhythm, set by oa.js);
   the color wash marks where sections change, so space only separates content. */
body.oa-wash section.oa-rhythm { min-height: 0 !important; }
body.oa-wash section.oa-rhythm > .content-wrapper {
  min-height: 0 !important;
  padding-top: var(--oa-rhythm, 96px) !important;
  padding-bottom: var(--oa-rhythm, 96px) !important;
}
body.oa-wash section.oa-rhythm .user-items-list { padding-top: 0 !important; padding-bottom: 0 !important; }
body .sqs-block.oa-blank { display: none !important; }
/* kit panels sit straight on the section: the section's rhythm is their margin */
body.oa-wash .oa-kit.oa-c { --oa-panel-pad: 0px; }
body.oa-wash .oa-kit.oa-c:not(.oa-nested) { padding-left: 0; padding-right: 0; }

/* list section titles ("Selected projects") match the other section titles:
   display face, left aligned on the page's content edge */
body.oa-wash .user-items-list-section .list-section-title {
  max-width: var(--sqs-site-max-width, 1200px);
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: clamp(28px, 3.4vw, 52px) !important;
  padding-bottom: 0 !important;
  text-align: left !important;
}
/* phones: Squarespace pads list titles 4vw, the grid content sits at 6vw */
@media (max-width: 767px) {
  body.oa-wash .user-items-list-section .list-section-title { padding-left: 6vw !important; padding-right: 6vw !important; }
}
body.oa-wash .user-items-list-section .list-section-title :is(p, h1, h2, h3) {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif !important;
  font-stretch: 125%;
  font-weight: 400;
  font-size: var(--oa-title-size, clamp(2.4rem, 4.45vw, 4rem)) !important;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: left !important;
  margin: 0;
}

/* ---------- 12. portfolio page: project list in place of the grid ---------- */
.oa-grid-src { display: none !important; }
.oa-portfolio-index { max-width: var(--sqs-site-max-width, 1200px); margin: 0 auto; }

/* ---------- 13. booking card (stands in for a lapsed Acuity scheduler) ---------- */
.oa-kit.oa-book {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: clamp(28px, 3vw, 44px);
  background: var(--oa-white);
}
.oa-kit .oa-book__h {
  margin: 0;
  font: 400 var(--oa-step-h3)/1.05 var(--oa-font-display); font-stretch: var(--oa-display-stretch);
  letter-spacing: -0.03em; color: var(--oa-ink);
}
.oa-kit .oa-book__p { margin: 0 0 8px; max-width: 34ch; font-size: var(--oa-step-text); line-height: 1.45; color: var(--oa-ink-soft); }
.oa-kit.oa-book .oa-pill { min-height: 52px; padding-inline: 2.2em; text-decoration: none; }

/* ---------- 14. round 5: filters note, projector index, copy address, demo slot ---------- */

/* door memory on Portfolio: a quiet line under the filters */
.oa-kit .oa-wi__note {
  margin: -10px 0 22px;
  font-size: var(--_fs-small);
  line-height: 1.4;
  color: var(--_muted);
}
.oa-kit .oa-wi__reset {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 0 4px;
  font: inherit;
  color: var(--_ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.oa-kit .oa-wi__reset:hover { color: var(--_accent-text); }

/* projector index (preview): 16:9 frame with dashed crop marks beside the cursor */
.oa-wi__follow.oa-wi__follow--proj {
  width: clamp(240px, 26cqw, 380px);
  aspect-ratio: 16 / 9;
  overflow: visible;
  background: transparent;
  border: 0;
}
.oa-wi__frame { position: absolute; inset: 0; overflow: hidden; background: var(--_white); }
.oa-wi__frame img { transform-origin: 50% 50%; }
.oa-wi__frame img.is-on { animation: oa-wi-push 3s var(--_ease) both; }
@keyframes oa-wi-push { from { transform: scale(1); } to { transform: scale(1.06); } }
.oa-wi__mark { position: absolute; width: 22px; height: 22px; border: 0 dashed var(--_ink); pointer-events: none; }
.oa-wi__mark--tl { left: -10px; top: -10px; border-top-width: 1px; border-left-width: 1px; }
.oa-wi__mark--tr { right: -10px; top: -10px; border-top-width: 1px; border-right-width: 1px; }
.oa-wi__mark--bl { left: -10px; bottom: -10px; border-bottom-width: 1px; border-left-width: 1px; }
.oa-wi__mark--br { right: -10px; bottom: -10px; border-bottom-width: 1px; border-right-width: 1px; }
@media (prefers-reduced-motion: reduce) {
  .oa-wi__frame img.is-on { animation: none; }
}

/* the kit cursor over a projector row: a small poppy REC dot and a running timecode */
.oa-kit.oa-dot.is-rec { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--oa-poppy, #ef4a24); border-color: transparent; animation: oa-rec 1.4s ease-in-out infinite; }
.oa-kit.oa-dot.is-rec span {
  position: absolute;
  left: 22px;
  top: 50%;
  opacity: 1;
  transform: translateY(-50%);
  padding: 3px 7px 2px;
  background: var(--oa-paper, #f6f6f2);
  border: 1px solid var(--oa-ink, #17171b);
  color: var(--oa-ink, #17171b);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
@keyframes oa-rec { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* address as text with a small Copy button */
.oa-kit .oa-copy { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; vertical-align: baseline; }
.oa-kit .oa-copy__addr { font-size: var(--_fs-small); color: var(--_muted); }
.oa-kit .oa-copy__btn {
  appearance: none;
  background: none;
  border: 1px solid var(--_ink);
  border-radius: 999px;
  padding: 3px 11px 2px;
  min-height: 26px;
  font: 500 0.75rem/1.2 var(--_text);
  letter-spacing: 0.02em;
  color: var(--_ink);
  cursor: pointer;
  transition: background-color 0.4s var(--_ease), color 0.4s var(--_ease);
}
.oa-kit .oa-copy__btn:hover { background: var(--_ink); color: var(--_paper); }

/* audience: the demo, first, with its title */
.oa-aud__demo { padding: clamp(32px, 5cqw, 72px) 0 clamp(24px, 4cqw, 56px); }
/* one step under the page title above it, so the two never read as rival headlines */
.oa-kit .oa-aud__demotitle { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1; margin: 0; max-width: 20ch; text-wrap: balance; }
.oa-kit .oa-aud__promise { margin: 14px 0 0; font-size: var(--_fs-text); line-height: 1.4; color: var(--_muted); max-width: 46ch; }
.oa-aud__slot { margin-top: clamp(20px, 3cqw, 36px); }
.oa-aud__slot > .oa-kit.oa-c { padding-left: 0; padding-right: 0; --oa-panel-pad: 0px; }

/* "You picked AI. Change": where the door's choice reorders things */
.oa-kit.oa-door-line { margin: 14px 0 0; font-size: var(--_fs-small); line-height: 1.4; color: var(--_muted); background: transparent; padding: 0; }
.oa-kit.oa-door-line.oa-wi__doorline { margin: 0 0 14px; }
.oa-kit.oa-door-line.oa-reel__doorline { max-width: var(--sqs-site-max-width, 1200px); margin: 16px auto 0; padding: 0 6vw; }

/* one pill height: solid primary CTAs are 52px on desktop, 56px on phones; chips stay small */
.oa-kit.oa-c .oa-pill.oa-pill--solid, .oa-kit.oa-c .oa-aud__ctabtn { min-height: 52px; }
@media (max-width: 767px) {
  .oa-kit.oa-c .oa-pill.oa-pill--solid, .oa-kit.oa-c .oa-aud__ctabtn { min-height: 56px; }
}
/* the audience sits on the site's content edge (the washed service pages already zero the panel padding) */
body.oa-wash .oa-kit.oa-c.oa-aud { padding-left: 0; padding-right: 0; --oa-panel-pad: 0px; }

/* ---------- 14. contact sheet: the stock form steps out of the layout ---------- */
/* While the contact sheet drives the Squarespace form behind the scenes, the form's
   grid cell and its reserved rows go too. If the sheet has to show the form again
   (a failed send), it removes the class and both come back. */
body .fe-block:has(> .sqs-block.oa-sheet-form-hidden) { display: none !important; }
body .fluid-engine:has(> .fe-block > .sqs-block.oa-sheet-form-hidden) { grid-template-rows: none !important; }
/* the Copy button beside Squarespace's own address links (footer, Contact details) */
.oa-kit.oa-copy-site { display: inline; margin-left: 4px; vertical-align: baseline; background: none; padding: 0; }
.oa-kit.oa-copy-site .oa-copy { display: inline-flex; }
.oa-kit.oa-copy-site .oa-copy__btn { min-height: 24px; padding: 2px 10px 1px; font-size: 0.8125rem; }
/* work index tags in sentence case, like the filter pills above them */
.oa-kit.oa-wi .oa-tag, .oa-kit .oa-wi .oa-tag { text-transform: none; letter-spacing: 0.01em; }
/* scrub to watch (preview): sits between sections on the content edge */
.oa-scrub-wrap { padding: clamp(48px, 7vw, 108px) max(6vw, calc((100% - 1200px) / 2)) 0; background: transparent; }

/* ---------- 15. About: one-paragraph bio and the closing line (Omar's picks, 2026-10-11) ---------- */
section.oa-about-bio-sec { min-height: 0 !important; }
section.oa-about-bio-sec > .content-wrapper { min-height: 0 !important; padding-top: clamp(64px, 8vw, 120px) !important; padding-bottom: clamp(64px, 8vw, 120px) !important; }
.oa-kit.oa-about-bio { width: 100%; max-width: var(--sqs-site-max-width, 1200px); margin: 0 auto; padding: 0; box-sizing: border-box; background: transparent; }
.oa-kit.oa-about-bio p {
  margin: 0; max-width: 36ch;
  font: 400 clamp(1.35rem, 2.1vw, 1.9rem)/1.22 var(--oa-font-display); font-stretch: var(--oa-display-stretch);
  letter-spacing: -0.02em; color: var(--oa-ink); text-wrap: pretty;
}
.oa-kit.oa-about-close { width: 100%; box-sizing: border-box; padding: clamp(56px, 7vw, 108px) 0 clamp(40px, 5vw, 72px); background: transparent; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.oa-kit .oa-about-close__line {
  margin: 0; max-width: 22ch;
  font: 400 clamp(1.7rem, 3.4vw, 3rem)/1.06 var(--oa-font-display); font-stretch: var(--oa-display-stretch);
  letter-spacing: -0.03em; color: var(--oa-ink); text-wrap: balance;
}
.oa-kit.oa-about-close .oa-pill { min-height: 52px; padding-inline: 2.2em; text-decoration: none; }


/* ---------- 16. Homepage loading screen ----------
   The stylesheet paints it on its own (chalk, "Hello" rising in), so it shows even when Squarespace's
   scripts are slow and the kit arrives late; it lifts after 2.2 s whatever happens. When oa.js runs in
   time it takes over (html.oa-loaded) and finishes the greeting in four scripts. */
body::after {
  content: "Hello"; position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
  background: var(--oa-chalk, #f6f6f2); color: var(--oa-ink, #17171b);
  font: 500 clamp(3.2rem, 11vw, 9.5rem)/1.25 var(--oa-font-display, "Archivo", "Helvetica Neue", Arial, sans-serif);
  font-stretch: 112%; letter-spacing: -0.02em;
  pointer-events: none; animation: oa-hello-words 3.12s steps(1) infinite, oa-loader-fallback 0.85s cubic-bezier(0.76, 0, 0.24, 1) 12s forwards;
}
@keyframes oa-loader-fallback { to { transform: translateY(-100%); visibility: hidden; } }
/* the stylesheet's own sheet turns through the hellos too, so the languages show from the first moment,
   before the kit arrives (Omar, 13 Oct) */
@keyframes oa-hello-words {
  0% { content: "Hello"; } 8.33% { content: "Hallo"; } 16.66% { content: "こんにちは"; } 25% { content: "Hola"; }
  33.33% { content: "أهلاً"; } 41.66% { content: "Bonjour"; } 50% { content: "Ciao"; } 58.33% { content: "Olá"; }
  66.66% { content: "Merhaba"; } 75% { content: "Hej"; } 83.33% { content: "Salut"; } 91.66% { content: "Moin"; }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: oa-loader-fallback 0.85s linear 12s forwards; } }

@media (prefers-reduced-motion: reduce) { @keyframes oa-loader-fallback { to { opacity: 0; visibility: hidden; } } }
html.oa-loaded body::after { content: none; display: none; }
/* speed pass (2026-10-13): while the sheet is up, the page is at least a screen tall, so the footer starts
   below the fold and doesn't jump down as the kit fills the page in (that jump was most of the pages'
   layout-shift score). The floor goes once the sheet has lifted and the page has loaded (oa.js adds oa-shown). */
html:not(.oa-shown) main#page { min-height: 100vh; }
.oa-loader {
  position: fixed; inset: 0; z-index: 2147483001; background: var(--oa-chalk, #f6f6f2); color: var(--oa-ink, #17171b);
  display: grid; place-items: center; overflow: hidden;
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s ease;
}
.oa-loader.is-lifting { transform: translateY(-100%); }
.oa-loader.is-fading { opacity: 0; }
.oa-loader__line { position: relative; height: 1.25em; width: 100%; overflow: hidden; font: 500 clamp(3.2rem, 11vw, 9.5rem)/1.25 var(--oa-font-display, "Archivo", "Helvetica Neue", Arial, sans-serif); font-stretch: 112%; letter-spacing: -0.02em; text-align: center; }
.oa-loader__word { position: absolute; inset: 0; animation: oa-loader-in 0.22s cubic-bezier(0.19, 1, 0.22, 1) both; }
.oa-loader__word.is-still { animation: none; }
.oa-loader__word.is-out { animation: oa-loader-out 0.18s cubic-bezier(0.55, 0, 0.45, 1) both; }
@keyframes oa-loader-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes oa-loader-out { to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .oa-loader__word, .oa-loader__word.is-out { animation: none; }
  .oa-loader__word.is-out { visibility: hidden; }
}

/* ---------- 17. Home hero: the photo shows at once, the effect takes over when it loads ----------
   Squarespace's "refracted circles" effect keeps the photo hidden until its WebGL bundle has loaded
   (seconds on a slow line). Show the plain photo underneath straight away; the effect's canvas draws
   on top of it as soon as it is ready, so the 3D feel stays. */
/* the same for every Squarespace image effect (the Contact banner uses one too) */
body .section-background-content img.background-image-fx {
  visibility: visible !important; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}


/* ---------- 18. Photo banners: the nav and the title stay readable (audit 2026-10-11) ----------
   A soft dark band behind the header, and a little more shade under the page title, only on a
   first section that carries a photo. The home hero keeps its own look. */
body:not(.homepage) section.page-section:first-child .section-background:has(img)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: min(220px, 40%); z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(10, 10, 12, 0.42), rgba(10, 10, 12, 0));
}
body:not(.homepage) section.page-section:first-child .section-background:has(img) .section-background-overlay {
  opacity: 0.26 !important;
}

/* Headings set their lines evenly instead of leaving one word on the last line */
.sqs-html-content :is(h1, h2, h3, h4) { text-wrap: balance; }

/* Site films hosted with the kit */
.oa-kit.oa-film { width: 100%; padding: 0; background: transparent; }
.oa-kit .oa-film__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.oa-kit .oa-film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Service pages: one client quote above the button */
.oa-aud__quote { margin: clamp(28px, 5cqw, 64px) 0 0; padding: 0; max-width: 46ch; }
.oa-aud__quote blockquote { margin: 0; }
.oa-aud__quote p { margin: 0; font: 400 clamp(1.25rem, 2.2vw, 1.75rem)/1.28 var(--oa-font-display); font-stretch: var(--oa-display-stretch); letter-spacing: -0.015em; color: var(--oa-ink); text-wrap: pretty; }
.oa-aud__quote figcaption { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 2px 10px; font: 400 var(--oa-step-small)/1.3 var(--oa-font-text); }
.oa-aud__qname { font-weight: 600; color: var(--oa-ink); }
.oa-aud__qrole { color: var(--oa-ink-soft); }

/* ---------- Services overview (/services) ---------- */
.oa-svc__head { padding-bottom: clamp(32px, 6cqw, 88px); }
.oa-svc__kicker { color: var(--_accent-text); margin-bottom: 16px; }
.oa-kit .oa-svc__title { font-size: clamp(2.4rem, 8.6cqw, 8.2rem); line-height: 0.9; max-width: 14ch; text-wrap: balance; margin: 0; }
.oa-svc__intro { margin-top: 24px; font-size: var(--_fs-lead); line-height: 1.25; max-width: 34ch; text-wrap: pretty; }
.oa-svc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 4cqw, 56px); }
.oa-svc__card {
  --_tint: var(--_sky);
  display: grid; grid-template-columns: minmax(0, 1fr); color: inherit; text-decoration: none;
  background: var(--_white); border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--_line);
  transition: box-shadow 0.6s var(--_ease), transform 0.6s var(--_ease);
}
.oa-svc__card[data-lane="launch"] { --_tint: var(--_lilac); }
.oa-svc__card[data-lane="comms"] { --_tint: var(--_blush); }
.oa-svc__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--_tint); }
.oa-svc__img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 1.2s var(--_ease); }
.oa-svc__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3.4cqw, 48px); background: color-mix(in srgb, var(--_tint) 38%, var(--_white)); }
.oa-svc__num { font-size: var(--_fs-label); letter-spacing: var(--_lt); text-transform: uppercase; color: var(--_accent-text); font-variant-numeric: tabular-nums; }
.oa-kit .oa-svc__h { font-size: clamp(1.9rem, 4.4cqw, 3.9rem); line-height: 0.95; margin: 0; max-width: 13ch; text-wrap: balance; }
.oa-svc__line { font-size: var(--_fs-lead); line-height: 1.25; max-width: 30ch; text-wrap: pretty; }
.oa-svc__proof { font-size: var(--_fs-text); line-height: 1.35; color: var(--_muted); }
.oa-svc__go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 10px; font-size: var(--_fs-text); font-weight: 500; }
.oa-svc__go span:first-child { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.oa-svc__arrow { font-size: 1.4rem; line-height: 1; transition: transform 0.7s var(--_ease); }
.oa-svc__item.is-picked .oa-svc__card { box-shadow: 0 0 0 2px var(--_ink); }
.oa-svc__close { padding-top: clamp(40px, 7cqw, 96px); display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.oa-svc__closeline { margin: 0; font-size: var(--_fs-lead); line-height: 1.25; max-width: 32ch; text-wrap: pretty; }
.oa-svc__card:focus-visible { outline: 2px solid var(--_accent); outline-offset: 4px; }
@media (hover: hover) {
  .oa-svc__card:hover { box-shadow: 0 0 0 1px var(--_ink), 0 18px 40px -24px rgba(23, 23, 27, 0.35); }
  .oa-svc__card:hover .oa-svc__img { transform: scale(1.045); }
  .oa-svc__card:hover .oa-svc__arrow { transform: translateX(8px); }
  .oa-svc__card:hover .oa-svc__go span:first-child { color: var(--_accent-text); }
}
@container (min-width: 760px) {
  .oa-svc__card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: clamp(380px, 42cqw, 560px); }
  .oa-svc__media { aspect-ratio: auto; }
  .oa-svc__item:nth-child(even) .oa-svc__card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .oa-svc__item:nth-child(even) .oa-svc__media { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .oa-svc__img, .oa-svc__arrow, .oa-svc__card { transition: none; }
}

/* Portfolio banner: a film photo in the empty first section */
body section.page-section.oa-banner { min-height: clamp(320px, 42vw, 600px) !important; position: relative; }
body section.page-section.oa-banner .section-border { position: absolute !important; inset: 0; display: block !important; }
body section.page-section.oa-banner .section-background { position: absolute !important; inset: 0; overflow: hidden; }
body section.page-section.oa-banner img.oa-banner__img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; }
body section.page-section.oa-banner .oa-banner__shade { position: absolute; inset: 0; background: #0a0a0c; opacity: 0.26; }
/* hold the banner's space from the first paint, so the list below doesn't jump when it arrives */
body.collection-63b4524fbcaca1576b84d585.view-list:not(.sqs-edit-mode):not(.sqs-is-page-editing) #page article > section.page-section:first-child { min-height: clamp(320px, 42vw, 600px); background: #cfd8de; }

/* projects without a case photo: the logo on a soft tint (its white ground multiplies away) */
.oa-kit .oa-reel__tinted { position: absolute; inset: 0; display: block; background: var(--oa-reel-tint, var(--oa-sky)); }
.oa-kit .oa-reel__tinted .oa-reel__img { mix-blend-mode: multiply; }

/* One H1 per page: a heading whose level changed keeps the size it had (Squarespace's scale) */
h2.oa-look-h1 { line-height: calc(var(--heading-font-line-height) * (1 + (1 - var(--heading-1-size-value)) / 25)); color: var(--headingExtraLargeColor); }
h1.oa-look-h2 { line-height: calc(var(--heading-font-line-height) * (1 + (1 - var(--heading-2-size-value)) / 25)); color: var(--headingLargeColor); }
@media screen and (max-width: 767px) and (orientation: portrait) {
  h2.oa-look-h1 { font-size: calc((var(--heading-1-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem); }
  h1.oa-look-h2 { font-size: calc((var(--heading-2-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem); }
}
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  h2.oa-look-h1 { font-size: min(calc((var(--heading-1-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--heading-1-size-value) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--heading-1-size-value) * 1rem))); }
  h1.oa-look-h2 { font-size: min(calc((var(--heading-2-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--heading-2-size-value) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--heading-2-size-value) * 1rem))); }
}

/* Case films added by the kit: same width and margins as the page's own content */
section.page-section.oa-film-sec { display: block; padding: clamp(40px, 6vw, 96px) 0; }
.oa-film-sec__in { width: min(100% - 2 * max(16px, 6vw), var(--sqs-site-max-width, 1200px)); margin: 0 auto; }

/* /services, drawn by the kit */
section.page-section.oa-svc-sec { display: block; padding: clamp(190px, 16vw, 230px) 0 clamp(64px, 8vw, 120px); background: var(--oa-paper, #f6f6f2); }
.oa-svc-sec__in { width: min(100% - 2 * max(16px, 6vw), var(--sqs-site-max-width, 1200px)); margin: 0 auto; }
.oa-kit.oa-c.oa-svc { padding: 0; background: transparent; }

/* Films: a silent preview loops on screen; the button plays the whole film here, with sound.
   The picture is never cropped. */
.oa-kit .oa-film__frame video, .oa-film--native video { object-fit: contain; }
.oa-film--preview { cursor: pointer; }
.oa-film--preview :is(video, iframe, .plyr__poster, .section-background, .content-wrapper) { cursor: pointer; }
/* An embedded preview leaves picture clicks and keyboard focus to the Play pill. */
.oa-film--preview iframe { pointer-events: none; }
.oa-film__play {
  position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px 14px 18px; border: 0; border-radius: 999px;
  background: rgba(246, 246, 242, 0.92); color: #17171b; font: 500 1rem/1 var(--oa-font-text, "Instrument Sans", sans-serif);
  cursor: pointer; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45); transition: transform 0.4s var(--oa-ease, ease), background 0.3s;
}
.oa-film__play:hover { transform: translate(-50%, -50%) scale(1.05); background: #fff; }
.oa-film__play:focus-visible { outline: 2px solid #ef4a24; outline-offset: 3px; }
.oa-film__playicon { width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #ef4a24; }
@media (max-width: 600px) { .oa-film__play { padding: 11px 18px 11px 14px; font-size: 0.9375rem; } }

/* ---------- Case studies: nothing cropped (Omar, 2026-10-12) ---------- */
body.collection-63b4524fbcaca1576b84d585.view-item #page .sqs-block-image img { object-fit: contain !important; }
/* film sections take the film's own shape; the first seconds loop, the button plays it here */
section.page-section.oa-vsec { aspect-ratio: var(--oa-ar, 1.7778); min-height: 0 !important; height: auto !important; position: relative; overflow: hidden; }
section.page-section.oa-vsec .section-border, section.page-section.oa-vsec .section-background { position: absolute !important; inset: 0; }
section.page-section.oa-vsec .section-background :is(video, img) { object-fit: contain !important; width: 100% !important; height: 100% !important; }
section.page-section.oa-vsec .content-wrapper { position: absolute !important; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 !important; min-height: 0 !important; pointer-events: none; }
section.page-section.oa-vsec .content-wrapper a { pointer-events: auto; }
.oa-vsec__hide { display: none !important; }
.oa-vsec__player { position: absolute; inset: 0; z-index: 5; background: #000; }
.oa-vsec__player :is(iframe, video) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.oa-vblock { position: relative; }
/* the mock-up that used to open the page, shown whole */
section.page-section.oa-mock-sec { display: block; padding: clamp(32px, 5vw, 80px) 0; }
.oa-mock-sec__fig { margin: 0 auto; width: min(100% - 2 * max(16px, 6vw), 620px); }
.oa-mock-sec__fig img { display: block; width: 100%; height: auto; }
/* while the preview runs, Squarespace's own play circle and controls stay out of the way */
.oa-vblock.oa-film--preview :is(.plyr__control--overlaid, .plyr__controls, .video-player__loading-indicator, .sqs-native-video-thumbnail-play-icon, [class*="play-button"]) { display: none !important; }

/* ---------- Review fixes (2026-10-12) ---------- */
/* film sections: Squarespace's own round play button and bar never show; ours does the job */
section.page-section.oa-vsec :is(.plyr__control--overlaid, .plyr__controls, .video-player__loading-indicator) { display: none !important; }
/* a video block keeps its thumbnail until the preview actually moves */
.oa-vblock.oa-film--preview:not(.oa-film--live) .plyr__poster { opacity: 1 !important; }
/* the play button sits in the corner, off the poster's headline */
.oa-film__play { left: clamp(12px, 2.5vw, 28px); top: auto; bottom: clamp(12px, 2.5vw, 28px); transform: none; }
.oa-film__play:hover { transform: scale(1.04); }
.oa-film__play.oa-film__play--right { left: auto; right: clamp(12px, 2.5vw, 28px); }
/* no hairline of black beside a film on phones */
.oa-kit .oa-film__frame { background: transparent; }
/* headlines break between words (or hyphenate), never mid-word */
/* no hyphens in headings: oa.js shrinks a heading whose longest word would not fit (fitHeadings) */
body:not(.sqs-is-page-editing):not(.sqs-editing) .sqs-html-content :is(h1, h2, h3) { overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; }
/* case-study images sit at the top of their box, so rows line up */
body.collection-63b4524fbcaca1576b84d585.view-item #page .sqs-block-image img { object-position: 50% 0% !important; }
body section.page-section.oa-vsec .oa-vsec__hide, body section.page-section.oa-vsec a.oa-vsec__hide { display: none !important; }
section.page-section.oa-vsec .oa-film__play { z-index: 6; }
/* film sections run edge to edge, with nothing black behind the picture */
section.page-section.oa-vsec .section-border { inset: 0 !important; margin: 0 !important; width: auto !important; border-radius: 0 !important; }
section.page-section.oa-vsec :is(.section-background, .section-background > div, .sqs-video-background-native, .plyr, .plyr__video-wrapper, video) { background: transparent !important; }
section.page-section.oa-vsec .section-background { inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; border-radius: 0 !important; }
/* flipbook caption: the link stays on one line */
.oa-fb__caption a { white-space: nowrap; }
/* phones: prev/next titles fit on one line, and small links get a finger-sized target */
@media (max-width: 767px) {
  #itemPagination .item-pagination-title { font-size: 1.125rem !important; line-height: 1.15; }
  #footer-sections .sqs-html-content a, #footer-sections .sqs-block-content a { display: inline-block; min-height: 44px; min-width: 44px; padding: 10px 0; box-sizing: border-box; }
  /* the top photo overlaps the title, as on desktop */
  body.collection-63b4524fbcaca1576b84d585.view-item #page article > section:first-child .fe-block:has(.sqs-block-image) { transform: translateY(-44px); }
}

/* ---------- Review fixes, main pages (2026-10-12) ---------- */
/* three tags at most on phones too */
.oa-wi__text .oa-wi__tags > :nth-child(n+4) { display: none; }
/* "Selected projects" and other list titles: whole words on phones */
@media (max-width: 767px) {
  body .user-items-list-section .list-section-title :is(h1, h2, h3, p), body.oa-wash .user-items-list-section .list-section-title :is(p, h1, h2, h3) { font-size: min(var(--oa-title-size, 3.6rem), 11.5vw) !important; overflow-wrap: normal !important; word-break: normal !important; -webkit-hyphens: manual; hyphens: manual; }
}
/* the reel's flip side: the name sits dead center (Omar, 2026-10-12) */
.oa-kit .oa-reel__back { display: flex; align-items: center !important; justify-content: center !important; text-align: center; }
.oa-kit .oa-reel__back .oa-reel__name { margin: 0; width: 100%; text-align: center; }
/* home hero: a soft band behind the header so the light facade never swallows the nav */
body.homepage #page section.page-section.oa-home-hero .section-background::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200px; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(10, 10, 12, 0.32), rgba(10, 10, 12, 0));
}
/* the stamps tab steps aside while the phone menu is open */
body.header--menu-open .oa-kit.oa-p-sb-tab { display: none !important; }
/* service pages: the closing button never touches the next heading */
.oa-aud__cta { margin-bottom: clamp(64px, 8vw, 112px); }
.oa-aud + [data-oa="site-ask"], .oa-aud ~ .oa-kit[data-oa="site-ask"] { margin-top: clamp(64px, 8vw, 112px); }
/* the three service page titles read as a set */
/* sized so the longest, "Executive communications", stays on its one line inside its block */
body.oa-svc-page #page article > section:first-child .sqs-html-content :is(h1, h2) { font-size: clamp(2.1rem, 4.5vw, 5rem) !important; line-height: 1 !important; }
/* phones: small links get a finger-sized target */
@media (max-width: 767px) {
  .oa-kit .oa-p-door__alt, .oa-kit .oa-p-sh a, .oa-kit .oa-p-sh button:not(.oa-pill) { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Review fixes, round 3 (2026-10-12) ---------- */
/* film sections: never taller than the screen; a narrow film sits centered on the page color */
section.page-section.oa-vsec { max-height: 88vh; max-height: 88svh; margin-inline: auto !important; }
.oa-vsec__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* video blocks show their thumbnail until the picture moves */
.oa-vblock.oa-film--preview:not(.oa-film--live) { background: var(--oa-thumb) center / contain no-repeat; }
/* phones: room between a case study's question and its first paragraph */
@media (max-width: 767px) {
  body.collection-63b4524fbcaca1576b84d585.view-item .sqs-html-content :is(h1, h2) + p { margin-top: 32px; }
  /* the stamps tab on phones: whole and readable (Omar, 14 Oct: the sliver read as hidden); see oa-play.css */
}
/* footer links: a finger-sized target without pushing the underline away from the words */
@media (max-width: 767px) {
  #footer-sections .sqs-html-content a, #footer-sections .sqs-block-content a { display: inline; min-height: 0; min-width: 0; padding: 0; position: relative; }
  #footer-sections .sqs-html-content a::before, #footer-sections .sqs-block-content a::before { content: ""; position: absolute; left: -6px; right: -6px; top: -12px; bottom: -12px; }
}
/* the open stamp book dims the page behind it */
.oa-kit.oa-p-sb-book.is-open { box-shadow: 3px 3px 0 var(--oa-ink), 0 0 0 100vmax rgba(23, 23, 27, 0.28); }
/* phones: the fixed Write/Book bar never hides the end of the page */
@media (max-width: 767px) { body:has(.oa-p-smart.is-on) #footer-sections { padding-bottom: 84px; } }
/* flipbook: the closed cover (and back) centered on the stage */
.oa-fb__stage .stf__parent { transition: transform 0.7s var(--oa-ease, ease); }
.oa-fb__stage.is-cover .stf__parent { transform: translateX(-25%); }
.oa-fb__stage.is-back .stf__parent { transform: translateX(25%); }
/* 404 */
main#page > .oa-404 { max-width: var(--sqs-site-max-width, 1200px); margin: 0 auto; padding: clamp(180px, 22vw, 260px) max(16px, 6vw) clamp(80px, 10vw, 140px); }
.oa-kit .oa-404__kicker { color: var(--oa-poppy-text, #b02a10); margin: 0 0 14px; }
.oa-kit .oa-404__title { font-size: clamp(2.6rem, 8vw, 7rem); line-height: 0.95; margin: 0; max-width: 12ch; text-wrap: balance; }
.oa-kit .oa-404__line { font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.3; max-width: 34ch; margin: 28px 0 32px; }
.oa-kit .oa-404__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.oa-kit .oa-404__links li::before { content: none; }
/* Contact: the Squarespace form behind the contact sheet never flashes up while the page loads */
body:has([data-oa="fill-blank"], [data-oa="contact-sheet"]) .fe-block:has(.sqs-block-form:not(.oa-sheet-form-live)) { display: none !important; }
/* Home: the hand-over to the contact page, in place of the stock form */
.oa-kit.oa-homeform { align-self: center; padding: 0; }
.oa-homeform__line { font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.3; max-width: 34ch; margin: 0 0 24px; }
.oa-homeform__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.oa-kit.oa-c.oa-homeform, .oa-kit.oa-homeform { background: transparent !important; align-self: center !important; }
/* phones: the rows the old form needed close up */
@media (max-width: 767px) { .oa-kit.oa-homeform { align-self: start !important; } }

/* Footer: plain column labels, links underneath (the old heads looked like links and were) */
.oa-foot-label { font: 500 11px/1 var(--oa-font-text, inherit) !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--oa-ink-soft, rgba(23,23,27,.6)) !important; margin: 0 0 14px !important; }

/* Contact coffee section: details live in the footer; the right half gets the Amstel */
.oa-on-contact .oa-p-sh__coffee { display: none; }
.oa-coffee-sec .oa-coffee-dup { display: none !important; }
.oa-coffee-sec .oa-x-icon { width: 100%; height: 100%; display: block; }
.oa-coffee-sec { position: relative; }
.oa-kit.oa-coffee-photo { margin: 0; overflow: hidden; border-radius: 4px; background: var(--oa-rule); }
.oa-kit.oa-coffee-photo img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
  .oa-kit.oa-coffee-photo { position: absolute; right: max(4vw, calc((100% - 1200px) / 2)); top: 50%; transform: translateY(-50%); width: min(44vw, 600px); }
}
@media (max-width: 767px) {
  .oa-kit.oa-coffee-photo { position: absolute; left: 24px; right: 24px; z-index: 1; }
}
.oa-acc-more { margin: 10px 0 4px !important; }
.oa-acc-more a { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.oa-acc-more a::after { content: " \2192"; }

/* phones: the service titles may take two lines ("Executive / communications") */
@media (max-width: 767px) {
  body.oa-svc-page #page article > section:first-child .sqsrte-scaled-text { white-space: normal !important; display: block !important; font-size: inherit !important; }
  body.oa-svc-page #page article > section:first-child .sqs-html-content :is(h1, h2) { font-size: clamp(2.1rem, 10vw, 3rem) !important; white-space: normal !important; text-wrap: balance; }
  /* the header sits over the hero: the title starts below it, in a hero tall enough to hold both */
  body.oa-svc-page section.oa-svc-hero { min-height: 330px !important; }
  body.oa-svc-page section.oa-svc-hero .content-wrapper { padding-top: 104px !important; padding-bottom: 28px !important; }
}
/* desktop: the three service heroes share one height, title clear of the nav */
@media (min-width: 768px) {
  body.oa-svc-page section.oa-svc-hero { min-height: 0 !important; height: clamp(440px, 56vh, 540px) !important; overflow: hidden; align-items: flex-start !important; }
  body.oa-svc-page section.oa-svc-hero .content-wrapper { padding-top: clamp(150px, 19vh, 190px) !important; padding-bottom: 0 !important; }
}

/* video blocks: no Squarespace gradient or controls over the preview; the bars beside a 4:3 clip are page color */
.oa-vblock :is(.plyr__control--overlaid, .plyr__controls, .video-player__loading-indicator) { display: none !important; }
.oa-vblock :is(.plyr, .plyr__video-wrapper, video, .native-video-player) { background: transparent !important; }
.oa-vblock .plyr__poster { display: none !important; }
/* a full-bleed film's button clears the Stamps tab in the corner */
@media (min-width: 768px) { section.page-section.oa-vsec .oa-film__play { margin-left: 52px; } }
/* breathing room between a film that ends the page and the previous/next links */
#page article section.page-section.oa-vsec:last-of-type { margin-bottom: clamp(40px, 5vw, 72px) !important; }
/* phones: the status strip keeps to one line even before its container query applies */
@media (max-width: 640px) {
  .oa-kit .oa-p-studio__state, .oa-kit .oa-p-studio__reply, .oa-kit .oa-p-studio__sep, .oa-kit .oa-p-studio__slots { display: none !important; }
  .oa-kit .oa-p-studio__strip { flex-wrap: nowrap !important; white-space: nowrap; overflow: hidden; }
}


/* film previews: the poster shows until the silent loop is actually playing */
.oa-film--preview:not(.oa-film--live) { background: var(--oa-thumb, none) center / contain no-repeat; }
.oa-film--preview:not(.oa-film--live) video { opacity: 0; }
.oa-film--preview video { transition: opacity 0.4s ease; }

section.page-section.oa-vsec.oa-vsec--bars .section-background :is(video, img) { object-fit: cover !important; object-position: var(--oa-pos, 50% 50%) !important; }
@media (max-width: 767px) {
  /* finger-sized: the film button and the stamps tab */
  .oa-film__play { min-height: 44px; }
  .oa-kit.oa-p-sb-tab { min-height: 44px; }
  /* a case study's question gets room before the first paragraph */
  body.collection-63b4524fbcaca1576b84d585.view-item #page article .sqs-html-content h1 { margin-bottom: 36px !important; }
}

@media (max-width: 767px) {
  /* 404 buttons and the contact icons: finger-sized */
  .oa-kit.oa-404 .oa-pill { min-height: 44px; }
  .oa-coffee-sec .sqs-svg-icon--wrapper, .oa-coffee-sec .social-account-links-v2-block a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* two-line titles on the photo banners need air between the lines */
  body.oa-svc-page section.oa-svc-hero .sqs-html-content :is(h1, h2) { line-height: 1.1 !important; }
  /* phone menu: the page you are on is marked */
  .header-menu-nav-item--active a, .header-menu-nav-item a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
}
/* contact: the footer has no Facebook, so the coffee icons drop it too */
.oa-coffee-sec a[href*="facebook.com"] { display: none !important; }

/* desktop: banner titles start on the same content edge as everything below them (grid column 2) */
@media (min-width: 768px) {
  section.oa-banner-hero .fluid-engine > .fe-block:has(.sqs-html-content :is(h1, h2)) { grid-column-start: 2 !important; }
  section.oa-banner-hero .sqs-html-content :is(h1, h2) { text-align: left !important; }
}
/* "You picked launch. Change" is gone (Omar, 2026-10-12: clutter); the choice still sorts things quietly */
.oa-kit.oa-door-line { display: none !important; }
/* services cards: no outline (it read as a mistake next to the photo); the hover lifts with a shadow only */
.oa-kit .oa-svc__card, .oa-kit .oa-svc__item.is-picked .oa-svc__card { box-shadow: none !important; }
@media (hover: hover) and (pointer: fine) { .oa-kit .oa-svc__card:hover { box-shadow: 0 22px 44px -26px rgba(23, 23, 27, 0.4) !important; } }
/* each card's eyebrow in a deep shade of its own card color */
.oa-kit .oa-svc__num { color: color-mix(in oklab, var(--_tint) 38%, #17171b) !important; font-weight: 500; }
/* portfolio hover preview: the homepage reel's tile (photo, soft shade, white logo) */
.oa-wi__tile { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease; background: #c9c4bb; overflow: hidden; }
.oa-wi__tile.is-on { opacity: 1; }
.oa-wi__frame .oa-wi__tile.is-on { animation: oa-wi-push 3s var(--_ease) both; }
.oa-wi__follow .oa-wi__tile img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; margin: 0; max-width: none; }
.oa-wi__follow .oa-wi__tile .oa-wi__tilebg { object-fit: cover; }
.oa-wi__tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(23, 23, 27, 0.2), rgba(23, 23, 27, 0.42)); }
.oa-wi__follow .oa-wi__tile .oa-wi__tilelogo { z-index: 2; object-fit: cover; filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.3)); }
@media (prefers-reduced-motion: reduce) { .oa-wi__frame .oa-wi__tile.is-on { animation: none; } }
.oa-film__play.is-soon { cursor: default; padding-left: 1.2em; }
/* extra case pictures in an empty half */
.oa-kit.oa-case-extra { margin: 0; z-index: 1; }
.oa-kit.oa-case-extra img { display: block; width: 100%; height: auto; }
section.page-section:has(.oa-case-extra) { position: relative; }
@media (max-width: 767px) {
  .oa-kit.oa-case-extra:not(.is-phone) { display: none !important; }
  .oa-kit.oa-case-extra.is-phone { position: static; width: 100%; margin: 28px 0 8px; }
}
/* small captions under case images */
.oa-kit.oa-cap { position: absolute; z-index: 2; margin: 0; font: 400 12.5px/1.35 var(--oa-font-text); color: var(--oa-ink-soft); text-wrap: pretty; }
.fe-block:has(> .oa-cap) { overflow: visible !important; position: relative; }
/* THNK: the full film from the kit keeps its cropped shape */
section.page-section.oa-vsec.oa-vsec--bars .oa-vsec__player video { object-fit: cover; object-position: var(--oa-pos, 50% 50%); width: 100%; height: 100%; }
.oa-kit.oa-cap.oa-cap--flow { position: static; margin: 8px 0 0; }
.oa-kit.oa-filmcap { margin: 12px auto clamp(32px, 4vw, 56px); padding: 0 max(4vw, calc((100% - 1200px) / 2)); font: 400 13px/1.4 var(--oa-font-text); color: var(--oa-ink-soft); }
/* the photo grid: captions show below each picture instead of being clipped by the cell */
.oa-mrow figure:has(> .oa-cap) { overflow: visible !important; height: auto !important; aspect-ratio: auto !important; }
.oa-mrow figure:has(> .oa-cap) > img { display: block; width: 100%; aspect-ratio: 11 / 10; object-fit: cover; }
.oa-mrow.is-wide figure:has(> .oa-cap) > img { aspect-ratio: 3 / 2; }
.oa-mrow .oa-cap--flow { opacity: 1 !important; transform: none !important; }
.oa-mrow:has(.oa-cap) { margin-bottom: 30px !important; align-items: start; }
.oa-mrow .oa-cap--flow { position: relative; z-index: 2; background: transparent; }
.oa-vblock.oa-vblock--zoom.oa-film--preview:not(.oa-film--live) { background-size: 114% auto; background-position: 0 100%; }
/* deck viewer (BRIDGE Blueprint) */
.oa-kit.oa-deck { position: fixed; inset: 0; z-index: 2147483600; background: rgba(246, 246, 242, 0.97); display: flex; flex-direction: column; }
.oa-deck__bar { display: flex; align-items: center; gap: 16px; padding: 14px clamp(16px, 3vw, 32px); font: 400 14px/1 var(--oa-font-text); color: var(--oa-ink); }
.oa-deck__title { font-weight: 500; }
.oa-deck__num { color: var(--oa-ink-soft); font-variant-numeric: tabular-nums; margin-right: auto; }
.oa-deck__close { font: 500 14px/1 var(--oa-font-text); padding: 10px 16px; min-height: 40px; border-radius: 999px; border: 1px solid var(--oa-ink); background: transparent; color: var(--oa-ink); cursor: pointer; }
.oa-deck__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 24px); padding: 0 clamp(8px, 2vw, 24px) clamp(16px, 3vw, 32px); }
.oa-deck__img { min-width: 0; max-width: min(calc(100% - 144px), 1400px); max-height: 100%; width: auto; height: auto; box-shadow: 0 20px 50px -30px rgba(23, 23, 27, 0.5); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.oa-deck__nav { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--oa-ink); background: transparent; color: var(--oa-ink); font-size: 20px; cursor: pointer; }
.oa-deck__nav:disabled { opacity: 0.25; cursor: default; }
@media (max-width: 767px) { .oa-deck__nav { display: none; } .oa-deck__img { max-width: 100%; } }
/* a deck's way in on a case page (De Otter): a full-bleed photograph of the real deck at the foot of
   the case, a white pill on the picture, a caption under it (Omar, 13 Oct) */
.oa-kit.oa-deck-feature { display: block; width: 100%; margin: clamp(40px, 6vw, 96px) 0 0; padding: 0; color: var(--oa-ink); }
.oa-kit .oa-deck-feature__fig { margin: 0; }
.oa-kit .oa-deck-feature__frame { position: relative; overflow: hidden; line-height: 0; }
.oa-kit .oa-deck-feature__pic { display: block; cursor: pointer; }
.oa-kit .oa-deck-feature__pic img { display: block; width: 100%; height: auto; aspect-ratio: 2400 / 1100; object-fit: cover; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform 1.2s var(--oa-ease), filter 1.2s var(--oa-ease); }
.oa-kit .oa-deck-feature__frame:hover .oa-deck-feature__pic img { transform: scale(1.015); filter: brightness(1.03); }
.oa-kit .oa-deck-feature__pill { position: absolute; left: clamp(16px, 4vw, 56px); bottom: clamp(16px, 3.5vw, 48px); min-height: 52px; padding-inline: 2.2em; box-shadow: 0 10px 30px -12px rgba(23, 23, 27, 0.55); line-height: 1.1; }
.oa-kit .oa-deck-feature__pill:hover, .oa-kit .oa-deck-feature__pill:focus-visible { background: var(--oa-ink); color: var(--oa-white); border-color: var(--oa-ink); }
.oa-kit .oa-deck-feature__pill:focus-visible { outline: 2px solid var(--oa-white); outline-offset: 3px; }
/* the caption is the site's quiet film-caption line (13px, soft ink), no band behind it */
.oa-kit .oa-deck-feature__cap { margin: 12px 0 0; padding: 0 max(4vw, calc((100% - 1200px) / 2)); background: none; font: 400 13px/1.4 var(--oa-font-text); color: var(--oa-ink-soft); }
@media (max-width: 767px) {
  .oa-kit .oa-deck-feature__pic img { aspect-ratio: 1200 / 1350; }
  .oa-kit .oa-deck-feature__pill { left: 16px; bottom: 16px; }
}
.oa-kit.oa-teaser { max-width: 1200px; margin: clamp(32px, 5vw, 72px) auto; padding: 0 max(4vw, 16px); box-sizing: content-box; }
.oa-teaser__frame { position: relative; aspect-ratio: 16 / 9; background: var(--oa-rule); }
.oa-teaser__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.oa-kit.oa-teaser .oa-filmcap { padding: 0; margin: 12px 0 0; }

/* ---------- Punch-list round 6 (2026-10-12) ---------- */
/* About: the bio stays in the large display face (Omar preferred it bigger, 2026-10-12) */
@media (max-width: 767px) { h1.oa-about-hero { font-size: clamp(2.2rem, 10vw, 3rem) !important; text-wrap: balance; } }
/* Portfolio: a way out at the end of the list */
.oa-kit.oa-pf-close { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; max-width: 1200px; margin: clamp(48px, 6vw, 96px) auto clamp(64px, 8vw, 120px); padding: 0 max(4vw, 16px); box-sizing: content-box; }
.oa-pf-close__line { margin: 0; font: 400 clamp(1.4rem, 2.4vw, 2.1rem)/1.15 var(--oa-font-display); font-stretch: var(--oa-display-stretch); letter-spacing: -0.02em; }
/* Films: one width across the site (the 1200px frame), page color around them, gutters on phone */
@media (min-width: 768px) { section.page-section.oa-vsec { max-width: 1200px; margin-inline: auto !important; } }
@media (max-width: 767px) { section.page-section.oa-vsec { margin-inline: 16px !important; width: auto !important; } }
/* the site's Custom CSS forces every film section to 16:9 on phones; a film keeps its own shape (India Song is 4:3) */
section.page-section.oa-vsec { aspect-ratio: var(--oa-ar, 1.7778) !important; }
/* a section that holds a film as a video block (The Class): the film alone, at the site's film width */
section.page-section.oa-filmhost .fluid-engine { display: block !important; padding: 0 !important; }
section.page-section.oa-filmhost .fe-block { position: relative !important; width: auto !important; max-width: 1200px; margin: 0 auto !important; grid-area: auto !important; }
section.page-section.oa-filmhost .content-wrapper { padding-top: clamp(24px, 4vw, 56px) !important; padding-bottom: 0 !important; min-height: 0 !important; }
section.page-section.oa-filmhost { min-height: 0 !important; }
@media (max-width: 767px) { section.page-section.oa-filmhost .fe-block { margin: 0 16px !important; } }
/* Squarespace's player lays a grey title-bar shade over the top of a video block; the silent preview has no title bar */
.oa-vblock.oa-film--preview .native-video-player::before { display: none !important; }section.page-section.oa-vsec, section.page-section.oa-vsec .section-background { background: var(--oa-paper) !important; }
/* PlantLab and the studio pages: on phones every picture is full column width, one gap */
@media (max-width: 767px) {
  body:is(.oa-on-plantlab, .oa-on-studio) #page article .fe-block:has(.sqs-block-image) { grid-column: 2 / -2 !important; }
}
.oa-kit.oa-home-extra { margin: 0; z-index: 1; }
.oa-kit.oa-home-extra img { display: block; width: 100%; height: auto; }
section.page-section:has(.oa-home-extra) { position: relative; }
/* /services: a photo band across the top, then the title */
.oa-svc__hero { margin: 0 0 clamp(40px, 6vw, 80px); width: 100%; height: clamp(260px, 44vh, 480px); overflow: hidden; }
.oa-svc__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
/* phones: the play pill shrinks to its icon on small film frames, so it covers less of the picture */
@media (max-width: 480px) {
  .oa-film__frame .oa-film__play { padding: 0; width: 44px; height: 44px; justify-content: center; }
  .oa-film__frame .oa-film__play .oa-film__playtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* CRREM and other case pages: the before/after slider sits closer to the story */
  section.page-section:has([data-oa="draft-done"]) > .content-wrapper { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* How we start: the first step on each service page (12 Oct, in place of prices) */
.oa-kit .oa-aud__startline { font-family: var(--oa-font-display); font-stretch: 125%; font-size: var(--oa-step-h4, 1.5rem); line-height: 1.2; max-width: 34ch; margin: 0 0 0.6em; text-wrap: balance; }
.oa-kit .oa-aud__startnote { color: var(--oa-ink-soft); margin: 0; }

/* Full-width figure after a case page's opening text (Metabolic's Value Hill, 12 Oct) */
.oa-kit.oa-case-feature { background: var(--oa-paper); padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 48px); }
.oa-kit .oa-case-feature__fig { max-width: 1200px; margin: 0 auto; }
.oa-kit .oa-case-feature__link { display: block; cursor: zoom-in; }
.oa-kit .oa-case-feature__fig img { display: block; width: 100%; height: auto; }
.oa-kit .oa-case-feature__cap { margin-top: 12px; font-size: 0.95rem; color: var(--oa-ink-soft); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.oa-kit .oa-case-feature__credit { font-size: 0.85rem; opacity: 0.8; }

/* /cv: hidden page for recruiters (12 Oct) */
.oa-kit.oa-cv { background: var(--oa-paper); }
.oa-kit .oa-cv__in { max-width: 920px; margin: 0 auto; padding: clamp(96px, 12vw, 160px) clamp(16px, 4vw, 40px) clamp(48px, 8vw, 96px); }
.oa-kit .oa-cv__title { font-family: var(--oa-font-display); font-stretch: 125%; font-weight: 400; font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1; margin: 0 0 16px; }
.oa-kit .oa-cv__loc { font-size: 1.15rem; max-width: 52ch; margin: 0 0 40px; color: var(--oa-ink); }
.oa-kit .oa-cv__label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oa-ink-soft); font-weight: 600; margin: 0 0 10px; }
.oa-kit .oa-cv__files { list-style: none; margin: 0 0 48px; padding: 0; border-top: 1px solid rgba(23,23,27,.14); }
.oa-kit .oa-cv__files li { border-bottom: 1px solid rgba(23,23,27,.14); }
.oa-kit .oa-cv__file { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 10px 0; color: var(--oa-ink); text-decoration: none; }
.oa-kit .oa-cv__file:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.oa-kit .oa-cv__pdf { font-size: 0.75rem; letter-spacing: 0.08em; padding: 4px 10px; border: 1px solid currentColor; border-radius: 999px; }
.oa-kit .oa-cv__sheets { display: grid; gap: 24px; }
.oa-kit .oa-cv__sheets img { width: 100%; height: auto; display: block; background: #fff; box-shadow: 0 1px 2px rgba(23,23,27,.08), 0 12px 36px rgba(23,23,27,.08); }

/* home contact: still heading, a sentence sized for the half-width column, the panel centered against the photo */
.oa-kit.oa-homeform--sheet { container-type: inline-size; padding: clamp(40px, 6vw, 96px) 0 !important; }
.oa-kit .oa-homeform__title { margin: 0 0 clamp(20px, 2.4vw, 36px); font-size: clamp(2.6rem, 5.4vw, 5.2rem); line-height: 1; letter-spacing: -0.035em; color: var(--oa-ink); }
.oa-kit.oa-homeform--sheet .oa-p-sh__sentence { font-size: clamp(1.45rem, 2.15vw, 2.15rem); line-height: 1.4; max-width: none; }
@media (max-width: 767px) {
  .oa-kit.oa-homeform--sheet { padding: 8px 0 32px !important; }
  .oa-kit .oa-homeform__title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .oa-kit.oa-homeform--sheet .oa-p-sh__sentence { font-size: 1.35rem; }
}

/* Squarespace's site-wide "flex" scroll animation also grabs kit headings and lines. When the page is
   reached by a jump (an anchor, a reload mid-page) it can fail to fire and leave them invisible, as the
   door's lane headline was. The kit has its own motion, so its content opts out. */
/* (the kit's own rise animations still run: a rising panel is left alone) */
.oa-kit .preFlex, .oa-kit .animation-segment-interior, .oa-kit .animation-segment-parent-hidden { opacity: 1 !important; }
.oa-kit .preFlex:not(.is-rising .preFlex, .is-rising.preFlex),
.oa-kit .animation-segment-interior:not(.is-rising .animation-segment-interior) { transform: none !important; }

.oa-kit .oa-homeform__photo { display: none; }
@media (max-width: 767px) {
  .oa-homeform__gridphoto { display: none !important; }
  .oa-kit .oa-homeform__photo { display: block; margin: 0 calc(50% - 50vw) 40px; aspect-ratio: 4 / 3; overflow: hidden; }
  .oa-kit .oa-homeform__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

/* home contact (round 2): the form sits centered in the left half under the ticker */
@media (min-width: 768px) {
  .oa-kit.oa-homeform--sheet { justify-self: center !important; align-self: center !important; width: min(560px, calc(100% - 48px)); }
}

/* /services: the photo starts at the top of the screen, under the white header (Omar, 2026-10-12) */
body.oa-svc-top section.page-section.oa-svc-sec { padding-top: 0 !important; }
body.oa-svc-top .oa-svc__hero { position: relative; height: clamp(440px, 64vh, 680px); }
body.oa-svc-top .oa-svc__hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 260px; background: linear-gradient(rgba(12, 14, 20, 0.42), rgba(12, 14, 20, 0)); pointer-events: none; z-index: 1; }
/* the headline on one line */
.oa-kit .oa-svc__title { max-width: none; white-space: nowrap; font-size: clamp(1.9rem, 7cqw, 7.4rem); }
/* the closing line sits centered on the page, the button under it (Omar, 2026-10-12) */
.oa-svc__close { flex-direction: column; justify-content: center; text-align: center; }
.oa-svc__closeline { margin-inline: auto; }
@media (min-width: 768px) {
  .oa-kit.oa-homeform--sheet { display: flex !important; flex-direction: column; justify-content: center; }
}

/* ==========================================================================
   SERVICE PAGE RHYTHM: /communications, /launch, /ai-for-teams
   Omar, 2026-10-12: "this spacing is awful". One vertical scale for the three
   service pages. Scoped to body.oa-svc-page, which oa.js sets on those three
   paths only. Two steps, nothing else:
     --svc-gap   between groups (hero, film, demo, lists, proof, close)
     --svc-head  from a heading or promise to the thing it introduces
   The How I work block keeps its own insides; only the gap around it is set.
   ========================================================================== */
body.oa-svc-page .oa-kit.oa-aud {
  --svc-gap: clamp(56px, 7.5vw, 120px);
  --svc-head: clamp(18px, 1.8vw, 28px);
}
/* every block: no padding of its own, one gap above it */
body.oa-svc-page .oa-kit.oa-aud > .oa-aud__head,
body.oa-svc-page .oa-kit.oa-aud > .oa-aud__sec { padding: 0; margin-bottom: 0; }
body.oa-svc-page .oa-kit.oa-aud.oa-aud > * + * { margin-top: var(--svc-gap); }
/* the quote and its button read as one closing group */
body.oa-svc-page .oa-kit.oa-aud > .oa-aud__quote + .oa-aud__cta { margin-top: var(--svc-head); }
body.oa-svc-page .oa-kit.oa-aud > .oa-aud__cta { padding: 0; margin-bottom: 0; }
/* section labels sit close to their lists */
body.oa-svc-page .oa-kit.oa-aud .oa-aud__sechead { margin-bottom: var(--svc-head); }
/* demo: title, promise, then the demo right under it (the play piece's own
   vertical padding was adding 86px above and below) */
body.oa-svc-page .oa-kit.oa-aud .oa-aud__slot { margin-top: var(--svc-head); }
body.oa-svc-page .oa-kit.oa-aud .oa-aud__slot > .oa-kit.oa-c { padding-top: 0; padding-bottom: 0; }
/* the page section holding the kit: same gap above and below as between blocks */
body.oa-svc-page #page article > section.page-section:has(.oa-aud) > .content-wrapper {
  padding-top: clamp(56px, 7.5vw, 120px) !important;
  padding-bottom: clamp(56px, 7.5vw, 120px) !important;
}
/* hero at desktop: headline left, lead right on the headline's last line,
   so the first screen uses the full width */
@media (min-width: 1024px) {
  body.oa-svc-page .oa-kit.oa-aud > .oa-aud__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 5cqw, 96px);
    align-items: end;
  }
  body.oa-svc-page .oa-aud__head > :not(.oa-aud__title):not(.oa-aud__intro) { grid-column: 1 / -1; justify-self: start; }
  body.oa-svc-page .oa-kit .oa-aud__head > .oa-aud__title { grid-column: 1; max-width: none; font-size: clamp(3.4rem, 6.6cqw, 8rem); }
  body.oa-svc-page .oa-aud__head > .oa-aud__intro { grid-column: 2; margin: 0; padding-bottom: 0.3em; max-width: 34ch; font-size: clamp(1.2rem, 1.75vw, 1.75rem); line-height: 1.28; }
}

/* ==================================================================
   MOBILE PASS: service and studio pages (2026-10-13)
   /launch, /ai-for-teams, /communications, /studio and /studio/<slug>.
   Phone and small-tablet fixes only; desktop is untouched.
   ================================================================== */
@media (max-width: 767px) {
  /* service hero titles: "communications" ran past the gutter at 360 */
  body.oa-svc-page h1.oa-look-h2 { font-size: min(2.25rem, 9.4vw); overflow-wrap: normal; }

  /* launch plan: the launch-day dot was clipped by its column; the date headline fits at 360 */
  html body .oa-kit.oa-kit .oa-p-lp__track { margin-left: 14px; margin-right: 14px; }
  html body .oa-kit.oa-kit .oa-p-lp__hero { font-size: min(var(--oa-step-h2), 9.4vw); }
  html body .oa-kit.oa-kit .oa-p-lp__item { font-size: 1rem; }

  /* AI check: 44px answers, a tappable rule link, readable note */
  html body .oa-kit.oa-kit .oa-p-ai__seg { min-height: 44px; }
  html body .oa-kit.oa-kit .oa-p-ai__rule { padding: 12px 0; margin-top: 8px; font-size: 1rem; }
  html body .oa-kit.oa-kit .oa-p-ai__example { font-size: 1rem; line-height: 1.4; }

  /* Ask this site: taller field and chips, wrapped chips get line spacing, source chips are 44px */
  html body .oa-kit.oa-kit .oa-p-ask__input { min-height: 48px; }
  html body .oa-kit.oa-kit .oa-p-ask__sug { min-height: 44px; line-height: 1.3; padding-top: 0.55em; padding-bottom: 0.55em; }
  html body .oa-kit.oa-kit .oa-p-ask__src { min-height: 44px; font-size: 1rem; }
  html body .oa-kit.oa-kit .oa-p-ask__foot { font-size: 1rem; }

  /* Say it plainly: 44px rewrite button, readable labels */
  html body .oa-kit.oa-kit .oa-p-plain__go { min-height: 44px; }
  html body .oa-kit.oa-kit .oa-p-plain__tag,
  html body .oa-kit.oa-kit .oa-p-plain__lab,
  html body .oa-kit.oa-kit .oa-p-plain__msg { font-size: 1rem; }

  /* proof: flipbook caption, hint and PDF link; quote roles */
  body.oa-svc-page .oa-kit .oa-fb__caption { font-size: 0.9375rem; letter-spacing: 0.02em; }
  body.oa-svc-page .oa-fb__hint { font-size: 1rem; }
  body.oa-svc-page .oa-kit .oa-fb__caption a { display: inline-block; padding: 12px 4px; margin: -12px 0; }
  body.oa-svc-page .oa-aud__qrole { font-size: 1rem; }

  /* studio items: previous / next links reach 44px */
  .item-pagination-link { min-height: 44px; display: inline-flex; align-items: center; }

  /* /studio hero: give "das Studio" room under the logo */
  section[data-section-id="63b3f674f2d5697b8118f4b5"] .content-wrapper { padding-top: 56px !important; padding-bottom: 24px !important; }
  /* /studio "What I'm currently working on": the section kept its desktop height and left a blank screen */
  section[data-section-id="63b5cd9d16c5473cc53c0a97"] { min-height: 0 !important; }
  section[data-section-id="63b5cd9d16c5473cc53c0a97"] .content-wrapper { min-height: 0 !important; padding-bottom: 24px !important; }
  /* /studio project list over the butterfly photo: dark titles were unreadable; light titles with a soft shadow */
  section[data-section-id="6a69689c12bc336a9678118e"] .portfolio-hover-item-title,
  section[data-section-id="6a69689c12bc336a9678118e"] .portfolio-hover-item-content { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 18px rgba(0, 0, 0, 0.45); }
  /* /studio "Book a coffee": the card kept a tall empty grid area under it */
  .fe-63b3f36c400d04152fbbdb94 { grid-template-rows: auto auto !important; row-gap: 40px !important; }
  .fe-63b3f36c400d04152fbbdb94 > .fe-block-bb27ce3a27f47d87cacb { grid-area: 1 / 2 / 2 / 10 !important; }
  .fe-63b3f36c400d04152fbbdb94 > .fe-block-5b8e161813e627189ba9 { grid-area: 2 / 2 / 3 / 10 !important; }
  /* /studio/rizome: a hidden third image still held six empty grid rows */
  .fe-63b467c4fa511f3f89a34ca0 { grid-template-rows: repeat(23, minmax(24px, auto)) !important; }
}
/* /studio project titles sit on the butterfly photo at every width: light type with a soft shadow */
section[data-section-id="6a69689c12bc336a9678118e"] .portfolio-hover-item-title,
section[data-section-id="6a69689c12bc336a9678118e"] .portfolio-hover-item-content { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 18px rgba(0, 0, 0, 0.45); }
/* tablets (768 to 1024): the "Visit website" button wrapped onto two lines; the heading-only section kept a desktop height */
@media (min-width: 768px) and (max-width: 1024px) {
  .fe-block-yui_3_17_2_1_1672841309397_471726 .sqs-block-button-element { white-space: nowrap; min-height: 44px; }
  section[data-section-id="63b5cd9d16c5473cc53c0a97"] { min-height: 0 !important; }
  section[data-section-id="63b5cd9d16c5473cc53c0a97"] .content-wrapper { min-height: 0 !important; }
  /* touch targets on the service demos stay at 44px on tablets too */
  html body .oa-kit.oa-kit .oa-p-ai__seg,
  html body .oa-kit.oa-kit .oa-p-ask__sug,
  html body .oa-kit.oa-kit .oa-p-ask__src,
  html body .oa-kit.oa-kit .oa-p-plain__go { min-height: 44px; }
  html body .oa-kit.oa-kit .oa-p-ai__rule { padding: 12px 0; margin-top: 8px; }
  body.oa-svc-page .oa-kit .oa-fb__caption a { display: inline-block; padding: 12px 4px; margin: -12px 0; }
  .item-pagination-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
   MOBILE PASS: case studies (2026-10-13)
   Every /portfolio/<slug> page (Squarespace's portfolio collection, item view).
   Phones only (max-width 767px); tablets and up keep the desktop layout.
   ========================================================================== */
@media (max-width: 767px) {
  /* pictures take their own shape: Squarespace kept the box from an old crop, so a
     picture shown whole left a band of empty page under it (or beside it) */
  body.collection-63b4524fbcaca1576b84d585.view-item #page article .sqs-block-image .fluid-image-container { aspect-ratio: auto !important; height: auto !important; }
  body.collection-63b4524fbcaca1576b84d585.view-item #page article .sqs-block-image .fluid-image-container :is(.js-content-mode-element-wrapper, .content-fill) { position: relative !important; height: auto !important; inset: auto !important; }
  body.collection-63b4524fbcaca1576b84d585.view-item #page article .sqs-block-image .fluid-image-container img { position: static !important; display: block; width: 100% !important; height: auto !important; }
  /* the top photo still overlaps the title, pulled up rather than slid, so no strip opens under it */
  body.collection-63b4524fbcaca1576b84d585.view-item #page article > section:first-child .fe-block:has(.sqs-block-image) { transform: none !important; margin-top: -44px; }
  /* captions follow their picture instead of floating at a measured spot below it */
  body.collection-63b4524fbcaca1576b84d585.view-item .oa-kit.oa-cap { position: static !important; max-width: none !important; margin: 10px 0 0; }
  body.collection-63b4524fbcaca1576b84d585.view-item .fe-block:has(> .oa-cap) > .sqs-block { height: auto !important; }
  /* captions readable on a phone */
  body.collection-63b4524fbcaca1576b84d585.view-item .oa-kit.oa-cap,
  body.collection-63b4524fbcaca1576b84d585.view-item .oa-kit.oa-filmcap { font-size: 14px; line-height: 1.45; }
  /* previous and next: finger-sized */
  body.collection-63b4524fbcaca1576b84d585.view-item #itemPagination .item-pagination-link { min-height: 44px; box-sizing: border-box; }
  /* their titles break between words only, and a name kept whole ("Bell Curve Labs") fits its half */
  body.collection-63b4524fbcaca1576b84d585.view-item #itemPagination .item-pagination-title { font-size: clamp(15px, 4.1vw, 16px) !important; overflow-wrap: normal !important; word-break: normal !important; }
  /* a section is as tall as what it holds: the screen-height minimum left the before/after
     slider floating in 200px of empty page above and below */
  body.collection-63b4524fbcaca1576b84d585.view-item #page article > section.page-section:not(:first-child) { min-height: 0 !important; }
  /* THNK: a film with black bars baked into the file fills its picture-shaped box on phones too
     (the site's custom CSS forced "contain" here, so the bars and two pale strips showed) */
  body.view-item.collection-63b4524fbcaca1576b84d585 #sections section.page-section.oa-vsec.oa-vsec--bars .sqs-video-background-native :is(video, .sqs-video-background-native__fallback-image) { object-fit: cover !important; }
}
/* tablets (768 to 1024) keep the desktop layout; captions there read at 14px too */
@media (min-width: 768px) and (max-width: 1024px) {
  body.collection-63b4524fbcaca1576b84d585.view-item .oa-kit.oa-cap,
  body.collection-63b4524fbcaca1576b84d585.view-item .oa-kit.oa-filmcap { font-size: 14px; line-height: 1.4; }
  /* and sections hold what they hold: a quote sat in 300px of empty page above and below on a tablet */
  body.collection-63b4524fbcaca1576b84d585.view-item #page article > section.page-section:not(:first-child) { min-height: 0 !important; }
}

/* ==========================================================================
   MOBILE PASS: core pages (2026-10-13)
   Home, /about, /contact, /services, /portfolio, /omar-ali-cv and /writing,
   checked at 360, 390 and 768 wide. Scoped to those pages by their
   Squarespace collection ids (home also carries body.homepage):
     home       #collection-6ac82300e0c05e19b857730f
     about      #collection-63b2eb17da343d10bb2021c0
     contact    #collection-63b3f88c1fc24d32ce88412d
     services   #collection-6acc08ee3f76b352c50f4726
     portfolio  #collection-63b4524fbcaca1576b84d585
     cv         #collection-6acd298244dd54201d1c0483
     writing    #collection-6acd434571c615405097ce15
   ========================================================================== */

/* footer: the link lists and the address show straight away; Squarespace's
   reveal could leave them blank when the footer never reached its threshold */
:is(#collection-6ac82300e0c05e19b857730f, #collection-63b2eb17da343d10bb2021c0, #collection-63b3f88c1fc24d32ce88412d, #collection-6acc08ee3f76b352c50f4726, #collection-63b4524fbcaca1576b84d585, #collection-6acd298244dd54201d1c0483, #collection-6acd434571c615405097ce15) footer :is(.preFade, .preFlex, .preSlide, .preScale, .preClip) {
  opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
}

@media (max-width: 1023px) {
  /* footer links: a 44px tap row each, not 20px lines */
  :is(#collection-6ac82300e0c05e19b857730f, #collection-63b2eb17da343d10bb2021c0, #collection-63b3f88c1fc24d32ce88412d, #collection-6acc08ee3f76b352c50f4726, #collection-63b4524fbcaca1576b84d585, #collection-6acd298244dd54201d1c0483, #collection-6acd434571c615405097ce15) footer .sqs-html-content p a { display: inline-block; padding-block: 8px; }
  /* the menu button: 44px square to tap */
  :is(#collection-6ac82300e0c05e19b857730f, #collection-63b2eb17da343d10bb2021c0, #collection-63b3f88c1fc24d32ce88412d, #collection-6acc08ee3f76b352c50f4726, #collection-63b4524fbcaca1576b84d585, #collection-6acd298244dd54201d1c0483, #collection-6acd434571c615405097ce15) .header-burger-btn { min-width: 44px; min-height: 44px; }
  /* contact sheet (home and /contact): the quiet links and Copy get a full tap height */
  :is(#collection-6ac82300e0c05e19b857730f, #collection-63b3f88c1fc24d32ce88412d) .oa-kit :is(.oa-p-sh__quiet, .oa-p-sh__copy) { display: inline-flex; align-items: center; min-height: 44px; }
  :is(#collection-6ac82300e0c05e19b857730f, #collection-63b3f88c1fc24d32ce88412d) .oa-kit .oa-p-sh__copy { min-width: 44px; justify-content: center; }
  /* portfolio: the closing "Write to me" pill at a full tap height */
  #collection-63b4524fbcaca1576b84d585 .oa-kit a.oa-pill.oa-pill--poppy { min-height: 44px; display: inline-flex; align-items: center; }
  /* writing: "Back to the shelf" */
  #collection-6acd434571c615405097ce15 .oa-kit .oa-zine__shelf-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* home, tablets: "About me" sat in a four-column cell and broke onto two lines */
@media (min-width: 600px) and (max-width: 1023px) {
  body.homepage #page .oa-home-hero .sqs-block-button .sqs-block-button-container { display: flex; justify-content: center; overflow: visible; }
  body.homepage #page .oa-home-hero .sqs-block-button-element { white-space: nowrap; }
}

/* home, the Selected projects reel: "ABN AMRO" is kept on one line, so its tile gives it the room */
body.homepage .oa-kit .oa-reel__back .oa-reel__name { margin-inline: -8px; width: calc(100% + 16px); }

/* about: the Six cities piece runs to the screen edges; its section no longer grows
   to fit it, which pushed the page 30px wider than a tablet screen */
#collection-63b2eb17da343d10bb2021c0 #page section.page-section:has(.oa-p-jm) > .content-wrapper { min-width: 0; }

/* contact, phones: the title sat 25px under the logo; the banner gets a little more air */
@media (max-width: 767px) {
  #collection-63b3f88c1fc24d32ce88412d #page article section.page-section:first-of-type > .content-wrapper { padding-top: 32px !important; }
}
/* contact, tablets: the social icons are 20px; their tap area is 44px */
@media (min-width: 600px) {
  #collection-63b3f88c1fc24d32ce88412d .sqs-svg-icon--wrapper { position: relative; }
  #collection-63b3f88c1fc24d32ce88412d .sqs-svg-icon--wrapper::after { content: ""; position: absolute; inset: -12px; }
}

/* services, phones: the one-line headline ("Three ways I can help") ran 15 to 40px past the
   screen edge; it stays on one line and sizes to fit */
@media (max-width: 599px) {
  #collection-6acc08ee3f76b352c50f4726 .oa-kit .oa-svc__title { font-size: min(7.3vw, 2.4rem); }
}

/* portfolio, phones: names a touch smaller so "Bell Curve Labs" (kept on one line) never
   splits as "LAB / S" */
@media (max-width: 599px) {
  #collection-63b4524fbcaca1576b84d585 .oa-wi__name { font-size: clamp(1.05rem, 5vw, 1.45rem); }
}
section.page-section.oa-vsec .oa-film__play.oa-film__play--right { margin-left: 0; }
/* Homepage film, full bleed (Omar, 13 Oct): edge to edge, no side margins */
section.page-section.oa-film-sec.oa-home-film { padding: 0; }
section.page-section.oa-home-film .oa-film-sec__in { width: 100%; max-width: none; margin: 0; }
section.page-section.oa-home-film .oa-film__frame { border-radius: 0; }
/* the play pill sits in the middle of the homepage film */
section.page-section.oa-home-film .oa-film__play { left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%); }
section.page-section.oa-home-film .oa-film__play:hover { transform: translate(-50%, -50%) scale(1.04); }
/* "Selected projects" at the size of the other homepage section heads (Omar, 13 Oct) */
#page section.user-items-list-section:has(.oa-reel-src) .list-section-title :is(p, h1, h2, h3) { font-size: clamp(2.5rem, 4.4vw, 4rem) !important; line-height: 1.02 !important; }
/* Service pages (Omar, 13 Oct): the films and How I work run full bleed */
body.oa-svc-page { overflow-x: clip; }
body.oa-svc-page .oa-kit.oa-aud { overflow-x: visible; }
body.oa-svc-page .oa-kit.oa-aud > .oa-aud__film,
body.oa-svc-page .oa-kit.oa-aud > .oa-aud__embed:has(.oa-hiw) { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0; }
body.oa-svc-page .oa-aud__film .oa-film__frame { border-radius: 0; }
body.oa-svc-page .oa-aud__embed:has(.oa-hiw) .oa-hiw { padding-inline: max(16px, 6vw); }
/* the closing quote, the button, and Ask my website sit centered on the page, so the right half is never empty */
body.oa-svc-page .oa-aud__quote { margin-left: auto; margin-right: auto; text-align: center; max-width: 760px; }
body.oa-svc-page .oa-aud__quote figcaption { justify-content: center; }
body.oa-svc-page .oa-aud__cta { display: flex; justify-content: center; }
body.oa-svc-page .oa-p-ask { margin-left: auto; margin-right: auto; }
body.oa-svc-page .oa-p-ask__h { text-align: center; }
body.oa-svc-page .oa-p-ask__chips { justify-content: center; }
body.oa-svc-page .oa-p-ask__foot { text-align: center; justify-items: center; }
/* CRREM case (Omar, 13 Oct): the energy pathways explainer runs to the right edge; the closing film is full bleed */
@media (min-width: 768px) { .fe-block-yui_3_17_2_1_1791607512137_2198 { grid-column-end: -1 !important; } }
section.page-section[data-section-id="6ac8c49964f8a903f0821bce"] { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; }
section.page-section[data-section-id="6ac8c49964f8a903f0821bce"] :is(.section-border, .section-background) { border-radius: 0 !important; }
/* case-study films run full bleed (Omar, 13 Oct: CRREM, ABN AMRO, Bayo) */
section.page-section.oa-film-sec--bleed { padding-left: 0; padding-right: 0; }
section.page-section.oa-film-sec--bleed .oa-film-sec__in { width: 100%; max-width: none; margin: 0; }
section.page-section.oa-film-sec--bleed .oa-film__frame { border-radius: 0; }
.oa-film-slot { position: relative; z-index: 1; }

/* every case-study film that sits in a boxed section background runs edge to edge (Omar, 13 Oct:
   CRREM, PlantLab, THNK, The Class Foundation, and the rest) */
body.oa-bleed-page section.page-section.background-width--inset:has(.sqs-video-background-native) { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; }
body.oa-bleed-page section.page-section.background-width--inset:has(.sqs-video-background-native) :is(.section-border, .section-background) { border-radius: 0 !important; }

.fe-block.oa-bleed :is(.oa-film__frame, .plyr, .native-video-player, .sqs-native-video, .intrinsic) { border-radius: 0 !important; max-width: none !important; }
@media (min-width: 768px) { .fe-block.oa-bleed { grid-column: 1 / -1 !important; max-width: none !important; width: 100% !important; justify-self: stretch !important; } }

/* Home "Say hello" ticker in the loader's languages (Omar, 2026-10-13) */
.sqs-block-marquee .Marquee.oa-hello-tick-on .Marquee-display { display: none !important; }
.oa-kit.oa-hello-tick { display: flex; overflow: hidden; white-space: nowrap; user-select: none; padding-block: 0.12em; }
.oa-kit.oa-hello-tick .oa-hello-tick__track { display: flex; flex: none; align-items: baseline; animation: oa-marquee 46s linear infinite; }
.oa-kit.oa-hello-tick .oa-hello-tick__word { padding-right: 0.42em; }
.oa-kit.oa-hello-tick .oa-hello-tick__word > span[dir="rtl"] { unicode-bidi: isolate; }
@media (prefers-reduced-motion: reduce) { .oa-kit.oa-hello-tick .oa-hello-tick__track { animation-duration: 160s; } }

/* full-bleed films outside Fluid Engine grids (Omar, 13 Oct) */
body.oa-bleed-page { overflow-x: clip; }
@media (min-width: 768px) {
  body.oa-bleed-page .oa-film.oa-bleed-x { width: 100vw !important; max-width: none !important; position: relative; left: 50%; transform: translateX(-50%); }
  body.oa-bleed-page .oa-film.oa-bleed-x .oa-film__frame { border-radius: 0 !important; }
  body.oa-bleed-page section.page-section.oa-bleed-sec { width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; border-radius: 0 !important; }
  body.oa-bleed-page section.page-section.oa-bleed-sec :is(.section-border, .section-background) { border-radius: 0 !important; inset: 0 !important; width: 100% !important; max-width: none !important; }
}

/* mobile pass (2026-10-13): the header's logo link and menu button get a 44px tap area; nothing visible changes */
#header .header-title-logo > a, #header .header-mobile-logo > a { position: relative; }
#header .header-title-logo > a::after, #header .header-mobile-logo > a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
#header .header-burger-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); }
/* mobile pass (2026-10-13): the Portfolio filter pills are drawn 40px tall; an invisible band makes each a 44px tap */
.oa-wi__filters .oa-pill { position: relative; }
.oa-wi__filters .oa-pill::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* ---------- Film lightbox (Omar, 2026-10-13) ---------- */
/* Play opens the film over the page: light paper, the film centred at its own shape, a quiet close */
.oa-kit.oa-flb { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; background: rgba(246, 246, 242, 0.96); opacity: 0; transition: opacity 0.24s ease; overscroll-behavior: contain; box-sizing: border-box; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.oa-kit.oa-flb.is-open { opacity: 1; }
.oa-flb__stage { position: relative; flex: none; background: transparent; box-shadow: 0 30px 80px -40px rgba(23, 23, 27, 0.45); transform-origin: 50% 50%; transition: transform 0.44s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.2s ease; }
.oa-flb__stage :is(video, iframe) { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; border: 0; object-fit: contain !important; background: transparent !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
.oa-flb__close { position: absolute; top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--oa-ink, #17171b); cursor: pointer; transition: background 0.2s; }
.oa-flb__close::before, .oa-flb__close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: currentColor; border-radius: 1px; }
.oa-flb__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.oa-flb__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.oa-flb__close:hover { background: rgba(23, 23, 27, 0.06); }
.oa-flb__close:focus-visible { outline: 2px solid #ef4a24; outline-offset: 2px; }
html.oa-flb-lock, html.oa-flb-lock body { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) { .oa-kit.oa-flb, .oa-flb__stage { transition: none; } }
/* media.omarali.xyz player frames: black behind the picture while it loads */
.oa-flb__stage iframe { background: #000 !important; }

/* the open phone menu is always the light paper with dark words, even on pages whose header sits
   over a dark banner (/services set the header's black theme, so the menu went dark with dark links; Omar, 14 Oct) */
body.header--menu-open #header .header-menu-bg { background-color: #f6f6f2 !important; }
body.header--menu-open #header .header-menu .header-menu-nav :is(.header-menu-nav-item a) { color: #17171b !important; }
body.header--menu-open #header .header-menu .header-menu-cta a.btn { color: #fff !important; }
body.header--menu-open #header .header-burger-btn { color: #17171b !important; }
body.header--menu-open #header .header-burger-btn .burger-inner > div,
body.header--menu-open #header .header-burger-btn .burger-inner::before,
body.header--menu-open #header .header-burger-btn .burger-inner::after { background-color: #17171b !important; }
body.header--menu-open #header .header-title-logo img { filter: brightness(0) !important; }

/* /portfolio: the title on the banner photo, like /services and /writing; the list's own heading steps aside (Omar, 14 Oct) */
section.oa-banner .section-background .oa-banner__title {
  position: absolute; left: max(23px, 8.33vw); right: max(23px, 8.33vw); bottom: 80px; z-index: 2; margin: 0; padding: 0;
  font-family: var(--oa-font-display, "Archivo"), sans-serif; font-stretch: 125%; font-weight: 400;
  font-size: clamp(2.1rem, 4.5vw, 5rem); line-height: 1; letter-spacing: -0.02em; text-transform: none;
  color: #f6f6f2; text-align: left; filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.38)); pointer-events: none;
}
section.oa-banner .section-background::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(rgba(12, 14, 20, 0), rgba(12, 14, 20, 0.22)); pointer-events: none; z-index: 1; }
@media (max-width: 767px) { section.oa-banner .section-background .oa-banner__title { font-size: clamp(2.1rem, 10vw, 3rem); text-align: center; bottom: 64px; } }
body.oa-banner-titled .oa-portfolio-index .oa-wi__heading { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }