/* Manifesto (T5 text, 10 nov 2026). Prefix mfx-. Personality: a printed essay. Type carries the page: chapter numerals in the
   margin, a large title, pull lines, one comparison table, rules with their consequence. Three sides (11 nov): companies, callers and the call itself, one switch. No film; the rules settle in once; one amber spark. */
.page[data-page="manifesto"]{--mfx-sand1:#F1EADF; --mfx-sand3:#D8C7AE; --mfx-taupe:#5C5345; --mfx-enter:cubic-bezier(.16,1,.3,1)}

/* rhythm: the cell keeps the rails, pt-prose sets the spacing */
.mfx-cell{padding-block:clamp(4px,1.6vw,20px)}
.mfx-top{padding-top:0}
.mfx-end{padding-bottom:clamp(40px,6vw,96px)}

/* margin label: chapter numeral above its name */
.mfx-side{gap:8px}
.mfx-n{font-family:var(--sans);font-size:clamp(34px,3.4vw,48px);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--fg);text-transform:none}
.mfx-n-spark{display:inline-flex;align-items:flex-start;gap:8px}
.mfx-n-spark::after{content:"";width:12px;height:10px;margin-top:6px;background:var(--amber);clip-path:polygon(50% 0,100% 100%,0 100%)}

/* title and chapter heads */
.pt-prose-body .mfx-title{font-size:clamp(44px,6.2vw,92px);line-height:.96;letter-spacing:-.052em}
.mfx-t1{display:block;color:var(--fg3)}
.pt-prose-body .mfx-h2{font-size:clamp(28px,3.1vw,42px);line-height:1.06;letter-spacing:-.036em;margin-top:0}
.pt-prose-body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pt-prose-body a.btn,.pt-prose-body a.link{text-decoration:none}

/* two sides, one switch: the page shows one side at a time once the script runs; without it both sides follow each other */
.mfx-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.mfx-sw{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;border-radius:14px;border:1.5px solid var(--rule);background:transparent;color:var(--fg2);font:inherit;font-size:clamp(18px,1.6vw,22px);font-weight:600;letter-spacing:-.02em;text-align:left;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.mfx-sw:hover{border-color:var(--fg);color:var(--fg)}
.mfx-sw[aria-pressed="true"]{border-color:var(--fg);color:var(--fg);background:var(--mfx-sand1);box-shadow:inset 0 -3px 0 var(--amber)}
.mfx-sw-k{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mfx-taupe)}
.mfx-js[data-side="companies"] [data-face]:not([data-face="companies"]),.mfx-js[data-side="callers"] [data-face]:not([data-face="callers"]),.mfx-js[data-side="call"] [data-face]:not([data-face="call"]){display:none}
/* three things side by side: the human skills, the ways to earn trust */
.pt-prose-body .mfx-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;list-style:none;padding:0;margin:6px 0;border-top:1.5px solid var(--fg)}
.pt-prose-body .mfx-trio li{display:flex;flex-direction:column;gap:8px;margin:0;padding:18px 20px 6px 0;font-size:clamp(15.5px,1.2vw,17px);line-height:1.5;color:var(--fg2)}
.pt-prose-body .mfx-trio li+li{padding-left:20px;border-left:1px solid var(--rule)}
.mfx-trio b{font-size:clamp(19px,1.7vw,23px);font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--fg)}
.pt-prose-body .mfx-title-2{font-size:clamp(36px,4.8vw,68px);margin-top:0}
.mfx-turn .mfx-cell{padding-block:clamp(18px,3vw,40px)}
.mfx-flip{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;width:100%;padding:clamp(20px,2.6vw,32px);border-radius:18px;border:1.5px solid var(--fg);background:transparent;color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:background .2s}
.mfx-flip:hover{background:var(--mfx-sand1)}
.mfx-flip b{font-size:clamp(20px,2.2vw,30px);font-weight:600;letter-spacing:-.03em;flex:1 1 260px}
.mfx-flip i{font-style:normal;font-size:26px}
html:not(.x) .page[data-page="manifesto"]:not(.mfx-js) .mfx-switch,html:not(.x) .page[data-page="manifesto"]:not(.mfx-js) .mfx-turn{display:none}

/* a line the eye should stop on */
.mfx-pull{font-size:clamp(22px,2.3vw,30px);line-height:1.3;letter-spacing:-.022em;color:var(--fg);font-weight:500;padding-left:20px;border-left:2px solid var(--fg)}

/* the rules */
.mfx-rules{display:flex;flex-direction:column;border-top:1px solid var(--rule);margin-top:6px}
.mfx-rule{display:grid;grid-template-columns:minmax(0,74px) minmax(0,1fr);gap:4px 18px;padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--rule);transition:opacity .55s ease,transform .55s var(--mfx-enter)}
.mfx-rule-n{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(30px,2.8vw,40px);line-height:1;letter-spacing:-.05em;color:var(--mfx-sand3)}
.mfx-rule-t{display:flex;flex-direction:column;gap:10px;min-width:0}
.mfx-rule-t h3{font-size:clamp(22px,2.1vw,28px);line-height:1.12;letter-spacing:-.03em;margin:0;color:var(--fg)}
.mfx-rule-t p{font-size:clamp(16.5px,1.3vw,18px);line-height:1.6}
.mfx-do{display:flex;flex-direction:column;gap:6px;margin-top:4px;padding-top:12px;border-top:1px dashed var(--mfx-sand3);color:var(--fg)}
.mfx-do-k{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mfx-taupe)}

/* the agency against the field: a plain comparison, the right column carries the weight */
.mfx-vs{width:100%;border-collapse:collapse;margin-top:10px}
.mfx-vs th,.mfx-vs td{text-align:left;vertical-align:top;padding:15px 18px 15px 0;border-bottom:1px solid var(--rule);font-size:clamp(16px,1.25vw,17.5px);line-height:1.45;font-weight:400}
.mfx-vs thead th,.mfx-vs thead td{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mfx-taupe);border-bottom:1.5px solid var(--fg);padding-bottom:12px}
.mfx-vs tbody th{width:24%;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mfx-taupe);padding-top:19px}
.mfx-vs tbody td:nth-child(2){width:36%;color:var(--fg3)}
.mfx-vs tbody td:nth-child(3){color:var(--fg);font-weight:500}
.mfx-vs thead th:last-child{color:var(--fg)}

/* the promise, said to both sides */
.pt-prose-body .mfx-to{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;list-style:none;padding:0;margin:0}
.pt-prose-body .mfx-to li{display:flex;flex-direction:column;gap:8px;padding:16px 0 0;margin:0;border-top:1.5px solid var(--fg);font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--fg)}

/* the promise */
.pt-prose-body .mfx-promise{font-size:clamp(34px,4.4vw,60px);line-height:1.02;letter-spacing:-.045em}
.mfx-hold{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--fg)}
.mfx-hold b{font-weight:600}
.mfx-sign{display:flex;flex-wrap:wrap;gap:20px 56px;padding-top:22px;border-top:1px solid var(--rule)}
.mfx-sign p{display:flex;flex-direction:column;gap:4px}
.mfx-sign b{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.mfx-sign span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3)}
.mfx-call{margin-top:10px;color:var(--fg)}
.mfx-call b{font-weight:600}
.mfx-cta{margin-top:6px}
.mfx-more{font-size:15px}

/* rules settle in once (only when the page script runs) */
.mfx-js .mfx-rule[data-kit-reveal]:not(.bmk-seen){opacity:0;transform:translateY(12px)}

@media (max-width:900px){
  .mfx-side{align-items:baseline;gap:6px 14px}
  .mfx-n{font-size:30px}
}
@media (max-width:560px){
  .mfx-rule{grid-template-columns:minmax(0,1fr);gap:10px}
  .mfx-vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mfx-vs,.mfx-vs tbody,.mfx-vs tr,.mfx-vs th,.mfx-vs td{display:block;width:auto}
  .mfx-vs tbody td:nth-child(2),.mfx-vs tbody th{width:auto}
  .mfx-vs tr{padding:14px 0;border-bottom:1px solid var(--rule)}
  .mfx-vs tbody th,.mfx-vs tbody td{border:0;padding:0}
  .mfx-vs tbody td{margin-top:8px}
  .mfx-vs tbody td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mfx-taupe);font-weight:500;margin-bottom:2px}
  .pt-prose-body .mfx-to{grid-template-columns:minmax(0,1fr)}
  .mfx-switch{grid-template-columns:minmax(0,1fr)}
  .mfx-sw{padding:12px 14px;flex-direction:row;align-items:baseline;gap:12px}
  .pt-prose-body .mfx-trio{grid-template-columns:minmax(0,1fr)}
  .pt-prose-body .mfx-trio li{padding:16px 0}
  .pt-prose-body .mfx-trio li+li{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .mfx-pull{padding-left:14px}
}
@media (prefers-reduced-motion:reduce){
  .mfx-rule{transition:none}
}