/* ==========================================================================
   FIRM.HANDSHAKE
   A corporate handshake rendered entirely in pink.
   ========================================================================== */

:root {
  --pink: #fbc1d4;
  --ink: #1e1e1e;
  --white: #ffffff;
  --hot: #ff7ec4;
  --lav: #c3abff;
  --yellow: #fed35b;
  --green: #48b469;

  --ink-soft: rgba(30, 30, 30, 0.58);
  --hair: 1px solid rgba(30, 30, 30, 0.14);

  --gut: clamp(16px, 3vw, 44px);
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.76, 0, 0.24, 1);

  --micro: clamp(0.62rem, 0.7vw, 0.74rem);
  --body: clamp(0.92rem, 1vw, 1.05rem);
}

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

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

body {
  margin: 0;
  background: var(--pink);
  color: var(--ink);
  font-family: 'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
h1,
h2,
h3,
p,
figure,
ul {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--ink);
  color: var(--pink);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.serif {
  font-family: 'Boska', Georgia, serif;
  font-weight: 400;
}

.micro {
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* The wordmark: set to span the measure exactly, however wide the screen is. */
.wordmark {
  display: block;
  width: 100%;
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  /* 10.3vw ≈ the cap width of FIRM.HANDSHAKE at this tracking */
  font-size: 10.3vw;
}

.big {
  font-size: clamp(1.9rem, 4.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.line {
  display: block;
  overflow: hidden;
}
.line__inner {
  display: block;
  will-change: transform;
}
:root.no-anim .line__inner {
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Pill button
   -------------------------------------------------------------------------- */

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}

/* Ink sheet wipes up from the bottom. */
.pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.5s var(--e-out);
  z-index: -1;
}
.pill:hover::before {
  transform: translateY(0);
}
.pill:hover {
  color: var(--pink);
}

.pill--solid {
  background: var(--ink);
  color: var(--pink);
  border-color: var(--ink);
}
.pill--solid::before {
  background: var(--yellow);
}
.pill--solid:hover {
  color: var(--ink);
}

.pill i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px var(--gut);
  transition: transform 0.55s var(--e-out);
}
.header.is-hidden {
  transform: translateY(-120%);
}

.header__nav {
  display: flex;
  gap: clamp(12px, 1.8vw, 28px);
}

.header__nav a {
  position: relative;
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding-bottom: 2px;
}
.header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--e-out);
}
.header__nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(58px, 9vh, 96px) var(--gut) 0;
}

.hero__mark {
  will-change: transform;
}

.hero__dot {
  color: var(--hot);
}

.hero__sub {
  margin: clamp(14px, 2.4vh, 26px) auto 0;
  text-align: center;
  font-size: clamp(0.95rem, 1.35vw, 1.4rem);
  line-height: 1.25;
  font-weight: 700;
}
.hero__sub em {
  display: block;
  font-style: normal;
  font-weight: 400;
}

.hero__seal {
  position: relative;
  width: min(48vw, 460px);
  margin: clamp(10px, 2vh, 30px) auto 0;
  aspect-ratio: 1;
  will-change: transform;
}


/* --------------------------------------------------------------------------
   The seal

   Everything is the page's own pink; only light and shadow give it form.
   Two offsets drive the whole thing — `--hx/--hy` points TOWARD the light
   and carries every highlight, `--sx/--sy` points away and carries every
   shadow. JS moves them with the pointer. The defaults below are the
   resting state (light from the upper left) and are what you get without
   JS or with reduced motion.

   Sign conventions, because they are easy to get backwards:
     · a raised edge (the disc, the letters) is lit on the side facing the
       light, so its outset white shadow is offset toward it (--hx)
     · a recessed edge (the well) is the opposite: the wall nearest the
       light is the one in its own shade, so its inset dark shadow is
       offset away from the light (--sx)
   -------------------------------------------------------------------------- */

.seal {
  --hx: -9px;
  --hy: -12px;
  --sx: 9px;
  --sy: 12px;
  --hx2: -2.4px;
  --hy2: -3.2px;
  --sx2: 2.4px;
  --sy2: 3.2px;
  --px: 34%;
  --py: 30%;
  position: relative;
  width: 100%;
  height: 100%;
}

/* This is the first CSS version, restored: a lit crest along the rim, a
   softly recessed well, faint relief on the marks. Several later passes
   (wider blurs, a torus band, a full three.js scene with real shadows)
   each modelled the reference's geometry more faithfully and each read
   further from it — its whole character is this softness. */
.seal__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--pink);
  box-shadow:
    /* rim bevel: lit toward the light, shaded away from it */
    inset calc(var(--sx) * 0.35) calc(var(--sy) * 0.35) 6px rgba(255, 255, 255, 0.5),
    inset calc(var(--hx) * 0.35) calc(var(--hy) * 0.35) 6px rgba(118, 28, 64, 0.1),
    /* the body's own cast light and shadow, tight then soft */
    var(--hx) var(--hy) 14px rgba(255, 255, 255, 0.55),
    calc(var(--hx) * 2.4) calc(var(--hy) * 2.4) 44px rgba(255, 255, 255, 0.32),
    var(--sx) var(--sy) 14px rgba(118, 28, 64, 0.13),
    calc(var(--sx) * 2.4) calc(var(--sy) * 2.4) 44px rgba(118, 28, 64, 0.14);
}

.seal__well {
  position: absolute;
  inset: 8.5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at var(--px) var(--py), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 58%),
    var(--pink);
  box-shadow:
    inset var(--sx) var(--sy) 16px rgba(118, 28, 64, 0.13),
    inset var(--hx) var(--hy) 16px rgba(255, 255, 255, 0.55);
}

.seal__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* One filter on the whole drawing: the sheen sits inside the same
     outline, so shadowing the union once is exact and cheap. */
  filter: drop-shadow(var(--hx2) var(--hy2) 2px rgba(255, 255, 255, 0.75))
    drop-shadow(var(--sx2) var(--sy2) 3.5px rgba(118, 28, 64, 0.22));
}

.seal__relief {
  fill: var(--pink);
  stroke: var(--pink);
}

.seal__sheen {
  fill: url(#sealLit);
  stroke: url(#sealLit);
}

/* A broad, soft pool of light under the pointer, so the seal and the page
   read as lit by the same thing. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    760px circle at var(--mx, 50%) var(--my, 42%),
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0) 64%
  );
}
.hero > * {
  position: relative;
  z-index: 1;
}

.hero__banner {
  margin-top: clamp(20px, 4vh, 48px);
  height: clamp(180px, 34vh, 380px);
  overflow: hidden;
  border-radius: 4px;
}
.hero__banner img {
  width: 100%;
  height: 128%;
  object-fit: cover;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Facts
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(46px, 9vh, 120px) var(--gut);
  align-items: start;
}

.facts__num {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.facts__label {
  margin-top: 10px;
  font-size: var(--micro);
  color: var(--ink-soft);
  max-width: 24ch;
  line-height: 1.5;
}

.facts__head {
  display: grid;
  gap: clamp(18px, 3vh, 32px);
  justify-items: start;
}

/* --------------------------------------------------------------------------
   Services — full-bleed colour bands
   -------------------------------------------------------------------------- */

.services__kicker {
  padding: 0 var(--gut) 12px;
}

.svc {
  position: relative;
  display: block;
  overflow: hidden;
  border-top: 1px solid rgba(30, 30, 30, 0.1);
}

.svc__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(14px, 2.2vw, 26px) var(--gut);
  transition: padding 0.6s var(--e-out);
}

.svc__name {
  font-size: clamp(2rem, 6.4vw, 6rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.04em;
  transition: transform 0.6s var(--e-out);
}

.svc__shot {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 27 / 16;
  opacity: 0;
  transform: translateY(14%) scale(0.94);
  transition: opacity 0.6s var(--e-out), transform 0.7s var(--e-out);
}
.svc__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc:hover .svc__row {
  padding-top: clamp(24px, 3.6vw, 48px);
  padding-bottom: clamp(24px, 3.6vw, 48px);
}
.svc:hover .svc__name {
  transform: translateX(clamp(6px, 1vw, 18px));
}
.svc:hover .svc__shot {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.svc--lav {
  background: var(--lav);
}
.svc--white {
  background: var(--white);
}
.svc--yellow {
  background: var(--yellow);
}
.svc--ink {
  background: var(--ink);
  color: var(--pink);
}

.svc__meta {
  position: absolute;
  right: var(--gut);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--micro);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Work
   -------------------------------------------------------------------------- */

.section {
  padding: clamp(48px, 9vh, 120px) var(--gut);
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: var(--hair);
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 26px);
  margin-top: clamp(22px, 4vh, 48px);
}

.card {
  display: block;
}

.card__frame {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 4 / 3;
  background: rgba(30, 30, 30, 0.06);
}

.card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  transition: transform 0.8s var(--e-out);
}
.card:hover .card__frame img {
  transform: scale(1.06);
}

.card__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: var(--micro);
}
.card__foot span:last-child {
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   CTA pair
   -------------------------------------------------------------------------- */

.cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 22px);
  padding: 0 var(--gut) clamp(40px, 7vh, 90px);
}

.cta__cell {
  display: grid;
  align-content: space-between;
  gap: clamp(40px, 9vh, 120px);
  padding: clamp(22px, 3vw, 40px);
  border-radius: 4px;
  min-height: clamp(260px, 38vh, 380px);
}

.cta__cell--ink {
  background: var(--ink);
  color: var(--pink);
}
.cta__cell--lav {
  background: var(--lav);
}

.cta__eyebrow {
  font-size: var(--micro);
  line-height: 1.6;
  max-width: 34ch;
  opacity: 0.85;
}

.cta__title {
  font-size: clamp(1.5rem, 3.4vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: var(--hair);
  padding-top: clamp(30px, 5vh, 56px);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 44px);
  padding: 0 var(--gut) clamp(30px, 6vh, 70px);
}

.footer__cols h3 {
  font-size: var(--micro);
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.footer__cols li {
  margin-bottom: 6px;
}

.footer__cols a {
  position: relative;
  font-size: clamp(0.88rem, 1.05vw, 1.05rem);
  font-weight: 700;
}
.footer__cols a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--e-out);
}
.footer__cols a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* The wordmark returns at the bottom, clipped by the page edge. */
.footer__mark {
  padding: 0 var(--gut);
  overflow: hidden;
}

.footer__bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px var(--gut) 20px;
  font-size: var(--micro);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Cursor
   -------------------------------------------------------------------------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--pink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.cursor.is-on {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Preloader
   -------------------------------------------------------------------------- */

.preload {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--pink);
}

.preload__n {
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}

:root.no-anim .preload {
  display: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .work__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .header__nav {
    display: none;
  }

  .hero__seal {
    width: 66vw;
  }

  .facts,
  .cta {
    grid-template-columns: 1fr;
  }

  /* Bands stack: type first, preview always visible underneath. */
  .svc__row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .svc__shot {
    opacity: 1;
    transform: none;
  }
  .svc:hover .svc__name {
    transform: none;
  }

  .work__grid {
    grid-template-columns: 1fr;
  }
  .footer__cols {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 460px) {
  .footer__cols {
    grid-template-columns: 1fr;
  }

  /* The gutter stops shrinking at 16px down here, so the wordmark needs to
     give back the couple of pixels it was overrunning by. */
  .wordmark {
    font-size: 10.1vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}