/* ============================================================
   Ringlio — editorial dark landing (fourmula-pattern rebuild)
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* The page's own background lives on the .body DIV, so without this the
     rubber-band overscroll area (iOS/macOS elastic scroll) paints the UA's
     white. Mirror the theme here; .light sits on the DIV, hence :has().
     Light is the default, so that's the base and dark is the override. */
  background-color: #ffffff;
}
html:has(.body:not(.light)) { background-color: #020108; }
@media (min-width: 992px) {
  html { font-size: calc(100vw / 90); } /* 16px @ 1440w, fluid */
}
@media (min-width: 1920px) {
  html { font-size: 21.3px; }
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; }

/* ---------- tokens ---------- */
.body {
  --mainbg: #020108;
  --fonts-100: #ffffff;
  --menu: #272727;
  --menu-colors: #ffffff33;
  --secondbg: #111111;
  --fonts-50: #ffffff80;
  --lines: #2a2a30;
  --fonts-30: #ffffff4d;
  --fonts-64: #ffffffa3;
  --mainbg-gradient: #02010800;
  --fonts-20: #ffffff33;
  --dots-pattern: #1a1a1a;
  --accent: #3d5afe;

  /* ---- the real product's paper kit (from brief.css, rb-cy-rollout) ----
     Every depiction of the brief itself draws from these, not the site
     palette: house cream paper, derived ink ramp, structural rule, and the
     product's three faces. --pk-acc is the TENANT accent (Marlow & Reed's
     teal here), set per artifact the way the product derives it. */
  --pk-paper: #F1EBDC;
  --pk-paper-bright: #F8F3E5;
  --pk-ink: #14171A;
  --pk-ink-2: #2F343A;
  --pk-ink-3: #5F6770;
  --pk-rule: #2C2A26;
  --pk-rule-soft: rgba(20, 23, 26, 0.18);
  --pk-rule-soft-2: rgba(20, 23, 26, 0.08);
  --pk-acc: #2E5941;
  --pk-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --pk-text: 'Source Serif 4', Georgia, serif;
  --pk-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  background-color: var(--mainbg);
  color: var(--fonts-100);
  display: flex;
  flex-flow: column;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  transition: background-color .35s ease;
}
.body.light {
  --mainbg: #ffffff;
  --fonts-100: #020108;
  --menu: #020108;
  --menu-colors: #ffffff33;
  --secondbg: #f7f7f7;
  --fonts-50: #02010880;
  --lines: #d7d7d6;
  --fonts-30: #0201084d;
  --fonts-64: #020108a3;
  --mainbg-gradient: #ffffff00;
  --fonts-20: #02010833;
  --dots-pattern: #d9d9d9;
}

/* ---------- type scale ---------- */
.body {
  --fs-h1: 5.5rem;
  --fs-h2: 7.5rem;
  --fs-h2-5: 4rem;
  --fs-h3: 3.25rem;
  --fs-h4: 2.25rem;
  --fs-body-1: 1.125rem;
  --fs-body-2: 1rem;
  --fs-body-3: 1.25rem;
  --fs-tag: 1.125rem;
  --fs-title-1: 1rem;
  --fs-title-2: .875rem;
  --fs-title-3: 1.5rem;
  --fs-btn: 1.0625rem;
  --fs-small-1: .75rem;
  --fs-small-2: .625rem;
  --ls-h1: -.165rem;
  --ls-h2: -.225rem;
}
@media (max-width: 991px) {
  .body { --fs-h1: 4.5rem; --fs-h2: 5.5rem; }
}
@media (max-width: 767px) {
  .body {
    --fs-h1: 2.5rem; --fs-h2: 2.25rem; --fs-h2-5: 2.25rem; --fs-h3: 1.5rem;
    --fs-h4: 2rem; --fs-body-1: 1rem; --fs-body-2: .875rem; --fs-body-3: 1rem;
    --fs-tag: 1rem; --fs-title-3: 1.125rem;
    --ls-h1: -.075rem; --ls-h2: 0rem;
  }
}

.u-h1 { font-size: var(--fs-h1); line-height: .94; font-weight: 400; letter-spacing: var(--ls-h1); }
.u-h2 { font-size: var(--fs-h2); line-height: 1; font-weight: 400; letter-spacing: var(--ls-h2); }
.u-h2-5 { font-size: var(--fs-h2-5); line-height: 1; font-weight: 400; letter-spacing: -.045rem; }
.u-h3 { font-size: var(--fs-h3); line-height: 1.05; font-weight: 500; letter-spacing: -.05rem; }
.u-body-2 { font-size: var(--fs-body-2); line-height: 1.25; font-weight: 400; }
.u-body-3 { font-size: var(--fs-body-3); line-height: 1.25; font-weight: 500; }
.u-tag { font-size: var(--fs-tag); line-height: 1.5; font-weight: 400; }
.u-title-1 { font-size: var(--fs-title-1); line-height: 1.5; font-weight: 500; }
.u-title-2 { font-size: var(--fs-title-2); line-height: 1.5; font-weight: 500; }
.u-title-3 { font-size: var(--fs-title-3); line-height: 1.5; font-weight: 500; }
.u-btn { font-size: var(--fs-btn); line-height: 1.2; font-weight: 400; letter-spacing: -.02125rem; }
.u-small-text-1 { font-size: var(--fs-small-1); line-height: 1.5; font-weight: 400; }
.u-small-text-2 { font-size: var(--fs-small-2); line-height: 1; font-weight: 500; letter-spacing: .02rem; text-transform: uppercase; }
.u-fonts-100 { color: var(--fonts-100); }
.u-fonts-50 { color: var(--fonts-50); }
.u-fonts-30 { color: var(--fonts-30); }
.u-fonts-64 { color: var(--fonts-64); }
.u-indent { padding-left: 1.75rem; }
.is-dim { color: color-mix(in srgb, currentColor 55%, transparent); }

.page {
  display: flex;
  flex-flow: column;
  min-height: 100svh;
  /* clip, not hidden: `hidden` would make this the scroll container and kill
     position:sticky on the step cards. clip trims the same overflow without one. */
  overflow: clip;
}

.br-desktop { display: inline; }
@media (max-width: 767px) { .br-desktop { display: none; } }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--mainbg);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.preloader__images {
  position: relative;
  width: 14rem;
  height: 17rem;
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--secondbg);
}
.preloader__images-in {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.preloader__images-in > img { width: 100%; height: 100%; object-fit: cover; }
.preloader__bottom {
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.preloader__brand { color: var(--fonts-50); }
.preloader__number { color: var(--fonts-100); font-variant-numeric: tabular-nums; }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  transition: transform .35s ease, opacity .25s ease;
  will-change: transform;
}
.header.is-hidden { transform: translateY(-120%); }
.header__left { width: 14rem; }
/* the lockup: the magnet sits ~2× the wordmark's cap height, which is as
   large as it can go before the mark starts shouting over the name. Sized by
   height with width:auto so the viewBox keeps its own 1.35 ratio. */
.header__left-link {
  display: flex;
  align-items: center;
  gap: .58rem;
  text-decoration: none;
  transition: opacity .2s;
}
.header__left-link:hover { opacity: .64; }
.header__logo { height: 1.55rem; width: auto; flex: none; }
/* CSS beats the SVG's presentation attribute, so the mark follows the accent
   token instead of a hardcoded hex in three places. */
.header__logo path, .header__logo rect,
.footer__logo path, .footer__logo rect { fill: var(--accent); }
.header__logo-word {
  font-weight: 600;
  letter-spacing: -.012em;
}
.header__main {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: var(--menu);
  border-radius: 99rem;
  height: 3rem;
  padding: .5rem .5rem .5rem 0;
  position: relative;
}
.header__menu {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0 .5rem .9rem;
  text-decoration: none;
  transition: opacity .2s;
}
.header__menu:hover { opacity: .64; }
.header__menu-icon {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 1.65rem;
  height: 1.65rem;
  color: #fff;
}
.header__menu-line {
  background-color: #fff;
  width: 1.65rem;
  height: .0625rem;
  transition: transform .3s ease;
}
.header__menu-line.is-top { transform: translateY(-.2rem); }
.header__menu-line.is-bottom { transform: translateY(.2rem); }
.header__menu.is-open .header__menu-line.is-top { transform: translateY(.03125rem) rotate(45deg); }
.header__menu.is-open .header__menu-line.is-bottom { transform: translateY(-.03125rem) rotate(-45deg); }
.header__menu-txt { color: #fff; width: 3.2rem; flex: none; text-align: left; }
.header__prc {
  background-color: var(--menu-colors);
  border-radius: 99rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  padding: 0 .55rem;
  max-width: 6rem;
  overflow: hidden;
  transition: max-width .4s ease, margin .4s ease, padding .4s ease, opacity .3s ease;
}
/* the counter stays tucked away until scrolling begins; negative margin
   swallows the pill's flex gap so Menu and the theme dot sit at normal spacing */
.header__prc:not(.is-on) { max-width: 0; padding: 0; margin: 0 -.75rem; opacity: 0; }
.header__prc-txt { color: #fff; text-align: center; width: 2.6rem; font-variant-numeric: tabular-nums; }
.header__theme {
  border: 1px solid var(--menu-colors);
  border-radius: 99rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color .2s;
}
.header__theme:hover { border-color: #ffffffa6; }
.header__theme-day, .header__theme-night {
  width: 1.1rem; height: 1.1rem;
  color: #fff;
  justify-content: center; align-items: center;
}
.header__theme-day { display: flex; }
.header__theme-night { display: none; }
.body.light .header__theme-day { display: none; }
.body.light .header__theme-night { display: flex; }
.header__theme svg { width: 100%; height: 100%; }
.header__right {
  width: 14rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
}
.header__account { text-decoration: none; transition: color .2s; white-space: nowrap; }
.header__account:hover { color: var(--accent); }

.btn-primary {
  background-color: var(--fonts-100);
  color: var(--mainbg);
  height: 3rem;
  border-radius: 99rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .875rem 1.5rem;
  text-decoration: none;
  transition: background-color .2s, color .2s;
  white-space: nowrap;
}
.btn-primary:hover { background-color: var(--accent); color: #fff; }
/* conversion CTAs wear the accent at rest; hover deepens instead of repeating it */
.btn-primary.is-rates, .btn-primary.is-contact { background-color: var(--accent); color: #fff; }
.btn-primary.is-rates:hover, .btn-primary.is-contact:hover { background-color: color-mix(in srgb, var(--accent) 82%, #000); }

@media (max-width: 767px) {
  /* base header centres its items; flex-start dropped the logo out of line
     with the two pills */
  .header { padding: 1.2rem 1rem; }
  .header__left { width: auto; }
  .header__logo-word { display: none; }
  .header__right .header__account { display: none; }
  .header__right { width: auto; }
  .header__right .btn-primary { height: 2.6rem; padding: .6rem 1.1rem; }
  .header__main { gap: .9rem; }
  /* the % pill widens the centre pill until "Talk to us" is pushed off-screen */
  .header__prc { display: none; }
}

/* ============================================================
   MENU OVERLAY
   ============================================================ */
.menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 998;
  display: flex;
  justify-content: center;
  padding-top: .75rem;
  pointer-events: none;
}
.menu__wrap {
  background-color: var(--dots-pattern);
  border-radius: 2rem;
  width: 20rem;
  padding: 6.25rem 1.5rem 2rem;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-1rem) scale(.96);
  transform-origin: top center;
  visibility: hidden;
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.menu.is-open .menu__wrap {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition: opacity .35s ease, transform .35s ease;
}
.menu__inner { display: flex; flex-flow: column; gap: 1.75rem; width: 100%; }
.menu__item { display: flex; flex-flow: column; gap: .65rem; width: 100%; }
.menu__item.is-lined { border-top: 1px solid var(--fonts-20); padding-top: 1.35rem; }
.menu__item.is-last {
  padding-top: 1.5rem;
  flex-flow: row;
  align-items: center;
  gap: 1rem;
}
.menu__item.is-last .btn-primary { flex: 1; }
.menu__label { }
.menu__list { display: flex; flex-flow: column; gap: .2rem; }
.menu__list.is-row { flex-flow: row; gap: .75rem; }
.menu__link { text-decoration: none; transition: opacity .2s, color .2s; }
.menu__link:hover { color: var(--accent); }
@media (max-width: 767px) {
  /* the panel hangs centred under the header pill (which morphs Menu→Close),
     same as desktop — right-aligning it left the Close pill orphaned over
     the panel's corner */
  .menu__wrap { width: min(20rem, calc(100vw - 1.5rem)); padding: 5rem 1.1rem 1.25rem; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  padding: 2rem;
}
/* scrim grounds the bottom of the stage — kept shallow so tiles hold their
   paper colour through the bottom arc (the wheel never reaches the headline) */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(0deg, var(--mainbg) 8%, var(--mainbg-gradient) 100%);
  z-index: 2;
  pointer-events: none;
}
.hero__wrap {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
.hero__left { max-width: 44rem; }
.hero__title { position: relative; }
.hero__title .is-accent { color: var(--accent); }
.hero__deck {
  max-width: 26rem;
  margin-top: 1.4rem;
  line-height: 1.45;
}
.hero__right { display: flex; align-items: flex-end; }
.hero__scroll {
  text-decoration: none;
  color: var(--fonts-50);
  transition: color .2s;
  white-space: nowrap;
}
.hero__scroll:hover { color: var(--accent); }

/* vertical tag slider (desktop) */
.hero__slider {
  position: absolute;
  top: 10rem; bottom: 10rem; right: 2rem;
  z-index: 4;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
}
.hero__slider__kicker {
  color: var(--fonts-50);
  letter-spacing: .14em;
  margin-bottom: .9rem;
  white-space: nowrap;
}
.hero__slider__wrap {
  position: relative;
  height: 17rem;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
}
.hero__slider__track {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  animation: tags-v 18s linear infinite;
}
@keyframes tags-v { to { transform: translateY(-50%); } }
.hero__slider__row {
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  gap: .5rem;
  padding-bottom: .5rem;
}
.hero__slider__item {
  border: 1px solid var(--fonts-20);
  background-color: var(--mainbg);
  border-radius: .5rem;
  padding: .35rem 1rem .4rem;
  flex: none;
}
.hero__slider__item-txt { font-size: var(--fs-title-1); white-space: nowrap; }
.hero__slider__item.is-hot { background-color: var(--accent); border-color: var(--accent); }
.hero__slider__item.is-hot .hero__slider__item-txt { color: #fff; }
.hero__slider__top-gr {
  position: absolute; top: 0; left: 0; right: 0;
  height: 7rem;
  background: linear-gradient(180deg, var(--mainbg), var(--mainbg-gradient));
  pointer-events: none;
}
.hero__slider__bottom-gr {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 7rem;
  background: linear-gradient(0deg, var(--mainbg), var(--mainbg-gradient));
  pointer-events: none;
}

/* rotating carousel */
.hero__carousel__wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.hero__carousel__in {
  position: relative;
  width: 42.5rem;
  height: 42.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__carousel__in > div { position: absolute; }
.hero__carousel__45deg  { transform: rotate(45deg); }
.hero__carousel__90deg  { transform: rotate(90deg); }
.hero__carousel__135deg { transform: rotate(135deg); }
.hero__carousel__180deg { transform: rotate(180deg); }
.hero__carousel__225deg { transform: rotate(225deg); }
.hero__carousel__270deg { transform: rotate(270deg); }
.hero__carousel__315deg { transform: rotate(315deg); }
.hero__carousel__item {
  position: relative;
  top: -19rem;
  width: 7.8rem;
  height: 9.2rem;
  border-radius: 1rem;
  overflow: hidden;
  background-color: var(--lines);
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__carousel__img {
  flex: none;
  width: 10rem;
  height: 10rem;
  max-width: none;
  object-fit: cover;
  /* the level page must cover the ROTATING window at every angle, i.e. contain
     its circumscribed circle: half-diagonal of 7.8x9.2 = 6.03rem, so the page
     needs >= 12.06rem across. 10rem * 1.22 = 12.2rem. Without this the window's
     grey backing shows at the corners during diamond phases. */
  transform: scale(1.22);
}

/* ---- mini briefs: one page anatomy, 8 brand skins (em-scaled) ---- */
.tile { font-size: 1rem; }
.mb {
  --mb-hair: color-mix(in srgb, currentColor 28%, transparent);
  --mb-body-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  width: 10em;
  height: 10em;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  padding: .6em 1.3em .5em;
  text-align: left;
  background: var(--mb-bg);
  color: var(--mb-ink);
}
.mb p { margin: 0; }
.mb__folio {
  display: flex;
  justify-content: space-between;
  font-family: "Helvetica Neue", sans-serif;
  font-size: .225em;
  letter-spacing: .2em;
  opacity: .6;
  border-bottom: 1px solid var(--mb-hair);
  padding-bottom: .9em;
}
.mb__kicker {
  text-align: center;
  font-family: "Helvetica Neue", sans-serif;
  font-size: .235em;
  letter-spacing: .32em;
  color: var(--mb-acc);
  margin-top: 1.1em;
}
.mb__mast {
  text-align: center;
  font-family: var(--mb-mast-font);
  font-size: var(--mb-mast-size, .72em);
  font-weight: var(--mb-mast-weight, 600);
  font-style: var(--mb-mast-style, normal);
  text-transform: var(--mb-mast-case, none);
  line-height: 1.02;
  letter-spacing: var(--mb-mast-track, -.01em);
  margin-top: .12em;
}
.mb__meta {
  text-align: center;
  font-family: "Helvetica Neue", sans-serif;
  font-size: .215em;
  letter-spacing: .26em;
  opacity: .55;
  margin-top: .9em;
}
.mb__rule {
  height: 2px;
  background: currentColor;
  margin: .28em 0 .3em;
  position: relative;
  flex: none;
}
.mb__rule::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3.5px;
  height: .5px;
  background: var(--mb-hair);
}
.mb__band { flex: none; margin-top: .05em; }
.mb__cols {
  display: flex;
  gap: .42em;
  flex: 1;
  min-height: 0;
  margin-top: .12em;
  overflow: hidden;
}
.mb__col { flex: 1; display: flex; flex-flow: column; gap: .16em; min-width: 0; }
.mb__label {
  font-family: "Helvetica Neue", sans-serif;
  font-size: .205em;
  letter-spacing: .2em;
  color: var(--mb-acc);
}
.mb__q {
  font-family: var(--mb-body-font, "Iowan Old Style", "Palatino", Georgia, serif);
  font-style: italic;
  font-size: .29em;
  line-height: 1.32;
}
.mb__a {
  font-family: var(--mb-body-font, "Iowan Old Style", "Palatino", Georgia, serif);
  font-size: .255em;
  line-height: 1.46;
  opacity: .84;
}
.mb__photo {
  width: 100%;
  height: 2.55em;
  object-fit: cover;
  object-position: center var(--mb-focal, 50%);
  display: block;
  filter: var(--mb-photo-filter, none);
  border: var(--mb-photo-border, none);
}
.mb__cap {
  font-family: var(--mb-body-font, "Iowan Old Style", "Palatino", Georgia, serif);
  font-style: italic;
  font-size: .21em;
  line-height: 1.4;
  opacity: .6;
  margin-top: .5em;
}
.mb__reg {
  border: 1px solid currentColor;
  padding: .5em .6em .35em;
  margin-top: .35em;
}
.mb__reg-title {
  font-family: "Helvetica Neue", sans-serif;
  font-size: .8em;
  letter-spacing: .26em;
  text-align: center;
  border-bottom: 1px solid var(--mb-hair);
  padding-bottom: .4em;
  margin-bottom: .2em;
}
.mb__reg { font-size: .25em; }
.mb__reg-row {
  display: flex;
  justify-content: space-between;
  gap: .8em;
  border-bottom: 1px dotted var(--mb-hair);
  padding: .32em 0;
  font-family: var(--mb-body-font, Georgia, serif);
}
.mb__reg-row:last-child { border-bottom: none; }
.mb__reg-row em {
  font-style: normal;
  font-family: "Helvetica Neue", sans-serif;
  font-size: .8em;
  letter-spacing: .08em;
  opacity: .6;
  flex: none;
}
.mb__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  font-family: "Helvetica Neue", sans-serif;
  font-size: .205em;
  letter-spacing: .2em;
  opacity: .5;
  border-top: 1px solid var(--mb-hair);
  padding-top: .8em;
  flex: none;
}
.mb-extra { display: none !important; }

/* brand skins */
.b1 { --mb-bg: #fdfcfa; --mb-ink: #1d1c1a; --mb-acc: #2e5941;
      --mb-mast-font: "Playfair Display", "Didot", Georgia, serif; }
.b2 { --mb-bg: #f2e8d8; --mb-ink: #2a1f14; --mb-acc: #b4451f;
      --mb-mast-font: "Futura", "Avenir Next", "Jost", "Helvetica Neue", sans-serif;
      --mb-mast-weight: 700; --mb-mast-case: uppercase; --mb-mast-size: .62em; --mb-mast-track: .04em;
      --mb-body-font: Georgia, serif; }
.b3 { --mb-bg: #0d1b33; --mb-ink: #f4efe4; --mb-acc: #c9a648; --mb-focal: 66%;   /* the arcade, not the sky */
      --mb-mast-font: "Baskerville", "Libre Baskerville", Georgia, serif; --mb-mast-weight: 500;
      --mb-body-font: "Baskerville", "Libre Baskerville", Georgia, serif; }
.b4 { --mb-bg: #f6f1ea; --mb-ink: #23140f; --mb-acc: #6e1425; --mb-focal: 40%;   /* necks + upper labels of the rack */
      --mb-mast-font: "Didot", "Bodoni 72", "Bodoni Moda", Georgia, serif; --mb-mast-style: italic; --mb-mast-weight: 500; }
.b5 { --mb-bg: #ffffff; --mb-ink: #101010; --mb-acc: #101010; --mb-focal: 55%;
      --mb-mast-font: "Didot", "Bodoni 72", "Bodoni Moda", Georgia, serif; --mb-mast-weight: 700; --mb-mast-case: uppercase;
      --mb-mast-size: .6em; --mb-mast-track: .05em;
      --mb-photo-filter: grayscale(1) contrast(1.08); --mb-photo-border: 2px solid #101010; }
.b6 { --mb-bg: #ececea; --mb-ink: #17171a; --mb-acc: #d43022;
      --mb-mast-font: "Helvetica Neue", Helvetica, sans-serif; --mb-mast-weight: 700;
      --mb-mast-case: lowercase; --mb-mast-size: .58em; --mb-mast-track: -.02em;
      --mb-body-font: "Helvetica Neue", sans-serif; }
.b7 { --mb-bg: #efe9df; --mb-ink: #241f19; --mb-acc: #7a6a4f;
      --mb-mast-font: "Copperplate", "Cormorant SC", "Palatino Linotype", Palatino, serif; --mb-mast-weight: 500;
      --mb-mast-size: .46em; --mb-mast-track: .14em;
      --mb-body-font: "Baskerville", "Libre Baskerville", Georgia, serif; }
.b7 .mb__photo { border-radius: 50%; width: 2.9em; height: 2.9em; margin: .1em auto 0; border: 1.5px solid #241f19; }
.b8 { --mb-bg: #eaf0f2; --mb-ink: #0d2733; --mb-acc: #1465a0; --mb-focal: 60%;   /* hulls, not sky */
      --mb-mast-font: "American Typewriter", "Courier Prime", "Courier New", serif; --mb-mast-size: .5em; --mb-mast-track: .06em;
      --mb-body-font: "American Typewriter", "Courier Prime", "Courier New", serif; }
.b6 .mb__kicker, .b6 .mb__mast, .b6 .mb__meta { text-align: left; }
.b2 .mb__kicker, .b2 .mb__mast, .b2 .mb__meta { text-align: left; }

/* ---- per-brand page FORMATS (tiles only — the stage keeps the full anatomy).
   Eight mastheads, eight compositions: classic side-by-side (b1) · photo strip
   up top (b2) · portrait plate left (b3) · portrait plate right (b4) ·
   full-width cover plate (b5) · type only (b6) · centred medallion (b7) ·
   photo band at the foot (b8). ---- */

/* tabloid front — the picture leads, text runs under (Corner Press) */
.lay-top .mb__cols { flex-flow: column; gap: .18em; }
.lay-top .mb__col:last-child { order: -1; flex: none; }
.lay-top .mb__photo { height: 2.05em; }
.lay-top .mb__cap { margin-top: .2em; }

/* portrait plate LEFT, text beside it (The Term Ahead) */
.lay-port-l .mb__col:last-child { order: -1; flex: none; width: 42%; }
.lay-port-l .mb__photo { height: 4.7em; }

/* portrait plate RIGHT, text on the side (Harbour & Vine) */
.lay-port-r .mb__col:last-child { flex: none; width: 40%; }
.lay-port-r .mb__photo { height: 4.9em; }

/* full-width cover plate under the masthead (The Open Home) */
.lay-cover .mb__cols { flex-flow: column; gap: .2em; }
.lay-cover .mb__col:last-child { order: -1; flex: none; }
.lay-cover .mb__photo { height: 3.05em; }
.lay-cover .mb__cap { margin-top: .15em; }

/* type only — the photograph waits for the stage (studio ledger) */
.lay-text .mb__col:last-child { display: none; }
.lay-text .mb__q.mb-extra, .lay-text .mb__a.mb-extra { display: block !important; }
.lay-text .mb__a.mb-extra:last-of-type { display: none !important; }

/* centred medallion above the text (The Fitting Room) */
.lay-medal .mb__cols { flex-flow: column; gap: .12em; }
.lay-medal .mb__col:last-child { order: -1; flex: none; }
.lay-medal .mb__cap { text-align: center; }
.lay-medal .mb__label, .lay-medal .mb__q, .lay-medal .mb__a { text-align: center; }

/* photo band at the FOOT — the day's dispatch signs off with the boat (Dockside) */
.lay-bottom .mb__cols { flex-flow: column; gap: .18em; }
.lay-bottom .mb__col:last-child { flex: none; }
.lay-bottom .mb__photo { height: 2.1em; }

/* ---- the centre ask bar (idle at centre, docks beneath the spotlit brief) ---- */
.hero__ask-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.hero__ask {
  --ask-acc: var(--accent);
  position: relative;
  isolation: isolate;
  pointer-events: auto;   /* the wrap is inert; the bar itself takes the click */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 21.5rem;
  max-width: 86vw;
  border-radius: 99rem;
  padding: .85rem 1.3rem;
  box-shadow:
    0 .3rem .9rem #00000038,
    0 1.4rem 4.2rem #00000052;
}
/* glass body: frosted, colour-lifted */
.hero__ask::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(115deg, #ffffff17 0%, #ffffff08 38%, #ffffff0c 66%, #ffffff14 100%);
  -webkit-backdrop-filter: blur(7px) saturate(1.8) brightness(1.06);
  backdrop-filter: blur(7px) saturate(1.8) brightness(1.06);
}
/* liquid layer: refracts what passes behind the bar + specular rim light */
.hero__ask::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  -webkit-backdrop-filter: url(#liquid-glass);
  backdrop-filter: url(#liquid-glass);
  background: radial-gradient(130% 170% at 14% -35%, #ffffff2b 0%, #ffffff00 58%);
  box-shadow:
    inset 2.5px 2.5px 1.5px -2px #ffffffd9,
    inset -2px -2px 1.5px -2.5px #ffffff82,
    inset 0 0 0 1px #ffffff1f,
    inset 0 -9px 18px -12px #ffffff2b;
}
.hero__ask > * { position: relative; z-index: 1; }
.hero__ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero__ask-dot {
  flex: none;
  width: .34rem;
  height: .34rem;
  border-radius: 99rem;
  background: var(--ask-acc);
  box-shadow: 0 0 .55rem color-mix(in srgb, var(--ask-acc) 85%, transparent);
}
.hero__ask-txt {
  flex: 1;
  font-size: .95rem;
  font-weight: 500;
  color: var(--fonts-100);
  white-space: nowrap;
  overflow: hidden;
  min-height: 1.25rem;
  display: flex;
  align-items: center;
}
/* caret rides at the end of the typed text, so it travels with the words */
.hero__ask-txt::after {
  content: "";
  flex: none;
  width: 2px;
  height: 1.05rem;
  margin-left: .18rem;
  background: var(--ask-acc);
  animation: caret-blink 1.1s steps(1) infinite;
}
.glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.body.light .hero__ask {
  box-shadow:
    0 .3rem .9rem #02010812,
    0 1.4rem 4.2rem #0201081f;
}
.body.light .hero__ask::before {
  background: linear-gradient(115deg, #ffffff96 0%, #ffffff45 38%, #ffffff59 66%, #ffffff80 100%);
  -webkit-backdrop-filter: blur(7px) saturate(1.6);
  backdrop-filter: blur(7px) saturate(1.6);
}
.body.light .hero__ask::after {
  background: radial-gradient(130% 170% at 14% -35%, #ffffff8c 0%, #ffffff00 58%);
  box-shadow:
    inset 2.5px 2.5px 1.5px -2px #ffffff,
    inset -2px -2px 1.5px -2.5px #ffffffc9,
    inset 0 0 0 1px #02010817,
    inset 0 -9px 18px -12px #ffffff73;
}

/* ---- centre stage: the expanded brief ---- */
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  visibility: hidden;
}
.hero__stage .mb {
  font-size: 1.5rem;
  width: 14.2em;
  max-width: 94vw;
  flex: none;
  height: auto;
  min-height: 0;
  padding: .6em .95em .5em;
  border-radius: .35em;
  box-shadow: 0 1.6rem 5rem #00000066;
}
.hero__stage .mb__photo { height: 3.5em; margin-top: .1em; }   /* 6:1 was a sliver — no crop of a square source survives that */
.hero__stage .b7 .mb__photo { width: 2.9em; height: 2.9em; }

/* --- the answer theatre (stage page only) --- */
.mb__answer {
  display: flex;
  flex-flow: column;
  gap: .1em;
  min-height: 3.3em;
  margin-top: .2em;
}
.mb__ans-label {
  opacity: 0;
  transform: translateY(.6em);
  transition: opacity .35s ease, transform .35s ease;
}
.mb__ans-label.is-on { opacity: 1; transform: none; }
.mb__ans-q {
  overflow: hidden;
  font-family: var(--mb-body-font, "Iowan Old Style", "Palatino", Georgia, serif);
  font-style: italic;
  font-size: .32em;
  line-height: 1.3;
}
.mb__ans-q-in {
  display: inline-block;
  transform: translateY(125%);
  transition: transform .6s cubic-bezier(.2, .75, .2, 1);
}
.mb__ans-q-in.is-on { transform: none; }
.mb__ans-a {
  font-family: var(--mb-body-font, "Iowan Old Style", "Palatino", Georgia, serif);
  font-size: .27em;
  line-height: 1.5;
  opacity: .88;
  min-height: 3em;
}
.mb__w { opacity: 0; transition: opacity .24s ease; }
.mb__w.is-on { opacity: 1; }
.mb__ans-filed {
  font-family: "Helvetica Neue", sans-serif;
  font-size: .2em;
  letter-spacing: .22em;
  opacity: 0;
  transition: opacity .5s ease;
}
.mb__ans-filed.is-on { opacity: .55; }

/* --- the page's own ask bar --- */
.mb__ask {
  display: flex;
  align-items: center;
  gap: .28em;
  border-top: 1.5px solid currentColor;
  border-bottom: 1px solid var(--mb-hair);
  padding: .3em 0;
  margin-top: .15em;
  flex: none;
}
.mb__ask-dot {
  flex: none;
  width: .16em;
  height: .16em;
  border-radius: 99em;
  background: var(--mb-acc);
}
.mb__ask-txt {
  flex: 1;
  font-family: "Helvetica Neue", sans-serif;
  font-size: .27em;
  font-weight: 500;
  min-height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
}
.mb__ask-caret {
  flex: none;
  width: .06em;
  height: .42em;
  background: var(--mb-acc);
  animation: caret-blink 1.1s steps(1) infinite;
}
@media (max-width: 767px) {
  .hero__stage .mb { font-size: .82rem; }
}
.hero__carousel__img.is-45deg  { transform: rotate(-45deg) scale(1.22); }
.hero__carousel__img.is-90deg  { transform: rotate(-90deg) scale(1.22); }
.hero__carousel__img.is-135deg { transform: rotate(-135deg) scale(1.22); }
.hero__carousel__img.is-180deg { transform: rotate(-180deg) scale(1.22); }
.hero__carousel__img.is-225deg { transform: rotate(-225deg) scale(1.22); }
.hero__carousel__img.is-270deg { transform: rotate(-270deg) scale(1.22); }
.hero__carousel__img.is-315deg { transform: rotate(-315deg) scale(1.22); }

@media (max-width: 991px) {
  .hero__carousel__in { top: 3rem; }
}
@media (max-width: 767px) {
  /* the floor guarantees the wheel band keeps its shape even when Safari's
     bars shrink svh — short phones scroll a touch */
  .hero { padding: 1rem; min-height: max(100svh, 47rem); }
  .hero__slider { top: auto; bottom: 4.5rem; left: 0; right: 0; flex-flow: column; align-items: flex-end; }
  .hero__slider__kicker { display: none; }
  .hero__slider__wrap { width: 100%; height: auto; flex-flow: row; }
  .hero__slider__track { flex-flow: row; animation: tags-h 18s linear infinite; }
  @keyframes tags-h { to { transform: translateX(-50%); } }
  .hero__slider__row { flex-flow: row; padding-bottom: 0; padding-right: .5rem; }
  .hero__slider__top-gr { width: 4rem; height: 100%; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--mainbg), var(--mainbg-gradient)); }
  .hero__slider__bottom-gr { width: 4rem; height: 100%; inset: 0 0 0 auto; background: linear-gradient(270deg, var(--mainbg), var(--mainbg-gradient)); }
  .hero__wrap { padding-bottom: 6rem; }
  /* phone composition: the wheel, stage and ask pill live in a BAND anchored
     between the header (4.5rem) and the text zone (17rem: headline + deck +
     chips + paddings); flex-centring spreads any slack evenly, so the wheel
     sits centred in whatever space the viewport gives it — no dead gap. The
     headline/deck stay bottom-anchored below; the zones never intersect. */
  .hero__carousel__wrap, .hero__stage, .hero__ask-wrap {
    inset: auto; top: 4.5rem; bottom: 17rem; left: 0; right: 0; height: auto;
  }
  .hero__scroll { display: none; }
  .hero__carousel__in { width: 22rem; height: 22rem; top: 0; }
  .hero__carousel__item { width: 4.6rem; height: 5.4rem; border-radius: .6rem; top: -10rem; }
  .hero__carousel__img { width: 6rem; height: 6rem; }
  .tile { font-size: .6rem; }
  .drop-zone { padding: 1.6rem 1.6rem; }
  /* stronger frost on small screens so tiles behind the docked bar don't fight the text */
  .hero__ask::before {
    background: linear-gradient(115deg, #ffffff2e 0%, #ffffff14 38%, #ffffff1a 66%, #ffffff29 100%);
    -webkit-backdrop-filter: blur(13px) saturate(1.8) brightness(1.08);
    backdrop-filter: blur(13px) saturate(1.8) brightness(1.08);
  }
}

/* ============================================================
   WHAT
   ============================================================ */
.what { padding-top: 12rem; }
.what__main {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding: 0 2rem 8rem;
}
.what__left { flex: none; width: 22rem; }
.what__right { flex: 1; }
.what__title { max-width: 62rem; }
.what__clients {
  display: flex;
  align-items: center;
  gap: 3rem;
  border-top: 1px solid var(--lines);
  padding: 2.5rem 2rem;
}
.what__clients-left { flex: none; width: 19rem; }
.what__clients-right { position: relative; flex: 1; overflow: hidden; }
.what__clients-row {
  display: flex;
  align-items: center;
  gap: 4.5rem;
  width: max-content;
  animation: logos 26s linear infinite;
}
@keyframes logos { to { transform: translateX(-50%); } }
.what__clients-item { flex: none; }
.what__clients-logo {
  color: var(--fonts-30);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: color .2s;
}
.what__clients-item:nth-child(even) .what__clients-logo { font-family: Georgia, serif; font-weight: 400; letter-spacing: .02em; }
.what__clients-item:hover .what__clients-logo { color: var(--accent); }
.what__clients-gr-left {
  position: absolute; inset: 0 auto 0 0; width: 7rem;
  background: linear-gradient(90deg, var(--mainbg), var(--mainbg-gradient));
  pointer-events: none;
}
.what__clients-gr-right {
  position: absolute; inset: 0 0 0 auto; width: 7rem;
  background: linear-gradient(270deg, var(--mainbg), var(--mainbg-gradient));
  pointer-events: none;
}
@media (max-width: 767px) {
  .what { padding-top: 6rem; }
  .what__main { flex-flow: column; gap: 1.5rem; padding: 0 1rem 3.5rem; }
  .what__left { width: auto; }
  .what__clients { padding: 1.5rem 1rem; flex-flow: column; align-items: flex-start; gap: 1.25rem; }
  .what__clients-left { width: auto; }
  .what__clients-right { width: 100%; }
}

/* ============================================================
   AI FEATURES
   ============================================================ */
.ai { display: flex; flex-flow: column; }
.ai__block {
  position: relative;
  padding: 4rem 2rem 6rem;
}
.ai__tag {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.ai__dot {
  width: .25rem; height: .25rem;
  border-radius: 9rem;
  background-color: var(--accent);
}
.ai__title { display: flex; flex-flow: column; gap: 1.25rem; max-width: 40rem; }
/* ---- the press run: website → brief, scroll-scrubbed ----
   CSS describes the FINISHED composition (what FLAT captures and
   reduced-motion users see); the timeline rewinds from here. */
.pressrun { margin-top: 2rem; }
.pressrun__pin {
  position: relative;
  /* fill the viewport under the sticky offset: the band is a full-screen
     scene for 260vh of scroll — a 34rem pin left a dead third at the foot */
  min-height: calc(100svh - 130px);
  display: flex;
  gap: 3rem;
  align-items: center;
}
/* Desktop, animating: the block rides position:sticky through a 260vh
   track while ScrollTrigger only scrubs the timeline. CSS owns the
   pinning, so a stalled scroll pipeline can freeze the show mid-beat
   but can never strand this section painted over its neighbours. */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .body:not(.is-flat) .pressrun__pin { position: sticky; top: 100px; }
  .body:not(.is-flat) .pressrun::after { content: ''; display: block; height: 260vh; }
}
/* Phone/tablet, animating: the same press-run theatre in a vertical frame —
   the pin becomes a viewport stage, the site/brief/ask overlap inside it and
   the scrub performs the same beats. FLAT and reduced-motion keep the plain
   stacked flow. Transforms here are the finished/fallback state only: the
   mobile timeline gsap.set-normalizes every channel before scrubbing (the
   v42 law — never leave a CSS % translate for GSAP to parse). */
@media (max-width: 991px) and (prefers-reduced-motion: no-preference) {
  .body:not(.is-flat) .pressrun__pin {
    position: sticky; top: 5rem;
    height: calc(100svh - 6.5rem);
    min-height: 0;
    flex-flow: column; align-items: stretch; gap: 1rem;
    overflow: hidden;
  }
  .body:not(.is-flat) .pressrun::after { content: ''; display: block; height: 240vh; }
  .body:not(.is-flat) .pressrun__rail { width: auto; flex-flow: row; flex-wrap: wrap; gap: .5rem 1.2rem; }
  .body:not(.is-flat) .pressrun__stage { flex: 1; min-height: 0; }
  .body:not(.is-flat) .website {
    position: absolute; left: 50%; top: 42%;
    width: 100%; max-width: 22rem; margin: 0;
    transform: translate(-50%, -50%) rotate(-7deg) scale(.92);
    opacity: .16;
  }
  .body:not(.is-flat) .pb {
    position: absolute; left: 50%; top: 44%;
    width: min(100%, 26rem); margin: 0;
    transform: translate(-50%, -50%) scale(.72);
  }
  .body:not(.is-flat) .pressrun__askbar {
    position: absolute; left: 50%; bottom: .4rem; margin: 0;
    transform: translateX(-50%);
    width: calc(100% - .5rem);
  }
}
.pressrun__rail { flex: none; width: 15rem; display: flex; flex-flow: column; gap: 1.6rem; }
.pressrun__railstep {
  display: flex;
  gap: .8rem;
  align-items: baseline;
  color: var(--fonts-30);
  font-size: 1.05rem;
  line-height: 1.35;
  transition: color .3s;
}
.pressrun__railstep span {
  flex: none;
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--fonts-30);
  transition: color .3s;
}
.pressrun__railstep.is-on { color: var(--fonts-100); }
.pressrun__railstep.is-on span { color: var(--accent); }
.pressrun__stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-flow: column;
  align-items: center;
}

/* the old website — finished state: set aside like a discarded draft.
   25rem card, internals scaled x1.3 from the 19rem original so the mock
   keeps its density — it holds the stage alone through beat 1. */
.website {
  position: absolute;
  left: 0;
  top: 50%;
  width: 25rem;
  transform: translateY(-50%) rotate(-7deg) scale(.92);
  opacity: .16;
  background: #ffffff;
  color: #1d1d1f;
  border-radius: 1rem;
  overflow: visible;
  box-shadow: 0 1.3rem 3.9rem #00000059;
  font-family: "Helvetica Neue", Arial, sans-serif;
  z-index: 1;
}
.website__chrome {
  display: flex;
  align-items: center;
  gap: .78rem;
  background: #e8e8e6;
  border-radius: 1rem 1rem 0 0;
  padding: .58rem .9rem;
}
.website__dots { display: flex; gap: .32rem; }
.website__dots i { width: .55rem; height: .55rem; border-radius: 99rem; background: #c9c9c6; }
.website__url {
  flex: 1;
  background: #fff;
  border-radius: .4rem;
  font-size: .68rem;
  color: #6b6b68;
  padding: .28rem .65rem;
}
.website__body { padding: 1.05rem 1.15rem .9rem; }
.website__nav {
  display: flex;
  gap: .78rem;
  align-items: baseline;
  font-size: .65rem;
  color: #6b6b68;
  padding-bottom: .72rem;
  border-bottom: 1px solid #ececea;
}
.website__nav b { font-size: .8rem; color: #1d1d1f; margin-right: auto; }
.website__hero { width: 100%; height: 6.8rem; object-fit: cover; border-radius: .45rem; margin-top: .78rem; }
.website__h1 { font-size: 1.24rem; font-weight: 700; margin-top: .78rem; }
.website__p { font-size: .72rem; line-height: 1.55; color: #6b6b68; margin-top: .45rem; }
.website__btns { display: flex; gap: .52rem; margin-top: .72rem; }
.website__btns span {
  font-size: .65rem;
  border: 1px solid #d4d4d1;
  border-radius: .4rem;
  padding: .4rem .78rem;
}
.website__btns span.is-solid { background: #2e5941; border-color: #2e5941; color: #fff; }
.website__foot {
  display: flex;
  justify-content: space-between;
  font-size: .57rem;
  color: #a3a3a0;
  border-top: 1px solid #ececea;
  margin-top: .9rem;
  padding-top: .6rem;
}
.website__faq { text-decoration: underline; }
.learn-tag {
  position: absolute;
  background: var(--accent);
  color: #fff;
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  border-radius: 99rem;
  padding: .36rem .78rem;
  box-shadow: 0 .5rem 1.3rem #00000059;
  white-space: nowrap;
  opacity: 0; /* the tags belong to the middle of the run */
  z-index: 2;
}
#prTag1 { top: 34%; right: -1.8rem; }
#prTag2 { top: 58%; left: -2.1rem; }
#prTag3 { bottom: 8%; right: -1.3rem; }

/* the composed page — finished state: front and centre. Set exactly as the
   product sets it: 6px masthead rule, mono folio with the accent seq and the
   live ear, Playfair masthead, sub-rule with the italic agent line, then
   articles under 1px rules with mono kickers and accent-dot labels. Print
   casts no shadows — the page lifts off the DARK site, so one soft shadow
   stays, but nothing inside the paper carries one. */
.pb {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 46rem;
  background: var(--pk-paper);
  color: var(--pk-ink);
  border-radius: 4px;
  box-shadow: 0 1.6rem 4rem #00000059;
  padding: 1rem 1.8rem 1.1rem;
  font-family: var(--pk-text);
}
.pb__rule { height: 6px; background: var(--pk-rule); }
.pb__folio {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--pk-mono);
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pk-ink-3);
  padding: .55rem 0 .45rem;
}
.pb__folio .seq { font-style: normal; color: var(--pk-acc); font-weight: 600; }
.pb__live { display: inline-flex; align-items: center; gap: .35rem; color: var(--pk-acc); font-weight: 600; }
.pb__live i { width: .34rem; height: .34rem; border-radius: 99rem; background: var(--pk-acc); }
.pb__mastwrap { overflow: hidden; }
.pb__mast {
  text-align: center;
  font-family: var(--pk-serif);
  font-weight: 700;
  font-size: 2.6rem;
  letter-spacing: -.02em;
  line-height: .95;
  padding-bottom: .6rem;
}
.pb__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--pk-mono);
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pk-ink-3);
  border-top: 1px solid var(--pk-rule);
  border-bottom: 1px solid var(--pk-rule);
  padding: .45rem 0;
  margin-bottom: .9rem;
}
.pb__agent {
  font-family: var(--pk-text);
  font-style: italic;
  font-size: .68rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pk-ink-2);
}
.pb__agent strong { font-style: normal; font-weight: 600; color: var(--pk-ink); }
.pb__cols { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1.2rem; }
.pb__col {
  position: relative;
  min-width: 0;
  border-top: 1px solid var(--pk-rule);
  padding-top: .55rem;
}
.pb__col::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--pk-acc);
}
.pb__kicker {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--pk-mono);
  font-size: .52rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pk-ink-3);
  margin-bottom: .5rem;
}
.pb__kicker .label { display: inline-flex; align-items: center; gap: .35rem; color: var(--pk-acc); font-weight: 600; }
.pb__dot { width: .3rem; height: .3rem; border-radius: 99rem; background: var(--pk-acc); }
.pb__title {
  font-family: var(--pk-serif);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin-bottom: .45rem;
}
.pb__title em { font-style: italic; font-weight: 500; color: var(--pk-acc); margin-right: .07em; }
.pb__a {
  font-family: var(--pk-text);
  font-size: .64rem;
  line-height: 1.5;
  color: var(--pk-ink);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.pb__byline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  border-top: 1px solid var(--pk-rule-soft-2);
  margin-top: .55rem;
  padding-top: .4rem;
  font-family: var(--pk-text);
  font-style: italic;
  font-size: .6rem;
  color: var(--pk-ink-3);
}
.pb__byline strong { font-style: normal; font-weight: 600; color: var(--pk-ink); }
.pb__byline .time {
  font-family: var(--pk-mono);
  font-style: normal;
  font-size: .48rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pb__fig { position: relative; margin-bottom: .55rem; }
.pb__photo { width: 100%; height: 4.6rem; object-fit: cover; display: block; }
.pb__fig figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .45rem .3rem;
  background: linear-gradient(to top, rgba(20, 23, 26, 0.78), rgba(20, 23, 26, 0));
  font-family: var(--pk-text);
  font-style: italic;
  font-size: .5rem;
  color: var(--pk-paper-bright);
}
.pb__fig figcaption .credit {
  font-family: var(--pk-mono);
  font-style: normal;
  font-size: .42rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}
.pb__reg { border-top: 1px solid var(--pk-rule-soft); }
.pb__reg-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  border-bottom: 1px solid var(--pk-rule-soft-2);
  padding: .32rem 0;
  font-family: var(--pk-text);
  font-size: .62rem;
}
.pb__reg-row em {
  font-family: var(--pk-mono);
  font-style: normal;
  font-size: .48rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pk-ink-3);
  flex: none;
}
.pb__regnote {
  font-family: var(--pk-text);
  font-style: italic;
  font-size: .56rem;
  line-height: 1.45;
  color: var(--pk-ink-3);
  margin-top: .45rem;
}
.pb__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--pk-mono);
  font-size: .5rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pk-ink-3);
  border-top: 1px solid var(--pk-rule);
  padding-top: .45rem;
  margin-top: .9rem;
}

/* the docked composer — finished state: seated under the page, exactly the
   product's fixed dock: paper-bright, one ink rule, File ↑ */
.pressrun__askbar {
  position: relative;
  z-index: 2;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 24rem;
  max-width: 92%;
  background: var(--pk-paper-bright);
  border: 1px solid var(--pk-rule);
  border-radius: 2px;
  padding: .7rem .7rem .7rem 1rem;
  box-shadow: 0 .8rem 2.4rem #00000059;
}
.pressrun__asktxt {
  flex: 1;
  font-family: var(--pk-text);
  font-size: .9rem;
  color: var(--pk-ink);
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pressrun__asktxt::after {
  content: "";
  flex: none;
  width: 1.5px;
  height: 1.05rem;
  margin-left: .14rem;
  background: var(--pk-ink);
  animation: caret-blink 1.1s steps(1) infinite;
}
.pressrun__asksend {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--pk-ink);
  color: var(--pk-paper);
  border-radius: 2px;
  padding: .45rem .75rem;
  font-family: var(--pk-mono);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pressrun__asksend em { font-style: normal; font-family: var(--pk-serif); font-size: .78rem; line-height: 1; }
@media (max-width: 991px) {
  .pressrun__pin { flex-flow: column; align-items: stretch; min-height: 0; gap: 2rem; }
  .pressrun__rail { width: auto; flex-flow: row; flex-wrap: wrap; gap: .8rem 1.4rem; }
  .pressrun__railstep { font-size: .8rem; }
  .website {
    position: relative;
    left: auto; top: auto;
    transform: none;
    opacity: 1;
    width: 100%;
    max-width: 24rem;
    margin: 0 auto;
  }
  .learn-tag { opacity: 1; }
  #prTag1 { right: -.5rem; }
  #prTag2 { left: -.5rem; top: 66%; }
  #prTag3 { right: -.3rem; }
  .pb { max-width: none; padding: .8rem .9rem 1rem; margin-top: 1.4rem; }
  .pb__cols { grid-template-columns: 1fr; gap: 1rem; }
  .pb__mast { font-size: 1.8rem; }
}
@media (max-width: 767px) {
  .pressrun__rail { flex-flow: column; gap: .55rem; }
  /* the tags float over the site card by design — at phone size they read as
     stickers, so shrink them and keep them on the card's edge, not its prose */
  .learn-tag { font-size: .62rem; padding: .3rem .62rem; }
  #prTag1 { right: .4rem; }
  #prTag2 { left: .4rem; top: 60%; }
  #prTag3 { right: .5rem; bottom: 5%; }
}

/* printed brief mock (block 1 "after") — set like the real page */
.brief-mock {
  color: #17150f;
  padding: 1.4rem 2.4rem 1.6rem;
  font-family: "Iowan Old Style", "Palatino", "Book Antiqua", Georgia, "Times New Roman", serif;
}
.brief-mock__folio {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: .5rem;
  letter-spacing: .22em;
  color: #8a8474;
  border-top: 1px solid #17150f;
  border-bottom: 1px solid #17150f55;
  padding: .4rem 0;
  margin-bottom: 1.2rem;
}
.brief-mock__mast { text-align: center; }
.brief-mock__kicker {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: .58rem;
  letter-spacing: .42em;
  color: #8a8474;
}
.brief-mock__title {
  font-size: 2.7rem;
  line-height: 1.02;
  letter-spacing: -.015em;
  margin-top: .45rem;
  font-weight: 600;
}
.brief-mock__meta {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: .55rem;
  letter-spacing: .3em;
  color: #8a8474;
  margin-top: .6rem;
}
.brief-mock__rule {
  height: 2.5px;
  background: #17150f;
  margin: 1rem 0 1.2rem;
  position: relative;
}
.brief-mock__rule::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 4.5px;
  height: 1px;
  background: #17150f55;
}
.brief-mock__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}
.brief-mock__col { min-width: 0; }
.brief-mock__col + .brief-mock__col { border-left: 1px solid #17150f22; padding-left: 1.5rem; }
.brief-mock__q {
  font-style: italic;
  font-size: .86rem;
  line-height: 1.3;
  margin-bottom: .5rem;
  border-bottom: 1px solid #17150f22;
  padding-bottom: .45rem;
}
.brief-mock__a {
  font-size: .67rem;
  line-height: 1.5;
  color: #3c382d;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.brief-mock__a.is-lead::first-letter {
  float: left;
  font-size: 2.35em;
  line-height: .82;
  padding: .06em .12em 0 0;
  font-weight: 600;
  color: #17150f;
}
.brief-mock__cap {
  font-size: .56rem;
  line-height: 1.45;
  color: #8a8474;
  margin-top: .5rem;
  font-style: italic;
}
.brief-mock__foot {
  display: flex;
  justify-content: space-between;
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: .48rem;
  letter-spacing: .22em;
  color: #8a8474;
  border-top: 1px solid #17150f55;
  padding-top: .45rem;
  margin-top: 1.3rem;
}
.brief-mock__filed {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a8474;
  margin-top: .8rem;
}
.brief-mock__register {
  border: 1.5px solid #17150f;
  padding: .7rem .8rem .5rem;
}
.brief-mock__register-title {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: .55rem;
  letter-spacing: .3em;
  color: #17150f;
  text-align: center;
  border-bottom: 1px solid #17150f55;
  padding-bottom: .45rem;
  margin-bottom: .3rem;
}
.brief-mock__register-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  border-bottom: 1px dotted #8a847466;
  padding: .32rem 0;
  font-size: .68rem;
}
.brief-mock__register-row:last-child { border-bottom: none; }
.brief-mock__register-row em {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-style: normal;
  font-size: .55rem;
  color: #8a8474;
  letter-spacing: .06em;
  flex: none;
}

/* ---- live proof band ---- */
.liveband {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  margin: 8rem 2rem 0;
  border-top: 1px solid var(--lines);
  border-bottom: 1px solid var(--lines);
  padding: 4rem 0;
}
.liveband__left { display: flex; flex-flow: column; gap: 1.25rem; max-width: 46rem; }
.liveband__copy { line-height: 1.5; }
.liveband__cta {
  flex: none;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: .35rem;
  text-decoration: none;
  color: var(--fonts-100);
  border: 1px solid var(--lines);
  border-radius: 1.4rem;
  padding: 1.6rem 2rem;
  transition: border-color .2s;
}
.liveband__cta:hover { border-color: var(--accent); }
.liveband__cta-k {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fonts-50);
}
.liveband__cta-url { font-size: 1.5rem; font-weight: 500; }
.liveband__cta-go { margin-top: .8rem; color: var(--accent); display: inline-flex; gap: .4rem; align-items: center; }
.liveband__cta-go em { font-style: normal; transition: transform .2s; }
.liveband__cta:hover .liveband__cta-go em { transform: translate(2px, -2px); }
@media (max-width: 767px) {
  .liveband { flex-flow: column; align-items: flex-start; margin: 4rem 1rem 0; padding: 2.5rem 0; gap: 1.75rem; }
  .liveband__cta { align-self: stretch; }
}

.ai__bottom {
  display: flex;
  flex-flow: column;
  gap: 8rem;
  padding: 4rem 2rem 2rem;
}
.ai__left-block, .ai__right-block { display: flex; flex-flow: column; }
.ai__left-block .ai__title, .ai__right-block .ai__title { margin-bottom: 3rem; }

/* ---- the desk: one report card beside the story, not a wall of rows ---- */
.desk__grid { display: flex; gap: 4rem; align-items: stretch; }
.desk__left {
  flex: none;
  width: 27%;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.desk__point {
  padding: 1.3rem 0;
  border-top: 1px solid var(--lines);
  display: flex;
  flex-flow: column;
  gap: .3rem;
}
.desk__point:last-child { border-bottom: 1px solid var(--lines); }
.desk__point span { font-size: 1rem; font-weight: 500; color: var(--fonts-100); }
.desk__point em { font-style: normal; font-size: .8rem; line-height: 1.45; color: var(--fonts-50); }
.deskpanel {
  flex: 1;
  min-width: 0;
  background: var(--secondbg);
  border: 1px solid var(--lines);
  border-radius: 1.5rem;
  padding: 1.6rem 2rem 1.2rem;
}
.deskpanel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--lines);
  padding-bottom: 1.1rem;
  margin-bottom: 1.5rem;
}
/* the gap — the report's lead story */
.deskpanel__gap {
  position: relative;
  border: 1px solid var(--lines);
  border-radius: 1rem;
  padding: 1.1rem 1.5rem 1.2rem;
  margin-bottom: 1.6rem;
  overflow: hidden;
}
.deskpanel__gap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.deskpanel__label {
  border-bottom: 1px solid var(--lines);
  padding-bottom: .6rem;
  margin-bottom: .5rem;
}
.deskpanel__gap .deskpanel__label { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.dp-gap__q { font-size: 1.55rem; font-weight: 500; color: var(--fonts-100); line-height: 1.12; letter-spacing: -.03rem; margin-top: .7rem; }
.dp-gap__meta { display: flex; gap: 1.4rem; margin-top: .55rem; font-size: .78rem; color: var(--fonts-50); }
.dp-gap__flag { color: var(--fonts-100); border-bottom: 1px dashed var(--fonts-30); }
.dp-gap__fix { margin-top: .7rem; font-size: .85rem; font-weight: 500; color: var(--accent); }
.deskpanel__cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; }
.deskpanel__block { min-width: 0; display: flex; flex-flow: column; }
.deskpanel__block + .deskpanel__block { border-left: 1px solid var(--lines); padding-left: 2rem; }
.dp-meter { padding: .6rem 0 .7rem; border-bottom: 1px solid var(--lines); }
.dp-meter:last-child { border-bottom: none; }
.dp-meter__top { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.dp-meter__top span { font-size: .85rem; font-weight: 500; color: var(--fonts-100); }
.dp-meter__top em { font-style: normal; font-size: .72rem; color: var(--fonts-50); font-variant-numeric: tabular-nums; }
.dp-meter__bar { height: .24rem; border-radius: 99rem; background: var(--lines); margin-top: .55rem; overflow: hidden; }
.dp-meter__bar i { display: block; height: 100%; border-radius: 99rem; background: var(--accent); }
.dp-call { display: flex; align-items: center; gap: .8rem; border-bottom: 1px solid var(--lines); padding: .68rem 0; }
.dp-call:last-child { border-bottom: none; }
.dp-call__main { flex: 1; min-width: 0; }
.dp-call__main b { display: block; font-size: .85rem; font-weight: 500; color: var(--fonts-100); }
.dp-call__main p { font-size: .74rem; color: var(--fonts-50); margin-top: .1rem; }
.deskpanel__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--lines);
  margin-top: 1.5rem;
  padding-top: .9rem;
}
@media (max-width: 991px) {
  .desk__grid { flex-flow: column; gap: 2rem; }
  .desk__left { width: auto; }
  .deskpanel { padding: 1.2rem 1.1rem 1rem; }
  .deskpanel__cols { grid-template-columns: 1fr; gap: 1.5rem; }
  .deskpanel__block + .deskpanel__block { border-left: none; padding-left: 0; border-top: 1px solid var(--lines); padding-top: 1.5rem; }
  .deskpanel__head, .deskpanel__foot { flex-flow: column; gap: .3rem; }
  .dp-gap__q { font-size: 1.15rem; }
}

/* shortlist person rows */
.desk-person {
  display: flex;
  align-items: center;
  gap: .8rem;
  border-bottom: 1px solid var(--lines);
  padding: .75rem 0;
}
.desk-person:last-of-type { border-bottom: none; }
.desk-person__ava {
  flex: none;
  width: 2.2rem; height: 2.2rem;
  border-radius: 99rem;
  background: #ffffff14;
  color: var(--fonts-64);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .85rem;
  font-weight: 500;
}
.body.light .desk-person__ava { background: #02010810; }
.desk-person__main {
  flex: 1;
  display: flex;
  flex-flow: column;
  gap: .1rem;
  min-width: 0;
}
.desk-person__name { color: var(--fonts-100); font-size: .85rem; font-weight: 500; }
.desk-person__q {
  color: var(--fonts-50);
  font-size: .74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desk-row__s {
  flex: none;
  color: var(--fonts-50);
  border: 1px solid var(--fonts-20);
  border-radius: 99rem;
  padding: .1rem .55rem;
  font-size: .68rem;
}
.desk-row__s.is-hot { color: var(--accent); border-color: var(--accent); }

@media (max-width: 991px) {
}
@media (max-width: 767px) {
  .ai__block { padding: 3rem 1rem; }
  .ai__bottom { padding: 3rem 1rem 1rem; gap: 5rem; }
  .brief-mock { padding: 1.2rem 1rem 1rem; }
  .brief-mock__cols { grid-template-columns: 1fr; }
  .brief-mock__title { font-size: 1.7rem; }
}

/* ============================================================
   HOW
   ============================================================ */
/* ============================================================
   LIST — four steps
   ============================================================ */
.list { padding-top: 10rem; }
.list__title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding: 0 2rem 4rem;
}
.list__title-copy { text-align: right; }
.list__main__wrap { position: relative; }
.list__main__slide { height: 100vh; position: sticky; top: 0; }
.list__main__content__wrap {
  height: 100%;
  padding: 1rem;
  will-change: transform;
}
.list__main__content {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 100%;
  height: 100%;
  border-radius: 2rem;
  overflow: hidden;
  color: #fff;
}
.list__main__content.is-first  { background-image: linear-gradient(#f94a00, #fd7b03); }
.list__main__content.is-second { background-image: linear-gradient(#48a3d1, #8a6fc4 40%, #e0685a 72%, #fd7b03); }
.list__main__content.is-third  { background-image: linear-gradient(#1e26ae, #7a5fd6 36%, #d96a52 72%, #fd7b03); }
.list__main__content.is-fourth { background-image: linear-gradient(#9a0101, #fd7b03); }

/* the ghost folio numeral */
.list__main__num {
  position: absolute;
  top: 1.1rem;
  right: calc(46% + 4.5rem);
  font-size: 11rem;
  line-height: .85;
  font-weight: 500;
  letter-spacing: -.04em;
  color: #fff;
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}

/* the story column */
.list__main__story {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  width: calc(54% - 3.5rem);
  padding: 2.6rem 0 2.6rem 3rem;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}
.list__main__kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 500;
  color: #ffffffb8;
  margin-bottom: 1.5rem;
  white-space: nowrap;
}
.list__main__kicker::before { content: ""; width: 1.7rem; height: 1px; background: #ffffff87; }
.list__main__mid {
  margin: auto 0;
  padding: 2rem 0;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.list__main__pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.list__main__info-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid #ffffff59;
  border-radius: 99rem;
  padding: .35rem .9rem;
}
.list__main__info-tag-icon {
  width: .45rem; height: .45rem;
  border-radius: 99rem;
  background: #fff;
}
.list__main__copy { max-width: 24rem; line-height: 1.35; }
.btn-primary-stb {
  background-color: #fff;
  color: #17150f;
  height: 3rem;
  border-radius: 99rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .875rem 1.5rem;
  text-decoration: none;
  align-self: flex-start;
  transition: background-color .2s, color .2s;
  white-space: nowrap;
}
.btn-primary-stb:hover { background-color: var(--accent); color: #fff; }

/* ---- step artwork panels (authored product content) ----
   Each panel depicts a DIFFERENT business so the page shows range; the
   tenant's accent + masthead face ride on these two vars. Defaults are
   the house pair; the ex-* classes are the per-vertical skins. */
.step-art {
  --ex-acc: #2e5941;
  --ex-mast: "Playfair Display", Georgia, "Times New Roman", serif;
  --ex-focal: 50%;   /* vertical crop anchor for this business's photo */
  position: absolute;
  top: 2.2rem;
  right: 2.2rem;
  bottom: 2.2rem;
  width: 46%;
  min-width: 30rem;
  background: #0b0b0fe8;
  border: 1px solid #ffffff21;
  border-radius: 1.4rem;
  backdrop-filter: blur(10px);
  display: flex;
  flex-flow: column;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 1.8rem 4.5rem #00000045;
  z-index: 1;
}
/* Corner Press (cafe) · The Term Ahead (school) · The Fitting Room
   (tailors) · Dockside Dispatch (charters) — accents + faces mirror the
   matching b2/b3/b7/b8 skins on the hero wheel so one business reads the
   same wherever it appears. */
.step-art.ex-cafe    { --ex-acc: #b4451f; --ex-mast: "Futura", "Avenir Next", "Jost", "Helvetica Neue", sans-serif; }
.step-art.ex-school  { --ex-acc: #8a6f1f; --ex-mast: "Baskerville", "Libre Baskerville", Georgia, serif; --ex-focal: 72%; }
.step-art.ex-tailor  { --ex-acc: #6b5c42; --ex-mast: "Copperplate", "Cormorant SC", "Palatino Linotype", Palatino, serif; }
.step-art.ex-charter { --ex-acc: #1465a0; --ex-mast: "American Typewriter", "Courier Prime", "Courier New", serif; }
.step-art__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 1.7rem 1.1rem;
  border-bottom: 1px solid #ffffff1a;
  flex: none;
}
.step-art__label {
  font-size: .68rem;
  letter-spacing: .28em;
  color: #ffffffd9;
  font-weight: 500;
}
.step-art__src {
  font-size: .68rem;
  color: #ffffff59;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step-art__body {
  flex: 1;
  min-height: 0;
  padding: 1.5rem 1.7rem;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}
.step-art__foot {
  border-top: 1px solid #ffffff1a;
  padding: .9rem 1.7rem 1rem;
  font-size: .72rem;
  color: #ffffff59;
  flex: none;
}

/* 01 — specimen */
.step-art__body.is-specimen { gap: 1rem; }
.specimen__hero {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .3rem 0 .8rem;
}
.specimen__glyph {
  font-family: var(--ex-mast);
  font-size: 5.4rem;
  line-height: .9;
  color: #f6f3ec;
  flex: none;
}
.specimen__mastwrap { min-width: 0; }
.specimen__mast {
  font-family: var(--ex-mast);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
  color: #f6f3ec;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.specimen__mast-cap {
  font-family: "Iowan Old Style", "Palatino", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: .78rem;
  color: #ffffff73;
  margin-top: .35rem;
}
.specimen__rows {
  flex: 1;
  display: flex;
  flex-flow: column;
  min-width: 0;
  min-height: 0;
  border-top: 1px solid #ffffff14;
}
.specimen__row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid #ffffff14;
  padding: .4rem 0;
  min-height: 0;
}
.specimen__k {
  flex: none;
  width: 5.4rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff59;
}
.specimen__v { font-size: .9rem; color: #ffffffd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.specimen__v.is-serif { font-family: var(--ex-mast); }
.swatch {
  width: 1.15rem; height: 1.15rem;
  border-radius: 99rem;
  border: 1px solid #ffffff2e;
  flex: none;
}
.specimen__crawl {
  flex: none;
  padding-top: 1rem;
  display: flex;
  flex-flow: column;
  gap: .45rem;
}
.specimen__crawl-k {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ffffff59;
}
.specimen__crawl-v {
  font-size: .78rem;
  line-height: 1.7;
  color: #ffffff8c;
  letter-spacing: .02em;
}

/* 02 — composed edition */
.step-art__body.is-edition { gap: 1.1rem; justify-content: center; }
.edition-page {
  flex: 1;
  min-height: 0;
  max-height: 36rem;
  background: var(--pk-paper);
  border-radius: .5rem;
  padding: 1.2rem 1.3rem .9rem;
  color: var(--pk-ink);
  display: flex;
  flex-flow: column;
  min-width: 0;
}
.edition-page__kicker {
  text-transform: uppercase; font-size: .55rem; letter-spacing: .34em; color: var(--pk-ink-3); text-align: center; font-family: "SF Pro Display", -apple-system, sans-serif; }
.edition-page__mast {
  font-family: var(--ex-mast);
  font-size: 1.85rem;
  font-weight: 600;
  text-align: center;
  margin-top: .3rem;
  letter-spacing: -.01em;
}
.edition-page__dateline {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: .5rem;
  letter-spacing: .26em;
  color: var(--pk-ink-3);
  text-align: center;
  margin-top: .35rem;
}
.edition-page__rule { height: 2px; background: #17150f; margin: .55rem 0 .7rem; position: relative; }
.edition-page__rule::after { content: ""; position: absolute; left: 0; right: 0; top: 3.5px; height: .5px; background: #17150f55; }
.edition-page__fig {
  position: relative;
  flex: 1;
  min-height: 10.5rem;
  border-radius: .25rem;
  overflow: hidden;
}
.edition-page__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center var(--ex-focal); }
.edition-page__fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.1rem .85rem .55rem;
  background: linear-gradient(180deg, #14171a00, #14171ab8);
  color: #f6f3ec;
  font-family: var(--pk-text);
  font-style: italic;
  font-size: .62rem;
}
.edition-page__fig .cr { font-family: "SF Pro Display", -apple-system, sans-serif; font-style: normal; font-size: .42rem; letter-spacing: .22em; opacity: .8; }
.edition-page__art { flex: none; padding-top: .9rem; }
.edition-page__artkicker {
  display: flex; align-items: center; gap: .5rem;
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: .48rem; letter-spacing: .26em; font-weight: 600;
  color: var(--ex-acc);
}
.edition-page__artkicker i { width: .34rem; height: .34rem; border-radius: 99rem; background: var(--ex-acc); }
.edition-page__artkicker span { margin-left: auto; font-weight: 400; letter-spacing: .2em; color: var(--pk-ink-3); }
.edition-page__headline {
  font-family: "Iowan Old Style", "Palatino", Georgia, "Times New Roman", serif;
  font-size: 1.6rem; line-height: 1.05; letter-spacing: -.01em;
  margin-top: .55rem;
}
.edition-page__headline em { color: var(--ex-acc); }
.edition-page__ans {
  font-family: var(--pk-text);
  font-size: .74rem; line-height: 1.55; color: var(--pk-ink-2);
  margin-top: .5rem; max-width: 94%;
}
.edition-page__byline {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .65rem; padding-top: .45rem;
  border-top: 1px solid var(--pk-rule-soft-2);
  font-family: var(--pk-text); font-style: italic;
  font-size: .62rem; color: var(--pk-ink-3);
}
.edition-page__byline .t { font-family: "SF Pro Display", -apple-system, sans-serif; font-style: normal; font-size: .44rem; letter-spacing: .22em; }
.edition-page__facts { display: flex; gap: 1.4rem; margin-top: .8rem; padding-top: .65rem; border-top: 1px solid var(--pk-rule-soft); }
.edition-page__fact { flex: 1; min-width: 0; font-family: var(--pk-text); font-size: .64rem; line-height: 1.45; color: var(--pk-ink-2); }
.edition-page__fact span { display: block; font-family: "SF Pro Display", -apple-system, sans-serif; font-size: .42rem; letter-spacing: .24em; color: var(--pk-ink-3); margin-bottom: .3rem; }
.edition-page__foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--pk-rule-soft);
  margin-top: .7rem;
  padding-top: .45rem;
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: .42rem;
  letter-spacing: .24em;
  color: var(--pk-ink-3);
}
.edition-chips {
  flex: none;
  display: flex;
  justify-content: center;
  gap: .6rem;
}
.edition-chip {
  border: 1px solid #ffffff2e;
  border-radius: 99rem;
  padding: .42rem .9rem;
  font-size: .74rem;
  color: #ffffffd9;
  white-space: nowrap;
}

/* 03 — asked & filed flow */
.step-art__body.is-flow { justify-content: center; gap: 1rem; }
.flow-ask {
  flex: none;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: #17171d;
  border: 1px solid #ffffff24;
  border-radius: .7rem;
  padding: 1rem 1.3rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
}
.flow-ask__dot { width: .3rem; height: .3rem; border-radius: 99rem; background: var(--accent); flex: none; }
.flow-ask__caret {
  width: 2px; height: 1.05rem;
  background: var(--accent);
  animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.flow-arrow {
  flex: none;
  align-self: center;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #ffffff59;
  font-size: .7rem;
  letter-spacing: .08em;
}
.flow-arrow svg { width: .9rem; height: 1.5rem; }
.flow-clip {
  flex: none;
  background: var(--pk-paper);
  border-radius: .5rem;
  padding: 1.3rem 1.5rem 1.1rem;
  color: var(--pk-ink);
}
.flow-clip__kicker {
  font-family: var(--pk-mono);
  text-transform: uppercase; font-size: .58rem; letter-spacing: .3em; color: var(--ex-acc); border-bottom: 1.5px solid var(--pk-rule); padding-bottom: .45rem; }
.flow-clip__a {
  font-family: var(--pk-text);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--pk-ink-2);
  padding: .6rem 0 .55rem;
}
.flow-clip__filed { font-size: .52rem; letter-spacing: .18em; color: var(--pk-ink-3); }
.flow-queue { flex: none; margin-top: .7rem; min-height: 0; overflow: hidden; }
.flow-queue__k {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ffffff59;
  padding-bottom: .55rem;
  border-bottom: 1px solid #ffffff14;
}
.flow-queue__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .78rem 0;
  border-bottom: 1px solid #ffffff14;
  font-size: .88rem;
  color: #ffffffa6;
}
.flow-queue__row:last-child { border-bottom: none; padding-bottom: 0; }
.flow-queue__row em { font-style: normal; font-size: .68rem; letter-spacing: .06em; color: #ffffff59; flex: none; }

/* 04 — shortlist */
.step-art__body.is-shortlist { padding-top: .5rem; padding-bottom: .5rem; }
.step-art .desk-person { flex: 1; min-height: 0; border-bottom-color: #ffffff14; }
.step-art .desk-person__ava { background: #ffffff14; color: #ffffffd9; }
.step-art .desk-person__name { color: #fff; }
.step-art .desk-person__q { color: #ffffff73; }
.step-art .desk-row__s { color: #ffffff8c; border-color: #ffffff30; }
.step-art .desk-row__s.is-hot { color: var(--accent); border-color: var(--accent); }
.desk-person__t { display: block; font-size: .66rem; color: #ffffff4d; margin-top: .15rem; }
@media (max-width: 1180px) {
  .step-art { width: 50%; min-width: 26rem; }
  .list__main__story { width: calc(50% - 2.5rem); }
  .list__main__num { right: calc(50% + 3rem); font-size: 8.5rem; }
  .specimen__glyph { font-size: 4.2rem; }
  .specimen__mast { font-size: 1.3rem; }
}
@media (max-width: 991px) {
  .list__main__h2 { font-size: 2.8rem; letter-spacing: -.03rem; }
  .list__main__num { font-size: 6.5rem; }
}
@media (max-width: 767px) {
  .list { padding-top: 5rem; }
  .list__title { flex-flow: column; align-items: flex-start; padding: 0 1rem 2rem; }
  .list__title-copy { text-align: left; }
  /* phones read the cards as a plain stack: a 100vh sticky window with
     taller-than-viewport content leaves its tail unreachable (the next card
     slides over first), and inner overflow-y scroll never wins on iOS */
  .list__main__slide { height: auto; position: static; }
  .list__main__content__wrap { height: auto; }
  .list__main__content { height: auto; min-height: 0; overflow: hidden; }
  .list__main__num { top: .9rem; right: 1.1rem; font-size: 5rem; opacity: .3; }
  .list__main__story {
    flex: none;
    width: auto;
    padding: 1.4rem 1.4rem 0;
  }
  .list__main__kicker { margin-bottom: 1rem; }
  .list__main__h2 { font-size: var(--fs-h2-5); }
  .list__main__mid { margin: 0; padding: 1.2rem 0 0; gap: 1rem; }
  .btn-primary-stb { margin-top: 1.4rem; }
  .step-art {
    position: static;
    width: auto;
    min-width: 0;
    margin: 1.4rem 1rem 1rem;
    border-radius: 1rem;
    box-shadow: none;
    flex: none;
  }
  .step-art__head, .step-art__foot { padding-left: 1rem; padding-right: 1rem; }
  .step-art__body { padding: 1rem; }
  .step-art__src { display: none; }
  .specimen__hero { gap: 1.1rem; }
  .specimen__glyph { font-size: 3.2rem; }
  .specimen__mast { font-size: 1.2rem; }
  .specimen__k { width: 4.2rem; }
  .specimen__crawl-v { font-size: .72rem; }
  .edition-page__mast { font-size: 1.3rem; }
  .edition-page__headline { font-size: 1.25rem; }
  .edition-page__fig { min-height: 6.5rem; }
  .edition-chips { flex-wrap: wrap; justify-content: flex-start; }
  .flow-arrow span { display: none; }
  .flow-clip__a { font-size: .85rem; }
  .flow-queue__row { font-size: .76rem; }
  .desk-person__t { font-size: .6rem; }
}

/* ============================================================
   PRICING — the plain rate, in the site's own dark
   ============================================================ */
.pricing { padding: 10rem 2rem 2rem; }
.pricing__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  margin-bottom: 4rem;
}
.pricing__head-l { display: flex; flex-flow: column; gap: 1.25rem; }
.pricing__copy { text-align: right; line-height: 1.45; }
.rates {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 3rem;
  border-top: 1px solid var(--lines);
  padding-top: 2.5rem;
}
.rates__col { min-width: 0; display: flex; flex-flow: column; }
.rates__col + .rates__col { border-left: 1px solid var(--lines); padding-left: 3rem; }
.rates__label { border-bottom: 1px solid var(--lines); padding-bottom: .7rem; margin-bottom: 1.4rem; }
.rates__price { font-size: 3rem; letter-spacing: -.09rem; line-height: 1; font-weight: 400; color: var(--accent); }
.rates__price span { color: var(--fonts-50); font-size: 1.15rem; letter-spacing: 0; }
.rates__meta { margin-top: .8rem; }
.rates__rows { margin-top: 1.6rem; }
.rates__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid var(--lines);
  padding: .7rem 0;
}
.rates__row:last-child { border-bottom: none; }
.rates__row span { flex: none; color: var(--fonts-100); font-size: .9rem; font-weight: 500; }
.rates__row em { font-style: normal; color: var(--fonts-64); font-size: .85rem; text-align: right; }
.rates__step { display: flex; gap: 1.1rem; padding: 1rem 0; border-bottom: 1px solid var(--lines); }
.rates__step:last-child { border-bottom: none; }
.rates__no { flex: none; color: var(--accent); font-size: .72rem; font-weight: 600; letter-spacing: .08em; padding-top: .3rem; }
.rates__step-body b { display: block; color: var(--fonts-100); font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; }
.rates__step-body p { color: var(--fonts-64); font-size: .85rem; line-height: 1.5; margin-top: .35rem; }
.rates__note { line-height: 1.55; margin-bottom: 1.5rem; }
.rates__ctacard {
  margin-top: auto;
  background: var(--secondbg);
  border: 1px solid var(--lines);
  border-radius: 1.25rem;
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1rem;
}
.rates__direct { display: flex; flex-flow: column; gap: .3rem; }
.rates__mail { text-decoration: none; transition: color .2s; }
.rates__mail:hover { color: var(--accent); }
@media (max-width: 991px) {
  .pricing { padding: 5rem 1rem 1rem; }
  .pricing__head { flex-flow: column; align-items: flex-start; gap: 1.25rem; margin-bottom: 2rem; }
  .pricing__copy { text-align: left; }
  .rates { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; }
  .rates__col + .rates__col { border-left: none; padding-left: 0; border-top: 1px solid var(--lines); padding-top: 2rem; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  display: flex;
  gap: 3rem;
  padding: 10rem 2rem 8rem;
}
.faq__left { flex: none; width: 30rem; display: flex; flex-flow: column; gap: 1.5rem; }
.faq__right { flex: 1; display: flex; flex-flow: column; }
.faq__item {
  border-bottom: 1px solid var(--lines);
  display: flex;
  flex-flow: column;
  padding: 2rem 0;
}
.faq__item:first-child { border-top: 1px solid var(--lines); }
.faq__item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  cursor: pointer;
}
.faq__icon {
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform .3s ease;
  line-height: 1;
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s ease;
}
.faq__item.is-open .faq__content { grid-template-rows: 1fr; }
.faq__content-txt {
  padding-top: 1rem;
  max-width: 40rem;
  min-height: 0;
  overflow: hidden;
  transition: padding .45s ease;
}
.faq__item:not(.is-open) .faq__content-txt { padding-top: 0; }
@media (max-width: 991px) {
  .faq { flex-flow: column; padding: 5rem 1rem 4rem; }
  .faq__left { width: auto; }
  .faq__item { padding: 1.25rem 0; }
}

/* ============================================================
   FOUNDERS
   ============================================================ */
.founders {
  display: flex;
  gap: 3rem;
  padding: 2rem 2rem 9rem;
}
.founders__left {
  flex: none;
  width: 30rem;
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
}
.founders__right { flex: 1; display: flex; justify-content: flex-end; }
.founders__grid {
  width: 100%;
  max-width: 52rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
/* dark site-native cards (paper is reserved for product depictions, v19) */
.founders__card {
  background: var(--secondbg);
  border: 1px solid var(--lines);
  border-radius: 1.25rem;
  overflow: hidden;
  color: var(--fonts-100);
  display: flex;
  flex-flow: column;
}
.founders__photo {
  position: relative;
  aspect-ratio: 3 / 2;      /* matches the pre-cropped 900x600 assets exactly */
  overflow: hidden;
}
.founders__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founders__card-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 1.4rem .75rem;
  background: linear-gradient(180deg, #00000000, #000000a6);
  color: #ffffffc4;
  font-size: .55rem;
  letter-spacing: .26em;
}
.founders__card-body {
  padding: 1.25rem 1.4rem 1.4rem;
  display: flex;
  flex-flow: column;
  gap: .5rem;
  flex: 1;
}
.founders__card-body .founders__duties { margin-top: auto; }
.founders__person-role {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .56rem;
  letter-spacing: .22em;
  color: var(--fonts-50);
}
.founders__person-role i {
  width: .38rem; height: .38rem;
  border-radius: 99rem;
  background: var(--accent);
}
.founders__person-line {
  display: flex;
  flex-wrap: wrap;          /* narrow cards drop the pill to its own line */
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
}
.founders__person-name {
  min-width: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.founders__linkedin {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .32rem .58rem .32rem .5rem;
  border: 1px solid var(--lines);
  border-radius: 99rem;
  color: var(--fonts-50);
  text-decoration: none;
  font-size: .5rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .2s, border-color .2s;
}
.founders__linkedin svg {
  width: .74rem; height: .74rem;
  fill: currentColor;
  display: block;
}
.founders__linkedin:hover,
.founders__linkedin:focus-visible { color: var(--accent); border-color: var(--accent); }
.founders__person-bio {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--fonts-64);
}
.founders__duties {
  border-top: 1px solid var(--lines);
  margin-top: .8rem;
  padding-top: .2rem;
  display: flex;
  flex-flow: column;
}
.founders__duty {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  font-size: .72rem;
  color: var(--fonts-64);
  border-bottom: 1px solid var(--lines);
  padding: .42rem 0;
}
.founders__duty:last-child { border-bottom: none; }
.founders__duty span {
  flex: none;
  width: 6.4rem;
  font-size: .5rem;
  letter-spacing: .18em;
  color: var(--fonts-30);
}
@media (max-width: 991px) {
  .founders { flex-flow: column; padding: 1rem 1rem 5rem; }
  .founders__left { width: auto; }
  .founders__grid { grid-template-columns: 1fr; max-width: none; }
}

/* ============================================================
   CONTACT — closing walkthrough band
   ============================================================ */
.contact {
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 4rem 2rem 10rem;
}
.contact__copy { line-height: 1.5; }
.contact__form {
  display: flex;
  flex-flow: column;
  gap: .8rem;
  width: min(34rem, 100%);
  margin-top: 1rem;
}
.contact__form[hidden] { display: none; }
.contact__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.contact__form input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--lines);
  border-radius: .9rem;
  padding: 1rem 1.2rem;
  color: var(--fonts-100);
  font: inherit;
  font-size: .95rem;
  transition: border-color .2s;
}
.contact__form input::placeholder { color: var(--fonts-30); }
.contact__form input:focus { outline: none; border-color: var(--accent); }
.contact__form .btn-primary { margin-top: .4rem; width: 100%; border: none; cursor: pointer; }
.contact__form .btn-primary.is-busy { opacity: .6; pointer-events: none; }
.contact__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.contact__form-err { color: #ff6b6b; }
.contact__form-err a { color: inherit; }
.contact__done { display: flex; flex-flow: column; gap: .8rem; margin-top: 1rem; }
.contact__done[hidden] { display: none; }
.contact__direct {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.75rem;
  margin-top: .5rem;
}
.contact__mail { text-decoration: none; transition: color .2s; margin-top: .5rem; }
.contact__direct .contact__mail { margin-top: 0; }
.contact__mail:hover { color: var(--accent); }
@media (max-width: 767px) {
  .contact { padding: 2rem 1rem 5rem; }
  .contact__form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  background: var(--mainbg);
  padding: 5rem 2rem 2rem;
  overflow: hidden;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  margin-bottom: 4rem;
}
.footer__brand { display: flex; align-items: center; gap: .7rem; }
.footer__logo { height: 1.85rem; width: auto; flex: none; }
.footer__brand-word { font-weight: 600; letter-spacing: -.012em; }
.footer__cols { display: flex; gap: 6rem; }
.footer__col { display: flex; flex-flow: column; gap: .5rem; }
.footer__link { text-decoration: none; transition: color .2s; }
.footer__link:hover { color: var(--accent); }
.footer__dots { margin: 0 0 3rem; }
.dots-field {
  display: grid;
  pointer-events: none;
  --dot-size: 1rem;
  --dot-gap: 1rem;
  grid-template-columns: repeat(auto-fill, var(--dot-size));
  column-gap: var(--dot-gap);
  row-gap: var(--dot-gap);
}
@media (max-width: 767px) {
  .dots-field { --dot-size: .5rem; --dot-gap: .5rem; }
}
.dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--fonts-100);
  opacity: .15;
  will-change: opacity, transform;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--lines);
  padding-top: 1.5rem;
}
@media (max-width: 767px) {
  .footer { padding: 3rem 1rem 1.5rem; }
  .footer__top { flex-flow: column; gap: 2rem; }
  .footer__cols { flex-wrap: wrap; gap: 2.5rem; }
  .footer__bottom { flex-flow: column; align-items: flex-start; }
}

/* ============================================================
   FLASH TEXT split words
   ============================================================ */
.flash-word { display: inline-block; }

/* ============================================================
   flat mode (?flat=1) — for headless capture
   ============================================================ */
.body.is-flat .preloader { display: none; }
.body.is-flat * { animation-play-state: paused !important; }