/* ============================================================
   Homepage — sections unique to /
   Matches the Claude design source, modularised.
   ============================================================ */

/* ---------- HERO ---------- */
.section-hero {
  padding: calc(var(--nav-h) + 40px) var(--pad-x) 56px;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-content: space-between;
  position: relative;
  overflow: hidden;
}
.hero-top {
  grid-column: 1 / span 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-top: clamp(10px, 3vh, 28px);
}
.hero-top .tline { flex: 0 0 80px; height: 1px; background: var(--border); }
.hero-top .avail {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 999px;
  color: #d6d6d6;
}
.hero-top .avail .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7CE17C;
  box-shadow: 0 0 8px rgba(124, 225, 124, .6);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { 50% { opacity: .55; } }

/* Two-column hero body — copy on the left, pixel grid on the
   right. The grid host is .hero-pxl (see /assets/css/pixel-grid.css). */
.hero-body {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.hero-body__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 28px);
}
.hero-body__vis {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Small top padding so the grid centre lines up with the headline
     centre rather than the eyebrow row. */
  padding-top: clamp(0px, 1vh, 12px);
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(38px, 5.2vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.035em;
}
/* Headline first line — sits as a single block above the rotating
   word with tight vertical rhythm. The rotating word follows on its
   own line via display: block on .rot below. */
.hero-headline__l1 {
  display: block;
  margin-bottom: .04em;
}
.hero-headline em { font-style: italic; color: #ffffff; font-weight: 500; }
.hero-headline__l1 em {
  /* "the" italic in the static lead-in line. Slightly cooler grey so
     it doesn't fight the rotating word colour below. */
  font-style: italic;
  font-weight: 500;
  color: #ffffff;
}
/* Typing rotator — single line, no overflow:hidden trickery. The
   text element's textContent is JS-driven (see initRotator); the
   caret blinks via CSS. */
.hero-headline .rot {
  display: block;
  position: relative;
  line-height: 1.05;
  white-space: nowrap;
  /* Reserve a single line of height while empty so the layout doesn't
     jump on first paint before initRotator runs. */
  min-height: 1em;
}
.hero-headline .rot__text {
  display: inline;
  /* Colour switches per phrase via .c1/.c2/.c3/.c4 classes that the
     JS toggles before each typeIn(). Transitions softly so the
     start of each new phrase eases into its colour. */
  transition: color .35s ease;
}
.hero-headline .rot__text.c1 { color: var(--blue); }
.hero-headline .rot__text.c2 { color: var(--red); }
.hero-headline .rot__text.c3 { color: var(--cream); }
.hero-headline .rot__text.c4 { color: #d0d0d0; }
.hero-headline .rot__caret {
  display: inline-block;
  width: .08em;
  height: .85em;
  background: currentColor;
  vertical-align: -.05em;
  margin-left: .04em;
  animation: rot-caret-blink 1s steps(1) infinite;
}
@keyframes rot-caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-headline .rot__caret { animation: none; opacity: 1; }
}

.hero-sub {
  font-size: 17px;
  line-height: 1.55;
  color: #cfcfcf;
  max-width: 52ch;
}
.hero-sub strong { color: #fff; font-weight: 500; }
.hero-meta {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 28px;
  margin-top: clamp(24px, 3vw, 40px);
}
.hero-meta .k {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hero-meta .v {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.hero-meta .v small {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

.hero-cta {
  display: flex; gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
/* Keyboard-shortcut hint removed from hero — kept the rule scoped
   so the rest of the site can still use the kbd treatment if needed. */

/* ---------- ETHOS — pull-quote band ----------
   Tight horizontal band between the logo reel and the selected-work
   grid. Pixel mark on the left, single-paragraph prose on the right.
   No surrounding section padding — top/bottom rules separate it
   from the bands above and below so it reads as a beat rather than
   a standalone section. */
.section-ethos {
  padding: clamp(28px, 3.5vw, 48px) var(--pad-x);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ethos-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  max-width: var(--container-max, 1600px);
  margin: 0 auto;
}
/* The pixel mark itself — a single brand-blue square with a soft
   ambient glow. Sized to feel "small" against the surrounding type
   so the eye reads "pixel + sentence" rather than "icon + caption". */
.ethos-band__pixel {
  width: clamp(28px, 3.6vw, 44px);
  height: clamp(28px, 3.6vw, 44px);
  background: var(--blue);
  border-radius: 2px;
  box-shadow: 0 0 24px rgba(91, 90, 255, .35);
  flex: 0 0 auto;
}
.ethos-band__text {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(14.5px, .4vw + .8rem, 17px);
  line-height: 1.55;
  color: #d6d6d6;
  margin: 0;
  max-width: 78ch;
  letter-spacing: var(--body-letter-spacing);
}
.ethos-band__text strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: #ffffff;
  font-size: clamp(15.5px, .4vw + .9rem, 19px);
  margin-right: .25em;
  letter-spacing: -.005em;
}
@media (max-width: 640px) {
  .ethos-band { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- CLIENTS ----------
   The homepage #clients section now uses the shared .logo-reel component
   from about.css (SVG marquee). The legacy text-marquee styles below are
   kept for backwards compatibility if the old markup ever comes back. */

/* ---------- SERVICES ---------- */
.section-services {
  padding: 140px var(--pad-x) 60px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.services-head {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-bottom: 56px;
  align-items: end;
}
.services-head .eye { grid-column: 1 / span 4; }
.services-head h2 {
  grid-column: 5 / span 8;
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(36px, 4.6vw, 76px);
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.05;
}
.services-head h2 em { color: #9a9a9a; }
/* "See all capabilities" link — now sits at the BOTTOM of the
   capabilities section, after the service cards + ongoing support
   block. Always full-width grid so it centres cleanly. */
.section-services > .services-see-all {
  grid-column: 1 / span 12;
  justify-self: center;
  margin-top: clamp(32px, 4vw, 56px);
  font-family: var(--font-mono);
  font-size: 11px;
  color: #fff;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  padding: 12px 20px;
  border-radius: 999px;
  transition: background .2s, border-color .2s, color .2s;
}
.section-services > .services-see-all:hover { background: #fff; color: #111; border-color: #fff; }
.section-services > .services-see-all span { display: inline-block; transition: transform .25s; }
.section-services > .services-see-all:hover span { transform: translate(2px, -2px); }

/* Homepage service cards omit pricing — the detailed service pages
   show it. Hide the price element inside .svc--home. */
.svc.svc--home .foot .price { display: none; }
.svc.svc--home .foot { justify-content: flex-end; }

/* Ongoing-support band — merges the old standalone support section
   into capabilities. Two-column flex: illustration on the left,
   eyebrow + headline + plain link arrow on the right. Same chrome
   as the service cards above so the band reads as part of the same
   pattern, just shorter. */
.svc-ongoing {
  grid-column: 1 / span 12;
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 36px);
  margin-top: clamp(16px, 1.6vw, 24px);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: linear-gradient(180deg, #141414, #111);
  /* Whole band is now an anchor — reset link defaults and add a
     subtle hover lift so it feels like the same interactive card
     pattern as the service tiles above. */
  color: inherit;
  text-decoration: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s;
}
.svc-ongoing:hover { transform: translateY(-3px); border-color: var(--cream); }

/* Eyebrow row — icon + ongoing-support label, sits at the top of the
   right-hand column above the headline. Mirrors the service-card head
   composition above. */
.svc-ongoing__top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.svc-ongoing__ico {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245, 240, 220, .30);
  background: rgba(245, 240, 220, .04);
  color: var(--cream);
  transition: box-shadow .25s, background .25s;
}
.svc-ongoing__ico svg { width: 18px; height: 18px; }
.svc-ongoing:hover .svc-ongoing__ico {
  box-shadow: 0 0 0 1px var(--cream), 0 0 24px rgba(245, 240, 220, .25);
  background: rgba(245, 240, 220, .08);
}

.svc-ongoing__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.svc-ongoing__eye {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.svc-ongoing h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.4vw + .5rem, 26px);
  letter-spacing: -.01em;
  line-height: 1.25;
  max-width: 60ch;
}
.svc-ongoing h3 em { color: var(--cream); font-style: italic; font-weight: 500; }

/* Plain explore link — no pill background, matches the service card
   foot where the cards above show "Explore ↗" as text only. */
.svc-ongoing__link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #fff;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  align-self: flex-start;
  transition: color .2s;
}
.svc-ongoing:hover .svc-ongoing__link { color: var(--cream); }
.svc-ongoing__link span { display: inline-block; transition: transform .25s; }
.svc-ongoing:hover .svc-ongoing__link span { transform: translate(2px, -2px); }

/* Ongoing-support inline illustration — sits on the LEFT of the band,
   matching the visual hierarchy of the three service cards above
   (which all carry their illustration up top). The dashboard markup
   from PXL_HERO_VIS["ongoing-support"] mounts here. */
.svc-ongoing--has-vis { align-items: stretch; }
.svc-ongoing__vis {
  flex: 0 0 clamp(260px, 24vw, 360px);
  position: relative;
  align-self: stretch;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(245, 240, 220, .12);
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(245, 240, 220, .05), transparent 60%),
    linear-gradient(180deg, #0e0e0e, #0a0a0a);
  /* Tall enough to fit the full dashboard (head + uptime + graph). The
     dashboard has its own internal padding so we don't need to add
     more here. */
  min-height: 200px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}
/* The hero-vis markup wraps the actual illustration in .svc-hero__vis.
   Make that wrapper fill the slot so the dashboard sits flush, then
   ensure the inner .svc-hero-vis--dash takes the full size. */
.svc-ongoing__vis .svc-hero__vis,
.svc-ongoing__vis .svc-hero-vis--dash {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Slim down the dashboard's internal padding + remove the response
   metric in this context so uptime + graph fit the smaller card. The
   second .metric is hidden via :nth-of-type, and the head + uptime +
   graph sit comfortably inside the 200px slot. */
.svc-ongoing__vis .svc-hero-vis--dash {
  padding: 14px 16px !important;
  gap: 8px !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto 1fr !important;
}
.svc-ongoing__vis .svc-hero-vis--dash .metric:nth-of-type(2) { display: none; }
.svc-ongoing__vis .svc-hero-vis--dash .metric .val { font-size: 26px; }
.svc-ongoing__vis .svc-hero-vis--dash .head > span:first-child { font-size: 9px; letter-spacing: .16em; }
.svc-ongoing__vis .svc-hero-vis--dash .graph { min-height: 56px; }
@media (max-width: 880px) {
  .svc-ongoing { flex-direction: column; }
  .svc-ongoing__vis { flex: 0 0 auto; min-height: 180px; }
}

.svc-grid {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}
.svc {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 26px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, #141414, #111);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s, background .25s;
  overflow: hidden;
  /* The whole card is now an anchor — reset the default link look so
     the existing typography / chrome carries over untouched. */
  color: inherit;
  text-decoration: none;
}
.svc:hover { transform: translateY(-4px); }
.svc .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.svc .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.svc .chip { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }

/* Service icon tile (replaces the chip dot) ---------------- */
.svc .svc-ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  color: var(--white);
  transition: color .3s, background .3s, border-color .3s, box-shadow .3s;
  flex: 0 0 44px;
}
.svc .svc-ico svg { width: 22px; height: 22px; }
.svc.blue  .svc-ico { color: var(--blue);  border-color: rgba(91,90,255,.35);  background: rgba(91,90,255,.06); }
.svc.red   .svc-ico { color: var(--red);   border-color: rgba(232,69,60,.35);  background: rgba(232,69,60,.06); }
.svc.cream .svc-ico { color: var(--cream); border-color: rgba(245,240,220,.30); background: rgba(245,240,220,.04); }
.svc.blue:hover  .svc-ico { box-shadow: 0 0 0 1px var(--blue),  0 0 24px rgba(91,90,255,.35); }
.svc.red:hover   .svc-ico { box-shadow: 0 0 0 1px var(--red),   0 0 24px rgba(232,69,60,.35); }
.svc.cream:hover .svc-ico { box-shadow: 0 0 0 1px var(--cream), 0 0 24px rgba(245,240,220,.25); }
.svc h3 {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: 44px;
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.05;
  margin-top: 110px;
}
.svc h3 .u { display: inline-block; position: relative; }
.svc h3 .u::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.svc:hover h3 .u::after { transform: scaleX(1); }
.svc .desc {
  color: #b8b8b8;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 34ch;
  margin-top: 28px;
}
.svc .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}
.svc .tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px;
}
.svc .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.svc .foot .price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.01em;
}
.svc .foot .price small {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .06em;
  margin-left: 8px;
}
.svc .foot .more {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #fff;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.svc.blue { border-color: rgba(91, 90, 255, .35); }
.svc.blue .chip { background: var(--blue); box-shadow: 0 0 18px var(--blue); }
.svc.blue:hover { background: linear-gradient(180deg, rgba(91, 90, 255, .10), #111); border-color: var(--blue); }
.svc.blue h3 .u { color: var(--blue); }

.svc.red .chip { background: var(--red); box-shadow: 0 0 18px rgba(232, 69, 60, .6); }
.svc.red:hover { background: linear-gradient(180deg, rgba(232, 69, 60, .08), #111); border-color: var(--red); }
.svc.red h3 .u { color: var(--red); }

.svc.cream .chip { background: var(--cream); }
.svc.cream:hover { background: linear-gradient(180deg, rgba(245, 240, 220, .05), #111); border-color: var(--cream); }
.svc.cream h3 .u { color: var(--cream); }

/* ---------- STACK / TOOLS (LIGHT) ---------- */
.section-stack {
  background: var(--cream);
  color: var(--ink);
  padding: 120px var(--pad-x);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section-stack.light * { --border: #d9d3bc; }
.stack-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 56px;
}
.stack-head .eye { grid-column: 1 / span 4; color: #6a6250; }
.stack-head h2 {
  grid-column: 5 / span 8;
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(36px, 4.4vw, 72px);
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.05;
}
.stack-head h2 em { color: #817960; }
.stack-head .aside {
  grid-column: 1 / span 4;
  margin-top: 20px;
  color: #4e4738;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 38ch;
}
.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tool {
  position: relative;
  border: 1px solid #d9d3bc;
  border-radius: 4px;
  padding: 26px 22px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  background: rgba(255, 255, 255, .35);
  transition: background .25s, transform .25s, border-color .25s;
  overflow: hidden;
}
.tool:hover {
  background: #fff;
  transform: translateY(-3px);
  border-color: #b9b19a;
}
.tool .mark { display: flex; align-items: center; gap: 14px; }
.tool .mark .ic {
  width: 44px; height: 44px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d9d3bc;
  flex: 0 0 44px;
}
.tool:hover .mark .ic { background: var(--ink); border-color: var(--ink); color: #fff; }
.tool .mark .ic svg { width: 24px; height: 24px; transition: transform .3s; }
.tool:hover .mark .ic svg { transform: scale(1.08); }
.tool .mark .name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.tool .mark .name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #7b735f;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 4px;
  font-weight: 400;
}
.tool .desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #4a4331;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
  max-height: 0;
  overflow: hidden;
}
.tool:hover .desc { opacity: 1; transform: none; max-height: 120px; }
.tool .idx {
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #8f866d;
  letter-spacing: .14em;
}

/* ---------- WORK ---------- */
.section-work { padding: 140px var(--pad-x) 60px; }
.work-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.work-head h2 {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(40px, 5.4vw, 92px);
  letter-spacing: -.035em;
  line-height: 1;
  max-width: 14ch;
}
.work-head h2 em { color: #9a9a9a; }
.work-head .filters {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.work-head .filters button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  color: #cfcfcf;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s, color .2s;
}
.work-head .filters button .cd {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}
.work-head .filters button.active { background: #fff; color: #111; }
.work-head .filters button:not(.active):hover { background: #1f1f1f; color: #fff; }

.work-cat { margin-bottom: 48px; }
.work-cat-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.work-cat-head .dotc { width: 10px; height: 10px; border-radius: 50%; align-self: center; }
.work-cat-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -.02em;
}
.work-cat-head .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-left: auto;
}
.work-cat-head .see-all {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #fff;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 999px;
  transition: background .2s, border-color .2s, color .2s;
}
.work-cat-head .see-all:hover { background: #fff; color: #111; border-color: #fff; }
.work-cat-head .see-all span { display: inline-block; transition: transform .25s; }
.work-cat-head .see-all:hover span { transform: translate(2px, -2px); }

.work-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.proj {
  grid-column: span 4;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: #0f0f0f;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s;
}
.proj.big { grid-column: span 8; }
.proj:hover { transform: translateY(-4px); }
.proj.blue:hover { border-color: var(--blue); }
.proj.red:hover { border-color: var(--red); }
.proj.cream:hover { border-color: var(--cream); }
.proj .ph {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  background: #151515;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 12px);
}
.proj.big .ph { aspect-ratio: 16/9; }
.proj .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s;
}
.proj.blue:hover .ph::after  { opacity: 1; background: radial-gradient(600px 280px at 30% 40%, rgba(91, 90, 255, .18), transparent 60%); }
.proj.red:hover .ph::after   { opacity: 1; background: radial-gradient(600px 280px at 30% 40%, rgba(232, 69, 60, .2), transparent 60%); }
.proj.cream:hover .ph::after { opacity: 1; background: radial-gradient(600px 280px at 30% 40%, rgba(245, 240, 220, .14), transparent 60%); }
.proj .ph-label {
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #666;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Real project media (image or video) fills the placeholder slot */
.proj .proj-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  z-index: 1;
}
.proj:hover .proj-media { transform: scale(1.03); }
/* .ph-badge / .ph-partner styling lives in work.css alongside .pcard
   equivalents (one shared liquid-glass chip system). */
.proj .info {
  padding: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.proj h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.proj .ctx {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 6px;
}
.proj .accent {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 8px;
  flex: 0 0 8px;
}
.proj .ctx .partner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a8a8a8;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--border);
}
.proj .ctx .partner::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
}

.proj.coming {
  background: #141414;
  border-style: dashed;
  border-color: rgba(245, 240, 220, .28);
}
.proj.coming .ph {
  aspect-ratio: 4/3;
  background: radial-gradient(500px 240px at 50% 50%, rgba(245, 240, 220, .06), transparent 60%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.proj.coming .ph .soon {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--cream);
  font-size: 28px;
  letter-spacing: -.02em;
}
.proj.coming:hover { border-color: var(--cream); }

/* ---------- SUPPORT (DARK) ---------- */
.section-support {
  background: #0a0a0a;
  color: #fff;
  padding: 140px var(--pad-x) 120px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  row-gap: 0;
}
.support-head {
  grid-column: 1 / span 12;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 56px;
}
.support-head .eye { grid-column: 1 / span 4; }
.support-head h2 {
  grid-column: 5 / span 8;
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(40px, 5.2vw, 88px);
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1.02;
  color: #fff;
}
.support-head h2 em { color: var(--cream); font-style: italic; font-weight: 500; }
.support-head .aside {
  grid-column: 5 / span 7;
  margin-top: 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #b8b8b8;
  max-width: 62ch;
}
.support-grid { grid-column: 1 / span 12; }
.support-cta {
  grid-column: 1 / span 12;
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.support-see-all {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #fff;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  padding: 12px 18px;
  border-radius: 999px;
  transition: background .2s, border-color .2s, color .2s;
}
.support-see-all:hover { background: #fff; color: #111; border-color: #fff; }
.support-see-all span { display: inline-block; transition: transform .25s; }
.support-see-all:hover span { transform: translate(2px, -2px); }

/* ---------- METRICS ---------- */
.section-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.metric {
  padding: 48px var(--pad-x);
  border-right: 1px solid var(--border);
}
.metric:last-child { border-right: 0; }
.metric .n {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 5vw, 68px);
  letter-spacing: var(--heading-letter-spacing);
  line-height: 1;
}
.metric .n em { color: #9a9a9a; }
.metric .l {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 12px;
}

/* ---------- ABOUT (LIGHT) ---------- */
.section-about {
  background: #fafaf7;
  color: var(--ink);
  padding: 140px var(--pad-x);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  position: relative;
}
.section-about .eye {
  grid-column: 1 / span 3;
  color: #666;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-top: 14px;
}
.section-about .body {
  grid-column: 4 / span 6;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--ink);
  max-width: 26ch;
}
.section-about .body em { color: #747062; font-style: italic; font-weight: 400; }
.section-about .body .blue { color: var(--blue); }
.section-about .body .red { color: var(--red); }
.section-about .sub {
  grid-column: 4 / span 6;
  margin-top: 40px;
  font-size: 16px;
  line-height: 1.6;
  color: #3f3a2b;
  max-width: 60ch;
}
.section-about .sub em { color: var(--blue); font-style: normal; font-weight: 500; }

.section-about .founder {
  grid-column: 10 / span 3;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  align-self: start;
  padding-top: 4px;
  /* Cap the photo so the new shorter "Why PXL" headline doesn't leave
     a tall column of dead space alongside it. The bottom card row now
     sits closer to the body copy, removing the empty vertical gap. */
  max-width: 220px;
  justify-self: end;
}
.section-about .founder-ph {
  aspect-ratio: 4/5;
  border: 1px solid #e1dbc4;
  border-radius: 4px;
  background:
    radial-gradient(140% 100% at 30% 20%, rgba(91, 90, 255, .10), transparent 55%),
    repeating-linear-gradient(135deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 10px),
    #efe9d3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.section-about .founder-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Fallback placeholder — pxlFallback replaces the <img> with this
   block when the portrait 404s. Keeps the framed cream feel. */
.section-about .founder-ph .pcard__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
.section-about .founder-ph .pcard__placeholder .ini {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(72px, 9vw, 140px);
  letter-spacing: -.04em;
  color: var(--ink);
  opacity: .9;
}
.section-about .founder-ph .pcard__placeholder .soon {
  position: absolute;
  left: 12px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a7360;
}
.section-about .founder figcaption {
  font-size: 13px;
  line-height: 1.45;
  color: #4c4635;
}
.section-about .founder .fc-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.section-about .founder .fc-role { margin-top: 2px; }
.section-about .founder .fc-loc {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a7360;
  margin-top: 6px;
}
.section-about .card {
  grid-column: 4 / span 9;
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border-top: 1px solid #e6e0cb;
  padding-top: 32px;
}
.section-about .card .it .n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #7a7360;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-about .card .it h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -.02em;
  margin-bottom: 8px;
  color: var(--ink);
}
.section-about .card .it p {
  font-size: 14px;
  line-height: 1.55;
  color: #4c4635;
}
.section-about .about-ctas {
  grid-column: 4 / span 9;
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.section-about .about-ctas .btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.section-about .about-ctas .btn-primary:hover { background: #000; }
.section-about .about-ctas .btn-secondary { background: transparent; color: var(--ink); border-color: rgba(30, 25, 15, .22); }
.section-about .about-ctas .btn-secondary:hover { background: rgba(30, 25, 15, .06); border-color: rgba(30, 25, 15, .4); }

/* ---------- CONTACT ---------- */
.section-contact {
  padding: 160px var(--pad-x);
  text-align: left;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
  position: relative;
  overflow: hidden;
}
.section-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 80% 30%, rgba(91, 90, 255, .10), transparent 60%),
    radial-gradient(700px 400px at 10% 100%, rgba(232, 69, 60, .06), transparent 60%);
}
.section-contact h2 {
  grid-column: 1 / span 9;
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(50px, 7.5vw, 140px);
  letter-spacing: -.035em;
  line-height: .98;
}
.section-contact h2 em { color: var(--cream); }
.section-contact .side {
  grid-column: 10 / span 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 18px;
  position: relative;
  z-index: 2;
}
.section-contact .side .btn { justify-content: center; }
.section-contact .side .note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  line-height: 1.8;
}
.section-contact .side .note b { color: #ddd; font-weight: 400; }
.section-contact .contact-sub {
  font-family: var(--font-ui);
  font-size: 15px;
  color: #b8b8b8;
  line-height: 1.55;
  margin-bottom: 6px;
}

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

/* Mobile hero — copy takes the full width; the pixel-grid column
   is removed entirely (matching the .hero-pxl mobile hide in
   pixel-grid.css). The meta strip at the very top is also hidden
   so the screen leads with the headline. */
@media (max-width: 768px) {
  .hero-top { display: none; }
  /* Single column on mobile — pixel grid stacks ABOVE the copy and
     sits a little higher than the column-top so it hugs the nav.
     The grid is z-index-layered BEHIND the copy so where the
     rotating grid extends down into the headline area the text
     reads cleanly on top instead of being obscured by pixels. The
     gap is widened so there's clear breathing room between the
     grid and the subtitle/CTAs below the headline. */
  .hero-body {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 56px);
    position: relative;
  }
  .hero-body__vis {
    order: -1;
    justify-content: flex-start;
    padding-top: 0;
    margin-top: clamp(-24px, -2vh, -8px);
    position: relative;
    z-index: 0;
  }
  .hero-body__copy {
    position: relative;
    z-index: 1;
  }
  .hero-meta { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
}

/* Mobile hero — meta line on row 1, availability badge on its own
   row 2, and the rotating word constrained so it never overflows the
   viewport at 375px. */
@media (max-width: 768px) {
  .hero-top {
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero-top > div:first-child {
    flex: 1 1 100%;
    justify-content: space-between;
    letter-spacing: .12em;
    font-size: 10px;
  }
  .hero-top .tline { flex: 0 0 32px; }
  .hero-top .avail {
    flex: 0 0 auto;
    align-self: flex-start;
  }
  /* Drop the "· Working Globally" chip on phones — at 375px the row
     would otherwise wrap and look cramped. Desktop / tablet keeps it. */
  .hero-top__working { display: none; }
  /* Rotating word — tighten the line height + drop the min-width so
     the longest phrase ("inflated invoices.") fits the viewport width
     at 375px without clipping. */
  .hero-headline .rot {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }
  .hero-headline .rot .inner span {
    white-space: normal;
    word-break: break-word;
  }
  .hero-headline .hero-line3 {
    flex-wrap: wrap;
  }
  .hero-headline .static-prefix { white-space: normal; }
}

@media (max-width: 980px) {
  .hero-meta { grid-template-columns: 1fr 1fr; }

  .services-head .eye,
  .services-head h2,
  .services-head .services-see-all { grid-column: 1 / span 12; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc h3 { margin-top: 56px; }

  .stack-grid { grid-template-columns: repeat(2, 1fr); }
  .stack-head .eye, .stack-head h2, .stack-head .aside { grid-column: 1 / span 12; }

  .work-list .proj { grid-column: span 12 !important; }

  .section-metrics { grid-template-columns: repeat(2, 1fr); }
  .metric { border-bottom: 1px solid var(--border); }
  .metric:nth-child(2) { border-right: 0; }

  .section-about .eye,
  .section-about .body,
  .section-about .sub,
  .section-about .card,
  .section-about .founder,
  .section-about .about-ctas { grid-column: 1 / span 12; }
  /* Whole section stacks on mobile — left-align the founder photo
     instead of pushing it to the right edge so the rhythm matches the
     headline + body columns above. */
  .section-about .founder {
    grid-row: auto;
    max-width: 220px;
    justify-self: start;
  }
  .section-about .card { grid-template-columns: 1fr; }

  .support-head .eye,
  .support-head h2,
  .support-head .aside { grid-column: 1 / span 12; }

  .section-contact h2,
  .section-contact .side { grid-column: 1 / span 12; }
}

@media (max-width: 640px) {
  .section-clients {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .section-clients .mq { width: 100%; }
}

/* ============================================================
   Homepage service cards — embedded animated illustration
   Each .svc--home card now mounts the same animated visual the
   service detail pages use, scoped under .svc--has-vis so the
   default services.css rules don't fight the smaller card layout.
   The visual sits between the head (number + h3) and body (desc +
   tags + foot), framed in its own band so the card hierarchy reads
   cleanly even at 1/3 viewport widths.
   ============================================================ */
.svc--has-vis {
  /* Override the default min-height — the embedded visual makes
     the card naturally taller and we don't want extra dead space. */
  min-height: auto;
  gap: 14px;
}
.svc--has-vis .svc__head { margin-bottom: 2px; }
.svc--has-vis .svc__vis-shell {
  position: relative;
  width: 100%;
  /* Shorter aspect ratio than before (was 5/4) so the visual reads
     as a supporting illustration rather than dominating the card. */
  aspect-ratio: 16 / 10;
  max-height: 200px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #0e0e0e, #0a0a0a);
  margin: 4px 0 8px;
  isolation: isolate;
}
/* The inline .svc-hero__vis from hero-vis.js is positioned in a hero
   grid by default. Inside the card we re-anchor it to fill the
   shell at full width so its inner CSS animations scale down to
   the card width naturally. */
.svc--has-vis .svc__vis-shell .svc-hero__vis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  padding: 10px;
  display: flex;
  animation: none;       /* skip the entrance fade — the card's own data-reveal handles it */
  opacity: 1;
  transform: none;
  pointer-events: none;
}
/* Make the inner browser / grid / terminal / dash visual fill
   whatever the parent gives them, regardless of the absolute
   sizing they may have inherited from the service hero. */
.svc--has-vis .svc-hero-vis--browser,
.svc--has-vis .svc-hero-vis--grid,
.svc--has-vis .svc-hero-vis--terminal,
.svc--has-vis .svc-hero-vis--dash {
  width: 100%;
  height: 100%;
  flex: 1;
}
.svc--has-vis .svc__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* On the card's tighter footprint we don't need the giant hero
   typography from the visuals — pull the heading text down a touch. */
.svc--has-vis .svc-hero-vis--browser .page-hero .h {
  font-size: clamp(14px, 1.1vw + .5rem, 22px);
}

@media (max-width: 1024px) {
  .svc--has-vis .svc__vis-shell { aspect-ratio: 16 / 9; }
}

/* ============================================================
   Mobile responsive — homepage tools, filters, shoot CTA
   ============================================================ */

/* Tools — vertical stack with icon centred above name + category, all
   centre-aligned. The hover-only description stays hidden on touch. */
@media (max-width: 768px) {
  .stack-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tool {
    padding: 18px 14px;
    min-height: 0;
    gap: 12px;
    text-align: center;
  }
  .tool .mark {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .tool .mark .name { text-align: center; font-size: 15px; }
  .tool .mark .name small { text-align: center; }
  .tool .desc { display: none; }
  .tool .idx { top: 8px; right: 10px; font-size: 9px; }
}

/* Selected work filter pills — homepage filter buttons. Each active
   pill picks up the brand accent for its category. Product Build
   uses ink black so the chip reads as a deliberate "third state"
   alongside All (also ink) — cream washed out on the dark hero band
   and red read as a duplicate of UI/UX. */
.work-head .filters button.active[data-filter="all"]      { background: #fff;          color: #111; }
.work-head .filters button.active[data-filter="websites"] { background: var(--blue);   color: #fff; }
.work-head .filters button.active[data-filter="uiux"]     { background: var(--red);    color: #fff; }
.work-head .filters button.active[data-filter="products"] { background: var(--ink);    color: #fff; }

/* Mobile — convert to a vertical stack so each filter has a full-row
   tap target instead of being squashed against the outer pill border.
   Active-state colours from the rules above still apply. */
@media (max-width: 768px) {
  .work-head { flex-direction: column; align-items: stretch; gap: 18px; }
  .work-head h2 { max-width: none; font-size: clamp(36px, 9vw, 48px); }
  .work-head .filters {
    flex-direction: column;
    border-radius: 12px;
    padding: 6px;
    gap: 2px;
    width: 100%;
  }
  .work-head .filters button {
    width: 100%;
    justify-content: flex-start;
    font-size: 12px;
    padding: 14px 16px;
    border-radius: 8px;
  }
}

/* Hide secondary "Shoot your own pixels" CTA on mobile — keep only the
   primary "Start a project" button so the CTA bands stay focused. */
@media (max-width: 768px) {
  .pxl-shoot-cta,
  .btn-shoot,
  .section-contact .pxl-shoot-cta { display: none !important; }
}