/* ============================================================
   RSM Consulting — digital business card

   Palette and shape language mined from calendly.com's live
   stylesheets (marketing-assets.calendly.com/_next/static/chunks).
   Their token names are kept in the comments so the source of
   each value stays traceable.
   ============================================================ */

:root {
  /* Surfaces — warm paper, never pure white */
  --paper:      #f5f3ee;   /* --color-linen    */
  --surface:    #fcfbf8;   /* --color-magnolia */

  /* Ink — dark navy rather than black, which is what keeps it warm */
  --ink:        #071a31;   /* --color-midnight */
  --ink-2:      #3d464e;   /* --color-badge-neutral-text */
  --muted:      #5f6d77;   /* --color-steel    */

  /* Hairlines do the work shadows used to */
  --line:       #d8dce0;   /* --color-silver   */
  --line-soft:  #e4e6e9;   /* --color-ash      */

  /* Accents. Blue is Calendly's; bronze is ours, carried over from
     pryse.co.za so the two properties still read as one house. */
  --blue:       #006bff;   /* --color-blue-600 — focus rings only, 4.2:1 */
  --navy:       #0e396a;   /* --color-navy — blue text that passes AA    */
  --bronze:     #7d5f30;   /* darkened from #b8945f to clear 5.4:1       */
  --bronze-hair:#b8945f;   /* full strength, non-text only               */

  /* On the inverted band */
  --on-ink:     #fcfbf8;   /* --color-action-primary-bg (dark theme) */
  --on-ink-dim: #a6bbd1;   /* --color-neutral-500 — 8.9:1 on midnight */
  --on-ink-line:#fcfbf826;

  /* Radii. Calendly runs buttons tight and cards very round. */
  --r-btn:  10px;  /* --radius-btn-standard */
  --r-md:   16px;
  --r-card: 28px;  /* --radius-ui-2xl */

  --font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "SF Mono", Consolas, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t: .25s;

  --s1: 6px;  --s2: 10px; --s3: 14px; --s4: 20px;
  --s5: 28px; --s6: 40px; --s8: 64px;

  color-scheme: light;
}

/* ---------------------------------------------- reset-ish */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;               /* --leading-normal */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure { margin: 0; }

a { color: inherit; text-decoration: none; }

svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-btn);
}

/* ---------------------------------------------- bands
   Full-bleed horizontal strips are the whole layout idea. Bands own
   all vertical rhythm; nothing inside a band sets a top margin, so
   there is no margin collapsing to reason about. */

.band {
  position: relative;
  padding: clamp(var(--s8), 9vw, 104px) var(--s4);
}

.band--paper   { background: var(--paper); }
.band--surface { background: var(--surface); border-block: 1px solid var(--line-soft); }

.band--ink {
  background: var(--ink);
  color: var(--on-ink-dim);
  text-align: center;
}

.wrap {
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
}

.wrap--narrow { max-width: 36rem; }

.band__title {
  font-size: clamp(1.3rem, 4.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.03em;         /* --tracking-ui-tighter */
  line-height: 1.1;               /* --leading-ui-h2 */
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: var(--s5);
}

.band--ink .band__title { color: var(--on-ink); }

.band__title--lg {
  font-size: clamp(1.6rem, 6.4vw, 2.2rem);
  margin-bottom: var(--s2);
}

/* ---------------------------------------------- band 1 · hero */

.band--hero {
  background: var(--paper);
  overflow: hidden;
  padding-block: clamp(72px, 13vh, 132px) clamp(64px, 11vh, 116px);
}

/* Static fallback. The canvas covers this once it has a frame; if
   WebGL is unavailable it is all you ever see, and it is enough. */
.band--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 62% at 22% 34%, #c1defe80, transparent 70%),
    radial-gradient(48% 54% at 76% 62%, #deece880, transparent 72%);
}

.mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .9s var(--ease);
}

.mesh.is-lit { opacity: 1; }

.hero { position: relative; }

/* ---------------------------------------------- the mark
   R · S · M with hairline drops to what each letter stands for.
   Three columns, so the letters and their captions always align. */

.mark {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 0;
  margin-bottom: var(--s5);
}

.mark__letters,
.mark__stems,
.mark__keys { display: contents; }

.mark__letter {
  font-size: clamp(3.75rem, 20vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .92;
  color: var(--ink);
  text-align: center;
  padding-inline: .04em;
}

.mark__stems i {
  display: block;
  width: 1px;
  height: 13px;
  margin: 9px auto 7px;
  background: var(--bronze-hair);
  opacity: .6;
}

.mark__keys span {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--muted);
  text-align: center;
  padding-inline: 6px;
  white-space: nowrap;
}

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

.eyebrow {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: var(--s3);
}

.thesis {
  max-width: 20ch;
  font-size: clamp(2rem, 8.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.06;              /* --leading-ui-h1 */
  color: var(--ink);
  text-wrap: balance;
}

.lede {
  max-width: 42ch;
  margin-top: var(--s4);
  font-size: 1.0625rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------------------------------------------- band 2 · partners */

.partners {
  display: grid;
  gap: var(--s3);
}

@media (min-width: 46em) {
  .partners { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

.partner {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s5) var(--s4) var(--s4);
}

.domain {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: var(--s2);
}

.partner__name {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.15;
  color: var(--ink);
}

.partner__role {
  margin-top: 4px;
  font-size: .9375rem;
  color: var(--ink-2);
}

.partner__bio {
  margin-top: var(--s3);
  font-size: .9375rem;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---------------------------------------------- actions
   margin-top:auto pins the buttons to the card floor, so the two
   cards line up even when the bios run to different lengths. */

.actions {
  margin-top: auto;
  padding-top: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.actions::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--line);
  margin-bottom: var(--s4);
}

.actions__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}

/* ---------------------------------------------- buttons
   Calendly's real system: the primary is solid midnight, not blue,
   and the secondary is a hairline ghost that inverts completely
   on hover. Blue is a link colour there, never a CTA. */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0 var(--s4);
  border-radius: var(--r-btn);
  font-size: .9375rem;
  font-weight: 500;               /* --font-weight-medium */
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: background var(--t) var(--ease),
              border-color var(--t) var(--ease),
              color var(--t) var(--ease),
              transform var(--t) var(--ease);
}

.btn:active { transform: scale(.985); }

.btn--primary {
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* Inverted band: the same two roles, flipped. */
.btn--invert {
  background: var(--on-ink);
  color: var(--ink);
  border-color: var(--on-ink);
}

@media (hover: hover) {
  .btn--primary:hover { background: var(--navy); border-color: var(--navy); }
  .btn--ghost:hover   { background: var(--ink);  color: var(--on-ink); }
  .btn--invert:hover  { background: #c1defe; border-color: #c1defe; }
}

.band--ink :focus-visible { outline-color: var(--on-ink); }

.ico { width: 17px; height: 17px; flex: none; }

.tel {
  margin-top: var(--s1);
  text-align: center;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .05em;
  color: var(--muted);
}

/* ---------------------------------------------- band 3 · work */

/* Constrained here rather than on the wrap, so the heading keeps the
   same left edge as every other band title. */
.work {
  display: block;
  max-width: 34rem;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.work__name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}

.work__desc {
  display: block;
  margin-top: 4px;
  font-size: .9375rem;
  color: var(--muted);
}

.work__go {
  display: block;
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--navy);
}

@media (hover: hover) {
  .work:hover { border-color: var(--ink); background: #fff; }
}

/* ---------------------------------------------- band 4 · book */

.book__note {
  margin-bottom: var(--s5);
  font-size: 1rem;
  color: var(--on-ink-dim);
  text-wrap: pretty;
}

.book__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  max-width: 26rem;
  margin-inline: auto;
}

/* ---------------------------------------------- footer
   Rides the bottom of the inverted band rather than starting a
   fifth strip — one closing block, the way Calendly ends. */

.foot {
  margin-top: clamp(var(--s8), 8vw, 88px);
  padding-top: var(--s4);
  border-top: 1px solid var(--on-ink-line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--s3);
}

.foot__mark {
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: -.02em;
  color: var(--on-ink);
}

.foot__names {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .05em;
  color: var(--on-ink-dim);
}

/* ---------------------------------------------- entrance
   One orchestrated sequence, in the hero only. The bands below
   stay still — the atmosphere is spent once, at the top. */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: rise .65s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
  .mesh { transition: none; }
  .btn { transition: none; }
  .btn:active { transform: none; }
  .work { transition: none; }
}