/* ==========================================================================
   Gocca Global Services — www.gocca.in
   One stylesheet, hand-written, no build step.

   Layout of this file:
     1. Tokens          — every colour, size and space lives here
     2. Reset & base    — element defaults
     3. Layout          — container, skip link
     4. Header & nav
     5. Footer
     6. Sections        — the band wrapper every page uses
     7. Buttons
     8. Forms
     9. Home page
    10. Services page
    11. Corporate gifting page
    12. Team page
    13. 404 page

   Class names are prefixed by area (svc-, cat-, team-, footer-…) so that
   nothing collides. If you add a rule, put it in the numbered section it
   belongs to and prefix it the same way.
   ========================================================================== */

/* ============================================================ 1. TOKENS === */

:root {
  /* Ink & surface */
  --ink: #1e1e1e;
  --ink-soft: #4a4f55;
  --ink-faint: #767d85;
  --surface: #ffffff;
  --surface-alt: #f7f8fa;
  --surface-deep: #12161a;
  --line: #e3e6ea;

  /* Brand. --accent is the 2020 site's blue, kept for continuity. It is only
     ~3:1 on white, so --accent-ink is the darkened variant used for any text
     or link; --accent itself is for fills, rules and large type only. */
  --accent: #00a0dc;
  --accent-ink: #00719c;
  --accent-deep: #005c80;
  --accent-wash: #e8f6fc;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  /* Type scale. Each step grows with the viewport, so nothing needs a
     font-size media query. */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.9vw, 2.9rem);
  --step-4: clamp(2.3rem, 1.6rem + 3.2vw, 4rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1.25rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  --measure: 68ch;
  --container: 1140px;
  --radius: 10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(20, 26, 33, 0.06), 0 2px 8px rgba(20, 26, 33, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 26, 33, 0.07), 0 12px 32px rgba(20, 26, 33, 0.06);

  --header-h: 72px;

  /* The one breakpoint that matters: below this the nav collapses to a
     hamburger. It appears in several media queries — they must agree. */
}

/* ==================================================== 2. RESET & BASE === */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Stops the sticky header covering the target of an in-page #link. */
  scroll-padding-top: calc(var(--header-h) + var(--space-m));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p {
  text-wrap: pretty;
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Any list that carries a class is a layout list, not prose. Forget the class
   and you get bullets back — which is visible immediately, and therefore the
   safe direction for the mistake to fail in. */
ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================ 3. LAYOUT === */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

.container--narrow {
  max-width: 760px;
}

@media (min-width: 40em) {
  .container {
    padding-inline: var(--space-l);
  }
}

.site-main {
  flex: 1;
}

.skip-link {
  position: absolute;
  left: var(--space-m);
  top: -100px;
  z-index: 100;
  padding: 0.7rem 1.2rem;
  background: var(--surface-deep);
  color: #ffffff;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.16s ease;
}

.skip-link:focus {
  top: var(--space-m);
}

/* ==================================================== 4. HEADER & NAV === */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.brand {
  color: var(--ink);
  text-decoration: none;
  flex: none;
}

/* One nav list serves both layouts. Below 62em it drops onto its own row and
   is revealed by the toggle; above 62em it sits inline in the bar and the
   toggle is hidden. Writing the links once is the whole point — they are
   otherwise the most-duplicated markup on the site.

   Note the default: the nav is VISIBLE and the toggle is HIDDEN. Only the
   inline `.js` marker in each page's <head> flips that round. So if nav.js
   fails to load, a phone gets a plain visible list of links rather than a
   hamburger button that does nothing — which is precisely how the 2020 site
   was broken. The working state is the fallback, not the enhancement. */
.site-nav {
  display: block;
  order: 3;
  flex-basis: 100%;
  margin-inline: calc(var(--space-m) * -1);
  padding-inline: var(--space-m);
  border-top: 1px solid var(--line);
}

.nav-toggle {
  display: none;
}

.js .site-nav {
  display: none;
}

.js .nav-toggle {
  display: inline-flex;
}

/* The button's own aria-expanded drives visibility, so the accessible state
   and the visual state cannot drift apart. */
.js .nav-toggle[aria-expanded='true'] ~ .site-nav {
  display: block;
}

.nav-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-block: var(--space-xs);
}

.nav-link {
  position: relative;
  display: block;
  padding-block: var(--space-s);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.16s ease;
}

.nav-list li:last-child .nav-link {
  border-bottom: 0;
}

.nav-link:hover {
  color: var(--ink);
}

/* aria-current is both the semantics and the styling hook, so the highlight
   can never be present without the screen-reader announcement. */
.nav-link[aria-current='page'] {
  color: var(--accent-ink);
}

.nav-toggle {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--surface-alt);
}

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
}

.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Burger morphs to an X purely from aria-expanded — no extra class to sync. */
.nav-toggle[aria-expanded='true'] .burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .burger span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded='true'] .burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 62em) {
  .bar {
    flex-wrap: nowrap;
  }

  .nav-toggle,
  .js .nav-toggle {
    display: none;
  }

  .site-nav,
  .js .site-nav {
    display: block;
    order: 0;
    flex-basis: auto;
    margin-inline: 0;
    padding-inline: 0;
    border-top: 0;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-m);
    padding-block: 0;
  }

  .nav-link {
    padding-block: 0.4rem;
    font-size: var(--step--1);
    letter-spacing: 0.02em;
    border-bottom: 0;
  }

  .nav-link[aria-current='page'] {
    color: var(--ink);
  }

  .nav-link[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
  }
}

/* --- logo, used in the header and again in the footer --- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: inherit;
}

.logo-mark {
  flex: none;
}

.logo-words {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-word {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: inherit;
}

.logo-sub {
  margin-top: 0.25rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================ 5. FOOTER === */

.site-footer {
  margin-top: auto;
  padding-block: var(--space-2xl) var(--space-l);
  background: var(--surface-deep);
  color: #d9dee4;
}

.footer-top {
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand-link {
  color: #ffffff;
  text-decoration: none;
}

.footer-tagline {
  margin-top: var(--space-m);
  max-width: 34ch;
  font-size: var(--step--1);
  color: #9aa4b0;
}

.footer-col-title {
  margin-bottom: var(--space-m);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  font-size: var(--step--1);
}

.footer-link {
  color: #d9dee4;
  text-decoration: none;
}

.footer-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.footer-muted {
  color: #9aa4b0;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  padding-top: var(--space-l);
  font-size: var(--step--1);
  color: #9aa4b0;
}

@media (min-width: 46em) {
  .footer-top {
    grid-template-columns: 1.6fr 1fr 1.2fr;
  }
}

/* ========================================================== 6. SECTIONS === */

.section {
  padding-block: var(--space-2xl);
  background: var(--surface);
}

.section--alt {
  background: var(--surface-alt);
}

.section--deep {
  background: var(--surface-deep);
  color: #eef1f4;
}

.section-head {
  margin-bottom: var(--space-xl);
  max-width: var(--measure);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  margin-bottom: var(--space-s);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.section--deep .eyebrow {
  color: var(--accent);
}

/* Sized explicitly so an h1 and an h2 section heading look identical. */
.section-title {
  font-size: var(--step-3);
}

.section-lead {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}

.section--deep .section-lead {
  color: #b3bcc6;
}

/* =========================================================== 7. BUTTONS === */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent-ink);
  color: #ffffff;
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    transform 0.16s ease, color 0.16s ease;
}

.btn:hover {
  background: var(--accent-deep);
}

.btn:active {
  transform: translateY(1px);
}

.btn--secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.btn--secondary:hover {
  border-color: var(--ink-faint);
  background: var(--surface-alt);
}

/* ============================================================= 8. FORMS === */

.form {
  max-width: 680px;
  margin-inline: auto;
  padding: var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.form-grid {
  display: grid;
  gap: var(--space-m);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.form-field--wide {
  grid-column: 1 / -1;
}

.form-label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}

.form-hint {
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--ink-faint);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent-ink);
  outline: 2px solid var(--accent-wash);
  outline-offset: 0;
}

.form-textarea {
  min-height: 8rem;
  resize: vertical;
}

.form-file {
  width: 100%;
  padding: 0.6rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  font-size: var(--step--1);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.form-note {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

@media (min-width: 40em) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- WhatsApp / direct contact strip under each form --- */

.direct {
  max-width: 680px;
  margin: var(--space-l) auto 0;
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  text-align: center;
}

.direct-title {
  font-size: var(--step-0);
  font-weight: 600;
}

.direct-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-m);
  margin-top: var(--space-s);
  font-size: var(--step--1);
}

.direct-link {
  font-weight: 500;
}

/* ========================================================== 9. HOME PAGE === */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
  background:
    radial-gradient(120% 90% at 85% 0%, var(--accent-wash) 0%, transparent 60%),
    var(--surface);
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.hero-strapline {
  margin-bottom: var(--space-m);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.hero-title {
  max-width: 16ch;
}

.hero-lead {
  margin-top: var(--space-m);
  max-width: 54ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

.hero-art {
  display: none;
  justify-content: center;
}

.hero-art-img {
  width: 100%;
  max-width: 400px;
}

@media (min-width: 56em) {
  .hero-inner {
    grid-template-columns: 1.25fr 0.75fr;
  }

  .hero-art {
    display: flex;
  }
}

.svc-cards {
  display: grid;
  gap: var(--space-m);
  margin: 0;
}

.svc-card {
  padding: var(--space-l);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.svc-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-m);
  border-radius: var(--radius);
  background: var(--accent-wash);
  color: var(--accent-ink);
}

.svc-card-title {
  margin-bottom: var(--space-xs);
}

.svc-card-body {
  color: var(--ink-soft);
}

.more-link {
  margin-top: var(--space-l);
  font-weight: 500;
}

.more-link a {
  text-decoration: none;
}

.more-link a:hover {
  text-decoration: underline;
}

@media (min-width: 46em) {
  .svc-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  /* The home page shows two business lines rather than three services. */
  .svc-cards--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

.svc-card .more-link {
  margin-top: var(--space-m);
  font-size: var(--step--1);
}

.values {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  margin: 0;
}

.value {
  padding-top: var(--space-m);
  border-top: 2px solid var(--accent);
}

.value-title {
  margin-bottom: var(--space-xs);
}

.value-body {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

@media (min-width: 40em) {
  .values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .values {
    grid-template-columns: repeat(4, 1fr);
  }
}

.quotes {
  display: grid;
  gap: var(--space-l);
  margin: 0;
}

.quote {
  height: 100%;
  margin: 0;
  padding: var(--space-l);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
}

.quote-text {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: #ffffff;
}

.quote-by {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: var(--space-m);
  font-size: var(--step--1);
}

.quote-name {
  font-weight: 600;
  color: #ffffff;
}

.quote-context {
  color: #9aa4b0;
}

.mission {
  margin-top: var(--space-xl);
  text-align: center;
  font-size: var(--step-1);
  color: var(--accent);
}

@media (min-width: 46em) {
  .quotes {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cta {
  text-align: center;
}

.cta-title {
  margin-bottom: var(--space-s);
}

.cta-body {
  margin-bottom: var(--space-l);
  font-size: var(--step-1);
  color: var(--ink-soft);
}

/* ==================================================== 10. SERVICES PAGE === */

.svc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin: 0;
}

.svc-item {
  display: grid;
  gap: var(--space-m);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--line);
}

.svc-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

/* The 220px column holds the number, the icon and the diagram. */
.svc-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.svc-marker {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.svc-diagram {
  width: 100%;
  max-width: 220px;
}

.svc-number {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent-ink);
}

.svc-title {
  margin-bottom: var(--space-xs);
  font-size: var(--step-2);
}

.svc-summary {
  max-width: var(--measure);
  font-size: var(--step-1);
  color: var(--ink);
}

.svc-detail {
  margin-top: var(--space-m);
  max-width: var(--measure);
  color: var(--ink-soft);
}

/* A pointer to the gifting page, not a copy of it — the full detail lives at
   /corporate-gifting/ and the two should not compete for the same searches. */
.gift-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0 0 var(--space-m);
}

.gift-summary li {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--step--1);
}

.gift-summary-facts {
  margin-bottom: var(--space-l);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

.cta-body--tight {
  margin-block: var(--space-s) var(--space-l);
  font-size: var(--step-0);
  color: var(--ink-soft);
}

@media (min-width: 48em) {
  .svc-item {
    grid-template-columns: 220px 1fr;
    gap: var(--space-xl);
  }

  .svc-marker {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
  }
}

/* ============================================ 11. CORPORATE GIFTING PAGE === */

/* The section heading block ends with a --space-xl margin, which is right
   before a grid of cards but too much before a pair of buttons. */
.gift-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: calc(var(--space-xl) / -2);
}

.cat-grid {
  display: grid;
  gap: var(--space-m);
  margin: 0;
}

.cat-grid > li {
  display: flex;
}

/* Two across, never four. Each card carries a ~180-character blurb and five
   chips; at four tracks the text column drops to ~188px, which stacks every
   chip on its own line and turns the cards into skyscrapers. */
@media (min-width: 46em) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.cat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Photo slot. Drop an <img class="cat-image"> in place of the icon span when
   you have product photography; it crops to this same 3:2 box. */
.cat-visual {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background: linear-gradient(150deg, var(--accent-wash), var(--surface-alt));
  border-bottom: 1px solid var(--line);
}

.cat-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Illustration sitting inside the tile, with room to breathe. A real photo
   would use .cat-image above and fill the slot edge to edge instead. */
.cat-art {
  width: 100%;
  height: 100%;
  padding: var(--space-m);
  object-fit: contain;
}

.cat-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-l);
}

.cat-name {
  margin-bottom: var(--space-xs);
  font-size: var(--step-1);
}

.cat-blurb {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: auto 0 0;
  padding-top: var(--space-m);
}

.chip {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* The three things a buyer asks in their first email, answered before they have
   to ask. Sits directly under the category grid, where they have just worked out
   which one they are. */
.facts {
  display: grid;
  gap: var(--space-m);
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-l);
  border-top: 1px solid var(--line);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.fact-value {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--accent-ink);
}

.fact-label {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

@media (min-width: 46em) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l) var(--space-xl);
  }
}

@media (min-width: 68em) {
  .facts {
    grid-template-columns: repeat(4, 1fr);
  }
}

.steps {
  display: grid;
  gap: var(--space-l);
  margin: 0;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  align-items: start;
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
}

.step-number {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--accent);
}

.step-title {
  margin-bottom: var(--space-2xs);
}

.step-body {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

@media (min-width: 46em) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l) var(--space-xl);
  }
}

/* Three, not four — there are five steps, and four tracks strand the fifth
   alone on a second row at quarter width. Three gives 3 + 2. */
@media (min-width: 72em) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.reasons {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  margin: 0;
}

.reason {
  padding-top: var(--space-m);
  border-top: 2px solid var(--accent);
}

.reason-title {
  margin-bottom: var(--space-xs);
  color: #ffffff;
}

.reason-body {
  font-size: var(--step--1);
  color: #b3bcc6;
}

@media (min-width: 44em) {
  .reasons {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68em) {
  .reasons {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ======================================================== 12. TEAM PAGE === */

.team-grid {
  display: grid;
  gap: var(--space-xl);
  margin: 0;
}

.team-member {
  max-width: 420px;
}

/* Monogram tile. Replace with <img class="portrait"> when there is a real
   photo; it crops to the same 7:9 box. */
.portrait {
  width: 100%;
  aspect-ratio: 7 / 9;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--surface-alt);
}

/* Initials over a watermark of the mark itself, so a member without a photo
   still reads as a designed tile rather than a gap waiting to be filled. */
.portrait--monogram {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background:
    url('/assets/illustrations/mark-watermark.svg') center / 62% no-repeat,
    linear-gradient(150deg, var(--accent-wash), var(--surface-alt));
}

/* The open role. Dashed rather than solid so it reads as a vacancy, not a
   person we forgot to name. */
.team-vacancy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  width: 100%;
  aspect-ratio: 7 / 9;
  padding: var(--space-l);
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--ink-faint);
}

.team-vacancy-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px dashed var(--line);
  border-radius: 50%;
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1;
  color: var(--accent-ink);
}

.team-vacancy-text {
  font-size: var(--step--1);
}

.portrait-initials {
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
}

.team-name {
  margin-top: var(--space-m);
  font-size: var(--step-1);
}

.team-role {
  margin-top: var(--space-2xs);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.team-bio {
  margin-top: var(--space-s);
  color: var(--ink-soft);
}

@media (min-width: 44em) {
  .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* --- contact detail rows, used on Work With Us --- */

.contact-title {
  margin-bottom: var(--space-m);
  font-size: var(--step-2);
}

.contact-details {
  margin: 0;
}

.contact-row {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--line);
}

.contact-row dt {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.contact-row dd {
  margin: 0;
}

@media (min-width: 36em) {
  .contact-row {
    grid-template-columns: 160px 1fr;
    gap: var(--space-m);
    align-items: baseline;
  }
}

/* ========================================================= 13. 404 PAGE === */

.nf {
  padding-block: var(--space-xl);
  text-align: center;
}

.ty-mark {
  width: 108px;
  margin-inline: auto;
  margin-bottom: var(--space-m);
}

.nf-code {
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accent);
}

.nf-title {
  margin-top: var(--space-s);
  font-size: var(--step-2);
}

.nf-body {
  margin-block: var(--space-m) var(--space-l);
  color: var(--ink-soft);
}