/* Approved shared brand scale and visible spacing, 1 November 2026. */
.brand { gap: 0.5px; }
.brand .company-logo { width: 69.875px; height: 69.875px; }
.brand .company-wordmark { font-size: 39px; margin-left: -4.3px; }
.brand .wordmark-name { letter-spacing: -1.43px; }
.brand .wordmark-labs { margin-left: 2px; font-size: 0.5543445em; }
@media (max-width: 600px) {
  .brand { gap: 0.5px; }
  .brand .company-logo { width: 58.5px; height: 58.5px; }
  .brand .company-wordmark { font-size: 32.5px; margin-left: -3.6px; }
}

/* Footer logo and responsive strapline. */
.footer-promise { gap: 2.2px; margin-left: -6.6px; }
.footer-promise .company-logo { width: 69.875px; height: 69.875px; }
.footer-promise p { font-size: clamp(1.2rem, 2.3vw, 1.8rem); }
@media (max-width: 600px) { .footer-promise { gap: 1.9px; margin-left: -5.5px; } .footer-promise .company-logo { width: 58.5px; height: 58.5px; } }

/* Lower the menu label slightly while leaving the popup in place. */
.mobile-nav summary { position: relative; top: 3px; }

/* Footer links and legal text align with the repositioned logo. */

/* Align visible header logo artwork with the page content edge. */
.brand { margin-left: -6.6px; }
@media (max-width: 600px) { .brand { margin-left: -5.5px; } }

/* Restrained style pass: clearer hierarchy, softer framing and tighter directory pages. */
.button { border-radius: 1.15rem; font-weight: 700; }
.button:not(.button-secondary) { box-shadow: 0 5px 14px rgba(21, 125, 127, 0.12); }
.text-link { font-weight: 700; }
.eyebrow { font-weight: 750; letter-spacing: 0.13em; }
.product-name { font-weight: 750; }
.simple-hero { padding-block: clamp(3.8rem, 7vw, 6.5rem); }
.simple-hero h1 { font-size: clamp(3.1rem, 6vw, 5.75rem); }
.hero-screen { border-width: 0.3rem; box-shadow: 0 12px 34px rgba(16, 42, 67, 0.14); }
.home-product, .product-gallery figure, .listing-feature { border-radius: 1.5rem; }
@media (min-width: 861px) {
  .feature-grid article { min-height: 15rem; }
  .feature-number { margin-bottom: 2.5rem; }
}
/* Second restrained polish pass — catalogue-driven, review candidate. */
:root {
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --soft-shadow: 0 1px 2px rgba(16, 42, 67, 0.06);
}
/* Keep the established homepage collage geometry and its original outer curve. */
.portfolio-collage { border-radius: 2rem; }
.button { border-radius: 0.7rem; }
.home-product, .listing-feature, .product-gallery figure { border-radius: var(--radius-lg); }
.home-product, .listing-feature, .directory-card, .contact-panel, .form-section {
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}
.games-home .home-product { border-color: rgba(255, 255, 255, 0.16); }
.product-gallery picture, .hero-screen { border-radius: var(--radius); }
.hero-screen { box-shadow: var(--soft-shadow); }
.product-gallery img, .listing-media img { border-radius: var(--radius-sm); box-shadow: none; }

/* Numbered feature blocks use quiet dividers instead of a surrounding box. */
.feature-grid, .feature-grid.four {
  gap: 0; overflow: visible; background: transparent; border: 0; border-radius: 0;
}
.feature-grid article { min-height: 0; background: transparent; }
.feature-grid article + article { border-left: 1px solid var(--line); }
.feature-number {
  margin-bottom: 1.5rem; color: var(--teal); font-family: var(--display-font);
  font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1;
}
@media (max-width: 860px) {
  .feature-grid.four { grid-template-columns: 1fr; }
  .feature-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
}

/* Shared card presentation; no individual-product selectors are needed. */
.home-products.apps-grid, .home-products.games-grid, .listing-stack {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.home-products > .home-product { grid-column: auto; margin-top: 0; }
.home-product, .listing-feature {
  display: flex; flex-direction: column; align-items: stretch; min-height: 0;
  height: 100%; overflow: hidden; padding: 0; gap: 0;
}
.listing-feature.reverse .listing-media { order: 0; }
.home-product .home-product-media, .listing-feature .listing-media {
  position: relative; display: block; width: 100%; height: auto; min-height: 0;
  aspect-ratio: 4 / 3; padding: 0; overflow: hidden; background: var(--ivory-deep); border-radius: 0;
}
.home-product .home-product-media picture, .listing-feature .listing-media picture {
  position: absolute; inset: 0.75rem; display: block; width: auto; height: auto;
}
.home-product .home-product-media img, .listing-feature .listing-media img {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: contain; object-position: center; border-radius: 0; box-shadow: none;
}
.home-product-copy, .listing-copy {
  display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start;
  min-width: 0; padding: 1.5rem;
}
.home-product-copy .text-link, .listing-copy .button { margin-top: auto; }
.home-product-copy p, .listing-copy p { margin-bottom: 1.25rem; }
@media (min-width: 585px) and (max-width: 895px) {
  .home-products > .home-product:last-child:nth-child(odd):not(:first-child),
  .listing-stack > .listing-feature:last-child:nth-child(odd):not(:first-child) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - 1.25rem) / 2);
  }
}

/* Use the text colour for arrows and suppress motion when requested. */
.text-link { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.text-link span { color: currentColor; transition: transform 160ms ease; }
.text-link:hover span { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .text-link span { transition: none; }
  .text-link:hover span { transform: none; }
}

/* Equal-width landscape hero frames, enabled by product data. */
.landscape-art.hero-equal-width .hero-screen { max-width: 100%; }

/* Shared catalogue-driven footer. */
.footer-top.footer-multi {
  grid-template-columns: minmax(13rem, 1.5fr) repeat(3, minmax(7rem, 1fr));
  align-items: start; gap: 2rem; padding-block: 3.2rem 2.5rem;
}
.footer-brand .brand { margin-bottom: 0.75rem; }
.footer-brand .wordmark-name { color: white; }
.footer-brand .wordmark-labs { color: #7cd5cd; }
.footer-brand p { margin: 0; color: #c8d4dc; font-size: 0.9rem; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; }
.footer-column h2 { margin: 0 0 0.25rem; color: white; font-family: var(--body-font); font-size: 0.95rem; letter-spacing: 0; line-height: 1.3; }
.footer-column a { color: #c8d4dc; font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.footer-column a:hover { color: white; text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 860px) {
  .footer-top.footer-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

/* Reserve comparable title space in multi-column card rows. */
@media (min-width: 585px) {
  .home-product-copy h3, .listing-copy h2 {
    min-height: 3.3em; font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.1;
  }
}

/* Centre a two-card final row when four columns fit. */
@media (min-width: 1188px) {
  .home-products > .home-product:nth-last-child(2):nth-child(4n + 1):not(:first-child),
  .listing-stack > .listing-feature:nth-last-child(2):nth-child(4n + 1):not(:first-child) { grid-column-start: 2; }
}
@media (min-width: 861px) and (max-width: 1060px) {
  .feature-grid.four article:nth-child(odd) { border-left: 0; }
  .feature-grid.four article:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
/* Landscape frames use the same screenshot radius token. */
.landscape-art .hero-screen { border-radius: var(--radius); }

/* Align the first feature column with its section heading. */
.feature-grid article:first-child { padding-left: 0; }
@media (max-width: 860px) { .feature-grid article { padding-left: 0; } }
@media (min-width: 861px) and (max-width: 1060px) {
  .feature-grid.four article:nth-child(odd) { padding-left: 0; }
}

/* Shared subgrid tracks align headings, descriptions and links without fixed empty space. */
@supports (grid-template-rows: subgrid) {
  .home-products.apps-grid, .home-products.games-grid, .listing-stack { row-gap: 0; }
  .home-product, .listing-feature {
    display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0;
    /* Single column: the base .listing-feature rule defines two columns, which would squeeze the card content. */
    grid-template-columns: minmax(0, 1fr); align-items: stretch;
    align-self: stretch; height: auto; margin-bottom: 1.25rem;
  }
  .home-product > *, .listing-feature > *, .home-product-copy > *, .listing-copy > * { grid-column: 1; }
  .home-product .home-product-media, .listing-feature .listing-media { grid-row: 1; align-self: start; }
  .home-product-copy, .listing-copy { display: contents; }
  .home-product-copy .product-name, .listing-copy .product-name {
    grid-row: 2; min-width: 0; margin: 0; padding: 1.5rem 1.5rem 0.8rem;
  }
  .home-product-copy h3, .listing-copy h2 {
    grid-row: 3; min-width: 0; min-height: 0; margin: 0 0 0.7rem; padding: 0 1.5rem;
    overflow-wrap: break-word;
  }
  .home-product-copy p, .listing-copy p {
    grid-row: 4; min-width: 0; margin: 0 0 1.25rem; padding: 0 1.5rem;
    overflow-wrap: break-word;
  }
  .home-product-copy .text-link, .listing-copy .button {
    grid-row: 5; justify-self: start; align-self: end; margin: 0 1.5rem 1.5rem;
  }
}
/* Card image frames: dark tone inside dark sections; taller frame for portrait app screenshots. */
.games-home .home-product .home-product-media { background: #0a2236; }
.apps-grid .home-product .home-product-media, .apps-page .listing-feature .listing-media { aspect-ratio: 4 / 5; }
.apps-grid .home-product .home-product-media picture, .apps-page .listing-feature .listing-media picture { inset: 0.5rem; }