/* ==========================================================================
   TRIBAND — site.css
   Built on Trust, Bound by Excellence
   --------------------------------------------------------------------------
   Loaded AFTER Bootstrap 5.3. Bootstrap supplies layout, grid, navbar,
   offcanvas and utilities; everything below establishes the TRIBAND identity.

   Contents
     01  Brand tokens (colours, type, spacing, radius, shadow, glass)
     02  Base & typography
     03  Layout primitives (section rhythm, containers, eyebrows, bands)
     04  Buttons
     05  Cards & glass surfaces
     06  Decorative canvas (soft tri-tone ambience behind glass)
     07  Header / navigation
     08  Footer
     09  Forms
     10  Reveal animations & motion preferences
     11  Accessibility & utilities
     12  Page components (hero, mocks, steps, product, forms)
   ========================================================================== */


/* ==========================================================================
   01  BRAND TOKENS
   Colour values are taken directly from the TRIBAND logo source
   (logo/v2/build.js): navy #011F52, orange #FD6615, green #0C593D.
   ========================================================================== */

:root {
  /* ---- Core brand ---- */
  --triband-navy:      #011F52;
  --triband-orange:    #FD6615;
  --triband-green:     #0C593D;
  --triband-white:     #FFFFFF;
  --triband-light-bg:  #F5F7FB;

  /* ---- Navy scale (surfaces, ink, dividers) ---- */
  --tb-navy-900: #01173D;
  --tb-navy-800: #011F52;
  --tb-navy-700: #0A2E6B;
  --tb-navy-600: #14407F;
  --tb-navy-300: #7C90B4;
  --tb-navy-100: #DCE3EF;
  --tb-navy-050: #EEF2F9;

  /* ---- Orange scale ----
     #FD6615 is a display colour: 2.96:1 on white, so it is used for fills,
     icons, rules and large type only. --tb-orange-ink is the accessible
     text/link variant (5.10:1 on white). */
  --tb-orange-ink:  #C63F06;
  --tb-orange-600:  #E4560D;
  --tb-orange-500:  #FD6615;
  --tb-orange-200:  #FFD9C4;
  --tb-orange-050:  #FFF3EC;

  /* ---- Green scale ---- */
  --tb-green-700: #08442E;
  --tb-green-600: #0C593D;
  --tb-green-500: #1C8A5C;   /* lifted variant — dark backgrounds only */
  --tb-green-100: #D6EAE1;
  --tb-green-050: #EEF6F2;

  /* ---- Ink ---- */
  --tb-ink:        #0C1B33;
  --tb-ink-muted:  #4A5872;
  --tb-ink-subtle: #6B7A94;
  --tb-ink-invert: #FFFFFF;
  --tb-ink-invert-muted: rgba(255, 255, 255, 0.74);

  /* ---- Surfaces & lines ---- */
  --tb-surface:      #FFFFFF;
  --tb-surface-alt:  #F5F7FB;
  --tb-surface-sink: #EDF1F8;
  --tb-border:       #E2E8F2;
  --tb-border-strong:#CBD5E6;

  /* ---- Typography ---- */
  --tb-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tb-font-display: "Plus Jakarta Sans", var(--tb-font-body);

  --tb-fs-display: clamp(2.4rem, 1.35rem + 3.4vw, 4rem);
  --tb-fs-h1:      clamp(2.1rem, 1.4rem + 2.4vw, 3.15rem);
  --tb-fs-h2:      clamp(1.7rem, 1.25rem + 1.6vw, 2.4rem);
  --tb-fs-h3:      clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  --tb-fs-lead:    clamp(1.02rem, 0.96rem + 0.28vw, 1.175rem);
  --tb-fs-small:   0.875rem;
  --tb-fs-eyebrow: 0.78rem;

  /* ---- Spacing / rhythm ---- */
  --tb-section-y:   clamp(3.75rem, 2.4rem + 5.2vw, 7rem);
  --tb-section-y-sm:clamp(2.75rem, 2rem + 3vw, 4.5rem);
  --tb-gap:         1.5rem;

  /* ---- Radius ---- */
  --tb-radius-sm: 10px;
  --tb-radius:    16px;
  --tb-radius-lg: 22px;
  --tb-radius-xl: 30px;
  --tb-radius-pill: 999px;

  /* ---- Shadows ---- */
  --tb-shadow-xs: 0 1px 2px rgba(1, 31, 82, 0.06);
  --tb-shadow-sm: 0 4px 14px -6px rgba(1, 31, 82, 0.14);
  --tb-shadow:    0 14px 34px -18px rgba(1, 31, 82, 0.24);
  --tb-shadow-lg: 0 28px 60px -28px rgba(1, 31, 82, 0.32);
  --tb-shadow-hover: 0 26px 52px -24px rgba(1, 31, 82, 0.30);

  /* ---- Glass ----
     Used selectively: hero cards, feature panels, stat cards, CTA and
     contact panels. Main content backgrounds stay solid and readable. */
  --tb-glass-bg:        rgba(255, 255, 255, 0.60);
  --tb-glass-bg-strong: rgba(255, 255, 255, 0.78);
  --tb-glass-border:    rgba(255, 255, 255, 0.70);
  --tb-glass-hairline:  rgba(1, 31, 82, 0.07);
  --tb-glass-blur:      18px;
  --tb-glass-shadow:    0 20px 44px -22px rgba(1, 31, 82, 0.34);

  --tb-glass-dark-bg:     rgba(255, 255, 255, 0.07);
  --tb-glass-dark-border: rgba(255, 255, 255, 0.16);
  --tb-glass-dark-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.55);

  /* ---- Motion ---- */
  --tb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tb-transition: 220ms var(--tb-ease);

  /* ---- Layout ---- */
  --tb-header-h: 76px;
  --tb-maxw: 1200px;
}


/* ==========================================================================
   02  BASE & TYPOGRAPHY
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--tb-header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--tb-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tb-ink);
  background-color: var(--triband-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.tb-display {
  font-family: var(--tb-font-display);
  color: var(--triband-navy);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.tb-display { font-size: var(--tb-fs-display); font-weight: 800; letter-spacing: -0.03em; }
h1, .h1 { font-size: var(--tb-fs-h1); }
h2, .h2 { font-size: var(--tb-fs-h2); }
h3, .h3 { font-size: var(--tb-fs-h3); line-height: 1.3; letter-spacing: -0.01em; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.tb-lead {
  font-size: var(--tb-fs-lead);
  line-height: 1.72;
  color: var(--tb-ink-muted);
  text-wrap: pretty;
}

.tb-muted   { color: var(--tb-ink-muted); }
.tb-subtle  { color: var(--tb-ink-subtle); }
.tb-measure { max-width: 62ch; }
.tb-measure-sm { max-width: 48ch; }

a {
  color: var(--tb-orange-ink);
  text-decoration-color: color-mix(in srgb, var(--tb-orange-ink) 35%, transparent);
  text-underline-offset: 3px;
  transition: color var(--tb-transition), text-decoration-color var(--tb-transition);
}
a:hover { color: var(--tb-orange-600); text-decoration-color: currentColor; }

/* Text accents in brand colour */
.tb-text-navy   { color: var(--triband-navy) !important; }
.tb-text-orange { color: var(--tb-orange-ink) !important; }
.tb-text-green  { color: var(--tb-green-600) !important; }

/* Highlight used inside display headlines (large type — safe for #FD6615). */
.tb-accent-word {
  color: var(--triband-navy);
  position: relative;
  white-space: nowrap;
}
.tb-accent-word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.28em;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--triband-orange) 34%, transparent),
    color-mix(in srgb, var(--triband-green) 22%, transparent)
  );
  z-index: -1;
}


/* ==========================================================================
   03  LAYOUT PRIMITIVES
   ========================================================================== */

.container,
.container-lg,
.container-xl { max-width: var(--tb-maxw); }

.tb-section       { padding-block: var(--tb-section-y); position: relative; }
.tb-section--tight{ padding-block: var(--tb-section-y-sm); }
.tb-section--alt  { background-color: var(--triband-light-bg); }
.tb-section--sink { background-color: var(--tb-surface-sink); }

/* Navy section, used for CTA / featured product blocks */
.tb-section--navy {
  background-color: var(--triband-navy);
  color: var(--tb-ink-invert);
  position: relative;
  overflow: hidden;
}
.tb-section--navy h1,
.tb-section--navy h2,
.tb-section--navy h3,
.tb-section--navy h4 { color: var(--tb-ink-invert); }
.tb-section--navy .tb-lead,
.tb-section--navy .tb-muted { color: var(--tb-ink-invert-muted); }

/* --- Eyebrow: small label above a section heading ---------------------
   The three-band glyph is the ::before, and it relies on this element being
   a FLEX container: flex centres it against the cap height and supplies the
   gap before the text. If an eyebrow needs to sit on its own line, use
   Bootstrap's .d-flex — never .d-block, which drops the element out of flex
   layout, kills the gap, and drops the band onto the text baseline. */
.tb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--tb-font-display);
  font-size: var(--tb-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tb-orange-ink);
  margin-bottom: 0.85rem;
}
.tb-section--navy .tb-eyebrow { color: var(--triband-orange); }

/* The three bands — TRIBAND's signature mark, used as a compact glyph. */
.tb-eyebrow::before,
.tb-bands {
  content: "";
  display: inline-block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--triband-navy) 0 34%,
    var(--triband-orange) 34% 70%,
    var(--triband-green) 70% 100%
  );
  flex: none;
}
.tb-section--navy .tb-eyebrow::before {
  background: linear-gradient(
    90deg,
    var(--triband-orange) 0 34%,
    #FFFFFF 34% 70%,
    var(--tb-green-500) 70% 100%
  );
}

.tb-bands--wide { width: 58px; height: 4px; }

/* Section heading block */
.tb-section-head { max-width: 44rem; margin-bottom: clamp(2rem, 1.4rem + 1.6vw, 3.25rem); }
.tb-section-head--center { margin-inline: auto; text-align: center; }
.tb-section-head--center .tb-eyebrow { justify-content: center; }
.tb-section-head > h2 { margin-bottom: 0.85rem; }

/* Divider */
.tb-rule { height: 1px; background: var(--tb-border); border: 0; margin: 0; }


/* ==========================================================================
   04  BUTTONS
   Navy is the primary action (white text, 15.4:1). Orange is reserved for
   accents, hovers and rules so the palette stays corporate rather than loud.
   ========================================================================== */

.btn {
  --bs-btn-border-radius: var(--tb-radius-pill);
  font-family: var(--tb-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--tb-radius-pill);
  padding: 0.72rem 1.5rem;
  transition: transform var(--tb-transition), box-shadow var(--tb-transition),
              background-color var(--tb-transition), color var(--tb-transition),
              border-color var(--tb-transition);
}
.btn:focus-visible {
  outline: 3px solid var(--triband-orange);
  outline-offset: 2px;
  box-shadow: none;
}

/* Primary — navy */
.btn-tb {
  background-color: var(--triband-navy);
  border: 1px solid var(--triband-navy);
  color: #fff;
  box-shadow: var(--tb-shadow-sm);
}
.btn-tb:hover,
.btn-tb:focus-visible {
  background-color: var(--tb-navy-700);
  border-color: var(--tb-navy-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--tb-shadow);
}

/* Accent — deepened orange so white label keeps 5.1:1 contrast */
.btn-tb-accent {
  background-color: var(--tb-orange-ink);
  border: 1px solid var(--tb-orange-ink);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(198, 63, 6, 0.55);
}
.btn-tb-accent:hover,
.btn-tb-accent:focus-visible {
  background-color: #A93504;
  border-color: #A93504;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(198, 63, 6, 0.5);
}

/* Outline — quiet secondary */
.btn-tb-outline {
  background-color: transparent;
  border: 1px solid var(--tb-border-strong);
  color: var(--triband-navy);
}
.btn-tb-outline:hover,
.btn-tb-outline:focus-visible {
  background-color: var(--tb-navy-050);
  border-color: var(--triband-navy);
  color: var(--triband-navy);
  transform: translateY(-2px);
}

/* Ghost on navy backgrounds */
.btn-tb-ghost {
  background-color: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-tb-ghost:hover,
.btn-tb-ghost:focus-visible {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  transform: translateY(-2px);
}

.btn-tb-light {
  background-color: #fff;
  border: 1px solid #fff;
  color: var(--triband-navy);
}
.btn-tb-light:hover,
.btn-tb-light:focus-visible {
  background-color: var(--tb-navy-050);
  border-color: var(--tb-navy-050);
  color: var(--triband-navy);
  transform: translateY(-2px);
}

.btn-lg { padding: 0.9rem 1.9rem; font-size: 1.02rem; }
.btn-sm { padding: 0.5rem 1.1rem; font-size: 0.875rem; }

/* Inline text link with arrow — "Learn More" */
.tb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: 0.925rem;
  color: var(--tb-orange-ink);
  text-decoration: none;
}
.tb-link i,
.tb-link svg { transition: transform var(--tb-transition); }
.tb-link:hover i,
.tb-link:hover svg,
.tb-link:focus-visible i { transform: translateX(4px); }
.tb-link:hover { color: var(--tb-orange-600); }


/* ==========================================================================
   05  CARDS & GLASS SURFACES
   ========================================================================== */

/* Solid card — the default for readable content */
.tb-card {
  position: relative;
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-lg);
  padding: clamp(1.4rem, 1.1rem + 0.8vw, 2rem);
  height: 100%;
  transition: transform var(--tb-transition), box-shadow var(--tb-transition),
              border-color var(--tb-transition);
}
.tb-card--lift:hover,
.tb-card--lift:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--tb-shadow-hover);
  border-color: var(--tb-navy-100);
}

/* Thin top band that reveals on hover — the "three bands" cue */
.tb-card--banded::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  border-radius: var(--tb-radius-lg) var(--tb-radius-lg) 0 0;
  background: linear-gradient(
    90deg,
    var(--triband-navy) 0 34%,
    var(--triband-orange) 34% 70%,
    var(--triband-green) 70% 100%
  );
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: opacity var(--tb-transition), transform var(--tb-transition);
}
.tb-card--banded:hover::before,
.tb-card--banded:focus-within::before { opacity: 1; transform: scaleX(1); }

/* Glass card — light backgrounds */
.tb-glass {
  position: relative;
  background: var(--tb-glass-bg);
  border: 1px solid var(--tb-glass-border);
  border-radius: var(--tb-radius-lg);
  box-shadow: var(--tb-glass-shadow);
  backdrop-filter: blur(var(--tb-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--tb-glass-blur)) saturate(140%);
  padding: clamp(1.4rem, 1.1rem + 0.8vw, 2rem);
}
.tb-glass--strong { background: var(--tb-glass-bg-strong); }
.tb-glass--lift {
  transition: transform var(--tb-transition), box-shadow var(--tb-transition);
}
.tb-glass--lift:hover,
.tb-glass--lift:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--tb-shadow-lg);
}

/* Glass card — navy / dark backgrounds */
.tb-glass-dark {
  position: relative;
  background: var(--tb-glass-dark-bg);
  border: 1px solid var(--tb-glass-dark-border);
  border-radius: var(--tb-radius-lg);
  box-shadow: var(--tb-glass-dark-shadow);
  backdrop-filter: blur(var(--tb-glass-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--tb-glass-blur)) saturate(130%);
  padding: clamp(1.4rem, 1.1rem + 0.8vw, 2rem);
  color: var(--tb-ink-invert);
}

/* Opaque fallback where backdrop-filter is unavailable */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .tb-glass       { background: rgba(255, 255, 255, 0.94); }
  .tb-glass-dark  { background: rgba(255, 255, 255, 0.12); }
  .btn-tb-ghost   { background-color: rgba(255, 255, 255, 0.20); }
}

/* Icon tile used at the top of service / feature cards */
.tb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 1.1rem;
  background: var(--tb-navy-050);
  color: var(--triband-navy);
  border: 1px solid var(--tb-navy-100);
  transition: transform var(--tb-transition), background-color var(--tb-transition);
}
.tb-icon--orange { background: var(--tb-orange-050); color: var(--tb-orange-ink); border-color: var(--tb-orange-200); }
.tb-icon--green  { background: var(--tb-green-050);  color: var(--tb-green-600);  border-color: var(--tb-green-100); }
.tb-icon--sm     { width: 42px; height: 42px; border-radius: 12px; font-size: 1.1rem; margin-bottom: 0.85rem; }
.tb-icon--invert { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.18); color: #fff; }

.tb-card--lift:hover .tb-icon,
.tb-glass--lift:hover .tb-icon { transform: translateY(-2px) scale(1.04); }

/* Small pill label */
.tb-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--tb-radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--tb-navy-050);
  color: var(--triband-navy);
  border: 1px solid var(--tb-navy-100);
}
.tb-pill--glass {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tb-pill--invert {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: #fff;
}

/* Feature list with brand check marks */
.tb-checklist { list-style: none; padding: 0; margin: 0; }
.tb-checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.6rem;
  color: var(--tb-ink-muted);
}
.tb-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--tb-green-600);
  box-shadow: 0 0 0 4px var(--tb-green-050);
}
.tb-section--navy .tb-checklist li { color: var(--tb-ink-invert-muted); }
.tb-section--navy .tb-checklist li::before {
  background: var(--tb-green-500);
  box-shadow: 0 0 0 4px rgba(28, 138, 92, 0.16);
}


/* ==========================================================================
   06  DECORATIVE CANVAS
   Very soft brand-tinted washes that give glass panels something to blur.
   Purely decorative and always aria-hidden in markup.
   ========================================================================== */

.tb-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.tb-canvas > * { position: absolute; border-radius: 50%; filter: blur(70px); }

.tb-blob-navy   { background: rgba(1, 31, 82, 0.16); }
.tb-blob-orange { background: rgba(253, 102, 21, 0.16); }
.tb-blob-green  { background: rgba(12, 89, 61, 0.14); }

.tb-section--navy .tb-blob-navy   { background: rgba(124, 144, 180, 0.20); }
.tb-section--navy .tb-blob-orange { background: rgba(253, 102, 21, 0.22); }
.tb-section--navy .tb-blob-green  { background: rgba(28, 138, 92, 0.20); }

/* Content sits above the canvas */
.tb-layer { position: relative; z-index: 1; }

/* Subtle grid texture for hero / navy panels */
.tb-grid-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(1, 31, 82, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 31, 82, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.tb-section--navy.tb-grid-texture::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}


/* ==========================================================================
   07  HEADER / NAVIGATION
   Sticky. Solid white at rest, translucent glass once the page scrolls.
   ========================================================================== */

.tb-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--triband-white);
  border-bottom: 1px solid transparent;
  transition: background-color var(--tb-transition), box-shadow var(--tb-transition),
              border-color var(--tb-transition), backdrop-filter var(--tb-transition);
}
.tb-header.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: rgba(1, 31, 82, 0.08);
  box-shadow: 0 8px 28px -20px rgba(1, 31, 82, 0.45);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .tb-header.is-scrolled { background: rgba(255, 255, 255, 0.97); }
}

.tb-header .navbar { padding-block: 0; }
.tb-navbar { min-height: var(--tb-header-h); }

/* Logo */
.tb-logo { display: inline-flex; align-items: center; padding-block: 0.5rem; }
.tb-logo img {
  height: 30px;
  width: auto;
  display: block;
  transition: transform var(--tb-transition);
}
.tb-logo:hover img { transform: translateY(-1px); }
.tb-logo:focus-visible { outline: 3px solid var(--triband-orange); outline-offset: 4px; border-radius: 6px; }
@media (min-width: 992px) { .tb-logo img { height: 34px; } }

/* Nav links */
.tb-nav .nav-link {
  position: relative;
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--triband-navy);
  padding: 0.55rem 0.95rem;
  border-radius: var(--tb-radius-sm);
  transition: color var(--tb-transition), background-color var(--tb-transition);
}
.tb-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--triband-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--tb-transition);
}
.tb-nav .nav-link:hover { color: var(--tb-navy-700); }
.tb-nav .nav-link:hover::after { transform: scaleX(1); }
.tb-nav .nav-link[aria-current="page"] { color: var(--triband-navy); }
.tb-nav .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.tb-nav .nav-link:focus-visible {
  outline: 3px solid var(--triband-orange);
  outline-offset: 2px;
}

/* Mobile toggle */
.tb-toggler {
  border: 1px solid var(--tb-border);
  border-radius: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tb-surface);
  color: var(--triband-navy);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0;
  transition: border-color var(--tb-transition), background-color var(--tb-transition);
}
.tb-toggler:hover { border-color: var(--tb-border-strong); background: var(--tb-navy-050); }
.tb-toggler:focus-visible { outline: 3px solid var(--triband-orange); outline-offset: 2px; }

/* Offcanvas mobile menu */
.tb-offcanvas { width: min(88vw, 340px); border-left: 1px solid var(--tb-border); }
.tb-offcanvas .offcanvas-header { padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--tb-border); }
.tb-offcanvas .offcanvas-body { padding: 1.35rem; display: flex; flex-direction: column; }
.tb-offcanvas .nav-link {
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--triband-navy);
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--tb-border);
  border-radius: 0;
}
.tb-offcanvas .nav-link[aria-current="page"] { color: var(--tb-orange-ink); }
.tb-offcanvas .nav-link:focus-visible { outline: 3px solid var(--triband-orange); outline-offset: -3px; }
.tb-offcanvas .btn-close:focus-visible { outline: 3px solid var(--triband-orange); outline-offset: 2px; box-shadow: none; }

.tb-offcanvas-contact {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: var(--tb-fs-small);
  color: var(--tb-ink-muted);
}
.tb-offcanvas-contact a { display: block; margin-bottom: 0.35rem; text-decoration: none; }


/* ==========================================================================
   08  FOOTER
   ========================================================================== */

.tb-footer {
  position: relative;
  background: var(--triband-navy);
  color: var(--tb-ink-invert-muted);
  overflow: hidden;
}
.tb-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--triband-orange) 0 34%,
    var(--tb-navy-600) 34% 70%,
    var(--tb-green-500) 70% 100%
  );
}
.tb-footer h2,
.tb-footer h3,
.tb-footer .tb-footer-title { color: #fff; }

.tb-footer-title {
  font-family: var(--tb-font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
}
.tb-footer-logo { height: 32px; width: auto; }
.tb-footer-tagline {
  font-family: var(--tb-font-display);
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 1rem;
}

.tb-footer-links { list-style: none; padding: 0; margin: 0; }
.tb-footer-links li { margin-bottom: 0.6rem; }
.tb-footer-links a,
.tb-footer a.tb-footer-link {
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color var(--tb-transition), padding-left var(--tb-transition);
}
.tb-footer-links a:hover,
.tb-footer a.tb-footer-link:hover { color: #fff; }
.tb-footer-links a:focus-visible,
.tb-footer a:focus-visible {
  outline: 2px solid var(--triband-orange);
  outline-offset: 3px;
  border-radius: 3px;
  color: #fff;
}

.tb-footer-contact { list-style: none; padding: 0; margin: 0; }
.tb-footer-contact li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
  font-size: 0.94rem;
}
.tb-footer-contact i { color: var(--triband-orange); margin-top: 0.2rem; flex: none; }

.tb-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 1.05rem;
  transition: background-color var(--tb-transition), transform var(--tb-transition), color var(--tb-transition);
}
.tb-social:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  transform: translateY(-2px);
}

.tb-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-block: 1.35rem;
  font-size: var(--tb-fs-small);
  color: rgba(255, 255, 255, 0.62);
}


/* ==========================================================================
   09  FORMS
   ========================================================================== */

.tb-label {
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--triband-navy);
  margin-bottom: 0.4rem;
}
.tb-label .tb-req { color: var(--tb-orange-ink); }

.form-control,
.form-select {
  border: 1px solid var(--tb-border-strong);
  border-radius: var(--tb-radius-sm);
  padding: 0.72rem 0.95rem;
  font-size: 0.975rem;
  color: var(--tb-ink);
  background-color: #fff;
  transition: border-color var(--tb-transition), box-shadow var(--tb-transition);
}
.form-control::placeholder { color: var(--tb-ink-subtle); opacity: 1; }
.form-control:focus,
.form-select:focus {
  border-color: var(--triband-navy);
  box-shadow: 0 0 0 3px rgba(1, 31, 82, 0.14);
  outline: none;
}
.form-control:disabled { background-color: var(--tb-surface-alt); }
.was-validated .form-control:invalid,
.form-control.is-invalid { border-color: var(--tb-orange-ink); }
.invalid-feedback { color: var(--tb-orange-ink); font-size: 0.82rem; }


/* ==========================================================================
   10  REVEAL ANIMATIONS & MOTION PREFERENCES
   Progressive enhancement: content is visible by default. site.js adds
   .tb-anim-ready to <html>, which arms the hidden state, then reveals on
   scroll. No JS (or reduced motion) means no hiding at all.
   ========================================================================== */

.tb-anim-ready [data-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--tb-ease), transform 620ms var(--tb-ease);
  transition-delay: var(--tb-delay, 0ms);
  will-change: opacity, transform;
}
.tb-anim-ready [data-animate="fade"]  { transform: none; }
.tb-anim-ready [data-animate="left"]  { transform: translateX(-24px); }
.tb-anim-ready [data-animate="right"] { transform: translateX(24px); }
.tb-anim-ready [data-animate].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Stagger helpers */
.tb-d1 { --tb-delay: 80ms; }
.tb-d2 { --tb-delay: 160ms; }
.tb-d3 { --tb-delay: 240ms; }
.tb-d4 { --tb-delay: 320ms; }
.tb-d5 { --tb-delay: 400ms; }
.tb-d6 { --tb-delay: 480ms; }

/* Gentle float for hero glass cards */
@keyframes tb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.tb-float { animation: tb-float 7s var(--tb-ease) infinite; }
.tb-float--slow  { animation-duration: 9s; }
.tb-float--delay { animation-delay: -3.5s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .tb-anim-ready [data-animate] { opacity: 1 !important; transform: none !important; }
  .tb-float { animation: none !important; }
}


/* ==========================================================================
   11  ACCESSIBILITY & UTILITIES
   ========================================================================== */

.tb-skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  background: var(--triband-navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--tb-radius-sm) var(--tb-radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 160ms var(--tb-ease);
}
.tb-skip-link:focus {
  top: 0;
  color: #fff;
  outline: 3px solid var(--triband-orange);
  outline-offset: 2px;
}

/* Global focus fallback for anything not styled above */
:focus-visible { outline: 3px solid var(--triband-orange); outline-offset: 2px; }

.tb-bg-light  { background-color: var(--triband-light-bg) !important; }
.tb-bg-navy   { background-color: var(--triband-navy) !important; color: var(--tb-ink-invert); }
.tb-bg-white  { background-color: var(--triband-white) !important; }

.tb-shadow-sm { box-shadow: var(--tb-shadow-sm) !important; }
.tb-shadow    { box-shadow: var(--tb-shadow) !important; }
.tb-shadow-lg { box-shadow: var(--tb-shadow-lg) !important; }

.tb-radius    { border-radius: var(--tb-radius) !important; }
.tb-radius-lg { border-radius: var(--tb-radius-lg) !important; }
.tb-radius-xl { border-radius: var(--tb-radius-xl) !important; }

/* Images stay fluid */
img, svg, video { max-width: 100%; height: auto; }

/* Print: drop decorative layers */
@media print {
  .tb-header, .tb-footer, .tb-canvas, .tb-skip-link { display: none !important; }
  body { color: #000; }
}


/* ==========================================================================
   12  PAGE COMPONENTS
   Layout pieces used by the individual pages. Everything here is built from
   HTML + CSS — no image assets, no illustration libraries.
   ========================================================================== */

/* --- Homepage hero ---------------------------------------------------- */
.tb-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 2rem + 3.5vw, 5rem) clamp(3.25rem, 2.4rem + 4.5vw, 6rem);
  background: linear-gradient(180deg, #F7F9FD 0%, #FDFDFE 55%, #FFFFFF 100%);
}
.tb-hero-bands {
  position: absolute;
  top: -12%;
  right: -18%;
  width: min(920px, 78vw);
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 991.98px) {
  .tb-hero-bands { top: auto; bottom: -10%; right: -35%; opacity: 0.3; }
}

/* --- Inner page hero -------------------------------------------------- */
.tb-pagehero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  background: linear-gradient(180deg, var(--tb-navy-050) 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--tb-border);
}
.tb-breadcrumb {
  font-size: var(--tb-fs-small);
  color: var(--tb-ink-subtle);
  margin-bottom: 1rem;
}
.tb-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.tb-breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: var(--tb-border-strong); }
.tb-breadcrumb a { color: var(--tb-ink-muted); text-decoration: none; }
.tb-breadcrumb a:hover { color: var(--tb-orange-ink); }
.tb-breadcrumb [aria-current="page"] { color: var(--triband-navy); font-weight: 600; }

/* --- Abstract application mock (hero + product visuals) --------------- */
.tb-mock {
  position: relative;
  border-radius: var(--tb-radius-lg);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--tb-glass-border);
  box-shadow: var(--tb-shadow-lg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  overflow: hidden;
}
.tb-mock-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(1, 31, 82, 0.08);
  background: rgba(255, 255, 255, 0.55);
}
.tb-mock-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tb-mock-title {
  margin-left: 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--tb-ink-subtle);
  letter-spacing: 0.02em;
}
.tb-mock-body { padding: 1.15rem 1.25rem 1.35rem; }

.tb-bars { display: flex; align-items: flex-end; gap: 0.45rem; height: 96px; }
.tb-bars > span { flex: 1 1 0; border-radius: 5px 5px 2px 2px; background: var(--tb-navy-100); }
.tb-bars > span.is-navy   { background: var(--tb-navy-300); }
.tb-bars > span.is-orange { background: linear-gradient(180deg, var(--triband-orange), #E4560D); }
.tb-bars > span.is-green  { background: linear-gradient(180deg, var(--tb-green-500), var(--triband-green)); }

.tb-line { height: 8px; border-radius: 4px; background: var(--tb-navy-100); margin-bottom: 0.6rem; }
.tb-line.is-short { width: 55%; }
.tb-line.is-mid   { width: 78%; }
.tb-line.is-accent{ background: var(--tb-orange-200); width: 38%; }

.tb-mock-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(1, 31, 82, 0.07);
  font-size: 0.82rem;
  color: var(--tb-ink-muted);
}
.tb-mock-row:first-child { border-top: 0; }

/* Small floating glass cards layered over the mock */
.tb-float-card {
  position: absolute;
  z-index: 2;
  padding: 0.85rem 1rem;
  border-radius: var(--tb-radius);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--tb-glass-border);
  box-shadow: var(--tb-shadow);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  font-size: 0.82rem;
  line-height: 1.35;
}
@media (max-width: 575.98px) { .tb-float-card { display: none; } }

/* --- Technology strip -------------------------------------------------- */
.tb-techstrip {
  border-block: 1px solid var(--tb-border);
  background: var(--tb-surface);
  padding-block: 1.75rem;
}
.tb-techstrip-label {
  font-size: var(--tb-fs-small);
  font-weight: 600;
  color: var(--tb-ink-subtle);
  letter-spacing: 0.04em;
}
.tb-tech-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: center;
}
.tb-tech {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--triband-navy);
  white-space: nowrap;
}
.tb-tech i { color: var(--tb-orange-ink); font-size: 1.05rem; }

/* --- Process steps ----------------------------------------------------- */
.tb-steps {
  position: relative;
  /* Half the circle's height — the line must land on the circles' centre line. */
  --tb-step-size: 52px;
}
@media (min-width: 992px) {
  .tb-steps::before {
    content: "";
    position: absolute;
    /* The row's columns are pushed down by the Bootstrap row gutter, so the
       circle centre sits at (gutter + half a circle), not at half a circle. */
    top: calc(var(--bs-gutter-y, 0px) + (var(--tb-step-size) / 2));
    /* Six equal columns: the first and last circle centres are at 1/12 and 11/12. */
    left: 8.333%;
    right: 8.333%;
    height: 2px;
    margin-top: -1px;
    background: linear-gradient(90deg, var(--tb-navy-100), var(--tb-orange-200) 50%, var(--tb-green-100));
    z-index: 0;
  }
}
.tb-step { position: relative; z-index: 1; text-align: center; }
.tb-step-num {
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tb-font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--triband-navy);
  background: #fff;
  border: 2px solid var(--tb-navy-100);
  box-shadow: var(--tb-shadow-xs);
  transition: border-color var(--tb-transition), transform var(--tb-transition);
}
.tb-step:hover .tb-step-num { border-color: var(--triband-orange); transform: translateY(-3px); }
.tb-step h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.tb-step p { font-size: 0.9rem; color: var(--tb-ink-muted); margin: 0; }

/* --- Value / pillar rows ---------------------------------------------- */
.tb-pillar { display: flex; gap: 1.1rem; align-items: flex-start; }
.tb-pillar .tb-icon { margin-bottom: 0; flex: none; }
.tb-pillar h3 { font-size: 1.08rem; margin-bottom: 0.35rem; }
.tb-pillar p { color: var(--tb-ink-muted); margin: 0; font-size: 0.95rem; }

/* --- Services page: detail blocks & chip nav -------------------------- */
.tb-chipnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tb-chipnav a {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border-radius: var(--tb-radius-pill);
  border: 1px solid var(--tb-border);
  background: #fff;
  color: var(--triband-navy);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--tb-font-display);
  text-decoration: none;
  transition: border-color var(--tb-transition), background-color var(--tb-transition), transform var(--tb-transition);
}
.tb-chipnav a:hover {
  border-color: var(--triband-navy);
  background: var(--tb-navy-050);
  color: var(--triband-navy);
  transform: translateY(-2px);
}

.tb-service-block {
  scroll-margin-top: calc(var(--tb-header-h) + 24px);
  padding-block: clamp(2.5rem, 2rem + 2.4vw, 4.25rem);
}
.tb-service-block + .tb-service-block { border-top: 1px solid var(--tb-border); }

.tb-benefit-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem 1.5rem; }
@media (min-width: 576px) { .tb-benefit-grid { grid-template-columns: 1fr 1fr; } }

/* --- Product: LAN Messenger interface mock ---------------------------- */
.tb-chat { display: flex; min-height: 330px; }
.tb-chat-side {
  width: 40%;
  max-width: 190px;
  background: var(--tb-navy-050);
  border-right: 1px solid rgba(1, 31, 82, 0.08);
  padding: 0.9rem 0.75rem;
}
.tb-chat-main { flex: 1; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.tb-chat-user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--triband-navy);
}
.tb-chat-user.is-active { background: #fff; box-shadow: var(--tb-shadow-xs); }
.tb-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; color: #fff;
  background: var(--tb-navy-600);
  flex: none;
}
.tb-avatar.is-orange { background: var(--tb-orange-ink); }
.tb-avatar.is-green  { background: var(--triband-green); }
.tb-dot-online {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tb-green-500);
  margin-left: auto; flex: none;
}
.tb-bubble {
  max-width: 82%;
  padding: 0.55rem 0.85rem;
  border-radius: 14px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.tb-bubble--in  { background: #fff; border: 1px solid var(--tb-border); color: var(--tb-ink); border-bottom-left-radius: 4px; }
.tb-bubble--out { background: var(--triband-navy); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.tb-transfer {
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: var(--tb-green-050);
  border: 1px solid var(--tb-green-100);
  font-size: 0.78rem;
  color: var(--tb-green-700);
  max-width: 88%;
}
.tb-progress { height: 4px; border-radius: 2px; background: var(--tb-green-100); overflow: hidden; margin-top: 0.35rem; }
.tb-progress > span { display: block; height: 100%; width: 72%; background: var(--tb-green-500); border-radius: 2px; }

/* Feature grid on the product page */
.tb-feature {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: var(--tb-radius);
  border: 1px solid var(--tb-border);
  background: #fff;
  height: 100%;
  transition: border-color var(--tb-transition), box-shadow var(--tb-transition), transform var(--tb-transition);
}
.tb-feature:hover { border-color: var(--tb-navy-100); box-shadow: var(--tb-shadow-sm); transform: translateY(-3px); }
.tb-feature > i { font-size: 1.15rem; color: var(--tb-orange-ink); margin-top: 0.1rem; flex: none; }
.tb-feature h3 { font-size: 0.98rem; margin-bottom: 0.2rem; }
.tb-feature p { font-size: 0.875rem; color: var(--tb-ink-muted); margin: 0; }

/* Placeholder slot for future products */
.tb-product-slot {
  border: 2px dashed var(--tb-border-strong);
  border-radius: var(--tb-radius-lg);
  padding: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  text-align: center;
  background: var(--tb-surface-alt);
  color: var(--tb-ink-muted);
}

/* --- Accordion (FAQ) --------------------------------------------------- */
.accordion-item {
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: #fff;
}
.accordion-button {
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--triband-navy);
  padding: 1.05rem 1.25rem;
  background: #fff;
}
.accordion-button:not(.collapsed) { background: var(--tb-navy-050); color: var(--triband-navy); box-shadow: none; }
.accordion-button:focus { box-shadow: none; }
.accordion-button:focus-visible { outline: 3px solid var(--triband-orange); outline-offset: -3px; }
.accordion-body { padding: 0 1.25rem 1.25rem; color: var(--tb-ink-muted); }

/* --- Contact page ------------------------------------------------------ */
.tb-form-card {
  background: #fff;
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
  box-shadow: var(--tb-shadow-sm);
}
.tb-contact-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding-block: 1rem;
  border-top: 1px solid rgba(1, 31, 82, 0.08);
}
.tb-contact-item:first-of-type { border-top: 0; padding-top: 0; }
.tb-contact-item h3 { font-size: 0.92rem; margin-bottom: 0.15rem; }
.tb-contact-item a { text-decoration: none; font-weight: 600; }
.tb-form-status {
  border-radius: var(--tb-radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
.tb-form-status--ok  { background: var(--tb-green-050); border: 1px solid var(--tb-green-100); color: var(--tb-green-700); }
.tb-form-status--err { background: var(--tb-orange-050); border: 1px solid var(--tb-orange-200); color: var(--tb-orange-ink); }

/* --- Misc -------------------------------------------------------------- */
.tb-quote {
  border-left: 3px solid var(--triband-orange);
  padding-left: 1.25rem;
  font-family: var(--tb-font-display);
  font-size: var(--tb-fs-lead);
  font-weight: 600;
  color: var(--triband-navy);
  line-height: 1.5;
}
.tb-tag-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--tb-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--tb-orange-050);
  color: var(--tb-orange-ink);
  border: 1px solid var(--tb-orange-200);
}