/* ==========================================================================
   Hero, filter, project wall (browser windows and device frames), client work
   ========================================================================== */

.hero, .tryit, .automations, .work__head, .wall, .clients {
  width: 100%; max-width: calc(var(--max) + var(--gut) * 2);
  margin-inline: auto; padding-inline: var(--gut);
}

/* ---------- hero ---------- */
.hero {
  min-height: min(92svh, 900px);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: clamp(40px, 9svh, 96px);
}
.hero h1 {
  max-width: 15ch;
  font-size: clamp(2.75rem, 9.4vw, 8rem);
  letter-spacing: -0.045em; line-height: .96;
  text-wrap: pretty;
}
.hero__by {
  margin-top: clamp(20px, 3vw, 36px);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem); color: var(--muted);
}
.hero .btn { margin-top: clamp(28px, 4vw, 44px); }

@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: hero-in .9s var(--ease-out) both; }
  .hero > :nth-child(2) { animation-delay: .08s; }
  .hero > :nth-child(3) { animation-delay: .16s; }
  @keyframes hero-in {
    from { opacity: 0; transform: translateY(18px); }
  }
}

/* ---------- Try it: the live demo (its own styles are in css/homepage-demo.css) ---------- */
.tryit { padding-top: clamp(48px, 9vw, 120px); }
.tryit__head { display: grid; gap: 20px; }
.tryit__lead { max-width: 52ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--muted); }
@media (min-width: 1024px) {
  .tryit__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 40px; }
}

/* ---------- AI automations: cards (the section is hidden until one automation is built) ---------- */
.automations { padding-top: clamp(48px, 9vw, 120px); }
.automations__head { display: grid; gap: 20px; }
.automations__lead { max-width: 52ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--muted); }
.automations__tiles { display: grid; gap: 12px; margin-top: clamp(28px, 4vw, 48px); }
.auto-tile {
  display: grid; align-content: start; gap: 8px;
  min-height: 190px; padding: 20px;
  border: 1px solid var(--line-c); border-radius: var(--radius);
}
.auto-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: auto; padding-bottom: 36px; }
.auto-tile__index { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--muted); }
.auto-tile__name { font-size: clamp(1.5rem, 2.4vw, 1.875rem); letter-spacing: -0.03em; line-height: 1.1; }
.auto-tile__text { color: var(--muted); }
/* A tile that is not live yet is drawn dashed, like every other placeholder on the page. */
.auto-tile { border-style: dashed; }
.automations__privacy { margin-top: 20px; max-width: 60ch; font-size: .875rem; color: var(--muted); }
@media (min-width: 768px) {
  .automations__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .auto-tile { min-height: 230px; padding: 24px; }
}
@media (min-width: 1024px) {
  .automations__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; column-gap: 40px; }
}
/* A card for one automation: sector, the problem in one line, and a link to its page.
   The same cards are shown in place of the wall when the "Automations" chip is pressed. */
.wall__automations .automations__tiles { margin-top: 0; }
.auto-card { border-style: solid; grid-template-rows: auto 1fr auto; }
.auto-card__problem { font-size: clamp(1.25rem, 1.9vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; text-wrap: pretty; }
.auto-card__go { margin-top: 16px; }

/* ---------- work head + filter ---------- */
.work { padding-top: clamp(48px, 9vw, 120px); }
.work__head { display: grid; gap: 20px; }
.work__lead { max-width: 52ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--muted); }

.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-c); border-radius: 999px;
  background: transparent; color: var(--fg);
  font-size: .9375rem; font-weight: 500; line-height: 1;
  transition: transform .2s var(--ease-out);
}
.chip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.chip:active { transform: scale(.96); }
/* An industry with nothing of the chosen kind (Websites / Apps) is switched off. */
.chip:disabled { opacity: .38; cursor: default; transform: none; }
@media (hover: hover) {
  .chip:not(:disabled):hover { border-color: var(--fg); }
}
/* Thin rule between the two groups: kind, then industry. */
.filter__rule { align-self: center; width: 1px; height: 24px; margin: 0 6px; background: var(--line-c); }

@media (min-width: 1024px) {
  .work__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; column-gap: 40px; }
  .work__head h2 { grid-row: span 2; align-self: start; }
  .filter { margin-top: 4px; }
}

/* ---------- project wall ---------- */
.wall {
  --gap: clamp(150px, 36svh, 340px);
  display: grid; gap: var(--gap);
  padding-top: clamp(96px, 20svh, 200px);
  padding-bottom: var(--gap);
}
.project { position: relative; }
.project__card { display: grid; gap: 18px; }

.project__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px;
}
.project__index {
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--muted);
}
.project__head .tag { grid-row: 1; grid-column: 2; justify-self: end; }
/* Fixed-height, single-line box: swapping the display font can change the width but never the layout. */
.project__name {
  grid-column: 1 / -1; min-width: 0;
  height: 1em; line-height: 1; white-space: nowrap;
  overflow-x: clip; /* the unscaled line must not widen the page; js/theme.js scales the text to fit */
  font-size: clamp(3rem, 13.5vw, 8.5rem);
  font-family: var(--font); font-weight: 600; font-stretch: 100%; letter-spacing: -0.04em;
}
.project__name span { display: inline-block; transition: opacity .18s linear; }
.project.is-swapping .project__name span { opacity: 0; }
.project.is-active .project__name {
  font-family: var(--p-font, var(--font)); font-weight: var(--p-weight, 600); font-stretch: var(--p-stretch, 100%);
  letter-spacing: 0;
}

/* mini browser window */
.window {
  display: block; position: relative;
  border-radius: var(--radius); overflow: hidden;
  background: var(--line-c);
  text-decoration: none;
  transform-origin: 50% 100%;
  will-change: transform;
}
.window__bar {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  background: var(--line-c);
}
.window__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: .7; }
.window__url {
  flex: 1; min-width: 0; margin: 0 8px 0 10px; padding: 0 12px;
  height: 22px; border-radius: 999px;
  background: var(--bg); color: var(--muted);
  font-size: .6875rem; line-height: 22px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.window__screen { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--p-bg, #111); overflow: hidden; }
.window__screen img, .window__screen video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
}
.window__screen video { opacity: 0; transition: opacity .3s linear; }
.window__screen video.is-playing { opacity: 1; }
.window.is-lifted .window__screen > * { visibility: hidden; }

/* device frames: app prototypes sit in a phone or a tablet drawn with boxes only.
   Every measure is a percentage of the frame's own width, so the frame scales as one piece
   and the one on the wall lines up exactly with the one in the viewer (css/viewer.css).
   Phone: 390 x 844 screen, 12 bezel, 414 x 868 outside. Tablet: 1180 x 820, 16, 1212 x 852. */
.window--device { overflow: visible; background: none; border-radius: 0; margin-inline: auto; }
.window--phone { width: min(64vw, 280px); }
.window--tablet { width: 100%; }
.device { display: block; position: relative; }
.device, .viewer.is-device .viewer__device { background: var(--line-c); }
.window--phone .device, .viewer.is-device[data-device='phone'] .viewer__device { padding: 2.9%; border-radius: 13.5% / 6.45%; }
.window--phone .window__screen, .viewer.is-device[data-device='phone'] .viewer__frame { aspect-ratio: 390 / 844; border-radius: 11.3% / 5.2%; }
.window--tablet .device, .viewer.is-device[data-device='tablet'] .viewer__device { padding: 1.32%; border-radius: 2.97% / 4.23%; }
.window--tablet .window__screen, .viewer.is-device[data-device='tablet'] .viewer__frame { aspect-ratio: 1180 / 820; border-radius: 1.69% / 2.44%; }
/* side buttons on the phone, camera on the tablet */
.device::before, .device::after,
.viewer.is-device .viewer__device::before, .viewer.is-device .viewer__device::after { content: ''; position: absolute; background: var(--line-c); }
.window--phone .device::before, .viewer.is-device[data-device='phone'] .viewer__device::before { right: -.7%; top: 23%; width: 1.4%; height: 9.5%; border-radius: 0 40% 40% 0 / 0 6% 6% 0; }
.window--phone .device::after, .viewer.is-device[data-device='phone'] .viewer__device::after { left: -.7%; top: 18%; width: 1.4%; height: 5.5%; border-radius: 40% 0 0 40% / 10% 0 0 10%; }
.window--tablet .device::before, .viewer.is-device[data-device='tablet'] .viewer__device::before { left: 49.75%; top: .55%; width: .5%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); opacity: .55; }
.window--tablet .device::after, .viewer.is-device[data-device='tablet'] .viewer__device::after { content: none; }
/* While the framed viewer is open the whole device has left the wall, not just its screen. */
.window.is-lifted.is-lifted-whole .device { visibility: hidden; }

.project__body { display: grid; gap: 16px; align-content: start; }
.project__type { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.project__demo { font-size: clamp(1.25rem, 2.1vw, 1.625rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.22; text-wrap: pretty; }
.project__motion { font-size: .9375rem; color: var(--muted); max-width: 46ch; }
.project__motion b { display: block; margin-bottom: 2px; font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

.swatches { display: flex; gap: 6px; }
.swatches li { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-c); }

.project__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 4px; }
.project__direct { font-size: .9375rem; font-weight: 500; text-underline-offset: .2em; text-decoration-thickness: 1px; padding: 10px 0; }

@media (min-width: 768px) {
  .window--phone { width: 300px; }
  .project__card { gap: 24px; }
  .project__head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; }
  .project__index { align-self: start; padding-top: .9em; }
  .project__name { grid-column: auto; }
  .project__head .tag { grid-row: auto; grid-column: auto; align-self: center; }
  .project__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 40px; }
  .project__body > .project__type { grid-column: 1 / -1; }
  .project__side { display: grid; gap: 16px; align-content: start; }
}
@media (max-width: 767px) {
  .project__side { display: contents; }
}

@media (min-width: 1100px) {
  .project__card {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    grid-template-areas: 'head head' 'window body';
    column-gap: 48px; row-gap: 28px;
  }
  .project__head { grid-area: head; }
  .window { grid-area: window; }
  .project__body { grid-area: body; grid-template-columns: 1fr; align-content: end; gap: 18px; padding-bottom: 6px; }
  .project__body > .project__type { grid-column: auto; }
  /* Alternate sides so the wall has a rhythm. */
  .project.is-flipped .project__card {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas: 'head head' 'body window';
  }
  .project.is-flipped .project__index { order: 3; }
  .project.is-flipped .project__name { order: 2; text-align: right; }
  .project.is-flipped .project__head .tag { order: 1; justify-self: start; }
  /* A phone is narrow, so it takes the smaller column and the text sits level with its middle. */
  .window--phone { width: clamp(280px, 22vw, 330px); }
  .project--phone .project__card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .project--phone.is-flipped .project__card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .project--phone .project__body { align-content: center; max-width: 520px; padding-bottom: 0; }
}

.wall__empty { color: var(--muted); font-size: 1.125rem; }

/* ---------- client work ---------- */
.clients { padding-block: clamp(40px, 8vw, 96px) clamp(96px, 14vw, 180px); }
.clients__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px;
  padding-bottom: 24px; border-bottom: 1px solid var(--fg);
}
.clients__head h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
.clients__head p { color: var(--muted); }
.clients__row { display: grid; }
.client {
  display: grid; gap: 10px; align-content: start;
  padding: 24px 0; border-bottom: 1px solid var(--line-c);
}
.client h3 { font-size: 1.5rem; letter-spacing: -0.02em; }
.client p { color: var(--muted); max-width: 44ch; }
.client__meta { font-size: .875rem; }
.client__flag {
  justify-self: start; padding: .4em .7em; border-radius: 4px;
  background: var(--fg); color: var(--bg) !important;
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em; line-height: 1; text-transform: uppercase;
}
.client--placeholder { border-bottom-style: dashed; }
@media (min-width: 768px) {
  .clients__row { grid-template-columns: repeat(3, 1fr); }
  .client { padding: 28px 28px 32px 0; border-bottom: 0; border-right: 1px solid var(--line-c); }
  .client + .client { padding-left: 28px; }
  .client:last-child { border-right: 0; padding-right: 0; }
  .client--placeholder { border-right-style: dashed; }
}