/*------------------------------------------------------------------------
# Bauhaus Drupal
# ------------------------------------------------------------------------
# Created by Symphony Themes
# Websites:  http://www.symphonythemes.com -  Email: info@symphonythemes.com
--------------------------------------------------------------------------
    1.   Custom CSS
    2.   Forms
    3.   Blog & Article
    4.   Others
--------------------------------------------------------------------------------*/
body {
  position: unset;
}
img.logo-light {
  display: none;
}
.italic {
  font-style: italic;
}
a {
  text-decoration: none;
}
.menu-list {
  top: 8rem;
}
.card-row {
  width: 100%;
}
button#edit-preview {
  display: none;
}
@media screen and (max-width: 768px) {
  .navbar .logo { padding-left: 0; }
}
@media screen and (min-width: 768px) {
  .row-images {
    margin-left: -28% !important;
    margin-right: -28% !important;
  }
:root {
  --color-primary: #f59e0b;
  --color-primary-light: #fbbf24;
  --color-primary-dark: #d97706;
  --color-primary-hover: #fcd34d;
  --color-accent-gold: #f59e0b;
  --color-navy: #0a192f;
  --color-navy-card: rgba(10, 25, 47, 0.82);
}

.text-primary {
  color: #fbbf24 !important;
}

.section:not(.text-white) .text-primary {
  color: #d97706 !important;
}
.field--name-field-tags {
  font-size: 1rem;
  margin-top: 4rem;
}
.field--name-field-tags .field__label {
  display: none;
}
.field--name-field-tags .field--label {
  color: #000;
}
.field--name-field-tags .field--item {
  color: #999; 
  display: inline;
  padding-left: 5px;
}
.field--name-field-tags .field__items li a {
  background: rgba(164, 174, 198, 0.2);
  color: #333;
  padding: 0.4rem 1rem;
  font-size: 0.7rem;
  border-radius: 0.4rem;
}
.field--name-field-tags .field__items li a:hover {
  background: #f59e0b;
  color: #08162b;
}
.field--name-field-tags .field--item a {
  color: #999 
}
.project-detail-list .field--item {
  text-align: right;
}
.card-title a:hover,
.project-hover a:hover,
.project-box a:hover,
.project-hover-2 h3:hover {
  color: #fff;
}
.addtoany_list {
  margin-top: 2.6rem;
  display: block;
}
.footer {
  margin-top: 0;
  border: none;
}

/* News */
.article-body {
  margin-top: 8.2rem;
}
.content ul.links {
  font-size: 13px;
  margin: 1rem 0;
}
h6.comment_title { display: none; }
.comments {
  margin-top: 6.8rem;
}
.grid-item .card { border: none; }
.card-row-img { background-size: cover !important; }
.inline__links .links .nav-link {
  color: #666666;
  padding: 0;
}

/* Project */
.project-content {
  font-size: 1.2857rem;
  line-height: 1.666;
  font-weight: 300;
  letter-spacing: 0;
  margin: 8.2rem 0;
}
.project-gallery .container {
  max-width: 1140px;
}
.project-gallery .js-isotope-item {
  margin-bottom: 20px;
}
.project-gallery .js-isotope-item img {
  width: 100%;
  height: auto;
}
.project-detail-list li .field {
  display: flex;
  justify-content: space-between;
}
.project-detail-list li .field .field--label {
  font-weight: 600;
}
.field--type-entity-reference {
  margin: 0;
}
/* Nav Tab */
.user-logged-in nav.tabs {
  position: fixed;
  left: 0;
  top: 80px;
  transition: all 0.5s ease 0.25s;
  z-index: 1000;
} 
.user-logged-in nav.tabs ul.tabs--primary,
.user-logged-in nav.tabs ul.primary {
  background: #fff none repeat scroll 0 0;
  border: medium none;
  list-style: outside none none;
  opacity: 0.9;
  flex-direction: column;
}
.user-logged-in nav.tabs ul.tabs--primary li {
  float: none;
  opacity: 0.8;
}
.user-logged-in nav.tabs ul.tabs--primary li a {
  margin-right: 0;
}
.user-logged-in nav.tabs ul.tabs--primary li.active a, 
.user-logged-in nav.tabs ul.tabs--primary li:hover a {
  background: #f59e0b none repeat scroll 0 0;
  border: none;
  border-radius: 0;
  color: #08162b;
  font-weight: 600;
}
.user-logged-in nav.tabs ul.tabs--primary li.active, 
.user-logged-in nav.tabs ul.tabs--primary li:hover {
  opacity: 1;
}

/* Contact form */
.contact-bg-grey input:not(#edit-submit),
.contact-bg-grey textarea {
  background: #f6f6f6 none repeat scroll 0 0 !important;
  color: #3d3d3d !important;
}
@media (min-width: 768px) {
  #contact-message-feedback-form .form-item-name,
  #contact-message-feedback-form .form-item-mail,
  #contact-message-feedback-form .field--name-subject {
    width: 32.9%;
    display: inline-block;
  }
  #contact-message-feedback-form .form-item-mail {
    padding: 0 3%;
  }
}
#contact-message-feedback-form textarea {
  padding: 15px;
}
#contact-message-feedback-form #edit-submit {
  background: #f59e0b none repeat scroll 0 0;
  color: #08162b;
  font-weight: 700;
  text-transform: uppercase;
  width: auto;
  border-radius: 4px;
  transition: all 0.25s ease;
}
#contact-message-feedback-form #edit-submit:hover {
  background: #d97706;
  color: #fff;
}
#edit-preview { display: none; }

/* Search form */
.search-page-form button.form-submit {
  padding: 18px 30px;
}

/* Pager */
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #08162b !important;
}
.pagination > li > a:hover {
  background-color: #f59e0b !important;
  color: #08162b !important;
}
.pagination > li > a, .pagination > li > span {
  color: #666 !important;
  margin: 0 15px;
  padding: 10px 20px !important;
}

/* Background Image Holder */
.project-detail {
  min-height: 500px;
  padding: 50px 30px 50px 0;
}
@media (min-width: 768px) {
  .project-detail {
    padding-left: 100px;
  }
}
@media (min-width: 991px) {
  .project-detail {
    padding-left: 200px;
  }
}
.project-detail .background-image-holder {
    will-change: transform, top;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover !important;
    background-position: 50% 50% !important;
    z-index: 0;
    transition: 0.3s linear;
    -webkit-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    opacity: 0;
    background: #232323;
  width: 100%;
}
.project-detail .project-detail-info {
  position: relative;
  z-index: 2;
}
/*
.project-detail-info {
  position: absolute !important;
  top: 0px;
  left: 120px;
}
*/

/* Navbar */
.navbar { 
  align-items: start;
  z-index: 1000 !important;
}
.navbar-clone {
  position: fixed;
  top: 0;
  left: 0;
  height: auto;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: transform 300ms ease-in-out, visibility 300ms ease-in-out;
  -moz-transition: transform 300ms ease-in-out, visibility 300ms ease-in-out;
  transition: transform 300ms ease-in-out, visibility 300ms ease-in-out;
}
.navbar-clone.navbar-stick {
  visibility: visible;
  pointer-events: auto;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
.path-frontpage .navbar-clone {
  display: none !important;
}
.navbar-toggler {
  border: 1px solid transparent;
  padding: 0;
  margin-top: -5px;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-white .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Menu Horizontal */
/*#block-mainnavigationhorizontal {
  float: right;
  margin-right: 10%;
}*/
@media (max-width: 992px){
  #block-mainnavigationhorizontal {
    display: none;
  }
}
#block-mainnavigationhorizontal .menu-list ul li:first-child {
  margin: 0;
}
#block-mainnavigationhorizontal ul.menu-list {
  opacity: 1;
  position: unset;
  padding: 0;
  transform: none;
  overflow: visible;
}
#block-mainnavigationhorizontal ul.menu-list > li {
  float: left;
  margin: 0;
  font-size: 1.4rem;
  padding: 0 20px;
  line-height: 1,4;
  position: relative;
-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
  
}
#block-mainnavigationhorizontal ul.menu-list > li > a {
  
}
#block-mainnavigationhorizontal ul.menu-list li:hover ul.subnav,

#block-mainnavigationhorizontal ul.menu-list li:hover ul.subnav li:hover ul.subnav {
  opacity: 1;
    transform: translate3d(0, 0px, 0);
    -webkit-transform: translate3d(0, 0px, 0);
    -moz-transform: translate3d(0, 0px, 0);
    visibility: visible;
}
#block-mainnavigationhorizontal ul.menu-list ul.subnav {
  display: block;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 1000;
  min-width: 160px;
  padding: 5px 0;
  margin: 15px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transform: translate3d(0, 10px, 0);
    -webkit-transform: translate3d(0, 10px, 0);
    -moz-transform: translate3d(0, 10px, 0);
  background: white;
  padding: 20px 25px;
  margin-left: -15px;
}
#block-mainnavigationhorizontal ul.menu-list li:hover ul.subnav ul.subnav {
  opacity: 0;
  visibility: hidden;
  left: 100%;
  top: 0;
  margin: 0;
}
article.profile {
  position: relative;
}
article.profile .field--name-user-picture img {
  border-radius: 50% !important;
}

/* Drupal forum */
.path-forum li.action-links {
  list-style: none;
  float: right;
  margin-bottom: 10px;
}
.path-forum table thead th a {
  color: #000;
}
.page-node-type-forum .comment .comment-content {
  padding-left: 0;
}
ul.action-links { padding-left: 0; }
.forums {
  width: 100%;
  border: none;
}
.forums thead { display: none; }

.forums tbody tr {
  border-bottom: 1px solid #ddd;
  border-width: 1px;
  background: #fff;
}
.forums tbody tr > td {
  padding: 15px 0;
  vertical-align: baseline;
}
.forums td.forum-title-container {
  width: 47%;
}
.forums tr.forum-container-header td.forum-title-container {
  padding-top: 50px;
}
.forums tr.forum-container-header td.forum-title-container .forum-title-link {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
}
.forums tr.forum-container-header td.forum-title-container .forum-title-link a {
  color: #313131;
}
.forums td.forum-title-container .forum-title-link {
  margin-bottom: 10px;
}
.forums td.forum-title-container .forum-title-link a,
.forums td h3 {
  font-size: 110%;
  font-weight: 500;
  line-height: normal;
  margin: 0 0 10px;
  text-transform: unset;
  color: #333;
}
.forums td.forum-title-container .forum-title-link a:hover {
  color: var(--main-color);
}
.forums td.forum-title-container .forum-description {
  line-height: 24px;
  color: #5f5f5f;
}
.forums td.forum-num-topics,
.forums td.forum-num-posts {
  text-align: center;
  width: 13%;
}
.path-forum .table-responsive {
  width: 100%;
}
.path-forum .table-responsive table th,
.path-forum .table-responsive table td {
  padding: 15px 10px;
}
.path-forum .table-responsive .table > tbody > tr > td,
.path-forum .table-responsive .table > tbody > tr > th,
.path-forum .table-responsive .table > thead > tr > td,
.path-forum .table-responsive .table > thead > tr > th {
  border-bottom: 1px solid #f3f3f3;
}
.path-forum .table-responsive .table-striped > tbody > tr:nth-of-type(2n+1) {
  background: none;
}
.path-forum .table-responsive .forum__title div:first-child a {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;

}
.path-forum .table-responsive .forum__title div:first-child {
  margin-bottom: 10px;
}
.path-forum .table-responsive .forum__title div:nth-child(2) span {
  color: #5f5f5f;
  line-height: 24px;
}
.path-forum .table-responsive table thead th:nth-child(2),
.path-forum .table-responsive .forum__replies {
  text-align: center;
  width: 15%;
}

/* Forum detail */
article.node--type-forum {
  position: relative;
  padding-left: 120px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px dotted #eee;
}
article.node--type-forum ul.links {
    text-align: right;
    padding-top: 20px;
}
h2.forum-title,
article.node--type-forum .field--name-taxonomy-forums {
  display: none;
}
article.node--type-forum .header-info {
  margin-bottom: 20px;
}
article.node--type-forum footer {
    position: relative;
}
article.node--type-forum .field--name-user-picture {
  position: absolute;
  left: -120px;
  top: 0;
}
article.node--type-forum .field--name-user-picture,
article.node--type-forum .field--name-user-picture img {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  width: 100px;
}

/* ==========================================================================
   Homepage & Maritime Typography Overhaul
   ========================================================================== */

/* 1. Global Typography & Readability */
body {
  color: #334155;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.015em;
}

/* 2. Image Section Overlays for Maximum Contrast & Readability */
.section-1 .section-bg {
  background-size: cover !important;
  background-position: 70% center !important;
}

.section-1 .section-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(6, 16, 30, 0.86) 0%,
    rgba(6, 16, 30, 0.68) 40%,
    rgba(6, 16, 30, 0.30) 70%,
    rgba(6, 16, 30, 0.12) 100%
  );
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 991px) {
  .section-1 .section-bg {
    background-position: center center !important;
  }
  .section-1 .section-bg::before {
    background: linear-gradient(
      180deg,
      rgba(6, 16, 30, 0.88) 0%,
      rgba(6, 16, 30, 0.70) 55%,
      rgba(6, 16, 30, 0.40) 100%
    );
  }
}

.section-3 .bg-changer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(8, 20, 38, 0.84) 0%, rgba(10, 25, 47, 0.70) 50%, rgba(8, 20, 38, 0.88) 100%);
  pointer-events: none;
  z-index: 1;
}

.section-5 .section-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(8, 20, 38, 0.82) 0%, rgba(10, 25, 47, 0.65) 50%, rgba(8, 20, 38, 0.80) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Ensure content stays above overlays */
.section .scrollable-content {
  position: relative;
  z-index: 2;
}

/* 3. Section 1 (Hero) Typography */
.section-1 .subtitle-top {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #fbbf24;
  margin-bottom: 0.8rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.section-1 .display-2 {
  font-size: clamp(2.4rem, 4.5vw, 4.2rem) !important;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7);
  margin-bottom: 1.5rem;
}

.section-1 .hr-bottom {
  position: static;
  margin: 1.5rem 0 2rem 0;
  height: 3px;
  width: 80px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  border-radius: 2px;
}

.hero-lead {
  font-size: 1.15rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 300;
  max-width: 44em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  margin-bottom: 2rem;
}

.section-1 .link-arrow.h5,
.link-arrow {
  color: #fbbf24 !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  transition: all 0.25s ease;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.link-arrow:hover {
  color: #ffffff !important;
  transform: translateX(4px);
}

/* 4. Customer Login Card (Section 1) */
.customer-login-card {
  background: rgba(10, 25, 47, 0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 14px;
  padding: 2.5rem 2.2rem;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(245, 158, 11, 0.15) !important;
  transition: all 0.35s ease;
}

.customer-login-card:hover {
  border-color: rgba(251, 191, 36, 0.75) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 45px rgba(245, 158, 11, 0.3) !important;
  transform: translateY(-4px);
}

.customer-login-card-label {
  color: #ffffff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  margin-bottom: 1.3rem;
}

.customer-login-card .customer-login-card-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  color: #08162b !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.95rem 1.8rem;
  border: none !important;
  border-radius: 8px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.4);
}

.customer-login-card .customer-login-card-btn:hover,
.customer-login-card .customer-login-card-btn:focus {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%) !important;
  color: #031224 !important;
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.6);
  transform: translateY(-2px);
}

.customer-login-card-sub {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.82rem;
  margin-top: 1.2rem;
  line-height: 1.5;
}

@media (max-width: 991px) {
  .customer-login-card {
    margin-top: 2.5rem;
  }
}

/* 5. Section 2 (What We Do) */
.section-2 {
  background-color: #f8fafc;
}

.section-2 .subtitle-top {
  color: #d97706 !important;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.92rem;
  margin-bottom: 0.8rem;
}

.section-2 .title-uppercase {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 700;
  color: #0f172a;
  line-height: 1.28;
  margin-bottom: 2rem;
}

.section-2 .service-list {
  padding-left: 0;
  list-style: none;
}

.section-2 .service-list li {
  border-bottom: 1px solid #e2e8f0;
  padding: 0.85rem 0;
  transition: transform 0.2s ease;
}

.section-2 .service-list li:hover {
  transform: translateX(6px);
}

.section-2 .service-list li a {
  color: #1e293b;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.section-2 .service-list li a:hover {
  color: #d97706 !important;
}

.dots-image-2 {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
  position: relative;
}

.dots-image-2 img {
  border-radius: 14px;
}

.experience-info {
  background: #0a192f !important;
  color: #ffffff;
  border-radius: 10px;
  padding: 1.5rem 1.8rem;
  border: 1px solid rgba(245, 158, 11, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.experience-info .number {
  color: #fbbf24 !important;
  font-size: 2.2rem;
}

.experience-info .text {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* 6. Section 3 (Our Products) */
.section-3 .project-box {
  background: rgba(8, 20, 38, 0.72) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding-bottom: 42% !important;
}

.section-3 .project-box:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: #f59e0b !important;
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(245, 158, 11, 0.25) !important;
}

.section-3 .project-box h5 a {
  color: #ffffff !important;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.section-3 .project-box:hover h5 a {
  color: #fbbf24 !important;
}

.section-3 .project-category {
  color: #fbbf24 !important;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.6rem;
}

.section-3 .link-arrow.h5 {
  color: #fbbf24 !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  margin-top: 2.5rem;
}

/* 7. Section 4 (Compliance & Quality) */
.section4 {
  background-color: #f8fafc;
}

.section4 .title-uppercase {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3.5rem !important;
  text-align: center;
}

.section4 .col-service {
  background: #ffffff;
  padding: 2.4rem 2rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 2rem;
}

.section4 .col-service:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(217, 119, 6, 0.15);
  border-color: #f59e0b;
}

.section4 .col-service h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.85rem;
}

.section4 .col-service p {
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 0;
}

/* 8. Section 5 (Why Servship) */
.section-5 .title-uppercase {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.section-5 .hr-bottom {
  position: static;
  margin: 1.2rem 0 1.8rem 0;
  height: 3px;
  width: 70px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  border-radius: 2px;
}

.section-5 p.text-white {
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 300;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.section-5 .service-list {
  padding-left: 0;
  list-style: none;
}

.section-5 .service-list li {
  padding: 1rem 0 1rem 2.4rem;
  position: relative;
  font-size: 1.08rem;
  font-weight: 400;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  line-height: 1.5;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.section-5 .service-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #fbbf24;
  font-weight: 700;
  font-size: 1.2rem;
}

/* 9. Section 6 (Contact) */
.section-6 {
  background-color: #f8fafc;
}

.section-6 .title-uppercase {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3rem;
  text-align: center;
}

.col-contact-info .row {
  background: #ffffff;
  padding: 1.8rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
  margin: 0 5px 1.5rem 5px;
  min-height: 160px;
  transition: all 0.3s ease;
}

.col-contact-info .row:hover {
  border-color: #f59e0b;
  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.15);
  transform: translateY(-3px);
}

.col-contact-info h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #d97706;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-info-row strong {
  color: #0f172a !important;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-info-row {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.6;
}

.section-6 a.link-arrow {
  color: #d97706 !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-top: 1.5rem;
  display: inline-block;
}
.section-6 a.link-arrow:hover {
  color: #b45309 !important;
}

/* 10. Vertical Titles & Pagepiling Navigation */
.vertical-title span {
  letter-spacing: 0.22em;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.section.text-white .vertical-title span {
  color: rgba(255, 255, 255, 0.65) !important;
}

.section:not(.text-white) .vertical-title span {
  color: rgba(15, 23, 42, 0.45) !important;
}

#pp-nav span,
.pp-slidesNav span {
  border: 1px solid rgba(245, 158, 11, 0.7) !important;
}

#pp-nav li .active span,
.pp-slidesNav .active span {
  background: #f59e0b !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

/* 11. Buttons & Utility */
.btn-yellow,
.btn-primary {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  color: #08162b !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.35) !important;
}

.btn-yellow:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%) !important;
  color: #031224 !important;
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.55) !important;
}
/* Header account/login link. */
.region-user-right {
  display: flex;
  align-items: center;
}
.region-user-right ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.region-user-right ul.menu li {
  display: inline-block;
}
.region-user-right ul.menu a {
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

/* Product price display (grid cards + detail page). */
.product-price-wrap {
  margin: 0.4rem 0;
}
.product-price {
  font-weight: 700;
  font-size: 1.15rem;
}
.product-price-currency {
  font-size: 0.75rem;
  font-weight: 400;
  margin-left: 0.3rem;
  opacity: 0.7;
}
a.product-price-locked,
a.product-price-contact {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.5em 1em;
  border: 1px solid currentColor;
  border-radius: 2px;
  text-decoration: none;
}
a.product-price-locked:hover,
a.product-price-contact:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #08162b;
}
.product-sku {
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  opacity: 0.65;
  margin: 0.2rem 0 0;
}
.project-item .product-price-wrap,
.project-item .product-sku {
  color: #fff;
}

/* Product cards normally get their height AND their dark backdrop (for the
   white overlay text to read against) from the <img> the theme expects.
   CRM-synced products don't send a photo, so .project-item has nothing in
   normal flow to size itself on and collapses to a sliver, with white text
   sitting on the page's white background — effectively invisible either way.
   Give the card a real floor height and a dark gradient backdrop so it
   still reads correctly with no photo, while an actual photo (in normal
   flow, rendered first) still displays on top exactly as before. */
.grid-item .project-item {
  min-height: 340px;
  background: linear-gradient(160deg, #1a2332, #0d1420);
}
.col-project-box .project-box {
  min-height: 140px;
}

/* ==========================================================================
   Product cards (catalogue redesign)
   ========================================================================== */
.grid-items.js-isotope.js-grid-items {
  margin: 0 -12px;
  display: flex;
  flex-wrap: wrap;
}
.grid-item {
  padding: 0 12px;
  margin-bottom: 24px;
}
.product-card {
  background: #fff;
  border: 1px solid #e7e9ec;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.product-card:hover {
  box-shadow: 0 14px 32px rgba(10, 25, 47, 0.12);
  transform: translateY(-3px);
}
.product-card-image {
  position: relative;
  background: linear-gradient(160deg, #f4f6f8, #e9edf1);
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card-image-placeholder {
  color: #9aa5b1;
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #0a192f;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4em 0.8em;
  border-radius: 999px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card-badge:empty {
  display: none;
}
.product-card-body {
  padding: 1.2rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0a192f;
  margin: 0 0 0.2rem;
  line-height: 1.3;
}
.product-card-sku {
  font-size: 0.72rem;
  color: #9aa5b1;
  letter-spacing: 0.03em;
  margin: 0 0 0.6rem;
}
.product-card-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #5b6675;
  margin: 0 0 0.9rem;
  flex: 1;
}
.product-card .product-price-wrap {
  margin: 0 0 0.9rem;
}
.product-card .product-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0a192f;
}
.product-card .product-price-currency-symbol {
  margin-right: 0.1em;
}
.product-card .product-price-locked,
.product-card .product-price-contact {
  padding: 0.45em 0.9em;
  font-size: 0.72rem;
}
.product-card-footer {
  border-top: 1px solid #eef0f3;
  padding-top: 0.8rem;
  margin-top: auto;
}
.product-card-footer a {
  font-size: 0.85rem;
  font-weight: 600;
  color: #0a192f;
  text-decoration: none;
}
.product-card-footer a:after {
  content: ' →';
}
.product-card-footer a:hover {
  color: #f59e0b;
}

/* Catalogue sidebar (search + category list with live counts) */
.catalogue-layout {
  align-items: flex-start;
}
.catalogue-sidebar {
  position: sticky;
  top: 100px;
}
.catalogue-sidebar-block {
  background: #f7f8fa;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  padding: 1.3rem 1.4rem;
  margin-bottom: 1.5rem;
}
.catalogue-sidebar-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a192f;
  margin: 0 0 0.9rem;
}
.catalogue-search input {
  width: 100%;
  border: 1px solid #dfe3e8;
  border-radius: 4px;
  padding: 0.6em 0.9em;
  font-size: 0.88rem;
  background: #fff;
}
.catalogue-search input:focus {
  outline: none;
  border-color: #f59e0b;
}
.catalogue-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.catalogue-category-list li {
  border-bottom: 1px solid #eef0f3;
}
.catalogue-category-list li:last-child {
  border-bottom: none;
}
.catalogue-category-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6em 0.1em;
  font-size: 0.86rem;
  color: #445066;
  text-decoration: none;
}
.catalogue-category-list li.active a,
.catalogue-category-list a:hover {
  color: #0a192f;
  font-weight: 700;
}
.catalogue-count {
  background: #e9edf1;
  color: #5b6675;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15em 0.55em;
  border-radius: 999px;
}
.catalogue-category-list li.active .catalogue-count,
.catalogue-category-list a:hover .catalogue-count {
  background: #0a192f;
  color: #fff;
}
@media (max-width: 991px) {
  .catalogue-sidebar {
    position: static;
    margin-bottom: 2rem;
  }
}

/* ==========================================================================
   Product detail page
   ========================================================================== */
.product-detail {
  padding: 3rem 0 5rem;
}
.product-detail-breadcrumb {
  font-size: 0.8rem;
  color: #9aa5b1;
  margin-bottom: 1.5rem;
}
.product-detail-breadcrumb a {
  color: #5b6675;
  text-decoration: none;
}
.product-detail-breadcrumb a:hover {
  color: #f59e0b;
}
.product-detail-breadcrumb span {
  margin: 0 0.3em;
}
.product-detail-top {
  margin-bottom: 3rem;
}
.product-detail-image {
  position: relative;
  background: linear-gradient(160deg, #f4f6f8, #e9edf1);
  border-radius: 8px;
  border: 1px solid #e7e9ec;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa5b1;
}
.product-detail-hot-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #f59e0b;
  color: #0a192f;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35em 0.8em;
  border-radius: 999px;
}
.product-detail-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: #0a192f;
  margin: 0.5rem 0 0.3rem;
}
.product-detail-sku {
  font-size: 0.85rem;
  color: #9aa5b1;
  letter-spacing: 0.03em;
  margin: 0 0 1.1rem;
}
.product-detail-price {
  margin-bottom: 1.4rem;
}
.product-detail-price .product-price {
  font-size: 1.5rem;
}
.product-detail-price .product-price-locked,
.product-detail-price .product-price-contact {
  font-size: 0.8rem;
  padding: 0.6em 1.1em;
}
.product-detail-intro {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #445066;
  margin-bottom: 1.6rem;
}
.product-detail-enquire {
  display: inline-block;
}
.product-detail-section {
  border-top: 1px solid #eef0f3;
  padding: 2rem 0;
}
.product-detail-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a192f;
  margin: 0 0 1rem;
}
.product-detail-section-body {
  font-size: 0.92rem;
  line-height: 1.75;
  color: #445066;
}
.product-detail-section-body strong {
  color: #0a192f;
}
.product-gallery {
  border-top: 1px solid #eef0f3;
  padding-top: 2rem;
}
@media (max-width: 767px) {
  .product-detail-image {
    margin-bottom: 1.5rem;
  }
}

/* Add to cart form on the product detail page */
.product-detail-cart {
  margin-bottom: 1rem;
}
.add-to-cart-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.add-to-cart-form .form-item {
  margin: 0;
}
.add-to-cart-form label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5b6675;
  margin-bottom: 0.3em;
  display: block;
}
.add-to-cart-qty {
  width: 70px;
  border: 1px solid #dfe3e8;
  border-radius: 4px;
  padding: 0.6em 0.7em;
  font-size: 0.95rem;
}
.add-to-cart-form .form-actions {
  margin: 0;
}
.btn-outline {
  background: transparent;
  color: #0a192f;
  border: 1px solid #0a192f;
}
.btn-outline:hover,
.btn-outline:focus {
  background: #0a192f;
  color: #fff;
}

/* ==========================================================================
   Login page (split hero)
   ========================================================================== */
.login-page-main {
  padding: 0;
  margin: 0;
}
.login-shell {
  display: flex;
  min-height: calc(100vh - 90px);
  width: 100%;
}
.login-brand-panel {
  flex: 0 0 42%;
  background: linear-gradient(160deg, #0a192f, #081420 65%, #0d1f38);
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.login-brand-panel:before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 15%, rgba(245, 158, 11, 0.16), transparent 45%),
              radial-gradient(circle at 85% 85%, rgba(0, 210, 255, 0.12), transparent 45%);
  pointer-events: none;
}
.login-brand-panel-inner {
  position: relative;
  z-index: 1;
  padding: 4rem 3.5rem;
  max-width: 460px;
}
.login-brand-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 999px;
  padding: 0.4em 0.9em;
  margin-bottom: 1.5rem;
}
.login-brand-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: #fff;
}
.login-brand-copy {
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 2rem;
}
.login-brand-list {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}
.login-brand-list li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.9em;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.9);
}
.login-brand-list li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
}
.login-brand-footer {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1.5rem;
}
.login-brand-footer a {
  color: #f59e0b;
  text-decoration: none;
  font-weight: 600;
}
.login-brand-footer a:hover {
  text-decoration: underline;
}

.login-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 3rem 1.5rem;
}
.login-form-panel-inner {
  width: 100%;
  max-width: 380px;
}

/* Restyle Drupal's default login tabs into a simple underline switcher */
.login-form-panel-inner nav.tabs {
  margin-bottom: 2rem;
}
.login-form-panel-inner ul.nav.primary.nav-tabs {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #eef0f3;
}
.login-form-panel-inner ul.nav.primary.nav-tabs li {
  list-style: none;
}
.login-form-panel-inner ul.nav.primary.nav-tabs a {
  display: inline-block;
  padding: 0 0 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #9aa5b1;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.login-form-panel-inner ul.nav.primary.nav-tabs a.active,
.login-form-panel-inner ul.nav.primary.nav-tabs a:hover {
  color: #0a192f;
  border-bottom-color: #f59e0b;
}

/* Restyle the login form fields themselves */
.login-form-panel-inner form.user-login-form,
.login-form-panel-inner form.user-pass,
.login-form-panel-inner form.user-register-form {
  margin: 0;
}
.login-form-panel-inner .js-form-item,
.login-form-panel-inner .form-item {
  margin-bottom: 1.3rem;
}
.login-form-panel-inner label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0a192f;
  margin-bottom: 0.5em;
}
.login-form-panel-inner input[type="text"],
.login-form-panel-inner input[type="email"],
.login-form-panel-inner input[type="password"] {
  width: 100%;
  border: 1px solid #dfe3e8;
  border-radius: 4px;
  padding: 0.85em 1em;
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.2s ease;
}
.login-form-panel-inner input[type="text"]:focus,
.login-form-panel-inner input[type="email"]:focus,
.login-form-panel-inner input[type="password"]:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.login-form-panel-inner .description {
  font-size: 0.78rem;
  color: #9aa5b1;
  margin-top: 0.4em;
}
.login-form-panel-inner .form-actions {
  margin-top: 1.8rem;
}
.login-form-panel-inner .form-actions input,
.login-form-panel-inner .form-actions button,
.login-form-panel-inner #edit-submit {
  width: 100%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #08162b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  border: 0;
  border-radius: 4px;
  padding: 0.95em 1.5em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.login-form-panel-inner .form-actions input:hover,
.login-form-panel-inner #edit-submit:hover {
  opacity: 0.9;
}

@media (max-width: 900px) {
  .login-shell {
    flex-direction: column;
    min-height: auto;
  }
  .login-brand-panel {
    flex: none;
    padding: 2.5rem 0;
  }
  .login-brand-panel-inner {
    padding: 0 1.8rem;
    max-width: none;
  }
  .login-brand-list {
    margin-bottom: 1.5rem;
  }
  .login-form-panel {
    padding: 2.5rem 1.5rem 3.5rem;
  }
}

/* ==========================================================================
   Account pages (login / register / password reset / cart)
   — servship-account-page.html.twig, a focused distraction-free shell
   used instead of the normal site header/footer on these pages.
   ========================================================================== */
.ss-commerce-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ss-commerce-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3rem;
  border-bottom: 1px solid #eef0f3;
}
.ss-commerce-header .site-branding,
.ss-commerce-header .brand {
  display: flex;
  align-items: center;
}
.ss-commerce-header nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.ss-commerce-header nav a {
  font-size: 0.88rem;
  font-weight: 600;
  color: #445066;
  text-decoration: none;
}
.ss-commerce-header nav a:hover {
  color: #0a192f;
}
.ss-commerce-header nav a.ss-nav-action {
  color: #0a192f;
  border: 1px solid #0a192f;
  border-radius: 999px;
  padding: 0.5em 1.2em;
}
.ss-commerce-header nav a.ss-nav-action:hover {
  background: #0a192f;
  color: #fff;
}

.ss-commerce-main {
  flex: 1;
}

.ss-commerce-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3rem;
  border-top: 1px solid #eef0f3;
  font-size: 0.82rem;
  color: #9aa5b1;
}
.ss-commerce-footer a {
  color: #445066;
  text-decoration: none;
}
.ss-commerce-footer a:hover {
  color: #f59e0b;
}
.ss-footer-divider {
  margin: 0 0.4em;
  opacity: 0.5;
}

/* --- Login / register / reset split layout --- */
.ss-login-layout {
  display: flex;
  min-height: calc(100vh - 158px);
}
.ss-login-story {
  flex: 0 0 44%;
  background: linear-gradient(160deg, #0a192f, #081420 65%, #0d1f38);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
}
.ss-login-story:before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 10%, rgba(245, 158, 11, 0.16), transparent 45%),
              radial-gradient(circle at 90% 90%, rgba(0, 210, 255, 0.12), transparent 45%);
  pointer-events: none;
}
.ss-login-story > * {
  position: relative;
  z-index: 1;
}
.ss-rxsol-wordmark {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.ss-rxsol-wordmark span {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.3em;
}
.ss-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 999px;
  padding: 0.4em 0.9em;
  margin-bottom: 1.3rem;
}
.ss-login-story h2 {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
}
.ss-login-story h2 em {
  font-style: normal;
  color: #f59e0b;
}
.ss-login-story p {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 380px;
}
.ss-story-caption {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 1.5rem;
}

.ss-login-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 420px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
.ss-commerce-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f59e0b;
  margin: 0 0 0.6rem;
}
.ss-login-panel h1 {
  font-size: 1.9rem;
  font-weight: 700;
  color: #0a192f;
  margin: 0 0 0.6rem;
}
.ss-intro {
  font-size: 0.95rem;
  color: #5b6675;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.ss-forgot {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #445066;
  text-decoration: none;
}
.ss-forgot:hover {
  color: #f59e0b;
}
.ss-register {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eef0f3;
  font-size: 0.88rem;
  color: #5b6675;
}
.ss-register a {
  color: #0a192f;
  font-weight: 700;
  text-decoration: none;
}
.ss-register a:hover {
  color: #f59e0b;
}

/* Drupal's own tabs/messages inside the panel — hide the default tabs
   (register/reset are reached via the ss-forgot / ss-register links
   instead) and restyle the form itself. */
.ss-login-panel nav.tabs,
.ss-login-panel .action-links {
  display: none;
}
.ss-login-panel .js-form-item,
.ss-login-panel .form-item {
  margin-bottom: 1.3rem;
}
.ss-login-panel label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0a192f;
  margin-bottom: 0.5em;
}
.ss-login-panel input[type="text"],
.ss-login-panel input[type="email"],
.ss-login-panel input[type="password"] {
  width: 100%;
  border: 1px solid #dfe3e8;
  border-radius: 4px;
  padding: 0.85em 1em;
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ss-login-panel input[type="text"]:focus,
.ss-login-panel input[type="email"]:focus,
.ss-login-panel input[type="password"]:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.ss-login-panel .description {
  font-size: 0.78rem;
  color: #9aa5b1;
  margin-top: 0.4em;
}
.ss-login-panel .form-actions {
  margin-top: 1.6rem;
}
.ss-login-panel .form-actions input,
.ss-login-panel .form-actions button,
.ss-login-panel #edit-submit {
  width: 100%;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  background-image: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #08162b !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  border: 0 !important;
  border-radius: 4px;
  padding: 0.95em 1.5em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.ss-login-panel .form-actions input:hover,
.ss-login-panel #edit-submit:hover {
  opacity: 0.9;
}

/* --- Cart page --- */
.ss-cart-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 3rem 3rem 2rem;
  border-bottom: 1px solid #eef0f3;
}
.ss-cart-heading h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #0a192f;
  margin: 0 0 0.4rem;
}
.ss-back-products {
  font-size: 0.85rem;
  font-weight: 600;
  color: #445066;
  text-decoration: none;
}
.ss-back-products:hover {
  color: #f59e0b;
}
.ss-cart-layout {
  display: flex;
  gap: 3rem;
  padding: 2.5rem 3rem 4rem;
  align-items: flex-start;
}
.ss-cart-items {
  flex: 1;
  min-width: 0;
}
.ss-order-help {
  flex: 0 0 300px;
  background: #f7f8fa;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  padding: 1.8rem;
}
.ss-order-help h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0a192f;
  margin: 0.3rem 0 0.8rem;
}
.ss-order-help p {
  font-size: 0.88rem;
  color: #5b6675;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.ss-order-help > a {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0a192f;
  text-decoration: none;
}
.ss-order-help > a:hover {
  color: #f59e0b;
}
.ss-cart-login {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid #e2e5ea;
}
.ss-cart-login h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0a192f;
  margin: 0 0 0.4rem;
}
.ss-cart-login a {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #f59e0b;
  text-decoration: none;
}

@media (max-width: 900px) {
  .ss-commerce-header,
  .ss-commerce-footer {
    padding: 1.2rem 1.5rem;
  }
  .ss-login-layout {
    flex-direction: column;
    min-height: auto;
  }
  .ss-login-story {
    flex: none;
    padding: 2.5rem 1.5rem;
  }
  .ss-login-panel {
    padding: 2.5rem 1.5rem 3.5rem;
  }
  .ss-cart-heading,
  .ss-cart-layout {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .ss-cart-layout {
    flex-direction: column;
  }
  .ss-order-help {
    flex: none;
    width: 100%;
  }
}

/* The header logo block renders both the new RXSOL/Servship SVG mark
   (.ss-brand-mark) and the old square-icon PNGs (.brand-img /
   .brand-img-white) together on every page — they only ever looked
   consistent on the homepage because its dark hero background happened to
   hide the old dark PNG. Hide the old PNGs everywhere so the same SVG mark
   used on the homepage is what shows on every page. */
.site-branding .brand-img,
.site-branding .brand-img-white {
  display: none !important;
}
.ss-brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}