/* Bigg site stylesheet: design-system tokens (George Butler, Oct 2026) plus the shared site chrome.
   Page-specific layout lives in /css/pages/<page>.css, generated from the prototype. */

@font-face { font-family: "Inter Tight"; src: url("/fonts/inter-tight-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Raleway"; src: url("/fonts/raleway-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Raleway"; src: url("/fonts/raleway-latin-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---- tokens/colors.css ---- */
/* ============================================================
   Bigg — Color tokens
   Synced to the site build (Oct 2026). Every name below is one the
   build reads via var(); legacy names are kept so nothing breaks.
   Deep navy foundations, coral for action, flat "pops" for tiles,
   CTA grounds, team backdrops and the page wipe. Never gradients.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --bigg-navy: #011038;          /* hero scrim base, footer, dark sections */
  --bigg-ink: #010027;           /* headings, body text, text on every pop and on coral */
  --bigg-coral: #FF7A66;         /* primary CTA, selected filter/pagination, credit-chip dot */

  /* ---- Pops of colour ---- */
  --bigg-green: #26B58A;
  --bigg-blue: #48A0DB;
  --bigg-lilac: #DABBF7;
  --bigg-mauve: #CDC5DD;
  --bigg-periwinkle: #8EA7D2;

  /* ---- Coral scale (derived) ---- */
  --bigg-coral-hover: #F96A54;   /* primary button hover */
  --bigg-coral-soft: #FFE4DE;

  /* ---- Neutrals ---- */
  --bigg-white: #FFFFFF;
  --bigg-paper: #F4F5F7;         /* alternating section ground */
  --bigg-cloud: #EAECF1;
  --bigg-line: #DDE1E9;          /* hairlines on white */
  --bigg-slate: #5B6478;         /* eyebrows + muted copy on light (5.9:1) */
  --bigg-navy-70: rgba(1, 16, 56, 0.70);
  --bigg-navy-55: rgba(1, 16, 56, 0.55);

  /* ---- Ink alphas used in the build (on white / paper) ---- */
  --bigg-ink-82: rgba(1, 0, 39, 0.82);   /* article body copy */
  --bigg-ink-70: rgba(1, 0, 39, 0.70);   /* eyebrows on periwinkle (5.0:1) */
  --bigg-ink-60: rgba(1, 0, 39, 0.60);   /* eyebrows on white/paper (5.6:1 / 5.4:1) */
  --bigg-ink-26: rgba(1, 0, 39, 0.26);   /* hairlines on periwinkle */
  --bigg-ink-08: rgba(1, 0, 39, 0.08);   /* current-page highlight, mobile menu on light */
  --bigg-ink-06: rgba(1, 0, 39, 0.06);   /* count badges in filter chips */

  /* ---- On-dark text ---- */
  --bigg-on-navy: #FFFFFF;
  --bigg-on-navy-82: rgba(255, 255, 255, 0.82); /* nav links over the hero (12.5:1) */
  --bigg-on-navy-dim: rgba(255, 255, 255, 0.72); /* footer links (9.8:1) */
  --bigg-on-navy-faint: rgba(255, 255, 255, 0.14); /* hairlines + secondary button border on navy */
  --bigg-on-navy-12: rgba(255, 255, 255, 0.12);  /* current-page highlight, mobile menu over hero */

  /* ---- Hero photo protection ---- */
  --hero-scrim: rgba(1, 16, 56, 0.45);           /* flat scrim over every photo hero */
  --hero-chip-bg: rgba(255, 255, 255, 0.12);     /* blurred credit chip */

  /* ---- Service colours (one per discipline; drives tags, final CTA, page wipe) ---- */
  --service-seo: var(--bigg-coral);
  --service-ai-search: var(--bigg-coral);        /* sibling of SEO */
  --service-paid: var(--bigg-green);
  --service-web: var(--bigg-blue);
  --service-social: var(--bigg-mauve);
  --service-content: var(--bigg-lilac);
  --service-email: var(--bigg-periwinkle);
  /* Non-service pages: Services overview = lilac, About / Learn / articles = mauve, Our Work / case studies = periwinkle */

  /* ---- CTA grounds (final CTA block). Green and blue are tinted so ink passes AA; the rest are flat. ---- */
  --cta-ground-coral: var(--bigg-coral);                                   /* 8.0:1 */
  --cta-ground-green: color-mix(in srgb, var(--bigg-green) 55%, white);    /* 12.1:1 */
  --cta-ground-blue: color-mix(in srgb, var(--bigg-blue) 55%, white);      /* 11.8:1 */
  --cta-ground-lilac: var(--bigg-lilac);                                   /* 12.1:1 */
  --cta-ground-mauve: var(--bigg-mauve);                                   /* 12.3:1 */
  --cta-ground-periwinkle: var(--bigg-periwinkle);                         /* 8.4:1 */
  /* Lighter tints used for chips, pills and banded rows: 20%, 22%, 34%, 42% and 62% of the pop over white */

  /* ---- Page wipe ---- */
  --wipe-default: var(--bigg-mauve);   /* fallback when the destination has no service colour */

  /* ---- Semantic / status ---- */
  --bigg-error: #C2412D;               /* contact form validation text (5.1:1 on white) */

  /* ============ Semantic aliases ============ */
  --surface-page: var(--bigg-white);
  --surface-muted: var(--bigg-paper);  /* every other section */
  --surface-card: var(--bigg-white);
  --surface-dark: var(--bigg-navy);
  --surface-inverse: var(--bigg-navy);

  --text-heading: var(--bigg-ink);
  --text-body: var(--bigg-ink);
  --text-muted: var(--bigg-slate);
  --text-on-dark: var(--bigg-on-navy);
  --text-on-dark-muted: var(--bigg-on-navy-dim);

  --accent: var(--bigg-coral);
  --accent-hover: var(--bigg-coral-hover);
  --accent-contrast: var(--bigg-ink);  /* text on coral is ink, never white (white on coral is 2.6:1) */

  --border-subtle: var(--bigg-line);
  --border-on-dark: var(--bigg-on-navy-faint);

  --eyebrow: var(--bigg-slate);
  --focus-ring: var(--bigg-blue);      /* 6.5:1 on navy; 2.9:1 on white, see readme §7 */
}

/* ---- tokens/typography.css ---- */
/* ============================================================
   Bigg — Typography tokens
   Synced to the site build (Oct 2026).
   Display + UI: Inter Tight (variable). Body: Raleway.
   Inter Tight renders heavier than Helvetica Neue at the same
   nominal weight, so the build remaps: headings 700 → 660,
   UI 700 → 640, UI 500 → 470 (see base.css for the rules).
   Headlines are set tight and end with a full stop in the
   heading colour (coral is no longer used on punctuation).
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Inter Tight", Helvetica, Arial, sans-serif;
  --font-ui: "Inter Tight", Helvetica, Arial, sans-serif;
  --font-body: "Raleway", Helvetica, Arial, sans-serif;

  /* ---- Weights ---- */
  --fw-thin: 100;    /* @kind font */
  --fw-light: 300;   /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500;  /* @kind font */
  --fw-bold: 700;    /* @kind font */
  --heading-wght: 660;   /* rendered weight of every heading authored as 700 */
  --fw-ui-bold: 640;     /* rendered weight of UI text authored as 700 */
  --fw-ui-medium: 470;   /* rendered weight of UI text authored as 500 */

  /* ---- Type scale as built ---- */
  --fs-hero: clamp(3.4rem, 10.5vw, 11rem);              /* page H1 over the photo hero, nowrap */
  --fs-hero-m: clamp(2.6rem, 14vw, 3.6rem);             /* mobile H1 */
  --fs-section: clamp(3rem, 6.5vw, 5.75rem);            /* section H2 */
  --fs-section-m: clamp(2.3rem, 10vw, 3.1rem);          /* mobile section H2 */
  --fs-intro: clamp(2.6rem, 6vw, 5.75rem);              /* intro H2 under the hero */
  --fs-cta: clamp(3rem, min(7.2vw, 12vh), 7.5rem);      /* final CTA H2 */
  --fs-cta-m: clamp(38px, 7vh, 48px);
  --fs-card-title: clamp(1.3rem, 1.8vw, 1.6rem);        /* card / accordion H3 */
  --fs-card-title-lg: clamp(1.45rem, 2.2vw, 2rem);
  --fs-team-name: clamp(1.35rem, 2vw, 1.75rem);
  --fs-h3: 1.25rem;
  --fs-body-article: 17.5px;                            /* article paragraphs */
  --fs-lead: clamp(17px, 1.5vw, 21px);                  /* hero sub-copy */
  --fs-ui: 15px;                                        /* nav links, buttons (md) */
  --fs-ui-sm: 14px;
  --fs-eyebrow: 12px;                                   /* uppercase kickers */
  --fs-chip: 12px;

  /* ---- Legacy scale (kept for the bundle components) ---- */
  --fs-display-xl: clamp(3.25rem, 6.2vw, 5.5rem); /* @kind font */
  --fs-display-lg: clamp(2.5rem, 4.4vw, 4rem); /* @kind font */
  --fs-display-md: clamp(2rem, 3vw, 2.75rem); /* @kind font */
  --fs-heading: 1.5rem;    /* @kind font */
  --fs-subheading: 1.25rem;/* @kind font */
  --fs-body-lg: 1.125rem;  /* @kind font */
  --fs-body: 1rem;         /* @kind font */
  --fs-body-sm: 0.9375rem; /* @kind font */
  --fs-caption: 0.8125rem; /* @kind font */

  /* ---- Line heights ---- */
  --lh-display: 0.95;    /* hero + section headings */
  --lh-cta: 0.94;
  --lh-tight: 1.02;   /* @kind font */
  --lh-snug: 1.1;     /* card titles */
  --lh-normal: 1.5;   /* @kind font */
  --lh-lead: 1.55;    /* hero sub-copy */
  --lh-body: 1.6;     /* paragraphs */
  --lh-relaxed: 1.65; /* @kind font */
  --lh-article: 1.7;  /* article paragraphs */

  /* ---- Letter spacing ---- */
  --ls-hero: -0.045em;    /* H1 and final CTA H2 */
  --ls-section: -0.035em; /* section H2 */
  --ls-card: -0.025em;    /* H3 */
  --ls-display: -0.02em;  /* @kind font */
  --ls-heading: -0.01em;  /* @kind font */
  --ls-normal: 0;         /* @kind font */
  --ls-eyebrow: 0.14em;   /* uppercase kickers and chips */
  --ls-pill: 0.1em;       /* approach-card pills */

  /* ============ Semantic aliases ============ */
  --text-display-family: var(--font-display);
  --text-body-family: var(--font-body);
}

/* ---- tokens/layout.css ---- */
/* ============================================================
   Bigg — Spacing, radius, shadow, layout, breakpoint and motion tokens
   Synced to the site build (Oct 2026).
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7.5rem;   /* 120 */

  /* ---- Radii ---- */
  --radius-xs: 2px;     /* menu bars, progress tracks */
  --radius-sm: 8px;
  --radius-menu: 12px;  /* mobile menu rows, article markers */
  --radius-md: 14px;
  --radius-chip: 18px;  /* nav dropdown pill, mobile menu panel */
  --radius-lg: 20px;    /* standard card */
  --radius-tile: 22px;  /* service tiles, article covers */
  --radius-xl: 28px;    /* feature cards, problem cards */
  --radius-2xl: 36px;   /* team / pricing / hero panels */
  --radius-pill: 999px; /* buttons, tags, chips, filters, pagination */
  --radius-circle: 50%; /* step numbers, timeline nodes, FAQ toggles, chip dot */

  /* Overlap card (page body rising over the pinned hero) */
  --overlap-radius: 36px;

  /* ---- Shadows (soft, diffuse, low-contrast) ---- */
  --shadow-xs: 0 1px 2px rgba(1, 16, 56, 0.06);
  --shadow-sm: 0 4px 14px rgba(1, 16, 56, 0.06);      /* resting cards */
  --shadow-md: 0 12px 30px rgba(1, 16, 56, 0.08);     /* feature cards */
  --shadow-lg: 0 24px 60px rgba(1, 16, 56, 0.12);
  --shadow-card-hover: 0 18px 38px rgba(1, 16, 56, 0.14);
  --shadow-card-hover-lg: 0 20px 44px rgba(1, 16, 56, 0.16);
  --shadow-float: 0 12px 30px rgba(1, 16, 56, 0.20);  /* skip link, dropdown panel, chips over photos */
  --shadow-overlap: 0 -20px 80px rgba(1, 16, 56, 0.08), 0 28px 80px rgba(1, 16, 56, 0.16);
  --ring-muted: 0 0 0 5px var(--surface-muted);       /* timeline node halo */

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --container-pad-mobile: 20px;   /* mobile files; nothing sits closer than 16px to the edge */
  --section-gap: clamp(4rem, 8vw, 7.5rem);
  --section-gap-m: 48px;
  --header-pad: 16px 20px;        /* mobile header */
  --tap-min: 44px;                /* minimum tap target (mobile) */

  /* ---- Breakpoints (informational: custom properties cannot drive @media) ----
     ≥ 1024px  desktop: text nav + Services dropdown + "Get a proposal" pill
     768–1023  tablet: burger menu replaces the text nav; desktop layout rules continue
     ≤ 767px   mobile: burger menu, single column (mobile files are designed at 390px)
     1240px    content max width                                                      */
  --bp-mobile: 767px;
  --bp-tablet: 1023px;
  --bp-desktop: 1024px;
  --bp-content: 1240px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */ /* the house curve: reveals, hovers, accordions */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);/* @kind other */
  --ease-wipe-in: cubic-bezier(0.76, 0, 0.24, 1);   /* page wipe cover */
  --ease-wipe-out: cubic-bezier(0.16, 1, 0.3, 1);   /* page wipe reveal */
  --dur-fast: 140ms;  /* @kind other */ /* press */
  --dur-base: 240ms;  /* @kind other */ /* hover, nav highlight slide, arrow nudge */
  --dur-slow: 420ms;  /* @kind other */
  --dur-accordion: 340ms;      /* max-height; opacity 240ms ease */
  --dur-expand: 450ms;         /* grid-template-rows on numbered service cards */
  --dur-reveal: 900ms;         /* section reveal: opacity + transform */
  --reveal-rise: 50px;         /* reveal start offset */
  --reveal-threshold: 0.9;     /* reveal when top < 90% of viewport height */
  --reveal-safety: 1500ms;     /* everything shows after this regardless */
  --stagger-hero: 85ms;        /* hero headline words */
  --stagger-cards: 90ms;       /* grouped cards */
  --hero-word-rise: 115%;      /* words start translated down by their own height */
  --dur-wipe-in: 380ms;
  --dur-wipe-out: 520ms;
  --wipe-nav-at: 240ms;        /* navigation starts this far into the cover */
  --scroll-lerp: 0.1;          /* smooth scroll: 10% per frame ≈ 1.1s settle, wheel only */
  --hero-dwell: 5000ms;        /* homepage slider */
}

@media (max-width: 1023px) { :root { --overlap-radius: 24px; } }
@media (max-width: 639px)  { :root { --overlap-radius: 16px; } }

/* ---- tokens/base.css ---- */
/* ============================================================
   Bigg — base rules shared by every page of the build.
   These are the only global rules in the system; everything else
   is inline. Mirrors what the build applies via ds-base.js and
   per-page <style>, so a consumer linking styles.css gets the
   same rendering.
   ============================================================ */

/* Weight remaps: Inter Tight is heavier than Helvetica Neue at the same nominal weight. */
[style*="font-family: var(--font-display)"][style*="font-weight: 700"] { font-weight: var(--heading-wght) !important; }
[style*="font-family: var(--font-ui)"][style*="font-weight: 700"] { font-weight: var(--fw-ui-bold) !important; }
[style*="font-family: var(--font-ui)"][style*="font-weight: 500"] { font-weight: var(--fw-ui-medium) !important; }

/* Focus: visible ring on keyboard focus only. */
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 3px; }

/* Reduced motion: reveals show immediately; eased scrolling, the page wipe and the headline draw are skipped in JS. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-bigg-wipe] { display: none !important; }
}

/* ---- weight mapping (was injected by the prototype's ds-base.js) ---- */
:root:root { --font-display: "Inter Tight", Helvetica, Arial, sans-serif; --font-ui: "Inter Tight", Helvetica, Arial, sans-serif; --font-body: "Raleway", Helvetica, Arial, sans-serif; --heading-wght: 660; }
[style*="font-family: var(--font-display)"][style*="font-weight: 700"] { font-weight: var(--heading-wght) !important; }
[style*="font-family: var(--font-ui)"][style*="font-weight: 700"] { font-weight: 640 !important; }
[style*="font-family: var(--font-ui)"][style*="font-weight: 500"] { font-weight: 470 !important; }

/* ---- motion: content is visible without JavaScript; the .js class opts into the entrance states ---- */
.js [data-reveal]:not([data-shown]) { opacity: 0; transform: translateY(var(--ry, 50px)); }
.js [data-hero="word"] { opacity: 0; transform: translateY(115%); }
.js [data-hero="sub"] { opacity: 0; transform: translateY(14px); }
.js.hero-in [data-hero] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not([data-shown]), .js [data-hero] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- focus ring: #2F8AC9 clears 3:1 on white (the prototype's #48A0DB measured 2.9:1) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #2F8AC9 !important; outline-offset: 3px; }

/* ---- burger menu (1023px and below) ---- */
.bm-burger, .bm-panel { display: none; }
@media (max-width: 1023px) {
  header[data-bigg-header] { position: relative; }
  header[data-bigg-header] > div > :not(:first-child) { display: none !important; }
  .bm-burger { display: flex; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 61; flex-direction: column; justify-content: center; align-items: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; color: inherit; }
  .bm-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 240ms var(--ease-out, ease), opacity 200ms ease; }
  .bm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .bm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .bm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .bm-panel { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 60; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 320ms cubic-bezier(0.22,1,0.36,1), opacity 220ms ease; }
  .bm-panel.is-open { opacity: 1; max-height: calc(100vh - 90px) !important; overflow-y: auto; }
  .bm-card { margin: 0 16px 8px; padding: 10px; border-radius: 18px; display: flex; flex-direction: column; gap: 2px; background: rgba(1,16,56,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); }
  .bm-light .bm-card { background: #fff; border-color: var(--border-subtle, #E3E6EC); box-shadow: 0 18px 40px rgba(1,16,56,.16); }
  .bm-card a, .bm-svc-toggle { font-family: var(--font-ui); font-weight: 640; font-size: 15px; color: #fff; text-decoration: none; border-radius: 12px; }
  .bm-light .bm-card a, .bm-light .bm-svc-toggle { color: var(--bigg-ink); }
  .bm-card > a, .bm-row > a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; }
  .bm-card a[aria-current="page"], .bm-row a[aria-current="page"] { background: rgba(255,255,255,.12); }
  .bm-light .bm-card a[aria-current="page"] { background: var(--surface-muted, #F2F4F8); }
  .bm-row { display: flex; gap: 2px; }
  .bm-row > a { flex: 1; }
  .bm-svc-toggle { flex: 0 0 48px; min-height: 44px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
  .bm-svc-toggle svg { transition: transform 240ms ease; }
  .bm-svc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .bm-svc { overflow: hidden; max-height: 0; transition: max-height 320ms cubic-bezier(0.22,1,0.36,1); }
  .bm-svc a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; font-weight: 600; font-size: 14.5px; }
  .bm-svc a.bm-sub { padding-left: 28px; }
  .bm-svc-list { padding: 0 0 6px 12px; display: flex; flex-direction: column; gap: 2px; }
  .bm-card a.bm-cta { justify-content: center; margin-top: 8px; background: var(--bigg-coral, #FF7A66); color: var(--bigg-ink, #011038); border-radius: 999px; }
}
@media (prefers-reduced-motion: reduce) { .bm-panel, .bm-svc, .bm-burger span { transition: none; } }

.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- "From the blog" strip on service pages (partials/blog-strip.njk) ---- */
.bs { background: #fff; }
.bs-shell { max-width: 1400px; margin: 0 auto; padding: var(--section-gap) var(--container-pad) 0; }
.bs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 44px); }
.bs-eyebrow { margin: 0 0 14px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow, var(--text-muted)); }
.bs-h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-section); letter-spacing: -0.035em; line-height: .95; color: var(--bigg-ink); }
.bs-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-ui); font-weight: 700; font-size: 15px; color: var(--bigg-ink); text-decoration: none; }
.bs-all:hover span { transform: translateX(3px); }
.bs-all span { transition: transform var(--dur-base) var(--ease-out); }
.bs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bs-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform 260ms var(--ease-out), box-shadow 260ms ease; }
.bs-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.bs-cover { aspect-ratio: 16 / 9; background: var(--c); padding: 20px 22px; display: flex; align-items: flex-start; }
.bs-cat { display: inline-flex; padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .55); font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bigg-ink); }
.bs-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px; }
.bs-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; color: var(--bigg-ink); text-wrap: balance; }
.bs-meta { margin: auto 0 0; font-family: var(--font-ui); font-size: 13px; color: var(--text-muted); }
@media (max-width: 1023px) { .bs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bs-grid > :nth-child(3) { display: none; } }
@media (max-width: 767px) {
  .bs-shell { padding: 48px 20px 0; }
  .bs-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 24px; }
  .bs-h { font-size: var(--fs-section-m, 2.6rem); }
  .bs-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bs-grid > :nth-child(3) { display: flex; }
}