/* Cyne Labs, v4: the rail.
   Everything floats on thermal grain (black running into teal). The wordmark
   opens centred, then flies into a liquid-glass rail on the left.
   Previously: v3.1.
   Built like a product page: one sans (Instrument Sans) at calm sizes, a mono
   (JetBrains Mono, Kerfd's own) only where the content is data, and real
   artifacts in every section. One signature move, the line, in #215c4f.
   No labels above headings. No WebGL. */

:root {
  --bg: #0B0D0C;
  --surface: rgba(14, 18, 16, 0.78);
  --surface-2: #171C1A;
  --ink: #ECEEEC;
  --mute: #8E9793;
  --line: rgba(236, 238, 236, 0.1);
  --line-strong: rgba(236, 238, 236, 0.22);

  /* The teal. #215c4f carries the line, fills and glows; it is too dark for
     small text on this background (about 2.3:1), so small teal text and focus
     rings use a lighter step of the same hue. */
  --teal: #215C4F;
  --teal-light: #5FB7A1;
  --teal-glow: rgba(33, 92, 79, 0.55);
  /* The same two as channels, for translucent uses. ground.js rewrites all
     five when it rolls a new hue. */
  --teal-rgb: 33, 92, 79;
  --teal-light-rgb: 95, 183, 161;

  --gutter: clamp(20px, 4vw, 64px);
  --rail-w: 232px;
  --rail-gap: 16px;
  --max: 1240px;
  --radius: 22px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { background: #050606; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 4px; border-radius: 6px; }

.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 50;
  padding: 0.6rem 1rem; background: var(--ink); color: var(--bg); border-radius: 999px;
}
.skip:focus { top: 16px; }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; }

/* ---------- ground: thermal grain ---------- */

.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #050606;
}
/* The heat: a pre-rendered thermal field (tools/thermal.py), black running
   into teal. Taller than the screen so it can drift as the page scrolls. */
.ground__heat {
  position: absolute;
  inset: -6% -6% -24% -6%;
  background: #030404 url("assets/ground.webp") center / cover no-repeat;
  will-change: transform;
}
@media (orientation: portrait) {
  .ground__heat { background-image: url("assets/ground-tall.webp"); }
}
/* A rolled ground (ground.js) covers the webp once it's drawn. */
.ground__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The cursor glow: warms the ground under the pointer, under the grain so
   it gets the same film. Masked off the rail's column, so the glass never
   sees it move and its blur is never recomputed. */
.ground__glow {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--rail-gap) + var(--rail-w) + 8px), #000 calc(var(--rail-gap) + var(--rail-w) + 160px));
  mask-image: linear-gradient(90deg, transparent calc(var(--rail-gap) + var(--rail-w) + 8px), #000 calc(var(--rail-gap) + var(--rail-w) + 160px));
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.ground__glow.is-on { opacity: 1; }
.ground__glow span {
  position: absolute;
  left: 0;
  top: 0;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--teal-light-rgb), 0.34), rgba(var(--teal-rgb), 0.16) 45%, transparent);
  will-change: transform;
}
@media (max-width: 860px), (hover: none) {
  .ground__glow { display: none; }
}

/* The grain, in two layers of the same static noise: a faint speck that shows
   on the black, and an overlay that breaks up the teal like film. */
.ground::before {
  content: "";
  position: absolute;
  inset: -240px;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.07;
  pointer-events: none;
}
.ground::after {
  z-index: 1;
  content: "";
  position: absolute;
  inset: -240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- the wordmark ---------- */

.brand {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 0.84;
  transform-origin: 0 0;
}
.brand { display: flex; align-items: center; }
.brand__mark { display: block; flex-shrink: 0; overflow: visible; }
/* The mark on the dark site: a lighter Cyne teal over solid white. */
.brand__mark { color: var(--ink); }
.brand__slash { stroke: currentColor; }
.brand__flash { stroke: currentColor; opacity: 0; filter: blur(5px); }
.brand__text { display: block; }
.brand__word { display: block; width: max-content; white-space: nowrap; }
/* Where it sits without the fly-in: the top of the rail. */
html:not(.js) .brand { top: calc(var(--rail-gap) + 26px); left: calc(var(--rail-gap) + 24px); }

/* ---------- the rail: liquid glass ---------- */

.rail {
  position: fixed;
  top: var(--rail-gap);
  bottom: var(--rail-gap);
  left: var(--rail-gap);
  width: var(--rail-w);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 26px 24px 24px;
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.05) 100%);
  -webkit-backdrop-filter: blur(40px) saturate(170%);
          backdrop-filter: blur(40px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 40px 90px -40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
/* The sheen: light caught along the top-left edge of the glass. */
.rail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 40% at 0% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%),
    radial-gradient(80% 30% at 100% 100%, rgba(var(--teal-light-rgb), 0.10), rgba(var(--teal-light-rgb), 0) 60%);
  pointer-events: none;
}
.rail__slot { height: var(--slot-h, 96px); flex-shrink: 0; }
.rail__nav { display: flex; flex-direction: column; gap: 2px; position: relative; }
.rail__nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.2rem;
  color: var(--mute);
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s var(--ease);
}
.rail__nav a::before {
  content: "";
  width: 14px; height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease), background 0.4s var(--ease);
}
.rail__nav a:hover,
.rail__nav a.is-on { color: var(--ink); }
.rail__nav a.is-on::before { width: 26px; background: var(--teal-light); }
.rail__foot { margin: auto 0 0; color: var(--mute); font-size: 0.82rem; line-height: 1.5; position: relative; }

/* ---------- intro ---------- */

.intro { height: 100svh; position: relative; }
.intro__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5vh, 48px);
  transform: translateX(-50%);
  margin: 0;
  color: var(--mute);
  font-size: 0.85rem;
}
html:not(.js) .intro { display: none; }

/* ---------- content column ---------- */

.content { margin-left: calc(var(--rail-w) + var(--rail-gap) * 2); }

/* ---------- shared pieces ---------- */

.button {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  text-decoration: none;
  font-weight: 560;
  font-size: 0.97rem;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.button { background: rgba(8, 10, 9, 0.55); }
.button:hover { border-color: var(--ink); }
.button--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.button--solid:hover { background: transparent; color: var(--ink); }

.text-link {
  color: var(--teal-light);
  text-decoration: none;
  font-weight: 540;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.text-link:hover { border-bottom-color: currentColor; }

/* The line: the page's one signature. A hairline of teal with a bright head. */
.line {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal) 70%, rgba(var(--teal-rgb), 0) 100%);
  transform-origin: left center;
}
.line__head {
  position: absolute;
  right: 30%;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--teal-light);
  box-shadow: 0 0 14px 4px var(--teal-glow), 0 0 40px 10px rgba(var(--teal-rgb), 0.35);
}
.line--divider {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
  width: calc(100% - 2 * var(--gutter));
}

/* ---------- hero ---------- */

.hero {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 100svh;
  padding: clamp(64px, 12vh, 140px) var(--gutter) clamp(56px, 9vh, 96px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__title {
  margin: 0 0 clamp(36px, 6vh, 64px);
  font-size: clamp(2.6rem, 6.6vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 600;
}
.hero__row { display: block; }
.line--hero { margin-bottom: clamp(28px, 5vh, 48px); }
.hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero__sub { margin: 0; max-width: 34rem; color: rgba(236, 238, 236, 0.78); font-size: 1.12rem; }
.hero__links { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- Kerfd ---------- */

.kerfd { margin: 0 0 clamp(80px, 12vh, 140px); }
.kerfd__head { text-align: center; max-width: 46rem; margin: 0 auto clamp(48px, 8vh, 88px); }
.kerfd__head h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -0.05em;
}
/* Kerfd's own lockup, kept as Kerfd draws it: its serif is its brand. */
.kerfd__logo { letter-spacing: 0; gap: 0.32em; }
.kerfd__specs { height: 0.62em; width: auto; flex-shrink: 0; }
.kerfd__word { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; line-height: 1; }
.kerfd__lead { margin: 1rem 0 0.9rem; font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 560; letter-spacing: -0.02em; line-height: 1.2; }
.kerfd__sub { margin: 0 auto 1.8rem; color: var(--mute); max-width: 36rem; }
.kerfd__links { display: flex; gap: 1.4rem; justify-content: center; align-items: center; flex-wrap: wrap; }

/* The app floats on the dark page like a device on a stage. */
.window {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow:
    0 50px 120px -30px rgba(0, 0, 0, 0.8),
    0 30px 140px -40px var(--teal-glow);
  transform-origin: 50% 100%;
}
.kerfd__facts {
  list-style: none;
  margin: clamp(48px, 8vh, 88px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.kerfd__facts li { color: var(--mute); font-size: 0.98rem; }
.kerfd__facts b { display: block; margin-bottom: 0.35rem; color: var(--ink); font-weight: 600; font-size: 1.05rem; }

/* ---------- work ---------- */

.work {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(96px, 14vh, 160px) var(--gutter);
}
.work__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(56px, 9vh, 104px); }
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.tile {
  grid-column: span 3;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.tile--wide {
  grid-column: span 6;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.tile--small { grid-column: span 3; }
/* A wide tile still waiting for its artifact uses the full width. */
.tile--wide > :only-child { grid-column: 1 / -1; max-width: 40rem; }
.tile h3 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
/* A product's own logo stands in for its name, at about the heading's size. */
.tile__logo img { height: clamp(44px, 4.4vw, 58px); width: auto; }
.tile p { margin: 0; color: var(--mute); }
.tile p + p { margin-top: 0.9rem; }
.tile__note { color: var(--ink) !important; }
.tile__text .text-link { display: inline-block; margin-top: 1.2rem; }

/* Artifacts: real things from each project, set in Kerfd's mono. */
.artifact {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.86rem;
  line-height: 1.75;
}
.artifact__title { margin: 0 0 0.6rem !important; color: var(--mute) !important; font-size: 0.8rem; }
.log { list-style: none; margin: 0; padding: 0; counter-reset: run; }
.log li { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log li::before { content: "▸ "; color: var(--teal-light); }
.log .log__more { color: var(--mute); font-family: "Instrument Sans", sans-serif; font-size: 0.92rem; }
.log .log__more::before { content: ""; }

.checks { margin: 0; }
.checks div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
}
.checks div:first-child { border-top: 0; }
.checks dt { color: var(--ink); }
.checks dd { margin: 0; color: var(--teal-light); text-align: right; }

.artifact--flow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.state {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
}
.state--open { color: var(--ink); }
.state--yes { color: var(--teal-light); border-color: rgba(var(--teal-light-rgb), 0.45); background: rgba(var(--teal-rgb), 0.25); }
.state--no { color: var(--mute); text-decoration: line-through; }
.flow__arrow { width: 36px; height: 1px; background: var(--teal); position: relative; }
.flow__arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  border-left: 6px solid var(--teal); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.flow__ends { display: flex; flex-direction: column; gap: 8px; }

/* ---------- why ---------- */

.why {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(96px, 14vh, 160px) var(--gutter);
}
.why__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.why__head h2, .work__head h2, .method__head h2, .about__head h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.why__head p, .work__head p, .method__head p, .about__head p { margin: 0; color: var(--mute); max-width: 32rem; font-size: 1.08rem; }
.kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(48px, 8vh, 88px);
}
.kind {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px);
}
.kind h3 { margin: 0 0 0.8rem; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; }
.kind p { margin: 0; color: var(--mute); }

/* ---------- method: pinned, one step at a time (from v2) ---------- */

.method { max-width: var(--max); margin: 0 auto; }
.method__pin {
  min-height: 100svh;
  padding: clamp(56px, 9vh, 104px) var(--gutter) clamp(40px, 6vh, 72px);
  display: flex;
  flex-direction: column;
}
.method__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(32px, 5vh, 56px); }
.steps__tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-strong);
}
.steps__tabs li {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  padding: 1rem 0 1rem 1rem;
  border-left: 1px solid var(--line);
  color: var(--mute);
  font-weight: 560;
  transition: color 0.4s var(--ease);
}
.steps__tabs li:first-child { border-left: 0; padding-left: 0; }
.steps__tabs li.is-on { color: var(--ink); }
.steps__tabs i { font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.8rem; color: var(--teal-light); }
.steps__progress { height: 1px; background: var(--line); }
.steps__progress span {
  display: block;
  height: 2px;
  margin-top: -0.5px;
  background: var(--teal-light);
  box-shadow: 0 0 12px var(--teal-glow);
  transform: scaleX(0);
  transform-origin: left;
}
.steps { list-style: none; margin: 0; padding: 0; position: relative; flex: 1; }
.step {
  display: grid;
  grid-template-columns: minmax(5rem, 1fr) 4fr;
  gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(48px, 10vh, 120px);
}
.step__num {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: var(--teal-light);
  line-height: 1.2;
}
.step h3 {
  margin: 0 0 1.2rem;
  font-size: clamp(3.4rem, 9vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
}
.step p:not(.step__num) { margin: 0; color: var(--mute); max-width: 32rem; font-size: 1.12rem; }

/* ---------- about ---------- */

.about {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(96px, 14vh, 160px) var(--gutter) 0;
}
.about__head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.about__body {
  margin-top: clamp(48px, 8vh, 88px);
}
.about__text {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px);
}
.about__text p { margin: 0; color: var(--mute); max-width: 40rem; }
.about__text p + p { margin-top: 1rem; }
.about__text p:first-child { color: var(--ink); }

/* ---------- closing ---------- */

.closing {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(80px, 14vh, 160px) var(--gutter) clamp(96px, 16vh, 180px);
  text-align: center;
}
.closing h2 {
  margin: 0 0 2.4rem;
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

/* ---------- footer ---------- */

.footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px var(--gutter) 40px;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 0.9rem;
}
.footer p { margin: 0; }
.footer nav { display: flex; gap: 1.4rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* ---------- motion start states (only when GSAP runs) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .rail { opacity: 0; }
  .js .line--hero { transform: scaleX(0); }
}

/* ---------- small screens ---------- */

@media (max-width: 860px) {
  .rail {
    top: 10px; left: 10px; right: 10px; bottom: auto;
    width: auto; height: 64px;
    flex-direction: row; align-items: center; gap: 16px;
    padding: 0 18px; border-radius: 20px;
  }
  .rail__slot { height: auto; width: var(--slot-w, 90px); }
  .rail__nav { flex-direction: row; margin-left: auto; gap: 14px; }
  .rail__nav a { padding: 0; font-size: 0.9rem; }
  .rail__nav a::before, .rail__foot { display: none; }
  .rail__nav a:not(:last-child) { display: none; }
  html:not(.js) .brand { top: 22px; left: 30px; }
  .content { margin-left: 0; }
  .hero__row { display: inline; }
  .kerfd__facts { grid-template-columns: 1fr; }
  .tile, .tile--small { grid-column: span 6; }
  .tile--wide { grid-template-columns: 1fr; }
  .why__head, .work__head, .method__head, .kinds, .about__head { grid-template-columns: 1fr; }
  .steps__tabs, .steps__progress { display: none; }
  .step { grid-template-columns: 1fr; gap: 0.4rem; padding-top: 40px; }
  .step h3 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .kerfd__head h3 { flex-direction: column; gap: 0.6rem; }
}