/* ==========================================================================
   BoreholeIQ — site.css

   Three-layer token architecture:
     LAYER 1 — Foundation:  raw scales (slate-50..950, slate-green-50..900,
                            slate-blue/tan/purple, rust, gold, ...).
                            Never referenced from component CSS or Razor.
     LAYER 2 — Semantic:    --biq-color-surface, --biq-color-text-primary, ...
                            What components use 99% of the time.
     LAYER 3 — Data-state:  --biq-state-field-captured, --biq-state-validated,
                            --biq-state-pending-review, --biq-state-flagged,
                            --biq-state-ai-suggested, --biq-state-locked,
                            --biq-state-superseded.
                            Color encodes provenance — never decoration.

   Universal Standing Orders 8/9/10 (CLAUDE.md) enforce this contract.
   The architecture test NoHardcodedDesignValues_OutsideTokenFile scans
   every .css / .cshtml under src/ and tests/ for raw color/size/spacing
   literals outside this file's :root block.
   ========================================================================== */

/* ==========================================================================
   Web fonts — self-hosted under /fonts. font-display: swap so the fallback
   stack renders immediately and no field tablet stalls on a paint while
   waiting for a binary that may be late on a flaky cellular connection.
   ========================================================================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/Inter-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/Inter-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
}

/* ==========================================================================
   :root — the single source of truth. Every raw value the system ever uses
   lives here. No raw color, size, or spacing literal is permitted anywhere
   else in the codebase.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       LAYER 1 — Foundation scales

       Slate is the structural neutral.  Slate green is the primary brand
       action — desaturated, gray-influenced green sitting in field-
       credibility territory rather than SaaS-coded bright tones.
       Rust is reserved for event-driven signal — flagged samples, broken
       chains, stop-the-line conditions.  Gold is for Founding Member
       recognition only — never a generic warning.
       ---------------------------------------------------------------------- */

    /* Slate — structural neutral */
    --biq-slate-50:  #f5f7fa;
    --biq-slate-100: #e8ecf2;
    --biq-slate-200: #d2d9e3;
    --biq-slate-300: #adb8c7;
    --biq-slate-400: #7f8da3;
    --biq-slate-500: #5b6a82;
    --biq-slate-600: #445166;
    --biq-slate-700: #34404f;
    --biq-slate-800: #232c38;
    --biq-slate-900: #161c25;
    --biq-slate-950: #0b0f15;

    /* Slate green — primary brand action.  Replaces the v1.0.0 teal scale
       (Session 2G.0).  See ARCHITECTURE_DECISIONS.md → Visual Design
       Language v1.0 → Palette Correction History. */
    --biq-slate-green-50:  #f0f3f1;
    --biq-slate-green-100: #d9e0db;
    --biq-slate-green-200: #b8c4ba;
    --biq-slate-green-300: #91a294;
    --biq-slate-green-400: #6a7d6f;
    --biq-slate-green-500: #5a6e5f;
    --biq-slate-green-600: #4a5d4f;
    --biq-slate-green-700: #3d5247;
    --biq-slate-green-800: #2f3f37;
    --biq-slate-green-900: #1f2a25;

    /* Slate-family accents.  Session 2G.0 added the 500/600/700 stops as
       forward-looking foundations; Session 2G.1 adds the 50/100 light
       stops because the marketing surface needs warm/cool section
       backgrounds (honesty = slate-tan-100, credibility = slate-blue-50)
       to break the green dominance. */
    --biq-slate-blue-50:    #eef1f5;
    --biq-slate-blue-100:   #d8dde6;
    --biq-slate-blue-300:   #91a0b6;
    --biq-slate-blue-500:   #5a6a7e;
    --biq-slate-blue-600:   #4a5a6e;
    --biq-slate-blue-700:   #3d4a5a;

    --biq-slate-tan-50:     #f7f4ed;
    --biq-slate-tan-100:    #ede4d2;
    --biq-slate-tan-300:    #b8a98a;
    --biq-slate-tan-500:    #8a7d5f;
    --biq-slate-tan-600:    #7a6d4f;
    --biq-slate-tan-700:    #6a5e44;

    --biq-slate-purple-500: #6a5a7e;
    --biq-slate-purple-600: #5a4a6e;
    --biq-slate-purple-700: #4a3d5a;

    /* Rust — event-driven signal (flagged / broken-chain / stop-the-line) */
    --biq-rust-500: #c75b39;
    --biq-rust-600: #a8462a;
    --biq-rust-700: #883420;

    /* Gold — Founding Member recognition only */
    --biq-gold-500: #c89b3c;
    --biq-gold-600: #a8802b;
    --biq-gold-700: #876620;

    /* Functional state hues (kept distinct from rust/gold) */
    --biq-success-500: #1f8a4c;
    --biq-success-600: #176c3a;
    --biq-info-500:    #2563d8;
    --biq-info-600:    #1d4eb0;

    /* AI-suggested — purple, deliberately distinct from the slate-green
       action color so a user never confuses an AI hint with a confirmed
       action.  Also distinct from --biq-slate-purple-*: this hue is more
       saturated, signalling "AI proposed this", whereas slate-purple is
       a muted accent reserved for forthcoming UI surfaces. */
    --biq-ai-500: #7c5cd0;
    --biq-ai-600: #6447a8;

    /* ----------------------------------------------------------------------
       LAYER 2 — Semantic surface, text, and interactive tokens

       Components reference these.  When the brand evolves we re-point
       these aliases, not the components.
       ---------------------------------------------------------------------- */

    /* Surfaces */
    --biq-color-surface:           var(--biq-slate-50);
    --biq-color-surface-raised:    #ffffff;
    --biq-color-surface-sunk:      var(--biq-slate-100);
    --biq-color-surface-inverse:   var(--biq-slate-900);

    /* Text */
    --biq-color-text-primary:    var(--biq-slate-900);
    --biq-color-text-secondary:  var(--biq-slate-700);
    --biq-color-text-muted:      var(--biq-slate-500);
    --biq-color-text-disabled:   var(--biq-slate-400);
    --biq-color-text-on-inverse: var(--biq-slate-50);
    --biq-color-text-on-action:  #ffffff;

    /* Borders / rules */
    --biq-color-border:        var(--biq-slate-200);
    --biq-color-border-strong: var(--biq-slate-300);
    --biq-color-border-focus:  var(--biq-slate-green-600);
    --biq-color-rule:          var(--biq-slate-200);

    /* Action / brand.  Hover lifts to slate-green-500 (lighter), pressed
       darkens to slate-green-700 — the locked Session 2G.0 interaction
       contract.  See ARCHITECTURE_DECISIONS.md → Visual Design Language
       v1.0 → Palette Correction History. */
    --biq-color-action:           var(--biq-slate-green-600);
    --biq-color-action-hover:     var(--biq-slate-green-500);
    --biq-color-action-pressed:   var(--biq-slate-green-700);
    --biq-color-action-soft:      var(--biq-slate-green-100);
    --biq-color-action-on:        #ffffff;

    /* Functional */
    --biq-color-success:        var(--biq-success-500);
    --biq-color-success-soft:   #dcefe2;
    --biq-color-info:           var(--biq-info-500);
    --biq-color-info-soft:      #dbe5f7;
    --biq-color-warning:        var(--biq-rust-500);
    --biq-color-warning-soft:   #f5dccf;
    --biq-color-danger:         var(--biq-rust-600);
    --biq-color-danger-strong:  var(--biq-rust-700);
    --biq-color-danger-soft:    #f5d5c7;

    /* Founding Member */
    --biq-color-fm:        var(--biq-gold-500);
    --biq-color-fm-strong: var(--biq-gold-700);
    --biq-color-fm-soft:   #f3e6c4;

    /* Focus ring — rgba mirrors --biq-slate-green-500 #5a6e5f.  Updated
       Session 2G.0 alongside the action-color repoint. */
    --biq-focus-ring: 0 0 0 3px rgba(90, 110, 95, 0.35);

    /* ----------------------------------------------------------------------
       LAYER 3 — Data-state tokens

       Color carries provenance.  Components that render evidential records
       MUST reference these by name — never sprinkle rust on a "warning"
       that is actually an info banner, never tint a row gold to mean
       "important."  See FSE_UI.md → Color-as-Meaning.
       ---------------------------------------------------------------------- */

    --biq-state-field-captured:    var(--biq-slate-green-600);
    --biq-state-field-captured-bg: var(--biq-slate-green-100);

    --biq-state-validated:    var(--biq-success-500);
    --biq-state-validated-bg: #dcefe2;

    --biq-state-pending-review:    var(--biq-info-500);
    --biq-state-pending-review-bg: #dbe5f7;

    --biq-state-flagged:    var(--biq-rust-600);
    --biq-state-flagged-bg: #f5d5c7;

    --biq-state-ai-suggested:    var(--biq-ai-500);
    --biq-state-ai-suggested-bg: #e3dbf5;

    --biq-state-locked:    var(--biq-slate-700);
    --biq-state-locked-bg: var(--biq-slate-100);

    --biq-state-superseded:    var(--biq-slate-400);
    --biq-state-superseded-bg: var(--biq-slate-50);

    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */

    --biq-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --biq-font-mono: "JetBrains Mono", Consolas, "Courier New", monospace;

    /* Type scale — modular, 1.125 ratio, anchored at 16px body */
    --biq-fs-xs:   0.75rem;     /* 12 — captions, microcopy */
    --biq-fs-sm:   0.875rem;    /* 14 — secondary, table cells */
    --biq-fs-md:   1rem;        /* 16 — body baseline */
    --biq-fs-lg:   1.125rem;    /* 18 — emphasized body */
    --biq-fs-xl:   1.375rem;    /* 22 — section heading */
    --biq-fs-2xl:  1.75rem;     /* 28 — page heading */
    --biq-fs-3xl:  2.25rem;     /* 36 — display */
    --biq-fs-display: 4rem;     /* 64 — statistic display (Session 2G.3
                                   pricing-card prominent count). Sits
                                   well above the type scale because the
                                   stat block is a single-glance number. */

    --biq-fw-regular:  400;
    --biq-fw-medium:   500;
    --biq-fw-semibold: 600;
    --biq-fw-bold:     700;

    --biq-lh-tight:  1.2;
    --biq-lh-snug:   1.35;
    --biq-lh-normal: 1.5;
    --biq-lh-loose:  1.7;

    --biq-tracking-tight:  -0.01em;
    --biq-tracking-normal: 0;
    --biq-tracking-wide:   0.04em;

    /* ----------------------------------------------------------------------
       Spacing — 4px base, geometric.  Use only these.
       ---------------------------------------------------------------------- */

    --biq-space-0:  0;
    --biq-space-1:  0.25rem;   /* 4  */
    --biq-space-2:  0.5rem;    /* 8  */
    --biq-space-3:  0.75rem;   /* 12 */
    --biq-space-4:  1rem;      /* 16 */
    --biq-space-5:  1.5rem;    /* 24 */
    --biq-space-6:  2rem;      /* 32 */
    --biq-space-7:  3rem;      /* 48 */
    --biq-space-8:  4rem;      /* 64 */
    --biq-space-9:  6rem;      /* 96 */

    /* ----------------------------------------------------------------------
       Radius
       ---------------------------------------------------------------------- */

    --biq-radius-xs:   2px;
    --biq-radius-sm:   4px;
    --biq-radius-md:   8px;
    --biq-radius-lg:   14px;
    --biq-radius-xl:   24px;
    --biq-radius-pill: 999px;

    /* ----------------------------------------------------------------------
       Shadow / elevation
       ---------------------------------------------------------------------- */

    --biq-shadow-xs: 0 1px 1px rgba(11, 15, 21, 0.04);
    --biq-shadow-sm: 0 1px 2px rgba(11, 15, 21, 0.08);
    --biq-shadow-md: 0 4px 16px rgba(11, 15, 21, 0.10);
    --biq-shadow-lg: 0 12px 32px rgba(11, 15, 21, 0.14);
    --biq-shadow-focus: 0 0 0 3px rgba(90, 110, 95, 0.35);

    /* Modal / scrim backdrop — slate-950 at 55% */
    --biq-color-backdrop: rgba(11, 15, 21, 0.55);

    /* Translucent overlays — white-on-dark surfaces (e.g. the hero
       visual panel sitting on the slate-green gradient).  Two stops:
       a soft fill and a slightly stronger border to lift content off
       the gradient without painting a hard rectangle. */
    --biq-color-overlay-light:        rgba(255, 255, 255, 0.06);
    --biq-color-overlay-light-strong: rgba(255, 255, 255, 0.18);

    /* ----------------------------------------------------------------------
       Motion — short, deliberate.  Reduced via prefers-reduced-motion.
       ---------------------------------------------------------------------- */

    --biq-duration-instant: 0ms;
    --biq-duration-fast:    120ms;
    --biq-duration-normal:  200ms;
    --biq-duration-slow:    320ms;

    --biq-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --biq-ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --biq-ease-out:      cubic-bezier(0, 0, 0.2, 1);

    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */

    --biq-shell-width:    1200px;
    --biq-shell-narrow:   840px;
    --biq-shell-wide:     1440px;
    --biq-header-height:  56px;
    --biq-touch-target:   44px;   /* WCAG 2.5.5 — never go below */

    /* ----------------------------------------------------------------------
       Breakpoints — exposed as informational; @media uses raw px values
       documented here.  (CSS does not yet allow var() in @media queries
       portably; keep the mapping in sync by hand.)
                                                phone     tablet    desk
       ---------------------------------------------------------------------- */
    --biq-bp-phone:  480px;
    --biq-bp-tablet: 720px;
    --biq-bp-desk:   1024px;
    --biq-bp-wide:   1440px;
}

/* ==========================================================================
   Accessibility overrides — these MUST be authored alongside any new
   component.  Reviewer signal: a component without a contrast and motion
   override is a half-finished component.
   ========================================================================== */

@media (prefers-contrast: more) {
    :root {
        --biq-color-text-secondary: var(--biq-slate-900);
        --biq-color-text-muted:     var(--biq-slate-700);
        --biq-color-border:         var(--biq-slate-500);
        --biq-color-border-strong:  var(--biq-slate-700);
        --biq-color-rule:           var(--biq-slate-500);
        --biq-focus-ring:           0 0 0 3px var(--biq-slate-900);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --biq-duration-fast:   0ms;
        --biq-duration-normal: 0ms;
        --biq-duration-slow:   0ms;
    }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Reset + base — everything below this line uses semantic tokens only.
   ========================================================================== */

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

html, body {
    margin: 0;
    padding: 0;
    background: var(--biq-color-surface);
    color: var(--biq-color-text-primary);
    font-family: var(--biq-font-body);
    font-size: var(--biq-fs-md);
    font-weight: var(--biq-fw-regular);
    line-height: var(--biq-lh-normal);
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--biq-space-3) 0;
    font-weight: var(--biq-fw-semibold);
    line-height: var(--biq-lh-snug);
    letter-spacing: var(--biq-tracking-tight);
    color: var(--biq-color-text-primary);
}

h1 { font-size: var(--biq-fs-3xl); }
h2 { font-size: var(--biq-fs-2xl); }
h3 { font-size: var(--biq-fs-xl); }
h4 { font-size: var(--biq-fs-lg); }
h5 { font-size: var(--biq-fs-md); }
h6 { font-size: var(--biq-fs-sm); text-transform: uppercase; letter-spacing: var(--biq-tracking-wide); color: var(--biq-color-text-secondary); }

p { margin: 0 0 var(--biq-space-4) 0; }

code, kbd, samp, pre {
    font-family: var(--biq-font-mono);
    font-size: 0.95em;
}

a {
    color: var(--biq-color-action);
    text-decoration: none;
    transition: color var(--biq-duration-fast) var(--biq-ease-standard);
}

a:hover  { color: var(--biq-color-action-hover); text-decoration: underline; }
a:active { color: var(--biq-color-action-pressed); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--biq-focus-ring);
    border-radius: var(--biq-radius-sm);
}

::selection { background: var(--biq-color-action-soft); color: var(--biq-color-text-primary); }

hr { border: 0; border-top: 1px solid var(--biq-color-rule); margin: var(--biq-space-5) 0; }

/* ==========================================================================
   App shell — header / main / footer.  Component CSS files in
   /css/components/ own everything inside main.
   ========================================================================== */

.biq-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Skip link — keyboard accessibility */
.biq-skip-link {
    position: absolute;
    left: -9999px;
    top: var(--biq-space-2);
    background: var(--biq-color-surface-inverse);
    color: var(--biq-color-text-on-inverse);
    padding: var(--biq-space-2) var(--biq-space-4);
    border-radius: var(--biq-radius-sm);
    z-index: 1000;
}
.biq-skip-link:focus { left: var(--biq-space-2); }

/* Header */
.biq-header {
    background: var(--biq-color-surface-raised);
    border-bottom: 1px solid var(--biq-color-rule);
    box-shadow: var(--biq-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 10;
}

.biq-header__inner {
    max-width: var(--biq-shell-width);
    margin: 0 auto;
    height: var(--biq-header-height);
    padding: 0 var(--biq-space-5);
    display: flex;
    align-items: center;
    gap: var(--biq-space-6);
}

.biq-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--biq-space-2);
    font-weight: var(--biq-fw-bold);
    color: var(--biq-color-text-primary);
    font-size: var(--biq-fs-lg);
    letter-spacing: var(--biq-tracking-tight);
}

.biq-header__brand:hover { text-decoration: none; }

.biq-header__brand-mark {
    display: inline-grid;
    place-items: center;
    width: var(--biq-space-6);
    height: var(--biq-space-6);
    border-radius: var(--biq-radius-sm);
    background: var(--biq-color-action);
    color: var(--biq-color-action-on);
    font-size: var(--biq-fs-sm);
    font-weight: var(--biq-fw-bold);
    letter-spacing: var(--biq-tracking-wide);
}

.biq-header__nav {
    display: flex;
    gap: var(--biq-space-5);
    margin-left: auto;
    align-items: center;
}

/* Plain links inside the header nav (Dashboard, Log in).  The :not(.biq-btn)
   guard is load-bearing: a `<a class="biq-btn">` in the same nav must keep
   its own padding + color contract.  Without the guard the descendant
   selector beats `.biq-btn--primary` on specificity and zeroes the button's
   horizontal padding, so the "Get started" label bled past the button's
   rectangle (observed end of Session 2C). */
.biq-header__nav a:not(.biq-btn) {
    color: var(--biq-color-text-secondary);
    font-weight: var(--biq-fw-medium);
    padding: var(--biq-space-2) 0;
    border-bottom: 2px solid transparent;
    transition: color var(--biq-duration-fast) var(--biq-ease-standard),
                border-color var(--biq-duration-fast) var(--biq-ease-standard);
}

.biq-header__nav a:not(.biq-btn):hover,
.biq-header__nav a:not(.biq-btn)[aria-current="page"] {
    color: var(--biq-color-text-primary);
    border-bottom-color: var(--biq-color-action);
    text-decoration: none;
}

/* Main */
.biq-main {
    flex: 1 0 auto;
    max-width: var(--biq-shell-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--biq-space-6) var(--biq-space-5);
}

/* Footer */
.biq-footer {
    background: var(--biq-color-surface-raised);
    border-top: 1px solid var(--biq-color-rule);
    color: var(--biq-color-text-muted);
    font-size: var(--biq-fs-sm);
}

.biq-footer__inner {
    max-width: var(--biq-shell-width);
    margin: 0 auto;
    padding: var(--biq-space-6) var(--biq-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--biq-space-5);
}

.biq-footer__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--biq-space-5);
}

@media (min-width: 720px) {
    .biq-footer__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--biq-space-6);
    }
}

@media (min-width: 1024px) {
    .biq-footer__columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.biq-footer__column {
    display: flex;
    flex-direction: column;
    gap: var(--biq-space-2);
}

.biq-footer__column-title {
    color: var(--biq-color-text-primary);
    font-weight: var(--biq-fw-semibold);
    font-size: var(--biq-fs-sm);
    letter-spacing: var(--biq-tracking-wide);
    text-transform: uppercase;
    margin: 0;
}

.biq-footer__column-body {
    color: var(--biq-color-text-secondary);
    line-height: var(--biq-lh-normal);
    margin: 0;
}

.biq-footer__column a {
    color: var(--biq-color-text-secondary);
}

.biq-footer__column a:hover {
    color: var(--biq-color-action);
}

/* Trust statement — sits above the copyright strip so it reads as its
   own deliberate commitment, not a footnote.  Wording is wired to ToS
   §12 (Data Portability); see _Layout.cshtml for the audit comment. */
.biq-footer__trust {
    margin: var(--biq-space-5) 0 0 0;
    padding-top: var(--biq-space-4);
    color: var(--biq-color-text-primary);
    font-weight: var(--biq-fw-medium);
    line-height: var(--biq-lh-normal);
    border-top: 1px solid var(--biq-color-rule);
}

.biq-footer__strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--biq-space-3);
    padding-top: var(--biq-space-4);
    margin-top: var(--biq-space-3);
    border-top: 1px solid var(--biq-color-rule);
}

.biq-footer__tagline {
    color: var(--biq-color-text-secondary);
    font-style: italic;
}

/* ==========================================================================
   Utility — kept narrow on purpose.  If you find yourself adding a utility,
   ask whether the pattern belongs as a component instead.
   ========================================================================== */

.biq-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.biq-stack > * + * { margin-top: var(--biq-space-4); }
.biq-stack-sm > * + * { margin-top: var(--biq-space-2); }
.biq-stack-lg > * + * { margin-top: var(--biq-space-6); }

.biq-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--biq-space-3);
    align-items: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 720px) {
    .biq-header__inner { gap: var(--biq-space-3); }
    .biq-header__nav { gap: var(--biq-space-3); }
    .biq-main { padding: var(--biq-space-5) var(--biq-space-4); }
}