/* =========================================================
   base.css — loaded on EVERY page.
   Colours, fonts, reset, and the small pieces many pages share
   (type styles, buttons, underlined links, tabs).

   Breakpoints used across the theme:
     640px  (small tablets)
     768px  (tablet / desktop layout starts)
     1024px (wide desktop)
   ========================================================= */

/* ---------- Brand tokens: change a colour here and it changes everywhere ---------- */
:root {
  --plum:   #481c7a;   /* brand purple bands */
  --violet: #7547b3;   /* lighter purple cards */
  --sun:    #f9cc45;   /* brand yellow */
  --maroon: #8a0000;   /* heavy headline red */
  --red:    #a80000;   /* form button + errors */
  --lilac:  #ecebf1;   /* pale card */
  --fog:    #d9d9d9;   /* grey sections */
  --cream:  #fbe9b0;   /* menu panel */
  --ink:    #0d0d0d;   /* text */
  --paper:  #ffffff;

  --font-display: 'Archivo', 'Arial Black', sans-serif;
  --font-body:    'Lexend', 'Helvetica Neue', Arial, sans-serif;

  --radius-card: 1.75rem;
  --shadow-photo: 0 10px 30px rgba(0, 0, 0, .12);
  --ease-out: cubic-bezier(.32, .72, 0, 1);

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; text-wrap: balance; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

/* ---------- Type styles ---------- */
.heavy   { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.01em; }
.heavy-i { font-family: var(--font-display); font-weight: 900; font-style: italic; letter-spacing: -0.03em; }
.thin    { font-family: 'Lexend', sans-serif; font-weight: 200; }
.c-maroon { color: var(--maroon); }
.c-sun    { color: var(--sun); }

/* ---------- Layout helpers ---------- */
.wrap { max-width: 72rem; margin-inline: auto; }   /* centred content column */
.full-img { display: block; width: 100%; height: auto; }

/* Image fades */
.fade-b { -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); }
.fade-l { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%); mask-image: linear-gradient(to right, transparent 0%, #000 35%); }

/* ---------- Underlined text link ---------- */
.uline { position: relative; display: inline-block; padding-bottom: .35rem; }
.uline::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--maroon); transform-origin: left; transition: transform .3s ease;
}
.uline:hover::after { transform: scaleX(.6); }
.uline--dark::after { background: var(--ink); }
.uline--sun::after  { background: var(--sun); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .875rem 2.5rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
/* Solid purple pill ("Let’s talk") */
.btn--plum { background: var(--plum); border: 0; color: #fff; padding: 1rem 3.5rem; font-size: 1rem; line-height: 1.5rem; }
.btn--plum:hover { background: var(--maroon); border-color: var(--maroon); }
@media (min-width: 768px) { .btn--plum { font-size: 1.125rem; line-height: 1.75rem; } }

/* ---------- Industry filter tabs (Works + Projects pages) ---------- */
.tabs { display: flex; flex-wrap: wrap; font-weight: 600; }
.tab { padding-bottom: .35rem; text-align: left; }
.tab[aria-selected="true"] { color: var(--maroon); }
.tab[aria-selected="false"]::after { background: var(--ink); opacity: .85; }

/* ---------- Social icons (sizes are set by the part that uses them) ---------- */
.social-icon { display: block; width: 1.25rem; height: 1.25rem; transition: transform .15s; }
.social-icon:hover { transform: scale(1.1); }
.social-icon svg { width: 100%; height: 100%; }

/* ---------- Accessibility ---------- */
.sr-only, .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: .75rem; top: .75rem; z-index: 60; position: fixed; background: #fff; padding: .5rem 1rem; border-radius: .25rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}