/* ===== Growing Minds / inplay: pixel-perfect build from Figma (node 40:303) ===== */
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Luxurious+Script&family=Jost:wght@400;500;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --cream: #fcf8eb;
  --ink: #262626;
  /* Futura is a system font on macOS; Jost is a near-identical geometric fallback for the web */
  --futura: 'Futura', 'Jost', sans-serif;
  --jua: 'Jua', sans-serif;
  --script: 'Luxurious Script', cursive;
}

html { background: var(--cream); }
/* The CTA and footer are their own full-width block now, so the gutters no longer
   need a pixel-keyed gradient standing in for them. */
body {
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The design canvas: exact Figma frame size. % based positions resolve against this box. */
.canvas {
  position: relative;
  width: 1440px;
  height: 5648px;
  margin: 0 auto;
  background: var(--cream);
  overflow: hidden;
}

.abs { position: absolute; }
.img-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; pointer-events: none; }
.shadow-card { box-shadow: none; }

/* ---- shared text styles ---- */
.jua  { font-family: var(--jua);  font-weight: 400; color: var(--ink); }
.fut  { font-family: var(--futura); font-weight: 500; color: var(--ink); }

/* ---- Infinite marquee: auto-scrolls, pauses on hover, drags on any device.
       Shared by the desktop "What We Make" banners and their phone counterpart. ---- */
.marquee {
  overflow: hidden;
  /* soften the ends so cards dissolve into the page instead of being sliced off */
}
.marquee-track {
  display: flex;
  align-items: stretch;
  gap: var(--marquee-gap, 55px);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;            /* horizontal drag is ours; vertical still scrolls the page */
  -webkit-user-select: none; user-select: none;
}
.marquee-track.dragging { cursor: grabbing; }
.marquee-track > * { flex: none; }
.marquee-track img { -webkit-user-drag: none; }

/* ---- "What We Make" banner cards ---- */
.wwm-card {
  position: relative;
  flex: none;
  width: 830px;
  height: 572px;
  border-radius: 38px;
  overflow: hidden;
  user-select: none;
}
.wwm-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; -webkit-user-drag: none;
}
/* subtle scrim so the white caption stays legible over any photo */
.wwm-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* the caption sits at 64% down the card, so the scrim has to still be doing
     work up there - the game-development photo is a bright marble lobby. */
  background: linear-gradient(to top, rgba(20,28,18,0.74) 0%, rgba(20,28,18,0.46) 28%, rgba(20,28,18,0.16) 52%, rgba(20,28,18,0) 72%);
}
.wwm-title { position: absolute; left: 76px; top: 365px; z-index: 1; font-family: var(--jua); font-size: 37px; line-height: normal; color: #fff; white-space: nowrap; }
.wwm-body  { position: absolute; left: 72px; top: 430px; z-index: 1; width: 469px; font-family: var(--futura); font-weight: 500; font-size: 24px; line-height: normal; color: #fff; opacity: .9; }

/* rotation wrapper so the box centers like Figma's auto-layout */
.rot-wrap { position: absolute; display: flex; align-items: center; justify-content: center; }
.rot-inner { flex: none; }

/* ---- how we work columns ---- */
.hww-col   { display: flex; flex-direction: column; gap: 9px; align-items: center; width: 271px; }
.hww-tab   { height: 20px; width: 254px; border-radius: 50px; }
.hww-card  { display: flex; align-items: flex-start; width: 100%; border-radius: 16px; padding: 26px 25px 33px 29px; }
.hww-text  { display: flex; flex-direction: column; gap: 126px; align-items: flex-start; justify-content: center; color: #fff; }
.hww-title { font-family: var(--jua); font-size: 52.606px; line-height: normal; text-align: center; white-space: nowrap; }
.hww-body  { font-family: var(--futura); font-weight: 500; font-size: 24px; line-height: normal; opacity: .8; }

/* ---- "Let's Shape What's Next" dropdown pills (Figma 98:604): nav on every page ---- */
.shape-opt {
  display: inline-flex; align-items: center; gap: 9px;
  background: #73c046; border-radius: 360px; padding: 8px 17px;
  font-family: var(--jua); font-size: 20px; color: #fff;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 6px 16px rgba(38,38,38,0.14);
  transition: transform 0.15s ease, background 0.2s ease;
}
.shape-opt:hover { background: #68b23d; transform: scale(1.04); }
/* the Growing Minds pill wears the project's own black; it still lifts on hover */
.shape-opt.dark { background: rgba(0, 0, 0, 0.98); }
.shape-opt.dark:hover { background: rgba(26, 26, 26, 0.98); }
.shape-opt img { display: block; pointer-events: none; }
/* the dropdown icons are inline SVG now: soft round caps and joins, sized to the label */
.shape-opt .pill-ico { display: block; flex: none; pointer-events: none; opacity: .95; }

/* ===== Micro-interactions, home page ===================================
   The home page loads styles.css + chrome.css only, never pages.css — so its
   own components need their own layer. Same spring language as the rest. */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); }

/* --- hero word chips lift like keys ---------------------------------- */
.hero-word, .mh-word {
  transition: background-color .9s ease, transform .42s var(--spring), box-shadow .42s ease;
  will-change: transform;
}
.hero-word:hover, .mh-word:hover {
  transform: translateY(-7px) rotate(-1deg);
  box-shadow: 0 20px 38px rgba(38, 38, 38, .26);
}

/* --- the looping hero photo breathes very gently ---------------------- */
.hero-stage { transition: transform .5s var(--spring), box-shadow .5s ease; }
.hero-stage:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 26px 50px rgba(38, 38, 38, .24); }

/* --- What We Do banners ---------------------------------------------- */
.wwm-card { transition: transform .5s var(--spring), box-shadow .5s ease; }
.wwm-card img { transition: transform .7s var(--spring); }
.wwm-card:hover { transform: translateY(-6px); box-shadow: 0 30px 58px rgba(20, 28, 18, .3); }
.wwm-card:hover img { transform: scale(1.045); }
.wwm-title { transition: transform .42s var(--spring); }
.wwm-card:hover .wwm-title { transform: translateY(-3px); }

/* --- How We Work columns --------------------------------------------- */
.hww-col { transition: transform .42s var(--spring); will-change: transform; }
.hww-col:hover { transform: translateY(-9px) scale(1.015); }
.hww-card { transition: box-shadow .42s ease; }
.hww-col:hover .hww-card { box-shadow: 0 20px 40px rgba(38, 38, 38, .22); }
.hww-tab { transition: transform .42s var(--spring); }
.hww-col:hover .hww-tab { transform: scaleX(1.06) scaleY(1.3); }

/* --- Featured project ------------------------------------------------- */
#featured { transition: transform .5s var(--spring), box-shadow .5s ease; }
#featured > img:first-child { transition: transform .8s var(--spring); }
#featured:hover { transform: translateY(-5px); box-shadow: 0 32px 62px rgba(20, 28, 18, .32); }
#featured:hover > img:first-child { transform: scale(1.035); }

/* --- the permission ticket invites a look ----------------------------- */
#permission-ticket img { transition: transform .5s var(--spring); }
#permission-ticket:hover img { transform: rotate(-1.4deg) scale(1.02); }

/* --- phone layout counterparts ---------------------------------------- */
.mh-photocard { transition: transform .42s var(--spring), box-shadow .42s ease; }
.mh-photocard img { transition: transform .6s var(--spring); }
.mh-photocard:active { transform: scale(.985); }
.mh-hww { transition: transform .42s var(--spring), box-shadow .42s ease; }
.mh-hww:active { transform: scale(.985); }
.mh-featured { transition: transform .42s var(--spring); }
.mh-featured:active { transform: scale(.99); }
.mh-founder img, .mh-who img { transition: transform .48s var(--spring); }
.mh-founder:hover img { transform: translateY(-5px) rotate(-2deg); }

/* --- founder portraits on the 1440 canvas ----------------------------- */
[data-node-id="98:678"] img { transition: transform .48s var(--spring); }
[data-node-id="98:678"] img:hover { transform: translateY(-7px) rotate(-2.5deg) scale(1.03); }

/* --- the scroll-cue pill and nav pills already spring in chrome.css --- */
@media (prefers-reduced-motion: reduce) {
  .hero-word, .mh-word, .hero-stage, .wwm-card, .wwm-card img, .wwm-title,
  .hww-col, .hww-card, .hww-tab, #featured, #featured > img:first-child,
  #permission-ticket img, .mh-photocard, .mh-photocard img, .mh-hww,
  .mh-featured, .mh-founder img, [data-node-id="98:678"] img {
    transition: none !important; transform: none !important;
  }
}

/* ============================================================================
   RISO HALFTONE  (Discovery · Play · Build · Learn, and every card cut from
   the same coloured paper elsewhere on the site)
   ----------------------------------------------------------------------------
   A flat ink swatch gets a dot screen over it, the way this studio would
   actually put one on press: a regular lattice at a screen angle, in a darker
   shade of whatever ink the card is already printed in. `multiply` does the
   shading, so one black-dot tile covers all four brand colours without four
   variants of the asset.

   The tile itself is axis-aligned - a rotated pattern cannot tile, which is
   what puts seams across a card. The 15deg screen angle comes from rotating
   the oversized layer instead, and `overflow:hidden` on the card crops it.

   `isolation:isolate` makes the card its own blend group, so the z-index:-1
   pseudo-element paints ON TOP of the card's colour but UNDER its text.
   ========================================================================== */
:root { --tex-halftone: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='5'%20height='5'%3E%3Ccircle%20cx='2.5'%20cy='2.5'%20r='1.35'%20fill='black'%20fill-opacity='0.2'/%3E%3C/svg%3E"); }

.hww-card, .mh-hww, .deck-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hww-card::before, .mh-hww::before, .deck-card::before {
  content: ''; position: absolute; inset: -50%; z-index: -1;
  pointer-events: none;
  background-image: var(--tex-halftone);
  background-size: 5px 5px;
  transform: rotate(15deg);
  mix-blend-mode: multiply;
  opacity: .85;
  transition: opacity .45s ease;
  /* the screen creeps out of register, the way a long print run does. One
     loop is 60px = 12 whole cells, so it never jumps. Slow enough to read as
     drift rather than movement. */
  animation: tex-misregister 60s linear infinite;
}

/* hovering a card leans on the roller a little harder */
.hww-col:hover .hww-card::before,
.deck-col:hover .deck-card::before,
.mh-hww:active::before { opacity: 1; }

@keyframes tex-misregister {
  from { background-position: 0 0; }
  to   { background-position: 60px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hww-card::before, .mh-hww::before, .deck-card::before { animation: none !important; }
}