/*
 * Rilke Labs — rilkelabs.com. Colours and type follow the Rilke
 * brand guidelines v1.0: Ink #111014, Cream #F2ECE1, Spark #E5A65B (deep
 * #B57B33 on light), Instrument Serif for display, Instrument Sans for
 * everything else.
 */

:root {
  --ink: #111014;
  --ink-hover: #2b2820;
  --cream: #f2ece1;
  --sand: #e9e1d2;
  --stone: #dcd3be;
  --spark: #e5a65b;
  --spark-deep: #b57b33;
  --text: #4a4638;
  --text-strong: #3a3628;
  --muted: #6b6455;
  --muted-dark: #9a9284;
  --on-ink: #c9c2b2;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--spark-deep); text-decoration: none; }
a:hover { color: var(--spark); }
img { display: block; }

/* Sections jump below the sticky nav instead of under it. */
section[id] { scroll-margin-top: 72px; }

.wrap { max-width: 1200px; margin: 0 auto; }
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.serif { font-family: var(--serif); font-weight: 400; }
.accent { color: var(--spark-deep); }

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 236, 225, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(17, 16, 20, 0.08);
}
.nav .wrap {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { color: var(--text-strong); font-size: 15px; font-weight: 500; white-space: nowrap; }
/* Five items need tighter spacing on tablets before the text links hide at 760px. */
@media (max-width: 900px) { .nav-links { gap: 20px; } }
.nav-links a:hover { color: var(--ink); }
.nav-links a.btn-nav {
  background: var(--ink);
  color: var(--cream);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-links a.btn-nav:hover { background: var(--ink-hover); color: var(--cream); }

/* ----------------------------------------------------------------- hero */
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 24px 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 5.2vw, 60px);
  line-height: 1.15;
  font-weight: 400;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.hero p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
  max-width: 560px;
  margin: 0 0 36px;
}
.buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 15px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}
.btn-dark {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 8px 24px rgba(17, 16, 20, 0.18);
}
.btn-dark:hover { background: var(--ink-hover); color: var(--cream); }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(17, 16, 20, 0.2);
}
.btn-outline:hover { color: var(--ink); border-color: rgba(17, 16, 20, 0.45); }

/* The floating building blocks. Each shape is a 3-D box (six faces) or a
   cylinder (two caps + 36 side strips), spun by one of four keyframe paths.
   Each path runs twice per loop so the spin ends exactly where it started —
   one lap left a visible snap. */
.hero-art {
  position: relative;
  height: 380px;
  min-width: 0;
}
/* The perspective lives on this inner layer (not .hero-art) so phones can
   scale the whole scene without flattening the 3-D. */
.shapes { position: absolute; inset: 0; perspective: 900px; }
.shape { position: absolute; transform-style: preserve-3d; will-change: transform; }
.face { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

@keyframes float1 {
  0% { transform: translate3d(50px,0px,0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  5% { transform: translate3d(40px,29px,57px) rotateX(72deg) rotateY(-54deg) rotateZ(36deg); }
  10% { transform: translate3d(15px,48px,35px) rotateX(144deg) rotateY(-108deg) rotateZ(72deg); }
  15% { transform: translate3d(-15px,48px,-35px) rotateX(216deg) rotateY(-162deg) rotateZ(108deg); }
  20% { transform: translate3d(-40px,29px,-57px) rotateX(288deg) rotateY(-216deg) rotateZ(144deg); }
  25% { transform: translate3d(-50px,0px,0px) rotateX(360deg) rotateY(-270deg) rotateZ(180deg); }
  30% { transform: translate3d(-40px,-29px,57px) rotateX(432deg) rotateY(-324deg) rotateZ(216deg); }
  35% { transform: translate3d(-15px,-48px,35px) rotateX(504deg) rotateY(-378deg) rotateZ(252deg); }
  40% { transform: translate3d(15px,-48px,-35px) rotateX(576deg) rotateY(-432deg) rotateZ(288deg); }
  45% { transform: translate3d(40px,-29px,-57px) rotateX(648deg) rotateY(-486deg) rotateZ(324deg); }
  50% { transform: translate3d(50px,0px,0px) rotateX(720deg) rotateY(-540deg) rotateZ(360deg); }
  55% { transform: translate3d(40px,29px,57px) rotateX(792deg) rotateY(-594deg) rotateZ(396deg); }
  60% { transform: translate3d(15px,48px,35px) rotateX(864deg) rotateY(-648deg) rotateZ(432deg); }
  65% { transform: translate3d(-15px,48px,-35px) rotateX(936deg) rotateY(-702deg) rotateZ(468deg); }
  70% { transform: translate3d(-40px,29px,-57px) rotateX(1008deg) rotateY(-756deg) rotateZ(504deg); }
  75% { transform: translate3d(-50px,0px,0px) rotateX(1080deg) rotateY(-810deg) rotateZ(540deg); }
  80% { transform: translate3d(-40px,-29px,57px) rotateX(1152deg) rotateY(-864deg) rotateZ(576deg); }
  85% { transform: translate3d(-15px,-48px,35px) rotateX(1224deg) rotateY(-918deg) rotateZ(612deg); }
  90% { transform: translate3d(15px,-48px,-35px) rotateX(1296deg) rotateY(-972deg) rotateZ(648deg); }
  95% { transform: translate3d(40px,-29px,-57px) rotateX(1368deg) rotateY(-1026deg) rotateZ(684deg); }
  100% { transform: translate3d(50px,0px,0px) rotateX(1440deg) rotateY(-1080deg) rotateZ(720deg); }
}
@keyframes float2 {
  0% { transform: translate3d(-55px,0px,0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  5% { transform: translate3d(-44px,32px,-62px) rotateX(-72deg) rotateY(54deg) rotateZ(-36deg); }
  10% { transform: translate3d(-17px,52px,-38px) rotateX(-144deg) rotateY(108deg) rotateZ(-72deg); }
  15% { transform: translate3d(17px,52px,38px) rotateX(-216deg) rotateY(162deg) rotateZ(-108deg); }
  20% { transform: translate3d(44px,32px,62px) rotateX(-288deg) rotateY(216deg) rotateZ(-144deg); }
  25% { transform: translate3d(55px,0px,0px) rotateX(-360deg) rotateY(270deg) rotateZ(-180deg); }
  30% { transform: translate3d(44px,-32px,-62px) rotateX(-432deg) rotateY(324deg) rotateZ(-216deg); }
  35% { transform: translate3d(17px,-52px,-38px) rotateX(-504deg) rotateY(378deg) rotateZ(-252deg); }
  40% { transform: translate3d(-17px,-52px,38px) rotateX(-576deg) rotateY(432deg) rotateZ(-288deg); }
  45% { transform: translate3d(-44px,-32px,62px) rotateX(-648deg) rotateY(486deg) rotateZ(-324deg); }
  50% { transform: translate3d(-55px,0px,0px) rotateX(-720deg) rotateY(540deg) rotateZ(-360deg); }
  55% { transform: translate3d(-44px,32px,-62px) rotateX(-792deg) rotateY(594deg) rotateZ(-396deg); }
  60% { transform: translate3d(-17px,52px,-38px) rotateX(-864deg) rotateY(648deg) rotateZ(-432deg); }
  65% { transform: translate3d(17px,52px,38px) rotateX(-936deg) rotateY(702deg) rotateZ(-468deg); }
  70% { transform: translate3d(44px,32px,62px) rotateX(-1008deg) rotateY(756deg) rotateZ(-504deg); }
  75% { transform: translate3d(55px,0px,0px) rotateX(-1080deg) rotateY(810deg) rotateZ(-540deg); }
  80% { transform: translate3d(44px,-32px,-62px) rotateX(-1152deg) rotateY(864deg) rotateZ(-576deg); }
  85% { transform: translate3d(17px,-52px,-38px) rotateX(-1224deg) rotateY(918deg) rotateZ(-612deg); }
  90% { transform: translate3d(-17px,-52px,38px) rotateX(-1296deg) rotateY(972deg) rotateZ(-648deg); }
  95% { transform: translate3d(-44px,-32px,62px) rotateX(-1368deg) rotateY(1026deg) rotateZ(-684deg); }
  100% { transform: translate3d(-55px,0px,0px) rotateX(-1440deg) rotateY(1080deg) rotateZ(-720deg); }
}
@keyframes float3 {
  0% { transform: translate3d(40px,0px,0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  5% { transform: translate3d(32px,24px,52px) rotateX(36deg) rotateY(-72deg) rotateZ(54deg); }
  10% { transform: translate3d(12px,38px,-32px) rotateX(72deg) rotateY(-144deg) rotateZ(108deg); }
  15% { transform: translate3d(-12px,38px,-32px) rotateX(108deg) rotateY(-216deg) rotateZ(162deg); }
  20% { transform: translate3d(-32px,24px,52px) rotateX(144deg) rotateY(-288deg) rotateZ(216deg); }
  25% { transform: translate3d(-40px,0px,0px) rotateX(180deg) rotateY(-360deg) rotateZ(270deg); }
  30% { transform: translate3d(-32px,-24px,-52px) rotateX(216deg) rotateY(-432deg) rotateZ(324deg); }
  35% { transform: translate3d(-12px,-38px,32px) rotateX(252deg) rotateY(-504deg) rotateZ(378deg); }
  40% { transform: translate3d(12px,-38px,32px) rotateX(288deg) rotateY(-576deg) rotateZ(432deg); }
  45% { transform: translate3d(32px,-24px,-52px) rotateX(324deg) rotateY(-648deg) rotateZ(486deg); }
  50% { transform: translate3d(40px,0px,0px) rotateX(360deg) rotateY(-720deg) rotateZ(540deg); }
  55% { transform: translate3d(32px,24px,52px) rotateX(396deg) rotateY(-792deg) rotateZ(594deg); }
  60% { transform: translate3d(12px,38px,-32px) rotateX(432deg) rotateY(-864deg) rotateZ(648deg); }
  65% { transform: translate3d(-12px,38px,-32px) rotateX(468deg) rotateY(-936deg) rotateZ(702deg); }
  70% { transform: translate3d(-32px,24px,52px) rotateX(504deg) rotateY(-1008deg) rotateZ(756deg); }
  75% { transform: translate3d(-40px,0px,0px) rotateX(540deg) rotateY(-1080deg) rotateZ(810deg); }
  80% { transform: translate3d(-32px,-24px,-52px) rotateX(576deg) rotateY(-1152deg) rotateZ(864deg); }
  85% { transform: translate3d(-12px,-38px,32px) rotateX(612deg) rotateY(-1224deg) rotateZ(918deg); }
  90% { transform: translate3d(12px,-38px,32px) rotateX(648deg) rotateY(-1296deg) rotateZ(972deg); }
  95% { transform: translate3d(32px,-24px,-52px) rotateX(684deg) rotateY(-1368deg) rotateZ(1026deg); }
  100% { transform: translate3d(40px,0px,0px) rotateX(720deg) rotateY(-1440deg) rotateZ(1080deg); }
}
@keyframes float4 {
  0% { transform: translate3d(0px,-48px,58px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  5% { transform: translate3d(28px,-39px,18px) rotateX(90deg) rotateY(36deg) rotateZ(-36deg); }
  10% { transform: translate3d(46px,-15px,-47px) rotateX(180deg) rotateY(72deg) rotateZ(-72deg); }
  15% { transform: translate3d(46px,15px,-47px) rotateX(270deg) rotateY(108deg) rotateZ(-108deg); }
  20% { transform: translate3d(28px,39px,18px) rotateX(360deg) rotateY(144deg) rotateZ(-144deg); }
  25% { transform: translate3d(0px,48px,58px) rotateX(450deg) rotateY(180deg) rotateZ(-180deg); }
  30% { transform: translate3d(-28px,39px,18px) rotateX(540deg) rotateY(216deg) rotateZ(-216deg); }
  35% { transform: translate3d(-46px,15px,-47px) rotateX(630deg) rotateY(252deg) rotateZ(-252deg); }
  40% { transform: translate3d(-46px,-15px,-47px) rotateX(720deg) rotateY(288deg) rotateZ(-288deg); }
  45% { transform: translate3d(-28px,-39px,18px) rotateX(810deg) rotateY(324deg) rotateZ(-324deg); }
  50% { transform: translate3d(0px,-48px,58px) rotateX(900deg) rotateY(360deg) rotateZ(-360deg); }
  55% { transform: translate3d(28px,-39px,18px) rotateX(990deg) rotateY(396deg) rotateZ(-396deg); }
  60% { transform: translate3d(46px,-15px,-47px) rotateX(1080deg) rotateY(432deg) rotateZ(-432deg); }
  65% { transform: translate3d(46px,15px,-47px) rotateX(1170deg) rotateY(468deg) rotateZ(-468deg); }
  70% { transform: translate3d(28px,39px,18px) rotateX(1260deg) rotateY(504deg) rotateZ(-504deg); }
  75% { transform: translate3d(0px,48px,58px) rotateX(1350deg) rotateY(540deg) rotateZ(-540deg); }
  80% { transform: translate3d(-28px,39px,18px) rotateX(1440deg) rotateY(576deg) rotateZ(-576deg); }
  85% { transform: translate3d(-46px,15px,-47px) rotateX(1530deg) rotateY(612deg) rotateZ(-612deg); }
  90% { transform: translate3d(-46px,-15px,-47px) rotateX(1620deg) rotateY(648deg) rotateZ(-648deg); }
  95% { transform: translate3d(-28px,-39px,18px) rotateX(1710deg) rotateY(684deg) rotateZ(-684deg); }
  100% { transform: translate3d(0px,-48px,58px) rotateX(1800deg) rotateY(720deg) rotateZ(-720deg); }
}

/* -------------------------------------------------- problem / solution */
.problem { background: var(--ink); padding: 96px 24px; }
.problem .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 40px;
}
.problem h2, .solution h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 400;
  margin: 0 0 20px;
  line-height: 1.15;
}
.problem-col { padding: 8px 0; }
.problem-col .eyebrow { color: var(--muted-dark); margin-bottom: 18px; }
.problem-col h2 { color: var(--cream); }
.problem-col > p { font-size: 17px; line-height: 1.75; color: var(--on-ink); margin: 0 0 36px; max-width: 460px; }
.points { display: grid; gap: 24px; }
.point { padding-top: 24px; border-top: 1px solid rgba(242, 236, 225, 0.16); }
.point h3 { font-size: 14px; font-weight: 700; color: var(--cream); margin: 0 0 8px; }
.point p { font-size: 16px; line-height: 1.7; color: var(--on-ink); margin: 0; }

.solution { background: var(--cream); border-radius: 20px; padding: 44px 40px; }
.solution .eyebrow { margin-bottom: 18px; }
.solution h2 { color: var(--ink); }
.solution > p { font-size: 17px; line-height: 1.75; color: var(--text); margin: 0 0 36px; }
.solution .point { border-top-color: rgba(17, 16, 20, 0.14); }
.solution .point h3 { color: var(--ink); }
.solution .point p { color: var(--text); }
.rotating { color: var(--spark-deep); font-weight: 600; transition: opacity 0.4s ease; }
.rotating.is-hidden { opacity: 0; }
.caas { color: var(--spark-deep); font-weight: 600; }

/* ----------------------------------------------------------- philosophy */
.philosophy { padding: 110px 24px; background: var(--cream); }
.philosophy .wrap { max-width: 1100px; }
.rule-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(17, 16, 20, 0.15);
  margin-bottom: 48px;
}
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px 64px;
  align-items: start;
}
.philosophy h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}
.philosophy p { font-size: 17px; line-height: 1.8; color: var(--text); margin: 0 0 32px; }
.pull { font-family: var(--serif); font-size: 26px; line-height: 1.4; color: var(--ink); }

/* ------------------------------------------------------------- services */
.services { padding: 100px 24px; background: var(--sand); }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 64px; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { font-family: var(--serif); font-size: clamp(28px, 3.8vw, 40px); font-weight: 400; margin: 0; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px;
}
.card {
  background: #fff;
  border-radius: 20px;
  padding: 36px 30px;
  box-shadow: 0 10px 30px rgba(17, 16, 20, 0.06);
  transition: transform 0.2s;
}
.card:hover { transform: translateY(-6px); }
.card h3 { font-size: 20px; font-weight: 700; margin: 0 0 12px; }
.card p { font-size: 15.5px; line-height: 1.65; color: var(--text); margin: 0; }
.icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.icon-diamond { width: 16px; height: 16px; border-radius: 4px; background: var(--spark); transform: rotate(45deg); }
.icon-flow { gap: 4px; }
.icon-flow .node { width: 8px; height: 8px; border-radius: 50%; background: var(--cream); }
.icon-flow .node.lit { background: var(--spark); }
.icon-flow .link { width: 14px; height: 2px; background: var(--cream); }
.icon-compass {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-compass .needle { width: 3px; height: 9px; background: var(--spark); }

/* ---------------------------------------------------------- how it works */
.how { padding: 110px 24px; background: var(--cream); }
.how .wrap { max-width: 1100px; }
.how .section-head { max-width: none; }
/* Four steps, so the count is set rather than left to auto-fit: auto-fit
   gives three across on a wide screen and strands the fourth on its own
   row. Four across on desktop, a 2x2 on tablets, stacked on phones. */
.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
}
.step-num { font-family: var(--serif); font-size: 48px; color: var(--spark-deep); margin-bottom: 14px; }
.step h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.step p { font-size: 15.5px; line-height: 1.65; color: var(--text); margin: 0; }

/* ------------------------------------------------------------ final CTA */
.cta { padding: 110px 24px; background: var(--ink); }
.cta .wrap { max-width: 700px; text-align: center; }
.cta h2 { font-family: var(--serif); font-size: clamp(32px, 4.6vw, 48px); font-weight: 400; color: var(--cream); margin: 0 0 20px; }
.cta p { font-size: 18px; line-height: 1.7; color: var(--on-ink); margin: 0 0 36px; }
.btn-spark {
  display: inline-block;
  background: var(--spark);
  color: var(--ink);
  padding: 17px 34px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
}
.btn-spark:hover { background: #eeb877; color: var(--ink); }

/* --------------------------------------------------------- case studies */
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.cs-intro { padding: 88px 24px 48px; }
.cs-intro .eyebrow { margin-bottom: 18px; }
.cs-intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px 64px;
  align-items: end;
}
.cs-intro h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.05;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
}
.cs-intro p { font-size: 18px; line-height: 1.7; color: var(--text); margin: 0; max-width: 480px; }

.cs-list { padding: 16px 24px 110px; }
.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
  gap: 40px 32px;
  padding-top: 40px;
  border-top: 1px solid rgba(17, 16, 20, 0.12);
}
.cs-card { display: flex; flex-direction: column; gap: 22px; color: var(--ink); transition: transform 0.25s ease; }
.cs-card:hover { color: var(--ink); transform: translateY(-4px); }
/* A white card for each logo. The industry label is pinned to the corner
   so the logo centres in the whole box, not in the space left below the
   label. */
.cs-panel {
  position: relative;
  height: 200px;
  border-radius: 18px;
  padding: 28px;
  background: #fff;
  border: 1px solid rgba(17, 16, 20, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-panel-meta {
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.cs-panel img { width: min(46%, 210px); height: auto; }
.cs-card .eyebrow { margin-bottom: 12px; }
.cs-card h2 { font-family: var(--serif); font-size: 28px; line-height: 1.2; font-weight: 400; margin: 0 0 16px; }
.cs-more {
  display: block;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 16, 20, 0.12);
  font-size: 14px;
  font-weight: 600;
}

/* A single case study */
.cs-back { padding: 48px 24px 0; }
.cs-back a { font-size: 14px; font-weight: 600; color: var(--text); }
.cs-back a:hover { color: var(--ink); }
.cs-head { padding: 48px 24px 56px; }
.cs-head .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 48px 72px;
  align-items: end;
}
.cs-head .eyebrow { margin-bottom: 18px; }
.cs-head h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.08;
  font-weight: 400;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}
.cs-head p { font-size: 18px; line-height: 1.7; color: var(--text); margin: 0; max-width: 580px; }
.cs-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(17, 16, 20, 0.14);
}
.cs-facts dt { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.cs-facts dd { font-size: 16px; font-weight: 600; margin: 0; }
/* Long, flat wordmarks need more width to read at the same size. */
.cs-panel img.wide { width: min(72%, 330px); }
.cs-hero-logo { padding: 0 24px; }
.cs-hero-logo .cs-panel img.wide { width: min(72%, 520px); }
.cs-hero-logo .cs-panel { height: clamp(180px, 24vw, 280px); }
.cs-hero-logo .cs-panel img { width: min(40%, 380px); }

.cs-story { background: var(--sand); padding: 96px 24px; margin-top: 72px; }
.cs-story .wrap { max-width: 1100px; display: flex; flex-direction: column; gap: 64px; }
.cs-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px 64px;
}
.cs-block h2 { font-family: var(--serif); font-size: 36px; font-weight: 400; margin: 0; line-height: 1.15; }
.cs-block p { font-size: 18px; line-height: 1.75; color: var(--text-strong); margin: 0 0 28px; }
.cs-points { list-style: none; margin: 0; padding: 0; }
.cs-points li { padding: 16px 0; border-top: 1px solid rgba(17, 16, 20, 0.14); }
.cs-points strong { display: block; font-size: 17px; margin-bottom: 4px; }
.cs-points span { font-size: 16px; line-height: 1.65; color: var(--text); }

.cs-shift { padding: 110px 24px; }
.cs-shift .wrap { max-width: 1100px; }
.cs-shift h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 400;
  margin: 0 0 40px;
}
.cs-rows { display: grid; gap: 0; }
.cs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr);
  gap: 16px 40px;
  padding: 28px 0;
  border-top: 1px solid rgba(17, 16, 20, 0.14);
}
.cs-row h3 { font-size: 17px; font-weight: 700; margin: 0; }
.cs-row p { font-size: 16px; line-height: 1.65; color: var(--text); margin: 0; }
.cs-row .label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.cs-row .after .label { color: var(--spark-deep); }
.cs-row .after p { color: var(--ink); }
.cs-closing {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.35;
  margin: 56px 0 0;
  padding-top: 40px;
  border-top: 1.5px solid var(--ink);
}

.cs-next-wrap { padding: 0 24px 110px; }
.cs-next {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 24px;
  padding: 40px 0;
  border-top: 1px solid rgba(17, 16, 20, 0.14);
  border-bottom: 1px solid rgba(17, 16, 20, 0.14);
  color: var(--ink);
}
.cs-next:hover { color: var(--spark-deep); }
.cs-next .eyebrow { grid-column: 1; }
.cs-next-title {
  grid-column: 1;
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  max-width: 760px;
}
.cs-next-arrow { grid-column: 2; grid-row: 1 / span 2; font-size: 32px; }

@media (max-width: 760px) {
  .cs-block, .cs-row { grid-template-columns: 1fr; }
  .cs-next-wrap { padding-bottom: 80px; }
  .cs-intro { padding-top: 64px; }
  .cs-story { padding-top: 72px; padding-bottom: 72px; margin-top: 56px; }
  .cs-shift { padding-top: 80px; padding-bottom: 80px; }
}
@media (max-width: 420px) {
  .cs-intro, .cs-list, .cs-back, .cs-head, .cs-hero-logo, .cs-story, .cs-shift, .cs-next-wrap { padding-left: 16px; padding-right: 16px; }
  .cs-facts { grid-template-columns: 1fr; }
  .cs-panel { height: 170px; padding: 22px; }
  .cs-panel-meta { top: 22px; left: 22px; right: 22px; }
}

/* --------------------------------------------------------------- footer */
.footer { padding: 40px 24px; background: var(--cream); border-top: 1px solid rgba(17, 16, 20, 0.08); }
.footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer small { font-size: 14px; color: var(--muted); }
.footer nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; }
.footer nav a { color: var(--text); }
.footer nav a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  /* The design has no phone menu; the three section links hide and the
     call button stays, so the bar never wraps onto a second line. */
  .nav-links a:not(.btn-nav) { display: none; }
  .hero { padding: 56px 24px 64px; gap: 24px; }
  .solution { padding: 36px 26px; }
  .problem, .services { padding-top: 72px; padding-bottom: 72px; }
  .philosophy, .how, .cta { padding-top: 80px; padding-bottom: 80px; }
}
@media (max-width: 420px) {
  .nav .wrap { padding: 14px 16px; }
  .nav-links a.btn-nav { padding: 9px 14px; font-size: 13px; }
  .hero, .problem, .philosophy, .services, .how, .cta, .footer { padding-left: 16px; padding-right: 16px; }
}

/* The floating blocks on narrow screens. They are laid out on a 400px stage,
   but spinning and drifting they reach about 76px past its left edge and
   49px past its right (worked out from the four keyframe paths: drift +
   half-diagonal + perspective growth) — ~525px in all, centred 13.5px left
   of the stage's middle. Two columns need ~970px before the white block
   stops swinging off the right edge (measured), so at 980px and below the
   hero is one column (set here, not left to auto-fit, whose switch point
   moves with the scrollbar) with the art under the text on that fixed
   stage, centred on the swept area and scaled so the whole sweep fits. */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  /* Spinning, the blocks also swing ~57px above the stage (x the scale) —
     the margin keeps that clear of the buttons above. */
  .hero-art { height: 380px; margin-top: 46px; }
  .hero-art .shapes {
    left: 50%;
    right: auto;
    width: 400px;
    height: 380px;
    transform: translateX(calc(-50% + 13px));
    transform-origin: 50% 0;
  }
}
@media (max-width: 560px) {
  .hero-art { height: 310px; margin-top: 34px; }
  .hero-art .shapes { transform: translateX(calc(-50% + 11px)) scale(0.8); }
}
@media (max-width: 420px) {
  .hero-art { height: 270px; margin-top: 28px; }
  .hero-art .shapes { transform: translateX(calc(-50% + 9px)) scale(0.68); }
}
@media (max-width: 360px) {
  .hero-art { height: 240px; margin-top: 26px; }
  .hero-art .shapes { transform: translateX(calc(-50% + 8px)) scale(0.6); }
}

/* Motion is decoration here — respect people who have asked for less. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shape { animation: none !important; }
  .card, .rotating { transition: none; }
}