/*!
 * BecksBeauty Framework — core
 * A lightweight responsive CSS framework for Becks Beauty.
 * Responsee-compatible class API, modern internals, zero dependencies.
 * MIT License
 *
 * Contents:
 *   1. Design tokens
 *   2. Reset
 *   3. Typography
 *   4. Grid system
 *   5. Tables
 *   6. Class library (helpers)
 *   7. Print
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* Becks Beauty is light-only — there is deliberately no dark theme and no
     light/dark toggle. `color-scheme: light` keeps native controls (select
     menus, scrollbars, date pickers) light even when the visitor's operating
     system is set to dark, which is the piece a plain palette can't cover. */
  color-scheme: light;

  /* Brand ------------------------------------------------------------- */
  /* Purple and off-black charcoal on a light ground. Every value below carries
     white text at 4.5:1 or better where it is used as a background, so the
     palette can be moved around without re-checking contrast each time. */
  --bb-primary: #5b3d87;
  --bb-primary-dark: #3e2a5e;
  --bb-primary-light: #b9a3d9;  /* Decorative only — too pale to carry text. */
  --bb-accent: #2a2430;
  --bb-accent-dark: #171320;
  --bb-accent-light: #d8cbe8;   /* For use on a dark scrim, e.g. .hero-eyebrow. */

  /* Neutrals ----------------------------------------------------------- */
  /* Tinted very slightly towards violet so greys sit with the purple rather
     than reading as a cold second palette next to it. */
  --bb-sand: #f7f4fa;           /* Pale lilac — the alternate page background. */
  --bb-gray-50: #faf9fb;
  --bb-gray-100: #f4f2f7;
  --bb-gray-200: #e8e4ee;
  --bb-gray-300: #d5cfe0;
  --bb-gray-400: #948ba2;
  --bb-gray-500: #837a91;
  --bb-gray-600: #635a70;
  --bb-gray-700: #4a4356;
  --bb-gray-800: #332e3d;
  --bb-gray-900: #1c1823;

  /* Status ------------------------------------------------------------- */
  /* Status colours stay recognisably green / amber / red / blue: they carry
     meaning, so they are the one place the brand purple does not reach. The
     red is a true red rather than the rose it used to be, so nothing on the
     site reads as pink. */
  --bb-success: #3a7a58;
  --bb-warning: #8a6212;
  --bb-danger: #a32a20;
  --bb-info: #45608f;

  /* Semantic ------------------------------------------------------------ */
  --bb-bg: #ffffff;
  --bb-bg-alt: var(--bb-sand);
  --bb-surface: #ffffff;
  --bb-surface-alt: var(--bb-gray-100);
  --bb-text: #221d2b;
  --bb-text-muted: var(--bb-gray-600);
  --bb-text-invert: #ffffff;
  --bb-border: var(--bb-gray-200);
  --bb-border-strong: var(--bb-gray-300);
  /* Links point at --bb-primary, not --bb-primary-light: the light rose is a
     decorative tint and does not clear 4.5:1 on white. */
  --bb-link: var(--bb-primary);
  --bb-link-hover: var(--bb-accent-dark);
  --bb-focus: var(--bb-primary);

  /* Typography ---------------------------------------------------------- */
  --bb-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* A serif display face for headings against the sans body text. ui-serif
     resolves to New York on Apple platforms and falls back cleanly
     elsewhere, so the studio gets an editorial look with no web font to
     download and nothing to break under a strict CSP. */
  --bb-font-heading: ui-serif, "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, Cambria, "Times New Roman", serif;
  /* The wordmark is deliberately NOT --bb-font-heading. A geometric sans —
     circular bowls, uniform stroke, no contrast — is the fashion-house
     wordmark look, and it needs wide tracking and capitals to work. Kept as
     its own token so the header, the footer and any future page set the brand
     name identically. */
  --bb-font-wordmark: Futura, "Avenir Next", "Century Gothic",
    "Twentieth Century", ui-sans-serif, system-ui, sans-serif;
  --bb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --bb-text-base: 1rem;
  --bb-leading: 1.65;
  --bb-leading-tight: 1.2;

  /* Layout -------------------------------------------------------------- */
  --bb-max: 1140px;
  --bb-page-padding: 1.25rem;
  --bb-gutter: 1.25rem;

  /* Space scale --------------------------------------------------------- */
  --bb-space-1: 0.25rem;
  --bb-space-2: 0.5rem;
  --bb-space-3: 0.75rem;
  --bb-space-4: 1rem;
  --bb-space-5: 1.5rem;
  --bb-space-6: 2rem;
  --bb-space-7: 3rem;
  --bb-space-8: 4rem;

  /* Radius, shadow, motion ---------------------------------------------- */
  --bb-radius: 6px;
  --bb-radius-lg: 12px;
  --bb-radius-pill: 999px;
  /* Shadows are tinted violet rather than blue-grey, and pitched lighter than
     a general-purpose framework would, to suit a pale scheme. */
  --bb-shadow-1: 0 1px 2px rgba(45, 30, 66, 0.07),
    0 1px 3px rgba(45, 30, 66, 0.05);
  --bb-shadow-2: 0 4px 6px -2px rgba(45, 30, 66, 0.07),
    0 12px 20px -8px rgba(45, 30, 66, 0.12);
  --bb-shadow-3: 0 8px 12px -4px rgba(45, 30, 66, 0.09),
    0 24px 48px -12px rgba(45, 30, 66, 0.18);
  --bb-speed: 180ms;
  --bb-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bb-z-nav: 100;
  --bb-z-panel: 200;
  --bb-z-modal: 300;
  --bb-z-tooltip: 400;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--bb-font);
  font-size: var(--bb-text-base);
  line-height: var(--bb-leading);
  color: var(--bb-text);
  background-color: var(--bb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--bb-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color var(--bb-speed) var(--bb-ease);
}

a:hover {
  color: var(--bb-link-hover);
}

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

hr {
  border: 0;
  border-top: 1px solid var(--bb-border);
  margin: var(--bb-space-6) 0;
}

/* Keep anchor targets clear of a sticky header. Set --bb-scroll-offset to the
   header's height on :root when using .top-nav-sticky. */
:where([id]) {
  scroll-margin-top: var(--bb-scroll-offset, 0px);
}

::selection {
  background: var(--bb-accent);
  color: #fff;
}

@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;
  }
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bb-font-heading);
  line-height: var(--bb-leading-tight);
  font-weight: 600;
  color: var(--bb-text);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem); letter-spacing: -0.01em; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.0625rem; }
h6 { font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.08em; }

p,
ul:not([class]),
ol:not([class]),
dl,
blockquote,
figure,
pre,
table {
  margin-block: 0 var(--bb-space-4);
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--bb-text-muted);
}

small,
.text-small {
  font-size: 0.875rem;
}

.text-tiny {
  font-size: 0.78125rem;
}

strong,
b {
  font-weight: 600;
}

blockquote {
  border-left: 3px solid var(--bb-accent);
  padding: var(--bb-space-2) 0 var(--bb-space-2) var(--bb-space-5);
  font-size: 1.125rem;
  color: var(--bb-text-muted);
}

blockquote cite {
  display: block;
  margin-top: var(--bb-space-3);
  font-size: 0.875rem;
  font-style: normal;
  color: var(--bb-text);
}

code,
kbd,
samp {
  font-family: var(--bb-font-mono);
  font-size: 0.875em;
}

code {
  background: var(--bb-surface-alt);
  border: 1px solid var(--bb-border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

pre {
  background: var(--bb-surface-alt);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  padding: var(--bb-space-4);
  overflow-x: auto;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
}

/* Section heading with a rule underneath — used across the site. */
.heading-rule {
  padding-bottom: var(--bb-space-3);
  border-bottom: 2px solid var(--bb-accent);
  display: inline-block;
}

/* ==========================================================================
   4. Grid system
   --------------------------------------------------------------------------
   Responsee-compatible: .line is the row, .margin adds gutters, columns use
   s- / m- / l- / xl- / xxl- prefixes over 12 columns.

   Breakpoints (min-width, mobile first):
     s   0px       phone
     m   481px     large phone / small tablet
     l   769px     tablet / small laptop
     xl  1141px    desktop
     xxl 1367px    large desktop
   ========================================================================== */

.size-960  { --bb-max: 960px; }
.size-1140 { --bb-max: 1140px; }
.size-1280 { --bb-max: 1280px; }
.size-1520 { --bb-max: 1520px; }
.size-full { --bb-max: 100%; }

.line,
.margin,
.margin2x {
  /* Reset span/offset so unclassed children fill the row and nested rows
     don't inherit their parent column's width. */
  --bb-span: 12;
  --bb-offset: 0;
  display: flex;
  flex-wrap: wrap;
}

.line {
  /* Explicit width so a .line used as a flex item (inside .hero, say)
     fills its parent instead of shrink-wrapping its content. */
  width: 100%;
  max-width: var(--bb-max);
  margin-inline: auto;
  padding-inline: var(--bb-page-padding);
}

/* Nested rows inherit padding from their column, so drop their own. */
.line .line {
  padding-inline: 0;
  max-width: none;
}

.line-full {
  max-width: none;
}

.line > *,
.margin > *,
.margin2x > * {
  flex: 0 0 auto;
  width: calc(var(--bb-span) / 12 * 100%);
  margin-left: calc(var(--bb-offset) / 12 * 100%);
  min-width: 0;
}

/* Gutter wrappers. Negative inline margin keeps columns flush with .line. */
.margin,
.margin2x {
  width: 100%;
  margin-inline: calc(var(--bb-gutter) / -2);
  row-gap: var(--bb-gutter);
}

.margin > *,
.margin2x > * {
  padding-inline: calc(var(--bb-gutter) / 2);
}

.margin2x {
  --bb-gutter: 2.5rem;
}

/* --- Columns: s (0px and up) --------------------------------------------- */
.s-1  { --bb-span: 1; }
.s-2  { --bb-span: 2; }
.s-3  { --bb-span: 3; }
.s-4  { --bb-span: 4; }
.s-5  { --bb-span: 5; }
.s-6  { --bb-span: 6; }
.s-7  { --bb-span: 7; }
.s-8  { --bb-span: 8; }
.s-9  { --bb-span: 9; }
.s-10 { --bb-span: 10; }
.s-11 { --bb-span: 11; }
.s-12 { --bb-span: 12; }
.s-five { --bb-span: 2.4; }

.s-offset-1  { --bb-offset: 1; }
.s-offset-2  { --bb-offset: 2; }
.s-offset-3  { --bb-offset: 3; }
.s-offset-4  { --bb-offset: 4; }
.s-offset-5  { --bb-offset: 5; }
.s-offset-6  { --bb-offset: 6; }
.s-offset-7  { --bb-offset: 7; }
.s-offset-8  { --bb-offset: 8; }
.s-offset-9  { --bb-offset: 9; }
.s-offset-10 { --bb-offset: 10; }
.s-offset-11 { --bb-offset: 11; }
.s-offset-0  { --bb-offset: 0; }

/* --- Columns: m (481px and up) ------------------------------------------- */
@media (min-width: 481px) {
  .m-1  { --bb-span: 1; }
  .m-2  { --bb-span: 2; }
  .m-3  { --bb-span: 3; }
  .m-4  { --bb-span: 4; }
  .m-5  { --bb-span: 5; }
  .m-6  { --bb-span: 6; }
  .m-7  { --bb-span: 7; }
  .m-8  { --bb-span: 8; }
  .m-9  { --bb-span: 9; }
  .m-10 { --bb-span: 10; }
  .m-11 { --bb-span: 11; }
  .m-12 { --bb-span: 12; }
  .m-five { --bb-span: 2.4; }

  .m-offset-1  { --bb-offset: 1; }
  .m-offset-2  { --bb-offset: 2; }
  .m-offset-3  { --bb-offset: 3; }
  .m-offset-4  { --bb-offset: 4; }
  .m-offset-5  { --bb-offset: 5; }
  .m-offset-6  { --bb-offset: 6; }
  .m-offset-7  { --bb-offset: 7; }
  .m-offset-8  { --bb-offset: 8; }
  .m-offset-9  { --bb-offset: 9; }
  .m-offset-10 { --bb-offset: 10; }
  .m-offset-11 { --bb-offset: 11; }
  .m-offset-0  { --bb-offset: 0; }
}

/* --- Columns: l (769px and up) ------------------------------------------- */
@media (min-width: 769px) {
  .l-1  { --bb-span: 1; }
  .l-2  { --bb-span: 2; }
  .l-3  { --bb-span: 3; }
  .l-4  { --bb-span: 4; }
  .l-5  { --bb-span: 5; }
  .l-6  { --bb-span: 6; }
  .l-7  { --bb-span: 7; }
  .l-8  { --bb-span: 8; }
  .l-9  { --bb-span: 9; }
  .l-10 { --bb-span: 10; }
  .l-11 { --bb-span: 11; }
  .l-12 { --bb-span: 12; }
  .l-five { --bb-span: 2.4; }

  .l-offset-1  { --bb-offset: 1; }
  .l-offset-2  { --bb-offset: 2; }
  .l-offset-3  { --bb-offset: 3; }
  .l-offset-4  { --bb-offset: 4; }
  .l-offset-5  { --bb-offset: 5; }
  .l-offset-6  { --bb-offset: 6; }
  .l-offset-7  { --bb-offset: 7; }
  .l-offset-8  { --bb-offset: 8; }
  .l-offset-9  { --bb-offset: 9; }
  .l-offset-10 { --bb-offset: 10; }
  .l-offset-11 { --bb-offset: 11; }
  .l-offset-0  { --bb-offset: 0; }
}

/* --- Columns: xl (1141px and up) ----------------------------------------- */
@media (min-width: 1141px) {
  .xl-1  { --bb-span: 1; }
  .xl-2  { --bb-span: 2; }
  .xl-3  { --bb-span: 3; }
  .xl-4  { --bb-span: 4; }
  .xl-5  { --bb-span: 5; }
  .xl-6  { --bb-span: 6; }
  .xl-7  { --bb-span: 7; }
  .xl-8  { --bb-span: 8; }
  .xl-9  { --bb-span: 9; }
  .xl-10 { --bb-span: 10; }
  .xl-11 { --bb-span: 11; }
  .xl-12 { --bb-span: 12; }
  .xl-five { --bb-span: 2.4; }

  .xl-offset-1  { --bb-offset: 1; }
  .xl-offset-2  { --bb-offset: 2; }
  .xl-offset-3  { --bb-offset: 3; }
  .xl-offset-4  { --bb-offset: 4; }
  .xl-offset-5  { --bb-offset: 5; }
  .xl-offset-6  { --bb-offset: 6; }
  .xl-offset-7  { --bb-offset: 7; }
  .xl-offset-8  { --bb-offset: 8; }
  .xl-offset-9  { --bb-offset: 9; }
  .xl-offset-10 { --bb-offset: 10; }
  .xl-offset-11 { --bb-offset: 11; }
  .xl-offset-0  { --bb-offset: 0; }
}

/* --- Columns: xxl (1367px and up) ---------------------------------------- */
@media (min-width: 1367px) {
  .xxl-1  { --bb-span: 1; }
  .xxl-2  { --bb-span: 2; }
  .xxl-3  { --bb-span: 3; }
  .xxl-4  { --bb-span: 4; }
  .xxl-5  { --bb-span: 5; }
  .xxl-6  { --bb-span: 6; }
  .xxl-7  { --bb-span: 7; }
  .xxl-8  { --bb-span: 8; }
  .xxl-9  { --bb-span: 9; }
  .xxl-10 { --bb-span: 10; }
  .xxl-11 { --bb-span: 11; }
  .xxl-12 { --bb-span: 12; }
  .xxl-five { --bb-span: 2.4; }

  .xxl-offset-1  { --bb-offset: 1; }
  .xxl-offset-2  { --bb-offset: 2; }
  .xxl-offset-3  { --bb-offset: 3; }
  .xxl-offset-4  { --bb-offset: 4; }
  .xxl-offset-5  { --bb-offset: 5; }
  .xxl-offset-6  { --bb-offset: 6; }
  .xxl-offset-7  { --bb-offset: 7; }
  .xxl-offset-8  { --bb-offset: 8; }
  .xxl-offset-9  { --bb-offset: 9; }
  .xxl-offset-10 { --bb-offset: 10; }
  .xxl-offset-11 { --bb-offset: 11; }
  .xxl-offset-0  { --bb-offset: 0; }
}

/* --- Row & column alignment ---------------------------------------------- */
.align-top     { align-items: flex-start; }
.align-middle  { align-items: center; }
.align-bottom  { align-items: flex-end; }
.align-stretch { align-items: stretch; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.reverse { flex-direction: row-reverse; }

/* Centre a column horizontally within its row. */
.center {
  margin-inline: auto;
}

/* --- Auto grid ------------------------------------------------------------
   For card lists where a fixed column count isn't wanted. */
.grid {
  display: grid;
  gap: var(--bb-gutter);
  grid-template-columns: repeat(auto-fill, minmax(var(--bb-grid-min, 260px), 1fr));
}

.grid-min-200 { --bb-grid-min: 200px; }
.grid-min-320 { --bb-grid-min: 320px; }
.grid-min-400 { --bb-grid-min: 400px; }

/* ==========================================================================
   5. Tables
   ========================================================================== */

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table th,
.table td {
  padding: var(--bb-space-3) var(--bb-space-4);
  border-bottom: 1px solid var(--bb-border);
  vertical-align: top;
}

.table thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bb-text-muted);
  border-bottom: 2px solid var(--bb-border-strong);
  white-space: nowrap;
}

.table tfoot td {
  font-weight: 600;
  border-top: 2px solid var(--bb-border-strong);
  border-bottom: 0;
}

.table-striped tbody tr:nth-child(odd) {
  background: var(--bb-surface-alt);
}

.table-hover tbody tr {
  transition: background var(--bb-speed) var(--bb-ease);
}

.table-hover tbody tr:hover {
  background: var(--bb-surface-alt);
}

.table-bordered,
.table-bordered th,
.table-bordered td {
  border: 1px solid var(--bb-border);
}

.table-compact th,
.table-compact td {
  padding: var(--bb-space-2) var(--bb-space-3);
}

.table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Horizontal scroll container — wide tables must never scroll the page. */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--bb-radius);
}

/* Stacked table on phones: each row becomes a card, using data-label. */
@media (max-width: 480px) {
  .table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .table-stack tbody tr {
    display: block;
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    margin-bottom: var(--bb-space-3);
    padding: var(--bb-space-2);
  }
  .table-stack tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--bb-space-4);
    border: 0;
    padding: var(--bb-space-2);
  }
  .table-stack tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--bb-text-muted);
  }
}

/* ==========================================================================
   6. Class library (helpers)
   ========================================================================== */

/* --- Spacing: named (Responsee style) ------------------------------------ */
.padding               { padding: var(--bb-space-5); }
.padding-2x            { padding: var(--bb-space-7); }
.padding-top           { padding-top: var(--bb-space-5); }
.padding-bottom        { padding-bottom: var(--bb-space-5); }
.padding-left          { padding-left: var(--bb-space-5); }
.padding-right         { padding-right: var(--bb-space-5); }
.padding-top-bottom    { padding-block: var(--bb-space-5); }
.padding-left-right    { padding-inline: var(--bb-space-5); }
.padding-top-bottom-2x { padding-block: var(--bb-space-7); }
.no-padding            { padding: 0; }

.margin-top    { margin-top: var(--bb-space-5); }
.margin-bottom { margin-bottom: var(--bb-space-5); }
.margin-left   { margin-left: var(--bb-space-5); }
.margin-right  { margin-right: var(--bb-space-5); }
.no-margin     { margin: 0; }

/* --- Spacing: numeric scale (1–8, matches --bb-space-*) ------------------- */
.p-0 { padding: 0; }
.p-1 { padding: var(--bb-space-1); }
.p-2 { padding: var(--bb-space-2); }
.p-3 { padding: var(--bb-space-3); }
.p-4 { padding: var(--bb-space-4); }
.p-5 { padding: var(--bb-space-5); }
.p-6 { padding: var(--bb-space-6); }
.p-7 { padding: var(--bb-space-7); }
.p-8 { padding: var(--bb-space-8); }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--bb-space-1); }
.pt-2 { padding-top: var(--bb-space-2); }
.pt-3 { padding-top: var(--bb-space-3); }
.pt-4 { padding-top: var(--bb-space-4); }
.pt-5 { padding-top: var(--bb-space-5); }
.pt-6 { padding-top: var(--bb-space-6); }
.pt-7 { padding-top: var(--bb-space-7); }
.pt-8 { padding-top: var(--bb-space-8); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--bb-space-1); }
.pb-2 { padding-bottom: var(--bb-space-2); }
.pb-3 { padding-bottom: var(--bb-space-3); }
.pb-4 { padding-bottom: var(--bb-space-4); }
.pb-5 { padding-bottom: var(--bb-space-5); }
.pb-6 { padding-bottom: var(--bb-space-6); }
.pb-7 { padding-bottom: var(--bb-space-7); }
.pb-8 { padding-bottom: var(--bb-space-8); }

.py-0 { padding-block: 0; }
.py-3 { padding-block: var(--bb-space-3); }
.py-4 { padding-block: var(--bb-space-4); }
.py-5 { padding-block: var(--bb-space-5); }
.py-6 { padding-block: var(--bb-space-6); }
.py-7 { padding-block: var(--bb-space-7); }
.py-8 { padding-block: var(--bb-space-8); }

.px-0 { padding-inline: 0; }
.px-3 { padding-inline: var(--bb-space-3); }
.px-4 { padding-inline: var(--bb-space-4); }
.px-5 { padding-inline: var(--bb-space-5); }
.px-6 { padding-inline: var(--bb-space-6); }

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--bb-space-1); }
.mt-2 { margin-top: var(--bb-space-2); }
.mt-3 { margin-top: var(--bb-space-3); }
.mt-4 { margin-top: var(--bb-space-4); }
.mt-5 { margin-top: var(--bb-space-5); }
.mt-6 { margin-top: var(--bb-space-6); }
.mt-7 { margin-top: var(--bb-space-7); }
.mt-8 { margin-top: var(--bb-space-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--bb-space-1); }
.mb-2 { margin-bottom: var(--bb-space-2); }
.mb-3 { margin-bottom: var(--bb-space-3); }
.mb-4 { margin-bottom: var(--bb-space-4); }
.mb-5 { margin-bottom: var(--bb-space-5); }
.mb-6 { margin-bottom: var(--bb-space-6); }
.mb-7 { margin-bottom: var(--bb-space-7); }
.mb-8 { margin-bottom: var(--bb-space-8); }

/* Vertical rhythm for full-width page sections. */
.section    { padding-block: var(--bb-space-7); }
.section-lg { padding-block: var(--bb-space-8); }

@media (min-width: 769px) {
  .section    { padding-block: var(--bb-space-8); }
  .section-lg { padding-block: 6rem; }
}

/* --- Text ---------------------------------------------------------------- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.text-nowrap    { white-space: nowrap; }
.text-balance   { text-wrap: balance; }
.text-thin      { font-weight: 300; }
.text-normal    { font-weight: 400; }
.text-medium    { font-weight: 500; }
.text-bold      { font-weight: 600; }
.text-heavy     { font-weight: 700; }
.text-italic    { font-style: italic; }
.text-mono      { font-family: var(--bb-font-mono); }
.text-tabular   { font-variant-numeric: tabular-nums; }

.text-size-10 { font-size: 0.625rem; }
.text-size-12 { font-size: 0.75rem; }
.text-size-14 { font-size: 0.875rem; }
.text-size-16 { font-size: 1rem; }
.text-size-20 { font-size: 1.25rem; }
.text-size-24 { font-size: 1.5rem; }
.text-size-30 { font-size: 1.875rem; }
.text-size-40 { font-size: 2.5rem; }
.text-size-60 { font-size: 3.75rem; }

/* Clamp copy to n lines. */
.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* --- Colour -------------------------------------------------------------- */
.text-primary { color: var(--bb-primary); }
.text-accent  { color: var(--bb-accent); }
.text-muted   { color: var(--bb-text-muted); }
.text-white   { color: #fff; }
.text-dark    { color: var(--bb-gray-900); }
.text-success { color: var(--bb-success); }
.text-warning { color: var(--bb-warning); }
.text-danger  { color: var(--bb-danger); }
.text-info    { color: var(--bb-info); }

.background-primary { background-color: var(--bb-primary); color: #fff; }
.background-primary-dark { background-color: var(--bb-primary-dark); color: #fff; }
.background-accent  { background-color: var(--bb-accent); color: #fff; }
.background-sand    { background-color: var(--bb-bg-alt); }
.background-surface { background-color: var(--bb-surface); }
.background-alt     { background-color: var(--bb-surface-alt); }
.background-dark    { background-color: var(--bb-gray-900); color: #fff; }
.background-white   { background-color: #fff; color: var(--bb-gray-900); }
.background-none    { background: none; }

/* Invert link and heading colours inside dark blocks. */
.background-primary :is(h1, h2, h3, h4, h5, h6),
.background-primary-dark :is(h1, h2, h3, h4, h5, h6),
.background-accent :is(h1, h2, h3, h4, h5, h6),
.background-dark :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

.background-primary a:not(.button),
.background-primary-dark a:not(.button),
.background-dark a:not(.button) {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* --- Borders, radius, shadow --------------------------------------------- */
.bordered        { border: 1px solid var(--bb-border); }
.border-top      { border-top: 1px solid var(--bb-border); }
.border-bottom   { border-bottom: 1px solid var(--bb-border); }
.border-left     { border-left: 1px solid var(--bb-border); }
.border-right    { border-right: 1px solid var(--bb-border); }
.border-accent   { border-color: var(--bb-accent); }
.no-border       { border: 0; }

.rounded      { border-radius: var(--bb-radius); }
.rounded-lg   { border-radius: var(--bb-radius-lg); }
.rounded-pill { border-radius: var(--bb-radius-pill); }
.circle       { border-radius: 50%; }

.shadow    { box-shadow: var(--bb-shadow-1); }
.shadow-lg { box-shadow: var(--bb-shadow-2); }
.shadow-xl { box-shadow: var(--bb-shadow-3); }
.no-shadow { box-shadow: none; }

/* --- Sizing & layout ----------------------------------------------------- */
.full-width  { width: 100%; }
.full-height { height: 100%; }
.max-width-none { max-width: none; }
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.flex-column  { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-1       { flex: 1 1 0%; }
.flex-auto    { flex: 1 1 auto; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.items-center { align-items: center; }
.ml-auto      { margin-left: auto; }
.mr-auto      { margin-right: auto; }

.gap-1 { gap: var(--bb-space-1); }
.gap-2 { gap: var(--bb-space-2); }
.gap-3 { gap: var(--bb-space-3); }
.gap-4 { gap: var(--bb-space-4); }
.gap-5 { gap: var(--bb-space-5); }
.gap-6 { gap: var(--bb-space-6); }

.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; top: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Media that fills its box without distortion. */
.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3  { aspect-ratio: 4 / 3; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-1-1  { aspect-ratio: 1 / 1; }

/* --- Visibility ---------------------------------------------------------- */
.hide { display: none !important; }

@media (max-width: 480px)  { .hide-s  { display: none !important; } }
@media (min-width: 481px) and (max-width: 768px)  { .hide-m  { display: none !important; } }
@media (min-width: 769px) and (max-width: 1140px) { .hide-l  { display: none !important; } }
@media (min-width: 1141px) { .hide-xl { display: none !important; } }

/* Show only at a given size. */
@media (min-width: 481px) { .show-s-only { display: none !important; } }
@media (max-width: 768px) { .show-l-up   { display: none !important; } }
@media (min-width: 769px) { .show-m-down { display: none !important; } }

/* Available to screen readers only. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element on every page. */
.skip-link {
  position: absolute;
  left: var(--bb-space-4);
  top: -100%;
  z-index: calc(var(--bb-z-modal) + 1);
  background: var(--bb-primary);
  color: #fff;
  padding: var(--bb-space-3) var(--bb-space-4);
  border-radius: 0 0 var(--bb-radius) var(--bb-radius);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* ==========================================================================
   7. Print
   ========================================================================== */

@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
  .top-nav,
  .panel,
  .no-print,
  .carousel-control,
  .carousel-dots {
    display: none !important;
  }
  .line {
    max-width: none;
    padding-inline: 0;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
  .card,
  .table {
    break-inside: avoid;
  }
}