/* matearaic.com — Editorial (B2), chosen by Matea 27 Oct 2026 */

:root {
  --paper: #E9ECE6;
  --paper-2: #DDE2DA;
  --ink: #14251C;
  --ink-2: #4A5A50;
  --pink: #E8457A;
  --pink-ink: #B8285A;   /* pink for small text on paper (AA) */
  --line: #C3CBC2;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1440px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.pink { color: var(--pink); }

/* Scroll progress */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--pink); transform-origin: 0 50%; transform: scaleX(0); z-index: 30; }

/* Bar */
.bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 2px solid var(--ink); }
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 56px; }
.bar__name { text-decoration: none; font-weight: 500; }
.bar__name span { color: var(--ink-2); font-weight: 400; }
.bar__nav { display: flex; gap: 28px; }
.bar__nav a { text-decoration: none; position: relative; }
.bar__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.bar__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); padding: 6px 12px; border-radius: 99px; }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(232,69,122,.7); } 70% { box-shadow: 0 0 0 8px rgba(232,69,122,0); } 100% { box-shadow: 0 0 0 0 rgba(232,69,122,0); } }

/* Hero */
.hero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 80px); }
.hero__title { font-family: var(--display); font-weight: 800; font-size: clamp(72px, 15vw, 248px); line-height: 0.84; letter-spacing: -0.055em; margin: clamp(24px, 4vw, 48px) 0; }
.line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line--small { font-size: 0.42em; letter-spacing: -0.035em; font-weight: 600; margin-top: 0.15em; }
.word { display: inline-block; transform: translateY(105%); animation: rise 1s var(--ease) forwards; }
.line:nth-child(1) .word:nth-child(1) { animation-delay: .05s; }
.line:nth-child(1) .word:nth-child(2) { animation-delay: .15s; }
.line:nth-child(2) .word { animation-delay: .28s; }
.line:nth-child(3) .word:nth-child(1) { animation-delay: .45s; }
.line:nth-child(3) .word:nth-child(2) { animation-delay: .52s; }
.word--pink { color: var(--pink); }
@keyframes rise { to { transform: translateY(0); } }

.mark { position: relative; z-index: 0; }
.mark::before { content: ""; position: absolute; left: -0.06em; right: -0.06em; bottom: 0.08em; height: 0.36em; background: var(--pink); opacity: .35; z-index: -1; transform: scaleX(0); transform-origin: left; animation: sweep .9s var(--ease) 1.1s forwards; }
@keyframes sweep { to { transform: scaleX(1); } }

.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; border-top: 2px solid var(--ink); padding-top: 24px; }
.hero__intro { grid-column: 1 / span 6; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; }
.hero__facts { grid-column: 8 / span 5; }
.hero__facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hero__facts dt { color: var(--ink-2); }
.hero__facts dd { text-align: right; }

/* Ticker */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; border-block: 2px solid var(--ink); }
.ticker__track { display: flex; gap: 32px; width: max-content; padding: 18px 0; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -0.02em; white-space: nowrap; animation: marquee 38s linear infinite; }
.ticker__track span:nth-child(even) { color: var(--pink); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Sections */
.section { padding-top: clamp(80px, 10vw, 144px); }
.head { margin-bottom: clamp(32px, 4vw, 56px); }
.head__title { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 6.5vw, 104px); line-height: 0.9; letter-spacing: -0.045em; max-width: 15ch; }
.head__title--xl { font-size: clamp(52px, 8.5vw, 140px); max-width: 16ch; }

/* Title + oversized outlined number on the right */
.head--count { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.head__big { font-family: var(--display); font-weight: 800; font-size: clamp(96px, 16vw, 260px); line-height: .78; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px var(--ink); flex-shrink: 0; transition: color .6s var(--ease); }
.head--count:hover .head__big { color: var(--pink); -webkit-text-stroke-color: var(--pink); }
.head__big--range { font-size: clamp(40px, 6vw, 96px); line-height: .9; text-align: right; letter-spacing: -0.04em; -webkit-text-stroke-width: 1.5px; }

/* Title + short note at its baseline */
.head--aside { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; gap: 24px; }
.head__aside { color: var(--ink-2); font-size: 17px; max-width: 34ch; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }

/* Title on one line, with a pink rule that draws in */
.head--rule .head__title { max-width: none; }
.head--rule .head__title::after { content: ""; display: block; height: 8px; background: var(--pink); margin-top: 24px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .3s; }
.head--rule.is-in .head__title::after { transform: scaleX(1); }

/* Work index */
.index { border-top: 2px solid var(--ink); }
.row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 200px 160px; align-items: center; gap: 24px; padding: 28px 0; border-bottom: 2px solid var(--ink); text-decoration: none; overflow: hidden; isolation: isolate; }
.row::before { content: ""; position: absolute; inset: 0; background: var(--row-ink, var(--ink)); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); z-index: -1; }
.row:hover::before, .row:focus-visible::before { transform: scaleY(1); }
.row:hover, .row:focus-visible { color: var(--paper); }
.row__num { color: var(--pink); align-self: start; padding-top: 14px; transition: color .3s; }
.row:hover .row__num { color: var(--row-on, var(--pink)); }
.row__title { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.4vw, 68px); line-height: 0.95; letter-spacing: -0.04em; transition: transform .5s var(--ease); }
.row:hover .row__title { transform: translateX(16px); }
.row__sub { display: block; margin-top: 10px; color: var(--ink-2); max-width: 56ch; transition: color .3s; }
.row:hover .row__sub { color: #B9C4BC; }
.row__type { color: var(--ink-2); transition: color .3s; }
.row:hover .row__type { color: #B9C4BC; }
.row__metric { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.03em; text-align: right; color: var(--pink-ink); line-height: 1; }
.row:hover .row__metric { color: var(--row-on, var(--pink)); }
.row__metric small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; }
.row:hover .row__metric small { color: #B9C4BC; }
.row__thumb { display: none; }

.cursor-preview { position: fixed; top: 0; left: 0; width: 340px; aspect-ratio: 4 / 3; object-fit: cover; pointer-events: none; z-index: 25; border: 3px solid var(--pink); opacity: 0; transform: translate(-50%, -50%) scale(.8) rotate(-3deg); transition: opacity .25s, transform .35s var(--ease); }
.cursor-preview.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }

/* Products */
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.prod { display: flex; flex-direction: column; text-decoration: none; overflow: hidden; }
.prod--squared { background: #141414; color: #F4F4F1; }
.prod--squared .prod__title { color: #C8E64A; }
.prod--squared .mono { color: #C8E64A; }
.prod--zorya { background: #F2D6E1; color: #3E1D38; }
.prod--zorya .prod__title { color: #3E1D38; }
.prod--zorya .mono { color: #8C3A63; }
.prod__img { aspect-ratio: 16 / 9; overflow: hidden; }
.prod__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.prod:hover .prod__img img { transform: scale(1.05); }
.prod__body { padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.prod__title { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 6vw, 96px); line-height: .9; letter-spacing: -0.05em; }
.prod__link { display: inline-flex; gap: 8px; margin-top: 8px; }
.prod__link span { transition: transform .35s var(--ease); }
.prod:hover .prod__link span { transform: translateX(8px); }
.head__aside a { color: var(--ink); }

/* Numbers band */
.band { background: var(--ink); color: var(--paper); margin-top: clamp(80px, 10vw, 144px); padding: clamp(56px, 7vw, 96px) 0; }
.band__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.stat { display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--pink); padding-top: 16px; }
.stat__num { font-family: var(--display); font-weight: 800; font-size: clamp(56px, 7vw, 112px); line-height: .9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.stat .mono { color: #B9C4BC; }

/* About */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.about__photo { grid-column: 1 / span 4; background: var(--pink); aspect-ratio: 4 / 5; overflow: hidden; position: sticky; top: 88px; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1); }
.about__text { grid-column: 6 / span 7; padding-top: 4px; display: flex; flex-direction: column; gap: 28px; }
.about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 16px; }
.skills { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.skills li { border-top: 2px solid var(--ink); padding: 14px 0 20px; color: var(--ink-2); font-size: 15px; }
.skills b { display: block; font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 4px; }

/* Jobs */
.jobs { border-top: 2px solid var(--ink); columns: 2; column-gap: 48px; }
.jobs li { break-inside: avoid; display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.jobs li .mono { color: var(--pink-ink); }
.jobs b { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; }
.jobs li span:last-child { color: var(--ink-2); }
.jobs__note { color: var(--ink-2); margin-top: 16px; }

/* Quotes */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.quote { border-top: 2px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.quote blockquote { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.02; letter-spacing: -0.035em; }
.quote blockquote::first-letter { color: var(--pink); }
.quote p { color: var(--ink-2); font-size: 15px; }
.quote figcaption { color: var(--ink-2); font-size: 11px; margin-top: auto; }

/* Contact */
.contact { background: var(--ink); color: var(--paper); margin-top: clamp(80px, 10vw, 144px); padding: clamp(64px, 9vw, 128px) 0 32px; }
.contact__text { color: #B9C4BC; font-size: 20px; margin-bottom: 20px; }
.contact__title { font-family: var(--display); font-weight: 800; font-size: clamp(64px, 13vw, 220px); line-height: .84; letter-spacing: -0.055em; margin: 24px 0 40px; }
.contact__title .word { animation: none; transform: translateY(105%); transition: transform 1s var(--ease); }
.contact__title.is-in .word { transform: translateY(0); }
.contact__title.is-in .line:nth-child(2) .word { transition-delay: .1s; }
.contact__title.is-in .line:nth-child(3) .word { transition-delay: .2s; }
.contact__email { display: inline-flex; gap: 12px; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 3.4vw, 48px); letter-spacing: -0.02em; text-decoration: none; background-image: linear-gradient(var(--pink), var(--pink)); background-size: 100% 3px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 6px; transition: background-size .45s var(--ease), color .3s; }
.contact__email:hover { background-size: 100% 100%; color: var(--ink); }
.contact__links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 48px; }
.contact__links a { text-decoration: none; color: #B9C4BC; }
.contact__links a:hover { color: var(--pink); }
.contact__base { display: flex; justify-content: space-between; margin-top: 96px; padding-top: 20px; border-top: 1px solid #2E4237; color: #8FA095; }

/* Scroll reveal */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Tablet */
@media (max-width: 960px) {
  .bar__nav { display: none; }
  .bar__name span { display: none; }
  .hero__intro, .hero__facts, .about__photo, .about__text { grid-column: 1 / -1; }
  .head--aside { grid-template-columns: 1fr; }
  .row { grid-template-columns: 40px minmax(0, 1fr) 120px; }
  .row__type { display: none; }
  .band__grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .about__photo { position: static; max-width: 360px; }
  .quotes { grid-template-columns: 1fr; }
  .jobs { columns: 1; }
}

/* Phone */
@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .row__num { padding-top: 0; }
  .row__metric { text-align: left; }
  .row__thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; order: -1; }
  .row:hover .row__title { transform: none; }
  .products, .about__cols, .skills { grid-template-columns: 1fr; }
  .jobs li { grid-template-columns: 72px 1fr; }
  .jobs li span:last-child { grid-column: 2; }
  .contact__base { flex-direction: column; gap: 8px; }
  .head--count { flex-direction: column; align-items: flex-start; }
  .head__big { font-size: 96px; }
  .head__big--range { font-size: 40px; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .word, .contact__title .word { transform: none !important; }
  .mark::before { transform: scaleX(1); }
  .head--rule .head__title::after { transform: scaleX(1); }
  .js .reveal { opacity: 1; transform: none; }
  .ticker__track { transform: none; }
  .cursor-preview { display: none; }
}

/* How I build */
.build { background: var(--ink); color: var(--paper); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 16px; }
.build__title { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.035em; line-height: 1; }
.build__steps { display: flex; flex-wrap: wrap; gap: 8px; counter-reset: b; }
.build__steps li { counter-increment: b; border: 1px solid #3C5446; padding: 6px 10px; font-size: 11px; transition: background .3s, color .3s, border-color .3s; }
.build__steps li::before { content: counter(b) " "; color: var(--pink); }
.build__steps li:hover { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.build__steps li:hover::before { color: var(--ink); }
.build__steps li:nth-child(5) { border-color: var(--pink); }
.build p { color: #B9C4BC; font-size: 15px; }
.build__steps li.is-optional { border-style: dashed; color: #8FA095; }
.build__steps li em { font-style: normal; font-size: 10px; color: #6F8276; margin-left: 4px; text-transform: lowercase; letter-spacing: .02em; }
.build__steps li.is-optional:hover em { color: var(--ink); }

/* ===== Case study pages ===== */
/* Each case study sets its own project colours on <body>; these are the defaults.
   --cs-accent: big text and details on paper (>= 3:1)   --cs-fill: bars and highlights
   --cs-ink: dark panels                                  --cs-on-ink: accent on dark panels
   --cs-soft: hero background                             --cs-on-fill: text on --cs-fill */
:root { --cs-accent: var(--pink); --cs-fill: var(--pink); --cs-on-fill: var(--ink); --cs-ink: var(--ink); --cs-on-ink: var(--pink); --cs-soft: var(--paper-2); }
.cs-page .progress { background: var(--cs-fill); }
.cs-hero { background: var(--cs-soft); box-shadow: 0 0 0 100vmax var(--cs-soft); clip-path: inset(0 -100vmax); padding-bottom: clamp(40px, 5vw, 64px); }
.cs-hero .cs-title { color: var(--cs-ink); }
.cs-swatch-bar { display: flex; height: 10px; margin-top: 28px; max-width: 320px; }
.cs-swatch-bar span { flex: 1; }

.link-arrow { color: var(--cs-accent); text-decoration: none; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }
.label { color: var(--ink-2); }

.cs-hero { padding-top: clamp(32px, 5vw, 64px); }
.cs-back { display: inline-flex; gap: 8px; text-decoration: none; color: var(--ink-2); margin-bottom: clamp(32px, 5vw, 64px); transition: color .3s, gap .3s var(--ease); }
.cs-back:hover { color: var(--ink); gap: 14px; }
.cs-title { font-family: var(--display); font-weight: 800; font-size: clamp(56px, 11vw, 184px); line-height: .86; letter-spacing: -0.055em; max-width: 13ch; }
.cs-lead { font-size: clamp(20px, 2vw, 28px); line-height: 1.4; max-width: 38ch; margin-top: clamp(24px, 3vw, 40px); }

.cs-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; border-top: 2px solid var(--ink); margin-top: clamp(40px, 5vw, 64px); padding-top: 20px; }
.cs-facts dt { color: var(--ink-2); margin-bottom: 6px; }
.cs-facts dd { font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 16px; line-height: 1.45; }

.cs-own { margin-top: 40px; }
.cs-own__row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.cs-own__row .label { padding-top: 8px; }
.cs-own__held { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-own__held li { background: var(--cs-ink); color: var(--paper); padding: 6px 12px; font-size: 14px; transition: background .3s; }
.cs-own__held li:hover { background: var(--cs-fill); color: var(--cs-on-fill); }
.cs-own__directed { border: 2px dashed var(--ink); padding: 12px 16px; font-size: 15px; color: var(--ink-2); }
.cs-own__directed strong { color: var(--ink); font-weight: 500; }

.cs-cover { margin-top: clamp(48px, 7vw, 96px); }
.cs-cover img { width: 100%; border: 2px solid var(--ink); }

.cs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(48px, 6vw, 80px); }
.cs-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.cs-stat { border-top: 2px solid var(--ink); padding-top: 16px; }
.cs-stat .cs-stat__num { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 5.5vw, 88px); line-height: .9; letter-spacing: -0.05em; color: var(--ink); }
.cs-stat .cs-stat__num--accent { color: var(--cs-accent); }
.cs-stat p:not(.cs-stat__num) { color: var(--ink-2); font-size: 15px; margin-top: 10px; max-width: 24ch; }

/* Sections: pink number + big left-aligned title, body in a reading column */
.cs-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-top: clamp(80px, 10vw, 144px); }
.cs-section__head { grid-column: 1 / span 1; }
.cs-num { position: sticky; top: 84px; display: block; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px var(--cs-accent); }
.cs-section__body { grid-column: 2 / span 10; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.cs-section__body > h2 { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5.6vw, 88px); line-height: .92; letter-spacing: -0.045em; max-width: 16ch; }
.cs-section__body > p { font-size: 18px; max-width: 64ch; }
.cs-section__body h3 { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; }
.cs-wide { grid-column: 1 / -1; }

.cs-pull { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.2vw, 48px) !important; line-height: 1.02; letter-spacing: -0.035em; max-width: 24ch !important; padding-left: 28px; border-left: 8px solid var(--cs-fill); }

.cs-table { border-top: 2px solid var(--ink); }
.cs-table__row { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); transition: background .3s, padding .3s var(--ease); }
.cs-table__row:not(.cs-table__row--head):hover { background: var(--paper-2); padding-left: 12px; padding-right: 12px; }
.cs-table__row--head { color: var(--ink-2); padding: 10px 0; }
.cs-table__row .cs-table__arrow { color: var(--cs-accent); font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.1; }
.cs-table__row b { font-weight: 500; display: block; font-size: 17px; }
.cs-table__row div > span { color: var(--ink-2); font-size: 15px; }
.cs-table__resp { font-size: 17px; }

.cs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cs-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-card { background: var(--paper-2); padding: 24px; display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--ink); transition: transform .4s var(--ease), border-color .3s; }
.cs-card:hover { transform: translateY(-4px); border-top-color: var(--cs-fill); }
.cs-card p { color: var(--ink-2); font-size: 16px; }
.cs-card .mono { color: var(--cs-accent); }
.cs-card__note { border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; font-size: 14px !important; }

.cs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; counter-reset: step; }
.cs-steps li { border-top: 2px solid var(--ink); padding: 14px 0 24px; }
.cs-steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--display); font-weight: 800; font-size: 32px; letter-spacing: -0.04em; line-height: 1; color: var(--cs-accent); margin-bottom: 8px; }
.cs-steps p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }

.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chips li { border: 2px solid var(--ink); padding: 5px 12px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; transition: background .3s, color .3s; }
.cs-chips li:hover { background: var(--cs-ink); color: var(--paper); }

.cs-ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cs-ba__col { background: var(--paper-2); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.cs-ba__col h3 { font-size: 28px !important; }
.cs-ba__col p { color: var(--ink-2); font-size: 16px; }
.cs-ba__col.cs-ba__col--after { background: var(--cs-ink); color: var(--paper); }
.cs-ba__col.cs-ba__col--after .mono { color: var(--cs-on-ink); }
.cs-ba__col.cs-ba__col--after p { color: #C6D0C9; }

.cs-screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cs-screens figure { display: flex; flex-direction: column; gap: 14px; }
.cs-screens img { width: 100%; transition: transform .6s var(--ease); }
.cs-screens figure:hover img { transform: translateY(-8px) rotate(-1deg); }
.cs-screens figcaption b { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; }
.cs-screens figcaption p { color: var(--ink-2); font-size: 15px; margin-top: 4px; }

.cs-figure { display: flex; flex-direction: column; gap: 10px; }
.cs-figure img { width: 100%; border: 2px solid var(--ink); }
.cs-figure figcaption { color: var(--ink-2); font-size: 14px; }

.cs-note { background: var(--cs-ink); color: #C6D0C9; padding: 22px 26px; font-size: 16px; }
.cs-note b { color: var(--cs-on-ink); font-weight: 500; }

.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.swatch { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.swatch span:first-child { aspect-ratio: 1; border: 2px solid var(--ink); }
.swatch .mono { color: var(--ink-2); font-size: 10px; }

.cs-section .quote { background: var(--paper-2); padding: 24px; border-top: 4px solid var(--ink); }
.cs-section .quote .quote__lead { color: var(--ink); font-size: inherit; }

.cs-next { display: block; text-decoration: none; border-top: 2px solid var(--ink); margin-top: clamp(96px, 12vw, 176px); padding-top: 24px; }
.cs-next__title { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 9vw, 152px); line-height: .88; letter-spacing: -0.055em; margin-top: 12px; transition: color .4s, transform .6s var(--ease); }
.cs-next:hover .cs-next__title { color: var(--cs-accent); transform: translateX(16px); }

@media (max-width: 960px) {
  .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-section__head { grid-column: 1 / -1; }
  .cs-num { position: static; }
  .cs-section__body { grid-column: 1 / -1; }
  .cs-section { gap: 12px; }
  .cs-steps, .cs-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cs-own__row { grid-template-columns: 1fr; gap: 8px; }
  .cs-cards, .cs-cards--3, .cs-steps, .cs-ba { grid-template-columns: 1fr; }
  .cs-screens { grid-template-columns: 1fr 1fr; }
  .cs-table__row { grid-template-columns: 1fr; gap: 4px; }
  .cs-table__row .cs-table__arrow, .cs-table__row--head { display: none; }
  .cs-table__resp::before { content: "→ "; color: var(--cs-accent); font-weight: 800; }
  .cs-pull { padding-left: 18px; border-left-width: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-card:hover, .cs-screens figure:hover img, .cs-next:hover .cs-next__title { transform: none; }
}