/* Homepage — same system as the inner pages: cream paper, Inter Tight titles, mono labels,
   tidy image rows that keep each image's ratio (only the top fold crops), space header/footer. */

/* ── hero: the original top fold — centred Space Grotesk line over a curved gallery ── */
.h5 { height: clamp(560px, calc(100svh - 44px), 760px); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 84px 0 clamp(18px, 3vh, 32px); text-align: center; background: var(--paper); }
.h5__title { max-width: 16em; padding: 0 var(--pad); font-family: var(--display); font-weight: 500; font-size: clamp(30px, min(4.2vw, 6.4vh), 66px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.h5__title .rotator { display: grid; justify-items: center; color: #ff5a1f; }
.h5 .rotator .ch { animation: none; }
.h5 .rotator__item { white-space: normal; }
.h5 .rotator__item.is-leaving { display: none; }
.h5__name { position: relative; font-weight: 700; cursor: help; outline: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--ease); }
.h5__name:hover, .h5__name:focus-visible { background-size: 100% 2px; }
.h5__say { position: absolute; left: 50%; top: calc(100% + 8px); z-index: 5; translate: -50% -6px; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #f7f2ec; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .25s, translate .3s var(--ease); }
.h5__name:hover .h5__say, .h5__name:focus .h5__say { opacity: 1; translate: -50% 0; }
.h5 .ring { position: relative; width: 100%; flex: 1 1 auto; min-height: 150px; max-height: 380px; margin: clamp(6px, 1.6vh, 20px) 0; perspective: var(--p, 600px); }
.h5 .ring__track { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.h5 .ring__card { position: absolute; width: var(--w, 240px); height: var(--h, 330px); margin: calc(var(--h, 330px) / -2) 0 0 calc(var(--w, 240px) / -2); border-radius: 6px; overflow: hidden; background: #e3d9ce; box-shadow: 0 20px 40px -24px rgba(0,0,0,.4); backface-visibility: hidden; }
.h5 .ring__card img { width: 100%; height: 100%; object-fit: cover; }
.h5__foot { display: grid; justify-items: center; gap: clamp(10px, 1.8vh, 18px); padding: 0 var(--pad); }
.h5__foot p { max-width: 44ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: var(--grey); }
.rotator__item { white-space: normal; }
.h-hero__btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px; background: #fff200; color: var(--ink); font: 500 13px var(--display); letter-spacing: .02em; text-transform: uppercase; transition: background .3s; }
.h-hero__btn .arr { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.h-hero__btn:hover { background: #fff; }
.h-hero__btn:hover .arr { transform: translateY(3px); }
.arr { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ring of work circling through the headline (faded so the text stays readable) */
.h-ring { top: 58%; }
.h2__orbit .h-ring__spin figure { opacity: .95; }
.h2__dome { position: absolute; left: 50%; bottom: 0; z-index: 1; width: 150vw; height: 30%; translate: -50% 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #17183f 0%, var(--night) 55%); box-shadow: 0 -1px 0 rgba(160,150,255,.45), 0 -30px 80px -20px rgba(120,100,255,.45);
  display: flex; flex-direction: column; align-items: center; padding-top: 0; }
.h2__star { width: 54px; height: 54px; margin-top: -27px; color: var(--star); fill: currentColor; animation: h2-twinkle 6s ease-in-out infinite; }
@keyframes h2-twinkle { 50% { rotate: 45deg; scale: .85; } }
.h2__dome .h-hero__btn { margin-top: clamp(14px, 1.6vw, 24px); }
.rotator__item { white-space: normal; }
.h-hero__btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px; background: #fff200; color: var(--ink); font: 500 13px var(--display); letter-spacing: .02em; text-transform: uppercase; transition: background .3s; }
.h-hero__btn .arr { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.h-hero__btn:hover { background: #fff; }
.h-hero__btn:hover .arr { transform: translateY(3px); }
.arr { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ring of work circling through the headline (faded so the text stays readable) */
.h-ring { --R: clamp(230px, 30vw, 460px); position: absolute; left: 50%; top: 50%; z-index: 0; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-20deg) rotateZ(-5deg); }
.h-ring__spin { transform-style: preserve-3d; animation: h-spin 46s linear infinite; }
@keyframes h-spin { to { transform: rotateY(-360deg); } }
.h-ring__spin figure { --cw: clamp(92px, 9.6vw, 148px); position: absolute; width: var(--cw); aspect-ratio: 1; margin: calc(var(--cw) / -2) 0 0 calc(var(--cw) / -2); overflow: hidden; border-radius: 10px; background: #1b1c3a;
  transform: rotateY(calc(var(--i) * 360deg / 14)) translateZ(var(--R)); opacity: .42; }
.h-ring__spin img { width: 100%; height: 100%; object-fit: cover; }
/* ── awards strip ── */
.h-strip { background: var(--ink); color: #f7f2ec; padding: 11px 0; }
.h-strip .marquee { mask-image: none; }
.h-strip .marquee__track { gap: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; animation-duration: 40s; }
.h-strip .icon { width: 10px; height: 10px; color: var(--star); flex: none; }
.h-strip a:hover { color: var(--star); }

/* ── work: justified rows, each tile's width set by its image ratio ── */
.h-work { padding: clamp(30px, 3.4vw, 50px) var(--pad) clamp(40px, 5vw, 70px); }
.list__top { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 16px; margin-bottom: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--ink); }
.list__top h2 { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.list__top h2 .icon { width: 11px; height: 11px; color: var(--star-deep); }
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 4vw, 60px) clamp(14px, 1.6vw, 24px); }
.work { display: grid; align-content: start; gap: 14px; }
.work figure { position: relative; overflow: hidden; background: #e3d9ce; aspect-ratio: 4 / 3; }
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
a.work { cursor: none; }
a.work:hover img { transform: scale(1.03); }
.pills { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.pills span { padding: 5px 11px; border-radius: 999px; background: var(--pc); color: var(--ink); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.pills span[style*="#2f4dff"] { color: #fff; }
.work__meta { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.work h3 { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.03em; line-height: 1.1; }
.work h3 .arr { width: .7em; height: .7em; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease); }
a.work:hover h3 .arr { opacity: 1; transform: none; }
.work p { font-size: 14.5px; line-height: 1.45; color: var(--grey); margin-top: 4px; max-width: 46ch; }
.work__kind { flex: none; padding-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); text-align: right; }
.soon { position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(247,242,236,.92); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* ── playground band ── */
.h-play { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: clamp(20px, 3vw, 40px); padding: clamp(26px, 2.8vw, 40px) var(--pad); background: #c9bcff; color: var(--ink); }
.h-play .label { color: rgba(14,15,38,.6); }
.h-play h2 { display: flex; align-items: center; gap: .2em; font-family: var(--display); font-weight: 600; font-size: clamp(34px, 3.8vw, 58px); line-height: .9; letter-spacing: -.05em; margin: 8px 0 10px; }
.h-play h2 .arr { width: .55em; height: .55em; stroke-width: 1.8; transition: transform .5s var(--ease); }
.h-play:hover h2 .arr { transform: translateX(10px); }
.h-play p { font-size: clamp(15px, 1.1vw, 17px); color: rgba(14,15,38,.75); }
.h-play__pics { display: flex; gap: 8px; }
.h-play__pics { justify-content: flex-end; }
.h-play__pics img { flex: 0 0 auto; min-width: 0; height: clamp(110px, 11vw, 160px); width: auto; aspect-ratio: auto; object-fit: contain; transition: transform .8s var(--ease); }
.h-play:hover .h-play__pics img:nth-child(odd) { transform: translateY(-8px); }
.h-play:hover .h-play__pics img:nth-child(even) { transform: translateY(8px); }

/* ── contact strip ── */
.h-hello { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px 40px; padding: clamp(50px, 6vw, 80px) var(--pad); }
.h-hello h2 { font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5vw, 80px); line-height: .9; letter-spacing: -.05em; }
.h-hello__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ct-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 22px; border-radius: 999px; font: 500 13px var(--display); letter-spacing: .02em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.ct-btn .arr { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.ct-btn--fill { background: #ff6a4d; color: var(--ink); }
.ct-btn--fill:hover { background: var(--star); }
.ct-btn--fill:hover .arr { transform: translateX(4px); }
.ct-btn--line { background: none; color: var(--ink); border: 1px solid var(--ink); }
.ct-btn--line .ok { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; }
.ct-btn--line .ok .icon { width: 12px; height: 12px; }
.ct-btn--line.is-copied { background: var(--star); border-color: var(--star); }
.ct-btn--line.is-copied .t { opacity: 0; }
.ct-btn--line.is-copied .ok { opacity: 1; }
.ct-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── "View" cursor: the white scalloped badge ── */
.cursor { width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 0; color: var(--ink); font: 500 13px/1 var(--display); letter-spacing: .02em; }
.cursor svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; stroke: #000; stroke-width: .8; stroke-linejoin: round; }
.cursor span { position: relative; }

@media (max-width: 860px) {
  .h5 { height: auto; padding-bottom: 36px; }
  .h5 .ring { flex: none; height: 230px; }
  .wgrid { grid-template-columns: 1fr; }
  .h-ring { --R: 44vw; }
  .h-ring__spin figure { --cw: 24vw; }
  .h-play { grid-template-columns: 1fr; }
  .h-hello { flex-direction: column; align-items: flex-start; }
}
@media (hover: none) { a.work { cursor: pointer; } }


/* cycling line: the phrase just swaps */
.rotator .ch { animation: none !important; }
.rotator__item.is-leaving { display: none; }

/* ── services ── */
.h-svc { padding: clamp(50px, 6vw, 90px) var(--pad) clamp(60px, 7vw, 100px); }
.svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3vw, 48px); }
.svc { padding: 22px 0 30px; border-bottom: 1px solid var(--line); }
.svc h3 { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px; }
.svc p { max-width: 36ch; font-size: 14.5px; line-height: 1.5; color: var(--grey); }
@media (max-width: 860px) { .svc__grid { grid-template-columns: 1fr; } }