/* ==========================================================================
   Vibra Stone Capital Ltd — Design System
   Company number 17235796
   --------------------------------------------------------------------------
   No external requests. No third-party scripts. No web fonts loaded over the
   network — system stacks only, so there are no cookies and no consent banner
   is required at launch. Replace with self-hosted WOFF2 if you licence a
   typeface later; the variables below are the only thing that needs to change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --------------------------------------------------------------------
     Colour — sampled directly from Logo_Vibra Stone Capital.png.
     --c-bg-deep and --c-on-dark-muted are the logo's own values.
     Every pairing below passes WCAG AA (verified 7 Aug 2026, see README).
     No gradients, no bevels, no chrome. The logo's colour, not its finish.
     -------------------------------------------------------------------- */
  --c-bg:            #f7f6fa;  /* off-white, cooled with a trace of violet   */
  --c-bg-alt:        #eeecf4;
  --c-bg-deep:       #0f0c18;  /* the logo ground at its corners, sampled    */
  --c-bg-deep-2:     #171327;

  /* The colour of the logo artwork's immediate surround, measured on the
     perimeter of the crop. The header and footer use exactly this value so
     the logo tile dissolves into them — which is why the PNG needs no
     transparency and shows no halo. Do not adjust it independently of
     logo-mark.png; they are a matched pair. */
  --c-brand-ground:  #1c172a;
  --c-ink:           #14121c;
  --c-ink-soft:      #403b4e;
  --c-muted:         #645e73;
  --c-line:          #dad6e2;
  --c-line-soft:     #e6e3ee;
  --c-accent:        #4c3a73;  /* the group violet, desaturated to be sober  */
  --c-accent-hover:  #382a57;
  --c-on-dark:       #edebf2;
  --c-on-dark-muted: #b4b4cc;  /* the logo's silver-lilac, sampled           */

  /* Placeholder marker — deliberately ugly so it cannot ship by accident */
  --c-tbc-bg:        #fff4d6;
  --c-tbc-line:      #b8860b;
  --c-tbc-ink:       #6b4e00;

  /* Type */
  --f-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
             Georgia, "Times New Roman", serif;
  --f-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --f-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale */
  --t-xs:   0.78rem;
  --t-sm:   0.9rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.125rem, 0.5vw + 1rem, 1.3rem);
  --t-lg:   clamp(1.35rem, 1vw + 1.1rem, 1.75rem);
  --t-xl:   clamp(1.7rem, 2vw + 1.2rem, 2.5rem);
  --t-2xl:  clamp(2.1rem, 3.4vw + 1.1rem, 3.6rem);
  --t-3xl:  clamp(2.5rem, 5vw + 1rem, 4.5rem);

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout */
  --w-container: 1140px;
  --w-prose: 68ch;
  --w-narrow: 44rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --radius: 2px;
  --border: 1px solid var(--c-line);
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--s-5); max-width: var(--w-prose); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--c-muted); }

ul, ol { margin: 0 0 var(--s-5); padding-left: 1.25rem; max-width: var(--w-prose); }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: var(--border);
  margin: var(--s-8) 0;
}

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

::selection { background: var(--c-accent); color: var(--c-on-dark); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

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

.container--narrow { max-width: var(--w-narrow); }

.section { padding-block: clamp(var(--s-8), 9vw, var(--s-10)); }
.section--tight { padding-block: clamp(var(--s-7), 6vw, var(--s-9)); }
.section--alt { background: var(--c-bg-alt); }
.section--deep { background: var(--c-bg-deep); color: var(--c-on-dark); }
.section--deep h2, .section--deep h3 { color: var(--c-on-dark); }
.section--deep p { color: var(--c-on-dark-muted); }
.section + .section--alt,
.section--alt + .section { border-top: 1px solid var(--c-line-soft); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--c-accent);
  color: var(--c-on-dark);
  padding: var(--s-3) var(--s-5);
  text-decoration: none;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* --------------------------------------------------------------------------
   4. Typographic helpers
   -------------------------------------------------------------------------- */

/* Brand signature: a short violet rule before every eyebrow. This, the mark
   and the palette are the whole visual identity. Nothing else is needed. */
.eyebrow {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--s-5);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 2px;
  background: var(--c-accent);
}
.section--deep .eyebrow { color: var(--c-on-dark-muted); }
.section--deep .eyebrow::before { background: var(--c-on-dark-muted); }

.lead {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 58ch;
}
.section--deep .lead { color: var(--c-on-dark-muted); }

.small { font-size: var(--t-sm); color: var(--c-muted); }

.measure { max-width: var(--w-prose); }

/* --------------------------------------------------------------------------
   5. Header & navigation
   -------------------------------------------------------------------------- */

/* The header is dark because the logo is. Its background is the logo's own
   surround colour, so the artwork sits on the page natively. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-brand-ground);
  border-bottom: 1px solid rgba(237, 235, 242, 0.1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 74px;
}

/* Lockup: vector mark + typeset wordmark. The wordmark stays live text so it
   is selectable, translatable and readable by assistive technology. */
/* Lockup: the logo mark as supplied, plus a typeset wordmark. The wordmark is
   live text rather than part of the image, so it stays selectable, searchable
   and readable by assistive technology, and it does not blur on any screen. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--c-on-dark);
  white-space: nowrap;
}

.wordmark__mark {
  flex: none;
  display: block;
  width: 74px;
  height: auto;
  transition: opacity var(--transition);
}
.wordmark:hover .wordmark__mark { opacity: 0.86; }

.wordmark__text {
  font-family: var(--f-serif);
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.2;
}
.wordmark__text span {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--c-on-dark-muted);
  margin-top: 3px;
}

@media (max-width: 560px) {
  .wordmark__mark { width: 56px; }
  .wordmark__text { font-size: 0.78rem; letter-spacing: 0.14em; }
  .wordmark__text span { font-size: 0.5rem; letter-spacing: 0.18em; }
}
@media (max-width: 380px) {
  .wordmark__text span { display: none; }
}

.nav { display: flex; align-items: center; gap: var(--s-6); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--c-on-dark-muted);
  padding-block: var(--s-2);
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav__link:hover { color: var(--c-on-dark); border-bottom-color: rgba(237,235,242,0.3); }
.nav__link[aria-current="page"] { color: var(--c-on-dark); border-bottom-color: var(--c-on-dark-muted); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid rgba(237, 235, 242, 0.28);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-sm);
  font-family: inherit;
  color: var(--c-on-dark);
  cursor: pointer;
  min-height: 44px;
}
.nav__toggle:hover { border-color: var(--c-on-dark); }

/* The header CTA reverses out of the dark bar */
.site-header .btn {
  background: var(--c-on-dark);
  color: var(--c-bg-deep);
  border-color: var(--c-on-dark);
}
.site-header .btn:hover { background: #fff; border-color: #fff; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-accent);
  color: var(--c-on-dark);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.btn:active { transform: translateY(1px); }

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

.btn--on-dark { background: var(--c-on-dark); color: var(--c-bg-deep); border-color: var(--c-on-dark); }
.btn--on-dark:hover { background: #fff; border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(var(--s-8), 12vw, var(--s-10)); }
.hero h1 { max-width: 16ch; margin-bottom: var(--s-6); }
.hero .lead { max-width: 52ch; }

.hero__meta {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: var(--border);
  font-size: var(--t-sm);
  color: var(--c-muted);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   8. Grids & cards
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.split {
  display: grid;
  gap: clamp(var(--s-6), 5vw, var(--s-8));
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card {
  padding: var(--s-6);
  background: var(--c-bg);
  border: var(--border);
  border-radius: var(--radius);
}
.section--alt .card { background: var(--c-bg); }
.card h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.card p { font-size: var(--t-sm); color: var(--c-ink-soft); }

/* Numbered process list */
.steps { list-style: none; margin: 0; padding: 0; max-width: none; }
.steps li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: var(--border);
  margin: 0;
}
.steps li:last-child { border-bottom: var(--border); }
.steps__num {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--c-accent);
  padding-top: 0.35em;
}
.section--deep .steps__num { color: var(--c-on-dark-muted); }
.section--deep .steps li { border-color: rgba(237, 235, 242, 0.16); }
.section--deep .facts li { border-color: rgba(237, 235, 242, 0.16); }
.steps h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.steps p { font-size: var(--t-sm); color: var(--c-ink-soft); margin: 0; }

/* Fact list — verified register data */
.facts { list-style: none; margin: 0; padding: 0; max-width: none; }
.facts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-top: var(--border);
  margin: 0;
  font-size: var(--t-sm);
}
.facts li:last-child { border-bottom: var(--border); }
@media (min-width: 700px) {
  .facts li { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-5); align-items: baseline; }
}
.facts dt, .facts__label { color: var(--c-muted); }
.facts__value { color: var(--c-ink); }

/* Person */
.person { border-top: var(--border); padding-top: var(--s-5); }
.person h3 { font-size: var(--t-md); margin-bottom: var(--s-1); }
.person__role {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--s-4);
}
.person__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--s-5);
  background: var(--c-bg-alt);
}

/* Figure */
figure { margin: 0; }
figure img { border-radius: var(--radius); width: 100%; }
figcaption { font-size: var(--t-xs); color: var(--c-muted); margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   9. [TO BE CONFIRMED] markers
   Deliberately conspicuous. Nothing here should reach production.
   -------------------------------------------------------------------------- */

.tbc {
  display: inline;
  background: var(--c-tbc-bg);
  color: var(--c-tbc-ink);
  border: 1px dashed var(--c-tbc-line);
  border-radius: var(--radius);
  padding: 0.1em 0.4em;
  font-family: var(--f-mono);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tbc-block {
  display: block;
  background: var(--c-tbc-bg);
  color: var(--c-tbc-ink);
  border: 1px dashed var(--c-tbc-line);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: var(--s-5);
  margin-block: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: none;
}
.tbc-block strong {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.tbc-block ul { margin: var(--s-3) 0 0; max-width: none; }

/* Draft banner — remove before go-live */
.draft-banner {
  background: var(--c-tbc-line);
  color: #fff;
  text-align: center;
  padding: var(--s-3) var(--gutter);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.draft-banner a { color: #fff; }

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */

.form { max-width: 34rem; }
.field { margin-bottom: var(--s-5); }
.field label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 500;
  margin-bottom: var(--s-2);
}
.field .hint { font-size: var(--t-xs); color: var(--c-muted); margin-bottom: var(--s-2); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--s-3) var(--s-4);
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--c-ink);
  background: #fff;
  border: var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-accent); }

.field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__consent { font-size: var(--t-xs); color: var(--c-muted); margin: var(--s-5) 0; }

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

/* Footer uses the same ground as the header, so the footer logo tile
   dissolves into it exactly as the header one does. */
.site-footer {
  background: var(--c-brand-ground);
  color: var(--c-on-dark-muted);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--t-sm);
}
.site-footer a { color: var(--c-on-dark); }

.footer-mark {
  display: block;
  width: 78px;
  height: auto;
  margin-bottom: var(--s-4);
}

.site-footer__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-bottom: var(--s-7);
}
.site-footer h2 {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-on-dark);
  margin-bottom: var(--s-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s-3); }

/* Statutory trading disclosure — Companies Act 2006 s.82 */
.disclosure {
  border-top: 1px solid rgba(242, 239, 232, 0.16);
  padding-top: var(--s-5);
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--c-on-dark-muted);
  max-width: none;
}
.disclosure p { max-width: none; margin-bottom: var(--s-3); }
.disclosure p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Motion — opt-in, and never required to read the page
   -------------------------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   13. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; align-items: center; }

  .nav {
    position: absolute;
    inset: 74px 0 auto 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--c-brand-ground);
    border-bottom: 1px solid rgba(237, 235, 242, 0.12);
    padding: var(--s-4) var(--gutter) var(--s-6);
  }
  .nav[data-open="true"] { display: flex; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    padding-block: var(--s-4);
    border-bottom: 1px solid rgba(237, 235, 242, 0.12);
    font-size: var(--t-md);
  }
  .nav .btn { margin-top: var(--s-5); width: 100%; }

  .hero { padding-block: var(--s-8); }
  .steps li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .steps__num { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .nav, .btn, .draft-banner { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}