@font-face {
  font-family: "Lato";
  src: url("/assets/fonts/lato-300.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

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

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

@font-face {
  font-family: "FontAwesome";
  src: url("/assets/fonts/fontawesome.woff2") format("woff2");
  font-style: normal;
  font-weight: normal;
  font-display: block;
}

:root {
  --header-bg: #eceef1;
  --text: #1d2127;
  --hero-overlay: rgba(0, 0, 0, .50);
  --services-bg: rgba(0, 0, 0, .50);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-width: 100%;
  min-height: 100%;
}

body {
  overflow-x: hidden;
  color: var(--text);
  background: #fff;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

a {
  color: inherit;
  text-decoration: none;
}

.fa {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
}

/* ------------------------------------------------------------------------- */
/* Desktop header: reconstructed from the 1440 px computed-style capture.    */
/* ------------------------------------------------------------------------- */

.desktop-header {
  height: 94px;
  background: var(--header-bg);
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
  position: relative;
  z-index: 10;
}

.desktop-header__inner {
  width: calc(100% - 120px);
  max-width: 1320px;
  height: 94px;
  margin: 0 auto;
  padding: 20px 15px 10px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.phone {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: #212529;
  font-size: 14px;
  line-height: 21px;
  white-space: nowrap;
}

.phone__icon {
  font-size: 12px;
}

.brand {
  justify-self: center;
  width: 48px;
  height: 44px;
  overflow: hidden;
}

.brand img {
  display: block;
  width: 48px;
  height: 44px;
  object-fit: contain;
}

.language {
  position: relative;
  justify-self: end;
  font-size: 14px;
  line-height: 21px;
}

.language summary {
  list-style: none;
  width: 116px;
  min-height: 34px;

  padding: 6px 16px 6px 24px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  cursor: pointer;
  border-radius: 999px;
  background: rgba(0, 0, 0, .05);
  color: #212529;
}

.language summary::-webkit-details-marker {
  display: none;
}

.language__arrow {
  width: 0;
  height: 0;

  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #212529;
}

.language__menu {
  position: absolute;
  top: 42px;
  right: 0;

  min-width: 150px;
  padding: 6px;

  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}

.language:not([open]) .language__menu {
  display: none;
}

.language__menu a {
  display: block;
  padding: 7px 10px;
}

/* ------------------------------------------------------------------------- */
/* Hero                                                                      */
/* ------------------------------------------------------------------------- */

.hero {
  position: relative;
  height: calc(100vh - 94px);
  min-height: 600px;

  display: flex;
  align-items: center;

  padding: 96px 0 0;

  overflow: hidden;

  color: #fff;

  background:
    url("/assets/background.jpg")
    center center / cover
    no-repeat;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

.hero__content {
  position: relative;
  z-index: 1;

  width: calc(100% - 120px);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 15px;

  text-align: center;
}

.hero h1 {
  margin: 0 0 8px;

  color: #fff;

  font-size: 64px;
  font-weight: 700;
  line-height: 76.8px;
}

.tagline {
  margin: 0 0 20px;

  color: #fff;

  font-size: 48px;
  font-weight: 700;
  line-height: 76.8px;
}

.services {
  width: 100%;
  min-height: 75px;

  padding: 24px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  color: #fff;
  background: var(--services-bg);

  font-size: 16px;
  font-weight: 300;
  line-height: 27px;
}

.bullet {
  display: inline-block;
  margin: 0 6px;
}

.contact {
  margin: 20px 0 0;

  color: #fff;

  font-size: 48px;
  font-weight: 300;
  line-height: 72px;
}

.contact a {
  color: #fff;
}

.footer {
  min-height: 56px;
  padding-top: 16px;

  color: #1d2127;
  background: #fff;

  text-align: center;

  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.footer p {
  margin: 0 0 16px;
}

/* ------------------------------------------------------------------------- */
/* Mobile                                                                    */
/* ------------------------------------------------------------------------- */

.mobile-header {
  display: none;
}

@media (max-width: 991.98px) {

  .desktop-header {
    display: none;
  }

  .mobile-header {
    height: 76px;
    padding: 12px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: var(--header-bg);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);

    position: relative;
    z-index: 10;
  }

  .mobile-brand {
    display: block;
    width: 52px;
    height: 48px;
  }

  .mobile-brand img {
    display: block;
    width: 52px;
    height: 48px;
    object-fit: contain;
  }

  .mobile-menu {
    position: relative;
  }

  .mobile-menu summary {
    width: 38px;
    height: 32px;

    padding: 3px 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    cursor: pointer;
    list-style: none;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu summary span {
    display: block;
    width: 38px;
    height: 3px;

    border-radius: 3px;
    background: #666;
  }

  .mobile-menu__panel {
    position: absolute;
    top: 45px;
    right: 0;

    min-width: 210px;
    padding: 10px;

    border-radius: 5px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  }

  .mobile-menu:not([open]) .mobile-menu__panel {
    display: none;
  }

  .mobile-menu__panel a {
    display: block;
    padding: 8px 10px;
  }

  .hero {
    height: auto;
    min-height: calc(100vh - 76px);

    padding: 52px 0 42px;

    background-position: center center;
  }

  .hero__content {
    width: 100%;
    max-width: none;
    padding: 0 16px;
  }

  .hero h1 {
    margin-bottom: 13px;

    font-size: 42px;
    line-height: 50px;
  }

  .tagline {
    max-width: 350px;
    margin: 0 auto 30px;

    font-size: 34px;
    line-height: 42px;
  }

  .services {
    min-height: 0;
    padding: 24px 18px;

    font-size: 16px;
    line-height: 24px;
  }

  .bullet {
    margin: 0 4px;
  }

  .contact {
    margin-top: 28px;

    font-size: 31px;
    line-height: 48px;
  }

  .footer {
    min-height: 56px;
  }
}

@media (max-width: 430px) {

  .hero h1 {
    font-size: 40px;
    line-height: 48px;
  }

  .tagline {
    font-size: 32px;
    line-height: 40px;
  }

  .services {
    padding-left: 15px;
    padding-right: 15px;
  }

  .contact {
    font-size: 29px;
  }
}

/* ==========================================================================
   RT-WEB-MIG-A8
   Geometry corrections derived from live Odoo/reference measurement A7.
   This block is intentionally appended for reversible staging evaluation.
   ========================================================================== */

/* Exact Odoo hero image anchoring measured in A7. */
.hero {
  background-position: center top;
}

/*
 * Odoo's final contact paragraph contributes a 16 px bottom margin.
 * The staging reconstruction omitted it, shortening the central group
 * by 16 px and therefore moving its vertically centred position down 8 px.
 */
.contact {
  margin-bottom: 16px;
}

/* Desktop logo: Odoo reference y=20, staging A7 y=30. */
@media (min-width: 992px) {

  .desktop-header__inner {
    position: relative;
  }

  .brand {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
  }

  /*
   * Odoo language button reference:
   * x=1248.921875, y=24.765625, w=116.078125, h=34.453125.
   */
  .language {
    position: absolute;
    top: 24.765625px;
    right: 15px;

    font-size: 16px;
    line-height: 24px;
  }

  .language summary {
    width: 116.078125px;
    min-height: 34.453125px;

    padding-top: 5px;
    padding-bottom: 5px;
  }

  .language summary > span:first-child {
    font-size: 14px;
    line-height: 21px;
  }
}

/* --------------------------------------------------------------------------
   Mobile geometry measured directly against live Odoo at 390x844.
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

  /*
   * Reference:
   * header = 390 x 67.953125
   * logo   = x15 / y11.96875 / 48.015625 x 44
   */
  .mobile-header {
    height: 67.953125px;

    padding:
      10px
      15px;

    align-items: center;
  }

  .mobile-brand {
    width: 48.015625px;
    height: 44px;
  }

  .mobile-brand img {
    width: 48.015625px;
    height: 44px;
  }

  /*
   * Reference hamburger control:
   * x329 / y10 / 46 x 47.953125
   */
  .mobile-menu {
    width: 46px;
    height: 47.953125px;
  }

  .mobile-menu summary {
    width: 46px;
    height: 47.953125px;

    padding:
      10px
      8px;

    align-items: center;
  }

  .mobile-menu summary span {
    width: 30px;
    height: 3px;
  }

  /*
   * Reference hero:
   * y=67.953125
   * h=776.046875
   * padding-top=96
   * background-position=50% 0px
   */
  .hero {
    height: calc(100vh - 67.953125px);
    min-height: 0;

    padding:
      96px
      0
      0;

    background-position: center top;
  }

  /*
   * Odoo Bootstrap container at 390 px:
   * x=15, width=360.
   */
  .hero__content {
    width: 100%;
    max-width: none;

    padding:
      0
      15px;
  }

  /*
   * Live reference title:
   * 37.27px / 44.724px
   */
  .hero h1 {
    margin-bottom: 8px;

    font-size: 37.27px;
    line-height: 44.724px;
  }

  /*
   * Reference inline slogan font is 30.99px.
   * Keep the existing ~40px block line rhythm for this first controlled
   * convergence pass; A9 will determine whether an inner-span reproduction
   * is necessary.
   */
  .tagline {
    max-width: none;

    font-size: 30.99px;
    line-height: 40px;
  }

  /*
   * Keep the captured services padding for this pass.
   * Correct container width now makes its inner text width match the
   * Bootstrap/Odoo geometry much more closely.
   */
  .services {
    width: 100%;
  }

  /*
   * Reference email:
   * 30.99px / 46.485px
   */
  .contact {
    font-size: 30.99px;
    line-height: 46.485px;
  }
}

/* ==========================================================================
   RT-WEB-MIG-A10

   A9 demonstrated:
   - mobile convergence improved strongly with background anchored top;
   - desktop pixel convergence regressed strongly after applying the same
     anchoring to the reconstructed hero.

   Odoo renders the desktop background through a separate fixed/parallax
   layer. Its computed "50% 0px" is therefore not visually equivalent to
   applying "center top" directly to the reconstructed .hero.

   Restore the empirically closer desktop rendering while preserving
   A8 mobile geometry.
   ========================================================================== */

@media (min-width: 992px) {
  .hero {
    background-position: center center;
  }
}

/* ==========================================================================
   RT-WEB-MIG-A13
   Structural fidelity correction derived from RT-WEB-MIG-A12-R1.

   The outer geometry had already converged. This change reproduces:
   - the separate Odoo background layer;
   - fixed desktop / scroll mobile background behaviour;
   - Odoo's outer/inner typographic structures.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Background layer
   -------------------------------------------------------------------------- */

.hero {
  background-image: none;
}

.hero__background {
  position: absolute;
  inset: 0;

  display: block;

  pointer-events: none;

  background-image: url("/assets/background.jpg");
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
  background-attachment: scroll;
}

@media (min-width: 992px) {
  .hero__background {
    background-position: 50% 0;
    background-size: cover;
    background-attachment: fixed;
  }
}

/* --------------------------------------------------------------------------
   Desktop typography structure
   -------------------------------------------------------------------------- */

.tagline {
  margin:
    0
    0
    20px;

  font-size: 64px;
  font-weight: 700;
  line-height: 76.8px;
}

.tagline__inner {
  display: inline;

  font-size: 48px;
  font-weight: 700;
  line-height: 57.6px;
}

.services {
  display: block;

  min-height: 75px;
  padding: 24px;

  color: #fff;
  background: rgba(0, 0, 0, .50);

  font-size: 16px;
  font-weight: 400;
  line-height: 24px;

  text-align: center;
}

.services__lead {
  margin: 0;

  font-size: 18px;
  font-weight: 300;
  line-height: 27px;

  text-align: center;
}

.services__inner {
  display: inline;

  color: #fff;

  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
}

.contact {
  margin:
    20px
    0
    16px;

  color: #fff;

  font-size: 18px;
  font-weight: 300;
  line-height: 27px;

  text-align: center;
}

.contact__inner {
  display: inline;

  color: #fff;

  font-size: 48px;
  font-weight: 300;
  line-height: 72px;
}

/* --------------------------------------------------------------------------
   Mobile typography structure
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

  .hero__background {
    background-position: 50% 0;
    background-size: cover;
    background-attachment: scroll;
  }

  .tagline {
    max-width: none;

    margin:
      0
      0
      20px;

    font-size: 37.27px;
    font-weight: 700;
    line-height: 44.724px;
  }

  .tagline__inner {
    font-size: 30.99px;
    font-weight: 700;
    line-height: 37.188px;
  }

  .services {
    width: 100%;
    min-height: 0;

    padding: 24px;

    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }

  .services__lead {
    margin: 0;

    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
  }

  .services__inner {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
  }

  .contact {
    margin:
      20px
      0
      16px;

    font-size: 18px;
    font-weight: 300;
    line-height: 27px;
  }

  .contact__inner {
    font-size: 30.99px;
    font-weight: 300;
    line-height: 46.485px;
  }
}

/*
 * Supersede the older max-width:430 direct-services padding rule.
 * Odoo's actual mobile outer block uses 24 px horizontal padding.
 */
@media (max-width: 430px) {
  .services {
    padding: 24px;
  }
}

/* ==========================================================================
   RT-WEB-MIG-A16
   Final localized fidelity correction.

   Evidence:
   - RT-WEB-MIG-A15: reference html/body are viewport-sized and overflow hidden.
   - RT-WEB-MIG-A15-R1: exact Odoo language and mobile-toggle geometry.
   - RT-WEB-MIG-A15-R2: central text/font raster is already validated.
   - RT-WEB-MIG-A15-R3: exact current candidate selectors established.

   Scope deliberately excludes hero, background and main content.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Root viewport / scroll model
   Reference:
     html/body height = viewport
     min-height = 0
     overflow = hidden
   -------------------------------------------------------------------------- */

html,
body {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* --------------------------------------------------------------------------
   Desktop phone
   Reproduce an inline text formatting context rather than a flex text item.

   Candidate before A16:
     text x=94, element height=21

   Reference:
     text x=100.5625, glyph/inline box height=17
   -------------------------------------------------------------------------- */

.phone {
  display: block;

  color: #212529;

  font-size: 14px;
  font-weight: 400;
  line-height: 21px;

  white-space: nowrap;
}

.phone__icon {
  display: inline-block;

  width: 9.5625px;
  margin-right: 16px;

  color: #212529;

  font-size: 12px;
  line-height: 21px;

  text-align: center;
  vertical-align: baseline;
}

.phone > span:last-child {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;

  vertical-align: baseline;
}

/* --------------------------------------------------------------------------
   Desktop language control
   Reference Bootstrap/Odoo geometry:
     outer 116.078125 x 34.453125
     padding 5 / 24 / 5 / 24
     radius 800
     text 14 / 21
     ::after caret: 8 x 4, margin-left 4.08, vertical-align 4.08
   -------------------------------------------------------------------------- */

.language summary {
  box-sizing: border-box;

  display: inline-block;

  width: 116.078125px;
  height: 34.453125px;
  min-height: 34.453125px;

  padding: 5px 24px;

  border: 0;
  border-radius: 800px;

  background: rgba(0, 0, 0, .05);
  color: #212529;

  font-size: 16px;
  font-weight: 400;
  line-height: 24px;

  text-align: left;
  vertical-align: middle;

  list-style: none;
}

.language summary::-webkit-details-marker {
  display: none;
}

.language summary > span:first-child {
  display: inline;

  color: #212529;

  font-size: 14px;
  font-weight: 400;
  line-height: 21px;

  vertical-align: middle;
}

.language__arrow {
  display: none;
}

.language summary::after {
  content: "";

  display: inline-block;

  width: 0;
  height: 0;

  margin-left: 4.08px;

  vertical-align: 4.08px;

  border-top: 4px solid #212529;
  border-right: 4px solid transparent;
  border-bottom: 0;
  border-left: 4px solid transparent;
}

/* --------------------------------------------------------------------------
   Mobile Bootstrap-style toggle
   Reference:
     control x329 / y10 / 46 x 47.953125
     icon x340 / y22.953125 / 24 x 24
     rgba(0,0,0,.55)
     Bootstrap navbar-toggler SVG
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

  .mobile-menu summary {
    box-sizing: border-box;

    position: relative;

    display: block;

    width: 46px;
    height: 47.953125px;

    padding: 0;

    border: 0;
    border-radius: 2px;

    background: transparent;
    color: rgba(0, 0, 0, .55);

    list-style: none;
  }

  .mobile-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu summary > span {
    display: none;
  }

  .mobile-menu summary::before {
    content: "";

    position: absolute;

    left: 11px;
    top: 12.953125px;

    display: block;

    width: 24px;
    height: 24px;

    background-image:
      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }

  .mobile-menu summary::after {
    content: none;
  }
}

/* ==========================================================================
   RT-WEB-MIG-A25
   Human-approved footer visibility correction.

   Preserve the validated header/hero/content geometry.
   The existing footer is removed from normal flow and anchored to the
   viewport bottom so that the white attribution band remains visible without
   changing the hero's dimensions or introducing page scrolling.
   ========================================================================== */

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
}