/*
 * oBuilds brand layer.
 *
 * Loads on top of stock Bootstrap 5.3.2 from jsDelivr. The live site compiles
 * Bootstrap from customized Sass; that is not reproducible from a CDN, so the
 * same decisions are re-applied here as --bs-* custom properties.
 *
 * Palette and font families trace to brand/brand.md and the live-site mirror.
 * Type sizes and spacing are a designed tight-editorial scale (2026 overhaul);
 * see brand/brand.md.
 */


/* ---------------------------------------------------------------------------
 * 1. Tokens
 * Palette tokens match the live build. Type and spacing tokens are designed.
 * Stock Bootstrap names left at their defaults (purple, pink, orange, teal,
 * cyan, the radius scale, the shadow scale) are omitted so the diff against
 * Bootstrap stays readable.
 * ------------------------------------------------------------------------ */

:root,
[data-bs-theme="light"] {
  /* Palette */
  --bs-blue: #009DFF;
  --bs-indigo: #8963BA;
  --bs-red: #FB4D3D;
  --bs-yellow: #FDE74C;
  --bs-green: #03CEA4;
  --bs-gray: #545454;
  --bs-gray-200: #f7f7f9;
  --bs-gray-300: #eceeef;
  --bs-gray-600: #545454;
  --bs-gray-700: #55595c;
  --bs-gray-900: #01161E;

  --bs-primary: #009DFF;
  --bs-secondary: #545454;
  --bs-success: #03CEA4;
  --bs-info: #8963BA;
  --bs-warning: #FDE74C;
  --bs-danger: #FB4D3D;
  --bs-light: #fff;
  --bs-dark: #01161E;

  --bs-primary-rgb: 0, 157, 255;
  --bs-secondary-rgb: 84, 84, 84;
  --bs-success-rgb: 3, 206, 164;
  --bs-info-rgb: 137, 99, 186;
  --bs-warning-rgb: 253, 231, 76;
  --bs-danger-rgb: 251, 77, 61;
  --bs-light-rgb: 255, 255, 255;
  --bs-dark-rgb: 1, 22, 30;

  --bs-primary-text-emphasis: #003f66;
  --bs-primary-bg-subtle: #ccebff;
  --bs-primary-border-subtle: #99d8ff;

  /* Type scale (tight editorial) */
  --type-body: 1rem;
  --type-prose: 1.125rem;
  --type-lead: 1.25rem;
  --type-small: 0.875rem;
  --type-caption: 0.75rem;
  --lh-body: 1.55;
  --lh-heading: 1.15;

  /* Spacing ladder */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;

  /* Type */
  --bs-font-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --bs-body-font-family: "Ubuntu", sans-serif;
  --bs-body-font-size: var(--type-body);
  --bs-body-font-weight: 300;
  --bs-body-line-height: var(--lh-body);
  --bs-body-color: #55595c;
  --bs-body-color-rgb: 85, 89, 92;
  --bs-body-bg: #fff;
  --bs-heading-color: #01161E;

  /* Surfaces */
  --bs-secondary-bg: #f7f7f9;
  --bs-border-color: #eceeef;

  /* Links */
  --bs-link-color: #009DFF;
  --bs-link-color-rgb: 0, 157, 255;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #007ecc;
  --bs-link-hover-color-rgb: 0, 126, 204;

  /* Focus and validation */
  --bs-focus-ring-color: rgba(0, 157, 255, 0.25);
  --bs-form-valid-color: #03CEA4;
  --bs-form-valid-border-color: #03CEA4;
  --bs-form-invalid-color: #FB4D3D;
  --bs-form-invalid-border-color: #FB4D3D;
}


/* ---------------------------------------------------------------------------
 * 2. Typography
 * Headings are Nunito Sans 900 on a monotonic scale (h1 > h2 > h3 > h4).
 * ------------------------------------------------------------------------ */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 900;
  line-height: var(--lh-heading);
}

h1, .h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
h2, .h2 { font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.15rem + 0.2vw, 1.375rem); }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

@media (min-width: 1200px) {
  h1, .h1 { font-size: 2.25rem; }
  h2, .h2 { font-size: 1.625rem; }
  h3, .h3 { font-size: 1.375rem; }
}

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.contact-form h1, .contact-form h2, .contact-form h3,
.contact-form h4, .contact-form h5, .contact-form h6 {
  color: inherit;
}


/* ---------------------------------------------------------------------------
 * 3. Buttons
 * ------------------------------------------------------------------------ */

.btn {
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: var(--type-small);
  --bs-btn-font-weight: 600;
  --bs-btn-border-width: 0;
}

[class*="btn-outline-"] {
  --bs-btn-border-width: 2px;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not([disabled]):not(.disabled):active {
  color: #fff;
}


/* ---------------------------------------------------------------------------
 * 4. Components that bake the theme color in
 *
 * Overriding --bs-primary is not enough. Bootstrap resolves theme colors at
 * Sass compile time for component rules, so stock bootstrap.min.css ships
 * literal #0d6efd in the rules below and never reads --bs-primary. The live
 * site got the brand color here by recompiling; from a CDN, each rule has to
 * be restated. Values are the live stylesheet's own compiled output.
 *
 * Twenty-two stock rules bake the default blue. Restated here are the ones
 * this site can render: buttons, the dropdown, nav focus, the accordion, and
 * form controls. If a page starts using .btn-info, .nav-pills, .pagination,
 * .progress, .list-group, .form-range, or .btn-close, check its compiled
 * values in the mirror before assuming the token reaches it.
 * ------------------------------------------------------------------------ */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #009DFF;
  --bs-btn-border-color: #009DFF;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0085d9;
  --bs-btn-hover-border-color: #007ecc;
  --bs-btn-focus-shadow-rgb: 38, 172, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #007ecc;
  --bs-btn-active-border-color: #0076bf;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #009DFF;
  --bs-btn-disabled-border-color: #009DFF;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #545454;
  --bs-btn-border-color: #545454;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #474747;
  --bs-btn-hover-border-color: #434343;
  --bs-btn-focus-shadow-rgb: 110, 110, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #434343;
  --bs-btn-active-border-color: #3f3f3f;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #545454;
  --bs-btn-disabled-border-color: #545454;
}

.btn-outline-primary {
  --bs-btn-color: #009DFF;
  --bs-btn-border-color: #009DFF;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #009DFF;
  --bs-btn-hover-border-color: #009DFF;
  --bs-btn-focus-shadow-rgb: 0, 157, 255;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #009DFF;
  --bs-btn-active-border-color: #009DFF;
  --bs-btn-disabled-color: #009DFF;
  --bs-btn-disabled-border-color: #009DFF;
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: #009DFF;
}

.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(0, 157, 255, 0.25);
}

/* The accordion's open color and background already read
   --bs-primary-text-emphasis and --bs-primary-bg-subtle, which section 1 sets.
   Its chevron is an inline SVG with the color baked into the data URI, and its
   focus ring is a literal, so both are restated. */
.accordion {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23003f66'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: #80ceff;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 157, 255, 0.25);
}

/* Form controls: CDN Bootstrap keeps stock padding/border. Restate brand
   values the same way section 4 does for buttons. */
.form-control {
  padding: 0.75rem 1.5rem;
  font-size: var(--type-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--bs-body-color);
  background-color: var(--bs-secondary-bg);
  background-clip: padding-box;
  border: 0 solid var(--bs-border-color);
  border-radius: 0;
}

.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-secondary-bg);
  border-color: #80ceff;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(0, 157, 255, 0.25);
}

.form-control:disabled {
  background-color: var(--bs-gray-300);
  opacity: 1;
}

.form-select:focus,
.form-check-input:focus {
  border-color: #80ceff;
  box-shadow: 0 0 0 0.25rem rgba(0, 157, 255, 0.25);
}

.form-check-input:checked {
  background-color: #009DFF;
  border-color: #009DFF;
}


/* ---------------------------------------------------------------------------
 * 5. Measure and surfaces
 * .page-content is the site's reading column.
 * ------------------------------------------------------------------------ */

.page-content {
  max-width: 720px;
  padding-bottom: var(--space-6);
}

.page-content p {
  font-size: var(--type-prose);
  margin-bottom: var(--space-4);
}

.page-content i {
  font-size: 2.25rem;
}

.page-content .card,
.page-content .contact-form,
.page-content .accordion {
  box-shadow: var(--bs-box-shadow);
}

.card,
.contact-form {
  --bs-card-spacer-y: var(--space-6);
  --bs-card-spacer-x: var(--space-6);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--bs-body-bg);
  background-clip: border-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

/* Live site: .contact-form shares .card-body padding. */
.contact-form {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}


/* ---------------------------------------------------------------------------
 * 6. Homepage blocks
 * Layout for the sections the live homepage already has.
 * ------------------------------------------------------------------------ */

.info > h2 {
  margin-bottom: var(--space-4);
}

.info .problem {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.info .amplify,
.info .testimony,
.info .offer,
.info .what-we-offer {
  margin-bottom: var(--space-8);
}

.info .solution {
  margin-bottom: var(--space-6);
}

/* The live header is 100vh. A navbar now sits above it, so the viewport share
   is reduced by the navbar's height to keep the fold in the same place. */
.header {
  min-height: calc(100vh - 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header .info {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
}

.header .info .title {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  margin-top: auto;
}

.header .info img {
  height: 48px;
  margin-bottom: var(--space-5);
}

.header .info h1 {
  font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
}

.header .info p {
  margin-bottom: auto;
}

.header .scroll-icon {
  color: var(--bs-primary);
  text-decoration: none;
}

.amplify {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.amplify .card-body {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.amplify .card-body i {
  color: #01161E;
}

@media (max-width: 575.98px) {
  .amplify .card-body {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }
}

.solution .col-12 {
  margin-bottom: var(--space-5);
}

.solution .col-12:nth-child(odd) { padding-right: var(--space-4); }
.solution .col-12:nth-child(even) { padding-left: var(--space-4); }

.solution .col-12 .card {
  height: 100%;
}

.solution .col-12 .card .card-body .card-title {
  color: #01161E;
}

@media (max-width: 767.98px) {
  .solution .col-12 .card .card-body {
    text-align: center;
  }
}

.testimony {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimony .accordion-button {
  font-weight: 600;
}

.testimony .accordion-body p {
  font-size: var(--type-body);
}

.testimony .link-container {
  margin-top: var(--space-4);
  text-align: right;
}

.testimony .link-container a i {
  font-size: var(--type-body);
}

.contact-form .form-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}

.contact-form .form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact-form .form-fields > * {
  margin-bottom: 0;
}

.contact-form .form-label {
  margin-bottom: var(--space-2);
  font-weight: 400;
  color: var(--bs-heading-color);
}


/* ---------------------------------------------------------------------------
 * 7. New structure
 * The captured live site has no navigation bar, no footer, and no page type
 * other than the homepage. Everything below is new, composed from the tokens
 * above so it stays inside the existing brand.
 * ------------------------------------------------------------------------ */

/* Sticky footer: keep the page at least viewport-tall so short content
 * (e.g. the contact thank-you state) does not leave the footer mid-screen.
 * #app is the Vue mount; nav, main, and footer are its direct children. */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#app > main {
  flex: 1 0 auto;
}

.site-nav {
  font-size: var(--type-small);
  font-weight: 600;
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

.site-nav .navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: var(--space-6);
  font-family: "Nunito Sans", sans-serif;
  font-weight: 900;
  color: var(--bs-heading-color);
}

.site-nav .navbar-brand img {
  height: 22px;
}

.site-nav .navbar-nav .nav-link {
  padding-top: 0.715rem;
  padding-bottom: 0.715rem;
}

.site-nav .dropdown-menu {
  font-size: var(--type-small);
}

.site-nav .dropdown-header {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 900;
  font-size: var(--type-caption);
  color: var(--bs-heading-color);
}

/* Page opener for the service pages and /contact. The homepage keeps its own
   full-height .header instead. */
.page-hero {
  padding-top: var(--space-7);
  padding-bottom: var(--space-5);
}

.page-hero .lead {
  font-size: var(--type-lead);
  font-weight: 300;
  margin-bottom: 0;
}

.cta-banner {
  margin-top: var(--space-7);
  margin-bottom: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--bs-border-color);
  text-align: center;
}

.site-footer {
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  background-color: var(--bs-secondary-bg);
  border-top: 1px solid var(--bs-border-color);
}

.site-footer h2 {
  font-size: var(--type-caption);
  margin-bottom: var(--space-3);
}

.site-footer ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: var(--space-6);
}

.site-footer li {
  margin-bottom: var(--space-1);
}

.site-footer a {
  font-size: var(--type-small);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer .footer-legal {
  padding-top: var(--space-5);
  border-top: 1px solid var(--bs-border-color);
  font-size: var(--type-small);
}