/* Trapezia — shared styles.
   Static site, no build step: this file is served as-is and is the only
   stylesheet. Keep it dependency-free.

   Deliberately dark-only. The brand mark is a star cluster on a night
   field, and there is no light variant of it, so the site commits to the
   dark look rather than inverting into something the logo contradicts.
   Colours are set explicitly and do not depend on prefers-color-scheme. */

:root {
  --bg: #070b14;
  --bg-glow: #0d1626;
  --surface: #0d1421;
  --surface-2: #111a2a;
  --text: #e8eef8;
  --muted: #8e9bb3;
  --line: #1d2839;
  --line-soft: #161f2d;
  --accent: #6fb0f5;
  --accent-dim: #3d6ea8;
  --measure: 64rem;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* One soft glow high on the page, echoing the light in the mark. */
  background-image:
    radial-gradient(70rem 40rem at 50% -12rem, var(--bg-glow) 0%, transparent 70%);
  background-repeat: no-repeat;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}

a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: #9ccbff; text-decoration-thickness: 2px; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  padding: 0.75rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; z-index: 10; }

/* ---- masthead (inner pages) ---- */

.masthead { border-bottom: 1px solid var(--line-soft); padding: 1.5rem 0; }

.masthead .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.75rem 1.5rem;
}

.masthead-mark {
  margin: 0;
  font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
}
.masthead-mark a {
  color: var(--text); text-decoration: none;
  display: flex; align-items: center; gap: 0.7rem;
}
.masthead-mark a:hover { color: #fff; }
.masthead-mark img { width: 26px; height: auto; display: block; }

.masthead-context {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
}

/* ---- hero (home) ---- */

.hero { padding: clamp(4rem, 12vh, 7.5rem) 0 clamp(3rem, 8vh, 5rem); text-align: center; }

.hero-mark {
  width: clamp(140px, 26vw, 200px); height: auto;
  margin: 0 auto 2.25rem; display: block;
}

.wordmark {
  margin: 0;
  font-size: clamp(1.75rem, 6.5vw, 3.25rem);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* offset the trailing tracking so it reads centred */
  text-transform: uppercase;
  color: #fff;
}

.tagline {
  margin: 1.1rem 0 0;
  font-size: clamp(0.6875rem, 1.9vw, 0.8125rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.hero-rule {
  width: 4rem; height: 1px; margin: 2.75rem auto;
  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
  border: 0;
}

.lede {
  margin: 0 auto;
  max-width: 30ch;
  font-size: clamp(1.25rem, 3.6vw, 1.75rem);
  line-height: 1.4;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede-sub {
  margin: 1.5rem auto 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 1rem;
}

/* ---- page head (inner pages) ---- */

.page-head { padding: clamp(3rem, 9vh, 5rem) 0 clamp(1.5rem, 4vh, 2.5rem); }

.page-title {
  margin: 0;
  font-size: clamp(1.875rem, 5.5vw, 2.75rem);
  line-height: 1.15; font-weight: 300;
  letter-spacing: -0.015em;
  color: #fff;
}

.page-standfirst {
  margin: 1.25rem 0 0; max-width: 48ch;
  font-size: 1.0625rem; color: var(--muted); text-wrap: pretty;
}

.effective {
  margin: 1.75rem 0 0;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-dim);
}

/* ---- sections ---- */

section { padding: clamp(3rem, 7vh, 4.5rem) 0; }

.section-label {
  margin: 0 0 2rem;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-dim);
}

.rule { border: 0; border-top: 1px solid var(--line-soft); margin: 0; }

/* ---- practice areas ---- */

.areas {
  display: grid; grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 12px; overflow: hidden;
}

.area { background: var(--surface); padding: 1.75rem; }

.area h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem; font-weight: 600; letter-spacing: 0.01em;
  color: #fff;
}

.area p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* Two even columns once there is room, so four cards read as a 2x2
   block rather than 3 + 1 orphan. */
@media (min-width: 46rem) {
  .areas { grid-template-columns: 1fr 1fr; }
  .area { padding: 2.25rem; }
}

/* ---- feature panels (sub-products, on the home page) ---- */

.panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 46rem) {
  .panels { grid-template-columns: 1fr 1fr; }
}

.panels .panel { max-width: none; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  max-width: 46rem;
}

.panel h3 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem; font-weight: 400; letter-spacing: 0.01em;
  color: #fff;
}

.panel p { margin: 0 0 1rem; color: var(--muted); }
.panel p:last-child { margin-bottom: 0; }

.panel-status {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
}

/* ---- prose ---- */

.prose { max-width: 64ch; }
.prose p { margin: 0 0 1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin: 0 0 0.5rem; }
.prose li:last-child { margin-bottom: 0; }
.prose .note { color: var(--muted); font-size: 0.9375rem; }

/* ---- legal documents ---- */

.legal { max-width: 70ch; }

.legal h2 {
  margin: 2.75rem 0 0.875rem;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em;
  color: #fff;
}
.legal h2:first-child { margin-top: 0; }

.legal p { margin: 0 0 1rem; }
.legal ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal li { margin: 0 0 0.5rem; }
.legal li:last-child { margin-bottom: 0; }
.legal p:last-child, .legal ul:last-child { margin-bottom: 0; }
.legal strong { color: #fff; }

.legal .attribution {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8125rem; color: var(--muted);
}

/* ---- callout ---- */

.callout {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-dim);
  border-radius: 0 8px 8px 0;
  max-width: 70ch;
}
.callout p { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.callout p:last-child { margin-bottom: 0; }

.callout-label {
  display: block; margin: 0 0 0.5rem;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}

/* ---- contact ---- */

.contact-address {
  margin: 0;
  font-size: clamp(1.125rem, 3.2vw, 1.375rem);
  letter-spacing: 0.01em;
}

/* ---- footer ---- */

footer {
  border-top: 1px solid var(--line-soft);
  padding: 2rem 0 3rem;
  color: var(--muted); font-size: 0.875rem;
}

footer .wrap {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 0.75rem 1.5rem;
}

footer p { margin: 0; }

.footer-nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.footer-nav a { color: var(--muted); }
.footer-nav a:hover { color: var(--accent); }