/* =========================================================
   LIKESTAR PUBLICATIONS
   GLOBAL STYLESHEET
========================================================= */


/* =========================================================
   GOOGLE FONTS
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

  --blue: #0057b8;
  --blue-dark: #003b7a;
  --blue-light: #eaf4ff;

  --orange: #ff7a00;
  --orange-dark: #df6500;
  --orange-light: #fff1e3;

  --white: #ffffff;
  --black: #0b1728;
  --text: #26364a;
  --muted: #718096;

  --border: #e6ebf2;
  --light: #f7f9fc;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-sm:
    0 8px 25px rgba(11, 23, 40, 0.06);

  --shadow-md:
    0 18px 45px rgba(11, 23, 40, 0.10);

  --container: 1280px;

  --font-body: "DM Sans", sans-serif;
  --font-heading: "Plus Jakarta Sans", sans-serif;

  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  --transition-smooth:
    0.65s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   RESET
========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--white);

  color: var(--text);

  font-family: var(--font-body);

  font-size: 16px;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;
}

img {
  display: block;

  max-width: 100%;
}

a {
  color: inherit;

  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;

  cursor: pointer;
}

ul,
ol {
  margin: 0;

  padding: 0;

  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}


/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.container {
  width: min(
    calc(100% - 64px),
    var(--container)
  );

  margin-inline: auto;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4 {
  color: var(--black);

  font-family: var(--font-heading);

  line-height: 1.15;

  letter-spacing: -0.035em;
}

h1 {
  font-size: clamp(
    3rem,
    5.5vw,
    5.5rem
  );

  font-weight: 800;
}

h2 {
  font-size: clamp(
    2.25rem,
    4vw,
    4rem
  );

  font-weight: 800;
}

h3 {
  font-size: 1.25rem;

  font-weight: 700;
}

p {
  color: var(--muted);
}


/* =========================================================
   LIKESTAR — COMPLETE HEADER
========================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 1000;

  width: 100%;

  background: rgba(255, 255, 255, 0.97);

  border-bottom: 1px solid rgba(230, 235, 242, 0.85);

  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease,
    -webkit-backdrop-filter 0.25s ease;
}


/* =========================================================
   SCROLLED HEADER
========================================================= */

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.94);

  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);

  box-shadow:
    0 8px 30px rgba(11, 23, 40, 0.07);
}


/* =========================================================
   NAVBAR — FULL WIDTH
========================================================= */

.navbar {
  width: 100%;
  max-width: none;

  min-height: 82px;

  margin: 0;

  padding: 0 50px;

  display: flex;
  align-items: center;

  gap: 40px;
}


/* =========================================================
   LOGO
========================================================= */

.navbar .logo {
  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  padding: 0;

  text-decoration: none;
}

.navbar .logo img {
  display: block;

  width: auto;
  height: 48px;

  object-fit: contain;
}


/* =========================================================
   RIGHT HEADER AREA
========================================================= */

.navbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 26px;

  margin-left: auto;

  min-width: 0;
}


/* =========================================================
   MAIN NAVIGATION
========================================================= */

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 28px;

  min-width: 0;
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.nav-menu .nav-link {
  position: relative;

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

  min-height: 44px;

  color: var(--text);

  font-family: var(--font-body);
  font-size: 0.91rem;
  font-weight: 600;

  line-height: 1;

  white-space: nowrap;

  text-decoration: none;

  transition:
    color 0.2s ease;
}


/* =========================================================
   NAV LINK HOVER
========================================================= */

.nav-menu .nav-link:hover {
  color: var(--blue);
}


/* =========================================================
   NAV ACTIVE
========================================================= */

.nav-menu .nav-link.active {
  color: var(--blue);
}


/* =========================================================
   NAV UNDERLINE
========================================================= */

.nav-menu .nav-link::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 4px;

  width: 100%;
  height: 2px;

  background: var(--orange);

  border-radius: 10px;

  transform: scaleX(0);

  transform-origin: center;

  transition:
    transform 0.2s ease;
}


.nav-menu .nav-link:hover::after,
.nav-menu .nav-link.active::after {
  transform: scaleX(1);
}


/* =========================================================
   GET A QUOTE BUTTON
========================================================= */

.nav-menu .nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding: 0 19px;

  color: var(--white);

  background: var(--blue);

  border: 1px solid var(--blue);
  border-radius: 9px;

  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;

  line-height: 1;

  white-space: nowrap;

  text-decoration: none;

  box-shadow: none;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.nav-menu .nav-button:hover {
  color: var(--white);

  background: var(--blue-dark);

  border-color: var(--blue-dark);

  transform: translateY(-1px);

  box-shadow:
    0 8px 20px rgba(0, 87, 184, 0.20);
}


/* =========================================================
   CUSTOMER ACCOUNT CONTAINER
========================================================= */

.customer-account {
  position: relative;

  flex: 0 0 auto;
}


/* =========================================================
   SIGN IN
========================================================= */

.account-login {
  min-height: 42px;

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

  gap: 8px;

  padding: 0 12px;

  color: var(--black);

  background: transparent;

  border-radius: 10px;

  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;

  line-height: 1;

  white-space: nowrap;

  text-decoration: none;

  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}


.account-login:hover {
  color: var(--blue);

  background: var(--blue-light);
}


/* =========================================================
   SIGN-IN ICON
========================================================= */

.account-login-icon {
  width: 18px;
  height: 18px;

  display: grid;
  place-items: center;

  flex: 0 0 18px;
}


.account-login-icon svg {
  width: 18px;
  height: 18px;
}


/* =========================================================
   LOGGED-IN ACCOUNT BUTTON
========================================================= */

.account-profile {
  min-height: 44px;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding: 4px 9px 4px 5px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: var(--white);

  color: var(--black);

  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;

  line-height: 1;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.account-profile:hover,
.account-profile[aria-expanded="true"] {
  background: var(--light);

  border-color: #cdd8e6;

  box-shadow:
    var(--shadow-sm);
}


/* =========================================================
   ACCOUNT AVATAR
========================================================= */

.account-avatar {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex: 0 0 34px;

  overflow: hidden;

  border-radius: 50%;

  background: var(--blue-light);

  color: var(--blue);

  font-size: 12px;
  font-weight: 800;
}


.account-avatar img {
  display: none;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.account-avatar-fallback {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;
}


/* =========================================================
   ACCOUNT NAME
========================================================= */

.account-name {
  max-width: 105px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   ACCOUNT CHEVRON
========================================================= */

.account-chevron {
  width: 15px;
  height: 15px;

  flex: 0 0 15px;

  transition:
    transform 0.2s ease;
}


.account-profile[aria-expanded="true"] .account-chevron {
  transform: rotate(180deg);
}


/* =========================================================
   ACCOUNT DROPDOWN
========================================================= */

.account-dropdown {
  position: absolute;

  top: calc(100% + 12px);
  right: 0;

  width: 285px;

  padding: 8px;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: var(--white);

  box-shadow:
    0 20px 50px rgba(11, 23, 40, 0.14);

  z-index: 1001;
}


/* =========================================================
   DROPDOWN HEADER
========================================================= */

.account-dropdown-header {
  display: flex;
  align-items: center;

  gap: 12px;

  padding: 11px;
}


/* =========================================================
   DROPDOWN AVATAR
========================================================= */

.account-dropdown-avatar {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  flex: 0 0 42px;

  overflow: hidden;

  border-radius: 50%;

  background: var(--blue-light);

  color: var(--blue);

  font-size: 14px;
  font-weight: 800;
}


.account-dropdown-avatar img {
  display: none;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   DROPDOWN IDENTITY
========================================================= */

.account-dropdown-identity {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.account-dropdown-identity strong {
  overflow: hidden;

  color: var(--black);

  font-size: 14px;
  font-weight: 700;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.account-dropdown-identity span {
  overflow: hidden;

  color: var(--muted);

  font-size: 12px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   DROPDOWN DIVIDER
========================================================= */

.account-dropdown-divider {
  height: 1px;

  margin: 6px 5px;

  background: var(--border);
}


/* =========================================================
   DROPDOWN LINKS
========================================================= */

.account-dropdown-link {
  width: 100%;
  min-height: 44px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding: 0 11px;

  border: 0;
  border-radius: 9px;

  background: transparent;

  color: var(--text);

  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;

  line-height: 1;

  text-align: left;

  text-decoration: none;

  cursor: pointer;

  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}


.account-dropdown-link:hover {
  background: var(--light);

  color: var(--blue);
}


.account-dropdown-link svg {
  width: 17px;
  height: 17px;

  flex: 0 0 17px;
}


/* =========================================================
   SIGN OUT
========================================================= */

.account-logout {
  color: #b42318;
}


.account-logout:hover {
  background: #fff5f5;

  color: #b42318;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle {
  display: none;

  width: 44px;
  height: 44px;

  align-items: center;
  justify-content: center;

  flex-direction: column;

  gap: 5px;

  padding: 0;

  border: 0;
  border-radius: 8px;

  background: transparent;

  cursor: pointer;

  flex: 0 0 44px;
}


.menu-toggle span {
  display: block;

  width: 23px;
  height: 2px;

  background: var(--black);

  border-radius: 10px;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    background-color 0.2s ease;
}


/* =========================================================
   HAMBURGER → X
========================================================= */

.menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}


.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}


.menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 900px) {

  .navbar {
    min-height: 72px;

    width: 100%;

    padding: 0 18px;

    gap: 12px;
  }


  /* ---------------------------------------------
     LOGO
  --------------------------------------------- */

  .navbar .logo img {
    height: 43px;
  }


  /* ---------------------------------------------
     RIGHT AREA
  --------------------------------------------- */

  .navbar-right {
    margin-left: auto;

    gap: 8px;
  }


  /* ---------------------------------------------
     MOBILE MENU BUTTON
  --------------------------------------------- */

  .menu-toggle {
    display: flex;
  }


  /* ---------------------------------------------
     NAV MENU
     
     IMPORTANT:
     main.js uses .open
  --------------------------------------------- */

  .nav-menu {
    position: fixed;

    top: 72px;
    left: 0;
    right: 0;

    width: 100%;

    max-height: calc(100vh - 72px);

    overflow-y: auto;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 5px;

    padding: 18px;

    background: var(--white);

    border-top: 1px solid var(--border);

    box-shadow:
      0 20px 40px rgba(11, 23, 40, 0.10);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    pointer-events: none;

    transition:
      opacity 0.2s ease,
      visibility 0.2s ease,
      transform 0.2s ease;
  }


  /* ---------------------------------------------
     OPEN MOBILE MENU
  --------------------------------------------- */

  .nav-menu.open {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
  }


  /* ---------------------------------------------
     MOBILE NAV LINKS
  --------------------------------------------- */

  .nav-menu .nav-link {
    width: 100%;

    min-height: 50px;

    justify-content: flex-start;

    padding: 0 14px;

    border-radius: 9px;

    font-size: 15px;
  }


  .nav-menu .nav-link::after {
    display: none;
  }


  .nav-menu .nav-link:hover,
  .nav-menu .nav-link.active {
    background: var(--blue-light);

    color: var(--blue);
  }


  /* ---------------------------------------------
     MOBILE QUOTE BUTTON
  --------------------------------------------- */

  .nav-menu .nav-button {
    width: 100%;

    min-height: 50px;

    margin-top: 5px;

    padding: 0 16px;

    border-radius: 9px;

    font-size: 14px;
  }


  /* ---------------------------------------------
     CUSTOMER ACCOUNT
  --------------------------------------------- */

  .nav-menu .customer-account {
    width: 100%;

    margin-top: 5px;
  }


  .nav-menu .account-login,
  .nav-menu .account-profile {
    width: 100%;

    justify-content: flex-start;
  }


  .nav-menu .account-login {
    min-height: 50px;

    padding: 0 14px;
  }


  .nav-menu .account-profile {
    min-height: 52px;

    padding: 7px 10px;
  }


  .nav-menu .account-name {
    max-width: none;
  }


  /* ---------------------------------------------
     MOBILE DROPDOWN
  --------------------------------------------- */

  .nav-menu .account-dropdown {
    position: static;

    width: 100%;

    margin-top: 7px;

    box-shadow: none;

    border-color: var(--border);
  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

  .navbar {
    min-height: 68px;

    padding: 0 14px;
  }


  .navbar .logo img {
    height: 39px;
  }


  .menu-toggle {
    width: 42px;
    height: 42px;

    flex-basis: 42px;
  }


  /* ---------------------------------------------
     MOBILE MENU — TIGHTER SPACING
  --------------------------------------------- */

  .nav-menu {
    top: 68px;

    max-height: calc(100vh - 68px);

    padding: 12px 14px;

    gap: 2px;
  }


  /* ---------------------------------------------
     NAVIGATION ITEMS
  --------------------------------------------- */

  .nav-menu .nav-link {
    min-height: 44px;
  }


  /* ---------------------------------------------
     GET A QUOTE
  --------------------------------------------- */

  .nav-menu .nav-button {
    min-height: 46px;

    margin-top: 3px;
  }


  /* ---------------------------------------------
     CUSTOMER ACCOUNT
  --------------------------------------------- */

  .nav-menu .customer-account {
    margin-top: 3px;
  }


  .nav-menu .account-login {
    min-height: 44px;
  }


  .nav-menu .account-profile {
    min-height: 46px;
  }


  .account-name {
    max-width: 130px;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

  .navbar {
    padding: 0 10px;
  }


  .navbar .logo img {
    height: 36px;
  }


  .nav-menu {
    padding: 10px 12px;

    gap: 1px;
  }


  .nav-menu .nav-link {
    min-height: 42px;
  }


  .nav-menu .nav-button {
    min-height: 44px;

    margin-top: 2px;
  }


  .nav-menu .customer-account {
    margin-top: 2px;
  }


  .nav-menu .account-login {
    min-height: 42px;
  }


  .nav-menu .account-profile {
    min-height: 44px;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .site-header,
  .nav-menu,
  .nav-link,
  .nav-link::after,
  .nav-button,
  .account-login,
  .account-profile,
  .account-chevron,
  .account-dropdown-link,
  .menu-toggle span {
    transition: none;
  }

}

/* =========================================================
   HERO — FULL IMAGE
========================================================= */

.hero {
  position: relative;

  min-height: 850px;

  padding-top: 82px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: var(--blue-dark);

  isolation: isolate;
}


/* =========================================================
   HERO BACKGROUND
========================================================= */

.hero-background {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  z-index: -3;

  overflow: hidden;
}

.hero-background img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;

  object-position: center center;

  transform: scale(1.02);

  animation:
    heroImageZoom
    16s
    ease-out
    forwards;

  will-change: transform;
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.hero-overlay {
  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0, 24, 52, 0.76) 0%,
      rgba(0, 35, 72, 0.60) 22%,
      rgba(0, 45, 91, 0.34) 42%,
      rgba(0, 45, 91, 0.12) 62%,
      rgba(0, 30, 65, 0.02) 82%,
      rgba(0, 30, 65, 0) 100%
    );
}


/* =========================================================
   HERO BOTTOM FADE
========================================================= */

.hero::after {
  content: "";

  position: absolute;

  z-index: -1;

  left: 0;
  right: 0;
  bottom: 0;

  height: 150px;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 28, 58, 0.16) 100%
    );
}


/* =========================================================
   HERO CONTENT WRAPPER
========================================================= */

.hero-content-wrapper {
  position: relative;

  z-index: 2;

  width: 100%;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-image .hero-content {
  max-width: 780px;

  padding:
    125px
    0
    185px;

  animation:
    heroContentIn
    0.9s
    var(--transition-smooth)
    both;
}


/* =========================================================
   HERO BADGE
========================================================= */

.hero-badge {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding:
    8px
    13px;

  color: var(--white);

  background:
    rgba(255, 255, 255, 0.10);

  border:
    1px solid
    rgba(255, 255, 255, 0.22);

  border-radius: 100px;

  font-size: 0.78rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.07em;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-badge span {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  background: var(--orange);

  border-radius: 50%;

  box-shadow:
    0 0 0 5px
    rgba(255, 122, 0, 0.12);
}


/* =========================================================
   HERO HEADING
========================================================= */

.hero-image h1 {
  max-width: 780px;

  margin-top: 24px;

  color: var(--white);
}

.hero-image h1 span {
  display: block;

  color: var(--orange);
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-image .hero-content > p {
  max-width: 680px;

  margin-top: 27px;

  color:
    rgba(255, 255, 255, 0.90);

  font-size: 1.08rem;

  line-height: 1.8;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions {
  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: 36px;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 52px;

  padding:
    0 21px;

  border:
    1px solid transparent;

  border-radius: 9px;

  font-size: 0.91rem;

  font-weight: 700;

  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-orange {
  color: var(--white);

  background: var(--orange);

  box-shadow:
    0 10px 25px
    rgba(255, 122, 0, 0.22);
}

.btn-orange:hover {
  background: var(--orange-dark);
}

.btn-dark {
  color: var(--white);

  background: var(--black);
}

.btn-dark:hover {
  background: #17263a;
}

.btn-outline-light {
  color: var(--white);

  background:
    rgba(255, 255, 255, 0.08);

  border-color:
    rgba(255, 255, 255, 0.45);

  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.btn-outline-light:hover {
  background: var(--white);

  color: var(--blue);

  border-color: var(--white);
}

.btn-outline {
  color: var(--black);

  background: transparent;

  border-color:
    rgba(11, 23, 40, 0.20);
}

.btn-outline:hover {
  color: var(--blue);

  border-color: var(--blue);

  background: var(--blue-light);
}


/* =========================================================
   HERO HIGHLIGHTS
========================================================= */

.hero-highlights {
  display: flex;

  align-items: center;

  margin-top: 58px;

  max-width: 560px;
}

.hero-highlights > div:not(.highlight-line) {
  display: flex;

  flex-direction: column;

  gap: 2px;
}

.hero-highlights strong {
  color: var(--orange);

  font-family: var(--font-heading);

  font-size: 0.78rem;
}

.hero-highlights span {
  color: var(--white);

  font-size: 0.83rem;

  font-weight: 700;
}

.highlight-line {
  width: 1px;
  height: 35px;

  margin:
    0 23px;

  background:
    rgba(255, 255, 255, 0.25);
}


/* =========================================================
   HERO MARQUEE
========================================================= */

.hero-bottom {
  position: absolute;

  z-index: 5;

  bottom: 0;
  left: 0;
  right: 0;

  height: 68px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background:
    rgba(0, 87, 184, 0.94);

  border-top:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.12);
}

.hero-marquee {
  width: 100%;

  overflow: hidden;

  mask-image:
    linear-gradient(
      to right,
      transparent,
      black 5%,
      black 95%,
      transparent
    );

  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent,
      black 5%,
      black 95%,
      transparent
    );
}

.hero-marquee-track {
  width: max-content;

  display: flex;

  align-items: center;

  gap: 42px;

  white-space: nowrap;

  animation:
    likestarMarquee
    35s
    linear
    infinite;

  will-change: transform;
}

.hero-marquee-track span {
  display: inline-flex;

  align-items: center;

  color: var(--white);

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.02em;
}

.hero-marquee:hover
.hero-marquee-track {
  animation-play-state: paused;
}


/* =========================================================
   SECTIONS
========================================================= */

.section {
  padding:
    120px
    0;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {
  display: grid;

  grid-template-columns:
    minmax(180px, 0.35fr)
    minmax(0, 1fr);

  gap: 70px;

  margin-bottom: 65px;
}

.section-heading h2 {
  max-width: 720px;
}

.section-heading h2 span,
.why h2 span,
.cta h2 span {
  display: block;

  color: var(--blue);
}

.section-heading p {
  max-width: 650px;

  margin-top: 20px;

  font-size: 1rem;

  line-height: 1.8;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.section-label {
  display: flex;

  align-items: center;

  gap: 12px;

  color: var(--blue);

  font-size: 0.74rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.08em;
}

.section-label span:first-child {
  color: var(--orange);
}


/* =========================================================
   SERVICES
========================================================= */

.services {
  background: var(--white);
}


/* =========================================================
   SERVICE LIST
========================================================= */

.service-list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid var(--border);
}

.service-item {
  min-width: 0;

  min-height: 76px;

  display: grid;

  grid-template-columns:
    44px
    minmax(0, 1fr)
    30px;

  align-items: center;

  gap: 16px;

  padding:
    16px
    18px;

  color: var(--black);

  text-decoration: none;

  border-bottom:
    1px solid var(--border);

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    padding-left 0.25s ease;
}

.service-item:nth-child(odd) {
  border-right:
    1px solid var(--border);
}

.service-item:hover {
  background: var(--blue);

  color: var(--white);

  padding-left: 24px;
}

.service-number {
  font-family: var(--font-heading);

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--muted);
}

.service-item:hover
.service-number {
  color:
    rgba(255, 255, 255, 0.70);
}

.service-name {
  font-family: var(--font-heading);

  font-size: 1rem;

  font-weight: 700;

  line-height: 1.35;
}

.service-arrow {
  font-size: 1.1rem;

  font-weight: 700;

  text-align: right;

  transition:
    transform 0.25s ease;
}

.service-item:hover
.service-arrow {
  transform:
    translate(3px, -3px);
}

.service-item-more {
  color: var(--blue);
}

.service-item-more
.service-number {
  color: var(--orange);
}

.service-item-more:hover {
  background: var(--orange);

  color: var(--white);
}

.service-item-more:hover
.service-number {
  color: var(--white);
}


/* =========================================================
   QUOTE STRIP
========================================================= */

.quote-strip {
  padding:
    34px
    0;

  background: var(--blue);
}

.quote-strip-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;
}

.quote-strip-label {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(255, 255, 255, 0.65);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.quote-strip h2 {
  color: var(--white);

  font-size:
    clamp(
      1.5rem,
      3vw,
      2.3rem
    );
}


/* =========================================================
   WORK / PORTFOLIO
========================================================= */

.work {
  background: var(--light);
}

.work-grid {
  display: grid;

  grid-template-columns:
    1.35fr
    0.85fr;

  gap: 24px;
}

.work-card {
  display: block;

  overflow: hidden;

  background: var(--white);

  border:
    1px solid var(--border);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.work-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    var(--shadow-md);
}

.work-large {
  grid-row:
    span 2;
}

.work-image {
  position: relative;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: var(--light);
}

.work-large .work-image {
  aspect-ratio: 16 / 14;
}

.work-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.7s
    cubic-bezier(.22, 1, .36, 1);
}

.work-card:hover
.work-image img {
  transform: scale(1.05);
}

.work-overlay {
  position: absolute;

  left: 16px;
  bottom: 16px;

  padding:
    7px 11px;

  color: var(--white);

  background:
    rgba(0, 59, 122, 0.85);

  border-radius: 7px;

  font-size: 0.72rem;

  font-weight: 700;
}

.work-info {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    20px 22px;
}

.work-info > div > span {
  display: block;

  margin-bottom: 5px;

  color: var(--orange);

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.work-info h3 {
  font-size: 1.08rem;
}

.work-info > span {
  color: var(--blue);

  font-size: 1.3rem;

  font-weight: 700;
}


/* =========================================================
   CENTER LINK
========================================================= */

.center-link {
  display: flex;

  justify-content: center;

  margin-top: 45px;
}

.text-link {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: var(--blue);

  font-size: 0.9rem;

  font-weight: 700;

  transition:
    gap var(--transition-fast),
    color var(--transition-fast);
}

.text-link:hover {
  gap: 14px;

  color: var(--orange);
}


/* =========================================================
   CUSTOMER REVIEWS
========================================================= */

.reviews {
  background: var(--white);
}


/* =========================================================
   REVIEWS SUMMARY
========================================================= */

.reviews-summary {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  padding:
    24px 0;

  margin-bottom: 30px;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.reviews-rating {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 14px;
}

.reviews-rating strong {
  color: var(--black);

  font-family: var(--font-heading);

  font-size: 2rem;

  font-weight: 800;

  line-height: 1;
}

.rating-stars,
.review-stars {
  display: flex;

  align-items: center;

  gap: 3px;

  color: var(--orange);

  line-height: 1;
}

.rating-stars span,
.review-stars span {
  font-size: 1rem;
}

.review-count {
  color: var(--muted);

  font-size: 0.82rem;

  font-weight: 600;
}


/* =========================================================
   REVIEWS GRID
========================================================= */

.reviews-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 20px;
}


/* =========================================================
   REVIEW CARD
========================================================= */

.review-card {
  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 280px;

  padding:
    28px;

  background: var(--light);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-md);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.review-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(0, 87, 184, 0.16);

  box-shadow:
    var(--shadow-sm);
}

.review-card-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}

.review-stars span {
  font-size: 1rem;
}

.review-text {
  margin-top: 25px;

  color: var(--text);

  font-size: 0.96rem;

  line-height: 1.8;
}

.review-author {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 30px;
}

.review-avatar {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--blue);

  background: var(--blue-light);

  border-radius: 50%;

  font-family: var(--font-heading);

  font-size: 0.85rem;

  font-weight: 800;
}

.review-author strong {
  display: block;

  color: var(--black);

  font-family: var(--font-heading);

  font-size: 0.85rem;

  font-weight: 700;
}

.review-author span {
  display: block;

  margin-top: 2px;

  color: var(--muted);

  font-size: 0.72rem;
}


/* =========================================================
   REVIEW REQUEST
========================================================= */

.review-request {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  margin-top: 22px;

  padding:
    30px;

  background:
    var(--blue-light);

  border:
    1px solid
    rgba(0, 87, 184, 0.10);

  border-radius:
    var(--radius-md);
}

.review-request-label {
  display: block;

  margin-bottom: 7px;

  color: var(--blue);

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}

.review-request h3 {
  color: var(--black);

  font-size: 1.3rem;
}

.review-request p {
  max-width: 560px;

  margin-top: 6px;

  font-size: 0.88rem;

  line-height: 1.6;
}


/* =========================================================
   WHY LIKESTAR
========================================================= */

.why {
  background: var(--white);
}

.why-grid {
  display: grid;

  grid-template-columns:
    0.85fr
    1.15fr;

  gap: 100px;

  align-items: start;
}

.why h2 {
  margin-top: 22px;
}

.why > .container
.why-grid > div:first-child > p {
  max-width: 570px;

  margin-top: 25px;

  line-height: 1.8;
}

.why-grid
.text-link {
  margin-top: 30px;
}

.why-list {
  border-top:
    1px solid var(--border);
}

.why-item {
  display: grid;

  grid-template-columns:
    60px
    minmax(0, 1fr);

  gap: 20px;

  padding:
    28px 0;

  border-bottom:
    1px solid var(--border);
}

.why-item > span {
  color: var(--orange);

  font-family: var(--font-heading);

  font-size: 0.75rem;

  font-weight: 800;
}

.why-item h3 {
  font-size: 1.05rem;
}

.why-item p {
  max-width: 620px;

  margin-top: 8px;

  font-size: 0.92rem;

  line-height: 1.7;
}


/* =========================================================
   PROCESS
========================================================= */

.process {
  background: var(--light);
}

.process-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.process-step {
  position: relative;

  padding:
    32px 25px;

  border-right:
    1px solid var(--border);
}

.process-step:last-child {
  border-right: 0;
}

.process-step > span {
  color: var(--orange);

  font-family: var(--font-heading);

  font-size: 0.75rem;

  font-weight: 800;
}

.process-icon {
  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin:
    25px 0
    20px;

  color: var(--blue);

  background: var(--blue-light);

  border-radius: 12px;

  font-size: 1.15rem;

  font-weight: 800;
}

.process-step h3 {
  font-size: 1rem;

  line-height: 1.4;
}

.process-step p {
  margin-top: 10px;

  font-size: 0.88rem;

  line-height: 1.7;
}


/* =========================================================
   FINAL CTA
========================================================= */

.cta {
  background: var(--white);
}

.cta-box {
  position: relative;

  min-height: 430px;

  display: flex;

  align-items: center;

  overflow: hidden;

  padding:
    70px;

  background:
    var(--orange-light);

  border-radius:
    var(--radius-lg);

  border:
    1px solid
    rgba(255, 122, 0, 0.14);
}

.cta-content {
  position: relative;

  z-index: 2;

  max-width: 650px;
}

.cta h2 {
  margin-top: 22px;

  font-size:
    clamp(
      2.3rem,
      4.5vw,
      4.2rem
    );
}

.cta h2 span {
  color: var(--blue);
}

.cta-content > p {
  max-width: 570px;

  margin-top: 20px;

  font-size: 1rem;

  line-height: 1.8;
}

.cta-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 30px;
}


/* =========================================================
   CTA PATTERN
========================================================= */

.cta-pattern {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;

  width: 43%;

  overflow: hidden;

  pointer-events: none;
}

.cta-pattern span {
  position: absolute;

  top: 50%;
  right: 8%;

  transform:
    translateY(-50%)
    rotate(-8deg);

  color:
    rgba(0, 87, 184, 0.08);

  font-family: var(--font-heading);

  font-size:
    clamp(
      8rem,
      18vw,
      15rem
    );

  font-weight: 800;

  line-height: 1;
}

.cta-pattern div {
  position: absolute;

  border:
    2px solid
    rgba(0, 87, 184, 0.08);

  border-radius: 50%;
}

.cta-pattern div:nth-of-type(1) {
  width: 250px;
  height: 250px;

  right: -70px;
  top: -50px;
}

.cta-pattern div:nth-of-type(2) {
  width: 350px;
  height: 350px;

  right: -110px;
  bottom: -170px;
}

.cta-pattern div:nth-of-type(3) {
  width: 170px;
  height: 170px;

  right: 180px;
  bottom: -100px;
}


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

.footer {
  padding:
    75px 0
    30px;

  color:
    rgba(255, 255, 255, 0.72);

  background:
    var(--black);
}

.footer-grid {
  display: grid;

  grid-template-columns:
    1.5fr
    0.75fr
    0.9fr
    1fr;

  gap: 60px;

  padding-bottom: 55px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.10);
}

.footer-brand .logo img {
  height: 45px;
}

.footer-brand p {
  max-width: 370px;

  margin-top: 20px;

  color:
    rgba(255, 255, 255, 0.60);

  font-size: 0.9rem;

  line-height: 1.8;
}

.footer-column {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}

.footer-column h4 {
  margin-bottom: 17px;

  color: var(--white);

  font-size: 0.85rem;

  letter-spacing: -0.01em;
}

.footer-column a {
  margin-bottom: 9px;

  color:
    rgba(255, 255, 255, 0.60);

  font-size: 0.86rem;

  transition:
    color var(--transition-fast);
}

.footer-column a:hover {
  color: var(--orange);
}

.footer-column .footer-cta {
  margin-top: 10px;

  color: var(--orange);

  font-weight: 700;
}

.footer-bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding-top: 25px;

  color:
    rgba(255, 255, 255, 0.42);

  font-size: 0.75rem;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.scroll-reveal {
  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity 0.75s
      var(--transition-smooth),
    transform 0.75s
      var(--transition-smooth);

  transition-delay:
    var(--reveal-delay, 0ms);
}

.scroll-reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   HERO ANIMATIONS
========================================================= */

@keyframes likestarMarquee {

  from {
    transform:
      translateX(0);
  }

  to {
    transform:
      translateX(-50%);
  }

}

@keyframes heroImageZoom {

  from {
    transform:
      scale(1.02);
  }

  to {
    transform:
      scale(1.055);
  }

}

@keyframes heroContentIn {

  from {
    opacity: 0;

    transform:
      translateY(28px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

  /*
     Header deliberately stays full-width.
     Page content remains constrained separately.
  */

  .navbar {
    width: calc(100% - 96px);

    min-height: 88px;
  }

  .logo img {
    height: 52px;
  }

  .nav-menu {
    gap: 34px;
  }

  .hero {
    min-height: 900px;

    padding-top: 88px;
  }

  .hero-image .hero-content {
    max-width: 820px;

    padding:
      145px
      0
      190px;
  }

  .hero-image h1 {
    font-size:
      clamp(
        4rem,
        5vw,
        5.8rem
      );
  }

  .section {
    padding:
      140px 0;
  }

}


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1100px) {

  .container {
    width:
      calc(100% - 48px);
  }

  /*
     Header still spans almost the entire viewport.
  */

  .navbar {
    width:
      calc(100% - 48px);

    gap: 25px;
  }

  .nav-menu {
    gap: 23px;
  }

  .hero {
    min-height: 800px;
  }

  .hero-image .hero-content {
    max-width: 700px;

    padding:
      115px
      0
      170px;
  }

  .hero-background img {
    object-position: 58% center;
  }

  .section-heading {
    gap: 45px;
  }

  .why-grid {
    gap: 60px;
  }

  .footer-grid {
    gap: 35px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .container {
    width:
      calc(100% - 40px);
  }


  /* -------------------------------------------------------
     NAVIGATION
  ------------------------------------------------------- */

  .navbar {
    width:
      calc(100% - 40px);

    min-height: 76px;
  }

  .menu-toggle {
    display: flex;
  }

  .nav-menu {
    position: absolute;

    top:
      calc(100% + 8px);

    left: 20px;
    right: 20px;

    width: auto;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    margin-left: 0;

    padding: 10px;

    background: var(--white);

    border:
      1px solid var(--border);

    border-radius: 15px;

    box-shadow:
      var(--shadow-md);

    opacity: 0;

    visibility: hidden;

    transform:
      translateY(-10px);

    transition:
      opacity var(--transition-normal),
      visibility var(--transition-normal),
      transform var(--transition-normal);
  }

  /*
     IMPORTANT:
     main.js uses .open.
  */

  .nav-menu.open {
    opacity: 1;

    visibility: visible;

    transform:
      translateY(0);
  }

  .nav-link {
    width: 100%;

    padding:
      13px 12px;
  }

  .nav-link::after {
    display: none;
  }

  .nav-button {
    width: 100%;

    margin-top: 8px;
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    min-height: 780px;
  }

  .hero-background img {
    object-position: 64% center;

    transform:
      scale(1.025);
  }

  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(0, 24, 52, 0.76) 0%,
        rgba(0, 35, 72, 0.58) 28%,
        rgba(0, 45, 91, 0.28) 52%,
        rgba(0, 30, 65, 0.08) 78%,
        rgba(0, 30, 65, 0) 100%
      );
  }

  .hero-image .hero-content {
    max-width: 650px;

    padding:
      105px
      0
      165px;
  }

  .hero-image h1 {
    font-size:
      clamp(
        2.9rem,
        7vw,
        4.6rem
      );
  }


  /* -------------------------------------------------------
     SECTIONS
  ------------------------------------------------------- */

  .section {
    padding:
      95px 0;
  }

  .section-heading {
    grid-template-columns:
      1fr;

    gap: 20px;

    margin-bottom: 45px;
  }

  .why-grid {
    grid-template-columns:
      1fr;

    gap: 60px;
  }


  /* -------------------------------------------------------
     REVIEWS
  ------------------------------------------------------- */

  .reviews-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .review-request {
    align-items: flex-start;
  }


  /* -------------------------------------------------------
     PROCESS
  ------------------------------------------------------- */

  .process-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .process-step:nth-child(2) {
    border-right: 0;
  }

  .process-step:nth-child(-n + 2) {
    border-bottom:
      1px solid var(--border);
  }


  /* -------------------------------------------------------
     CTA
  ------------------------------------------------------- */

  .cta-box {
    padding:
      55px;
  }


  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  .footer-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 45px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .container {
    width:
      calc(100% - 32px);
  }


  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .navbar {
    width:
      calc(100% - 32px);

    min-height: 70px;
  }

  .logo img {
    height: 43px;
  }

  .nav-menu {
    left: 16px;
    right: 16px;
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .hero {
    min-height: 760px;

    padding-top: 70px;
  }

  .hero-background img {
    object-position: 72% center;

    transform:
      scale(1.03);
  }

  .hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 25, 52, 0.06) 0%,
        rgba(0, 25, 52, 0.10) 20%,
        rgba(0, 25, 52, 0.24) 42%,
        rgba(0, 25, 52, 0.55) 68%,
        rgba(0, 25, 52, 0.78) 100%
      );
  }

  .hero-image .hero-content {
    max-width: 100%;

    padding:
      90px
      0
      150px;
  }

  .hero-badge {
    font-size: 0.68rem;

    padding:
      7px 10px;
  }

  .hero-image h1 {
    margin-top: 19px;

    font-size:
      clamp(
        2.55rem,
        12vw,
        4rem
      );

    line-height: 1.08;
  }

  .hero-image .hero-content > p {
    margin-top: 21px;

    font-size: 0.96rem;

    line-height: 1.7;
  }

  .hero-actions {
    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    margin-top: 28px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-highlights {
    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap: 12px;

    margin-top: 35px;
  }

  .hero-highlights > div:not(.highlight-line) {
    gap: 3px;
  }

  .hero-highlights strong {
    font-size: 0.67rem;
  }

  .hero-highlights span {
    font-size: 0.70rem;

    line-height: 1.3;
  }

  .highlight-line {
    display: none;
  }


  /* -------------------------------------------------------
     MARQUEE
  ------------------------------------------------------- */

  .hero-bottom {
    height: 58px;
  }

  .hero-marquee-track {
    gap: 28px;

    animation-duration:
      30s;
  }

  .hero-marquee-track span {
    font-size: 0.70rem;
  }


  /* -------------------------------------------------------
     SECTIONS
  ------------------------------------------------------- */

  .section {
    padding:
      75px 0;
  }

  .section-heading {
    margin-bottom: 35px;
  }

  .section-heading h2 {
    font-size:
      clamp(
        2rem,
        10vw,
        3rem
      );
  }

  .section-heading p {
    margin-top: 15px;

    font-size: 0.92rem;
  }


  /* -------------------------------------------------------
     SERVICES
  ------------------------------------------------------- */

  .service-list {
    grid-template-columns: 1fr;
  }

  .service-item,
  .service-item:nth-child(odd) {
    grid-template-columns:
      36px
      minmax(0, 1fr)
      24px;

    min-height: 64px;

    padding:
      14px 12px;

    border-right: 0;
  }

  .service-item:hover {
    padding-left: 16px;
  }

  .service-name {
    font-size: 0.92rem;
  }


  /* -------------------------------------------------------
     QUOTE STRIP
  ------------------------------------------------------- */

  .quote-strip {
    padding:
      28px 0;
  }

  .quote-strip-inner {
    flex-direction: column;

    align-items: flex-start;
  }

  .quote-strip-inner .btn {
    width: 100%;
  }


  /* -------------------------------------------------------
     WORK
  ------------------------------------------------------- */

  .work-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .work-large {
    grid-row: auto;
  }

  .work-large .work-image {
    aspect-ratio: 16 / 10;
  }


  /* -------------------------------------------------------
     REVIEWS
  ------------------------------------------------------- */

  .reviews-summary {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
  }

  .reviews-summary .btn {
    width: 100%;
  }

  .reviews-grid {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .review-card {
    min-height: 0;

    padding:
      24px;
  }

  .review-request {
    flex-direction: column;

    align-items: stretch;

    padding:
      25px;
  }

  .review-request .btn {
    width: 100%;
  }


  /* -------------------------------------------------------
     WHY
  ------------------------------------------------------- */

  .why-grid {
    gap: 45px;
  }

  .why-item {
    grid-template-columns:
      38px
      minmax(0, 1fr);

    gap: 12px;

    padding:
      22px 0;
  }


  /* -------------------------------------------------------
     PROCESS
  ------------------------------------------------------- */

  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-step,
  .process-step:nth-child(2) {
    border-right: 0;
  }

  .process-step:nth-child(-n + 3) {
    border-bottom:
      1px solid var(--border);
  }


  /* -------------------------------------------------------
     CTA
  ------------------------------------------------------- */

  .cta-box {
    min-height: 0;

    padding:
      42px 28px;

    border-radius:
      var(--radius-md);
  }

  .cta h2 {
    font-size:
      clamp(
        2.1rem,
        10vw,
        3.2rem
      );
  }

  .cta-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .cta-actions .btn {
    width: 100%;
  }

  .cta-pattern {
    width: 70%;

    opacity: 0.7;
  }


  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  .footer {
    padding:
      60px 0
      25px;
  }

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 7px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .container {
    width:
      calc(100% - 24px);
  }

  .navbar {
    width:
      calc(100% - 24px);

    min-height: 66px;
  }

  .logo img {
    height: 39px;
  }

  .hero {
    min-height: 735px;

    padding-top: 66px;
  }

  .hero-background img {
    object-position: 77% center;

    transform:
      scale(1.035);
  }

  .hero-image .hero-content {
    padding:
      80px
      0
      140px;
  }

  .hero-image h1 {
    font-size:
      clamp(
        2.35rem,
        13vw,
        3.3rem
      );
  }

  .hero-image .hero-content > p {
    font-size: 0.91rem;
  }

  .hero-highlights {
    gap: 8px;
  }

  .hero-highlights strong {
    font-size: 0.62rem;
  }

  .hero-highlights span {
    font-size: 0.64rem;
  }

  .hero-bottom {
    height: 54px;
  }

  .section {
    padding:
      65px 0;
  }

  .section-label {
    font-size: 0.68rem;
  }

  .service-item,
  .service-item:nth-child(odd) {
    grid-template-columns:
      30px
      minmax(0, 1fr)
      20px;

    padding:
      13px 8px;
  }

  .service-name {
    font-size: 0.87rem;
  }

  .review-card {
    padding:
      21px;
  }

  .review-text {
    font-size: 0.91rem;
  }

  .cta-box {
    padding:
      35px 22px;
  }

}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 360px) {

  .container {
    width:
      calc(100% - 20px);
  }

  .navbar {
    width:
      calc(100% - 20px);
  }

  .hero-image h1 {
    font-size: 2.15rem;
  }

  .hero-highlights {
    grid-template-columns: 1fr;
  }

  .hero-highlights > div:not(.highlight-line) {
    flex-direction: row;

    align-items: baseline;

    justify-content: space-between;

    gap: 10px;
  }

  .hero-highlights span {
    text-align: right;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
  animation-duration: 0.01ms !important;

  animation-iteration-count: 1 !important;

  scroll-behavior: auto !important;

  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }

}


/* =========================================================
   PERFORMANCE
========================================================= */

.hero-background img,
.hero-marquee-track,
.work-image img {
  will-change: transform;
}

/* =======================================================
TRUSTED ORGANIZATIONS
======================================================= */

.trusted-section {
padding: 90px 0;
background: var(--white);
border-top: 1px solid var(--border);
}

.trusted-header {
max-width: 760px;
margin: 0 auto 52px;
text-align: center;
}

.trusted-header .section-eyebrow {
display: inline-block;
margin-bottom: 12px;
color: var(--blue);
font-family: var(--font-body);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.14em;
line-height: 1.2;
}

.trusted-title {
margin: 0;
color: var(--black);
font-family: var(--font-heading);
font-size: clamp(1.8rem, 3vw, 2.55rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.035em;
}

.trusted-description {
max-width: 680px;
margin: 18px auto 0;
color: var(--muted);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
line-height: 1.75;
}

/* =======================================================
ORGANIZATION LOGOS
======================================================= */

.trusted-logos {
width: 100%;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: center;
gap: 24px;
}

.trusted-logo {
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
padding: 22px 28px;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}

.trusted-logo:hover {
border-color: #d5deea;
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}

.trusted-logo img {
display: block;
width: auto;
max-width: 100%;
height: 58px;
object-fit: contain;

opacity: 0.72;
transition:
filter 0.25s ease,
opacity 0.25s ease,
transform 0.25s ease;
}

.trusted-logo:hover img {

opacity: 1;
transform: scale(1.03);
}

/* =======================================================
LOADING STATE
======================================================= */

.trusted-loading {
grid-column: 1 / -1;
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 500;
}

/* =======================================================
EMPTY STATE
======================================================= */

.trusted-empty {
max-width: 600px;
margin: 0 auto;
padding: 24px;
text-align: center;
color: var(--muted);
font-family: var(--font-body);
font-size: 0.9rem;
line-height: 1.6;
}

.trusted-empty p {
margin: 0;
}

/* =======================================================
TABLET
======================================================= */

@media (max-width: 1000px) {

.trusted-section {
padding: 78px 0;
}

.trusted-header {
margin-bottom: 42px;
}

.trusted-logos {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}

.trusted-logo {
min-height: 110px;
padding: 20px;
}

.trusted-logo img {
height: 52px;
}

}

/* =======================================================
MOBILE
======================================================= */

@media (max-width: 700px) {

.trusted-section {
padding: 68px 0;
}

.trusted-header {
margin-bottom: 34px;
}

.trusted-title {
font-size: 1.8rem;
line-height: 1.2;
}

.trusted-description {
margin-top: 15px;
font-size: 0.92rem;
line-height: 1.7;
}

.trusted-logos {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

.trusted-logo {
min-height: 100px;
padding: 18px 14px;
border-radius: 14px;
}

.trusted-logo img {
height: 48px;
}

}

/* =======================================================
SMALL PHONES
======================================================= */

@media (max-width: 420px) {

.trusted-section {
padding: 58px 0;
}

.trusted-header {
margin-bottom: 28px;
}

.trusted-header .section-eyebrow {
font-size: 0.7rem;
}

.trusted-title {
font-size: 1.55rem;
}

.trusted-description {
font-size: 0.88rem;
}

.trusted-logos {
gap: 10px;
}

.trusted-logo {
min-height: 88px;
padding: 14px 10px;
border-radius: 12px;
}

.trusted-logo img {
height: 42px;
}

}

/* =======================================================
REDUCED MOTION
======================================================= */

@media (prefers-reduced-motion: reduce) {

.trusted-logo,
.trusted-logo img {
transition: none;
}

}


/* =========================================================
   HOMEPAGE PORTFOLIO SKELETON
========================================================= */

.work-skeleton {
    pointer-events: none;
}


.skeleton-image {
    position: relative;

    overflow: hidden;

    background:
        #edf1f6;
}


/*
   Animated shine
*/

.skeleton-image::after,
.skeleton-line::after,
.skeleton-arrow::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.65) 50%,
            transparent 100%
        );

    transform:
        translateX(-100%);

    animation:
        skeletonShimmer
        1.5s
        infinite;
}


.skeleton-image::after {
    position: absolute;

    z-index: 2;
}


.skeleton-info {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        17px
        3px;
}


.skeleton-text {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 9px;
}


.skeleton-line {
    position: relative;

    display: block;

    height: 8px;

    overflow: hidden;

    background:
        #e7ebf1;

    border-radius: 10px;
}


.skeleton-line-small {
    width: 90px;
}


.skeleton-line-large {
    width: 180px;

    height: 14px;
}


.skeleton-arrow {
    position: relative;

    flex-shrink: 0;

    width: 37px;

    height: 37px;

    overflow: hidden;

    background:
        #e7ebf1;

    border-radius: 50%;
}


@keyframes skeletonShimmer {

    100% {
        transform:
            translateX(100%);
    }

}


/* =========================================================
   HOMEPAGE PORTFOLIO IMAGE PLACEHOLDER
========================================================= */

.work-image-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background:
        linear-gradient(
            135deg,
            #eaf4ff,
            #f7f9fc
        );
}


.work-placeholder-icon {
    width: 58px;

    height: 58px;

    display: grid;

    place-items: center;

    color: #ff7a00;

    background: #ffffff;

    border-radius: 50%;

    box-shadow:
        0 8px 25px
        rgba(
            11,
            23,
            40,
            0.06
        );

    font-size: 1.25rem;
}


.work-image-placeholder > span {
    color: #718096;

    font-size: 0.72rem;

    font-weight: 700;
}


/* =========================================================
   MOBILE SKELETON
========================================================= */

@media (max-width: 600px) {

    .skeleton-line-large {
        width: 140px;
    }

}

/* =========================================================
   TRUSTED ORGANIZATIONS
========================================================= */

.trusted-logos {
    position: relative;
    width: 100%;
    margin-top: 48px;
    overflow: hidden;

    /*
     * Soft fade at both edges.
     */
    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            #000 7%,
            #000 93%,
            transparent 100%
        );
}

/* =========================================================
   MOVING TRACK
========================================================= */

.trusted-logo-track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 72px;

    animation:
        trustedLogoSlide
        38s
        linear
        infinite;

    will-change: transform;
}

/*
 * Slow continuous movement.
 */
@keyframes trustedLogoSlide {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}

/* =========================================================
   LOGO ITEM
========================================================= */

.trusted-logo-item {
    width: 150px;
    height: 90px;

    flex: 0 0 150px;

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

    padding: 10px;
}

.trusted-logo-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

  

    opacity: 0.72;

    transition:
        filter 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}

.trusted-logo-item:hover img {
  

    opacity: 1;

    transform: scale(1.04);
}

/* =========================================================
   SKELETON
========================================================= */

.trusted-logo-skeleton-track {
    animation-duration: 42s;
}

.trusted-logo-skeleton {
    pointer-events: none;
}

.trusted-logo-skeleton-shape {
    position: relative;

    width: 120px;
    height: 54px;

    overflow: hidden;

    border-radius: 8px;

    background: #edf1f5;
}

.trusted-logo-skeleton-shape::after {
    content: "";

    position: absolute;
    inset: 0;

    transform: translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.8),
            transparent
        );

    animation:
        trustedLogoSkeletonShimmer
        1.7s
        infinite;
}

@keyframes trustedLogoSkeletonShimmer {

    100% {
        transform: translateX(100%);
    }

}

/* =========================================================
   ERROR
========================================================= */

.trusted-error {
    width: 100%;
    padding: 20px;
    text-align: center;
}

.trusted-error p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .trusted-logos {
        margin-top: 34px;

        /*
         * Three logo positions are visible
         * across the mobile viewport.
         */
        mask-image:
            linear-gradient(
                to right,
                transparent,
                #000 10%,
                #000 90%,
                transparent
            );

        -webkit-mask-image:
            linear-gradient(
                to right,
                transparent,
                #000 10%,
                #000 90%,
                transparent
            );
    }

    .trusted-logo-track {
        gap: 28px;

        animation-duration: 32s;
    }

    .trusted-logo-item {
        width: 105px;
        height: 72px;

        flex-basis: 105px;

        padding: 7px;
    }

    .trusted-logo-skeleton-shape {
        width: 82px;
        height: 42px;
    }

}

/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

    .trusted-logo-track {
        gap: 22px;

        animation-duration: 30s;
    }

    .trusted-logo-item {
        width: 92px;
        height: 66px;

        flex-basis: 92px;
    }

    .trusted-logo-skeleton-shape {
        width: 72px;
        height: 38px;
    }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .trusted-logo-track {
        animation: none;
        transform: none;
    }

}