/*
 * Nowon — Lawyer HTML Template
 * Main stylesheet
 *
 * The layout is drawn on a 2560px canvas. --u is one canvas pixel at the
 * current width, so every size below is the design value times --u. Small
 * text never drops under a readable floor (max(…px, …)). Below 1200px the
 * page switches to a stacked tablet / phone layout (section 16).
 *
 * TABLE OF CONTENTS
 *  01. Design tokens
 *  02. Dark theme
 *  03. Base and reset
 *  04. Shared atoms (eyebrow, headings, links, buttons, chips, placeholders)
 *  05. Top bar and dropdowns
 *  06. Header: Home 1
 *  07. 01 The firm
 *  08. 02 Expertise
 *  09. 03 How we work
 *  10. 04 Case studies
 *  11. 05 People
 *  12. 06 Clients
 *  13. 07 Insights
 *  14. Footer
 *  15. Motion
 *  16. Tablet and phone (below 1200px)
 *  17. Phone (below 600px)
 *  18–25. Home 2: header, firm, bento, numerals, portraits, quote wall, tablet, phone
 *  26–32. Home 3: page tokens, flip bento, staircase, people grid, ask us, tablet, phone
 *  33–41. About: page header (Template), story, approach, milestones, mosaic, why us, careers, tablet, phone
 *  42–48. Expertise: frame, practice areas, who we help, typical matters, fees, questions, tablet and phone
 *  49–53. Blog: layout and list header, post cards and pagination, sidebar, tablet, phone
 *  54–60. Blog post: header and cover, article, comments and form, sidebar, related, tablet, phone
 *  61–67. Case studies + case study: results, featured, all matters, measure/quotes/CTA, detail, tablet, phone
 *  68–74. Fees: models, guide prices, estimator, included, billing + questions, tablet, phone
 *  75–80. FAQ: search + topics, most asked, all questions, ask form, tablet, phone
 *  81–86. Careers: why us, open roles, benefits + promise + voices, apply form, tablet, phone
 *  87–92. Privacy: in short, full text, rights + request + history, tablet, phone, print
 *  93–99. Contact: ways, booking, office, urgent + next, sign-in dialog (every page), tablet, phone
 */

/* 01. Design tokens */
:root {
  --u: calc(100vw / 2560);
  --gut: calc(62 * var(--u));
  --sans: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Archivo Black", "Arial Black", sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --expand: cubic-bezier(.7, 0, .2, 1);
  --rise: cubic-bezier(.2, .7, .2, 1);

  --bg: #fcfbf8;
  --ink: #0e0e0e;
  --ink2: #4a4740;
  --ink3: #6b675f;
  --mute: #8a867d;
  --line: #0e0e0e33;
  --hover: #ecebe4;
  --inv: #0e0e0e;
  --on-inv: #fcfbf8;
  --inv-hover: #262626;
  --accent-txt: #d6f22c;
  --panel: #0e0e0e;
  --on-panel: #fcfbf8;
  --stroke: #0e0e0e59;
  --logo-f: none;
  --hero: url("../images/hero.webp");
  --photo: url("../images/hero-photo.webp");

  --lime: #d6f22c;
  --lime-hover: #c6e41a;
  --black: #0e0e0e;
  --night: #0e0e0e;
  --night-text: #fcfbf8;
  --night-soft: #d9d6cf;
  --night-mute: #8d8a83;
  --night-line: #fcfbf833;
  --dd-line: #ffffff22;
  color-scheme: light;
}

/* 02. Dark theme */
html[data-theme="dark"] {
  --bg: #161717;
  --ink: #f1efe9;
  --ink2: #bdbab2;
  --ink3: #8d8a83;
  --line: #f1efe933;
  --hover: #222423;
  --inv: #f1efe9;
  --on-inv: #0e0e0e;
  --inv-hover: #d9d6cf;
  --accent-txt: #0e0e0e;
  --panel: #232524;
  --on-panel: #f1efe9;
  --stroke: #f1efe966;
  --logo-f: invert(1);
  --hero: url("../images/hero-dark.webp");
  --photo: url("../images/hero-dark-photo.webp");
  color-scheme: dark;
}

/* 03. Base and reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s, color .3s;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--lime);
  color: var(--black);
  font-size: 15px;
}

.skip:focus {
  top: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 04. Shared atoms */
.eyebrow {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
  font-size: max(12px, calc(20 * var(--u)));
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.sq {
  flex: none;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  background: var(--lime);
}

.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(128 * var(--u));
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.h2 em,
.in__h em,
.ft__h em,
.hero__h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.02em;
}

.h2 em {
  font-size: calc(140 * var(--u));
}

.shead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(80 * var(--u));
  white-space: nowrap;
}

.shead__l {
  display: flex;
  flex-direction: column;
  gap: calc(50 * var(--u));
}

.more {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding-bottom: calc(10 * var(--u));
  border-bottom: 2px solid var(--ink);
  font-size: max(12px, calc(20 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

.more span {
  font-size: max(15px, calc(26 * var(--u)));
  letter-spacing: 0;
}

.hint {
  font-size: max(12px, calc(20 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--inv);
  color: var(--on-inv);
  transition: background-color .2s;
}

.btn:hover {
  background: var(--inv-hover);
}

.btn__dot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
}

.ico {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

.chip {
  background: var(--lime);
  color: var(--black);
  padding: calc(8 * var(--u)) calc(14 * var(--u));
}

.ph {
  display: flex;
  align-items: flex-end;
  padding: calc(24 * var(--u));
  background: repeating-linear-gradient(135deg, var(--hover) 0 calc(14 * var(--u)), var(--bg) calc(14 * var(--u)) calc(28 * var(--u)));
  border: 1px solid var(--line);
}

.ph__l {
  font-family: var(--mono);
  font-size: max(10px, calc(15 * var(--u)));
  color: var(--ink3);
  white-space: nowrap;
}

/* 05. Top bar and dropdowns */
.tb {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
  height: calc(124 * var(--u));
  display: grid;
  grid-template-columns: calc(560 * var(--u)) minmax(0, 1fr) calc(300 * var(--u));
  background: var(--bg);
  border-bottom: 2px solid var(--ink);
  transition: background-color .3s;
}

.tb__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(40 * var(--u)) 0 var(--gut);
}

.tb__logo img {
  width: calc(300 * var(--u));
  height: auto;
  filter: var(--logo-f);
}

.tt {
  position: relative;
  width: calc(123 * var(--u));
  height: calc(47 * var(--u));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border: 1.5px solid var(--ink);
  font-size: max(10px, calc(13 * var(--u)));
  font-weight: 500;
  letter-spacing: .18em;
}

.tt__knob {
  position: absolute;
  top: calc(3 * var(--u));
  bottom: calc(3 * var(--u));
  left: calc(3 * var(--u));
  width: calc(55 * var(--u));
  background: var(--lime);
  transition: left .3s;
}

html[data-theme="dark"] .tt__knob {
  left: calc(61 * var(--u));
}

.tt__lt,
.tt__dk {
  position: relative;
  text-align: center;
  color: var(--black);
}

html[data-theme="dark"] .tt__lt {
  color: var(--ink);
}

.tb__burger {
  display: none;
}

.tb__list {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tb__cell {
  position: relative;
  border-left: 1px solid var(--line);
}

.tb__item,
.ft__nav a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(24 * var(--u)) calc(28 * var(--u));
  transition: background-color .2s;
}

.tb__item:hover,
.tb__cell.is-open .tb__item {
  background: var(--hover);
}

.tb__n {
  display: flex;
  justify-content: space-between;
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .2em;
  color: var(--mute);
}

.tb__l {
  font-size: max(11px, calc(19 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.tb__caret::before {
  content: "▼";
}

.tb__cell.is-open .tb__item {
  background: var(--inv);
  color: var(--on-inv);
}

.tb__cell.is-open .tb__n {
  color: var(--accent-txt);
}

.tb__cell.is-open .tb__caret::before {
  content: "▲";
}

.dd {
  position: absolute;
  top: 100%;
  left: -1px;
  width: calc(720 * var(--u));
  display: none;
  flex-direction: column;
  padding: calc(20 * var(--u)) calc(40 * var(--u)) calc(36 * var(--u));
  background: var(--inv);
  color: var(--on-inv);
}

.tb__cell.is-open .dd,
html:not(.js) .tb__cell--menu:hover .dd {
  display: flex;
}

.dd a {
  display: flex;
  align-items: baseline;
  gap: calc(24 * var(--u));
  padding: calc(18 * var(--u)) 0;
  border-bottom: 1px solid var(--dd-line);
  transition: background-color .2s, box-shadow .2s, color .2s;
}

/* Hover, keyboard focus and the open page's row: a lime band across the whole panel (both themes) */
.dd a:hover,
.dd a:focus-visible,
.dd a[aria-current] {
  border-bottom-color: transparent;
  outline: 0;
  background: var(--lime);
  box-shadow: calc(-40 * var(--u)) 0 0 var(--lime), calc(40 * var(--u)) 0 0 var(--lime);
  color: var(--black);
}

.dd a:hover .dd__n,
.dd a:focus-visible .dd__n,
.dd a[aria-current] .dd__n {
  color: var(--black);
}

.dd__n {
  width: calc(52 * var(--u));
  flex: none;
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .2em;
  color: var(--accent-txt);
}

.dd__t {
  flex: 1;
  font-family: var(--display);
  font-size: calc(44 * var(--u));
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.dd__a {
  font-size: calc(26 * var(--u));
}

.tb__sign {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(24 * var(--u)) calc(32 * var(--u));
  background: var(--lime);
  color: var(--black);
  transition: background-color .2s;
}

.tb__sign:hover {
  background: var(--lime-hover);
}

.tb__sign .tb__n {
  color: var(--black);
}

.tb__sign .tb__n span {
  font-size: max(15px, calc(26 * var(--u)));
  line-height: .6;
}

/* 06. Header: Home 1 */
.hero {
  position: relative;
  height: calc(1240 * var(--u));
  overflow: hidden;
  background: var(--bg) var(--hero) center 40% / cover no-repeat;
}

.hero__body > * {
  position: absolute;
}

/* Desktop screens taller than the 2560×1240 proportion: the header grows to the
   window height (capped) and the content moves down by half of the extra room. */
@media (min-width: 1200px) {
  .hero {
    --hx: min(calc(400 * var(--u)), max(0px, 100vh - calc(1240 * var(--u))));
    height: calc(calc(1240 * var(--u)) + var(--hx));
  }

  .hero__body > * {
    margin-top: calc(var(--hx) / 2);
  }
}

.hero__eye {
  left: calc(61 * var(--u));
  top: calc(222 * var(--u));
}

.hero__h1 {
  left: calc(54 * var(--u));
  top: calc(286 * var(--u));
  z-index: 2;
  display: flex;
  flex-direction: column;
  font-weight: 400;
}

.hero__h1 span {
  font-family: var(--display);
  font-size: calc(172 * var(--u));
  line-height: calc(150 * var(--u));
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.hero__h1 em {
  margin-top: calc(6 * var(--u));
  font-size: calc(180 * var(--u));
  line-height: calc(132 * var(--u));
}

.hero__p {
  left: calc(62 * var(--u));
  top: calc(896 * var(--u));
  z-index: 2;
  font-size: calc(31 * var(--u));
  line-height: 1.3;
}

.hero__btn {
  left: calc(64 * var(--u));
  top: calc(1000 * var(--u));
  width: calc(430 * var(--u));
  height: calc(84 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(44 * var(--u));
  font-size: calc(27 * var(--u));
}

.hero__btn .btn__dot {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
}

.hero__tag {
  left: calc(61 * var(--u));
  top: calc(1120 * var(--u));
  height: calc(60 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(44 * var(--u));
  border: 2px solid var(--ink);
  opacity: .85;
  white-space: nowrap;
  font-size: max(10px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.hero__card {
  left: calc(1141 * var(--u));
  top: calc(840 * var(--u));
  z-index: 2;
  width: calc(230 * var(--u));
  height: calc(240 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(28 * var(--u)) calc(32 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: calc(26 * var(--u));
  line-height: 1.15;
  transition: background-color .2s;
}

.hero__card:hover {
  background: var(--lime-hover);
}

.hero__card svg {
  align-self: flex-end;
  width: calc(92 * var(--u));
  height: calc(92 * var(--u));
}

.hero__chip {
  left: calc(2024 * var(--u));
  top: calc(1124 * var(--u));
  width: calc(470 * var(--u));
  height: calc(56 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(30 * var(--u)) 0 calc(32 * var(--u));
  background: rgba(30, 30, 30, .72);
  color: #fff;
  font-size: max(10px, calc(19 * var(--u)));
  letter-spacing: .28em;
  text-transform: uppercase;
}

.hero__line {
  width: calc(60 * var(--u));
  height: 2px;
  background: #fff;
}

/* 07. 01 The firm */
.in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: calc(140 * var(--u));
  align-items: end;
  padding: calc(180 * var(--u)) var(--gut) calc(160 * var(--u));
  border-bottom: 1px solid var(--line);
}

.in__l {
  display: flex;
  flex-direction: column;
  gap: calc(60 * var(--u));
}

.in__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(92 * var(--u));
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

.in__h em {
  font-size: calc(102 * var(--u));
}

.in__r {
  display: flex;
  flex-direction: column;
  gap: calc(56 * var(--u));
}

.in__p {
  font-size: max(16px, calc(32 * var(--u)));
  line-height: 1.5;
  color: var(--ink2);
  text-wrap: pretty;
}

.in__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}

.in__fact {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(28 * var(--u)) 0;
}

.in__fact + .in__fact {
  padding-left: calc(28 * var(--u));
  border-left: 1px solid var(--line);
}

.in__fact dt {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.in__fact dd {
  font-size: max(15px, calc(30 * var(--u)));
}

/* 08. 02 Expertise */
.ex {
  padding-top: calc(160 * var(--u));
}

.ex .shead {
  padding: 0 var(--gut) calc(90 * var(--u));
}

.ex__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}

.ex__cell {
  min-height: calc(440 * var(--u));
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  padding: calc(48 * var(--u)) var(--gut) calc(56 * var(--u));
  border-bottom: 1px solid var(--line);
  transition: background-color .2s, color .2s;
}

.ex__grid li:not(:nth-child(3n + 1)) .ex__cell {
  border-left: 1px solid var(--line);
}

.ex__cell:hover {
  background: var(--lime);
  color: var(--black);
}

.ex__top {
  display: flex;
  justify-content: space-between;
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.ex__arr {
  font-size: calc(40 * var(--u));
  letter-spacing: 0;
  line-height: .6;
}

.ex__body {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}

.ex__t {
  font-family: var(--display);
  font-size: calc(64 * var(--u));
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.ex__d {
  max-width: calc(620 * var(--u));
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.45;
  opacity: .8;
}

/* 09. 03 How we work */
.hw {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.hw .shead {
  padding: calc(150 * var(--u)) var(--gut) calc(90 * var(--u));
}

.hw__state {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
}

.hw__hint {
  font-size: max(12px, calc(20 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.hw__count {
  font-family: var(--display);
  font-size: calc(56 * var(--u));
  letter-spacing: -.03em;
}

.hw__of {
  color: var(--ink3);
}

.hw__row {
  display: flex;
  height: calc(760 * var(--u));
  border-top: 2px solid var(--ink);
}

.hw__d {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  cursor: pointer;
  transition: flex .6s var(--expand), background-color .4s;
}

.hw__d.is-on {
  flex: 4;
  background: var(--night);
  color: var(--night-text);
  cursor: default;
}

.hw__btn {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hw__d.is-on .hw__btn {
  display: none;
}

.hw__bar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 0;
  height: calc(6 * var(--u));
  background: var(--lime);
}

.hw__d.is-on .hw__bar {
  width: var(--p, 0%);
}

.hw__shut {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(44 * var(--u)) calc(40 * var(--u));
}

.hw__d.is-on .hw__shut,
.hw__d:not(.is-on) .hw__open {
  display: none;
}

.hw__meta {
  display: flex;
  justify-content: space-between;
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.hw__ghost {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(300 * var(--u));
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

.hw__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.hw__vt,
.pp__vt {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--display);
  letter-spacing: -.02em;
  white-space: nowrap;
}

.hw__vt {
  font-size: calc(44 * var(--u));
}

.hw__plus {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  font-size: calc(24 * var(--u));
}

.hw__open {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(1460 * var(--u));
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(440 * var(--u));
  gap: calc(56 * var(--u));
  padding: calc(56 * var(--u)) calc(60 * var(--u)) calc(52 * var(--u));
}

.hw__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.hw__main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hw__meta2 {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
  color: var(--night-mute);
}

.hw__meta2 .chip {
  padding: calc(10 * var(--u)) calc(16 * var(--u));
}

.hw__mid {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}

.hw__h {
  display: flex;
  align-items: flex-end;
  gap: calc(36 * var(--u));
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(84 * var(--u));
  line-height: .9;
  letter-spacing: -.04em;
  white-space: nowrap;
}

.hw__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(260 * var(--u));
  line-height: .95;
  letter-spacing: 0;
  color: var(--lime);
}

.hw__p {
  max-width: calc(760 * var(--u));
  font-size: max(15px, calc(32 * var(--u)));
  line-height: 1.45;
  color: var(--night-soft);
}

.hw__gets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(16 * var(--u)) calc(40 * var(--u));
  padding-top: calc(30 * var(--u));
  border-top: 1px solid var(--night-line);
}

.hw__gets li {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  font-size: max(14px, calc(24 * var(--u)));
}

.hw__gets li::before {
  content: "";
  flex: none;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  background: var(--lime);
}

.ph--ink {
  background: repeating-linear-gradient(135deg, #1c1d1c 0 calc(14 * var(--u)), var(--night) calc(14 * var(--u)) calc(28 * var(--u)));
  border-color: var(--night-line);
}

.ph--ink .ph__l {
  font-size: max(10px, calc(16 * var(--u)));
  color: var(--night-mute);
}

/* 10. 04 Case studies */
.cs {
  display: flex;
  flex-direction: column;
  gap: calc(90 * var(--u));
  padding: calc(170 * var(--u)) var(--gut) calc(160 * var(--u));
  border-bottom: 1px solid var(--line);
}

.cs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: calc(80 * var(--u));
}

.cs__feat {
  position: relative;
  min-height: calc(980 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--hover) 0 calc(14 * var(--u)), var(--bg) calc(14 * var(--u)) calc(28 * var(--u)));
  border: 1px solid var(--line);
}

.cs__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}

.cs__img.is-on {
  opacity: 1;
}

.cs__panel {
  position: relative;
  width: 78%;
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
  padding: calc(44 * var(--u)) calc(48 * var(--u));
  background: var(--bg);
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
}

.cs__meta {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.cs__ft {
  font-family: var(--display);
  font-size: calc(72 * var(--u));
  line-height: .98;
  letter-spacing: -.035em;
}

.cs__fo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(15px, calc(27 * var(--u)));
}

.cs__sq {
  flex: none;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--lime);
  font-size: calc(32 * var(--u));
}

.cs__list {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--ink);
}

.cs__list li {
  flex: 1;
  display: flex;
}

.cs__row {
  flex: 1;
  display: grid;
  grid-template-columns: calc(90 * var(--u)) minmax(0, 1fr) calc(60 * var(--u));
  gap: calc(24 * var(--u));
  align-items: center;
  padding: calc(36 * var(--u)) calc(28 * var(--u));
  border-bottom: 1px solid var(--line);
  transition: background-color .25s;
}

.cs__row.is-on {
  background: var(--lime);
  color: var(--black);
}

.cs__n {
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .2em;
}

.cs__txt {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.cs__tag {
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
  opacity: .7;
}

.cs__t {
  font-family: var(--display);
  font-size: calc(46 * var(--u));
  line-height: 1.02;
  letter-spacing: -.03em;
}

.cs__o {
  font-size: max(14px, calc(24 * var(--u)));
}

.cs__arr {
  font-size: calc(36 * var(--u));
}

.cs__arr::before {
  content: "↗";
}

.cs__row.is-on .cs__arr::before {
  content: "←";
}

/* 11. 05 People */
.pp {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.pp .shead {
  padding: calc(150 * var(--u)) var(--gut) calc(90 * var(--u));
}

.pp__row {
  display: flex;
  height: calc(900 * var(--u));
  border-top: 2px solid var(--ink);
}

.pp__s {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  cursor: pointer;
  transition: flex .6s var(--expand);
}

.pp__s.is-on {
  flex: 0 0 calc(1480 * var(--u));
  cursor: default;
}

.pp__btn {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.pp__s.is-on .pp__btn {
  display: none;
}

.pp__img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  border-width: 0 1px 0 0;
  transition: width .6s var(--expand);
}

.pp__s.is-on .pp__img {
  width: calc(720 * var(--u));
}

.pp__img--photo {
  overflow: hidden;
  background: var(--hover);
  border-right: 1px solid var(--line);
}

.pp__img--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.pp__shut {
  position: absolute;
  left: calc(24 * var(--u));
  right: calc(24 * var(--u));
  bottom: calc(70 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.pp__vt {
  padding: calc(16 * var(--u)) calc(6 * var(--u));
  background: var(--bg);
  font-size: calc(50 * var(--u));
}

.pp__no {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lime);
  color: var(--black);
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(36 * var(--u));
}

.pp__s.is-on .pp__shut,
.pp__s:not(.is-on) .pp__open {
  display: none;
}

.pp__open {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(720 * var(--u));
  width: calc(760 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(60 * var(--u)) calc(64 * var(--u));
}

.pp__meta {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.pp__mid {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}

.pp__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(84 * var(--u));
  line-height: .92;
  letter-spacing: -.04em;
}

.pp__q {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(42 * var(--u));
  line-height: 1.2;
}

.pp__bio {
  font-size: max(14px, calc(25 * var(--u)));
  line-height: 1.5;
  color: var(--ink2);
}

.pp__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(28 * var(--u));
  border-top: 2px solid var(--ink);
  font-size: max(12px, calc(20 * var(--u)));
  letter-spacing: .12em;
}

.btn--sm {
  height: calc(72 * var(--u));
  gap: calc(24 * var(--u));
  padding: 0 calc(12 * var(--u)) 0 calc(30 * var(--u));
  font-size: max(14px, calc(24 * var(--u)));
  letter-spacing: 0;
}

.btn--sm .btn__dot {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  font-size: calc(22 * var(--u));
}

/* 12. 06 Clients */
.cl {
  display: flex;
  flex-direction: column;
  gap: calc(90 * var(--u));
  padding: calc(170 * var(--u)) 0 calc(160 * var(--u));
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.cl .shead {
  padding: 0 var(--gut);
}

.cl__band {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  padding: calc(40 * var(--u)) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.cl__row {
  display: flex;
  gap: calc(24 * var(--u));
  width: max-content;
  animation: mqL 60s linear infinite;
}

.cl__row--r {
  animation-name: mqR;
}

.cl__row:hover {
  animation-play-state: paused;
}

@keyframes mqL {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes mqR {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.cl__card {
  flex: 0 0 auto;
  width: calc(900 * var(--u));
  height: calc(470 * var(--u));
  display: flex;
  flex-direction: column;
  padding: calc(36 * var(--u)) calc(44 * var(--u)) calc(34 * var(--u));
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
}

.cl__card--lime {
  background: var(--lime);
  color: var(--black);
  border-color: var(--black);
}

.cl__top {
  height: calc(70 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cl__mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(150 * var(--u));
  line-height: .8;
  color: var(--lime);
  -webkit-text-stroke: 1.5px var(--ink);
}

.cl__card--lime .cl__mark {
  color: var(--black);
  -webkit-text-stroke: 0;
}

.cl__tag {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(10px, calc(15 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

.cl__card--lime .cl__tag {
  background: var(--black);
  color: var(--lime);
  border-color: transparent;
}

.cl__q {
  flex: 1;
  display: flex;
  align-items: center;
}

.cl__q p {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(42 * var(--u));
  line-height: 1.2;
  letter-spacing: -.01em;
}

.cl__by {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  padding-top: calc(24 * var(--u));
  border-top: 1.5px solid var(--line);
}

.cl__card--lime .cl__by {
  border-top-color: var(--black);
}

.cl__av {
  flex: none;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--hover);
  object-fit: cover;
}

.cl__card--lime .cl__av {
  border-color: var(--black);
}

.cl__who {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}

.cl__n {
  font-size: max(14px, calc(26 * var(--u)));
}

.cl__r {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .2em;
  color: var(--ink3);
}

.cl__card--lime .cl__r {
  color: var(--black);
}

.cl__arr {
  font-size: calc(30 * var(--u));
}

/* 13. 07 Insights */
.bl {
  display: flex;
  flex-direction: column;
  gap: calc(70 * var(--u));
  padding: calc(170 * var(--u)) var(--gut) calc(160 * var(--u));
  border-bottom: 1px solid var(--line);
}

.bl__tabs {
  display: flex;
  border: 2px solid var(--ink);
}

.bl__tab {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(20 * var(--u));
  padding: calc(28 * var(--u)) calc(32 * var(--u));
  white-space: nowrap;
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
  transition: background-color .2s, color .2s;
}

.bl__tab + .bl__tab {
  border-left: 2px solid var(--ink);
}

.bl__tab[aria-pressed="true"] {
  background: var(--inv);
  color: var(--accent-txt);
}

.bl__cnt {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(30 * var(--u));
  letter-spacing: 0;
}

.bl__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(48 * var(--u));
}

.bl__card[hidden] {
  display: none;
}

.bl__card a {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
}

.bl__img {
  position: relative;
  height: calc(620 * var(--u));
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--hover) 0 calc(14 * var(--u)), var(--bg) calc(14 * var(--u)) calc(28 * var(--u)));
  border: 1px solid var(--line);
}

.bl__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bl__chip {
  position: absolute;
  top: calc(22 * var(--u));
  left: calc(22 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  background: #fcfbf8;
  color: var(--black);
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
}

.bl__size {
  position: absolute;
  bottom: calc(22 * var(--u));
  left: calc(22 * var(--u));
  font-family: var(--mono);
  font-size: max(10px, calc(15 * var(--u)));
  color: var(--ink3);
}

.bl__new,
.bl__big,
.bl__card.is-first .bl__cat,
.bl__card.is-first .bl__small {
  display: none;
}

.bl__card.is-first .bl__new,
.bl__card.is-first .bl__big {
  display: inline;
}

.bl__card.is-first .bl__chip {
  background: var(--lime);
}

.bl__read {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(110 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(32 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(12px, calc(20 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
  transform: translateY(101%);
  transition: transform .4s var(--expand);
}

.bl__read span {
  font-size: calc(36 * var(--u));
  letter-spacing: 0;
}

.bl__card a:hover .bl__read,
.bl__card a:focus-visible .bl__read {
  transform: translateY(0);
}

.bl__meta {
  display: flex;
  justify-content: space-between;
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.bl__date {
  color: var(--ink3);
}

.bl__t {
  font-family: var(--display);
  font-size: calc(46 * var(--u));
  line-height: 1;
  letter-spacing: -.035em;
}

.bl__card.is-first .bl__t {
  font-size: calc(76 * var(--u));
}

/* 14. Footer */
.ft {
  border-top: 2px solid var(--ink);
}

.ft__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border-bottom: 2px solid var(--ink);
}

.ft__cta {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--u));
  padding: calc(110 * var(--u)) var(--gut) calc(90 * var(--u));
}

.ft__h {
  display: flex;
  flex-direction: column;
  font-weight: 400;
}

.ft__h span {
  font-family: var(--display);
  font-size: calc(172 * var(--u));
  line-height: calc(150 * var(--u));
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.ft__h em {
  font-size: calc(190 * var(--u));
  line-height: calc(160 * var(--u));
}

.ft__act {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
}

.btn--lg {
  flex: none;
  width: calc(470 * var(--u));
  height: calc(96 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(44 * var(--u));
  font-size: calc(29 * var(--u));
}

.btn--lg .btn__dot {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
}

.btn--lg .ico {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}

.ft__note {
  font-size: max(14px, calc(24 * var(--u)));
  line-height: 1.4;
  color: var(--ink2);
}

.ft__cells {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  border-left: 2px solid var(--ink);
}

.ft__cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(24 * var(--u));
  padding: calc(44 * var(--u)) var(--gut);
  transition: background-color .2s;
}

.ft__k {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  min-width: 0;
}

.ft__kl {
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .24em;
  color: var(--mute);
}

.ft__v {
  font-size: calc(56 * var(--u));
  letter-spacing: -.01em;
}

.ft__mail {
  border-bottom: 1px solid var(--line);
}

.ft__mail:hover {
  background: var(--hover);
}

.ft__chip {
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(12px, calc(22 * var(--u)));
  letter-spacing: .2em;
  white-space: nowrap;
}

.ft__mail.is-copied .ft__chip {
  background: var(--lime);
  color: var(--black);
  border-color: var(--black);
}

.ft__call {
  background: var(--lime);
  color: var(--black);
}

.ft__call:hover {
  background: var(--lime-hover);
}

.ft__call .ft__kl {
  color: var(--black);
}

.ft__big {
  font-size: calc(56 * var(--u));
}

.ft__office {
  background: var(--panel);
  color: var(--on-panel);
}

.ft__office .ft__kl {
  color: var(--night-mute);
}

.ft__status {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
}

.ft__dot {
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  background: var(--night-mute);
}

.ft__office.is-open .ft__dot {
  background: var(--lime);
}

.ft__time {
  font-family: var(--display);
  font-size: calc(72 * var(--u));
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.ft__word {
  padding: calc(70 * var(--u)) var(--gut) calc(40 * var(--u));
  overflow: hidden;
  cursor: crosshair;
}

.ft__adv {
  width: 100%;
  font-family: var(--display);
  font-size: var(--wfs, calc(392 * var(--u)));
  line-height: .86;
  letter-spacing: -.055em;
  white-space: nowrap;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--stroke);
  background-image: var(--photo);
  background-size: calc(1500 * var(--u)) auto;
  background-repeat: no-repeat;
  background-position: var(--bx, calc(468 * var(--u))) var(--by, 45%);
  -webkit-background-clip: text;
}

.ft__hint {
  margin-top: calc(36 * var(--u));
  text-align: right;
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .24em;
  color: var(--mute);
}

.ft__bar {
  height: calc(124 * var(--u));
  display: grid;
  grid-template-columns: calc(560 * var(--u)) minmax(0, 1fr) calc(300 * var(--u));
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.ft__logo {
  display: flex;
  align-items: center;
  padding-left: var(--gut);
}

.ft__logo img {
  width: calc(260 * var(--u));
  height: auto;
  filter: var(--logo-f);
}

.ft__nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ft__nav li {
  border-left: 1px solid var(--line);
}

.ft__nav a:hover {
  background: var(--lime);
  color: var(--black);
}

.ft__top-link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(24 * var(--u)) calc(32 * var(--u));
  background: var(--panel);
  color: var(--on-panel);
  transition: background-color .2s, color .2s;
}

.ft__top-link .tb__n {
  color: var(--lime);
}

.ft__top-link:hover {
  background: var(--lime);
  color: var(--black);
}

.ft__top-link:hover .tb__n {
  color: var(--black);
}

.ft__legal {
  display: flex;
  justify-content: space-between;
  gap: calc(80 * var(--u));
  padding: calc(34 * var(--u)) var(--gut) calc(48 * var(--u));
  font-size: max(12px, calc(18 * var(--u)));
  letter-spacing: .06em;
  color: var(--ink3);
}

.ft__legal > p:first-child {
  max-width: calc(1100 * var(--u));
  line-height: 1.6;
}

.ft__links {
  display: flex;
  gap: calc(48 * var(--u));
  white-space: nowrap;
}

.ft__links a:hover {
  color: var(--ink);
}

/* 16. Tablet and phone (below 1200px) */
@media (max-width: 1199.98px) {
  :root {
    --u: clamp(.36px, calc(100vw / 1100), .47px);
    --gut: clamp(20px, 4vw, 40px);
  }

  .h2 {
    font-size: min(calc(128 * var(--u)), 11vw);
    white-space: normal;
  }

  .h2 em {
    font-size: min(calc(140 * var(--u)), 12vw);
  }

  .shead {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 24px 40px;
    white-space: normal;
  }

  /* top bar: logo, theme switch and a menu button; the menu drops below */
  .tb {
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .tb__brand {
    height: 64px;
    gap: 16px;
    justify-content: flex-start;
    padding-right: 0;
  }

  .tb__logo img {
    width: 150px;
  }

  .tt {
    width: 79px;
    height: 32px;
    font-size: 10px;
  }

  .tt__knob {
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: 36px;
  }

  html[data-theme="dark"] .tt__knob {
    left: 38px;
  }

  .tb__burger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 var(--gut);
    border-left: 1px solid var(--line);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
  }

  .tb__bars,
  .tb__bars::before,
  .tb__bars::after {
    position: relative;
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform .25s, background-color .25s;
  }

  .tb__bars::before,
  .tb__bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .tb__bars::before {
    top: -7px;
  }

  .tb__bars::after {
    top: 7px;
  }

  .tb.is-menu .tb__bars {
    background: transparent;
  }

  .tb.is-menu .tb__bars::before {
    transform: translateY(7px) rotate(45deg);
  }

  .tb.is-menu .tb__bars::after {
    transform: translateY(-7px) rotate(-45deg);
  }

  .tb__nav,
  .tb__sign {
    display: none;
    grid-column: 1 / -1;
  }

  .tb.is-menu .tb__nav {
    display: block;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    border-top: 2px solid var(--ink);
  }

  .tb.is-menu .tb__sign {
    display: flex;
  }

  .tb__list {
    display: block;
  }

  .tb__cell {
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .tb__item {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px var(--gut);
  }

  .tb__n {
    gap: 12px;
    font-size: 12px;
  }

  .tb__l {
    font-size: 15px;
  }

  .dd {
    position: static;
    width: auto;
    padding: 0 var(--gut) 12px;
  }

  .dd a {
    padding: 12px 0;
  }

  .dd a:hover,
  .dd a:focus-visible,
  .dd a[aria-current] {
    box-shadow: calc(var(--gut) * -1) 0 0 var(--lime), var(--gut) 0 0 var(--lime);
  }

  .dd__n {
    width: 44px;
    font-size: 12px;
  }

  .dd__t {
    font-size: 22px;
  }

  .tb__sign {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px var(--gut);
  }

  .tb__sign .tb__n {
    font-size: 12px;
  }

  /* header: text in the page flow, the photo below it */
  .hero {
    height: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg);
  }

  .hero::after {
    content: "";
    display: block;
    aspect-ratio: 4 / 3;
    max-height: 70vh;
    background: var(--photo) 50% 20% / cover no-repeat;
  }

  .hero__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: calc(64px + 56px) var(--gut) 48px;
  }

  .hero__body > * {
    position: static;
  }

  .hero__h1 span {
    font-size: min(calc(172 * var(--u)), calc((100vw - 2 * var(--gut)) / 4.9));
    line-height: .88;
  }

  .hero__h1 em {
    margin-top: .06em;
    font-size: min(calc(180 * var(--u)), calc((100vw - 2 * var(--gut)) / 4.7));
    line-height: .9;
  }

  .hero__p {
    font-size: max(17px, calc(31 * var(--u)));
  }

  .hero__btn {
    width: auto;
    min-width: 260px;
    height: 60px;
    gap: 24px;
    padding: 0 8px 0 28px;
    font-size: 17px;
  }

  .hero__btn .btn__dot {
    width: 44px;
    height: 44px;
  }

  .hero__btn .ico {
    width: 18px;
    height: 18px;
  }

  .hero__tag {
    height: auto;
    padding: 12px 18px;
    white-space: normal;
    font-size: 11px;
    line-height: 1.5;
  }

  .hero__card,
  .hero__chip {
    position: absolute;
    top: auto;
    bottom: 20px;
  }

  .hero__card {
    left: var(--gut);
    width: 128px;
    height: 132px;
    padding: 14px 16px;
    font-size: 15px;
  }

  .hero__card svg {
    width: 44px;
    height: 44px;
  }

  .hero__chip {
    left: auto;
    right: var(--gut);
    top: auto;
    width: auto;
    height: 44px;
    gap: 16px;
    padding: 0 18px;
    font-size: 11px;
  }

  .hero__line {
    width: 32px;
  }

  /* 01 The firm */
  .in {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 72px var(--gut) 64px;
  }

  .in__l {
    gap: 32px;
  }

  .in__h {
    font-size: min(calc(92 * var(--u)), 8.4vw);
  }

  .in__h em {
    font-size: min(calc(102 * var(--u)), 9.2vw);
  }

  .in__r {
    gap: 32px;
  }

  .in__fact {
    padding: 18px 0;
  }

  .in__fact + .in__fact {
    padding-left: 16px;
  }

  /* 02 Expertise */
  .ex {
    padding-top: 72px;
  }

  .ex .shead {
    padding-bottom: 40px;
  }

  .ex__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ex__grid li:not(:nth-child(3n + 1)) .ex__cell {
    border-left: 0;
  }

  .ex__grid li:nth-child(even) .ex__cell {
    border-left: 1px solid var(--line);
  }

  .ex__cell {
    min-height: 0;
    gap: 40px;
    padding: 28px var(--gut) 32px;
  }

  .ex__t {
    font-size: min(calc(64 * var(--u)), 7vw);
  }

  .ex__arr {
    font-size: 22px;
  }

  /* 03 How we work: a vertical accordion */
  .hw .shead {
    padding: 72px var(--gut) 40px;
  }

  .hw__count {
    font-size: 30px;
  }

  .hw__row {
    flex-direction: column;
    height: auto;
  }

  .hw__d {
    flex: none;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    transition: background-color .4s;
  }

  .hw__d:last-child {
    border-bottom: 0;
  }

  .hw__d.is-on {
    flex: none;
  }

  .hw__shut {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 18px var(--gut);
  }

  .hw__meta {
    flex-direction: column;
    gap: 2px;
    min-width: 88px;
  }

  .hw__ghost {
    display: none;
  }

  .hw__foot {
    flex: 1;
    min-width: 0;
    gap: 12px;
    align-items: center;
  }

  .hw__vt {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 22px;
  }

  .hw__plus {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .hw__open {
    position: static;
    width: auto;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 32px;
    padding: 28px var(--gut) 32px;
  }

  .hw__main {
    gap: 28px;
  }

  .hw__h {
    gap: 20px;
    font-size: min(calc(84 * var(--u)), 7vw);
    white-space: normal;
  }

  .hw__num {
    font-size: min(calc(260 * var(--u)), 22vw);
  }

  /* 04 Case studies */
  .cs {
    gap: 40px;
    padding: 72px var(--gut) 64px;
  }

  .cs__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .cs__feat {
    min-height: 0;
    aspect-ratio: 1330 / 980;
  }

  .cs__panel {
    width: 82%;
    gap: 14px;
    padding: 22px 24px;
  }

  .cs__ft {
    font-size: min(calc(72 * var(--u)), 6vw);
  }

  .cs__sq {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .cs__row {
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    gap: 14px;
    padding: 20px 12px;
  }

  .cs__t {
    font-size: min(calc(46 * var(--u)), 5.4vw);
  }

  .cs__arr {
    font-size: 22px;
  }

  /* 05 People: rows that open into portrait + bio */
  .pp .shead {
    padding: 72px var(--gut) 40px;
  }

  .pp__row {
    flex-direction: column;
    height: auto;
  }

  .pp__s,
  .pp__s.is-on {
    flex: none;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }

  .pp__s:last-child {
    border-bottom: 0;
  }

  .pp__s:not(.is-on) .pp__img {
    display: none;
  }

  .pp__shut {
    position: static;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 14px var(--gut);
  }

  .pp__vt {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 0;
    background: none;
    font-size: 22px;
  }

  .pp__no {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .pp__s.is-on {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .pp__s.is-on .pp__img {
    position: static;
    width: auto;
    min-height: 100%;
    aspect-ratio: 720 / 900;
  }

  .pp__open {
    position: static;
    width: auto;
    gap: 24px;
    padding: 28px var(--gut) 28px 28px;
  }

  .pp__mid {
    gap: 18px;
  }

  .pp__h {
    font-size: min(calc(84 * var(--u)), 7vw);
  }

  .pp__q {
    font-size: max(18px, calc(42 * var(--u)));
  }

  .pp__foot {
    gap: 16px;
    flex-wrap: wrap;
  }

  .btn--sm {
    height: 52px;
    gap: 16px;
    padding: 0 8px 0 20px;
    font-size: 16px;
  }

  .btn--sm .btn__dot {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  /* 06 Clients */
  .cl {
    gap: 40px;
    padding: 72px 0 64px;
  }

  .cl__band {
    gap: 16px;
    padding: 24px 0;
  }

  .cl__row {
    gap: 16px;
  }

  .cl__card {
    width: min(calc(900 * var(--u)), 84vw);
    height: auto;
    min-height: calc(470 * var(--u));
    gap: 18px;
    padding: 20px 22px;
  }

  .cl__top {
    height: auto;
    min-height: 40px;
  }

  .cl__mark {
    font-size: 72px;
  }

  .cl__q p {
    font-size: max(18px, calc(42 * var(--u)));
  }

  .cl__av {
    width: 40px;
    height: 40px;
  }

  .cl__arr {
    font-size: 20px;
  }

  /* 07 Insights */
  .bl {
    gap: 32px;
    padding: 72px var(--gut) 64px;
  }

  .bl__tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bl__tab {
    flex: none;
    padding: 16px 20px;
  }

  .bl__cnt {
    font-size: 20px;
  }

  .bl__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .bl__card.is-first {
    grid-column: 1 / -1;
  }

  .bl__card a {
    gap: 16px;
  }

  .bl__img {
    height: auto;
    aspect-ratio: 570 / 620;
  }

  .bl__card.is-first .bl__img {
    aspect-ratio: 1170 / 620;
  }

  .bl__read {
    height: 56px;
    padding: 0 18px;
  }

  .bl__read span {
    font-size: 22px;
  }

  .bl__t,
  .bl__card.is-first .bl__t {
    font-size: min(calc(46 * var(--u)), 5vw);
  }

  .bl__card.is-first .bl__t {
    font-size: min(calc(76 * var(--u)), 7vw);
  }

  /* Footer */
  .ft__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .ft__cta {
    gap: 28px;
    padding: 72px var(--gut) 56px;
  }

  .ft__h span {
    font-size: min(calc(172 * var(--u)), calc((100vw - 2 * var(--gut)) / 6.2));
    line-height: .9;
  }

  .ft__h em {
    font-size: min(calc(190 * var(--u)), calc((100vw - 2 * var(--gut)) / 4.4));
    line-height: .95;
  }

  .ft__act {
    flex-wrap: wrap;
    gap: 20px 28px;
  }

  .btn--lg {
    width: auto;
    min-width: 260px;
    height: 60px;
    gap: 24px;
    padding: 0 8px 0 28px;
    font-size: 17px;
  }

  .btn--lg .btn__dot {
    width: 44px;
    height: 44px;
  }

  .btn--lg .ico {
    width: 18px;
    height: 18px;
  }

  .ft__cells {
    border-left: 0;
    border-top: 2px solid var(--ink);
  }

  .ft__cell {
    padding: 24px var(--gut);
  }

  .ft__v {
    font-size: min(calc(56 * var(--u)), 6vw);
    overflow-wrap: anywhere;
  }

  .ft__chip {
    padding: 8px 12px;
  }

  .ft__big {
    font-size: 28px;
  }

  .ft__time {
    font-size: min(calc(72 * var(--u)), 7vw);
  }

  .ft__dot {
    width: 10px;
    height: 10px;
  }

  .ft__status {
    gap: 12px;
  }

  .ft__word {
    padding: 40px var(--gut) 24px;
    cursor: auto;
  }

  .ft__adv {
    background-size: cover;
    background-position: 50% 30%;
  }

  .ft__hint,
  .hw__hint,
  .cl .hint {
    display: none;
  }

  .ft__bar {
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ft__logo {
    padding: 20px var(--gut);
  }

  .ft__logo img {
    width: 150px;
  }

  .ft__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
  }

  .ft__nav li {
    border-bottom: 1px solid var(--line);
  }

  .ft__nav li:nth-child(3n + 1) {
    border-left: 0;
  }

  .ft__nav a {
    gap: 10px;
    padding: 14px var(--gut);
  }

  .ft__top-link {
    gap: 6px;
    padding: 14px var(--gut);
  }

  .ft__legal {
    flex-direction: column;
    gap: 16px;
    padding: 24px var(--gut) 32px;
  }

  .ft__links {
    flex-wrap: wrap;
    gap: 12px 28px;
  }
}

/* 17. Phone (below 600px) */
@media (max-width: 599.98px) {
  .tb__bt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tb__logo img {
    width: 120px;
  }

  .hero::after {
    aspect-ratio: 1 / 1.05;
  }

  .hero__chip {
    display: none;
  }

  .shead {
    flex-direction: column;
    align-items: flex-start;
  }

  .in__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .in__fact + .in__fact {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .ex__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ex__grid li:nth-child(even) .ex__cell {
    border-left: 0;
  }

  .ex__t {
    font-size: 28px;
  }

  .hw .shead {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .hw__meta {
    min-width: 64px;
  }

  .hw__vt {
    font-size: 19px;
  }

  .hw__open {
    grid-template-columns: minmax(0, 1fr);
  }

  .hw__img {
    display: none;
  }

  .hw__h {
    font-size: 30px;
  }

  .hw__gets {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs__feat {
    aspect-ratio: auto;
    min-height: 0;
    padding-top: 62%;
  }

  .cs__panel {
    width: 100%;
    border-right: 0;
  }

  .cs__ft {
    font-size: 26px;
  }

  .cs__t {
    font-size: clamp(17px, 5.6vw, 21px);
  }

  .pp__s.is-on {
    grid-template-columns: minmax(0, 1fr);
  }

  .pp__s.is-on .pp__img {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .pp__open {
    padding: 24px var(--gut) 28px;
  }

  .pp__h {
    font-size: 32px;
  }

  .bl__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bl__card .bl__img,
  .bl__card.is-first .bl__img {
    aspect-ratio: 16 / 11;
  }

  .bl__t,
  .bl__card.is-first .bl__t {
    font-size: 26px;
  }

  .ft__v {
    font-size: 22px;
  }

  .ft__time {
    font-size: 26px;
  }

  .ft__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ft__nav li:nth-child(3n + 1) {
    border-left: 1px solid var(--line);
  }

  .ft__nav li:nth-child(odd) {
    border-left: 0;
  }
}

/* 18. Home 2: page tokens and header */
.p-home2 {
  --hero: url("../images/home2.webp");
  --photo: url("../images/home2-photo.webp");
}

html[data-theme="dark"] .p-home2 {
  --bg: #111111;
  --hero: url("../images/home2-dark.webp");
  --photo: url("../images/home2-dark-photo.webp");
}

.hero--2 {
  background-position: center 30%;
}

.hero--2 .hero__h1 {
  left: calc(50 * var(--u));
  top: calc(280 * var(--u));
}

.hero--2 .hero__h1 span {
  font-size: calc(218 * var(--u));
  line-height: calc(182 * var(--u));
  letter-spacing: -.05em;
  white-space: nowrap;
}

.hero--2 .hero__h1 em {
  margin-top: calc(8 * var(--u));
  font-size: calc(212 * var(--u));
  line-height: calc(176 * var(--u));
  letter-spacing: -.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero--2 .hero__p {
  top: calc(880 * var(--u));
}

.hero--2 .hero__tag {
  padding: 0;
}

.hero--2 .hero__tag span:first-child {
  padding: 0 calc(44 * var(--u));
}

.hero--2 .hero__tag span:last-child {
  padding: 0 calc(64 * var(--u));
}

.hero__sep {
  width: 2px;
  align-self: stretch;
  margin: calc(12 * var(--u)) 0;
  background: var(--ink);
}

.hero--2 .hero__card {
  left: calc(1209 * var(--u));
  top: calc(812 * var(--u));
  width: calc(252 * var(--u));
  height: calc(228 * var(--u));
}

.hero--2 .hero__chip {
  left: auto;
  right: calc(66 * var(--u));
  width: auto;
  gap: calc(48 * var(--u));
}

/* 19. Home 2: 01 The firm */
.fm {
  padding-top: calc(190 * var(--u));
  border-bottom: 1px solid var(--line);
}

.fm__in {
  display: flex;
  flex-direction: column;
  gap: calc(64 * var(--u));
  padding: 0 var(--gut) calc(150 * var(--u));
}

.fm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: calc(140 * var(--u));
  align-items: stretch;
}

.fm__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(88 * var(--u));
  line-height: 1.08;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

.fm__h em {
  padding: 0 calc(14 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(96 * var(--u));
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.fm__r {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(44 * var(--u));
  padding: calc(6 * var(--u)) 0 calc(2 * var(--u));
}

.fm__p {
  font-size: max(16px, calc(36 * var(--u)));
  line-height: 1.5;
  color: var(--ink2);
  text-wrap: pretty;
}

.fm__btn,
.sc__btn {
  height: calc(96 * var(--u));
  gap: calc(40 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(44 * var(--u));
  font-size: calc(29 * var(--u));
}

.fm__btn .btn__dot,
.sc__btn .btn__dot {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
}

.fm__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}

.fm__f {
  height: calc(420 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(48 * var(--u)) var(--gut);
  overflow: hidden;
  transition: background-color .35s, color .35s;
}

.fm__f + .fm__f {
  border-left: 1px solid var(--line);
}

.fm__k {
  display: flex;
  justify-content: space-between;
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.fm__sign {
  font-size: calc(30 * var(--u));
  letter-spacing: 0;
}

.fm__sign span + span,
.fm__f:hover .fm__sign span:first-child {
  display: none;
}

.fm__f:hover .fm__sign span + span {
  display: inline;
}

.fm__v {
  font-family: var(--display);
  font-size: calc(170 * var(--u));
  line-height: .85;
  letter-spacing: -.055em;
  white-space: nowrap;
  transform: translateX(calc(-24 * var(--u)));
  transition: transform .7s var(--rise);
}

.fm__d {
  max-width: calc(620 * var(--u));
  font-size: max(14px, calc(24 * var(--u)));
  line-height: 1.4;
  opacity: .6;
  transition: opacity .35s;
}

.fm__f:hover {
  background: var(--lime);
  color: var(--black);
}

.fm__f:hover .fm__v {
  transform: none;
}

.fm__f:hover .fm__d {
  opacity: 1;
}

/* 20. Home 2: 02 Expertise, live bento */
.bx {
  display: flex;
  flex-direction: column;
  gap: calc(90 * var(--u));
  padding: calc(170 * var(--u)) var(--gut) calc(160 * var(--u));
  border-bottom: 1px solid var(--line);
}

.bx__right {
  display: flex;
  align-items: center;
  gap: calc(48 * var(--u));
}

.bx__count {
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.bx__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, calc(330 * var(--u)));
  gap: calc(24 * var(--u));
}

.bx__stages {
  position: relative;
  grid-row: 1 / 4;
}

.bx__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(56 * var(--u));
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #1c1d1d 0 calc(14 * var(--u)), #141515 calc(14 * var(--u)) calc(28 * var(--u)));
  color: var(--night-text);
}

.bx__stage[hidden],
.qw__stage[hidden] {
  display: none;
}

/* The practice photo sits under a dark wash so the copy stays readable */
.bx__ph,
.fx__ph {
  position: absolute;
  inset: 0;
}

.bx__ph img,
.fx__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bx__ph::after,
.fx__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 14, .55) 0%, rgba(14, 14, 14, .62) 40%, rgba(14, 14, 14, .82) 100%);
}

.bx__big {
  position: absolute;
  right: calc(-40 * var(--u));
  top: calc(-120 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(720 * var(--u));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--lime);
  opacity: .9;
}

.bx__top {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.bx__tagrow,
.qw__tagrow {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}

.bx__img {
  font-family: var(--mono);
  font-size: max(11px, calc(22 * var(--u)));
  letter-spacing: 0;
  color: var(--night-soft);
}

.bx__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}

.bx__t {
  font-family: var(--display);
  font-size: calc(118 * var(--u));
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.bx__t em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(130 * var(--u));
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--lime);
}

.bx__d {
  max-width: calc(780 * var(--u));
  min-height: calc(84 * var(--u));
  font-size: calc(29 * var(--u));
  line-height: 1.45;
  color: var(--night-soft);
}

.bx__svc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 calc(40 * var(--u));
  border-top: 1px solid var(--night-line);
}

.bx__s {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(18 * var(--u)) 0;
  border-bottom: 1px solid var(--night-line);
  font-size: calc(24 * var(--u));
}

.bx__dot {
  flex: none;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  background: var(--lime);
}

.bx__go,
.fx__go {
  align-self: flex-start;
  height: calc(90 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(36 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(40 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: calc(27 * var(--u));
}

.bx__goa,
.fx__goa,
.qw__ca {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.bx__goa,
.fx__goa {
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
  background: var(--black);
  color: var(--lime);
}

.bx__tiles,
.qw__tiles {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-row: 1 / 4;
}

.bx__tiles {
  grid-column: 2 / 4;
}

.bx__tiles li {
  display: flex;
}

.bx__tile {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(36 * var(--u)) calc(40 * var(--u));
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  transition: background-color .3s, color .3s;
}

.bx__num {
  position: absolute;
  right: calc(-14 * var(--u));
  bottom: calc(-60 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(300 * var(--u));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line);
  transition: -webkit-text-stroke-color .3s;
}

.bx__row,
.qw__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: .24em;
}

.bx__row {
  font-size: max(11px, calc(17 * var(--u)));
}

.bx__box,
.qw__box,
.nm__box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  letter-spacing: 0;
  transition: background-color .3s;
}

.bx__box {
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  font-size: calc(24 * var(--u));
}

.bx__box::before,
.qw__box::before {
  content: "↗";
}

.bx__tb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}

.bx__tt {
  font-family: var(--display);
  font-size: calc(54 * var(--u));
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.bx__td {
  max-width: calc(460 * var(--u));
  font-size: max(13px, calc(21 * var(--u)));
  line-height: 1.4;
  color: var(--ink2);
}

.bx__tile.is-on {
  border-color: var(--black);
  background: var(--lime);
  color: var(--black);
}

.bx__tile.is-on .bx__num {
  -webkit-text-stroke-color: #0e0e0e55;
}

.bx__tile.is-on .bx__box {
  background: var(--black);
  color: var(--lime);
  border-color: transparent;
}

.bx__tile.is-on .bx__box::before,
.qw__tile.is-on .qw__box::before {
  content: "←";
}

.bx__tile.is-on .bx__td {
  color: var(--black);
}

/* 21. Home 2: 03 How we work, giant numerals */
.nm {
  padding-top: calc(170 * var(--u));
  border-bottom: 2px solid var(--ink);
}

.nm .shead {
  padding: 0 var(--gut) calc(100 * var(--u));
}

.nm__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}

.nm__s {
  position: relative;
  height: calc(860 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(48 * var(--u)) calc(56 * var(--u)) calc(56 * var(--u));
  overflow: hidden;
}

.nm__s + .nm__s {
  border-left: 1px solid var(--line);
}

.nm__btn,
.qw__btn {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  cursor: default;
}

.nm__top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.nm__box {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-color: var(--ink);
  font-size: calc(26 * var(--u));
}

.nm__box::before {
  content: "+";
}

.nm__n {
  position: absolute;
  left: calc(30 * var(--u));
  top: calc(120 * var(--u));
  font-family: var(--display);
  font-size: calc(560 * var(--u));
  line-height: .8;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  transform-origin: left top;
  transition: color .45s, transform .55s var(--rise);
}

.nm__txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
  transform: translateY(calc(260 * var(--u)));
  transition: transform .55s var(--rise);
}

.nm__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(66 * var(--u));
  line-height: .95;
  letter-spacing: -.04em;
}

.nm__d {
  min-height: calc(156 * var(--u));
  font-size: calc(27 * var(--u));
  line-height: 1.45;
  color: var(--ink2);
}

.nm__gets {
  border-top: 1.5px solid var(--ink);
}

.nm__d,
.nm__gets {
  opacity: 0;
  transition: opacity .4s;
}

.nm__gets li {
  display: flex;
  justify-content: space-between;
  padding: calc(16 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  font-size: max(13px, calc(22 * var(--u)));
}

.nm__s.is-on .nm__box {
  background: var(--lime);
  color: var(--black);
}

.nm__s.is-on .nm__box::before {
  content: "−";
}

.nm__s.is-on .nm__n {
  color: var(--lime);
  transform: scale(.5);
}

.nm__s.is-on .nm__txt {
  transform: none;
}

.nm__s.is-on .nm__d,
.nm__s.is-on .nm__gets {
  opacity: 1;
}

/* 22. Home 2: 05 People, portrait grid */
.pt {
  display: flex;
  flex-direction: column;
  gap: calc(90 * var(--u));
  padding: calc(170 * var(--u)) var(--gut) calc(160 * var(--u));
  border-bottom: 1px solid var(--line);
}

.pt__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.pt__c {
  position: relative;
  aspect-ratio: 4 / 5.4;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--hover) 0 calc(14 * var(--u)), var(--bg) calc(14 * var(--u)) calc(28 * var(--u)));
}

.pt__c + .pt__c {
  border-left: 1px solid var(--line);
}

.pt__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.pt__no {
  position: absolute;
  top: calc(10 * var(--u));
  right: calc(28 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(160 * var(--u));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink3);
}

.pt__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(30 * var(--u)) calc(32 * var(--u));
  border-top: 2px solid var(--ink);
  background: var(--bg);
}

.pt__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(42 * var(--u));
  letter-spacing: -.03em;
}

.pt__role {
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .22em;
  color: var(--ink3);
}

.pt__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(40 * var(--u)) calc(36 * var(--u));
  background: var(--lime);
  color: var(--black);
  transform: translateY(101%);
  transition: transform .5s var(--expand);
}

.pt__c:hover .pt__panel,
.pt__c:focus-within .pt__panel,
.pt__c.is-on .pt__panel {
  transform: none;
}

.pt__meta {
  display: flex;
  justify-content: space-between;
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.pt__mid {
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
}

.pt__pn {
  font-family: var(--display);
  font-size: calc(56 * var(--u));
  line-height: .95;
  letter-spacing: -.035em;
}

.pt__bio {
  font-size: calc(25 * var(--u));
  line-height: 1.45;
}

.pt__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
}

.pt__chips span {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1.5px solid var(--black);
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .18em;
}

.pt__acts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(10 * var(--u));
}

.pt__acts a {
  height: calc(68 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
  transition: background-color .2s, color .2s;
}

.pt__mail {
  border: 2px solid var(--black);
}

.pt__mail:hover {
  background: var(--black);
  color: var(--lime);
}

.pt__in {
  background: var(--black);
  color: var(--lime);
}

/* 23. Home 2: 06 Clients, live quote wall */
.qw {
  display: flex;
  flex-direction: column;
  gap: calc(90 * var(--u));
  padding: calc(170 * var(--u)) var(--gut) calc(160 * var(--u));
  border-bottom: 1px solid var(--line);
}

.qw__stats {
  display: flex;
  border: 2px solid var(--ink);
}

.qw__stat {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(22 * var(--u)) calc(36 * var(--u));
}

.qw__stat + .qw__stat {
  border-left: 2px solid var(--ink);
}

.qw__sv {
  font-family: var(--display);
  font-size: calc(52 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.qw__sv small {
  font-size: calc(28 * var(--u));
}

.qw__sl {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.qw__stat--hint {
  flex-direction: row;
  align-items: center;
  background: var(--lime);
  color: var(--black);
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.qw__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, calc(320 * var(--u)));
  gap: calc(24 * var(--u));
}

.qw__stages {
  position: relative;
  grid-column: 1 / 3;
  grid-row: 1 / 4;
}

.qw__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  padding: calc(60 * var(--u));
  overflow: hidden;
  background: var(--lime);
  color: var(--black);
}

.qw__mark {
  position: absolute;
  right: calc(-30 * var(--u));
  top: calc(-170 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(900 * var(--u));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px #0e0e0e33;
  pointer-events: none;
}

.qw__top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.qw__chip {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  background: var(--black);
  color: var(--lime);
}

.qw__q {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(90 * var(--u));
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.qw__q--long {
  font-size: calc(78 * var(--u));
}

.qw__by {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
  padding-top: calc(32 * var(--u));
  border-top: 2px solid var(--black);
}

.qw__av {
  flex: none;
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  border: 2px solid var(--black);
  border-radius: 50%;
  object-fit: cover;
}

.qw__who {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}

.qw__n {
  font-size: calc(32 * var(--u));
}

.qw__r {
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .22em;
}

.qw__case {
  height: calc(84 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(36 * var(--u));
  background: var(--black);
  color: #fcfbf8;
  font-size: calc(24 * var(--u));
  transition: background-color .2s;
}

.qw__case:hover {
  background: #262626;
}

.qw__ca {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  background: var(--lime);
  color: var(--black);
}

.qw__tiles {
  grid-column: 3 / 5;
}

.qw__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  padding: calc(36 * var(--u)) calc(40 * var(--u));
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  transition: background-color .3s, color .3s;
}

.qw__row {
  font-size: max(10px, calc(15 * var(--u)));
}

.qw__box {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  font-size: calc(20 * var(--u));
}

.qw__short {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(36 * var(--u));
  line-height: 1.18;
}

.qw__cap {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .08em;
  color: var(--ink3);
}

.qw__ring {
  flex: none;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  object-fit: cover;
}

.qw__tile--bold,
.qw__tile.is-on {
  background: var(--black);
  color: #fcfbf8;
}

.qw__tile--bold .qw__cap,
.qw__tile.is-on .qw__cap {
  color: var(--lime);
}

.qw__tile--bold .qw__ring,
.qw__tile.is-on .qw__ring {
  border-color: #fcfbf8;
}

.qw__tile--bold .qw__short {
  font-family: var(--display);
  font-style: normal;
  font-size: calc(40 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.qw__tile.is-on .qw__box {
  background: var(--lime);
  color: var(--black);
  border-color: #fcfbf8;
}

/* 24. Home 2: tablet and phone (below 1200px) */
@media (max-width: 1199.98px) {
  .hero--2 .hero__h1 span,
  .hero--2 .hero__h1 em {
    font-size: min(calc(218 * var(--u)), calc((100vw - 2 * var(--gut)) / 5.05));
    line-height: .88;
  }

  .hero--2 .hero__h1 em {
    margin-top: .06em;
    line-height: .9;
  }

  .hero--2 .hero__card {
    left: var(--gut);
    top: auto;
    width: 140px;
    height: 132px;
  }

  .hero--2 .hero__chip {
    right: var(--gut);
    gap: 16px;
  }

  .hero--2 .hero__tag span:first-child,
  .hero--2 .hero__tag span:last-child {
    padding: 12px 18px;
  }

  /* 01 The firm: statement, copy, then the facts */
  .fm {
    padding-top: 72px;
  }

  .fm__in {
    gap: 32px;
    padding-bottom: 56px;
  }

  .fm__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .fm__h {
    font-size: min(calc(88 * var(--u)), 7.6vw);
  }

  .fm__h em {
    font-size: min(calc(96 * var(--u)), 8.2vw);
  }

  .fm__r {
    gap: 28px;
  }

  .fm__btn,
  .sc__btn {
    height: 60px;
    gap: 24px;
    padding: 0 8px 0 28px;
    font-size: 17px;
  }

  .fm__btn .btn__dot,
  .sc__btn .btn__dot {
    width: 44px;
    height: 44px;
  }

  .fm__f {
    height: auto;
    gap: 28px;
    padding: 28px var(--gut) 32px;
  }

  .fm__sign {
    font-size: 20px;
  }

  /* No hover on touch screens: show the finished state */
  .fm__v {
    font-size: min(calc(170 * var(--u)), 5vw);
    transform: none;
  }

  .fm__d {
    opacity: 1;
  }

  /* 02 Expertise: the stage on top, the tiles below it */
  .bx {
    gap: 40px;
    padding: 72px var(--gut) 64px;
  }

  .bx__right {
    gap: 24px;
  }

  .bx__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 16px;
  }

  .bx__stages,
  .bx__tiles {
    grid-column: auto;
    grid-row: auto;
  }

  .bx__stage {
    position: relative;
    inset: auto;
    gap: 40px;
    padding: 32px 28px;
  }

  .bx__big {
    right: -20px;
    top: -60px;
    font-size: 320px;
  }

  .bx__t {
    font-size: min(calc(118 * var(--u)), 10vw);
  }

  .bx__t em {
    font-size: min(calc(130 * var(--u)), 11vw);
  }

  .bx__d {
    min-height: 0;
    font-size: 16px;
  }

  .bx__s {
    padding: 12px 0;
    font-size: 15px;
  }

  .bx__dot {
    width: 8px;
    height: 8px;
  }

  .bx__go,
  .fx__go {
    height: 56px;
    gap: 20px;
    padding: 0 8px 0 24px;
    font-size: 16px;
  }

  .bx__goa,
  .fx__goa {
    width: 40px;
    height: 40px;
  }

  .bx__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 12px;
  }

  .bx__tile {
    min-height: 168px;
    gap: 28px;
    padding: 18px 20px;
  }

  .bx__num {
    font-size: 150px;
    bottom: -36px;
  }

  .bx__box {
    width: 36px;
    height: 36px;
    font-size: 17px;
  }

  .bx__tt {
    font-size: 22px;
  }

  /* 03 How we work: every step open, the active one marked in lime */
  .nm {
    padding-top: 72px;
  }

  .nm .shead {
    padding-bottom: 40px;
  }

  .nm__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nm__s:nth-child(odd) {
    border-left: 0;
  }

  .nm__s:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .nm__s {
    height: auto;
    gap: 24px;
    padding: 24px var(--gut) 32px;
  }

  .nm__box {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .nm__n,
  .nm__s.is-on .nm__n {
    position: static;
    font-size: 140px;
    transform: none;
  }

  .nm__txt {
    gap: 18px;
    transform: none;
  }

  .nm__t {
    font-size: 30px;
  }

  .nm__d {
    min-height: 0;
    font-size: 16px;
  }

  .nm__d,
  .nm__gets {
    opacity: 1;
  }

  .nm__gets li {
    padding: 12px 0;
  }

  /* 05 People: two portraits a row; a tap opens the card */
  .pt {
    gap: 40px;
    padding: 72px var(--gut) 64px;
  }

  .pt__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pt__c:nth-child(odd) {
    border-left: 0;
  }

  .pt__c:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .pt__no {
    top: 4px;
    right: 16px;
    font-size: 72px;
  }

  .pt__plate {
    gap: 6px;
    padding: 16px 18px;
  }

  .pt__name {
    font-size: 20px;
  }

  .pt__panel {
    padding: 22px 20px;
  }

  .pt__mid {
    gap: 14px;
  }

  .pt__pn {
    font-size: 26px;
  }

  .pt__bio {
    font-size: 15px;
  }

  .pt__acts a {
    height: 46px;
  }

  /* 06 Clients: the quote on top, the tiles below */
  .qw {
    gap: 40px;
    padding: 72px var(--gut) 64px;
  }

  .qw__stat {
    padding: 14px 20px;
  }

  .qw__sv {
    font-size: 30px;
  }

  .qw__sv small {
    font-size: 17px;
  }

  .qw__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 16px;
  }

  .qw__stages,
  .qw__tiles {
    grid-column: auto;
    grid-row: auto;
  }

  .qw__stage {
    position: relative;
    inset: auto;
    gap: 32px;
    padding: 32px 28px;
  }

  .qw__mark {
    right: -10px;
    top: -60px;
    font-size: 360px;
  }

  .qw__q,
  .qw__q--long {
    font-size: min(calc(78 * var(--u)), 6vw);
  }

  .qw__by {
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 20px;
  }

  .qw__av {
    width: 56px;
    height: 56px;
  }

  .qw__n {
    font-size: 19px;
  }

  .qw__case {
    height: 52px;
    gap: 16px;
    padding: 0 8px 0 22px;
    font-size: 16px;
  }

  .qw__ca {
    width: 36px;
    height: 36px;
  }

  .qw__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 12px;
  }

  .qw__tile {
    min-height: 200px;
    gap: 18px;
    padding: 18px 20px;
  }

  .qw__box {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .qw__short {
    font-size: 19px;
  }

  .qw__tile--bold .qw__short {
    font-size: 20px;
  }

  .qw__ring {
    width: 28px;
    height: 28px;
  }
}

/* 25. Home 2: phone (below 600px) */
@media (max-width: 599.98px) {
  .fm__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .fm__f + .fm__f {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .fm__v {
    font-size: 52px;
  }

  .bx__right {
    flex-wrap: wrap;
  }

  .bx__svc {
    grid-template-columns: minmax(0, 1fr);
  }

  .bx__tiles,
  .qw__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bx__tile {
    min-height: 150px;
    padding: 16px;
  }

  .bx__tt {
    font-size: clamp(14px, 4.4vw, 17px);
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .nm__row,
  .pt__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nm__s + .nm__s,
  .pt__c + .pt__c {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .nm__n,
  .nm__s.is-on .nm__n {
    font-size: 110px;
  }

  .pt__c {
    aspect-ratio: 4 / 4.6;
  }

  .qw__stats {
    flex-wrap: wrap;
  }

  .qw__stat.qw__stat--hint {
    flex-basis: 100%;
    border-left: 0;
    border-top: 2px solid var(--ink);
  }

  .qw__q,
  .qw__q--long {
    font-size: 26px;
  }

  .qw__case {
    width: 100%;
    justify-content: space-between;
  }

  .qw__tile {
    min-height: 0;
    padding: 16px;
  }

  .qw__short,
  .qw__tile--bold .qw__short {
    font-size: clamp(14px, 4.4vw, 17px);
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

/* 26. Home 3: page tokens. The page edge (top bar, hero, footer) is a warmer white than the sections. */
.p-home3 {
  --bg: #f8f6f2;
  --hero: url("../images/home3.webp");
  --photo: url("../images/home3-photo.webp");
}

.p-home3 main {
  --bg: #fcfbf8;
  background: var(--bg);
}

html[data-theme="dark"] .p-home3,
html[data-theme="dark"] .p-home3 main {
  --bg: #131313;
}

html[data-theme="dark"] .p-home3 {
  --hero: url("../images/home3-dark.webp");
  --photo: url("../images/home3-dark-photo.webp");
}

/* 27. Home 3: 02 Expertise, flip bento */
.fx,
.ak {
  display: flex;
  flex-direction: column;
  gap: calc(90 * var(--u));
  padding: calc(170 * var(--u)) var(--gut) calc(160 * var(--u));
  border-bottom: 1px solid var(--line);
}

.fx__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, calc(320 * var(--u)));
  gap: calc(24 * var(--u));
}

.fx__feat {
  display: flex;
  grid-column: span 2;
  grid-row: span 3;
}

.fx__fa {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(56 * var(--u));
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #1c1d1d 0 calc(14 * var(--u)), #141515 calc(14 * var(--u)) calc(28 * var(--u)));
  color: var(--night-text);
}

.fx__top {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.fx__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
}

.fx__t {
  font-family: var(--display);
  font-size: calc(150 * var(--u));
  line-height: .88;
  letter-spacing: -.05em;
}

.fx__t em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(164 * var(--u));
  letter-spacing: -.02em;
  color: var(--lime);
}

/* The featured photo is cropped from its top edge */
.fx__ph img {
  object-position: 50% 0;
}

.fx__d {
  max-width: calc(860 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: 1.45;
  color: var(--night-soft);
}

.fx__cell {
  display: flex;
}

.fx__cell--wide {
  grid-column: span 2;
}

.fx__tile {
  position: relative;
  flex: 1;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  transition: background-color .35s, color .35s;
}

.fx__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(40 * var(--u)) calc(44 * var(--u));
  transition: transform .5s var(--expand);
}

.fx__back {
  transform: translateY(100%);
}

.fx__row {
  display: flex;
  justify-content: space-between;
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.fx__plus {
  font-size: calc(36 * var(--u));
  line-height: .7;
  letter-spacing: 0;
}

.fx__arr {
  font-size: calc(32 * var(--u));
  line-height: .7;
  letter-spacing: 0;
}

.fx__fb {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
}

.fx__tt {
  font-family: var(--display);
  font-size: calc(60 * var(--u));
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.fx__td {
  font-size: max(13px, calc(23 * var(--u)));
  line-height: 1.4;
  color: var(--ink2);
}

.fx__svc {
  display: flex;
  flex-direction: column;
}

.fx__s {
  display: flex;
  justify-content: space-between;
  padding: calc(14 * var(--u)) 0;
  border-top: 1.5px solid currentColor;
  font-size: calc(26 * var(--u));
}

.fx__tile:hover,
.fx__tile:focus-visible {
  background: var(--lime);
  color: var(--black);
}

.fx__tile:hover .fx__front,
.fx__tile:focus-visible .fx__front {
  transform: translateY(-100%);
}

.fx__tile:hover .fx__back,
.fx__tile:focus-visible .fx__back {
  transform: none;
}

/* 28. Home 3: 03 How we work, staircase */
.sc {
  display: flex;
  flex-direction: column;
  gap: calc(90 * var(--u));
  padding: calc(170 * var(--u)) var(--gut);
  border-bottom: 2px solid var(--ink);
}

.sc__row {
  display: grid;
  grid-template-columns: calc(200 * var(--u)) minmax(0, 1fr) calc(560 * var(--u));
  gap: calc(56 * var(--u));
  align-items: center;
  padding: calc(44 * var(--u)) 0 calc(44 * var(--u)) calc(44 * var(--u));
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}

.sc__row:nth-child(2) {
  margin-left: calc(260 * var(--u));
}

.sc__row:nth-child(3) {
  margin-left: calc(520 * var(--u));
}

.sc__row:nth-child(4) {
  margin-left: calc(780 * var(--u));
}

.sc__row:last-child,
.sc__row:hover {
  background: var(--lime);
  color: var(--black);
}

.sc__n {
  font-family: var(--display);
  font-size: calc(150 * var(--u));
  line-height: .8;
  letter-spacing: -.06em;
}

.sc__h {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  font-weight: 400;
}

.sc__when {
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.sc__t {
  font-family: var(--display);
  font-size: calc(72 * var(--u));
  line-height: .95;
  letter-spacing: -.04em;
}

.sc__d {
  padding-right: var(--gut);
  font-size: max(14px, calc(25 * var(--u)));
  line-height: 1.45;
  color: var(--ink2);
}

.sc__row:last-child .sc__d,
.sc__row:hover .sc__d {
  color: var(--black);
}

/* 29. Home 3: 05 People, staggered grid. Hover or focus lifts the portrait off a lime frame and opens the quote. */
.lw {
  display: flex;
  flex-direction: column;
  gap: calc(110 * var(--u));
  padding: calc(170 * var(--u)) var(--gut) calc(200 * var(--u));
  border-bottom: 1px solid var(--line);
}

.lw__right {
  display: flex;
  align-items: flex-end;
  gap: calc(60 * var(--u));
}

.lw__intro {
  max-width: calc(620 * var(--u));
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.45;
  color: var(--ink2);
  text-align: right;
  white-space: normal;
}

.lw__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(56 * var(--u));
  align-items: start;
}

.lw__c:nth-child(even) {
  margin-top: calc(160 * var(--u));
}

.lw__a {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}

.lw__pic {
  position: relative;
}

.lw__frame {
  position: absolute;
  inset: 0;
  border: 2px solid var(--black);
  background: var(--lime);
}

.lw__frame,
.lw__photo {
  transition: transform .45s var(--rise);
}

.lw__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(24 * var(--u));
  overflow: hidden;
  border: 2px solid var(--ink);
  background: repeating-linear-gradient(135deg, var(--hover) 0 calc(14 * var(--u)), var(--bg) calc(14 * var(--u)) calc(28 * var(--u)));
}

.lw__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.lw__top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.lw__chip {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  background: var(--black);
  color: var(--lime);
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .24em;
  transition: background-color .3s, color .3s;
}

.lw__no {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(180 * var(--u));
  line-height: .7;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink3);
}

.lw__size {
  position: absolute;
  left: calc(24 * var(--u));
  bottom: calc(24 * var(--u));
  font-family: var(--mono);
  font-size: max(11px, calc(20 * var(--u)));
  color: var(--ink2);
}

.lw__head {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}

.lw__nr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(20 * var(--u));
}

.lw__name {
  position: relative;
  font-family: var(--display);
  font-size: calc(46 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.lw__ul {
  position: absolute;
  left: 0;
  bottom: calc(-8 * var(--u));
  width: 0;
  height: calc(6 * var(--u));
  background: var(--lime);
  transition: width .45s var(--expand);
}

.lw__arr {
  flex: none;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  font-size: calc(24 * var(--u));
  transition: background-color .3s, color .3s;
}

.lw__role {
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .22em;
  color: var(--ink3);
}

.lw__drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--expand);
}

.lw__di {
  min-height: 0;
  overflow: hidden;
}

.lw__dc {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  padding-top: calc(24 * var(--u));
  border-top: 2px solid var(--ink);
}

.lw__q {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(36 * var(--u));
  line-height: 1.2;
}

.lw__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
}

.lw__chips span {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .18em;
}

.lw__a:hover .lw__frame,
.lw__a:focus-visible .lw__frame {
  transform: translate(calc(18 * var(--u)), calc(18 * var(--u)));
}

.lw__a:hover .lw__photo,
.lw__a:focus-visible .lw__photo {
  transform: translate(calc(-10 * var(--u)), calc(-10 * var(--u)));
}

.lw__a:hover .lw__chip,
.lw__a:focus-visible .lw__chip {
  background: var(--lime);
  color: var(--black);
}

.lw__a:hover .lw__ul,
.lw__a:focus-visible .lw__ul {
  width: 100%;
}

.lw__a:hover .lw__arr,
.lw__a:focus-visible .lw__arr {
  background: var(--lime);
  color: var(--black);
}

.lw__a:hover .lw__drawer,
.lw__a:focus-visible .lw__drawer {
  grid-template-rows: 1fr;
}

/* 30. Home 3: 07 Insights, ask us anything */
.ak {
  gap: calc(80 * var(--u));
}

.ak__ask {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
}

.ak__bar {
  display: flex;
  height: calc(150 * var(--u));
  border: 2px solid var(--ink);
}

.ak__bar:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.ak__field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 calc(48 * var(--u));
}

.ak__in {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  caret-color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(60 * var(--u));
  -webkit-appearance: none;
  appearance: none;
}

.ak__in::-webkit-search-cancel-button {
  display: none;
}

/* A resting text cursor after the question, placed by main.js; the real caret takes over on focus */
.ak__caret {
  position: absolute;
  top: 50%;
  left: var(--caret-x, calc(48 * var(--u)));
  width: 3px;
  height: calc(64 * var(--u));
  margin-top: calc(-32 * var(--u));
  background: var(--ink);
}

.ak__in:focus + .ak__caret,
.ak__caret[hidden] {
  display: none;
}

.ak__go {
  flex: none;
  width: calc(300 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(44 * var(--u));
  background: var(--inv);
  color: var(--accent-txt);
  font-size: calc(28 * var(--u));
  transition: background-color .2s;
}

.ak__go:hover {
  background: var(--inv-hover);
}

.ak__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--u));
}

/* Chips grow to share the full row, so it ends flush with the search bar */
.ak__chip {
  flex: 1 1 auto;
  text-align: center;
  padding: calc(16 * var(--u)) calc(26 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(13px, calc(22 * var(--u)));
  transition: background-color .2s;
}

.ak__chip:hover {
  background: var(--hover);
}

.ak__chip[aria-pressed="true"] {
  border-color: var(--black);
  background: var(--lime);
  color: var(--black);
}

.ak__res {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(40 * var(--u));
  padding-top: calc(56 * var(--u));
  border-top: 2px solid var(--ink);
}

.ak__card {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}

.ak__meta {
  display: flex;
  justify-content: space-between;
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .24em;
}

.ak__tag {
  padding: calc(6 * var(--u)) calc(12 * var(--u));
}

.ak__tag.is-best {
  background: var(--lime);
  color: var(--black);
}

.ak__rt {
  color: var(--ink3);
}

.ak__t {
  font-family: var(--display);
  font-size: calc(52 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.ak__ex {
  font-size: max(14px, calc(24 * var(--u)));
  line-height: 1.45;
  color: var(--ink2);
}

.ak__read {
  align-self: flex-start;
  padding-bottom: calc(6 * var(--u));
  border-bottom: 2px solid var(--ink);
  font-size: max(12px, calc(20 * var(--u)));
  letter-spacing: .22em;
}

.ak__card:hover .ak__read {
  border-color: var(--lime);
}

/* 31. Home 3: tablet and phone (below 1200px) */
@media (max-width: 1199.98px) {
  .fx,
  .ak {
    gap: 40px;
    padding: 72px var(--gut) 64px;
  }

  .fx__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 12px;
  }

  .fx__fa {
    min-height: 460px;
    gap: 40px;
    padding: 32px 28px;
  }

  .fx__t {
    font-size: min(calc(150 * var(--u)), 12vw);
  }

  .fx__t em {
    font-size: min(calc(164 * var(--u)), 13vw);
  }

  .fx__d {
    font-size: 16px;
  }

  /* No hover on touch screens: both faces stay visible, one under the other */
  .fx__face,
  .fx__back,
  .fx__tile:hover .fx__front,
  .fx__tile:hover .fx__back {
    position: static;
    transform: none;
  }

  .fx__tile {
    display: flex;
    flex-direction: column;
  }

  .fx__face {
    gap: 24px;
    padding: 20px 22px;
  }

  .fx__back {
    flex: 1;
    gap: 14px;
    padding-top: 0;
  }

  .fx__back .fx__row {
    display: none;
  }

  .fx__plus {
    font-size: 26px;
  }

  .fx__tt {
    font-size: 24px;
  }

  .fx__s {
    padding: 10px 0;
    border-top-width: 1px;
    font-size: 15px;
  }

  .sc {
    gap: 40px;
    padding: 72px var(--gut) 64px;
  }

  .sc__row,
  .sc__row:nth-child(n) {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 24px;
    margin-left: calc(var(--i, 0) * 4vw);
    padding: 24px 0 24px 22px;
  }

  .sc__row:nth-child(2) {
    --i: 1;
  }

  .sc__row:nth-child(3) {
    --i: 2;
  }

  .sc__row:nth-child(4) {
    --i: 3;
  }

  .sc__n {
    font-size: 56px;
  }

  .sc__t {
    font-size: min(calc(72 * var(--u)), 6vw);
  }

  .sc__d {
    grid-column: 2;
    padding-right: var(--gut);
  }

  /* People: two a row, no stagger; the quote is always open since touch has no hover */
  .lw {
    gap: 40px;
    padding: 72px var(--gut) 72px;
  }

  .lw__right {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .lw__intro {
    text-align: left;
  }

  .lw__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .lw__c:nth-child(even) {
    margin-top: 0;
  }

  .lw__a {
    gap: 18px;
  }

  .lw__no {
    font-size: 90px;
  }

  .lw__name {
    font-size: 24px;
  }

  .lw__arr {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .lw__drawer {
    grid-template-rows: 1fr;
  }

  .lw__dc {
    gap: 14px;
    padding-top: 16px;
  }

  .lw__q {
    font-size: 19px;
  }

  .ak__bar {
    height: auto;
    min-height: 72px;
  }

  .ak__field {
    padding: 0 18px;
  }

  .ak__in {
    font-size: 22px;
  }

  .ak__caret {
    height: 26px;
    margin-top: -13px;
  }

  .ak__go {
    width: auto;
    gap: 16px;
    padding: 0 20px;
    font-size: 16px;
  }

  .ak__res {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 32px;
  }

  .ak__t {
    font-size: min(calc(52 * var(--u)), 6vw);
  }
}

/* 32. Home 3: phone (below 600px) */
@media (max-width: 599.98px) {
  .fx__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fx__feat,
  .fx__cell--wide {
    grid-column: auto;
  }

  .sc__row,
  .sc__row:nth-child(n) {
    grid-template-columns: minmax(0, 1fr);
    margin-left: calc(var(--i, 0) * 12px);
  }

  .sc__d {
    grid-column: auto;
  }

  .lw__grid {
    gap: 32px 14px;
  }

  .lw__name {
    font-size: 17px;
  }

  .lw__nr {
    align-items: center;
    gap: 8px;
  }

  .lw__arr {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .lw__no {
    font-size: 60px;
  }

  .lw__q {
    font-size: 16px;
  }

  .lw__chips span {
    padding: 6px 8px;
    letter-spacing: .1em;
  }

  .ak__bar {
    flex-direction: column;
  }

  .ak__field {
    min-height: 72px;
  }

  .ak__go {
    height: 52px;
  }

  .ak__chip {
    text-align: left;
  }
}

/* 33. Inner page header (Template) */
.pgh,
.po {
  position: relative;
  padding-top: calc(124 * var(--u));
  background: var(--bg);
}

.pgh__band {
  height: calc(400 * var(--u));
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(340 * var(--u)) calc(340 * var(--u)) calc(300 * var(--u));
  border-bottom: 2px solid var(--ink);
}

/* Current page in the top bar: its own cell, or the menu (Home / Pages) whose list holds it */
.tb__item[aria-current],
.tb__item.is-current {
  background: var(--inv);
  color: var(--on-inv);
}

.tb__item[aria-current] .tb__n,
.tb__item.is-current .tb__n {
  color: var(--accent-txt);
}

.pgh__title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: calc(10 * var(--u)) var(--gut) calc(56 * var(--u));
}

.pgh__crumbs ol {
  display: flex;
  gap: calc(18 * var(--u));
  padding: 0;
  list-style: none;
  font-size: max(11px, calc(18 * var(--u)));
  line-height: 1;
  letter-spacing: .24em;
}

.pgh__crumbs li {
  display: flex;
  gap: calc(18 * var(--u));
}

.pgh__crumbs li + li::before {
  content: "/";
  color: var(--ink3);
}

.pgh__crumbs a {
  color: var(--ink3);
  transition: color .2s;
}

.pgh__crumbs a:hover {
  color: var(--ink);
}

.pgh__main {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

.pgh__h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(156 * var(--u));
  line-height: .86;
  letter-spacing: -.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pgh__h1 em {
  display: inline-block;
  padding: 0 calc(16 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-family: var(--serif);
  font-size: calc(168 * var(--u));
  font-style: italic;
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: none;
}

.pgh__eye {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.pgh__sq {
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  background: var(--lime);
}

.pgh__div {
  flex: none;
  width: 2px;
  height: calc(20 * var(--u));
  margin: 0 calc(6 * var(--u));
  background: var(--line);
}

.pgh__lede {
  font-size: max(14px, calc(24 * var(--u)));
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink2);
}

.pgh__read,
.pgh__face,
.pgh__back {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(40 * var(--u));
}

.pgh__read,
.pgh__rel {
  border-left: 1px solid var(--line);
}

.pgh__lbl,
.pgh__k {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.pgh__min {
  font-family: var(--display);
  font-size: calc(88 * var(--u));
  line-height: .9;
  letter-spacing: -.04em;
}

.pgh__min em {
  font-family: var(--serif);
  font-size: calc(56 * var(--u));
  letter-spacing: 0;
}

.pgh__meter {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
}

.pgh__meter .pgh__lbl {
  letter-spacing: .22em;
}

.pgh__bars {
  display: flex;
  gap: calc(6 * var(--u));
}

.pgh__bar {
  flex: 1;
  height: calc(10 * var(--u));
  background: var(--line);
}

.pgh__bar.is-on {
  background: var(--ink);
}

.pgh__rel {
  position: relative;
  overflow: hidden;
}

.pgh__face,
.pgh__back {
  position: absolute;
  inset: 0;
  transition: transform .5s var(--expand);
}

.pgh__k {
  display: flex;
  justify-content: space-between;
}

.pgh__t {
  font-family: var(--display);
  font-size: calc(36 * var(--u));
  line-height: .95;
  letter-spacing: -.04em;
}

.pgh__s {
  display: flex;
  justify-content: space-between;
  font-size: max(13px, calc(22 * var(--u)));
}

.pgh__back {
  transform: translateY(100%);
  background: var(--lime);
  color: var(--black);
}

.pgh__rel + .pgh__rel .pgh__back {
  background: var(--black);
  color: var(--lime);
}

.pgh__back .pgh__k {
  color: inherit;
}

.pgh__d {
  font-size: max(14px, calc(26 * var(--u)));
  line-height: 1.4;
}

.pgh__open {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(14px, calc(24 * var(--u)));
}

.pgh__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 50%;
  background: var(--black);
  color: var(--lime);
  font-size: calc(28 * var(--u));
}

.pgh__rel + .pgh__rel .pgh__dot {
  background: var(--lime);
  color: var(--black);
}

.pgh__rel:hover .pgh__face,
.pgh__rel:focus-visible .pgh__face {
  transform: translateY(-100%);
}

.pgh__rel:hover .pgh__back,
.pgh__rel:focus-visible .pgh__back {
  transform: none;
}

.p-about main {
  padding-bottom: calc(170 * var(--u));
}

/* 34. About: 01 Story, then / now */
.st,
.ap,
.ms,
.mz,
.dc {
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--u));
  padding: calc(170 * var(--u)) var(--gut) calc(160 * var(--u));
  border-bottom: 1px solid var(--line);
}

.st__switch {
  display: flex;
  border: 2px solid var(--ink);
}

.st__tab {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(26 * var(--u)) calc(48 * var(--u));
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.st__tab + .st__tab {
  border-left: 2px solid var(--ink);
}

.st__tab:hover {
  background: var(--hover);
}

.st__tab[aria-pressed="true"] {
  background: var(--inv);
  color: var(--accent-txt);
}

.st__ty {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  opacity: .7;
}

.st__tl {
  font-family: var(--display);
  font-size: calc(44 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.st__body {
  display: grid;
  grid-template-columns: calc(1100 * var(--u)) minmax(0, 1fr);
  gap: calc(120 * var(--u));
  padding-top: calc(70 * var(--u));
  border-top: 2px solid var(--ink);
}

.st__body[hidden] {
  display: none;
}

.st__img {
  position: relative;
  height: calc(820 * var(--u));
  padding: calc(22 * var(--u));
}

.st__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.st__year {
  position: absolute;
  z-index: 1;
  top: -2px;
  left: -2px;
  padding: calc(14 * var(--u)) calc(26 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-family: var(--display);
  font-size: calc(64 * var(--u));
  letter-spacing: -.03em;
}

.st__txt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(50 * var(--u));
}

.st__head {
  font-family: var(--display);
  font-size: calc(76 * var(--u));
  line-height: 1.02;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.st__p {
  font-size: max(16px, calc(30 * var(--u)));
  line-height: 1.55;
  color: var(--ink2);
}

.st__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}

.st__f,
.ap__f {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.st__f {
  gap: calc(10 * var(--u));
  padding-top: calc(28 * var(--u));
}

.st__f + .st__f {
  padding-left: calc(40 * var(--u));
  border-left: 1px solid var(--line);
}

.st__f dd {
  font-family: var(--display);
  font-size: calc(72 * var(--u));
  line-height: .9;
  letter-spacing: -.04em;
}

.st__f dt,
.ap__f dt {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

/* 35. About: 02 Approach */
.ap,
.ms {
  gap: calc(90 * var(--u));
}

.ap__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 calc(-1 * var(--gut));
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.ap__c {
  min-height: calc(520 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(48 * var(--u)) calc(56 * var(--u)) calc(56 * var(--u)) calc(48 * var(--u));
  transition: background-color .2s, color .2s;
}

.ap__c:first-child {
  padding-left: var(--gut);
}

.ap__c + .ap__c {
  border-left: 1px solid var(--line);
}

.ap__c:hover {
  background: var(--lime);
  color: var(--black);
}

.ap__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: calc(36 * var(--u));
}

.ap__n {
  font-family: var(--serif);
  font-size: calc(120 * var(--u));
  font-style: italic;
  line-height: .8;
}

.ap__b {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}

.ap__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(52 * var(--u));
  line-height: .95;
  letter-spacing: -.035em;
}

.ap__d {
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.45;
  opacity: .8;
}

.ap__figs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ap__f {
  gap: calc(14 * var(--u));
}

.ap__f + .ap__f {
  padding-left: calc(48 * var(--u));
  border-left: 1px solid var(--line);
}

.ap__f dd {
  font-family: var(--display);
  font-size: calc(150 * var(--u));
  line-height: .85;
  letter-spacing: -.055em;
}

.ap__f dt {
  font-size: max(11px, calc(17 * var(--u)));
}

/* 36. About: 03 Milestones */
.ms__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(40 * var(--u));
  padding: 0;
  list-style: none;
}

.ms__list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(118 * var(--u));
  height: 2px;
  background: var(--ink);
}

.ms__i {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
}

.ms__y {
  font-family: var(--display);
  font-size: calc(84 * var(--u));
  line-height: 1;
  letter-spacing: -.04em;
}

.ms__m {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  background: var(--bg);
  border: 3px solid var(--ink);
}

.ms__i:last-child .ms__m {
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  margin-top: calc(-6 * var(--u));
  background: var(--lime);
}

.ms__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(40 * var(--u));
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.ms__d {
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.45;
  color: var(--ink2);
}

/* 37. About: 04 People, living mosaic */
.mz__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, calc(400 * var(--u)));
  gap: calc(20 * var(--u));
  padding: 0;
  list-style: none;
}

.mz__p:nth-child(1) { grid-area: 1 / 1 / span 3 / span 2; }
.mz__p:nth-child(2) { grid-area: 1 / 3 / auto / span 2; }
.mz__p:nth-child(3) { grid-area: 1 / 5; }
.mz__p:nth-child(4) { grid-area: 1 / 6 / span 2; }
.mz__p:nth-child(5) { grid-area: 2 / 4 / auto / span 2; }
.mz__p:nth-child(6) { grid-area: 3 / 3; }
.mz__p:nth-child(7) { grid-area: 3 / 4; }
.mz__p:nth-child(8) { grid-area: 3 / 5; }
.mz__stats { grid-area: 2 / 3; }
.mz__job { grid-area: 3 / 6; }

.mz__a {
  position: relative;
  height: 100%;
  display: block;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--hover);
}

.mz__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.mz__no {
  position: absolute;
  top: calc(8 * var(--u));
  right: calc(18 * var(--u));
  font-family: var(--serif);
  font-size: calc(150 * var(--u));
  font-style: italic;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--stroke);
}

.mz__p--f .mz__no {
  font-size: calc(260 * var(--u));
}

.mz__q {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(118 * var(--u));
  padding: calc(160 * var(--u)) calc(28 * var(--u)) calc(40 * var(--u));
  background: linear-gradient(to top, #0e0e0ecc, #0e0e0e00);
  color: #fcfbf8;
  font-family: var(--serif);
  font-size: calc(64 * var(--u));
  font-style: italic;
  line-height: 1.1;
}

.mz__plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(12 * var(--u));
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  background: var(--bg);
  border-top: 2px solid var(--ink);
  font-size: calc(24 * var(--u));
}

.mz__who {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  min-width: 0;
}

.mz__name {
  font-family: var(--display);
  font-size: calc(26 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.mz__p--w .mz__name {
  font-size: calc(34 * var(--u));
}

.mz__p--f .mz__name {
  font-size: calc(52 * var(--u));
}

.mz__role {
  font-size: max(10px, calc(14 * var(--u)));
  letter-spacing: .22em;
  color: var(--ink3);
  white-space: nowrap;
}

.mz__dim {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}

.mz__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  padding: calc(24 * var(--u)) calc(26 * var(--u));
  background: var(--lime);
  color: var(--black);
  border-top: 2px solid var(--black);
  transform: translateY(101%);
  transition: transform .5s var(--expand);
}

.mz__pr {
  display: flex;
  justify-content: space-between;
  font-size: max(10px, calc(14 * var(--u)));
  letter-spacing: .22em;
}

.mz__pn {
  font-family: var(--display);
  font-size: calc(32 * var(--u));
  line-height: .95;
  letter-spacing: -.035em;
}

.mz__p--w .mz__pn {
  font-size: calc(44 * var(--u));
}

.mz__p--f .mz__pn {
  font-size: calc(72 * var(--u));
}

.mz__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
}

.mz__chips span {
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border: 1.5px solid var(--black);
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .16em;
}

.mz__grid.is-focus .mz__p:not(.is-on) .mz__dim {
  opacity: .55;
}

.mz__p.is-on .mz__panel,
.mz__a:focus-visible .mz__panel,
html:not(.js) .mz__a:hover .mz__panel {
  transform: none;
}

.mz__stats {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(28 * var(--u));
  background: var(--black);
  color: #fcfbf8;
}

.mz__sl {
  font-size: max(10px, calc(14 * var(--u)));
  letter-spacing: .24em;
  color: var(--lime);
}

.mz__sv {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.mz__big {
  font-family: var(--display);
  font-size: calc(96 * var(--u));
  line-height: .85;
  letter-spacing: -.05em;
}

.mz__sub {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .22em;
  color: #a9a69e;
}

.mz__sr {
  display: flex;
  justify-content: space-between;
  padding-top: calc(14 * var(--u));
  border-top: 1px solid #fcfbf833;
  font-size: max(12px, calc(20 * var(--u)));
}

.mz__ja {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(26 * var(--u));
  background: var(--lime);
  color: var(--black);
  border: 2px solid var(--black);
  transition: background-color .2s, color .2s;
}

.mz__ja:hover,
.mz__ja:focus-visible {
  background: var(--black);
  color: var(--lime);
}

.mz__jl {
  font-size: max(10px, calc(14 * var(--u)));
  letter-spacing: .24em;
}

.mz__jt {
  font-family: var(--display);
  font-size: calc(46 * var(--u));
  line-height: .92;
  letter-spacing: -.035em;
}

.mz__jr {
  display: flex;
  justify-content: space-between;
  font-size: max(12px, calc(20 * var(--u)));
}

/* 38. About: 05 Why us, proof cards */
.dc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(28 * var(--u));
  padding: 0;
  list-style: none;
}

.dc__c {
  position: relative;
  height: calc(640 * var(--u));
  display: block;
  overflow: hidden;
  border: 2px solid var(--ink);
}

.dc__face,
.dc__back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(40 * var(--u));
  transition: transform .55s var(--expand);
}

.dc__face {
  background: var(--bg);
  color: var(--ink);
}

.dc__c--inv .dc__face {
  background: var(--inv);
  color: var(--accent-txt);
}

.dc__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
}

.dc__plus {
  font-size: calc(30 * var(--u));
  letter-spacing: 0;
}

.dc__v {
  font-family: var(--display);
  font-size: calc(200 * var(--u));
  line-height: .8;
  letter-spacing: -.06em;
}

.dc__l {
  font-size: max(14px, calc(24 * var(--u)));
  line-height: 1.35;
}

.dc__back {
  transform: translateY(100%);
  background: var(--lime);
  color: var(--black);
}

.dc__ans {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}

.dc__them {
  font-size: max(13px, calc(22 * var(--u)));
  color: #4a4740;
}

.dc__us {
  font-family: var(--serif);
  font-size: calc(46 * var(--u));
  font-style: italic;
  line-height: 1.15;
}

.dc__more {
  display: flex;
  justify-content: space-between;
  padding-top: calc(18 * var(--u));
  border-top: 2px solid var(--black);
  font-size: max(12px, calc(20 * var(--u)));
}

.dc__c:hover .dc__face,
.dc__c:focus-visible .dc__face {
  transform: translateY(-100%);
}

.dc__c:hover .dc__back,
.dc__c:focus-visible .dc__back {
  transform: none;
}

/* 39. About: 06 Careers, lime band */
.jo {
  background: var(--lime);
  color: var(--black);
  border-top: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
}

.jo__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(80 * var(--u));
  padding: calc(150 * var(--u)) var(--gut) calc(100 * var(--u));
}

.jo .sq {
  background: var(--black);
}

.jo__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(170 * var(--u));
  line-height: .88;
  letter-spacing: -.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.jo__h em {
  font-family: var(--serif);
  font-size: calc(184 * var(--u));
  font-style: italic;
  letter-spacing: -.02em;
  text-transform: none;
}

.jo__btn {
  height: calc(110 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(48 * var(--u));
  padding: 0 calc(18 * var(--u)) 0 calc(48 * var(--u));
  background: var(--black);
  color: #fcfbf8;
  font-size: max(16px, calc(32 * var(--u)));
  white-space: nowrap;
  transition: background-color .2s;
}

.jo__btn:hover {
  background: #262626;
}

.jo__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(74 * var(--u));
  height: calc(74 * var(--u));
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
}

.jo__dot .ico {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

.jo__perks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--black);
}

.jo__p {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  padding: calc(44 * var(--u)) calc(48 * var(--u)) calc(52 * var(--u));
}

.jo__p:first-child {
  padding-left: var(--gut);
}

.jo__p:last-child {
  padding-right: var(--gut);
}

.jo__p + .jo__p {
  border-left: 2px solid var(--black);
}

.jo__n {
  font-family: var(--serif);
  font-size: calc(80 * var(--u));
  font-style: italic;
  line-height: .8;
}

.jo__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(40 * var(--u));
  letter-spacing: -.03em;
}

.jo__d {
  font-size: max(14px, calc(23 * var(--u)));
  line-height: 1.4;
}

/* 40. About: tablet and phone (below 1200px). Hover reveals are shown in the flow instead. */
@media (max-width: 1199.98px) {
  .pgh,
  .po {
    padding-top: 64px;
  }

  .pgh__band {
    height: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pgh__title {
    grid-column: 1 / -1;
    gap: 40px;
    padding: 20px var(--gut) 40px;
    border-bottom: 1px solid var(--line);
  }

  .pgh__crumbs ol {
    font-size: 11px;
  }

  .pgh__main {
    gap: 24px;
  }

  .pgh__h1 {
    font-size: min(72px, calc((100vw - 2 * var(--gut)) / 4.1));
    white-space: normal;
  }

  /* Longer words need a smaller title (divisor = letters × .7) */
  .pgh__h1--w6 {
    font-size: min(72px, calc((100vw - 2 * var(--gut)) / 4.2));
  }

  .pgh__h1--w7 {
    font-size: min(72px, calc((100vw - 2 * var(--gut)) / 4.9));
  }

  .pgh__h1--w8 {
    font-size: min(72px, calc((100vw - 2 * var(--gut)) / 5.6));
  }

  .pgh__h1--w9 {
    font-size: min(72px, calc((100vw - 2 * var(--gut)) / 6.3));
  }

  .pgh__h1--w10 {
    font-size: min(72px, calc((100vw - 2 * var(--gut)) / 7));
  }

  .pgh__h1 em {
    margin-top: .08em;
    font-size: min(78px, calc((100vw - 2 * var(--gut)) / 3.8));
  }

  .pgh__eye {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .pgh__sq {
    width: 12px;
    height: 12px;
  }

  .pgh__div {
    display: none;
  }

  .pgh__lede {
    flex-basis: 100%;
    font-size: 16px;
  }

  .pgh__read {
    border-left: 0;
  }

  .pgh__read,
  .pgh__face {
    min-height: 170px;
    gap: 16px;
    padding: 18px var(--gut) 22px;
  }

  .pgh__rel .pgh__face {
    position: static;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .pgh__back {
    display: none;
  }

  .pgh__rel:hover .pgh__face,
  .pgh__rel:focus-visible .pgh__face {
    transform: none;
    background: var(--hover);
  }

  .pgh__min {
    font-size: 44px;
  }

  .pgh__min em {
    font-size: 28px;
  }

  .pgh__bars {
    gap: 4px;
  }

  .pgh__bar {
    height: 6px;
  }

  .pgh__t {
    font-size: 22px;
  }

  .pgh__s {
    font-size: 14px;
  }

  .st,
  .ap,
  .ms,
  .mz,
  .dc {
    gap: 40px;
    padding: 72px var(--gut);
  }

  .st__tab {
    padding: 14px 26px;
  }

  .st__tl {
    font-size: 24px;
  }

  .st__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-top: 32px;
  }

  .st__img {
    height: auto;
    aspect-ratio: 1100 / 820;
  }

  .st__year {
    padding: 8px 14px;
    font-size: 30px;
  }

  .st__txt {
    gap: 24px;
  }

  .st__head {
    font-size: clamp(26px, 4.6vw, 40px);
  }

  .st__p {
    font-size: 17px;
  }

  .st__f {
    padding-top: 18px;
  }

  .st__f + .st__f {
    padding-left: 16px;
  }

  .st__f dd {
    font-size: clamp(30px, 6vw, 44px);
  }

  .ap__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ap__c,
  .ap__c:first-child {
    min-height: 0;
    gap: 40px;
    padding: 28px var(--gut) 32px;
  }

  .ap__c:nth-child(odd) {
    border-left: 0;
  }

  .ap__c:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .ap__top {
    font-size: 24px;
  }

  .ap__n {
    font-size: 64px;
  }

  .ap__b {
    gap: 12px;
  }

  .ap__t {
    font-size: 26px;
  }

  .ap__d {
    font-size: 16px;
  }

  .ap__figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 0;
  }

  .ap__f {
    gap: 8px;
  }

  .ap__f + .ap__f {
    padding-left: 24px;
  }

  .ap__f:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .ap__f dd {
    font-size: clamp(52px, 10vw, 80px);
  }

  .ms__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  /* the line runs from each marker to the next one and stops at TODAY */
  .ms__list::before {
    display: none;
  }

  .ms__i:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    bottom: -48px;
    width: 2px;
    background: var(--ink);
  }

  .ms__i {
    gap: 8px;
    padding-left: 44px;
  }

  .ms__y {
    font-size: 40px;
  }

  .ms__m,
  .ms__i:last-child .ms__m {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 12px;
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .ms__i:last-child .ms__m {
    left: -3px;
    top: 9px;
    width: 24px;
    height: 24px;
  }

  .ms__t {
    font-size: 22px;
  }

  .ms__d {
    font-size: 16px;
  }

  .mz .hint,
  .dc .hint {
    display: none;
  }

  .mz__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 12px;
  }

  .mz__grid > :nth-child(n) {
    grid-area: auto;
  }

  .mz__grid > .mz__p--f {
    grid-column: span 2;
    grid-row: span 2;
  }

  .mz__grid > .mz__job {
    grid-column: 1 / -1;
  }

  .mz__a {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .mz__p--f .mz__a {
    height: 100%;
    aspect-ratio: auto;
  }

  .mz__no {
    font-size: 64px;
  }

  .mz__p--f .mz__no {
    font-size: 110px;
  }

  .mz__q {
    bottom: 58px;
    padding: 60px 16px 16px;
    font-size: clamp(18px, 3.4vw, 28px);
  }

  .mz__plate {
    padding: 10px 12px;
    font-size: 16px;
  }

  .mz__who {
    gap: 4px;
  }

  .mz__name,
  .mz__p--w .mz__name {
    font-size: 15px;
    white-space: normal;
  }

  .mz__p--f .mz__name {
    font-size: 22px;
  }

  .mz__role {
    white-space: normal;
  }

  .mz__panel {
    display: none;
  }

  .mz__stats,
  .mz__ja {
    gap: 16px;
    padding: 18px;
  }

  .mz__big {
    font-size: 56px;
  }

  .mz__sr {
    font-size: 14px;
  }

  .mz__ja {
    min-height: 140px;
  }

  .mz__jt {
    font-size: 28px;
  }

  .mz__jr {
    font-size: 15px;
  }

  .dc__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .dc__c {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .dc__face,
  .dc__back,
  .dc__c:hover .dc__face,
  .dc__c:focus-visible .dc__face {
    position: static;
    gap: 24px;
    padding: 24px;
    transform: none;
  }

  .dc__face {
    min-height: 240px;
  }

  .dc__back {
    flex: 1;
    border-top: 2px solid var(--ink);
  }

  .dc__plus {
    display: none;
  }

  .dc__v {
    font-size: clamp(72px, 13vw, 110px);
  }

  .dc__l {
    font-size: 17px;
  }

  .dc__ans {
    gap: 12px;
  }

  .dc__them {
    font-size: 15px;
  }

  .dc__us {
    font-size: 24px;
  }

  .dc__more {
    padding-top: 14px;
    font-size: 15px;
  }

  .jo__top {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
    padding: 72px var(--gut) 48px;
  }

  .jo .shead__l {
    gap: 24px;
  }

  .jo__h {
    font-size: min(84px, calc((100vw - 2 * var(--gut)) / 4.6));
    white-space: normal;
  }

  .jo__h em {
    font-size: min(90px, calc((100vw - 2 * var(--gut)) / 4.2));
  }

  .jo__btn {
    height: 60px;
    gap: 24px;
    padding: 0 8px 0 28px;
    font-size: 17px;
  }

  .jo__dot {
    width: 44px;
    height: 44px;
  }

  .jo__dot .ico {
    width: 18px;
    height: 18px;
  }

  .jo__perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jo__p,
  .jo__p:first-child,
  .jo__p:last-child {
    gap: 10px;
    padding: 28px var(--gut) 32px;
  }

  .jo__p:nth-child(3) {
    border-left: 0;
  }

  .jo__p:nth-child(n + 3) {
    border-top: 2px solid var(--black);
  }

  .jo__n {
    font-size: 44px;
  }

  .jo__t {
    font-size: 22px;
  }

  .jo__d {
    font-size: 16px;
  }
}

/* 41. About: phone (below 600px) */
@media (max-width: 599.98px) {
  .pgh__band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pgh__read {
    grid-column: 1 / -1;
    min-height: 0;
    border-bottom: 1px solid var(--line);
  }

  .pgh__rel:first-of-type {
    border-left: 0;
  }

  .pgh__rel .pgh__face {
    min-height: 150px;
    padding-left: var(--gut);
  }

  .pgh__t {
    font-size: 19px;
  }

  .st .shead {
    flex-direction: column;
    align-items: flex-start;
  }

  .st__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .st__f + .st__f {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .st__f {
    padding-bottom: 14px;
  }

  .ap__grid,
  .dc__grid,
  .jo__perks {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap__c + .ap__c {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .mz__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mz__p--f .mz__a {
    aspect-ratio: 4 / 5;
  }

  .mz__grid > .mz__p--f {
    grid-row: auto;
  }

  .mz__name,
  .mz__p--w .mz__name {
    font-size: 13px;
  }

  .mz__role {
    font-size: 9px;
    letter-spacing: .16em;
  }

  .jo__p + .jo__p {
    border-left: 0;
    border-top: 2px solid var(--black);
  }
}

/* 42. Expertise: shared section frame */
.xa,
.xw,
.xm,
.xf,
.xq {
  display: flex;
  flex-direction: column;
  gap: calc(90 * var(--u));
  padding: calc(170 * var(--u)) var(--gut) calc(160 * var(--u));
  border-bottom: 1px solid var(--line);
}

.xq {
  gap: calc(80 * var(--u));
  border-bottom: 0;
}

/* 43. Expertise: 01 Practice areas */
.xa__list {
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.xa__row {
  display: grid;
  grid-template-columns: calc(160 * var(--u)) minmax(0, 1fr) minmax(0, 1.1fr) calc(420 * var(--u)) calc(90 * var(--u));
  align-items: start;
  gap: calc(56 * var(--u));
  padding: calc(56 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .2s, color .2s;
}

.xa__row:hover,
.xa__row:focus-visible {
  background: var(--lime);
  color: var(--black);
}

.xa__n {
  font-family: var(--serif);
  font-size: calc(110 * var(--u));
  font-style: italic;
  line-height: .8;
}

.xa__main {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}

.xa__t {
  font-family: var(--display);
  font-size: calc(76 * var(--u));
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.xa__d {
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.5;
  opacity: .85;
}

.xa__svc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 calc(40 * var(--u));
  border-top: 1.5px solid currentColor;
}

.xa__s {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(18 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  font-size: max(14px, calc(24 * var(--u)));
}

.xa__dot {
  flex: none;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  background: var(--lime);
  outline: 1.5px solid currentColor;
}

.xa__lead {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}

.xa__av {
  flex: none;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  border: 1.5px solid currentColor;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
}

.xa__who,
.xq__who {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}

.xa__lbl {
  font-size: max(10px, calc(14 * var(--u)));
  letter-spacing: .24em;
  opacity: .7;
}

.xa__name {
  font-size: max(15px, calc(26 * var(--u)));
}

.xa__go {
  justify-self: end;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  font-size: calc(30 * var(--u));
}

/* 44. Expertise: 02 Who we help */
.xw__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  list-style: none;
  border: 2px solid var(--ink);
}

.xw__c {
  min-height: calc(760 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  padding: calc(56 * var(--u)) calc(52 * var(--u));
}

.xw__c + .xw__c {
  border-left: 2px solid var(--ink);
}

.xw__c:nth-child(2) {
  background: var(--black);
  color: #fcfbf8;
}

.xw__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.xw__l {
  font-family: var(--display);
  font-size: calc(150 * var(--u));
  line-height: .8;
  letter-spacing: -.05em;
}

.xw__c:nth-child(2) .xw__l {
  color: var(--lime);
}

.xw__img {
  width: calc(260 * var(--u));
  height: calc(200 * var(--u));
  border: 1px solid var(--line);
  object-fit: cover;
}

.xw__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(60 * var(--u));
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.xw__d {
  font-size: max(15px, calc(27 * var(--u)));
  line-height: 1.5;
  opacity: .8;
}

.xw__areas {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  margin-top: auto;
}

.xw__lbl {
  font-size: max(10px, calc(14 * var(--u)));
  letter-spacing: .24em;
  opacity: .7;
}

.xw__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  padding: 0;
  list-style: none;
}

.xw__chips li {
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border: 1.5px solid currentColor;
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* 45. Expertise: 03 Typical matters */
.xm__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(24 * var(--u));
  padding: 0;
  list-style: none;
}

.xm__c {
  min-height: calc(380 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  padding: calc(36 * var(--u)) calc(36 * var(--u)) calc(32 * var(--u));
  border: 2px solid var(--ink);
  transition: background-color .2s, color .2s;
}

.xm__c:hover {
  background: var(--lime);
  color: var(--black);
}

.xm__top {
  display: flex;
  justify-content: space-between;
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
}

.xm__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(46 * var(--u));
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.xm__dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: calc(18 * var(--u));
  border-top: 1.5px solid currentColor;
}

.xm__dl div {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}

.xm__dl dt {
  font-size: max(10px, calc(13 * var(--u)));
  letter-spacing: .22em;
  opacity: .7;
}

.xm__dl dd {
  font-size: max(15px, calc(26 * var(--u)));
}

/* 46. Expertise: 04 Fees */
.xf__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0;
  list-style: none;
  border: 2px solid var(--ink);
}

.xf__c {
  min-height: calc(620 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(36 * var(--u));
  padding: calc(56 * var(--u)) calc(52 * var(--u));
}

.xf__c:first-child {
  background: var(--lime);
  color: var(--black);
}

.xf__c + .xf__c {
  border-left: 2px solid var(--ink);
}

.xf__c:nth-child(2) {
  background: var(--inv);
  color: var(--on-inv);
}

.xf__k {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
}

.xf__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(120 * var(--u));
  line-height: .85;
  letter-spacing: -.05em;
}

.xf__d {
  font-family: var(--serif);
  font-size: calc(44 * var(--u));
  font-style: italic;
  line-height: 1.15;
}

.xf__for {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  margin-top: auto;
  padding-top: calc(22 * var(--u));
  border-top: 1.5px solid currentColor;
  font-size: max(15px, calc(26 * var(--u)));
}

.xf__for span {
  font-size: max(10px, calc(14 * var(--u)));
  letter-spacing: .22em;
  opacity: .7;
}

/* 47. Expertise: 05 Questions, answer stage */
.xq__ctl {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
}

.xq__count {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
}

.xq__cur {
  font-family: var(--display);
  font-size: calc(64 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.xq__of {
  font-size: max(13px, calc(22 * var(--u)));
  color: var(--ink3);
}

.xq__btn {
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(24 * var(--u));
  padding: 0;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: calc(30 * var(--u));
  cursor: pointer;
  transition: background-color .2s;
}

.xq__btn:hover {
  background: var(--hover);
}

.xq__btn--next {
  margin-left: 0;
  border: 0;
  background: var(--inv);
  color: var(--accent-txt);
}

.xq__btn--next:hover {
  background: var(--inv-hover);
}

.xq__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(1180 * var(--u));
  border: 2px solid var(--ink);
}

.xq__side {
  position: relative;
  display: flex;
  flex-direction: column;
}

.xq__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: calc(8 * var(--u));
  background: var(--line);
}

.xq__fill {
  display: block;
  width: 100%;
  height: var(--xq-rail, 16.6667%);
  background: var(--lime);
  transition: height .45s var(--expand);
}

.xq__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

.xq__i {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.xq__i + .xq__i {
  border-top: 1px solid var(--line);
}

.xq__q {
  flex: 1;
  display: grid;
  grid-template-columns: calc(110 * var(--u)) minmax(0, 1fr) calc(70 * var(--u));
  align-items: center;
  padding: calc(34 * var(--u)) calc(44 * var(--u)) calc(34 * var(--u)) calc(52 * var(--u));
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}

.xq__n {
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .22em;
  color: var(--mute);
}

.xq__qt {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.xq__tag {
  font-size: max(10px, calc(13 * var(--u)));
  letter-spacing: .24em;
  color: var(--mute);
}

.xq__text {
  font-family: var(--display);
  font-size: calc(36 * var(--u));
  line-height: 1.02;
  letter-spacing: -.03em;
  transition: font-size .3s;
}

.xq__arr {
  justify-self: end;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  color: transparent;
  font-size: calc(24 * var(--u));
}

.xq__i.is-on .xq__q {
  background: var(--inv);
  color: var(--on-inv);
}

.xq__i.is-on .xq__n,
.xq__i.is-on .xq__tag {
  color: var(--accent-txt);
}

.xq__i.is-on .xq__text {
  font-size: calc(44 * var(--u));
}

.xq__i.is-on .xq__arr {
  border-color: var(--on-inv);
  background: var(--lime);
  color: var(--black);
}

.xq__drop {
  display: none;
}

.xq__stage {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--lime);
  color: var(--black);
  border-left: 2px solid var(--ink);
}

.xq__big {
  position: absolute;
  right: calc(-30 * var(--u));
  top: calc(-140 * var(--u));
  font-family: var(--display);
  font-size: calc(640 * var(--u));
  line-height: 1;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px #0e0e0e33;
  pointer-events: none;
}

.xq__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: calc(48 * var(--u)) calc(56 * var(--u)) 0;
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .24em;
}

.xq__chip {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  background: var(--black);
  color: var(--lime);
}

.xq__mid {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(30 * var(--u));
  padding: calc(60 * var(--u)) calc(56 * var(--u)) calc(40 * var(--u));
}

.xq__sq {
  font-family: var(--display);
  font-size: calc(44 * var(--u));
  line-height: 1.05;
  letter-spacing: -.03em;
}

.xq__sa {
  font-family: var(--serif);
  font-size: calc(66 * var(--u));
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -.01em;
}

.xq__foot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 2px solid var(--black);
}

.xq__by,
.xq__more {
  display: flex;
  align-items: center;
  padding: calc(28 * var(--u)) calc(40 * var(--u));
  font-size: max(14px, calc(24 * var(--u)));
}

.xq__by {
  gap: calc(20 * var(--u));
  border-right: 2px solid var(--black);
}

.xq__av {
  flex: none;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  border: 2px solid var(--black);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
}

.xq__who {
  gap: calc(4 * var(--u));
}

.xq__lbl {
  font-size: max(10px, calc(13 * var(--u)));
  letter-spacing: .22em;
}

.xq__more {
  justify-content: space-between;
  background: var(--black);
  color: var(--lime);
  transition: background-color .2s;
}

.xq__more:hover {
  background: #262626;
}

.xq__more .xq__lbl {
  color: #fcfbf8;
}

.xq__mo {
  font-size: calc(32 * var(--u));
}

.xq__ask {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(36 * var(--u));
  border-top: 1px solid var(--line);
}

.xq__miss {
  font-size: max(15px, calc(26 * var(--u)));
  color: var(--ink2);
}

.xq__cta {
  height: calc(90 * var(--u));
  gap: calc(36 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(40 * var(--u));
  font-size: max(15px, calc(26 * var(--u)));
}

.xq__cta .btn__dot {
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
}

/* 48. Expertise: tablet and phone (below 1200px). Every answer opens under its question. */
@media (max-width: 1199.98px) {
  .xa,
  .xw,
  .xm,
  .xf,
  .xq {
    gap: 40px;
    padding: 72px var(--gut);
  }

  .xa__row {
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    gap: 20px 16px;
    padding: 28px 0;
  }

  .xa__n {
    grid-area: 1 / 1;
    font-size: 40px;
  }

  .xa__main {
    grid-area: 1 / 2;
    gap: 10px;
  }

  .xa__go {
    grid-area: 1 / 3;
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .xa__svc,
  .xa__lead {
    grid-column: 2 / -1;
  }

  .xa__t {
    font-size: clamp(20px, 5vw, 40px);
  }

  .xa__s {
    gap: 10px;
    padding: 12px 0;
  }

  .xa__dot {
    width: 8px;
    height: 8px;
  }

  .xa__av {
    width: 52px;
    height: 52px;
  }

  .xa__lead {
    gap: 14px;
  }

  .xw__grid,
  .xf__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .xw__c,
  .xf__c {
    min-height: 0;
    gap: 24px;
    padding: 32px var(--gut);
  }

  .xw__c + .xw__c,
  .xf__c + .xf__c {
    border-left: 0;
    border-top: 2px solid var(--ink);
  }

  .xw__l {
    font-size: 72px;
  }

  .xw__img {
    width: 180px;
    height: 138px;
  }

  .xw__t {
    font-size: clamp(26px, 5vw, 40px);
  }

  .xw__d {
    font-size: 17px;
  }

  .xw__chips {
    gap: 8px;
  }

  .xw__chips li {
    padding: 8px 12px;
  }

  .xm__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .xm__c {
    min-height: 220px;
    gap: 24px;
    padding: 20px;
  }

  .xm__t {
    font-size: clamp(20px, 3.4vw, 28px);
  }

  .xm__dl {
    padding-top: 12px;
  }

  .xf__c {
    gap: 18px;
  }

  .xf__t {
    font-size: clamp(52px, 10vw, 80px);
  }

  .xf__d {
    font-size: clamp(22px, 4vw, 30px);
  }

  .xf__for {
    margin-top: 12px;
    padding-top: 16px;
  }

  .xq .shead {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .xq__cur {
    font-size: 36px;
  }

  .xq__btn {
    width: 48px;
    height: 48px;
    margin-left: 8px;
    font-size: 20px;
  }

  .xq__btn--next {
    margin-left: 0;
  }

  .xq__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .xq__stage,
  .xq__rail {
    display: none;
  }

  .xq__q {
    grid-template-columns: 44px minmax(0, 1fr) 36px;
    gap: 10px;
    padding: 20px var(--gut);
  }

  .xq__text,
  .xq__i.is-on .xq__text {
    font-size: clamp(17px, 3vw, 22px);
  }

  .xq__arr {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .xq__i.is-on .xq__drop {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px var(--gut) 26px;
    background: var(--lime);
    color: var(--black);
  }

  .xq__da {
    font-family: var(--serif);
    font-size: clamp(22px, 4vw, 30px);
    font-style: italic;
    line-height: 1.2;
  }

  .xq__dw {
    font-size: 11px;
    letter-spacing: .2em;
  }

  .xq__dw a {
    border-bottom: 1.5px solid currentColor;
  }

  .xq__ask {
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 28px;
  }

  .xq__cta {
    height: 60px;
    gap: 24px;
    padding: 0 8px 0 24px;
    font-size: 16px;
  }

  .xq__cta .btn__dot {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 599.98px) {
  .xa__svc,
  .xm__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .xw__top {
    gap: 16px;
  }

  .xw__img {
    width: 140px;
    height: 108px;
  }
}

/* 49. Blog: two columns, posts and a sticky sidebar */
.pgh__read > .pgh__lbl:last-child {
  letter-spacing: .22em;
}

.blg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(620 * var(--u));
  gap: calc(90 * var(--u));
  align-items: start;
  padding: calc(110 * var(--u)) var(--gut) calc(130 * var(--u));
}

.bp {
  display: flex;
  flex-direction: column;
  gap: calc(64 * var(--u));
  min-width: 0;
}

.bp__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(40 * var(--u));
  padding-bottom: calc(36 * var(--u));
  border-bottom: 2px solid var(--ink);
}

.bp__hl {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
}

.bp__h,
.cm__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(96 * var(--u));
  line-height: .9;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.bp__h em,
.cm__h em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(104 * var(--u));
  letter-spacing: -.02em;
}

.bp__hr {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
}

.bp__clear {
  padding: calc(14 * var(--u)) calc(22 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .22em;
  white-space: nowrap;
}

.bp__clear:hover {
  background: var(--lime);
  color: var(--black);
}

.bp__clear[hidden] {
  display: none;
}

.bp__count {
  font-size: max(12px, calc(20 * var(--u)));
  letter-spacing: .22em;
  color: var(--ink3);
  white-space: nowrap;
}

/* 50. Blog: post cards. One markup; the first post of a page is the featured layout */
.bp__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(72 * var(--u)) calc(56 * var(--u));
  padding: 0;
  list-style: none;
}

.bp__grid:empty {
  display: none;
}

.bp__c {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
}

.bp__pic {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  background: var(--hover);
}

.bp__pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bp__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: calc(10 * var(--u));
  background: var(--lime);
  transition: width .5s var(--expand);
}

.bp__c:hover .bp__bar,
.bp__c:focus-visible .bp__bar {
  width: 100%;
}

.bp__chip,
.bp__feat {
  position: absolute;
  font-weight: 500;
}

.bp__chip {
  top: calc(22 * var(--u));
  left: calc(22 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1.5px solid var(--ink);
  background: var(--bg);
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .22em;
}

.bp__feat {
  display: none;
}

.bp__txt,
.bp__body,
.bp__when {
  display: contents;
}

.bp__meta {
  display: flex;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .22em;
  color: var(--ink3);
}

.bp__cat,
.bp__sep {
  display: none;
}

.bp__t {
  font-family: var(--display);
  font-size: calc(46 * var(--u));
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: pretty;
}

.bp__ex {
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.5;
  color: var(--ink2);
  text-wrap: pretty;
}

.bp__read {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(22 * var(--u));
  border-top: 1px solid var(--line);
  font-size: max(14px, calc(22 * var(--u)));
  color: var(--ink2);
  transition: color .2s;
}

.bp__go {
  font-size: calc(28 * var(--u));
}

.bp__c:hover .bp__read,
.bp__c:focus-visible .bp__read {
  color: var(--ink);
}

/* Featured */
.bp__i--big {
  grid-column: span 2;
}

.bp__i--big .bp__c {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0;
  border: 2px solid var(--ink);
}

.bp__i--big .bp__pic {
  aspect-ratio: 16 / 11;
  border: 0;
  border-right: 2px solid var(--ink);
}

.bp__i--big .bp__bar {
  height: calc(12 * var(--u));
}

.bp__i--big .bp__chip {
  display: none;
}

.bp__i--big .bp__feat {
  display: block;
  top: calc(28 * var(--u));
  left: calc(28 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .24em;
}

.bp__i--big .bp__txt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(36 * var(--u));
  padding: calc(44 * var(--u)) calc(48 * var(--u));
  transition: background-color .3s;
}

.bp__i--big .bp__c:hover .bp__txt,
.bp__i--big .bp__c:focus-visible .bp__txt {
  background: var(--hover);
}

.bp__i--big .bp__body {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
}

.bp__i--big .bp__when,
.bp__i--big .bp__cat,
.bp__i--big .bp__sep {
  display: inline;
}

.bp__i--big .bp__cat {
  font-weight: 500;
  color: var(--ink);
}

.bp__i--big .bp__rd {
  display: none;
}

.bp__i--big .bp__t {
  font-size: calc(72 * var(--u));
  line-height: .95;
  letter-spacing: -.04em;
}

.bp__i--big .bp__ex {
  font-size: max(15px, calc(26 * var(--u)));
}

.bp__i--big .bp__read {
  padding-top: calc(28 * var(--u));
  font-size: max(14px, calc(24 * var(--u)));
  color: var(--ink);
}

.bp__i--big .bp__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 50%;
  background: var(--inv);
  color: var(--on-inv);
}

/* Nothing matches the filter */
.bp__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 * var(--u));
  padding: calc(120 * var(--u)) calc(60 * var(--u));
  border: 2px dashed var(--line);
  text-align: center;
}

.bp__empty[hidden] {
  display: none;
}

.bp__et {
  font-family: var(--display);
  font-size: calc(64 * var(--u));
  letter-spacing: -.04em;
}

.bp__ed {
  font-size: max(15px, calc(26 * var(--u)));
  color: var(--ink2);
}

.bp__all {
  padding: calc(18 * var(--u)) calc(30 * var(--u));
  background: var(--inv);
  color: var(--on-inv);
  font-size: max(12px, calc(20 * var(--u)));
  letter-spacing: .22em;
}

.bp__all:hover {
  background: var(--inv-hover);
}

/* Pagination */
.pn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(34 * var(--u));
}

.pn[hidden] {
  display: none;
}

.pn__bar {
  display: grid;
  grid-template-columns: calc(300 * var(--u)) minmax(0, 1fr) calc(300 * var(--u));
  align-self: stretch;
  height: calc(120 * var(--u));
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.pn__prev,
.pn__next {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  padding: 0 calc(32 * var(--u));
  font-size: max(12px, calc(20 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
  transition: background-color .2s;
}

.pn__prev > :first-child,
.pn__next > :last-child {
  font-size: calc(32 * var(--u));
}

.pn__prev {
  border-right: 1px solid var(--line);
}

.pn__next {
  justify-content: flex-end;
  border-left: 1px solid var(--line);
}

.pn__prev:disabled,
.pn__next:disabled {
  opacity: .3;
  cursor: default;
}

.pn__prev:not(:disabled):hover {
  background: var(--hover);
}

.pn__next:not(:disabled):hover {
  background: var(--lime);
  color: var(--black);
}

.pn__nums {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(14 * var(--u));
}

.pn__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(83 * var(--u));
  height: calc(83 * var(--u));
  border: 1.5px solid var(--line);
  font-family: var(--display);
  font-size: calc(30 * var(--u));
  letter-spacing: -.02em;
  transition: background-color .2s, border-color .2s;
}

.pn__n:hover {
  border-color: var(--ink);
}

.pn__n[aria-current] {
  border-color: transparent;
  background: var(--inv);
  color: var(--on-inv);
}

.pn__cap {
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

/* 51. Blog: sidebar */
.bs {
  position: sticky;
  top: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(56 * var(--u));
}

.bs__blk {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}

.bs__h,
.bs__nh {
  font-family: var(--sans);
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
}

.bs__search {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  height: calc(88 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(28 * var(--u));
  border: 2px solid var(--ink);
  background: var(--bg);
}

.bs__search:focus-within {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.bs__glass {
  font-size: calc(28 * var(--u));
}

.bs__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(15px, calc(26 * var(--u)));
  color: var(--ink);
}

.bs__in::placeholder {
  color: var(--ink3);
}

.bs__go {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: calc(26 * var(--u));
}

.bs__go:hover {
  background: var(--lime-hover);
}

.bs__cats,
.bs__tops,
.bs__tags {
  padding: 0;
  list-style: none;
}

.bs__cats,
.bs__tops {
  border-top: 2px solid var(--ink);
}

.bs__cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: calc(22 * var(--u)) calc(24 * var(--u));
  border-bottom: 1px solid var(--line);
  font-size: max(12px, calc(20 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
  text-align: left;
  transition: background-color .2s, padding .2s;
}

.bs__cat:hover {
  padding-left: calc(36 * var(--u));
}

.bs__cat[aria-pressed="true"] {
  background: var(--lime);
  color: var(--black);
}

.bs__cn {
  font-family: var(--display);
  font-size: calc(24 * var(--u));
  font-weight: 400;
  letter-spacing: 0;
}

.bs__top {
  display: grid;
  grid-template-columns: calc(70 * var(--u)) minmax(0, 1fr) calc(30 * var(--u));
  gap: calc(18 * var(--u));
  align-items: baseline;
  padding: calc(26 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .2s;
}

.bs__top:hover {
  background: var(--hover);
}

.bs__tn {
  padding-left: calc(8 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(44 * var(--u));
  line-height: .8;
}

.bs__tw {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.bs__tt {
  font-family: var(--display);
  font-size: calc(26 * var(--u));
  line-height: 1.05;
  letter-spacing: -.02em;
}

.bs__tm {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .22em;
  color: var(--ink3);
}

.bs__ta {
  font-size: calc(22 * var(--u));
}

.bs__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
}

.bs__tag {
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .08em;
}

.bs__tag:hover {
  border-color: var(--black);
  background: var(--lime);
  color: var(--black);
}

.bs__tag[aria-pressed="true"] {
  background: var(--inv);
  color: var(--on-inv);
}

.bs__news {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
  padding: calc(44 * var(--u)) calc(40 * var(--u));
  background: var(--panel);
  color: var(--on-panel);
}

.bs__nh {
  font-weight: 400;
  color: var(--lime);
}

.bs__nt {
  font-family: var(--display);
  font-size: calc(48 * var(--u));
  line-height: .95;
  letter-spacing: -.04em;
}

.bs__nt em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(52 * var(--u));
  letter-spacing: -.01em;
}

.bs__nd {
  font-size: max(14px, calc(22 * var(--u)));
  line-height: 1.5;
  color: #bdbab2;
}

.bs__form {
  display: flex;
  height: calc(80 * var(--u));
  border: 1.5px solid #fcfbf866;
}

.bs__form:focus-within {
  border-color: var(--lime);
}

.bs__form[hidden],
.bs__ok[hidden] {
  display: none;
}

.bs__mail {
  flex: 1;
  min-width: 0;
  padding: 0 calc(24 * var(--u));
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(14px, calc(22 * var(--u)));
  color: #fcfbf8;
}

.bs__mail::placeholder {
  color: #fcfbf8;
  opacity: .55;
}

.bs__mail[aria-invalid="true"] {
  box-shadow: inset 0 -3px 0 #ff6b5b;
}

.bs__sub {
  padding: 0 calc(26 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(11px, calc(17 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.bs__sub:hover {
  background: var(--lime-hover);
}

.bs__ok {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(80 * var(--u));
  padding: 0 calc(26 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.bs__ok span {
  font-size: calc(26 * var(--u));
}

/* 52. Blog: tablet and phone (below 1200px). The sidebar drops under the posts. */
@media (max-width: 1199.98px) {
  .blg {
    grid-template-columns: minmax(0, 1fr);
    gap: 72px;
    padding: 56px var(--gut) 72px;
  }

  .bp {
    gap: 36px;
  }

  .bp__head {
    flex-wrap: wrap;
    gap: 16px 24px;
    padding-bottom: 20px;
  }

  .bp__hl {
    gap: 16px;
  }

  .bp__h,
  .cm__h {
    font-size: clamp(34px, 7vw, 60px);
    white-space: normal;
  }

  .bp__h em,
  .cm__h em {
    font-size: 1.08em;
  }

  .bp__grid {
    gap: 48px 24px;
  }

  .bp__c {
    gap: 16px;
  }

  .bp__bar {
    height: 6px;
  }

  .bp__chip {
    top: 12px;
    left: 12px;
    padding: 5px 9px;
  }

  .bp__t {
    font-size: clamp(22px, 3vw, 28px);
  }

  .bp__read {
    padding-top: 14px;
  }

  .bp__go {
    font-size: 20px;
  }

  .bp__i--big .bp__c {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp__i--big .bp__pic {
    border-right: 0;
    border-bottom: 2px solid var(--ink);
  }

  .bp__i--big .bp__bar {
    height: 8px;
  }

  .bp__i--big .bp__feat {
    top: 14px;
    left: 14px;
    padding: 6px 10px;
  }

  .bp__i--big .bp__txt {
    gap: 22px;
    padding: 24px;
  }

  .bp__i--big .bp__body {
    gap: 14px;
  }

  .bp__i--big .bp__meta {
    flex-wrap: wrap;
  }

  .bp__i--big .bp__t {
    font-size: clamp(28px, 5vw, 44px);
  }

  .bp__i--big .bp__read {
    padding-top: 18px;
  }

  .bp__i--big .bp__go {
    width: 48px;
    height: 48px;
  }

  .bp__empty {
    gap: 16px;
    padding: 56px 24px;
  }

  .bp__et {
    font-size: 36px;
  }

  .bp__all {
    padding: 14px 22px;
  }

  .pn {
    gap: 18px;
  }

  .pn__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: 72px;
  }

  .pn__prev,
  .pn__next {
    gap: 12px;
    padding: 0 18px;
  }

  .pn__prev > :first-child,
  .pn__next > :last-child {
    font-size: 22px;
  }

  .pn__nums {
    gap: 8px;
  }

  .pn__n {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .bs {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px;
  }

  .bs__blk:first-child {
    grid-column: 1 / -1;
  }

  .bs__blk {
    gap: 14px;
  }

  .bs__search {
    gap: 12px;
    height: 64px;
    padding: 0 8px 0 18px;
  }

  .bs__glass {
    font-size: 22px;
  }

  .bs__go {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }

  .bs__cat {
    padding: 16px;
  }

  .bs__cat:hover {
    padding-left: 24px;
  }

  .bs__cn {
    font-size: 18px;
  }

  .bs__top {
    grid-template-columns: 40px minmax(0, 1fr) 20px;
    gap: 12px;
    padding: 18px 0;
  }

  .bs__tn {
    font-size: 30px;
  }

  .bs__tt {
    font-size: 18px;
  }

  .bs__ta {
    font-size: 18px;
  }

  .bs__tags {
    gap: 8px;
  }

  .bs__tag {
    padding: 8px 14px;
  }

  .bs__news {
    gap: 18px;
    padding: 28px 24px;
  }

  .bs__nt {
    font-size: 32px;
  }

  .bs__nt em {
    font-size: 34px;
  }

  .bs__form,
  .bs__ok {
    height: 60px;
  }

  .bs__mail {
    padding: 0 16px;
  }

  .bs__sub,
  .bs__ok {
    padding: 0 18px;
  }

  .bs__ok span {
    font-size: 22px;
  }
}

/* 53. Blog: phone (below 600px) */
@media (max-width: 599.98px) {
  .bp__grid,
  .bs {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp__i--big {
    grid-column: auto;
  }

  .pn__w {
    display: none;
  }

  .pn__prev,
  .pn__next {
    padding: 0 16px;
  }

  .pn__n {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
}

/* 54. Blog post: header and cover */
.po {
  border-bottom: 2px solid var(--ink);
}

.po__band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(620 * var(--u));
  gap: calc(90 * var(--u));
  padding: calc(10 * var(--u)) var(--gut) calc(80 * var(--u));
}

.po__l {
  display: flex;
  flex-direction: column;
  gap: calc(56 * var(--u));
}

.po__meta {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  margin-top: calc(40 * var(--u));
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .22em;
  color: var(--ink3);
}

.po__chip {
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(11px, calc(17 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

.po__h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(150 * var(--u));
  line-height: .88;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.po__h1 em {
  padding: 0 calc(16 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(162 * var(--u));
  line-height: 1;
  letter-spacing: -.025em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.po__r {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(36 * var(--u));
  padding-bottom: calc(10 * var(--u));
}

.po__stand {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(40 * var(--u));
  line-height: 1.25;
  letter-spacing: -.01em;
}

.po__by {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  padding-top: calc(30 * var(--u));
  border-top: 1.5px solid var(--ink);
}

.po__av {
  flex: none;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  object-fit: cover;
}

.po__who {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}

.po__lbl {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.po__name {
  font-size: max(16px, calc(28 * var(--u)));
}

.po__cover {
  height: calc(1040 * var(--u));
  margin: 0 var(--gut);
  overflow: hidden;
  border: 2px solid var(--ink);
  border-bottom: 0;
  background: var(--hover);
}

.po__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 55. Blog post: article body */
.pg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(620 * var(--u));
  gap: calc(90 * var(--u));
  align-items: start;
  padding: calc(120 * var(--u)) var(--gut) calc(140 * var(--u));
}

.pg__col {
  display: flex;
  flex-direction: column;
  gap: calc(140 * var(--u));
  min-width: 0;
}

.pa {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--u));
  max-width: calc(1460 * var(--u));
}

.pa__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(58 * var(--u));
  line-height: 1.22;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.pa__h {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
  padding-top: calc(20 * var(--u));
  scroll-margin-top: 40px;
}

.pa__eye {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
}

.pa__sq {
  flex: none;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  background: var(--lime);
}

.pa__h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(72 * var(--u));
  line-height: .95;
  letter-spacing: -.04em;
}

.pa__p {
  font-size: max(17px, calc(32 * var(--u)));
  line-height: 1.62;
  color: var(--ink2);
  text-wrap: pretty;
}

.pa__cls,
.pa__ks,
.pa__tags,
.cm__list,
.pv__toc,
.rl__grid {
  padding: 0;
  list-style: none;
}

.pa__cls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}

.pa__cl {
  display: grid;
  grid-template-columns: calc(100 * var(--u)) minmax(0, 1fr);
  gap: calc(20 * var(--u));
  padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(44 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
}

.pa__cn {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(64 * var(--u));
  line-height: .8;
}

.pa__cw {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}

.pa__ct {
  font-family: var(--display);
  font-size: calc(34 * var(--u));
  letter-spacing: -.02em;
}

.pa__cd {
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.5;
  color: var(--ink2);
}

.pa__q {
  display: flex;
  flex-direction: column;
  gap: calc(36 * var(--u));
  margin: calc(40 * var(--u)) 0;
  padding: calc(70 * var(--u)) calc(80 * var(--u));
  background: var(--lime);
  color: var(--black);
}

.pa__qm {
  height: calc(70 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(200 * var(--u));
  line-height: .5;
}

.pa__qt {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(64 * var(--u));
  line-height: 1.18;
  letter-spacing: -.015em;
}

.pa__qb {
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

/* Checklist: each row is a toggle button */
.pa__chk {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
}

.pa__kh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(26 * var(--u)) calc(36 * var(--u));
  border-bottom: 2px solid var(--ink);
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
}

.pa__kn {
  font-family: var(--display);
  font-size: calc(30 * var(--u));
  font-weight: 400;
  letter-spacing: 0;
}

.pa__ck {
  display: grid;
  grid-template-columns: calc(56 * var(--u)) minmax(0, 1fr);
  gap: calc(28 * var(--u));
  align-items: center;
  width: 100%;
  padding: calc(28 * var(--u)) calc(36 * var(--u));
  border-bottom: 1px solid var(--line);
  text-align: left;
  transition: background-color .2s;
}

.pa__ck:hover {
  background: var(--hover);
}

.pa__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border: 2px solid currentColor;
  font-size: calc(28 * var(--u));
  color: var(--black);
}

.pa__ck .pa__box {
  border-color: var(--ink);
}

.pa__kt {
  font-size: max(16px, calc(28 * var(--u)));
  line-height: 1.4;
}

.pa__ck[aria-pressed="true"] {
  color: var(--ink3);
}

.pa__ck[aria-pressed="true"] .pa__box {
  border-color: var(--ink3);
  background: var(--lime);
}

.pa__ck[aria-pressed="true"] .pa__box::before {
  content: "✓";
}

.pa__ck[aria-pressed="true"] .pa__kt {
  text-decoration: line-through;
}

/* Call to action and the article foot */
.pa__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(40 * var(--u));
  align-items: center;
  padding: calc(56 * var(--u)) calc(60 * var(--u));
  background: var(--panel);
  color: var(--on-panel);
}

.pa__cw2 {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.pa__ce {
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .26em;
  color: var(--lime);
}

.pa__ch {
  font-family: var(--display);
  font-size: calc(52 * var(--u));
  line-height: 1;
  letter-spacing: -.035em;
}

.pa__ch em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(58 * var(--u));
  letter-spacing: -.01em;
}

.pa__cb {
  display: flex;
  align-items: center;
  gap: calc(36 * var(--u));
  height: calc(96 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(40 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(16px, calc(27 * var(--u)));
  white-space: nowrap;
  transition: background-color .2s;
}

.pa__cb:hover {
  background: var(--lime-hover);
}

.pa__cd2,
.cf__dot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--lime);
}

.pa__cd2 {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
}

.pa__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(40 * var(--u));
  padding-top: calc(40 * var(--u));
  border-top: 2px solid var(--ink);
}

.pa__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
}

.pa__tag {
  display: block;
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .08em;
}

.pa__tag:hover {
  border-color: var(--black);
  background: var(--lime);
  color: var(--black);
}

.pa__note {
  max-width: calc(620 * var(--u));
  font-size: max(10px, calc(16 * var(--u)));
  line-height: 1.6;
  letter-spacing: .22em;
  color: var(--ink3);
  text-align: right;
}

/* 56. Blog post: comments and the comment form */
.cm {
  display: flex;
  flex-direction: column;
  gap: calc(56 * var(--u));
  max-width: calc(1460 * var(--u));
  scroll-margin-top: 40px;
}

.cm__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(40 * var(--u));
  padding-bottom: calc(36 * var(--u));
  border-bottom: 2px solid var(--ink);
}

.cm__hl,
.rl__hl {
  gap: calc(28 * var(--u));
}

.cm__hl {
  display: flex;
  flex-direction: column;
}

.cm__mod {
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .22em;
  color: var(--ink3);
}

.cm__i {
  display: grid;
  grid-template-columns: calc(96 * var(--u)) minmax(0, 1fr);
  gap: calc(32 * var(--u));
  padding: calc(44 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
}

.cm__i--reply {
  padding-left: calc(128 * var(--u));
}

.cm__av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--hover);
  font-family: var(--display);
  font-size: calc(30 * var(--u));
}

.cm__av--img {
  overflow: hidden;
}

.cm__av--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cm__i--team .cm__av {
  background: var(--lime);
  color: var(--black);
}

.cm__b {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
  min-width: 0;
}

.cm__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(18 * var(--u));
}

.cm__name {
  font-size: max(16px, calc(28 * var(--u)));
  font-weight: 500;
}

.cm__chip {
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(10px, calc(14 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.cm__date,
.cm__to {
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .22em;
  color: var(--ink3);
}

.cm__to {
  letter-spacing: .2em;
}

.cm__text {
  font-size: max(16px, calc(28 * var(--u)));
  line-height: 1.55;
  color: var(--ink2);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.cm__act {
  display: flex;
  gap: calc(14 * var(--u));
  margin-top: calc(6 * var(--u));
}

.cm__like,
.cm__reply {
  padding: calc(10 * var(--u)) calc(18 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .2em;
  transition: border-color .2s, background-color .2s;
}

.cm__reply {
  border-color: var(--line);
}

/* Jost has no heart; pin the fallback so it does not change with the system fonts */
.cm__hr {
  font-family: Helvetica, sans-serif;
}

.cm__reply:hover {
  border-color: var(--ink);
}

.cm__like:hover {
  background: var(--hover);
}

.cm__like[aria-pressed="true"] {
  background: var(--inv);
  color: var(--accent-txt);
}

.cf {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  scroll-margin-top: 40px;
}

.cf__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(30 * var(--u));
  padding: calc(30 * var(--u)) calc(40 * var(--u));
  border-bottom: 2px solid var(--ink);
  background: var(--inv);
  color: var(--on-inv);
}

.cf__h {
  font-family: var(--display);
  font-size: calc(44 * var(--u));
  letter-spacing: -.03em;
}

.cf__h em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(48 * var(--u));
  letter-spacing: 0;
}

.cf__rt {
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.cf__rt[hidden] {
  display: none;
}

.cf__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cf__f {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(28 * var(--u)) calc(40 * var(--u));
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s;
}

.cf__f:focus-within {
  box-shadow: inset 0 -3px 0 var(--lime);
}

.cf__row .cf__f:first-child {
  border-right: 1px solid var(--line);
}

.cf__l {
  display: flex;
  justify-content: space-between;
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.cf__l.is-err,
.cf__msg.is-err {
  color: #d24b2a;
}

.cf__in {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(16px, calc(28 * var(--u)));
  color: var(--ink);
}

.cf__in::placeholder {
  color: var(--ink3);
  opacity: .8;
}

.cf__ta {
  line-height: 1.5;
  resize: vertical;
}

.cf__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(30 * var(--u));
  padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)) calc(40 * var(--u));
}

.cf__nt {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  font-size: max(14px, calc(22 * var(--u)));
  color: var(--ink2);
  cursor: pointer;
}

.cf__cb {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cf__box {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border: 2px solid var(--ink);
  font-size: calc(20 * var(--u));
  color: var(--black);
}

.cf__cb:checked + .cf__box {
  background: var(--lime);
}

.cf__cb:checked + .cf__box::before {
  content: "✓";
}

.cf__cb:focus-visible + .cf__box {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.cf__end {
  display: flex;
  align-items: center;
  gap: calc(26 * var(--u));
}

.cf__msg {
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .2em;
  color: var(--ink3);
}

.cf__msg.is-ok {
  color: var(--ink);
}

.cf__go {
  display: flex;
  align-items: center;
  gap: calc(30 * var(--u));
  height: calc(88 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(40 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(15px, calc(26 * var(--u)));
  white-space: nowrap;
  transition: background-color .2s;
}

.cf__go:hover {
  background: var(--lime-hover);
}

.cf__dot {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  font-size: calc(26 * var(--u));
}

/* 57. Blog post: sidebar (contents with reading progress, author, share, discussion) */
.pv {
  position: sticky;
  top: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(56 * var(--u));
}

.pv__blk {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}

.pv__h {
  font-family: var(--sans);
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
}

.pv__h--sp {
  display: flex;
  justify-content: space-between;
}

.pv__tog {
  display: none;
}

.pv__prog {
  position: relative;
  display: block;
  height: calc(8 * var(--u));
  background: var(--line);
}

.pv__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--lime);
  transition: width .2s;
}

.pv__toc {
  border-top: 2px solid var(--ink);
}

.pv__t {
  display: grid;
  grid-template-columns: calc(60 * var(--u)) minmax(0, 1fr) calc(30 * var(--u));
  gap: calc(14 * var(--u));
  align-items: center;
  padding: calc(22 * var(--u)) calc(24 * var(--u));
  border-bottom: 1px solid var(--line);
  transition: background-color .2s, padding .2s;
}

.pv__t:hover {
  padding-left: calc(36 * var(--u));
}

.pv__t[aria-current] {
  background: var(--lime);
  color: var(--black);
}

.pv__n {
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .2em;
}

.pv__tt {
  font-size: max(12px, calc(20 * var(--u)));
  font-weight: 500;
  letter-spacing: .18em;
}

.pv__ta {
  font-size: max(12px, calc(20 * var(--u)));
}

.pv__ta::before {
  content: "↓";
}

.pv__t[aria-current] .pv__ta::before {
  content: "●";
}

.pv__card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
}

.pv__pic {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-bottom: 2px solid var(--ink);
  background: var(--hover);
}

.pv__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.pv__cb {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  padding: calc(32 * var(--u)) calc(32 * var(--u)) calc(36 * var(--u));
}

.pv__role {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.pv__name {
  font-family: var(--display);
  font-size: calc(40 * var(--u));
  letter-spacing: -.03em;
}

.pv__bio {
  font-size: max(14px, calc(22 * var(--u)));
  line-height: 1.5;
  color: var(--ink2);
}

.pv__more {
  display: flex;
  justify-content: space-between;
  margin-top: calc(8 * var(--u));
  padding-top: calc(20 * var(--u));
  border-top: 1px solid var(--line);
  font-size: max(12px, calc(20 * var(--u)));
  letter-spacing: .2em;
}

.pv__more:hover {
  color: var(--ink2);
}

.pv__share {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid var(--ink);
}

.pv__s {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(80 * var(--u));
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .2em;
  white-space: nowrap;
  transition: background-color .2s;
}

.pv__s + .pv__s {
  border-left: 1px solid var(--line);
}

.pv__s:hover,
.pv__s.is-on {
  background: var(--lime);
  color: var(--black);
}

.pv__disc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(28 * var(--u)) calc(32 * var(--u));
  background: var(--inv);
  color: var(--on-inv);
  transition: background-color .2s;
}

.pv__disc:hover {
  background: var(--inv-hover);
}

.pv__dw {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.pv__dl {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--accent-txt);
}

.pv__dc {
  font-family: var(--display);
  font-size: calc(34 * var(--u));
  letter-spacing: -.02em;
}

.pv__da {
  font-size: calc(32 * var(--u));
}

/* 58. Blog post: related articles (the Blog index card) */
.rl {
  display: flex;
  flex-direction: column;
  gap: calc(64 * var(--u));
  padding: 0 var(--gut) calc(160 * var(--u));
}

.rl__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(40 * var(--u));
  padding: calc(70 * var(--u)) 0 calc(36 * var(--u));
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.rl .more span {
  letter-spacing: .24em;
}

.rl__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(56 * var(--u));
}

/* 59. Blog post: tablet and phone (below 1200px). The contents list becomes a sticky bar that opens. */
@media (max-width: 1199.98px) {
  .po__band {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 8px var(--gut) 40px;
  }

  .po__l {
    gap: 24px;
  }

  .po__meta {
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 12px;
  }

  .po__chip {
    padding: 6px 10px;
  }

  .po__h1 {
    font-size: clamp(30px, 8.4vw, 84px);
  }

  .po__h1 em {
    padding: 0 8px;
    font-size: 1.08em;
  }

  .po__r {
    gap: 22px;
    padding-bottom: 0;
  }

  .po__stand {
    font-size: clamp(20px, 3.2vw, 28px);
  }

  .po__by {
    gap: 14px;
    padding-top: 18px;
  }

  .po__av {
    width: 56px;
    height: 56px;
  }

  .po__name {
    font-size: 18px;
  }

  .po__cover {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .pg {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
    padding: 0 var(--gut) 72px;
  }

  .pg__col {
    gap: 72px;
  }

  .pa {
    gap: 24px;
    max-width: none;
  }

  .pa__lead {
    font-size: clamp(23px, 4vw, 34px);
  }

  .pa__h {
    gap: 14px;
    padding-top: 16px;
    scroll-margin-top: 100px;
  }

  .pa__sq {
    width: 12px;
    height: 12px;
  }

  .pa__h2 {
    font-size: clamp(27px, 5vw, 44px);
  }

  .pa__cl {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 24px 20px 24px 0;
  }

  .pa__cn {
    font-size: 40px;
  }

  .pa__cw {
    gap: 8px;
  }

  .pa__ct {
    font-size: 20px;
  }

  .pa__q {
    gap: 18px;
    margin: 16px 0;
    padding: 32px 26px;
  }

  .pa__qm {
    height: 40px;
    font-size: 120px;
  }

  .pa__qt {
    font-size: clamp(24px, 4.4vw, 36px);
  }

  .pa__kh {
    gap: 12px;
    padding: 16px 18px;
  }

  .pa__kn {
    font-size: 20px;
  }

  .pa__ck {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 18px;
  }

  .pa__box {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .pa__cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 28px 24px;
  }

  .pa__cw2 {
    gap: 12px;
  }

  .pa__ch {
    font-size: clamp(26px, 4.6vw, 38px);
  }

  .pa__ch em {
    font-size: 1.1em;
  }

  .pa__cb {
    justify-self: start;
    gap: 22px;
    height: 60px;
    padding: 0 8px 0 24px;
  }

  .pa__cd2 {
    width: 44px;
    height: 44px;
  }

  .pa__cd2 .ico {
    width: 16px;
    height: 16px;
  }

  .pa__foot {
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 24px;
  }

  .pa__tags {
    gap: 8px;
  }

  .pa__tag {
    padding: 8px 14px;
  }

  .pa__note {
    max-width: none;
    text-align: left;
  }

  .cm {
    gap: 32px;
    max-width: none;
  }

  .cm__head {
    flex-wrap: wrap;
    gap: 16px 24px;
    padding-bottom: 20px;
  }

  .cm__hl,
  .rl__hl {
    gap: 16px;
  }

  .cm__i {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 16px;
    padding: 24px 0;
  }

  .cm__i--reply {
    padding-left: 40px;
  }

  .cm__av {
    width: 50px;
    height: 50px;
    font-size: 17px;
  }

  .cm__b {
    gap: 10px;
  }

  .cm__chip {
    padding: 4px 8px;
  }

  .cm__act {
    gap: 10px;
    margin-top: 4px;
  }

  .cm__like,
  .cm__reply {
    padding: 8px 12px;
  }

  .cf__bar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 20px;
  }

  .cf__h {
    font-size: 26px;
  }

  .cf__h em {
    font-size: 28px;
  }

  .cf__rt {
    padding: 6px 10px;
  }

  .cf__f {
    gap: 8px;
    padding: 16px 20px;
  }

  .cf__foot {
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 16px 16px 20px;
  }

  .cf__nt {
    gap: 12px;
  }

  .cf__box {
    width: 24px;
    height: 24px;
    font-size: 15px;
  }

  .cf__end {
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .cf__go {
    gap: 18px;
    height: 58px;
    padding: 0 8px 0 22px;
  }

  .cf__dot {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  /* The sidebar's blocks join the page grid: contents first (sticky bar), the rest after the comments. */
  .pv {
    display: contents;
  }

  .pv__blk--toc {
    position: sticky;
    top: 0;
    z-index: 5;
    order: -1;
    gap: 0;
    margin: 0 calc(var(--gut) * -1);
    padding: 0 var(--gut);
    border-bottom: 2px solid var(--ink);
    background: var(--bg);
  }

  .pv__blk--toc .pv__h {
    display: none;
  }

  .pv__tog {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-align: left;
  }

  .pv__tog::after {
    content: "+";
    order: 2;
    font-size: 20px;
    letter-spacing: 0;
  }

  .pv__tog[aria-expanded="true"]::after {
    content: "−";
  }

  .pv__tog > :last-child {
    margin-left: auto;
  }

  .pv__prog {
    height: 4px;
    margin: 0 calc(var(--gut) * -1);
  }

  .pv__toc {
    display: none;
    margin-bottom: 12px;
  }

  .pv__blk--toc.is-open .pv__toc {
    display: block;
  }

  .pv__t {
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    gap: 10px;
    padding: 14px 12px;
  }

  .pv__t:hover {
    padding-left: 18px;
  }

  .pv__blk {
    gap: 14px;
  }

  .pv__card {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  }

  .pv__pic {
    aspect-ratio: auto;
    min-height: 200px;
    border-right: 2px solid var(--ink);
    border-bottom: 0;
  }

  .pv__cb {
    gap: 10px;
    padding: 20px 22px 22px;
  }

  .pv__name {
    font-size: 26px;
  }

  .pv__more {
    margin-top: auto;
    padding-top: 14px;
  }

  .pv__s {
    height: 56px;
  }

  .pv__disc {
    padding: 18px 22px;
  }

  .pv__dc {
    font-size: 22px;
  }

  .pv__da {
    font-size: 24px;
  }

  .rl {
    gap: 36px;
    padding: 0 var(--gut) 72px;
  }

  .rl__head {
    flex-wrap: wrap;
    gap: 16px 24px;
    padding: 40px 0 20px;
  }

  .rl__grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px 24px;
  }
}

/* 60. Blog post: phone (below 600px) */
@media (max-width: 599.98px) {
  .pa__cls,
  .cf__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .pa__cl {
    padding-right: 0;
  }

  .cf__row .cf__f:first-child {
    border-right: 0;
  }

  .cm__i--reply {
    padding-left: 24px;
  }

  .pv__card {
    display: flex;
  }

  .pv__pic {
    aspect-ratio: 16 / 10;
    min-height: 0;
    border-right: 0;
    border-bottom: 2px solid var(--ink);
  }
}

/* 61. Case studies: results strip */
.cr {
  border-bottom: 2px solid var(--ink);
}

.cr__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  list-style: none;
}

.cr__c {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
  padding: calc(56 * var(--u)) calc(56 * var(--u)) calc(60 * var(--u));
}

.cr__c:first-child {
  padding-left: var(--gut);
}

.cr__c:last-child {
  padding-right: var(--gut);
}

.cr__c + .cr__c {
  border-left: 1px solid var(--line);
}

.cr__l {
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .26em;
  color: var(--ink3);
}

.cr__v {
  font-family: var(--display);
  font-size: calc(150 * var(--u));
  line-height: .85;
  letter-spacing: -.05em;
}

.cr__v em,
.ce__v em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(110 * var(--u));
  letter-spacing: 0;
}

.cr__d {
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.45;
  color: var(--ink2);
}

.cr__c--lime {
  background: var(--lime);
  color: var(--black);
}

.cr__c--inv {
  background: var(--inv);
  color: var(--on-inv);
}

.cr__c--lime .cr__l,
.cr__c--lime .cr__d,
.cr__c--inv .cr__d {
  color: inherit;
}

.cr__c--inv .cr__l {
  color: var(--accent-txt);
}

/* 62. Case studies: section frame and the featured matter */
.cx,
.ca,
.cw,
.cq {
  padding: calc(170 * var(--u)) var(--gut) calc(160 * var(--u));
  border-bottom: 1px solid var(--line);
}

.cx .shead,
.ca .shead,
.cw .shead,
.cq .shead {
  margin-bottom: calc(80 * var(--u));
}

.cx .h2,
.ca .h2,
.cw .h2,
.cq .h2 {
  line-height: .9;
}

.cx__hint {
  padding-bottom: calc(14 * var(--u));
}

.cx__card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 2px solid var(--ink);
  transition: background-color .3s;
}

.cx__card:hover,
.cx__card:focus-visible {
  background: var(--hover);
}

.cx__pic {
  position: relative;
  overflow: hidden;
  min-height: calc(1060 * var(--u));
  border-right: 2px solid var(--ink);
  background: var(--hover);
}

.cx__pic img,
.ca__pic img,
.cn__pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cx__txt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(48 * var(--u));
  padding: calc(56 * var(--u)) calc(60 * var(--u));
}

.cx__top {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
}

.cx__chips {
  display: flex;
  gap: calc(14 * var(--u));
}

.cx__chip,
.po__chip--o {
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

.cx__chip--o,
.po__chip--o {
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

.po__chip--o {
  font-size: max(11px, calc(17 * var(--u)));
}

.cx__t {
  font-family: var(--display);
  font-size: calc(84 * var(--u));
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.cx__t em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(92 * var(--u));
  letter-spacing: -.02em;
}

.cx__rows {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--ink);
}

.cx__row {
  display: grid;
  grid-template-columns: calc(220 * var(--u)) minmax(0, 1fr);
  gap: calc(30 * var(--u));
  padding: calc(28 * var(--u)) 0;
}

.cx__row + .cx__row {
  border-top: 1px solid var(--line);
}

.cx__k {
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.cx__v {
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.5;
}

.cx__out {
  font-family: var(--display);
  font-size: calc(34 * var(--u));
  line-height: 1.15;
  letter-spacing: -.02em;
}

.cx__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(40 * var(--u));
}

.cx__q {
  max-width: calc(640 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(38 * var(--u));
  line-height: 1.25;
}

.cx__go {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  border-radius: 50%;
  background: var(--inv);
  color: var(--on-inv);
}

.cx__go .ico {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
}

/* 63. Case studies: all matters (sort, practice tabs, cards with a sliding panel) */
.ca__sort {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  padding-bottom: calc(10 * var(--u));
}

.ca__sl {
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.ca__seg {
  display: flex;
  border: 2px solid var(--ink);
}

.ca__seg button {
  padding: calc(16 * var(--u)) calc(26 * var(--u));
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
  transition: background-color .2s;
}

.ca__seg button:hover {
  background: var(--hover);
}

.ca__seg [aria-pressed="true"] {
  background: var(--lime);
  color: var(--black);
}

.ca__tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: calc(56 * var(--u));
  border: 2px solid var(--ink);
}

.ca__tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(30 * var(--u)) calc(32 * var(--u));
  font-size: max(12px, calc(19 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
  text-align: left;
  transition: background-color .2s;
}

.ca__tab + .ca__tab {
  border-left: 2px solid var(--ink);
}

.ca__tab:hover {
  background: var(--lime);
  color: var(--black);
}

.ca__tab[aria-pressed="true"] {
  background: var(--inv);
  color: var(--accent-txt);
}

.ca__tn {
  font-family: var(--display);
  font-size: calc(26 * var(--u));
  font-weight: 400;
  letter-spacing: 0;
}

.ca__grid,
.cw__grid,
.cq__grid,
.ck,
.cy,
.ce,
.cn__grid {
  padding: 0;
  list-style: none;
}

.ca__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(40 * var(--u));
}

.ca__i[hidden] {
  display: none;
}

.ca__c {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(900 * var(--u));
  overflow: hidden;
  border: 2px solid var(--ink);
}

.ca__pic,
.cn__pic {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-bottom: 2px solid var(--ink);
  background: var(--hover);
}

.ca__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(30 * var(--u));
  padding: calc(36 * var(--u)) calc(40 * var(--u));
}

.ca__top {
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
}

.ca__meta {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.ca__n {
  font-weight: 500;
  color: var(--ink);
}

.ca__t {
  font-family: var(--display);
  font-size: calc(44 * var(--u));
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: pretty;
}

.ca__bot {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}

.ca__out {
  display: flex;
  align-items: baseline;
  gap: calc(16 * var(--u));
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.4;
}

.ca__sq {
  flex: none;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  background: var(--lime);
  outline: 1.5px solid currentColor;
  transform: translateY(-2px);
}

.ca__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: calc(22 * var(--u));
  border-top: 1px solid var(--line);
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .22em;
  color: var(--ink3);
}

.ca__foot > :last-child {
  text-align: right;
}

.ca__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(40 * var(--u));
  background: var(--lime);
  color: var(--black);
  transform: translateY(101%);
  transition: transform .55s var(--expand);
}

.ca__c:hover .ca__panel,
.ca__c:focus-visible .ca__panel {
  transform: none;
}

.ca__pm {
  display: flex;
  justify-content: space-between;
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

.ca__blocks {
  display: flex;
  flex-direction: column;
}

.ca__b {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(26 * var(--u)) 0;
  border-top: 1.5px solid var(--black);
}

.ca__b:last-child {
  border-bottom: 1.5px solid var(--black);
}

.ca__bl {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
}

.ca__bt {
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.45;
}

.ca__bt--r {
  font-family: var(--display);
  font-size: calc(32 * var(--u));
  line-height: 1.1;
  letter-spacing: -.02em;
}

.ca__read {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(15px, calc(26 * var(--u)));
}

.ca__dot,
.cz__dot,
.pv__tdot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.ca__dot {
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  background: var(--black);
  color: var(--lime);
}

/* 64. Case studies: how we measure (panel), client quotes, CTA strip */
.cw {
  border-bottom: 0;
  background: var(--panel);
  color: var(--on-panel);
}

.cw .h2 em {
  color: var(--lime);
}

.cw__hint {
  padding-bottom: calc(14 * var(--u));
  color: var(--night-mute);
}

.cw__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--on-panel);
}

.cw__c {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--u));
  padding: calc(56 * var(--u)) calc(56 * var(--u)) calc(64 * var(--u));
}

.cw__c:first-child {
  padding-left: 0;
}

.cw__c:last-child {
  padding-right: 0;
}

.cw__c + .cw__c {
  border-left: 1px solid var(--night-line);
}

.cw__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(110 * var(--u));
  line-height: .8;
  color: var(--lime);
}

.cw__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(48 * var(--u));
  letter-spacing: -.03em;
}

.cw__d {
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.55;
  color: #bdbab2;
}

.cw__note {
  margin-top: calc(20 * var(--u));
  padding-top: calc(36 * var(--u));
  border-top: 1px solid var(--night-line);
  font-size: max(12px, calc(20 * var(--u)));
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--night-mute);
}

.cq__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(40 * var(--u));
}

.cq__c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  min-height: calc(640 * var(--u));
  padding: calc(44 * var(--u)) calc(48 * var(--u)) calc(40 * var(--u));
  border: 2px solid var(--ink);
}

.cq__c--lime {
  background: var(--lime);
  color: var(--black);
}

.cq__m {
  height: calc(60 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(160 * var(--u));
  line-height: .5;
}

.cq__q {
  flex: 1;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(46 * var(--u));
  line-height: 1.2;
  letter-spacing: -.01em;
}

.cq__foot {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
  padding-top: calc(26 * var(--u));
  border-top: 1.5px solid currentColor;
}

.cq__who {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}

.cq__av {
  flex: none;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border: 1.5px solid currentColor;
  border-radius: 50%;
  object-fit: cover;
}

.cq__nr {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}

.cq__n {
  font-size: max(15px, calc(26 * var(--u)));
}

.cq__r {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .2em;
}

.cq__link {
  display: flex;
  justify-content: space-between;
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
  transition: opacity .2s;
}

.cq__link span {
  font-size: calc(22 * var(--u));
}

.cq__link:hover {
  opacity: .65;
}

.cz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(80 * var(--u));
  padding: calc(90 * var(--u)) var(--gut);
  background: var(--lime);
  color: var(--black);
}

.cz__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(120 * var(--u));
  line-height: .9;
  letter-spacing: -.045em;
}

.cz__h em,
.pv__tt2 em {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: -.02em;
}

.cz__h em {
  font-size: calc(132 * var(--u));
}

.cz__r {
  display: flex;
  align-items: center;
  gap: calc(44 * var(--u));
}

.cz__note {
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.45;
}

.cz__btn,
.pv__tb {
  display: flex;
  align-items: center;
  background: var(--black);
  color: #fcfbf8;
  white-space: nowrap;
  transition: background-color .2s;
}

.cz__btn:hover,
.pv__tb:hover {
  background: #262626;
}

.cz__btn {
  gap: calc(44 * var(--u));
  height: calc(110 * var(--u));
  padding: 0 calc(18 * var(--u)) 0 calc(48 * var(--u));
  font-size: max(16px, calc(30 * var(--u)));
}

.cz__dot,
.pv__tdot {
  background: var(--lime);
  color: var(--black);
}

.cz__dot {
  width: calc(74 * var(--u));
  height: calc(74 * var(--u));
}

/* 65. Case study: at a glance, risks, timeline, results, sidebar call, case nav */
.cg {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: calc(10 * var(--u));
}

.cg__h {
  padding-bottom: calc(18 * var(--u));
  border-bottom: 2px solid var(--ink);
  font-family: var(--sans);
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
}

.cg__r {
  display: grid;
  grid-template-columns: calc(220 * var(--u)) minmax(0, 1fr);
  gap: calc(20 * var(--u));
  padding: calc(20 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
}

.cg__r dt {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.cg__r dd {
  margin: 0;
  font-size: max(15px, calc(24 * var(--u)));
  font-weight: 500;
}

.cg__r--res {
  margin-top: calc(6 * var(--u));
  padding: calc(24 * var(--u)) calc(20 * var(--u));
  border: 0;
  background: var(--lime);
  color: var(--black);
}

.cg__r--res dt {
  color: inherit;
}

.cg__r--res dd {
  font-family: var(--display);
  font-size: calc(28 * var(--u));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.p-case .pa {
  min-width: 0;
}

.ck,
.ce {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--ink);
}

.ck__c {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
  min-height: calc(400 * var(--u));
  padding: calc(40 * var(--u)) calc(36 * var(--u)) calc(44 * var(--u));
}

.ck__c + .ck__c,
.ce__c + .ce__c {
  border-left: 2px solid var(--ink);
}

.ck__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.ck__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(80 * var(--u));
  line-height: .8;
}

.ck__lv {
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  box-shadow: inset 0 0 0 1.5px currentColor;
  font-size: max(10px, calc(14 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.ck__lv--high {
  background: var(--lime);
  color: var(--black);
  box-shadow: none;
}

.ck__t {
  font-family: var(--display);
  font-size: calc(36 * var(--u));
  line-height: 1.05;
  letter-spacing: -.02em;
}

.ck__d {
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.5;
  color: var(--ink2);
}

.cy {
  border-top: 2px solid var(--ink);
}

.cy__s {
  display: grid;
  grid-template-columns: calc(180 * var(--u)) calc(70 * var(--u)) minmax(0, 1fr) calc(60 * var(--u));
  gap: calc(30 * var(--u));
  align-items: start;
  width: 100%;
  padding: calc(36 * var(--u)) calc(30 * var(--u)) calc(36 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  transition: background-color .25s, color .25s;
}

.cy__s:hover {
  background: var(--hover);
}

.cy__i.is-open .cy__s {
  background: var(--inv);
  color: var(--on-inv);
}

.cy__w {
  padding: calc(10 * var(--u)) 0 0 calc(30 * var(--u));
  font-size: max(11px, calc(17 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.cy__node {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  margin-top: calc(4 * var(--u));
  border: 2px solid currentColor;
}

.cy__i.is-done .cy__node {
  background: var(--lime);
}

.cy__tw {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.cy__t {
  font-family: var(--display);
  font-size: calc(42 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.cy__d {
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.55;
}

.cy__d[hidden] {
  display: none;
}

.cy__ic {
  font-size: calc(36 * var(--u));
  line-height: 1;
}

.cy__ic::before {
  content: "+";
}

.cy__i.is-open .cy__ic::before {
  content: "−";
}

.ce__c {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
  padding: calc(40 * var(--u)) calc(36 * var(--u)) calc(44 * var(--u));
}

.ce__c--lime {
  background: var(--lime);
  color: var(--black);
}

.ce__l {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.ce__v {
  font-family: var(--display);
  font-size: calc(120 * var(--u));
  line-height: .85;
  letter-spacing: -.05em;
}

.ce__v em {
  font-size: calc(70 * var(--u));
}

.ce__d {
  font-size: max(14px, calc(22 * var(--u)));
  color: var(--ink2);
}

.ce__c--lime .ce__l,
.ce__c--lime .ce__d {
  color: inherit;
}

.pa__q--panel {
  margin: calc(30 * var(--u)) 0 0;
  background: var(--panel);
  color: var(--on-panel);
}

.pa__q--panel .pa__qm,
.pa__q--panel .pa__qb {
  color: var(--lime);
}

.pa__disc {
  padding-top: calc(40 * var(--u));
  border-top: 2px solid var(--ink);
  font-size: max(11px, calc(18 * var(--u)));
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--ink3);
}

.pv__talk {
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
  padding: calc(40 * var(--u)) calc(36 * var(--u));
  background: var(--lime);
  color: var(--black);
}

.pv__tt2 {
  font-family: var(--display);
  font-size: calc(44 * var(--u));
  line-height: .95;
  letter-spacing: -.035em;
}

.pv__tt2 em {
  font-size: calc(48 * var(--u));
  letter-spacing: -.01em;
}

.pv__tn {
  font-size: max(14px, calc(22 * var(--u)));
  line-height: 1.5;
}

.pv__tb {
  justify-content: space-between;
  height: calc(84 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(32 * var(--u));
  font-size: max(15px, calc(24 * var(--u)));
}

.pv__tdot {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
}

.cn {
  display: flex;
  flex-direction: column;
  gap: calc(64 * var(--u));
  padding: 0 var(--gut) calc(160 * var(--u));
}

.cn__pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.cn__prev,
.cn__next {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  transition: background-color .2s;
}

.cn__prev {
  padding: calc(48 * var(--u)) calc(56 * var(--u)) calc(48 * var(--u)) 0;
}

.cn__prev:hover {
  background: var(--hover);
}

.cn__next {
  align-items: flex-end;
  padding: calc(48 * var(--u)) 0 calc(48 * var(--u)) calc(56 * var(--u));
  border-left: 2px solid var(--ink);
  text-align: right;
}

.cn__next:hover {
  background: var(--lime);
  color: var(--black);
}

.cn__k {
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .24em;
}

.cn__prev .cn__k {
  color: var(--ink3);
}

.cn__pt {
  font-family: var(--display);
  font-size: calc(52 * var(--u));
  line-height: 1;
  letter-spacing: -.035em;
}

.rl__head.cn__head {
  padding-top: calc(40 * var(--u));
  border-top: 0;
}

.cn__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(40 * var(--u));
}

.cn__c {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--ink);
}

.cn__c:hover .bp__bar,
.cn__c:focus-visible .bp__bar {
  width: 100%;
}

.cn__b {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  padding: calc(36 * var(--u)) calc(40 * var(--u));
}

.cn__t {
  font-family: var(--display);
  font-size: calc(42 * var(--u));
  line-height: 1;
  letter-spacing: -.035em;
}

.cn__out {
  font-size: max(15px, calc(24 * var(--u)));
}

.cn__out .ca__sq {
  transform: none;
}

/* 66. Case studies and case study: tablet and phone (below 1200px). Panels and hovers show in the flow. */
@media (max-width: 1199.98px) {
  .cr__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cr__c,
  .cr__c:first-child,
  .cr__c:last-child {
    gap: 14px;
    padding: 28px 20px;
  }

  .cr__c:nth-child(odd) {
    padding-left: var(--gut);
  }

  .cr__c:nth-child(even) {
    padding-right: var(--gut);
  }

  .cr__c:nth-child(3) {
    border-left: 0;
  }

  .cr__c:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .cr__v {
    font-size: clamp(46px, 9vw, 90px);
  }

  .cr__v em,
  .ce__v em {
    font-size: .72em;
  }

  .cx,
  .ca,
  .cw,
  .cq {
    padding: 72px var(--gut);
  }

  .cx .shead,
  .ca .shead,
  .cw .shead,
  .cq .shead {
    margin-bottom: 36px;
  }

  .cx__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .cx__pic {
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-right: 0;
    border-bottom: 2px solid var(--ink);
  }

  .cx__txt {
    gap: 28px;
    padding: 24px;
  }

  .cx__top {
    gap: 18px;
  }

  .cx__chips {
    flex-wrap: wrap;
    gap: 8px;
  }

  .cx__chip,
  .po__chip--o {
    padding: 6px 10px;
  }

  .cx__t {
    font-size: clamp(28px, 5.4vw, 52px);
  }

  .cx__row {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
  }

  .cx__out {
    font-size: 20px;
  }

  .cx__q {
    max-width: none;
    font-size: clamp(20px, 3.2vw, 26px);
  }

  .cx__go {
    width: 52px;
    height: 52px;
  }

  .cx__go .ico {
    width: 18px;
    height: 18px;
  }

  .ca__seg button {
    padding: 10px 14px;
  }

  .ca__tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 28px;
    background: var(--ink);
  }

  .ca__tab,
  .ca__tab + .ca__tab {
    padding: 14px 16px;
    border-left: 0;
    background: var(--bg);
  }

  .ca__tn {
    font-size: 16px;
  }

  .ca__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .ca__c {
    height: auto;
  }

  .ca__panel {
    display: none;
  }

  .ca__body,
  .cn__b {
    gap: 18px;
    padding: 20px 22px 22px;
  }

  .ca__top {
    gap: 14px;
  }

  .ca__t,
  .cn__t {
    font-size: clamp(21px, 2.8vw, 26px);
  }

  .ca__bot {
    gap: 14px;
  }

  .ca__out {
    gap: 12px;
  }

  .ca__sq {
    width: 10px;
    height: 10px;
  }

  .ca__foot {
    padding-top: 14px;
  }

  .cw__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cw__c,
  .cw__c:first-child,
  .cw__c:last-child {
    gap: 14px;
    padding: 28px 0;
  }

  .cw__c + .cw__c {
    border-top: 1px solid var(--night-line);
    border-left: 0;
  }

  .cw__n {
    font-size: 56px;
  }

  .cw__t {
    font-size: 26px;
  }

  .cw__note {
    margin-top: 8px;
    padding-top: 20px;
  }

  .cq__grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }

  .cq__c {
    gap: 24px;
    min-height: 0;
    padding: 28px 24px 24px;
  }

  .cq__m {
    height: 36px;
    font-size: 100px;
  }

  .cq__q {
    font-size: clamp(22px, 3.4vw, 28px);
  }

  .cq__foot {
    gap: 14px;
    padding-top: 18px;
  }

  .cq__who {
    gap: 14px;
  }

  .cq__av {
    width: 46px;
    height: 46px;
  }

  .cq__link span {
    font-size: 16px;
  }

  .cz {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 56px var(--gut);
  }

  .cz__h {
    font-size: clamp(40px, 8vw, 80px);
  }

  .cz__h em {
    font-size: 1.1em;
  }

  .cz__r {
    flex-wrap: wrap;
    gap: 20px 28px;
  }

  .cz__btn {
    gap: 22px;
    height: 62px;
    padding: 0 8px 0 24px;
  }

  .cz__dot {
    width: 46px;
    height: 46px;
  }

  .cg {
    padding-bottom: 0;
  }

  .cg__h {
    padding-bottom: 12px;
  }

  .cg__r {
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
  }

  .cg__r--res {
    margin-top: 4px;
    padding: 16px 14px;
  }

  .cg__r--res dd {
    font-size: 20px;
  }

  .ck,
  .ce {
    grid-template-columns: minmax(0, 1fr);
  }

  .ck__c,
  .ce__c {
    gap: 14px;
    min-height: 0;
    padding: 22px 20px;
  }

  .ck__c + .ck__c,
  .ce__c + .ce__c {
    border-top: 2px solid var(--ink);
    border-left: 0;
  }

  .ck__n {
    font-size: 48px;
  }

  .ck__lv {
    padding: 4px 8px;
  }

  .ck__t {
    font-size: 22px;
  }

  .cy__s {
    grid-template-columns: 76px 26px minmax(0, 1fr) 22px;
    gap: 12px;
    padding: 18px 12px 18px 0;
  }

  .cy__w {
    padding: 4px 0 0 12px;
  }

  .cy__node {
    width: 24px;
    height: 24px;
    margin-top: 0;
  }

  .cy__tw {
    gap: 10px;
  }

  .cy__t {
    font-size: clamp(19px, 3vw, 26px);
  }

  .cy__ic {
    font-size: 22px;
  }

  .ce__v {
    font-size: clamp(48px, 9vw, 80px);
  }

  .pa__q--panel {
    margin-top: 12px;
  }

  .pa__disc {
    padding-top: 22px;
  }

  .pv__talk {
    gap: 16px;
    padding: 28px 24px;
  }

  .pv__tt2 {
    font-size: 30px;
  }

  .pv__tb {
    justify-self: start;
    gap: 20px;
    height: 58px;
    padding: 0 8px 0 22px;
  }

  .pv__tdot {
    width: 42px;
    height: 42px;
  }

  .cn {
    gap: 36px;
    padding: 0 var(--gut) 72px;
  }

  .cn__pn {
    grid-template-columns: minmax(0, 1fr);
  }

  .cn__prev,
  .cn__next {
    gap: 10px;
    padding: 22px 0;
  }

  .cn__next {
    border-top: 2px solid var(--ink);
    border-left: 0;
  }

  .cn__pt {
    font-size: clamp(22px, 4vw, 34px);
  }

  .rl__head.cn__head {
    padding-top: 0;
  }

  .cn__grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
  }
}

/* 67. Case studies and case study: phone (below 600px) */
@media (max-width: 599.98px) {
  .ca__tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ca__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cx__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .cy__s {
    grid-template-columns: 26px minmax(0, 1fr) 22px;
    padding-left: 12px;
  }

  .cy__w {
    grid-area: 1 / 2;
    padding: 0;
  }

  .cy__node {
    grid-area: 1 / 1 / 3;
  }

  .cy__tw {
    grid-area: 2 / 2;
  }

  .cy__ic {
    grid-area: 1 / 3;
  }

  .cg__r {
    grid-template-columns: 104px minmax(0, 1fr);
  }
}

/* 68. Fees: fee models (audience switch swaps example and price) */
.fy__grid,
.fg__t,
.fi__list,
.fb__steps,
.fb__chips,
.fk__list {
  padding: 0;
  list-style: none;
}

.fy__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--ink);
}

.fy__c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(44 * var(--u));
  min-height: calc(900 * var(--u));
  padding: calc(48 * var(--u)) calc(48 * var(--u)) calc(44 * var(--u));
}

.fy__c + .fy__c {
  border-left: 2px solid var(--ink);
}

.fy__c--lime {
  background: var(--lime);
  color: var(--black);
}

.fy__c--inv {
  background: var(--inv);
  color: var(--on-inv);
}

.fy__top {
  display: flex;
  flex-direction: column;
  gap: calc(34 * var(--u));
}

.fy__k {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

.fy__n {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(120 * var(--u));
  line-height: .85;
  letter-spacing: -.05em;
}

.fy__d {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(44 * var(--u));
  line-height: 1.2;
  letter-spacing: -.01em;
}

.fy__bot {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
}

.fy__best,
.fy__ex {
  display: flex;
  flex-direction: column;
}

.fy__best {
  gap: calc(12 * var(--u));
  padding-top: calc(24 * var(--u));
  border-top: 1.5px solid currentColor;
}

.fy__ex {
  gap: calc(14 * var(--u));
  padding: calc(26 * var(--u)) calc(28 * var(--u));
  border: 1.5px solid currentColor;
}

.fy__l {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
}

.fy__bt {
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.5;
}

.fy__et {
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.4;
}

.fy__p {
  font-family: var(--display);
  font-size: calc(52 * var(--u));
  letter-spacing: -.03em;
}

/* 69. Fees: guide prices (a real table; each row is a grid) */
.ca__tabs.fg__tabs {
  margin-bottom: calc(40 * var(--u));
}

.fg__t {
  display: block;
  width: 100%;
  border-collapse: collapse;
}

.fg__t thead,
.fg__b {
  display: block;
}

.fg__b {
  border-top: 2px solid var(--ink);
}

.fg__r {
  display: grid;
  grid-template-columns: calc(300 * var(--u)) minmax(0, 1fr) calc(240 * var(--u)) calc(240 * var(--u)) calc(320 * var(--u));
  gap: calc(48 * var(--u));
  align-items: center;
  padding: calc(36 * var(--u));
  border-bottom: 1px solid var(--line);
  transition: background-color .2s, color .2s;
}

.fg__b .fg__r:hover {
  background: var(--lime);
  color: var(--black);
}

.fg__r[hidden] {
  display: none;
}

.fg__r td,
.fg__r th {
  padding: 0;
}

.fg__r--h {
  padding: 0 calc(36 * var(--u)) calc(22 * var(--u));
  border: 0;
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.fg__r--h th {
  font-weight: 400;
  text-align: left;
}

.fg__a {
  font-size: max(11px, calc(17 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.fg__s {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.fg__st {
  font-family: var(--display);
  font-size: calc(38 * var(--u));
  letter-spacing: -.025em;
}

.fg__sd {
  font-size: max(14px, calc(22 * var(--u)));
  opacity: .75;
}

.fg__m {
  display: inline-block;
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1.5px solid currentColor;
  font-size: max(10px, calc(15 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.fg__w {
  font-size: max(15px, calc(24 * var(--u)));
}

.fg__p {
  font-family: var(--display);
  font-size: calc(52 * var(--u));
  letter-spacing: -.03em;
  text-align: right;
}

.fg__r--h th.fg__p {
  font: inherit;
  letter-spacing: inherit;
  text-align: right;
}

/* 70. Fees: estimator (controls on the left, lime result on the right) */
.fe__box {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border: 2px solid var(--ink);
}

.fe__ctl {
  display: flex;
  flex-direction: column;
}

.fe__q {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  padding: calc(44 * var(--u)) calc(48 * var(--u));
  border-bottom: 1px solid var(--line);
}

.fe__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fe__row .fe__q {
  border-bottom: 0;
}

.fe__row .fe__q:first-child {
  border-right: 1px solid var(--line);
}

.fe__l {
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
}

.fe__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
}

.fe__chip {
  padding: calc(18 * var(--u)) calc(26 * var(--u));
  border: 2px solid var(--ink);
  font-size: max(12px, calc(19 * var(--u)));
  font-weight: 500;
  letter-spacing: .2em;
  transition: background-color .2s;
}

.fe__chip:hover {
  background: var(--hover);
}

.fe__chip[aria-pressed="true"] {
  background: var(--lime);
  color: var(--black);
}

.fe__cxs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--ink);
}

.fe__cx {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(26 * var(--u)) calc(28 * var(--u));
  text-align: left;
  transition: background-color .2s;
}

.fe__cx + .fe__cx {
  border-left: 2px solid var(--ink);
}

.fe__cx:hover {
  background: var(--hover);
}

.fe__cx[aria-pressed="true"],
.ca__seg.fe__ur [aria-pressed="true"] {
  background: var(--inv);
  color: var(--accent-txt);
}

.fe__cxt {
  font-family: var(--display);
  font-size: calc(32 * var(--u));
  letter-spacing: -.02em;
}

.fe__cxd {
  font-size: max(12px, calc(20 * var(--u)));
  line-height: 1.4;
  opacity: .8;
}

.ca__seg.fe__ur button {
  flex: 1;
  padding: calc(22 * var(--u)) 0;
  font-size: max(12px, calc(19 * var(--u)));
  letter-spacing: .2em;
  text-align: center;
}

.fe__sw {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  font-size: max(15px, calc(24 * var(--u)));
  text-align: left;
}

.fe__track {
  position: relative;
  flex: none;
  width: calc(104 * var(--u));
  height: calc(52 * var(--u));
  border: 2px solid var(--ink);
  transition: background-color .25s;
}

.fe__knob {
  position: absolute;
  top: calc(4 * var(--u));
  left: calc(4 * var(--u));
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  background: var(--ink);
  transition: left .25s;
}

.fe__sw[aria-checked="true"] .fe__track {
  background: var(--lime);
}

.fe__sw[aria-checked="true"] .fe__knob {
  left: calc(56 * var(--u));
}

.fe__res {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  padding: calc(48 * var(--u)) calc(52 * var(--u)) calc(44 * var(--u));
  border-left: 2px solid var(--ink);
  background: var(--lime);
  color: var(--black);
}

.fe__nums {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}

.fe__lo {
  font-family: var(--display);
  font-size: calc(116 * var(--u));
  line-height: .88;
  letter-spacing: -.05em;
}

.fe__hi {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(56 * var(--u));
  line-height: 1;
}

.fe__dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-top: 1.5px solid var(--black);
}

.fe__dl > div {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)) 0;
  border-right: 1.5px solid var(--black);
}

.fe__dl > div + div {
  padding: calc(24 * var(--u)) 0 calc(24 * var(--u)) calc(24 * var(--u));
  border-right: 0;
}

.fe__dl dt {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
}

.fe__dl dd {
  margin: 0;
  font-family: var(--display);
  font-size: calc(40 * var(--u));
  letter-spacing: -.02em;
}

.fe__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(96 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(40 * var(--u));
  background: var(--black);
  color: #fcfbf8;
  font-size: max(16px, calc(27 * var(--u)));
  transition: background-color .2s;
}

.fe__btn:hover {
  background: #262626;
}

.fe__dot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
}

/* 71. Fees: included / separate */
.fi__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ink);
}

.fi__half {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
  padding: calc(48 * var(--u)) calc(56 * var(--u)) calc(52 * var(--u));
}

.fi__half--inv {
  border-left: 2px solid var(--ink);
  background: var(--inv);
  color: var(--on-inv);
}

.fi__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(20 * var(--u));
  font-weight: 400;
}

.fi__ht {
  font-family: var(--display);
  font-size: calc(64 * var(--u));
  letter-spacing: -.04em;
}

.fi__hn {
  font-family: var(--sans);
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.fi__half--inv .fi__hn,
.fi__n {
  color: var(--accent-txt);
}

.fi__list {
  border-top: 2px solid var(--ink);
}

.fi__half--inv .fi__list {
  border-top-color: var(--on-inv);
}

.fi__list li {
  display: grid;
  grid-template-columns: calc(52 * var(--u)) minmax(0, 1fr);
  gap: calc(22 * var(--u));
  align-items: center;
  padding: calc(24 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  font-size: max(16px, calc(27 * var(--u)));
}

.fi__half--inv .fi__list li {
  grid-template-columns: calc(52 * var(--u)) minmax(0, 1fr) auto;
  border-bottom-color: #8d8a8355;
}

.fi__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: calc(24 * var(--u));
}

.fi__half--inv .fi__ic {
  border: 1.5px solid var(--on-inv);
  background: transparent;
  color: inherit;
}

.fi__n {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .22em;
}

/* 72. Fees: billing steps (hover fills the bar up to the step) and money questions */
.fb__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}

.fb__s {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
  padding: calc(60 * var(--u)) calc(48 * var(--u)) calc(56 * var(--u)) 0;
}

.fb__s + .fb__s {
  padding-left: calc(48 * var(--u));
  border-left: 1px solid var(--line);
}

.fb__bar {
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  height: calc(10 * var(--u));
  transition: background-color .3s;
}

.fb__s.is-on .fb__bar {
  background: var(--lime);
}

.fb__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.fb__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(110 * var(--u));
  line-height: .8;
}

.fb__w {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
  transition: background-color .3s, color .3s;
}

.fb__s.is-cur .fb__w {
  background: var(--lime);
  color: var(--black);
}

.fb__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(48 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.fb__d {
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.55;
  color: var(--ink2);
}

.fb__pay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(60 * var(--u));
  align-items: center;
  margin-top: calc(40 * var(--u));
  padding: calc(36 * var(--u)) calc(44 * var(--u));
  border: 2px solid var(--ink);
}

.fb__acc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(28 * var(--u));
}

.fb__al {
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
}

.fb__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
}

.fb__chips li {
  padding: calc(12 * var(--u)) calc(20 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .1em;
}

.fb__note {
  padding: calc(16 * var(--u)) calc(24 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(15px, calc(24 * var(--u)));
}

.fk__list {
  border-top: 2px solid var(--ink);
}

.fk__b {
  display: grid;
  grid-template-columns: calc(140 * var(--u)) minmax(0, 1fr) calc(90 * var(--u));
  gap: calc(40 * var(--u));
  align-items: start;
  width: 100%;
  padding: calc(40 * var(--u)) calc(36 * var(--u));
  border-bottom: 1px solid var(--line);
  text-align: left;
  transition: background-color .25s;
}

.fk__b:hover {
  background: var(--hover);
}

.fk__i.is-open .fk__b {
  background: var(--lime);
  color: var(--black);
}

.fk__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(64 * var(--u));
  line-height: .85;
}

.fk__w {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}

.fk__q {
  font-family: var(--display);
  font-size: calc(50 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.fk__a {
  max-width: calc(1500 * var(--u));
  font-size: max(16px, calc(28 * var(--u)));
  line-height: 1.55;
}

.fk__a[hidden] {
  display: none;
}

.fk__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  border: 2px solid currentColor;
  font-size: calc(36 * var(--u));
}

.fk__ic::before {
  content: "+";
}

.fk__i.is-open .fk__ic::before {
  content: "−";
}

/* 73. Fees: tablet and phone (below 1200px). The price table becomes stacked cards. */
@media (max-width: 1199.98px) {
  .fy__grid,
  .fe__box,
  .fi__box {
    grid-template-columns: minmax(0, 1fr);
  }

  .fy__c {
    gap: 28px;
    min-height: 0;
    padding: 28px 24px;
  }

  .fy__c + .fy__c {
    border-top: 2px solid var(--ink);
    border-left: 0;
  }

  .fy__top {
    gap: 18px;
  }

  .fy__n {
    font-size: clamp(40px, 9vw, 84px);
  }

  .fy__d {
    font-size: clamp(21px, 3.4vw, 28px);
  }

  .fy__bot {
    gap: 18px;
  }

  .fy__best {
    padding-top: 16px;
  }

  .fy__ex {
    gap: 10px;
    padding: 18px;
  }

  .fy__p {
    font-size: 32px;
  }

  .ca__tabs.fg__tabs {
    margin-bottom: 24px;
  }

  .fg__r--h {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .fg__r {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 16px;
    padding: 20px 4px;
  }

  .fg__s {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 6px;
  }

  .fg__st {
    font-size: 20px;
  }

  .fg__m {
    padding: 4px 8px;
  }

  .fg__p {
    font-size: 26px;
  }

  .fe__q {
    gap: 14px;
    padding: 22px 20px;
  }

  .fe__chip {
    padding: 10px 14px;
  }

  .fe__cx {
    padding: 14px 16px;
  }

  .fe__cxt {
    font-size: 18px;
  }

  .ca__seg.fe__ur button {
    padding: 14px 0;
  }

  .fe__track {
    width: 64px;
    height: 34px;
  }

  .fe__knob {
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
  }

  .fe__sw[aria-checked="true"] .fe__knob {
    left: 33px;
  }

  .fe__res {
    gap: 24px;
    padding: 26px 22px;
    border-top: 2px solid var(--ink);
    border-left: 0;
  }

  .fe__nums {
    gap: 10px;
  }

  .fe__lo {
    font-size: clamp(44px, 9vw, 80px);
  }

  .fe__hi {
    font-size: 26px;
  }

  .fe__dl > div {
    padding: 16px 12px 16px 0;
  }

  .fe__dl > div + div {
    padding: 16px 0 16px 12px;
  }

  .fe__dl dd {
    font-size: 22px;
  }

  .fe__btn {
    height: 60px;
    padding: 0 8px 0 22px;
  }

  .fe__dot {
    width: 44px;
    height: 44px;
  }

  .fi__half {
    gap: 18px;
    padding: 24px 20px;
  }

  .fi__half--inv {
    border-top: 2px solid var(--ink);
    border-left: 0;
  }

  .fi__ht {
    font-size: 34px;
  }

  .fi__list li,
  .fi__half--inv .fi__list li {
    gap: 14px;
    padding: 14px 0;
  }

  .fi__list li {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .fi__half--inv .fi__list li {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .fi__ic {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .fb__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fb__s,
  .fb__s + .fb__s {
    gap: 14px;
    padding: 28px 20px 28px 0;
  }

  .fb__s:nth-child(even) {
    padding-left: 20px;
  }

  .fb__s:nth-child(odd) {
    border-left: 0;
  }

  .fb__s:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .fb__bar {
    height: 6px;
  }

  .fb__n {
    font-size: 56px;
  }

  .fb__w {
    padding: 4px 8px;
  }

  .fb__t {
    font-size: 24px;
  }

  .fb__pay {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 24px;
    padding: 20px;
  }

  .fb__acc {
    gap: 12px 18px;
  }

  .fb__chips {
    gap: 8px;
  }

  .fb__chips li {
    padding: 8px 12px;
  }

  .fb__note {
    padding: 12px 16px;
  }

  .fk__b {
    grid-template-columns: 44px minmax(0, 1fr) 36px;
    gap: 14px;
    padding: 20px 14px;
  }

  .fk__n {
    font-size: 32px;
  }

  .fk__w {
    gap: 12px;
  }

  .fk__q {
    font-size: clamp(19px, 3.2vw, 28px);
  }

  .fk__a {
    max-width: none;
  }

  .fk__ic {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

/* 74. Fees: phone (below 600px) */
@media (max-width: 599.98px) {
  .fe__row,
  .fe__cxs,
  .fb__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .fe__row .fe__q:first-child {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .fe__cx + .fe__cx {
    border-top: 2px solid var(--ink);
    border-left: 0;
  }

  .fb__s,
  .fb__s + .fb__s,
  .fb__s:nth-child(even) {
    padding: 24px 0;
    border-left: 0;
  }

  .fb__s + .fb__s {
    border-top: 1px solid var(--line);
  }

  .fy__k {
    flex-direction: column;
    gap: 6px;
  }
}

/* 75. FAQ: search bar and topic tiles */
.qs {
  display: flex;
  flex-direction: column;
  gap: calc(56 * var(--u));
  padding: calc(120 * var(--u)) var(--gut) calc(140 * var(--u));
  border-bottom: 1px solid var(--line);
}

.qs__bar {
  display: flex;
  align-items: center;
  gap: calc(36 * var(--u));
  height: calc(150 * var(--u));
  padding: 0 calc(20 * var(--u)) 0 calc(48 * var(--u));
  border: 2px solid var(--ink);
}

.qs__bar:focus-within {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.qs__glass {
  font-size: calc(56 * var(--u));
  line-height: 1;
}

.qs__in {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: max(18px, calc(50 * var(--u)));
  color: var(--ink);
}

.qs__in::placeholder {
  color: var(--ink3);
}

.qs__clear {
  flex: none;
  padding: calc(16 * var(--u)) calc(24 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .22em;
}

.qs__clear:hover {
  background: var(--hover);
}

.qs__clear[hidden] {
  display: none;
}

.qs__go {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(110 * var(--u));
  height: calc(110 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: calc(44 * var(--u));
}

.qs__go:hover {
  background: var(--lime-hover);
}

.qs__status {
  font-size: max(12px, calc(20 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.qs__tiles,
.qp__grid,
.ql__navl,
.ql__list {
  padding: 0;
  list-style: none;
}

.qs__tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 2px solid var(--ink);
}

.qs__tiles li + li {
  border-left: 2px solid var(--ink);
}

.qs__t {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: calc(362 * var(--u));
  padding: calc(32 * var(--u)) calc(32 * var(--u)) calc(30 * var(--u));
  transition: background-color .2s, color .2s;
}

.qs__t:hover,
.qs__t:focus-visible {
  background: var(--lime);
  color: var(--black);
}

.qs__tk {
  display: flex;
  justify-content: space-between;
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .24em;
}

.qs__tn {
  font-family: var(--display);
  font-size: calc(40 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.qs__ts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: max(12px, calc(20 * var(--u)));
}

.qs__ts span {
  font-size: calc(28 * var(--u));
}

/* 76. FAQ: most asked cards */
.qp__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(32 * var(--u));
}

.qp__c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(30 * var(--u));
  height: 100%;
  min-height: calc(700 * var(--u));
  padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(36 * var(--u));
  border: 2px solid var(--ink);
  background: var(--bg);
  transition: transform .3s;
}

.qp__c:hover,
.qp__c:focus-visible {
  transform: translateY(-8px);
}

.qp__c--lime {
  background: var(--lime);
  color: var(--black);
}

.qp__c--inv {
  background: var(--inv);
  color: var(--on-inv);
}

.qp__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.qp__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(96 * var(--u));
  line-height: .8;
}

.qp__tag {
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border: 1.5px solid currentColor;
  font-size: max(10px, calc(14 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.qp__q {
  font-family: var(--display);
  font-size: calc(44 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.qp__s {
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.5;
}

.qp__f {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(22 * var(--u));
  border-top: 1.5px solid currentColor;
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.qp__f span {
  font-size: calc(26 * var(--u));
}

/* 77. FAQ: all questions (sticky topic nav with scroll-spy, accordion groups) */
.ql__grid {
  display: grid;
  grid-template-columns: calc(520 * var(--u)) minmax(0, 1fr);
  gap: calc(90 * var(--u));
  align-items: start;
}

.ql__nav {
  position: sticky;
  top: calc(40 * var(--u));
  display: flex;
  flex-direction: column;
}

.ql__navl {
  border-top: 2px solid var(--ink);
}

.ql__t {
  display: grid;
  grid-template-columns: calc(60 * var(--u)) minmax(0, 1fr) calc(50 * var(--u));
  gap: calc(14 * var(--u));
  align-items: center;
  padding: calc(26 * var(--u)) calc(24 * var(--u));
  border-bottom: 1px solid var(--line);
  transition: background-color .2s, padding .2s, opacity .2s;
}

.ql__t:hover {
  padding-left: calc(36 * var(--u));
}

.ql__t[aria-current] {
  background: var(--lime);
  color: var(--black);
}

.ql__t.is-dim {
  opacity: .35;
}

.ql__tn {
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .2em;
}

.ql__tt {
  font-size: max(12px, calc(20 * var(--u)));
  font-weight: 500;
  letter-spacing: .18em;
}

.ql__tc {
  font-family: var(--display);
  font-size: calc(22 * var(--u));
  text-align: right;
}

.ql__ask {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: calc(32 * var(--u));
  padding: calc(28 * var(--u));
  background: var(--inv);
  color: var(--on-inv);
  font-size: calc(30 * var(--u));
  transition: background-color .2s;
}

.ql__ask:hover {
  background: var(--inv-hover);
}

.ql__aw {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.ql__al {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--accent-txt);
}

.ql__at {
  font-family: var(--display);
  font-size: calc(30 * var(--u));
  letter-spacing: -.02em;
}

.ql__groups {
  display: flex;
  flex-direction: column;
  gap: calc(100 * var(--u));
  min-width: 0;
}

.ql__g {
  display: flex;
  flex-direction: column;
  scroll-margin-top: 40px;
}

.ql__g[hidden],
.ql__i[hidden],
.ql__p[hidden],
.ql__empty[hidden] {
  display: none;
}

.ql__gh {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(20 * var(--u));
  padding-bottom: calc(28 * var(--u));
  border-bottom: 2px solid var(--ink);
  font-weight: 400;
}

.ql__gl {
  display: flex;
  align-items: baseline;
  gap: calc(30 * var(--u));
}

.ql__gn {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(80 * var(--u));
  line-height: .8;
}

.ql__gt {
  font-family: var(--display);
  font-size: calc(72 * var(--u));
  letter-spacing: -.04em;
}

.ql__gc {
  font-family: var(--sans);
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.ql__i {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 40px;
  transition: background-color .25s;
}

.ql__i.is-open {
  background: var(--lime);
  color: var(--black);
}

.ql__h {
  font: inherit;
}

.ql__b {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(72 * var(--u));
  gap: calc(40 * var(--u));
  align-items: center;
  width: 100%;
  padding: calc(36 * var(--u));
  text-align: left;
}

.ql__i:not(.is-open) .ql__b:hover {
  background: var(--hover);
}

.ql__q {
  font-family: var(--display);
  font-size: calc(42 * var(--u));
  line-height: 1.05;
  letter-spacing: -.025em;
}

.ql__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border: 2px solid currentColor;
  font-size: calc(32 * var(--u));
}

.ql__ic::before {
  content: "+";
}

.ql__i.is-open .ql__ic::before {
  content: "−";
}

.ql__p {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
  padding: 0 calc(140 * var(--u)) calc(40 * var(--u)) calc(36 * var(--u));
}

.ql__a {
  max-width: calc(1300 * var(--u));
  font-size: max(16px, calc(29 * var(--u)));
  line-height: 1.55;
}

.ql mark,
.qp mark {
  background: var(--lime);
  color: var(--black);
}

.ql__f {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(30 * var(--u));
  padding-top: calc(24 * var(--u));
  border-top: 1.5px solid var(--black);
}

.ql__link {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  padding-bottom: calc(6 * var(--u));
  border-bottom: 2px solid var(--black);
  color: var(--black);
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.ql__link span {
  font-size: calc(22 * var(--u));
}

.ql__fb {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .22em;
}

.ql__fb[hidden],
.ql__thx[hidden] {
  display: none;
}

.ql__fb button {
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  border: 1.5px solid var(--black);
  letter-spacing: inherit;
}

.ql__fb button:hover {
  background: var(--black);
  color: var(--lime);
}

.ql__thx {
  padding: calc(10 * var(--u)) calc(18 * var(--u));
  background: var(--black);
  color: var(--lime);
  font-size: max(11px, calc(17 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.ql__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 * var(--u));
  padding: calc(120 * var(--u)) calc(60 * var(--u));
  border: 2px dashed var(--line);
  text-align: center;
}

.ql__et {
  font-family: var(--display);
  font-size: calc(64 * var(--u));
  letter-spacing: -.04em;
}

.ql__ed {
  font-size: max(15px, calc(26 * var(--u)));
  color: var(--ink2);
}

/* 78. FAQ: ask a partner (form + contact panel) */
.qa__box {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  border: 2px solid var(--ink);
}

.qa__form {
  display: flex;
  flex-direction: column;
}

.qa__form[hidden],
.qa__ok[hidden] {
  display: none;
}

.cf__f.qa__f {
  padding: calc(32 * var(--u)) calc(44 * var(--u));
}

.cf__f.qa__topics {
  gap: calc(18 * var(--u));
}

.cf__in.qa__in {
  font-size: max(16px, calc(30 * var(--u)));
}

.qa__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
}

.qa__chip {
  padding: calc(14 * var(--u)) calc(22 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .18em;
  transition: background-color .2s;
}

.qa__chip:hover {
  background: var(--hover);
}

.qa__chip[aria-pressed="true"] {
  background: var(--lime);
  color: var(--black);
}

.qa__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(30 * var(--u));
  padding: calc(26 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u)) calc(44 * var(--u));
}

.qa__go {
  display: flex;
  align-items: center;
  gap: calc(36 * var(--u));
  height: calc(96 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(44 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(16px, calc(28 * var(--u)));
  white-space: nowrap;
  transition: background-color .2s;
}

.qa__go:hover {
  background: var(--lime-hover);
}

.qa__dot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 50%;
  background: var(--black);
  color: var(--lime);
}

.qa__ok {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(32 * var(--u));
  padding: calc(80 * var(--u)) calc(60 * var(--u));
  background: var(--lime);
  color: var(--black);
}

.qa__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(110 * var(--u));
  height: calc(110 * var(--u));
  background: var(--black);
  color: var(--lime);
  font-size: calc(56 * var(--u));
}

.qa__oh {
  font-family: var(--display);
  font-size: calc(80 * var(--u));
  line-height: .9;
  letter-spacing: -.045em;
}

.qa__oh em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(88 * var(--u));
  letter-spacing: -.02em;
}

.qa__ot {
  font-size: max(16px, calc(28 * var(--u)));
  line-height: 1.5;
}

.qa__again {
  align-self: flex-start;
  padding: calc(16 * var(--u)) calc(26 * var(--u));
  border: 2px solid var(--black);
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.qa__again:hover {
  background: var(--black);
  color: var(--lime);
}

.qa__side {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--ink);
  background: var(--panel);
  color: var(--on-panel);
}

.qa__next {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  padding: calc(48 * var(--u)) calc(48 * var(--u)) calc(44 * var(--u));
  border-bottom: 1px solid #8d8a8355;
}

.qa__sl {
  font-size: max(10px, calc(16 * var(--u)));
  letter-spacing: .26em;
  color: var(--lime);
}

.qa__st {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(46 * var(--u));
  line-height: 1.2;
}

.qa__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(40 * var(--u)) calc(48 * var(--u));
  border-bottom: 1px solid #8d8a8355;
  transition: background-color .2s, color .2s;
}

.qa__row:hover {
  background: var(--lime);
  color: var(--black);
}

.qa__rw {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.qa__rl {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  opacity: .7;
}

.qa__rv {
  font-size: max(18px, calc(44 * var(--u)));
}

.qa__ra {
  font-size: calc(40 * var(--u));
}

.qa__hours {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  margin-top: auto;
  padding: calc(40 * var(--u)) calc(48 * var(--u));
}

.qa__hl,
.qa__hd {
  color: var(--night-mute);
}

.qa__hl {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
}

.qa__hv {
  font-size: max(15px, calc(26 * var(--u)));
}

.qa__hd {
  font-size: max(12px, calc(20 * var(--u)));
  line-height: 1.5;
}

/* 79. FAQ: tablet and phone (below 1200px). The topic nav becomes a sticky chip bar. */
@media (max-width: 1199.98px) {
  .qs {
    gap: 24px;
    padding: 40px var(--gut) 56px;
  }

  .qs__bar {
    gap: 14px;
    height: 72px;
    padding: 0 8px 0 18px;
  }

  .qs__glass {
    font-size: 26px;
  }

  .qs__clear {
    padding: 8px 12px;
  }

  .qs__go {
    width: 54px;
    height: 54px;
    font-size: 24px;
  }

  .qs__tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    background: var(--ink);
  }

  .qs__tiles li + li {
    border-left: 0;
  }

  .qs__t {
    gap: 14px;
    min-height: 150px;
    padding: 18px;
    background: var(--bg);
  }

  .qs__tn {
    font-size: clamp(16px, 2.8vw, 22px);
  }

  .qs__ts span {
    font-size: 18px;
  }

  .qp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .qp__c {
    gap: 22px;
    min-height: 0;
    padding: 24px;
  }

  .qp__n {
    font-size: 56px;
  }

  .qp__q {
    font-size: clamp(22px, 3vw, 28px);
  }

  .qp__f span {
    font-size: 18px;
  }

  .ql__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .ql__nav {
    top: 0;
    z-index: 5;
    margin: 0 calc(var(--gut) * -1);
    padding: 10px var(--gut);
    border-bottom: 2px solid var(--ink);
    background: var(--bg);
  }

  .ql__navl {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-top: 0;
    scrollbar-width: none;
  }

  .ql__t,
  .ql__t:hover {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border: 1.5px solid var(--ink);
    white-space: nowrap;
  }

  .ql__tc {
    font-size: 14px;
  }

  .ql__ask {
    display: none;
  }

  .ql__groups {
    gap: 56px;
  }

  .ql__g,
  .ql__i {
    scroll-margin-top: 80px;
  }

  .ql__gh {
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-bottom: 14px;
  }

  .ql__gl {
    gap: 14px;
  }

  .ql__gn {
    font-size: 44px;
  }

  .ql__gl {
    min-width: 0;
  }

  .ql__gt {
    min-width: 0;
    font-size: clamp(22px, 4.4vw, 40px);
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .ql__b {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 16px;
    padding: 18px 14px;
  }

  .ql__q {
    font-size: clamp(18px, 2.8vw, 24px);
  }

  .ql__ic {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .ql__p {
    gap: 18px;
    padding: 0 14px 22px;
  }

  .ql__f {
    gap: 14px;
  }

  .ql__fb {
    flex-wrap: wrap;
  }

  .ql__fb button {
    padding: 6px 14px;
  }

  .ql__empty {
    gap: 16px;
    padding: 56px 24px;
  }

  .ql__et {
    font-size: 36px;
  }

  .qa__box {
    grid-template-columns: minmax(0, 1fr);
  }

  .cf__f.qa__f {
    padding: 18px 20px;
  }

  .qa__foot {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 16px 16px 20px;
  }

  .qa__go {
    gap: 20px;
    height: 60px;
    padding: 0 8px 0 22px;
  }

  .qa__dot {
    width: 44px;
    height: 44px;
  }

  .qa__ok {
    gap: 18px;
    padding: 36px 24px;
  }

  .qa__tick {
    width: 64px;
    height: 64px;
    font-size: 32px;
  }

  .qa__oh {
    font-size: clamp(36px, 7vw, 56px);
  }

  .qa__oh em {
    font-size: 1.1em;
  }

  .qa__side {
    border-top: 2px solid var(--ink);
    border-left: 0;
  }

  .qa__next {
    gap: 14px;
    padding: 26px 22px;
  }

  .qa__st {
    font-size: 24px;
  }

  .qa__row,
  .qa__hours {
    padding: 22px;
  }

  .qa__ra {
    font-size: 24px;
  }
}

/* 80. FAQ: phone (below 600px) */
@media (max-width: 599.98px) {
  .qs__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qp__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 81. Careers: why us */
.kw__grid,
.kr__list,
.kr__ul,
.kb__grid,
.kv__grid {
  padding: 0;
  list-style: none;
}

.kw__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid var(--ink);
}

.kw__c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  min-height: calc(620 * var(--u));
  padding: calc(48 * var(--u)) calc(44 * var(--u));
}

.kw__c + .kw__c {
  border-left: 2px solid var(--ink);
}

.kw__c--lime {
  background: var(--lime);
  color: var(--black);
}

.kw__c--inv {
  background: var(--inv);
  color: var(--on-inv);
}

.kw__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(120 * var(--u));
  line-height: .8;
}

.kw__c--inv .kw__n {
  color: var(--accent-txt);
}

.kw__w {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}

.kw__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(50 * var(--u));
  line-height: .95;
  letter-spacing: -.035em;
}

.kw__d {
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.5;
  color: var(--ink2);
}

.kw__c--lime .kw__d,
.kw__c--inv .kw__d {
  color: inherit;
}

/* 82. Careers: open roles (level tabs, accordion rows, speculative bar) */
.ca__tabs.kr__tabs {
  margin-bottom: calc(40 * var(--u));
}

.kr__list {
  border-top: 2px solid var(--ink);
}

.kr__i {
  border-bottom: 1px solid var(--line);
  transition: background-color .25s;
}

.kr__i[hidden],
.kr__d[hidden] {
  display: none;
}

.kr__i.is-open {
  background: var(--lime);
  color: var(--black);
}

.kr__h {
  font: inherit;
}

.kr__b {
  display: grid;
  grid-template-columns: calc(110 * var(--u)) minmax(0, 1fr) calc(260 * var(--u)) calc(260 * var(--u)) calc(220 * var(--u)) calc(72 * var(--u));
  gap: calc(40 * var(--u));
  align-items: center;
  width: 100%;
  padding: calc(40 * var(--u)) calc(36 * var(--u));
  text-align: left;
}

.kr__i:not(.is-open) .kr__b:hover {
  background: var(--hover);
}

.kr__meta {
  display: contents;
}

.kr__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(64 * var(--u));
  line-height: .8;
}

.kr__tw {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.kr__t {
  font-family: var(--display);
  font-size: calc(50 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.kr__p {
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .22em;
  opacity: .7;
}

.kr__lv span {
  display: inline-block;
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border: 1.5px solid currentColor;
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.kr__x {
  font-size: max(15px, calc(24 * var(--u)));
}

.kr__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border: 2px solid currentColor;
  font-size: calc(32 * var(--u));
}

.kr__ic::before {
  content: "+";
}

.kr__i.is-open .kr__ic::before {
  content: "−";
}

.kr__d {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  padding: 0 calc(36 * var(--u)) calc(44 * var(--u)) calc(186 * var(--u));
}

.kr__in {
  max-width: calc(1500 * var(--u));
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(40 * var(--u));
  line-height: 1.3;
}

.kr__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(56 * var(--u));
  padding-top: calc(32 * var(--u));
  border-top: 1.5px solid var(--black);
}

.kr__cols > div,
.kr__ul {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
}

.kr__cl {
  font-size: max(10px, calc(15 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

.kr__ul li {
  display: grid;
  grid-template-columns: calc(24 * var(--u)) minmax(0, 1fr);
  gap: calc(16 * var(--u));
  align-items: baseline;
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.45;
}

.kr__dot {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  background: var(--black);
  transform: translateY(-3px);
}

.kr__f {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: calc(30 * var(--u));
}

.kr__rep {
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .22em;
}

.kr__apply {
  display: flex;
  align-items: center;
  gap: calc(36 * var(--u));
  height: calc(96 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(44 * var(--u));
  background: var(--black);
  color: #fcfbf8;
  font-size: max(16px, calc(27 * var(--u)));
  white-space: nowrap;
  transition: background-color .2s;
}

.kr__apply:hover {
  background: #262626;
}

.kr__dot2 {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
}

.kr__spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(40 * var(--u));
  margin-top: calc(40 * var(--u));
  padding: calc(36 * var(--u)) calc(44 * var(--u));
  border: 2px dashed var(--line);
}

.kr__st {
  font-size: max(16px, calc(27 * var(--u)));
}

.kr__sb {
  flex: none;
  padding: calc(18 * var(--u)) calc(28 * var(--u));
  border: 2px solid var(--ink);
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
  transition: background-color .2s, color .2s;
}

.kr__sb:hover {
  border-color: var(--black);
  background: var(--lime);
  color: var(--black);
}

/* 83. Careers: benefits, hiring promise, team voices */
.kb__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}

.kb__c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(30 * var(--u));
  min-height: calc(400 * var(--u));
  padding: calc(44 * var(--u)) calc(48 * var(--u));
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transition: background-color .25s, color .25s;
}

.kb__c:hover {
  background: var(--lime);
  color: var(--black);
}

.kb__k {
  display: flex;
  justify-content: space-between;
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

.kb__v {
  font-family: var(--display);
  font-size: calc(76 * var(--u));
  line-height: .9;
  letter-spacing: -.045em;
}

.kb__d {
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.5;
}

.kp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(40 * var(--u));
  margin-top: calc(40 * var(--u));
  padding: calc(36 * var(--u)) calc(44 * var(--u));
  background: var(--lime);
  color: var(--black);
}

.kp__t {
  font-family: var(--display);
  font-size: calc(40 * var(--u));
  letter-spacing: -.025em;
}

.kp__n {
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.kv__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(40 * var(--u));
}

.kv__c {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
}

.kv__c--inv {
  background: var(--inv);
  color: var(--on-inv);
}

.kv__c--lime {
  background: var(--lime);
  color: var(--black);
}

.kv__pic {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-bottom: 2px solid var(--ink);
  background: var(--hover);
}

.kv__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.kv__b {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  padding: calc(44 * var(--u)) calc(44 * var(--u)) calc(40 * var(--u));
}

.kv__q {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(44 * var(--u));
  line-height: 1.22;
  letter-spacing: -.01em;
}

.kv__f {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(20 * var(--u));
  padding-top: calc(24 * var(--u));
  border-top: 1.5px solid currentColor;
}

.kv__who {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}

.kv__n {
  font-size: max(16px, calc(28 * var(--u)));
}

.kv__r,
.kv__s {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .22em;
}

.kv__s {
  text-align: right;
}

/* 84. Careers: apply form (FAQ form and panel, plus position chips, CV upload and consent) */
.qa__chip.ka__chip {
  letter-spacing: .14em;
}

.cf__f.ka__cv {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: calc(20 * var(--u));
  cursor: pointer;
}

.ka__cv.is-set {
  background: var(--lime);
  color: var(--black);
}

.ka__cv.is-set .cf__l {
  color: var(--black);
}

.ka__cw {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  min-width: 0;
}

.ka__file {
  overflow: hidden;
  font-size: max(16px, calc(28 * var(--u)));
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ka__up {
  flex: none;
  padding: calc(12 * var(--u)) calc(18 * var(--u));
  border: 1.5px solid currentColor;
  font-size: max(11px, calc(17 * var(--u)));
  font-weight: 500;
  letter-spacing: .2em;
}

.ka__in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ka__cv:focus-within .ka__up {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.cf__nt.ka__ok {
  font-size: max(13px, calc(21 * var(--u)));
}

.ka__ok .is-err {
  color: #d24b2a;
}

.ka__end {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(26 * var(--u));
}

.ka__who {
  display: flex;
  align-items: center;
  gap: calc(26 * var(--u));
  padding: calc(40 * var(--u)) calc(48 * var(--u));
  border-bottom: 1px solid #8d8a8355;
}

.ka__av {
  flex: none;
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  border: 1.5px solid #fcfbf8;
  border-radius: 50%;
  object-fit: cover;
}

.ka__wl {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--night-mute);
}

.ka__wn {
  font-size: max(16px, calc(34 * var(--u)));
}

.ka__eq {
  font-size: max(12px, calc(20 * var(--u)));
  line-height: 1.55;
  color: #bdbab2;
}

/* 85. Careers: tablet and phone (below 1200px) */
@media (max-width: 1199.98px) {
  .kw__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    background: var(--ink);
  }

  .kw__c,
  .kw__c + .kw__c {
    gap: 24px;
    min-height: 0;
    padding: 26px 22px;
    border-left: 0;
  }

  .kw__c:not(.kw__c--lime):not(.kw__c--inv) {
    background: var(--bg);
  }

  .kw__n {
    font-size: 64px;
  }

  .kw__t {
    font-size: clamp(24px, 3.6vw, 32px);
  }

  .ca__tabs.kr__tabs {
    margin-bottom: 24px;
  }

  .kr__b {
    grid-template-columns: 40px minmax(0, 1fr) 34px;
    gap: 10px 14px;
    padding: 18px 12px;
  }

  .kr__n {
    grid-area: 1 / 1 / 3;
    align-self: start;
    font-size: 32px;
  }

  .kr__tw {
    grid-area: 1 / 2;
  }

  .kr__ic {
    grid-area: 1 / 3;
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .kr__meta {
    display: flex;
    flex-wrap: wrap;
    grid-area: 2 / 2 / 3 / 4;
    align-items: center;
    gap: 8px 16px;
  }

  .kr__t {
    font-size: clamp(19px, 3vw, 26px);
  }

  .kr__lv span {
    padding: 4px 8px;
  }

  .kr__x {
    font-size: 15px;
  }

  .kr__d {
    gap: 20px;
    padding: 0 12px 22px;
  }

  .kr__in {
    max-width: none;
    font-size: clamp(20px, 3.2vw, 26px);
  }

  .kr__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding-top: 18px;
  }

  .kr__cols > div,
  .kr__ul {
    gap: 10px;
  }

  .kr__ul li {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 10px;
  }

  .kr__dot {
    width: 8px;
    height: 8px;
  }

  .kr__f {
    gap: 14px;
  }

  .kr__apply {
    gap: 18px;
    height: 58px;
    padding: 0 8px 0 22px;
  }

  .kr__dot2 {
    width: 42px;
    height: 42px;
  }

  .kr__spec {
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
    padding: 20px;
  }

  .kr__sb {
    padding: 12px 18px;
  }

  .kb__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb__c {
    gap: 18px;
    min-height: 0;
    padding: 24px 22px;
  }

  .kb__v {
    font-size: clamp(30px, 6vw, 48px);
  }

  .kp {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding: 20px;
  }

  .kp__t {
    font-size: clamp(20px, 3.4vw, 26px);
  }

  .kv__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
  }

  .kv__b {
    gap: 22px;
    padding: 22px;
  }

  .kv__q {
    font-size: clamp(21px, 3.2vw, 28px);
  }

  .kv__f {
    padding-top: 16px;
  }

  .ka__foot {
    align-items: flex-start;
  }

  .ka__end {
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .ka__who {
    gap: 16px;
    padding: 22px;
  }

  .ka__av {
    width: 56px;
    height: 56px;
  }

  .ka__wn {
    font-size: 20px;
  }
}

/* 86. Careers: phone (below 600px) */
@media (max-width: 599.98px) {
  .kw__grid,
  .kb__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kv__f {
    flex-direction: column;
    align-items: flex-start;
  }

  .kv__s {
    text-align: left;
  }
}

/* 87. Privacy: in short */
.yi__grid,
.yt__list,
.yr__grid,
.yl__list {
  padding: 0;
  list-style: none;
}

.yi__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}

.yi__c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(30 * var(--u));
  min-height: calc(380 * var(--u));
  padding: calc(44 * var(--u)) calc(48 * var(--u));
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.yi__c--lime {
  background: var(--lime);
  color: var(--black);
}

.yi__c--inv {
  background: var(--inv);
  color: var(--on-inv);
}

.yi__top,
.yr__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.yi__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(96 * var(--u));
  line-height: .8;
}

.yi__k,
.yr__a {
  font-size: max(10px, calc(15 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

.yi__w {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
}

.yi__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(48 * var(--u));
  line-height: .95;
  letter-spacing: -.035em;
}

.yi__d {
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.5;
}

/* 88. Privacy: the full text (sticky contents from the Blog post, sections, lists, tables) */
.yt__print {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  margin-bottom: calc(10 * var(--u));
  padding: calc(18 * var(--u)) calc(26 * var(--u));
  border: 2px solid var(--ink);
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
  transition: background-color .2s, color .2s;
}

.yt__print span {
  font-size: calc(22 * var(--u));
}

.yt__print:hover {
  border-color: var(--black);
  background: var(--lime);
  color: var(--black);
}

.yt__grid {
  display: grid;
  grid-template-columns: calc(520 * var(--u)) minmax(0, 1fr);
  gap: calc(110 * var(--u));
  align-items: start;
}

.yt .pv__t {
  grid-template-columns: calc(56 * var(--u)) minmax(0, 1fr) calc(24 * var(--u));
  gap: calc(12 * var(--u));
  padding: calc(18 * var(--u)) calc(22 * var(--u));
}

.yt .pv__t:hover {
  padding-left: calc(32 * var(--u));
}

.yt .pv__n {
  font-size: max(10px, calc(16 * var(--u)));
}

.yt .pv__tt {
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .16em;
}

.yt .pv__ta {
  font-size: max(11px, calc(18 * var(--u)));
}

.yt .pv__ta::before {
  content: "";
}

.yt__art {
  display: flex;
  flex-direction: column;
  gap: calc(100 * var(--u));
  max-width: calc(1500 * var(--u));
  min-width: 0;
}

.yt__s {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
  scroll-margin-top: 40px;
}

.yt__h {
  display: flex;
  align-items: baseline;
  gap: calc(30 * var(--u));
  padding-bottom: calc(26 * var(--u));
  border-bottom: 2px solid var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(60 * var(--u));
  line-height: 1;
  letter-spacing: -.035em;
}

.yt__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(80 * var(--u));
  line-height: .8;
  letter-spacing: 0;
}

.yt__p {
  font-size: max(16px, calc(29 * var(--u)));
  line-height: 1.62;
  color: var(--ink2);
  text-wrap: pretty;
}

.yt__list {
  border-top: 1px solid var(--line);
}

.yt__list li {
  display: grid;
  grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr);
  gap: calc(18 * var(--u));
  align-items: baseline;
  padding: calc(20 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  font-size: max(16px, calc(27 * var(--u)));
  line-height: 1.5;
}

.yt__list b {
  font-weight: 500;
}

.yt__sq {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  background: var(--lime);
  outline: 1.5px solid var(--ink);
  transform: translateY(-3px);
}

.yt__tb {
  display: block;
  width: 100%;
  border: 2px solid var(--ink);
  border-collapse: collapse;
}

.yt__tb thead,
.yt__tb tbody {
  display: block;
}

.yt__tr {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: calc(30 * var(--u));
  padding: calc(24 * var(--u)) calc(32 * var(--u));
  border-top: 1px solid var(--line);
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.45;
  text-align: left;
  transition: background-color .2s;
}

.yt__tr th,
.yt__tr td {
  padding: 0;
}

.yt__tr th {
  font-weight: 500;
  text-align: left;
}

.yt__tb tbody .yt__tr:hover {
  background: var(--hover);
}

.yt__tr--h {
  padding: calc(20 * var(--u)) calc(32 * var(--u));
  border-top: 0;
  background: var(--inv);
  color: var(--on-inv);
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
}

.yt__tr--h th {
  font-weight: 400;
}

/* 89. Privacy: your rights, request form, version history */
.yr__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(32 * var(--u));
}

.yr__c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(30 * var(--u));
  min-height: calc(420 * var(--u));
  padding: calc(40 * var(--u)) calc(44 * var(--u)) calc(36 * var(--u));
  border: 2px solid var(--ink);
  transition: background-color .25s, color .25s;
}

.yr__c:hover,
.yr__c:focus-within {
  background: var(--lime);
  color: var(--black);
}

.yr__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(80 * var(--u));
  line-height: .8;
}

.yr__w {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
}

.yr__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(46 * var(--u));
  line-height: .95;
  letter-spacing: -.03em;
}

.yr__d {
  font-size: max(15px, calc(24 * var(--u)));
  line-height: 1.5;
}

.yr__req {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(20 * var(--u));
  border-top: 1.5px solid currentColor;
  font-size: max(11px, calc(17 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.yr__req span {
  font-size: calc(24 * var(--u));
}

.qa__chip.yq__chip {
  letter-spacing: .16em;
}

.yl__list {
  border-top: 2px solid var(--ink);
}

.yl__r {
  display: grid;
  grid-template-columns: calc(260 * var(--u)) calc(200 * var(--u)) minmax(0, 1fr) calc(200 * var(--u));
  gap: calc(48 * var(--u));
  align-items: center;
  padding: calc(34 * var(--u)) calc(36 * var(--u));
  border-bottom: 1px solid var(--line);
}

.yl__r--cur {
  background: var(--lime);
  color: var(--black);
}

.yl__d {
  font-family: var(--display);
  font-size: calc(40 * var(--u));
  letter-spacing: -.02em;
}

.yl__v {
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.yl__c {
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.45;
}

.yl__b {
  text-align: right;
}

.yl__chip {
  display: inline-block;
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  background: var(--black);
  color: var(--lime);
  font-size: max(10px, calc(15 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

/* 90. Privacy: tablet and phone (below 1200px). Tables stack on phones with their column names. */
@media (max-width: 1199.98px) {
  .yi__grid,
  .yr__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yi__c {
    gap: 18px;
    min-height: 0;
    padding: 24px 22px;
  }

  .yi__n,
  .yr__n {
    font-size: 48px;
  }

  .yi__t,
  .yr__t {
    font-size: clamp(22px, 3.4vw, 30px);
  }

  .yt__print {
    gap: 10px;
    padding: 10px 16px;
  }

  .yt__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .yt__art {
    gap: 48px;
    max-width: none;
  }

  .yt__s {
    gap: 18px;
    scroll-margin-top: 100px;
  }

  .yt__h {
    gap: 14px;
    padding-bottom: 14px;
    font-size: clamp(22px, 4vw, 34px);
  }

  .yt__n {
    font-size: 40px;
  }

  .yt__list li {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0;
  }

  .yt__sq {
    width: 10px;
    height: 10px;
  }

  .yt__tr {
    gap: 16px;
    padding: 14px 16px;
  }

  .yr__grid {
    gap: 16px;
  }

  .yr__c {
    gap: 20px;
    min-height: 0;
    padding: 24px;
  }

  .yl__r {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding: 18px 14px;
  }

  .yl__c {
    grid-column: 1 / -1;
  }

  .yl__d {
    font-size: 22px;
  }

  .yl__chip {
    padding: 4px 8px;
  }
}

/* 91. Privacy: phone (below 600px) */
@media (max-width: 599.98px) {
  .yi__grid,
  .yr__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .yt__tr {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .yt__tr--h {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .yt__tr td::before {
    content: attr(data-l) " · ";
    color: var(--ink3);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
}

/* 92. Print: the policy (and any page) without the menu, forms and footer */
@media print {
  .tb,
  .pgh__rel,
  .pv__blk--toc,
  .yt__print,
  .yr__req,
  .yq,
  .ft {
    display: none !important;
  }

  .yt__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cx {
    padding: 24px 0;
    border: 0;
  }
}

/* 93. Contact: ways to reach us */
.ow {
  padding: calc(120 * var(--u)) var(--gut) calc(140 * var(--u));
  border-bottom: 1px solid var(--line);
}

.ow__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--ink);
}

.ow__c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(40 * var(--u));
  min-height: calc(560 * var(--u));
  padding: calc(48 * var(--u)) calc(48 * var(--u)) calc(44 * var(--u));
  text-align: left;
  transition: background-color .2s;
}

.ow__c + .ow__c {
  border-left: 2px solid var(--ink);
}

.ow__c:hover {
  background: var(--hover);
}

.ow__c--lime {
  background: var(--lime);
  color: var(--black);
}

.ow__c--lime:hover {
  background: var(--lime-hover);
}

/* The call card is a div; the number is the tel: link, stretched over the whole card. */
.ow__c--call {
  position: relative;
}

.ow__tel::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ow__tel:focus-visible {
  outline: 0;
}

.ow__c--call:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: -6px;
}

.ow__c--inv {
  background: var(--inv);
  color: var(--on-inv);
}

.ow__c--inv:hover {
  background: var(--inv-hover);
}

.ow__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(16 * var(--u));
}

.ow__k {
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
}

.ow__k--acc {
  color: var(--accent-txt);
}

.ow__st,
.ow__chip {
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.ow__st {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  background: var(--black);
  color: #fcfbf8;
}

.ow__dot {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  border-radius: 50%;
  background: var(--night-mute);
}

.ow__c.is-open .ow__dot {
  background: var(--lime);
}

.ow__chip {
  border: 1.5px solid var(--ink);
  transition: background-color .2s;
}

.ow__c.is-copied .ow__chip {
  background: var(--lime);
  color: var(--black);
}

.ow__chip--lime {
  border: 0;
  background: var(--lime);
  color: var(--black);
}

.ow__mid {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}

.ow__v {
  font-family: var(--display);
  font-size: calc(76 * var(--u));
  line-height: .9;
  letter-spacing: -.04em;
}

.ow__v em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(82 * var(--u));
  letter-spacing: -.02em;
}

.ow__d {
  font-size: max(15px, calc(25 * var(--u)));
  line-height: 1.5;
}

.ow__d--mute {
  color: var(--ink2);
}

.ow__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(24 * var(--u));
  border-top: 1.5px solid currentColor;
  font-size: max(15px, calc(26 * var(--u)));
}

.ow__dot2 {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  border-radius: 50%;
  background: var(--black);
  color: var(--lime);
  font-size: calc(30 * var(--u));
}

.ow__dot2--line {
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: calc(28 * var(--u));
}

.ow__dot2--lime {
  background: var(--lime);
  color: var(--black);
}

/* 94. Contact: book a free call (area chips, day strip, slots, form, confirmation) */
.ob__box {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  border: 2px solid var(--ink);
}

.ob__pick {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ob__q {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
  padding: calc(40 * var(--u)) calc(44 * var(--u));
  border-bottom: 1px solid var(--line);
}

.ob__q--last {
  border-bottom: 0;
}

.ob__l {
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
}

.ob__l--sp {
  display: flex;
  justify-content: space-between;
  gap: calc(20 * var(--u));
}

.ob__note {
  color: var(--ink3);
}

.ob__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
}

.ob__chip {
  padding: calc(16 * var(--u)) calc(24 * var(--u));
  border: 2px solid var(--ink);
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .18em;
  transition: background-color .2s;
}

.ob__chip:hover {
  background: var(--hover);
}

.ob__chip[aria-pressed="true"] {
  background: var(--lime);
  color: var(--black);
}

.ob__days {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  border: 2px solid var(--ink);
}

.ob__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(20 * var(--u)) 0 calc(18 * var(--u));
  transition: background-color .2s;
}

.ob__day + .ob__day {
  border-left: 1px solid var(--line);
}

.ob__day:hover {
  background: var(--hover);
}

.ob__day[aria-pressed="true"] {
  background: var(--inv);
  color: var(--accent-txt);
}

.ob__wd {
  font-size: max(10px, calc(14 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.ob__dd {
  font-family: var(--display);
  font-size: calc(40 * var(--u));
  line-height: 1;
}

.ob__mo {
  font-size: max(10px, calc(13 * var(--u)));
  letter-spacing: .2em;
  opacity: .7;
}

.ob__slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(12 * var(--u));
}

.ob__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(88 * var(--u));
  border: 2px solid var(--ink);
  font-family: var(--display);
  font-size: calc(30 * var(--u));
  letter-spacing: -.01em;
  transition: background-color .2s;
}

.ob__slot:hover {
  background: var(--hover);
}

.ob__slot[aria-pressed="true"] {
  border-color: var(--black);
  background: var(--lime);
  color: var(--black);
}

.ob__slot:disabled {
  border-color: var(--line);
  background: transparent;
  text-decoration: line-through;
  opacity: .35;
  cursor: not-allowed;
}

.ob__tz {
  font-size: max(11px, calc(18 * var(--u)));
  letter-spacing: .16em;
  color: var(--ink3);
}

.ob__form {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--ink);
}

.ob__form[hidden],
.ob__ok[hidden] {
  display: none;
}

.ob__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(20 * var(--u));
  padding: calc(32 * var(--u)) calc(40 * var(--u));
  background: var(--inv);
  color: var(--on-inv);
}

.ob__sw {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

.ob__sl {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--accent-txt);
}

.ob__sv {
  font-family: var(--display);
  font-size: calc(36 * var(--u));
  letter-spacing: -.02em;
}

.ob__ac {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1.5px solid currentColor;
  font-size: max(10px, calc(15 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
  white-space: nowrap;
}

.cf__f.ob__mode {
  gap: calc(16 * var(--u));
}

.ca__seg.ob__seg {
  align-self: flex-start;
}

.ca__seg.ob__seg button {
  padding: calc(14 * var(--u)) calc(26 * var(--u));
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .2em;
}

.cf__f.ob__grow {
  flex: 1;
}

.ob__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(24 * var(--u));
  padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)) calc(40 * var(--u));
}

.ob__foot .cf__msg {
  font-size: max(10px, calc(16 * var(--u)));
}

.ob__go {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(32 * var(--u));
  height: calc(92 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(40 * var(--u));
  background: var(--lime);
  color: var(--black);
  font-size: max(16px, calc(27 * var(--u)));
  white-space: nowrap;
  transition: background-color .2s;
}

.ob__go:hover {
  background: var(--lime-hover);
}

.ob__go .qa__dot {
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
}

.ob__ok {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(32 * var(--u));
  padding: calc(64 * var(--u)) calc(56 * var(--u));
  border-left: 2px solid var(--ink);
  background: var(--lime);
  color: var(--black);
}

.ob__oh {
  font-family: var(--display);
  font-size: calc(76 * var(--u));
  line-height: .9;
  letter-spacing: -.045em;
}

.ob__oh em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(84 * var(--u));
  letter-spacing: -.02em;
}

.ob__os {
  padding: calc(22 * var(--u)) 0;
  border-top: 1.5px solid var(--black);
  border-bottom: 1.5px solid var(--black);
  font-family: var(--display);
  font-size: calc(40 * var(--u));
  letter-spacing: -.02em;
}

.ob__ot {
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.5;
}

.ob__oa {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--u));
}

.ob__ics {
  padding: calc(18 * var(--u)) calc(26 * var(--u));
  background: var(--black);
  color: var(--lime);
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
  transition: color .2s;
}

.ob__ics:hover {
  color: #fcfbf8;
}

/* 95. Contact: office (map with pin, address, hours, getting here) */
.oo__box {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  border: 2px solid var(--ink);
}

.oo__map {
  position: relative;
  min-height: calc(980 * var(--u));
  overflow: hidden;
  border-right: 2px solid var(--ink);
  background: var(--hover);
}

.oo__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

.oo__pin {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--u));
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.oo__pl {
  padding: calc(16 * var(--u)) calc(24 * var(--u));
  background: var(--black);
  color: var(--lime);
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.oo__stem {
  width: calc(4 * var(--u));
  height: calc(60 * var(--u));
  background: var(--black);
}

.oo__sq {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border: 3px solid var(--black);
  background: var(--lime);
}

.oo__dir {
  position: absolute;
  right: calc(32 * var(--u));
  bottom: calc(32 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(28 * var(--u));
  height: calc(84 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(32 * var(--u));
  background: var(--inv);
  color: var(--on-inv);
  font-size: max(15px, calc(24 * var(--u)));
  transition: background-color .2s, color .2s;
}

.oo__dir:hover {
  background: var(--lime);
  color: var(--black);
}

.oo__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border-radius: 50%;
  background: var(--lime);
  color: var(--black);
}

.oo__info {
  display: flex;
  flex-direction: column;
}

.oo__addr {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  padding: calc(44 * var(--u)) calc(48 * var(--u));
  border-bottom: 2px solid var(--ink);
}

.oo__k {
  font-size: max(10px, calc(15 * var(--u)));
  letter-spacing: .24em;
  color: var(--ink3);
}

.oo__k--sp {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  padding-bottom: calc(16 * var(--u));
}

.oo__st {
  font-family: var(--display);
  font-size: calc(52 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.oo__city {
  font-size: max(16px, calc(28 * var(--u)));
}

.oo__hours {
  display: flex;
  flex-direction: column;
  padding: calc(36 * var(--u)) calc(48 * var(--u));
  border-bottom: 2px solid var(--ink);
}

.oo__hl,
.oo__gl,
.on__list {
  padding: 0;
  list-style: none;
}

.oo__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 calc(-16 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  font-size: max(15px, calc(24 * var(--u)));
}

.oo__today {
  display: none;
}

.oo__h.is-today {
  background: var(--lime);
  color: var(--black);
  font-weight: 500;
}

.oo__h.is-today .oo__today {
  display: inline;
}

.oo__get {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(36 * var(--u)) calc(48 * var(--u));
}

.oo__get .oo__k {
  padding-bottom: calc(12 * var(--u));
}

.oo__gl {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
}

.oo__gl li {
  display: grid;
  grid-template-columns: calc(150 * var(--u)) minmax(0, 1fr);
  gap: calc(20 * var(--u));
  padding: calc(16 * var(--u)) 0;
  border-bottom: 1px solid var(--line);
  font-size: max(14px, calc(23 * var(--u)));
  line-height: 1.4;
}

.oo__gk {
  padding-top: calc(5 * var(--u));
  font-size: max(10px, calc(15 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

/* 96. Contact: urgent band and what happens next */
.ou {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(80 * var(--u));
  padding: calc(90 * var(--u)) var(--gut);
  background: var(--panel);
  color: var(--on-panel);
}

.ou__l {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}

.ou__k {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  font-size: max(11px, calc(18 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
  color: var(--lime);
}

.ou__dot {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border-radius: 50%;
  background: var(--lime);
}

.ou__h {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(96 * var(--u));
  line-height: .9;
  letter-spacing: -.045em;
}

.ou__h em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(104 * var(--u));
  letter-spacing: -.02em;
  color: var(--lime);
}

.ou__d {
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.5;
  color: #bdbab2;
}

.ou__tel {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(40 * var(--u)) calc(48 * var(--u));
  background: var(--lime);
  color: var(--black);
  transition: background-color .2s;
}

.ou__tel:hover {
  background: var(--lime-hover);
}

.ou__tk {
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

.ou__tv {
  font-family: var(--display);
  font-size: calc(64 * var(--u));
  letter-spacing: -.03em;
  white-space: nowrap;
}

.cx.on {
  padding-bottom: calc(120 * var(--u));
  border-bottom: 0;
}

.on__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}

.on__s {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
  padding: calc(56 * var(--u)) calc(56 * var(--u)) calc(56 * var(--u)) 0;
}

.on__s + .on__s {
  padding-left: calc(56 * var(--u));
  border-left: 1px solid var(--line);
}

.on__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.on__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(110 * var(--u));
  line-height: .8;
}

.on__w {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1.5px solid var(--ink);
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
}

.on__w--lime {
  background: var(--lime);
  color: var(--black);
}

.on__t {
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(52 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
}

.on__d {
  font-size: max(15px, calc(26 * var(--u)));
  line-height: 1.55;
  color: var(--ink2);
}

.on__disc {
  margin-top: calc(70 * var(--u));
  padding-top: calc(34 * var(--u));
  border-top: 1px solid var(--line);
  font-size: max(12px, calc(19 * var(--u)));
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--ink3);
}

/* 97. Client-area sign-in dialog (every page) */
.tb__sign {
  text-align: left;
}

.si {
  width: calc(780 * var(--u));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  padding: 0;
  overflow: auto;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
}

.si::backdrop {
  background: rgba(14, 14, 14, .62);
}

.si__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(96 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(40 * var(--u));
  background: var(--black);
  color: #fcfbf8;
}

.si__lbl {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  letter-spacing: .26em;
}

.si__sq {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  background: var(--lime);
}

.si__x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(63 * var(--u));
  height: calc(63 * var(--u));
  border: 1.5px solid #fcfbf866;
  font-size: calc(24 * var(--u));
  transition: background-color .2s, color .2s;
}

.si__x:hover {
  background: var(--lime);
  color: var(--black);
}

.si__form,
.si__code,
.si__done {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  padding: calc(40 * var(--u)) calc(44 * var(--u));
}

.si__form[hidden],
.si__code[hidden],
.si__done[hidden],
.si [data-si-up][hidden] {
  display: none;
}

.si__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ink);
}

.si__tabs button {
  padding: calc(20 * var(--u)) 0;
  text-align: center;
  font-size: max(11px, calc(17 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.si__tabs button + button {
  border-left: 2px solid var(--ink);
}

.si__tabs [aria-pressed="true"] {
  background: var(--inv);
  color: var(--accent-txt);
}

.si__h {
  font-family: var(--display);
  font-size: calc(56 * var(--u));
  line-height: .95;
  letter-spacing: -.04em;
}

.si__h em {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(62 * var(--u));
  letter-spacing: -.02em;
}

.si__f {
  display: block;
}

.si__in {
  width: 100%;
  height: calc(76 * var(--u));
  padding: 0 calc(24 * var(--u));
  border: 0;
  border-bottom: 2px solid var(--ink);
  outline: 0;
  background: var(--hover);
  font: inherit;
  font-size: max(15px, calc(26 * var(--u)));
  color: var(--ink);
}

.si__in:focus-visible {
  box-shadow: inset 0 -3px 0 var(--lime);
}

.si__in.is-err,
.si__pw.is-err {
  border-bottom-color: #d24b2a;
}

.si__pw {
  display: flex;
  height: calc(76 * var(--u));
  border-bottom: 2px solid var(--ink);
  background: var(--hover);
}

.si__pw .si__in {
  flex: 1;
  min-width: 0;
  height: 100%;
  border-bottom: 0;
  background: transparent;
}

.si__show {
  padding: 0 calc(22 * var(--u));
  font-size: max(10px, calc(14 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
}

.si__str {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}

.si__bars {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(6 * var(--u));
}

.si__bars span {
  height: calc(8 * var(--u));
  background: var(--line);
}

.si__bars .is-red {
  background: #d24b2a;
}

.si__bars .is-amber {
  background: #e8a33a;
}

.si__bars .is-lime {
  background: var(--lime);
}

.si__sl {
  width: calc(110 * var(--u));
  font-size: max(10px, calc(14 * var(--u)));
  font-weight: 500;
  letter-spacing: .22em;
  text-align: right;
}

.cf__nt.si__agree {
  font-size: max(12px, calc(19 * var(--u)));
}

.si__agree .cf__box {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  font-size: calc(17 * var(--u));
}

/* No page scroll behind the open dialog */
html.is-locked {
  overflow: hidden;
}

.si__agree a {
  display: inline-block;
  margin-left: 6px;
  border-bottom: 1.5px solid currentColor;
}

.si__agree.is-err {
  color: #d24b2a;
}

.si__err {
  min-height: calc(20 * var(--u));
  font-size: max(10px, calc(15 * var(--u)));
  font-weight: 500;
  letter-spacing: .2em;
  color: #d24b2a;
}

.si__go {
  height: calc(92 * var(--u));
  border: 2px solid var(--black);
  background: var(--lime);
  color: var(--black);
  font-size: max(15px, calc(26 * var(--u)));
  text-align: center;
  transition: background-color .2s;
}

.si__go:hover {
  background: var(--lime-hover);
}

.si__foot,
.si__cf {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  font-size: max(11px, calc(17 * var(--u)));
  letter-spacing: .14em;
  color: var(--ink3);
}

.si__foot a,
.si__back {
  border-bottom: 1.5px solid currentColor;
  color: var(--ink);
  letter-spacing: inherit;
}

.si__code {
  gap: calc(28 * var(--u));
  padding: calc(48 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u));
}

.si__step {
  font-size: max(10px, calc(15 * var(--u)));
  font-weight: 500;
  letter-spacing: .24em;
  color: var(--ink3);
}

.si__sent {
  font-size: max(14px, calc(23 * var(--u)));
  line-height: 1.5;
  color: var(--ink2);
}

.si__digits {
  position: relative;
}

.si__dgs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(12 * var(--u));
}

.si__dg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(104 * var(--u));
  border: 2px solid var(--line);
  background: var(--hover);
  color: var(--black);
  font-family: var(--display);
  font-size: calc(48 * var(--u));
}

.si__dg.is-fill {
  border-color: var(--ink);
  background: var(--lime);
}

.si__dg.is-cur {
  border-color: var(--ink);
  background: var(--bg);
}

.si__cin {
  position: absolute;
  inset: 0;
  width: 100%;
  font-size: 16px;
  opacity: 0;
  cursor: text;
}

.si__digits:focus-within .si__dg.is-cur {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.si__done {
  gap: calc(26 * var(--u));
  padding: calc(56 * var(--u)) calc(44 * var(--u));
  background: var(--lime);
  color: var(--black);
}

.si__done .qa__tick {
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  font-size: calc(46 * var(--u));
}

.si__dt {
  font-family: var(--display);
  font-size: calc(60 * var(--u));
  line-height: .92;
  letter-spacing: -.045em;
}

.si__dx {
  font-size: max(14px, calc(23 * var(--u)));
  line-height: 1.5;
}

/* 98. Contact and sign-in: tablet and phone (below 1200px) */
@media (max-width: 1199.98px) {
  .ow {
    padding: 40px var(--gut) 56px;
  }

  .ow__grid,
  .ob__box,
  .oo__box,
  .on__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .ow__c {
    gap: 24px;
    min-height: 0;
    padding: 26px 22px;
  }

  .ow__c + .ow__c {
    border-top: 2px solid var(--ink);
    border-left: 0;
  }

  .ow__st,
  .ow__chip {
    padding: 6px 10px;
  }

  .ow__dot {
    width: 9px;
    height: 9px;
  }

  .ow__mid {
    gap: 12px;
  }

  .ow__v {
    font-size: clamp(26px, 6.4vw, 52px);
    overflow-wrap: anywhere;
  }

  .ow__v em {
    font-size: 1.08em;
  }

  .ow__foot {
    padding-top: 16px;
  }

  .ow__dot2 {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .ob__q {
    gap: 14px;
    padding: 22px 20px;
  }

  .ob__chip {
    padding: 10px 14px;
  }

  .ob__days {
    grid-template-columns: repeat(10, minmax(64px, 1fr));
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .ob__day {
    gap: 4px;
    padding: 12px 0 10px;
  }

  .ob__dd {
    font-size: 24px;
  }

  .ob__slots {
    gap: 8px;
  }

  .ob__slot {
    height: 52px;
    font-size: 18px;
  }

  .ob__form,
  .ob__ok {
    border-top: 2px solid var(--ink);
    border-left: 0;
  }

  .ob__bar {
    padding: 18px 20px;
  }

  .ob__sv {
    font-size: 20px;
  }

  .ob__foot {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 16px 16px 20px;
  }

  .ob__go {
    gap: 18px;
    height: 58px;
    padding: 0 8px 0 22px;
  }

  .ob__go .qa__dot {
    width: 42px;
    height: 42px;
  }

  .ob__ok {
    gap: 18px;
    padding: 32px 24px;
  }

  .ob__oh {
    font-size: clamp(34px, 7vw, 52px);
  }

  .ob__oh em {
    font-size: 1.1em;
  }

  .ob__os {
    padding: 12px 0;
    font-size: 22px;
  }

  .oo__map {
    min-height: 320px;
    border-right: 0;
    border-bottom: 2px solid var(--ink);
  }

  .oo__pl {
    padding: 8px 12px;
  }

  .oo__stem {
    height: 30px;
  }

  .oo__sq {
    width: 22px;
    height: 22px;
  }

  .oo__dir {
    right: 14px;
    bottom: 14px;
    gap: 14px;
    height: 54px;
    padding: 0 8px 0 18px;
  }

  .oo__dot {
    width: 38px;
    height: 38px;
  }

  .oo__addr,
  .oo__hours,
  .oo__get {
    padding: 22px 20px;
  }

  .oo__st {
    font-size: 26px;
  }

  .oo__h {
    margin: 0 -12px;
    padding: 10px 12px;
  }

  .oo__gl li {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
  }

  .ou {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 56px var(--gut);
  }

  .ou__l {
    gap: 14px;
  }

  .ou__h {
    font-size: clamp(34px, 7vw, 64px);
  }

  .ou__h em {
    font-size: 1.08em;
  }

  .ou__tel {
    justify-self: start;
    gap: 8px;
    padding: 20px 22px;
  }

  .ou__tv {
    font-size: clamp(22px, 5vw, 40px);
  }

  .cx.on {
    padding-bottom: 56px;
  }

  .on__s,
  .on__s + .on__s {
    gap: 14px;
    padding: 24px 0;
    border-left: 0;
  }

  .on__s + .on__s {
    border-top: 1px solid var(--line);
  }

  .on__n {
    font-size: 56px;
  }

  .on__t {
    font-size: 26px;
  }

  .on__disc {
    margin-top: 24px;
    padding-top: 20px;
  }

  .si {
    width: min(560px, calc(100vw - 32px));
  }

  .si__bar {
    height: 64px;
    padding: 0 10px 0 22px;
  }

  .si__x {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .si__form,
  .si__code,
  .si__done {
    gap: 16px;
    padding: 22px;
  }

  .si__h,
  .si__dt {
    font-size: 32px;
  }

  .si__h em {
    font-size: 1.1em;
  }

  .si__in {
    height: 56px;
    padding: 0 16px;
  }

  .si__pw {
    height: 56px;
  }

  .si__go {
    height: 58px;
  }

  .si__foot,
  .si__cf {
    flex-wrap: wrap;
  }

  .si__dgs {
    gap: 6px;
  }

  .si__dg {
    height: 56px;
    font-size: 26px;
  }

  .si__done .qa__tick {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
}

/* 99. Contact: phone (below 600px) */
@media (max-width: 599.98px) {
  .ob__slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ob__bar {
    flex-wrap: wrap;
  }

  .oo__gl li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* 15. Motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }

  .cl__row {
    animation: none;
  }
}