/* ==========================================================================
   Bento grid (B2)
   Layout strategy
   - ≥1024px wide AND ≥620px tall: 6×6 grid that fills exactly one screen
     (the design as drawn). Tiles are *size* containers, so text scales to
     the tile, never to the window — no fixed-height boxes fighting vw fonts.
   - Shorter desktops: same areas, rows grow with content, page scrolls.
   - 640–1023px (tablet): 4 columns, regrouped.
   - 480–639px: the design's own 2-column mobile layout.
   - <480px: single column; only logo + theme toggle stay paired.
   ========================================================================== */

.grid-page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--page-pad);
  background: var(--bg);
  color: var(--text);
  transition: background var(--dur-2), color var(--dur-2);
}

body:not([data-view="grid"]) .grid-page {
  display: none;
}

.bento {
  display: grid;
  gap: var(--gap);
  width: 100%;
  max-width: var(--grid-max);
  margin: 0 auto;

  /* 480–639px default: the bundle's 2-column mobile order */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(120px, auto);
  grid-template-areas:
    "logo  about"
    "brand brand"
    "req   req"
    "team  dark"
    "press serv"
    "svcs  svcs"
    "work  work"
    "shop  shop";
}

/* ---- Tiles --------------------------------------------------------------- */

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: clamp(12px, 2vw, 22px) clamp(14px, 3vw, 40px);
  overflow: hidden;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-lo);
  container-type: inline-size;
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2),
    background var(--dur-2),
    color var(--dur-2);
}

.tile--dark {
  background: var(--tile-dark-bg);
  color: var(--tile-dark-text);
}

.tile--light {
  background: var(--tile-light-bg);
  color: var(--tile-light-text);
  border: 1px solid var(--tile-light-border);
}

@media (hover: hover) {
  .tile:not(.tile--cta):hover {
    z-index: 5;
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }
}

/* Tiles drop in each time the grid is shown */
.bento.is-entering .tile {
  animation: dropIn .55s var(--ease-out) backwards;
  animation-delay: var(--delay, .1s);
}

.tile__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: var(--fw-thin);
  font-size: var(--fs-label);
  text-transform: uppercase;
  opacity: .65;
}

.logo-img {
  width: auto;
  object-fit: contain;
}

[data-theme="dark"] .tile--dark .logo-img {
  filter: invert(1);
}

/* Grid-area assignments */
.tile--logo  { grid-area: logo; }
.tile--team  { grid-area: team; }
.tile--brand { grid-area: brand; }
.tile--theme { grid-area: dark; }
.tile--about { grid-area: about; }
.tile--chart { grid-area: press; }
.tile--cta   { grid-area: req; }
.tile--faq   { grid-area: serv; }
.tile--work  { grid-area: work; }
.tile--svcs  { grid-area: svcs; }
.tile--shop  { grid-area: shop; }

/* -- Logo -- */
.tile--logo .logo-img {
  height: clamp(18px, 18cqmin, 28px);
}

/* -- Live counter -- */
.live-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: livePulse 1.6s ease-in-out infinite;
}

.team__count {
  font-weight: var(--fw-thin);
  font-size: clamp(18px, min(22cqmin, 16cqi), 30px);
  line-height: 1;
}

.team__count.is-ticking {
  animation: slideFade .5s var(--ease-out);
}

.team__meta,
.team__next {
  font-weight: var(--fw-thin);
  font-size: clamp(10px, min(9.5cqmin, 6.6cqi), 13px);
}

/* The counter tile holds four lines, so it runs tighter than the others. */
.tile--team {
  gap: clamp(3px, 3cqmin, 8px);
  padding: 10px 12px;
}

.team__meta {
  margin-top: -3px;
  opacity: .6;
}

.team__next .is-live {
  color: var(--live);
}

/* -- You × END. -- */
.tile--brand {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(10px, 4cqi, 26px);
  --brand-size: clamp(28px, 10.5cqi, 52px);
}

.brand__input {
  flex: 0 1 auto;
  min-width: 2.2ch;
  max-width: 55%;
  padding: 6px 0 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #aaa;
  font-weight: var(--fw-thin);
  font-size: var(--brand-size);
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
}

.brand__input::placeholder {
  color: #aaa;
  opacity: 1;
}

.brand__input:focus {
  color: currentColor;
}

.brand__x {
  flex: none;
  font-weight: var(--fw-thin);
  font-size: calc(var(--brand-size) * .7);
  opacity: .5;
}

.tile--brand .logo-img {
  flex: none;
  height: calc(var(--brand-size) * .72);
}

/* -- Theme toggle -- */
.theme-icon {
  width: 26px;
  height: 26px;
  margin-bottom: 1px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: conic-gradient(currentColor 0 50%, transparent 50% 100%);
}

/* -- About -- */
.about__name {
  font-weight: var(--fw-thin);
  font-size: clamp(16px, 15.5cqmin, 24px);
  line-height: 1.12;
}

/* -- Client growth chart (always black) -- */
.tile--chart {
  padding: 0;
  background: #000;
  color: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
}

@media (hover: hover) {
  .tile--chart:hover {
    box-shadow: 0 22px 50px rgba(0, 0, 0, .5);
  }
}

.growth {
  position: absolute;
  inset: 0;
}

.growth svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.growth__line,
.growth__area {
  transition: d 2.4s cubic-bezier(.5, 0, .2, 1);
}

.growth__dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: top 2.4s cubic-bezier(.5, 0, .2, 1);
}

.growth__label {
  position: absolute;
  top: 16px;
  left: 18px;
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  letter-spacing: .16em;
  opacity: .6;
}

/* -- Start a project (transparent tile — the page's primary CTA) -- */
.tile--cta {
  gap: clamp(10px, 1.5vh, 18px);
  padding: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6cqi, 26px);
  max-width: 100%;
  --cta-size: clamp(24px, 6.2cqi, 84px);
}

.cta__text {
  font-weight: var(--fw-thin);
  font-size: var(--cta-size);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cta .chev {
  width: var(--cta-size);
  height: var(--cta-size);
  stroke-width: .9;
}

.cta:hover .chev {
  transform: translateX(12px);
}

.cta-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-weight: var(--fw-light);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .6;
  transition: opacity .25s ease;
}

.cta-back .chev {
  width: 12px;
  height: 12px;
}

.cta-back:hover {
  opacity: 1;
}

.cta-back:hover .chev {
  transform: scaleX(-1) translateX(6px);
}

/* -- FAQ -- */
.faq__preview {
  max-width: 90%;
  font-weight: var(--fw-thin);
  font-size: clamp(16px, 6.5cqi, 26px);
  line-height: 1.2;
  text-wrap: balance;
}

.faq__preview.is-changing,
.svcs__word.is-changing {
  animation: slideFade .5s var(--ease-out);
}

/* -- Portfolio -- */
.tile--work img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .6s var(--ease-out), opacity .6s ease;
}

.tile--work img:not(.is-active) {
  opacity: 0;
}

.tile--work:hover img {
  filter: blur(6px);
}

.work__title {
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: var(--fw-thin);
  font-size: clamp(26px, 13cqmin, 44px);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}

/* -- Services rotator -- */
.svcs__word {
  font-weight: var(--fw-thin);
  font-size: clamp(26px, 14cqmin, 44px);
}

/* -- Workshop -- */
.tile--shop {
  align-items: stretch;
  padding: clamp(12px, 2.2vw, 22px);
}

.shop__inner {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: clamp(12px, 3cqi, 24px);
  min-height: 0;
}

.shop__text {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.shop__kicker {
  font-weight: var(--fw-light);
  font-size: 9px;
  letter-spacing: .06em;
}

.shop__title {
  font-weight: var(--fw-thin);
  font-size: clamp(20px, 6.2cqi, 30px);
  line-height: 1.05;
}

.shop__sponsor {
  color: var(--accent);
  font-weight: var(--fw-thin);
  font-size: clamp(11px, 2.8cqi, 14px);
  line-height: 1.35;
  text-wrap: balance;
}

.shop__media {
  position: relative;
  flex: 1 1 45%;
  min-width: 110px;
  min-height: 120px;
  overflow: hidden;
  border-radius: 4px;
}

.shop__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .6s var(--ease-out);
}

.tile--shop:hover .shop__media img {
  filter: grayscale(0);
}

/* Narrow workshop tile (scrolling layouts only): stack text over a 16:9
   image. Desktop rows have a fixed height, so there it stays side by side. */
@media (max-width: 1023px) {
  @container (max-width: 420px) {
    .shop__inner {
      flex-direction: column;
    }

    .shop__media {
      flex: none;
      width: 100%;
      aspect-ratio: 16 / 9;
      min-height: 0;
    }
  }
}

/* ---- < 480px: single column --------------------------------------------- */

@media (max-width: 479px) {
  .bento {
    grid-template-areas:
      "logo  dark"
      "about about"
      "brand brand"
      "req   req"
      "team  team"
      "press press"
      "serv  serv"
      "svcs  svcs"
      "work  work"
      "shop  shop";
  }

  .tile--cta {
    min-height: 170px;
  }

  .tile--chart {
    min-height: 170px;
  }

  .tile--svcs {
    min-height: 180px;
  }

  /* Allow the CTA to break onto two lines on the narrowest phones */
  .cta__text {
    white-space: normal;
    text-wrap: balance;
  }
}

/* ---- 480–639px: design's 2-col mobile, give the photo tiles real height -- */

@media (max-width: 639px) {
  .tile--cta {
    min-height: 220px;
  }

  .tile--svcs {
    min-height: 200px;
  }

  .tile--work {
    min-height: clamp(240px, 70vw, 380px);
  }
}

/* ---- 640–1023px: tablet, 4 columns -------------------------------------- */

@media (min-width: 640px) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows:
      minmax(150px, auto)
      minmax(210px, auto)
      minmax(220px, auto)
      minmax(190px, auto)
      minmax(300px, auto);
    grid-template-areas:
      "logo  team  dark  about"
      "brand brand press press"
      "req   req   req   req"
      "serv  serv  svcs  svcs"
      "work  work  shop  shop";
  }
}

/* ---- ≥1024px: the 6-column desktop layout ------------------------------- */

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(110px, auto));
    grid-template-areas:
      "logo  team  brand brand dark  about"
      "press press brand brand serv  serv"
      "req   req   req   req   req   req"
      "req   req   req   req   req   req"
      "work  work  svcs  svcs  shop  shop"
      "work  work  svcs  svcs  shop  shop";
  }
}

/* Tall enough: lock the grid to exactly one screen, as designed.
   Tiles become size containers so type scales with tile height too. */
@media (min-width: 1024px) and (min-height: 620px) {
  .grid-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .bento {
    height: 100%;
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }

  .tile {
    container-type: size;
  }

  .cta {
    --cta-size: clamp(26px, min(6.2cqi, 34cqb), 84px);
  }
}