/* ==========================================================================
   Lukas Lanx, section components.
   Loaded after site.css, which holds the tokens these rules read.
   ========================================================================== */

/* --- Proof: two rows of three figures separated by hairlines ------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 72px;
}

.stat {
  padding: 0 16px;
  text-align: center;
  border-right: 1px solid rgba(212, 175, 55, 0.3);
}

.stat:last-child { border-right: 0; }

.stat-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.stat-figure {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1.1;
  background: linear-gradient(to bottom, var(--gold-pale), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 8px;
}

.stat-note {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-body);
  margin-top: 16px;
}

.stats-divider { margin: 56px 0; }

/* --- Problem: copy over a photographed room, text on the left ------------ */

.split {
  position: relative;
  background-size: cover;
  background-position: center right;
  overflow: hidden;
}

.split::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(20, 50, 36, 1) 0%, rgba(20, 50, 36, 0.92) 50%, rgba(20, 50, 36, 0.25) 100%);
}

.split > .shell { position: relative; z-index: 1; }

.split-copy { max-width: 560px; padding: 24px 0; }

.split-copy p {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-soft);
  margin-top: 24px;
}

.split-copy .gold { color: var(--gold); }
.split-copy .soft { color: var(--text-body); }

.pullquote {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding: 24px 28px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: var(--radius);
  background: rgba(10, 25, 20, 0.5);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.5;
}

.pullquote-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

/* --- Fit: two lists, ticks on the left, crosses on the right ------------- */

.fit-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  color: #f8f9fa;
  margin-bottom: 28px;
}

.fit-list { list-style: none; }

.fit-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.45;
}

.fit-list li:first-child { border-top: 0; padding-top: 0; }

.fit-mark {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 9999px;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fit-yes .fit-mark { color: var(--gold); }
.fit-no  .fit-mark { color: var(--text-dim); }

/* --- What you get: three numbered steps with arrows between -------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
  align-items: stretch;
}

.step {
  position: relative;
  background: rgba(10, 25, 20, 0.72);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius);
  padding: 28px 26px 32px;
}

.step-n {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 30px;
  color: var(--gold);
  line-height: 1;
}

.step h3 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 24px;
  margin: 14px 0 10px;
}

.step-rule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 18px;
}

.step p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-dim);
}

.step p .gold { color: var(--gold); }

.step-arrow {
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  z-index: 2;
}

.step:last-child .step-arrow { display: none; }

/* The "What you get" section is the one background the design exports twice.
   The two files are the same photograph, but the mobile export is a squarer
   crop that keeps Lukas in frame, where cover-cropping the wide desktop file
   on a tall phone section pushes him out of it. The closing CTA also has two
   exports and those are pixel-identical, so it keeps one file. */
@media (max-width: 767px) {
  .split--whatyouget {
    background-image: url('../img/what-you-get-section-4cbca6fa.webp') !important;
    background-position: center top;
  }

  /* Lighter wash than the other .split sections. Everything in this one sits
     inside a card with its own ground, so the photograph can stay visible the
     way the mobile frame shows it. The default mobile wash below is heavy
     because the Problem section puts body copy straight onto the picture. */
  .split--whatyouget::before {
    background: linear-gradient(to bottom, rgba(16, 40, 29, 0.72) 0%, rgba(16, 40, 29, 0.6) 45%, rgba(16, 40, 29, 0.78) 100%);
  }
}

/* --- Case cards ---------------------------------------------------------- */

.case {
  background: rgba(10, 29, 22, 0.66);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.case-head { display: flex; align-items: center; gap: 12px; }

.case-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(212, 175, 55, 0.14);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.case-tag {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.3;
}

.case-sub { display: block; font-size: 14px; font-weight: 400; color: var(--text-body); }

.case h3 {
  font-family: var(--font-head);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  margin: 24px 0 16px;
}

.case p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-body);
}

.case p + p { margin-top: 14px; }

.case-foot { margin-top: auto; padding-top: 28px; }
.case-foot .rule-flat { opacity: 0.5; }

/* --- About card: copy left, portrait right ------------------------------- */

.about-card {
  margin-top: 56px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(10, 29, 22, 0.66);
}

.about-card-copy { padding: 44px; }

.about-card h2 {
  font-family: var(--font-head);
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.15;
  margin-top: 16px;
}

.about-points { list-style: none; margin: 32px 0 0; }

.about-points li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-body);
}

.about-points svg { flex: none; margin-top: 3px; color: var(--gold); }

.about-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  font-size: 14px;
  color: var(--text-body);
}

.about-card-foot a {
  color: var(--text-body);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.about-card-foot a:hover { color: var(--gold); }

/* Pushed to the far end only while the footer is one row. Once the card
   stacks, the link wraps onto its own line and the auto margin would park
   it against the right edge, where the frame has it left aligned under the
   divider. Was an inline style on the anchor, which CSS could not override. */
@media (min-width: 1025px) {
  .about-card-foot .link-arrow { margin-left: auto; }
}

.badge-upwork { display: inline-flex; align-items: center; gap: 8px; }
.badge-upwork .up { font-weight: 700; font-size: 18px; color: #22c55e; }
.badge-upwork small { display: block; font-size: 10px; color: var(--gold); letter-spacing: 0.04em; }

.about-card-photo {
  background-size: cover;
  background-position: center top;
  min-height: 420px;
}

/* --- FAQ ----------------------------------------------------------------- */

.faq { max-width: 840px; margin: 48px auto 0; display: grid; gap: 16px; }

.faq-item {
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius);
  background: rgba(10, 25, 20, 0.55);
  overflow: hidden;
}

.faq-item.is-open { border-color: rgba(212, 175, 55, 0.6); }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.4;
}

.faq-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.faq-sign {
  margin-left: auto;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
}

.faq-item.is-open .faq-sign { background: rgba(212, 175, 55, 0.14); }

.faq-a { display: none; padding: 0 24px 24px 76px; }
.faq-item.is-open .faq-a { display: block; }

.faq-a p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: #a3b1a8;
}

.faq-a .gold { color: var(--gold); }
.faq-a .btn--ghost { margin-top: 20px; font-size: 14px; padding: 10px 18px; }

.faq-more { text-align: center; margin-top: 36px; }

.faq-more-dot {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

/* --- FAQ ground: no photograph, two very soft radial washes over #0d1e17 -- */

.section--faq {
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(50, 40, 10, 0.10), rgba(50, 40, 10, 0) 70%),
    radial-gradient(70% 60% at 85% 10%, rgba(20, 50, 30, 0.15), rgba(20, 50, 30, 0) 70%),
    #0d1e17;
}

/* --- Closing CTA --------------------------------------------------------- */

.closing {
  position: relative;
  background-size: cover;
  background-position: center right;
  padding: 120px 0;
  overflow: hidden;
}

.closing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(8, 20, 16, 0.94) 0%, rgba(8, 20, 16, 0.8) 45%, rgba(8, 20, 16, 0.1) 100%);
}

.closing > .shell { position: relative; z-index: 1; }

.closing-mark {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: 0.08em;
  color: var(--gold);
}

.closing-mark::after {
  content: '';
  height: 1px;
  flex: 1;
  max-width: 315px;
  background: linear-gradient(to right, rgba(212, 175, 55, 0.6), rgba(212, 175, 55, 0));
}

.closing h2 {
  font-family: var(--font-head);
  font-size: clamp(38px, 5.4vw, 70px);
  line-height: 1.12;
  margin: 40px 0 0;
  max-width: 14ch;
}

.closing p {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-body);
  margin: 32px 0 40px;
  max-width: 46ch;
}

/* --- Video --------------------------------------------------------------- */

.video {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: #06120d;
  aspect-ratio: 16 / 9;
  max-width: 100%;
}

.video video { width: 100%; height: 100%; object-fit: cover; }

.video-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.video-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6, 18, 13, 0.35);
}

.video.is-playing .video-poster { display: none; }

.video-play {
  position: relative;
  z-index: 1;
  width: 70px;
  height: 70px;
  border-radius: 9999px;
  background: var(--gold);
  color: #0a1a11;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/* --- Insights cards ------------------------------------------------------ */

.topic {
  display: flex;
  flex-direction: column;
  background: rgba(10, 29, 22, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: var(--radius);
  padding: 30px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.topic:hover { border-color: rgba(212, 175, 55, 0.6); transform: translateY(-2px); }

.topic-icon {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 20px;
}

.topic-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
}

.topic h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.25;
  margin: 12px 0 16px;
}

.topic p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #cbd5e1;
}

.topic .link-arrow { margin-top: auto; padding-top: 24px; }

.post {
  display: flex;
  flex-direction: column;
  background: rgba(10, 29, 22, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.post:hover { border-color: rgba(212, 175, 55, 0.55); transform: translateY(-2px); }

.post-img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.post-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }

.post-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #e5a83b;
}

.post h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  margin: 12px 0 14px;
  color: #f5f7f5;
}

.post p { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--text-faint); }
.post .link-arrow { margin-top: auto; padding-top: 22px; color: #e5a83b; }

/* --- Cluster block ------------------------------------------------------- */

.cluster-list { list-style: none; margin-top: 20px; }

.cluster-list li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cluster-list li:first-child { border-top: 0; }

.cluster-list a {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: #ced6d2;
  text-decoration: none;
}

.cluster-list a:hover { color: var(--gold); }
.cluster-list svg { flex: none; margin-top: 5px; color: var(--gold); }

.start-here {
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--radius);
  background: rgba(10, 29, 22, 0.6);
  padding: 32px;
}

.start-here h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25;
  margin: 14px 0 16px;
}

.start-here p { font-size: 18px; font-weight: 300; line-height: 1.6; color: #ced6d2; }

/* --- Timeline (About) ---------------------------------------------------- */

.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 56px;
}

.tl-step {
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: var(--radius);
  padding: 24px 20px 26px;
  background: rgba(10, 29, 22, 0.55);
}

.tl-n {
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  background: var(--gold);
  color: #11241b;
}

.tl-step:nth-child(even) .tl-n { background: rgba(212, 175, 55, 0.15); color: var(--text); }

.tl-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8ea498;
  margin: 20px 0 6px;
}

.tl-step h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  margin-bottom: 12px;
}

.tl-step p { font-size: 13px; font-weight: 300; line-height: 1.55; color: #b3c5bb; }

.tl-photo {
  margin-top: 22px;
  aspect-ratio: 241 / 256;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
}

/* --- Freelancer strip (About) -------------------------------------------- */

.strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 40px;
}

/* Opaque enough to sit over the photograph behind this section: at 3% white
   the last two cards fell onto the bright part of the image and stopped
   being readable. */
.strip-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 20px 18px;
  background: rgba(9, 24, 18, 0.82);
}

.strip-n { font-size: 12px; font-weight: 600; color: #f0e6d6; }
.strip-item h4 { font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.3; margin: 14px 0 8px; }
.strip-item p { font-size: 11.5px; font-weight: 400; line-height: 1.55; color: #93a79d; }

/* --- Testimonials -------------------------------------------------------- */

.quote-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 26px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: var(--radius);
  background: rgba(10, 29, 22, 0.6);
  overflow: hidden;
}

.quote-photo { background-size: cover; background-position: center top; min-height: 260px; }
.quote-body { padding: 30px 30px 30px 0; }

.quote-card h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 2.2vw, 26px); }
.quote-role { font-size: 13px; font-weight: 500; color: #96a79e; margin-top: 4px; }

.quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 48px;
  line-height: 1;
  color: var(--gold);
  margin: 14px 0 6px;
}

.quote-body blockquote { font-size: 13.5px; font-weight: 400; line-height: 1.7; color: #cfd8d3; }

.quote-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #96a79e;
}

.quote-tags span:not(:last-child)::after {
  content: '|';
  margin-left: 10px;
  color: var(--gold);
}

/* --- Big number pair (About) --------------------------------------------- */

.figure-pair { display: flex; gap: 56px; flex-wrap: wrap; margin-top: 44px; }

.figure-pair .n {
  font-family: var(--font-head);
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  color: var(--gold);
}

.figure-pair .l {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cbd5e1;
  margin: 12px 0 6px;
}

.figure-pair .d { font-size: 14px; font-weight: 300; color: #94a3b8; line-height: 1.5; }

/* ==========================================================================
   Responsive. The file ships a 380px mobile frame and a 1440px desktop frame
   and nothing between them, so the tablet band below is a judgment call.
   ========================================================================== */

@media (max-width: 1024px) {
  .steps { grid-template-columns: 1fr; gap: 34px; }

  /* Stacked, so the connector points down instead of across, as the mobile
     frame has it. */
  .step-arrow {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -30px;
    transform: translateX(-50%) rotate(90deg);
  }
  .timeline { grid-template-columns: repeat(2, 1fr); }

  .strip { grid-template-columns: repeat(2, 1fr); }
  .about-card { grid-template-columns: 1fr; }

  /* No order swap. The card is copy then photo in the markup, which gives
     copy left and photo right on the desktop grid, and the mobile frame
     (2366:1399) keeps the same sequence when it stacks: the photo sits
     below 'More about Lukas', not above the kicker. An order: -1 here put
     it on top and was the one inversion on the whole mobile site. */
  .about-card-photo { min-height: 320px; }
  .closing { padding: 88px 0; }
}

/* ==========================================================================
   Phone type scale, taken off the mobile frames.

   The frames set a much smaller scale than the first mobile build shipped:
   32px section headlines, 13px body, 24px card headlines, and kickers and
   captions at 8 to 10px. Everything here is the frame's own value, with one
   deliberate floor: nothing ships below 11px, so the 8px kickers and the 8px
   stat captions come up to 11. Jose's call on 2026-09-11, recorded in
   refinement-findings-2026-09-11.md.
   ========================================================================== */

@media (max-width: 767px) {
  .kicker { font-size: 8px; }
  .h-section { font-size: 32px; line-height: 1.15; }
  .lede { font-size: 13px; line-height: 1.6; }

  /* Belege stays three across on a phone, as the frame has it: two rows of
     three, with the hairline between the columns and one between the rows.
     Stacking it one per row ran the section to about 1500px against the
     frame's 630. */
  .stats { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; }
  /* min-width 0 and a break: three columns on a 320 screen leaves about 97px
     each, and AUFTRAGSERFOLG is wider than that, which pushed the grid past
     the right edge. */
  .stat { padding: 0 7px; border-right: 1px solid rgba(212, 175, 55, 0.3); min-width: 0; overflow-wrap: anywhere; }
  .stat:last-child { border-right: 0; }
  .stat-icon { width: 42px; height: 42px; margin-bottom: 14px; }
  .stat-icon svg { width: 18px; height: 18px; }
  .stat-figure { font-size: 25px; }
  .stat-label { font-size: 12px; letter-spacing: 0.03em; margin-top: 6px; line-height: 1.3; }

  /* The frame puts a small gold dot between the label and its caption. */
  .stat-note { font-size: 8px; line-height: 1.45; margin-top: 14px; position: relative; }
  .stat-note::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    width: 3px;
    height: 3px;
    margin-left: -1.5px;
    border-radius: 50%;
    background: var(--gold);
  }
  .stats-divider { margin: 26px 0; }

  .split-copy p { font-size: 13px; line-height: 1.65; }
  .pullquote { font-size: 13px; line-height: 1.5; }

  .fit-title { font-size: 25px; }
  .fit-list li { font-size: 15px; }

  .step-n { font-size: 27px; }
  .step h3 { font-size: 24px; }
  .step p { font-size: 13px; line-height: 1.6; }

  .case-tag, .case-sub { font-size: 10px; }
  .case-card h3 { font-size: 24px; }
  .case-card p { font-size: 13px; line-height: 1.6; }

  .about-card h2 { font-size: 24px; }
  .about-points li { font-size: 13px; line-height: 1.6; }
  .about-card-foot { font-size: 14px; }
  .badge-upwork small { font-size: 10px; }


  /* The frame lays a journey step out in two columns: the numbered circle at
     x33, and the tag, title and body all at x94. Ours stacked the number above
     the text inside a bordered card, which cost about 160px a step and ran the
     section 724px past the frame. Borderless, number beside the copy, joined by
     the vertical rule the frame draws between the circles. */
  .timeline { grid-template-columns: 1fr; gap: 30px; margin-top: 34px; }

  .tl-step {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 27px;
    align-items: start;
    border: 0;
    background: none;
    padding: 0;
  }

  /* The circle spans the whole step and everything else flows down column two
     in document order. Pinning each child to a numbered row left the step's
     photograph with nowhere to go, and it landed on top of the tag. */
  .tl-n { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .tl-tag,
  .tl-step h3,
  .tl-step p,
  .tl-photo { grid-column: 2; }

  .tl-tag { margin: 6px 0 4px; font-size: 10px; }
  .tl-step h3 { font-size: 24px; margin-bottom: 10px; }
  /* min-width 0 so column two can shrink: at 320px the 34px circle plus the
     27px gutter left the photo wider than the track. */
  .tl-photo { margin-top: 14px; min-width: 0; }
  .tl-step > * { min-width: 0; }

  /* German compounds in the journey copy are wider than the narrowed column
     at 320, so they need a break the way the cards already have one. */
  .tl-step { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }

  .tl-step + .tl-step::before {
    content: '';
    position: absolute;
    left: 17px;
    top: -30px;
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, rgba(212, 175, 55, 0), rgba(212, 175, 55, 0.55));
  }


  /* The lesson / The Freelancer. The frame is two columns: the copy at x18 in a
     186 wide column, and him at x194, 222 wide and 249 tall, running off the
     right edge with a soft feather down his left side. He was a section
     background here, which cropped him out of frame on a phone. */
  .split--freelancer { background-image: none !important; }
  .split--freelancer::before { background: linear-gradient(to right, rgba(20, 50, 36, 0.92) 0%, rgba(18, 44, 32, 0.72) 60%, rgba(16, 40, 29, 0.5) 100%); }

  .frl-head {
    display: grid;
    grid-template-columns: minmax(0, 186px) 1fr;
    column-gap: 8px;
    align-items: start;
  }

  .frl-copy { min-width: 0; }

  /* 32px, as the frame sets it. The inline 36px clamp it carried was wider
     than the 186px column and clipped the r off "Freelancer". */
  .frl-title { font-size: 32px; margin-top: 14px; }
  .cal-ico { display: inline-flex; vertical-align: -3px; margin-right: 7px; color: var(--gold); }

  .frl-photo {
    position: relative;
    height: 249px;
    min-width: 0;
    margin-right: calc(var(--gutter) * -1);
    background-size: cover;

    /* The frame's fill carries imageTransform scale-x 0.568, translate-x 0.395,
       so it shows the band from 39.5% to 96.3% of the photo, centred on 67.9%.
       Our box is narrower than the frame's 222, and centre put that band's left
       half on screen and his face against the right edge. 85% lands the frame's
       centre in the middle of our box, which is what the crop is for. */
    background-position: 85% center;
  }

  /* "Subtle edge feathering gradient", 40 wide on his left in the frame. */
  .frl-photo::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 40px;
    background: linear-gradient(to right, rgba(20, 50, 36, 1), rgba(20, 50, 36, 0));
  }

  /* Four columns, numbered nodes 36x36 at x18, 114, 211 and 307, with one
     continuous rule behind them rather than segments between them. */
  .strip { grid-template-columns: repeat(4, 1fr); gap: 26px 6px; margin-top: 30px; position: relative; }

  .strip::before {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 18px;
    height: 1px;
    background: rgba(212, 175, 55, 0.35);
  }

  .strip-item {
    position: relative;
    border: 0;
    background: none;
    padding: 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .strip-n {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.55);
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--gold);
  }

  /* The frame's icon row: the two marketplace badges on step 01, then chat,
     clock and document at 24x24. */
  .strip-badges { display: flex; gap: 6px; margin-top: 14px; }
  .bdg {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 700;
    color: #fff;
  }
  .bdg--fiverr { background: #1dbf73; }
  .bdg--up { background: #14a800; }

  .strip-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 14px;
    color: var(--gold);
  }

  .strip-item h4 { font-size: 10px; line-height: 1.25; margin: 10px 0 5px; }
  .strip-item p { font-size: 8px; line-height: 1.4; }

  .faq-q { font-size: 16px; }
  .faq-a p { font-size: 13px; line-height: 1.65; }
  .faq-a .btn--ghost { font-size: 13px; }
  .faq-more a { font-size: 13px; }

  .closing-mark { font-size: 14px; }
  .closing h2 { font-size: 32px; line-height: 1.15; }
  .closing p { font-size: 13px; line-height: 1.6; }
  .closing .btn--lg { font-size: 13px; padding: 14px 26px; }
  .cta-facts { font-size: 10px; }
}

@media (max-width: 720px) {
  /* Was 0.96 to 0.86, which flattened the photograph out of existence. The
     frame keeps the lamp and the plant readable behind the copy, and fades
     across rather than straight down. */
  .split::before { background: linear-gradient(to right, rgba(20, 50, 36, 0.93) 0%, rgba(18, 44, 32, 0.74) 55%, rgba(16, 40, 29, 0.42) 100%); }
  .split-copy { max-width: none; }
  /* Stays a row. The frame has the icon inline to the left of the line, in a
     compact bordered box; stacking it made the box roughly twice as tall. */
  .pullquote { gap: 14px; padding: 16px 18px; margin-top: 28px; }
  .pullquote-icon { width: 36px; height: 36px; }
  .pullquote-icon svg { width: 16px; height: 16px; }
  .about-card-copy { padding: 28px; }
  .faq-a { padding-left: 24px; }
  .timeline { grid-template-columns: 1fr; }
  .quote-card { grid-template-columns: 1fr; }
  .quote-photo { min-height: 240px; }
  .quote-body { padding: 0 26px 26px; }
  .closing { padding: 72px 0; }
  /* Same again: he is supposed to be visible behind the closing copy. */
  .closing::before { background: linear-gradient(to right, rgba(8, 20, 16, 0.92) 0%, rgba(8, 20, 16, 0.74) 55%, rgba(8, 20, 16, 0.40) 100%); }
  .closing h2 { max-width: none; }
  .figure-pair { gap: 32px; }
  .start-here { padding: 24px; }
}

/* --------------------------------------------------------------------------
   Touch targets. Everything tappable clears 44px under a thumb. The inline
   arrow links and the small ghost buttons sit at 19 to 36px from their type
   size alone, which is fine with a mouse and not with a thumb.

   Keyed on the pointer as well as the width, because a tablet is a touch
   device above 768px: the device pass on 2026-09-11 found the footer legal
   links at 18px tall on every iPad and Android tablet, since a width-only
   query had already stopped applying by then.
   -------------------------------------------------------------------------- */

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .link-arrow,
  .about-card-foot a,
  .cluster-list a {
    min-height: 44px;
  }

  /* Footer links are real navigation, and now the only route to the legal
     pages, so they get a thumb-sized target like everything else. */
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }

  .faq-a .btn--ghost { min-height: 44px; padding: 12px 18px; }

  /* The base button lands at 42px from its padding alone, 2px short. */
  .btn { min-height: 44px; }
  .faq-q { min-height: 56px; }
  .topic .link-arrow, .post .link-arrow { min-height: 44px; }
}

/* A booking link that is waiting for the Calendly widget. Only ever visible
   if the script is slow, but a button that looks inert for half a second
   reads as broken. */
a[data-book].is-loading {
  cursor: progress;
  opacity: 0.75;
}