/* =========================================================
   ALGOLUMIO
   RESPONSIVE WEBSITE
   DESKTOP SERVICES DROPDOWN
   MOBILE HAMBURGER WITHOUT SERVICES DROPDOWN
========================================================= */


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

:root {

  --ink: #14201f;
  --muted: #64736f;

  --paper: #f7f9f7;
  --panel: #ffffff;

  --line: #dfe7e3;

  --teal: #0b827a;
  --teal-dark: #075b58;

  --mint: #d9f2e7;

  --amber: #c98218;

  --charcoal: #081311;

  --shadow:
    0 18px 45px rgba(10, 35, 30, 0.10);

  --container:
    1180px;

  --header-height:
    72px;
}


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

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


html {
  scroll-behavior: smooth;

  scroll-padding-top:
    calc(var(--header-height) + 15px);
}


body {
  margin: 0;

  background: var(--paper);

  color: var(--ink);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.6;

  overflow-x: hidden;
}


img {
  display: block;
  max-width: 100%;
}


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


button,
input,
textarea {
  font: inherit;
}


button {
  border: 0;
}


/* =========================================================
   PAGE CONTAINER
========================================================= */

.page-container {

  width: 100%;

  max-width:
    var(--container);

  margin-left: auto;
  margin-right: auto;

  padding-left: 32px;
  padding-right: 32px;
}


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

.site-header {

  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 1000;

  width: 100%;

  min-height:
    var(--header-height);

  padding:
    10px clamp(18px, 4vw, 64px);

  background:
    rgba(247, 249, 246, 0.97);

  border-bottom:
    1px solid rgba(20, 32, 31, 0.08);

  backdrop-filter:
    blur(10px);

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


/* =========================================================
   HEADER INNER
========================================================= */

.header-inner {

  width: 100%;

  max-width:
    1380px;

  min-height:
    52px;

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;
}


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

.brand {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-start;

  flex:
    0 0 auto;

  min-width:
    0;
}


.brand img {

  display:
    block;

  width:
    auto;

  height:
    42px;

  max-width:
    180px;
}


/* =========================================================
   HAMBURGER
   IMPORTANT:
   HIDDEN BY DEFAULT ON DESKTOP
========================================================= */

.menu-toggle {

  display:
    none;

  width:
    42px;

  height:
    42px;

  padding:
    8px;

  background:
    transparent;

  border:
    0;

  cursor:
    pointer;

  flex:
    0 0 auto;
}


.menu-toggle span {

  display:
    block;

  width:
    25px;

  height:
    2px;

  margin:
    5px auto;

  background:
    var(--ink);

  border-radius:
    2px;

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


/* Hamburger → X */

.menu-toggle[aria-expanded="true"]
span:nth-child(1) {

  transform:
    translateY(7px)
    rotate(45deg);
}


.menu-toggle[aria-expanded="true"]
span:nth-child(2) {

  opacity:
    0;
}


.menu-toggle[aria-expanded="true"]
span:nth-child(3) {

  transform:
    translateY(-7px)
    rotate(-45deg);
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.site-nav {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    clamp(12px, 2vw, 30px);

  margin-left:
    auto;

  min-width:
    0;

  flex:
    0 1 auto;

  font-size:
    1rem;

  white-space:
    nowrap;
}


/* =========================================================
   MAIN NAV LINKS
========================================================= */

.site-nav > a,
.nav-dropdown-toggle {

  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    44px;

  flex:
    0 0 auto;

  font-weight:
    600;

  white-space:
    nowrap;

  transition:
    color 0.25s ease,
    background 0.25s ease;
}


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

.site-nav > a::after,
.nav-dropdown-toggle::before {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    2px;

  width:
    0;

  height:
    2px;

  background:
    var(--teal);

  transition:
    width 0.25s ease;
}
/* =========================================================
   ACTIVE NAVIGATION
========================================================= */

.site-nav > a.active,
.nav-dropdown-toggle.active {

  color:
    var(--teal);
}


/* Active underline */

.site-nav > a.active::after,
.nav-dropdown-toggle.active::before {

  width:
    100%;
}

.site-nav > a:hover,
.nav-dropdown-toggle:hover {

  color:
    var(--teal);
}


.site-nav > a:hover::after,
.nav-dropdown-toggle:hover::before {

  width:
    100%;
}


/* =========================================================
   SERVICES DESKTOP DROPDOWN
========================================================= */

.nav-dropdown {

  position:
    relative;

  flex:
    0 0 auto;
}


/* =========================================================
   SERVICES HOVER BRIDGE
   Prevents the dropdown from disappearing when the mouse
   moves from "Services" to the dropdown menu.
   
   Desktop only.
========================================================= */

@media (min-width: 651px) {

  .nav-dropdown::after {

    content:
      "";

    position:
      absolute;

    top:
      100%;

    left:
      0;

    width:
      100%;

    height:
      9px;

    background:
      transparent;
  }

}


/* Desktop arrow is created by CSS.
   There is NO arrow element in HTML. */

.nav-dropdown-toggle::after {

  content:
    "▾";

  display:
    inline-block;

  margin-left:
    6px;

  font-size:
    0.72rem;

  line-height:
    1;

  transition:
    transform 0.25s ease;
}


.nav-dropdown:hover
.nav-dropdown-toggle::after {

  transform:
    rotate(180deg);
}


/* =========================================================
   DESKTOP DROPDOWN MENU
========================================================= */

/* =========================================================
   SERVICES DROPDOWN
   ALGOLUMIO COLOR + ANIMATION
========================================================= */

.nav-dropdown-menu {

  position:
    absolute;

  top:
    calc(100% + 9px);

  left:
    50%;

  width:
    260px;

  padding:
    8px 0;

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

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

  border-radius:
    10px;

  box-shadow:
    0 16px 38px rgba(10, 35, 30, 0.12);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translate(-50%, 6px);

  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;

  z-index:
    1002;
}


/* =========================================================
   SHOW DROPDOWN
========================================================= */

.nav-dropdown:hover
.nav-dropdown-menu,

.nav-dropdown:focus-within
.nav-dropdown-menu {

  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translate(-50%, 0);
}


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

.nav-dropdown-menu a {

  position:
    relative;

  display:
    block;

  padding:
    11px 18px;

  color:
    var(--ink);

  font-size:
    0.95rem;

  font-weight:
    500;

  white-space:
    normal;

  border-radius:
    6px;

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


/* =========================================================
   HOVER / FOCUS
========================================================= */

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus {

  color:
    var(--teal-dark);

  background:
    #eef8f4;

  padding-left:
    21px;
}


/* =========================================================
   SUBTLE TEAL INDICATOR
========================================================= */

.nav-dropdown-menu a::before {

  content:
    "";

  position:
    absolute;

  left:
    8px;

  top:
    50%;

  width:
    2px;

  height:
    0;

  border-radius:
    2px;

  background:
    var(--teal);

  transform:
    translateY(-50%);

  transition:
    height 0.18s ease;
}


.nav-dropdown-menu a:hover::before,
.nav-dropdown-menu a:focus::before {

  height:
    16px;
}


/* =========================================================
   SERVICES ARROW ANIMATION
========================================================= */

.nav-dropdown-toggle::after {

  transition:
    transform 0.22s ease,
    color 0.22s ease;
}


.nav-dropdown:hover
.nav-dropdown-toggle::after,

.nav-dropdown:focus-within
.nav-dropdown-toggle::after {

  transform:
    rotate(180deg);

  color:
    var(--teal);
}

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

.hero {

  position:
    relative;

  min-height:
    760px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  padding:
    120px 0 80px;
}


.hero-image {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center;

  z-index:
    0;
}


.hero-overlay {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  background:
    linear-gradient(
      90deg,
      rgba(3, 14, 12, 0.95) 0%,
      rgba(3, 14, 12, 0.80) 35%,
      rgba(3, 14, 12, 0.35) 70%,
      rgba(3, 14, 12, 0.20) 100%
    );
}


.hero-content {

  position:
    relative;

  z-index:
    2;

  max-width:
    800px;

  color:
    white;
}


.eyebrow {

  margin:
    0 0 18px;

  color:
    #e6a63d;

  font-size:
    0.78rem;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


h1 {

  margin:
    0 0 25px;

  max-width:
    850px;

  font-size:
    clamp(2.8rem, 6vw, 5.4rem);

  line-height:
    0.98;

  letter-spacing:
    -0.04em;
}


h1 span {

  color:
    #80d7c8;
}


.hero-copy {

  max-width:
    700px;

  margin:
    0;

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

  font-size:
    clamp(1rem, 2vw, 1.2rem);
}


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

.hero-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    32px;
}


.button {

  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    10px 21px;

  border-radius:
    8px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


.button:hover {

  transform:
    translateY(-2px);
}


.button.primary {

  background:
    var(--teal);

  color:
    white;

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

  box-shadow:
    0 8px 20px rgba(11,130,122,0.25);
}


.button.primary:hover {

  background:
    var(--teal-dark);
}


.button.secondary {

  color:
    white;

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

  border:
    1px solid rgba(255,255,255,0.35);
}


.button.secondary:hover {

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


/* =========================================================
   HERO BADGES
========================================================= */

.hero-badges {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;

  margin-top:
    34px;
}


.hero-badges span {

  padding:
    7px 13px;

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

  border-radius:
    50px;

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

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

  font-size:
    0.78rem;

  backdrop-filter:
    blur(5px);
}


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

h2 {

  margin:
    0;

  font-size:
    clamp(2rem, 4vw, 3.35rem);

  line-height:
    1.05;

  letter-spacing:
    -0.025em;
}


h3 {

  margin:
    0;
}


.section-kicker {

  margin:
    0 0 13px;

  color:
    var(--amber);

  font-size:
    0.78rem;

  font-weight:
    800;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


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

.section {

  width:
    100%;

  max-width:
    var(--container);

  margin:
    0 auto;

  padding:
    100px 32px;
}


/* =========================================================
   INTRO
========================================================= */

.intro {

  display:
    grid;

  grid-template-columns:
    1fr 0.82fr;

  gap:
    80px;

  align-items:
    start;
}


.intro-text {

  padding-top:
    7px;
}


.intro-text p {

  margin:
    0 0 18px;

  color:
    var(--muted);

  font-size:
    1.05rem;
}


.intro-text p:last-child {

  margin-bottom:
    0;
}


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

.services-section {

  padding-top:
    80px;
}


.section-heading {

  max-width:
    760px;

  margin-bottom:
    40px;
}


.section-heading > p:last-child {

  margin-top:
    18px;

  color:
    var(--muted);
}


.service-grid {

  display:
    grid;

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

  gap:
    20px;
}


.service-card {

  position:
    relative;

  min-height:
    290px;

  padding:
    28px;

  background:
    var(--panel);

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

  border-radius:
    12px;

  box-shadow:
    0 7px 24px rgba(20,32,31,0.055);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;

  scroll-margin-top:
    100px;
}


.service-card:hover {

  transform:
    translateY(-8px);

  border-color:
    rgba(11,130,122,0.45);

  box-shadow:
    0 20px 42px rgba(20,32,31,0.13);
}

.service-icon {

  width:
    50px;

  height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    22px;

  border-radius:
    10px;

  background:
    var(--mint);

  color:
    var(--teal-dark);
}


.service-icon svg {

  width:
    27px;

  height:
    27px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}

/* =========================================================
   STEP 4 - SERVICE ICON ANIMATION
========================================================= */

.service-icon {

  transition:
    transform 0.35s ease,
    background 0.35s ease,
    color 0.35s ease;
}


.service-card:hover .service-icon {

  transform:
    translateY(-3px)
    scale(1.06);

  background:
    var(--teal);

  color:
    white;
}


.service-icon svg {

  transition:
    transform 0.35s ease;
}


.service-card:hover .service-icon svg {

  transform:
    scale(1.08);
}
.service-card h3 {

  margin-bottom:
    10px;

  font-size:
    1.18rem;
}


.service-card p {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    0.95rem;
}


.service-link {

  position:
    absolute;

  bottom:
    24px;

  left:
    28px;

  color:
    var(--teal-dark);

  font-size:
    0.86rem;

  font-weight:
    800;
}


.service-link {

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}


.service-link:hover {

  color:
    var(--teal);

  transform:
    translateX(4px);
}


/* =========================================================
   INDUSTRIES
========================================================= */

.industries {

  background:
    var(--charcoal);

  color:
    white;
}


.industries-inner {

  display:
    grid;

  grid-template-columns:
    0.85fr 1fr;

  gap:
    70px;

  padding:
    90px 32px;
}


.industries h2 {

  max-width:
    520px;
}


.industries-copy {

  max-width:
    500px;

  margin-top:
    20px;

  color:
    rgba(255,255,255,0.68);
}


.industry-list {

  display:
    grid;

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

  gap:
    12px;
}


.industry-list span {

  padding:
    18px;

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

  border-radius:
    9px;

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

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

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}


.industry-list span:hover {

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

  transform:
    translateY(-2px);
}


/* =========================================================
   TRAINING
========================================================= */

.split {

  display:
    grid;

  grid-template-columns:
    1fr 0.85fr;

  gap:
    80px;

  align-items:
    start;
}


.training-intro {

  max-width:
    600px;

  margin-top:
    22px;

  color:
    var(--muted);

  font-size:
    1.05rem;
}


.training-panel {

  padding:
    32px;

  background:
    white;

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

  border-radius:
    12px;

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


.training-panel > p {

  margin-top:
    0;

  color:
    var(--muted);
}


.check-list {

  display:
    grid;

  gap:
    13px;

  margin:
    25px 0 0;

  padding:
    0;

  list-style:
    none;
}


.check-list li {

  position:
    relative;

  padding-left:
    28px;

  color:
    #30423f;
}


.check-list li::before {

  content:
    "✓";

  position:
    absolute;

  left:
    0;

  top:
    0;

  color:
    var(--teal);

  font-weight:
    900;
}


/* =========================================================
   CONTACT
========================================================= */

.contact {

  display:
    grid;

  grid-template-columns:
    1fr 0.9fr;

  gap:
    75px;

  align-items:
    start;
}


.contact-details {

  padding-top:
    5px;
}


.contact-intro {

  max-width:
    560px;

  margin-top:
    20px;

  color:
    var(--muted);

  font-size:
    1.05rem;
}


.contact-info {

  display:
    grid;

  gap:
    24px;

  margin-top:
    35px;
}


.contact-item {

  display:
    flex;

  align-items:
    center;

  gap:
    16px;
}


.contact-icon {

  flex:
    0 0 52px;

  width:
    52px;

  height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    var(--mint);

  color:
    var(--teal-dark);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}


.contact-icon svg {

  width:
    25px;

  height:
    25px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.contact-item:hover .contact-icon {

  background:
    var(--teal);

  color:
    white;

  transform:
    scale(1.08)
    rotate(-4deg);

  box-shadow:
    0 8px 18px rgba(11,130,122,0.20);
}

.contact-item {

  transition:
    transform 0.25s ease;
}


.contact-item:hover {

  transform:
    translateX(4px);
}


.contact-item span {

  display:
    block;

  margin-bottom:
    3px;

  color:
    var(--muted);

  font-size:
    0.72rem;

  font-weight:
    800;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.contact-item strong {

  display:
    block;

  font-size:
    1.05rem;
}


.contact-item small {

  display:
    block;

  margin-top:
    2px;

  color:
    var(--muted);
}


.contact-item a {

  color:
    var(--teal-dark);
}


.contact-item a:hover {

  color:
    var(--teal);
}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form {

  display:
    grid;

  gap:
    16px;

  padding:
    32px;

  background:
    white;

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

  border-radius:
    12px;

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


.contact-form h3 {

  margin-bottom:
    6px;

  font-size:
    1.45rem;
}


label {

  display:
    grid;

  gap:
    7px;

  color:
    #31413d;

  font-size:
    0.88rem;

  font-weight:
    700;
}


input,
textarea {

  width:
    100%;

  min-height:
    46px;

  padding:
    11px 13px;

  border:
    1px solid #cfd9d4;

  border-radius:
    8px;

  background:
    white;

  color:
    var(--ink);

  outline:
    none;

  resize:
    vertical;

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


textarea {

  min-height:
    125px;
}


input::placeholder,
textarea::placeholder {

  color:
    #9aa7a3;
}


input:focus,
textarea:focus {

  border-color:
    var(--teal);

  box-shadow:
    0 0 0 3px
    rgba(11,130,122,0.13);

  transform:
    translateY(-1px);
}


.contact-form .button {

  width:
    100%;

  margin-top:
    4px;
}


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

.site-footer {

  background:
    #ffffff;

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


.footer-inner {

  width:
    100%;

  max-width:
    var(--container);

  margin:
    0 auto;

  padding:
    38px 32px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    40px;
}


.footer-company {

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  max-width:
    360px;
}


.footer-company strong {

  color:
    var(--ink);

  font-size:
    1.08rem;

  font-weight:
    800;
}


.footer-company span {

  color:
    var(--muted);

  font-size:
    0.84rem;

  line-height:
    1.5;
}


.footer-location {

  margin-top:
    4px;

  font-size:
    0.78rem !important;
}


.footer-links {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    10px 22px;

  max-width:
    650px;
}


.footer-links a {

  color:
    var(--muted);

  font-size:
    0.84rem;

  font-weight:
    700;

  transition:
    color 0.2s ease;
}


.footer-links a:hover {

  color:
    var(--teal);
}


.footer-bottom {

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

  background:
    #f7f9f7;
}


.footer-bottom-inner {

  width:
    100%;

  max-width:
    var(--container);

  margin:
    0 auto;

  padding:
    15px 32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;
}


.footer-bottom-inner span {

  color:
    #7a8884;

  font-size:
    0.76rem;

  line-height:
    1.5;
}


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

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {

  outline:
    3px solid rgba(11,130,122,0.35);

  outline-offset:
    3px;
}


/* =========================================================
   DESKTOP / SMALL LAPTOP
========================================================= */

@media (max-width: 1100px) {

  .site-header {

    padding-left:
      24px;

    padding-right:
      24px;
  }


  .header-inner {

    gap:
      18px;
  }


  .brand img {

    max-width:
      160px;
  }


  .site-nav {

    gap:
      17px;

    font-size:
      0.92rem;
  }


  .service-grid {

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


  .intro,
  .split,
  .contact,
  .industries-inner {

    gap:
      45px;
  }
}


/* =========================================================
   TABLET
   STILL NO HAMBURGER HERE
========================================================= */

@media (max-width: 900px) {

  .site-header {

    padding-left:
      18px;

    padding-right:
      18px;
  }


  .header-inner {

    gap:
      14px;
  }


  .brand img {

    height:
      39px;

    max-width:
      145px;
  }


  .site-nav {

    gap:
      12px;

    font-size:
      0.86rem;
  }


  .site-nav > a,
  .nav-dropdown-toggle {

    min-height:
      40px;
  }


  .intro,
  .split,
  .contact,
  .industries-inner {

    grid-template-columns:
      1fr;
  }


  .industries-inner {

    padding-top:
      75px;

    padding-bottom:
      75px;
  }
}


/* =========================================================
   MOBILE ONLY
   IMPORTANT:
   ALL MOBILE HEADER RULES ARE INSIDE THIS MEDIA QUERY
========================================================= */

@media (max-width: 650px) {


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

  .site-header {

    position:
      fixed;

    padding:
      8px 14px;
  }


  .header-inner {

    width:
      100%;

    min-height:
      48px;

    position:
      relative;

    display:
      flex;

    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      center;
  }


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

  .brand {

    width:
      100%;

    height:
      40px;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;
  }


  .brand img {

    height:
      34px;

    max-width:
      145px;
  }


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

  .menu-toggle {

    display:
      block;

    position:
      absolute;

    right:
      0;

    top:
      50%;

    transform:
      translateY(-50%);
  }


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

  .site-nav {

    display:
      none;

    position:
      absolute;

    top:
      calc(100% + 8px);

    left:
      0;

    width:
      100%;

    flex-direction:
      column;

    align-items:
      stretch;

    justify-content:
      flex-start;

    gap:
      0;

    margin:
      0;

    padding:
      8px;

    background:
      #ffffff;

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

    border-radius:
      10px;

    box-shadow:
      var(--shadow);

    overflow:
      visible;

    white-space:
      normal;
  }


  /* MENU OPEN */

  .site-nav.mobile-open {

    display:
      flex;
  }


  /* =======================================================
     MOBILE NAV LINKS
  ======================================================== */

  .site-nav > a,
  .nav-dropdown-toggle {

    width:
      100%;

    min-height:
      44px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      flex-start;

    padding:
      10px 14px;

    font-size:
      0.9rem;

    font-weight:
      600;

    border-radius:
      7px;
  }


  .site-nav > a:hover,
  .nav-dropdown-toggle:hover {

    background:
      var(--mint);
  }


  /* =======================================================
     MOBILE SERVICES
     
     IMPORTANT:
     SERVICES IS ONLY A NORMAL LINK.
     NO DROPDOWN.
  ======================================================== */

  .nav-dropdown {

    width:
      100%;

    position:
      static;
  }


  /* REMOVE SERVICES ARROW COMPLETELY */

  .nav-dropdown-toggle::after {

    content:
      none !important;

    display:
      none !important;
  }


  /* =======================================================
     HIDE SERVICES SUBMENU COMPLETELY ON MOBILE
     
     !important protects against cached/old rules.
  ======================================================== */

  .nav-dropdown-menu {

    display:
      none !important;

    position:
      static !important;

    width:
      100%;

    height:
      0 !important;

    max-height:
      0 !important;

    margin:
      0 !important;

    padding:
      0 !important;

    opacity:
      0 !important;

    visibility:
      hidden !important;

    pointer-events:
      none !important;

    transform:
      none !important;

    overflow:
      hidden !important;

    border:
      0 !important;

    box-shadow:
      none !important;
  }


  /* Even if any old JS adds this class,
     submenu remains hidden */

  .nav-dropdown.mobile-dropdown-open
  .nav-dropdown-menu {

    display:
      none !important;

    visibility:
      hidden !important;

    opacity:
      0 !important;

    pointer-events:
      none !important;
  }


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

  .hero {

    min-height:
      820px;

    align-items:
      flex-start;

    padding:
      155px 0 60px;
  }


  .page-container {

    padding-left:
      20px;

    padding-right:
      20px;
  }


  .hero-image {

    object-position:
      62% center;
  }


  .hero-overlay {

    background:
      linear-gradient(
        90deg,
        rgba(3,14,12,0.96),
        rgba(3,14,12,0.72)
      );
  }


  h1 {

    font-size:
      clamp(2.35rem, 11vw, 3.5rem);

    line-height:
      1.01;
  }


  .hero-copy {

    font-size:
      0.98rem;
  }


  .hero-actions {

    flex-direction:
      column;

    width:
      100%;
  }


  .hero-actions .button {

    width:
      100%;
  }


  .hero-badges {

    margin-top:
      25px;
  }


  .hero-badges span {

    padding:
      6px 10px;

    font-size:
      0.7rem;
  }


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

  .section {

    padding:
      65px 20px;
  }


  h2 {

    font-size:
      clamp(2rem, 9vw, 2.8rem);
  }


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

  .services-section {

    padding-top:
      65px;
  }


  .service-grid {

    grid-template-columns:
      1fr;

    gap:
      15px;
  }


  .service-card {

    min-height:
      280px;

    padding:
      23px;
  }


  .service-link {

    left:
      23px;

    bottom:
      21px;
  }


  /* =======================================================
     INDUSTRIES
  ======================================================== */

  .industries-inner {

    padding:
      65px 20px;
  }


  .industry-list {

    grid-template-columns:
      1fr;
  }


  /* =======================================================
     CONTACT
  ======================================================== */

  .contact {

    gap:
      40px;
  }


  .contact-form {

    padding:
      23px;
  }


  .contact-item {

    align-items:
      flex-start;
  }


  .contact-icon {

    flex-basis:
      48px;

    width:
      48px;

    height:
      48px;
  }


  .contact-item strong {

    font-size:
      0.98rem;

    overflow-wrap:
      anywhere;
  }


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

  .footer-inner {

    padding:
      25px 20px;

    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .footer-links {

    gap:
      18px;
  }

}


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

@media (max-width: 380px) {

  .site-nav {

    gap:
      14px;
  }


  .site-nav > a,
  .nav-dropdown-toggle {

    font-size:
      0.78rem;
  }


  .hero {

    min-height:
      840px;

    padding-top:
      155px;
  }


  h1 {

    font-size:
      2.25rem;
  }


  .contact-form {

    padding:
      19px;
  }
}


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

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

  html {

    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {

    animation:
      none !important;

    transition:
      none !important;
  }
}


/* =========================================================
   CONTACT FORM STATUS
========================================================= */

.form-status {

  margin:
    4px 0 0;

  min-height:
    24px;

  font-size:
    0.88rem;

  font-weight:
    700;

  line-height:
    1.5;
}


.form-status.sending {

  color:
    var(--muted);
}


.form-status.success {

  color:
    var(--teal-dark);
}


.form-status.error {

  color:
    #b42318;
}


.contact-form .button:disabled {

  opacity:
    0.65;

  cursor:
    not-allowed;

  transform:
    none;
}

/* =========================================================
   CONTACT FORM STATUS MESSAGE
========================================================= */

.form-message {

  display: none;

  padding: 12px 14px;

  border-radius: 8px;

  font-size: 0.9rem;

  font-weight: 700;

  line-height: 1.5;
}


/* SUCCESS */

.form-message.success {

  display: block;

  background: #e4f7ed;

  border: 1px solid #a8ddc0;

  color: #17643f;
}


/* ERROR */

.form-message.error {

  display: block;

  background: #fff0f0;

  border: 1px solid #efb6b6;

  color: #a32929;
}


/* SENDING */

.form-message.sending {

  display: block;

  background: #eef6f5;

  border: 1px solid #c8dfdc;

  color: var(--teal-dark);
}


/* DISABLE BUTTON WHILE SENDING */

.contact-form button:disabled {

  opacity: 0.65;

  cursor: not-allowed;

  transform: none;
}

/* =========================================================
   STEP 3 - SCROLL REVEAL ANIMATION
========================================================= */

.reveal {

  opacity: 0;

  transform:
    translateY(28px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}


.reveal.reveal-visible {

  opacity: 1;

  transform:
    translateY(0);
}


/* Slightly different animation for service cards */

.service-card.reveal {

  transform:
    translateY(35px) scale(0.98);
}


.service-card.reveal.reveal-visible {

  transform:
    translateY(0) scale(1);
}


/* Stagger service cards */

.service-card:nth-child(1) {
  transition-delay: 0s;
}

.service-card:nth-child(2) {
  transition-delay: 0.08s;
}

.service-card:nth-child(3) {
  transition-delay: 0.16s;
}

.service-card:nth-child(4) {
  transition-delay: 0.24s;
}

.service-card:nth-child(5) {
  transition-delay: 0.32s;
}

.service-card:nth-child(6) {
  transition-delay: 0.40s;
}


/* Accessibility */

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

  .reveal,
  .service-card.reveal {

    opacity: 1;

    transform: none;

    transition: none;
  }

}

/* =========================================================
   MULTI-PAGE WEBSITE
========================================================= */


/* =========================================================
   PAGE HERO
========================================================= */

.page-hero {

  margin-top:
    var(--header-height);

  padding:
    110px 0 90px;

  background:
    linear-gradient(
      135deg,
      #075b58 0%,
      #0b827a 55%,
      #143f3c 100%
    );

  color:
    white;
}


.page-hero .page-container {

  max-width:
    900px;
}


.page-hero .eyebrow {

  margin-bottom:
    18px;
}


.page-hero h1 {

  max-width:
    900px;

  margin:
    0 0 22px;

  font-size:
    clamp(2.7rem, 6vw, 5rem);

  line-height:
    1;

  color:
    white;
}


.page-hero > .page-container > p:last-child {

  max-width:
    720px;

  margin:
    0;

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

  font-size:
    1.1rem;
}


/* =========================================================
   SERVICE DETAIL
========================================================= */

.service-detail {

  display:
    grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap:
    70px;

  align-items:
    start;
}


.service-detail > div:first-child p:last-child {

  color:
    var(--muted);

  font-size:
    1.05rem;

  margin-top:
    22px;
}


.detail-grid {

  display:
    grid;

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

  gap:
    18px;
}


.detail-card {

  padding:
    25px;

  background:
    white;

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

  border-radius:
    12px;

  box-shadow:
    0 7px 24px rgba(20,32,31,0.055);

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


.detail-card:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(11,130,122,0.40);

  box-shadow:
    0 18px 35px rgba(20,32,31,0.11);
}


.detail-card h3 {

  margin:
    0 0 9px;

  color:
    var(--ink);

  font-size:
    1.1rem;
}


.detail-card p {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    0.94rem;
}


/* =========================================================
   INDUSTRY DETAIL
========================================================= */

.industry-detail-grid {

  display:
    grid;

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

  gap:
    20px;
}


/* =========================================================
   HOME CTA
========================================================= */

.home-contact-cta {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    40px;

  padding:
    80px max(32px, calc((100vw - 1116px) / 2));

  background:
    var(--mint);
}


.home-contact-cta h2 {

  margin:
    0 0 12px;
}


.home-contact-cta p:last-child {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    1rem;
}


.center-button {

  display:
    flex;

  justify-content:
    center;

  margin-top:
    40px;
}


/* =========================================================
   SERVICE ICON SIMPLE VERSION
========================================================= */

.service-icon span {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  height:
    100%;

  font-size:
    1.45rem;

  font-weight:
    800;
}


/* =========================================================
   MULTI-PAGE ACTIVE NAVIGATION
========================================================= */

.site-nav a.current-page {

  color:
    var(--teal);
}


.site-nav a.current-page::after {

  width:
    100%;
}


/* =========================================================
   MOBILE MULTI-PAGE
========================================================= */

@media (max-width: 900px) {

  .service-detail {

    grid-template-columns:
      1fr;

    gap:
      45px;
  }


  .industry-detail-grid {

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

}


@media (max-width: 650px) {

  .page-hero {

    margin-top:
      var(--header-height);

    padding:
      90px 0 65px;
  }


  .page-hero h1 {

    font-size:
      clamp(2.4rem, 11vw, 3.5rem);
  }


  .page-hero > .page-container > p:last-child {

    font-size:
      0.98rem;
  }


  .service-detail {

    gap:
      35px;
  }


  .detail-grid {

    grid-template-columns:
      1fr;
  }


  .industry-detail-grid {

    grid-template-columns:
      1fr;
  }


  .home-contact-cta {

    flex-direction:
      column;

    align-items:
      flex-start;

    padding:
      65px 20px;
  }


  .home-contact-cta .button {

    width:
      100%;
  }

}

/* =========================================================
   MULTI-PAGE REVEAL SAFETY
========================================================= */

.page-hero.reveal {

  transform:
    translateY(15px);

}


.page-hero.reveal.reveal-visible {

  transform:
    translateY(0);

}

/* =========================================================
   ALGOLUMIO - FINAL UX / ACCESSIBILITY IMPROVEMENTS
========================================================= */


/* =========================================================
   SKIP LINK
========================================================= */

.skip-link {

  position: fixed;

  top: 10px;
  left: 10px;

  z-index: 2000;

  padding: 10px 16px;

  background: var(--teal-dark);
  color: #ffffff;

  border-radius: 7px;

  font-size: 0.9rem;
  font-weight: 700;

  transform: translateY(-150%);

  transition:
    transform 0.2s ease;
}


.skip-link:focus {

  transform: translateY(0);
}


/* =========================================================
   HEADER SCROLL STATE
========================================================= */

.site-header {

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


.site-header.header-scrolled {

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

  border-bottom-color:
    rgba(20, 32, 31, 0.12);

  box-shadow:
    0 8px 25px rgba(10, 35, 30, 0.08);
}


/* =========================================================
   BETTER BUTTON FOCUS
========================================================= */

.button:focus-visible {

  outline:
    3px solid rgba(11, 130, 122, 0.35);

  outline-offset:
    4px;
}


/* =========================================================
   MOBILE MENU IMPROVEMENTS
========================================================= */

@media (max-width: 650px) {

  .site-nav {

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

    overflow-y:
      auto;

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;
  }


  .site-nav.mobile-open {

    animation:
      mobileMenuOpen 0.2s ease both;
  }


  @keyframes mobileMenuOpen {

    from {

      opacity:
        0;

      transform:
        translateY(-6px);
    }

    to {

      opacity:
        1;

      transform:
        translateY(0);
    }

  }


  .menu-toggle {

    z-index:
      10;
  }

}


/* =========================================================
   BODY LOCK WHEN MOBILE MENU IS OPEN
========================================================= */

body.menu-open {

  overflow:
    hidden;
}


/* =========================================================
   SERVICE CARD ACCESSIBILITY
========================================================= */

.service-card:focus-within {

  border-color:
    rgba(11, 130, 122, 0.45);

  box-shadow:
    0 20px 42px rgba(20, 32, 31, 0.13);
}


/* =========================================================
   SERVICE LINK FOCUS
========================================================= */

.service-link:focus-visible {

  outline:
    2px solid var(--teal);

  outline-offset:
    4px;

  border-radius:
    4px;
}


/* =========================================================
   INDUSTRY ITEMS
========================================================= */

.industry-list span {

  will-change:
    transform;
}


/* =========================================================
   FORM AUTOFILL
========================================================= */

input:-webkit-autofill,
textarea:-webkit-autofill {

  -webkit-text-fill-color:
    var(--ink);

  transition:
    background-color 9999s ease-in-out 0s;
}


/* =========================================================
   TEXT SELECTION
========================================================= */

::selection {

  background:
    var(--mint);

  color:
    var(--teal-dark);
}


/* =========================================================
   MOBILE HEADER SAFETY
========================================================= */

@media (max-width: 650px) {

  .site-header {

    min-height:
      64px;
  }


  .header-inner {

    min-height:
      48px;
  }


  .brand {

    padding-right:
      45px;
  }

}


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

@media (min-width: 1400px) {

  .hero-content {

    max-width:
      850px;
  }


  .hero {

    min-height:
      800px;
  }

}


/* =========================================================
   MOBILE TYPOGRAPHY POLISH
========================================================= */

@media (max-width: 650px) {

  .eyebrow {

    font-size:
      0.7rem;

    letter-spacing:
      0.09em;
  }


  .hero-copy {

    line-height:
      1.65;
  }


  .section-kicker {

    font-size:
      0.7rem;
  }


  .service-card p {

    line-height:
      1.65;
  }

}


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

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

  .site-nav.mobile-open {

    animation:
      none;
  }

}