/* ==========================================================================
   SiliconSmiths Design System
   "Forging Digital Solutions"
   Self-contained CSS driving every public frontend page.
   ========================================================================== */

:root {
  --ss-orange: #EA580C;
  --ss-orange-dark: #C2410C;
  --ss-navy: #172033;
  --ss-gray: #D6D3D1;
  --ss-neutral: #F8FAFC;
  --ss-white: #FFFFFF;

  --ss-font-heading: 'Poppins', sans-serif;
  --ss-font-body: 'Inter', sans-serif;

  --ss-radius: 8px;
  --ss-shadow: 0 4px 14px rgba(23, 32, 51, 0.08);
  --ss-shadow-lg: 0 10px 30px rgba(23, 32, 51, 0.12);
  --ss-container-max: 1180px;
}

/* --------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------- */
.ss-body,
body {
  font-family: var(--ss-font-body);
  color: var(--ss-navy);
  background: var(--ss-neutral);
  font-weight: 400;
  line-height: 1.65;
}

.ss-body h1, .ss-body h2, .ss-body h3, .ss-body h4, .ss-body h5, .ss-body h6,
h1.ss-heading, h2.ss-heading, h3.ss-heading, h4.ss-heading {
  font-family: var(--ss-font-heading);
  font-weight: 700;
  color: var(--ss-navy);
  line-height: 1.25;
}

.ss-fw-semibold { font-weight: 600; }
.visually-hidden-focusable-h1 { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

a.ss-link {
  color: var(--ss-orange);
  text-decoration: none;
  transition: color .15s ease;
}
a.ss-link:hover { color: var(--ss-orange-dark); }

/* Inline text links inside prose content (blog/page bodies) — NOT UI
   elements like buttons/nav, which set their own colors explicitly. */
.ss-prose a { color: var(--ss-orange); text-decoration: underline; }
.ss-prose a:hover { color: var(--ss-orange-dark); }

/* --------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------- */
.ss-container {
  width: 100%;
  max-width: var(--ss-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.ss-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.ss-section-sm {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (max-width: 767.98px) {
  .ss-section { padding-top: 2.75rem; padding-bottom: 2.75rem; }
  .ss-section-sm { padding-top: 1.75rem; padding-bottom: 1.75rem; }
}

.section-dark {
  background: var(--ss-navy);
  color: var(--ss-white);
}
.section-dark .ss-heading,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 {
  color: var(--ss-white);
}
.section-dark p { color: rgba(255, 255, 255, 0.75); }

/* --------------------------------------------------------------------
   Buttons — text color is !important because several reused Bootstrap
   utility rules elsewhere set `a { color }`; without !important a
   generic link-color rule can win the cascade and make button text
   match its own background (invisible until :hover raises specificity).
   -------------------------------------------------------------------- */
.btn-ss-primary,
.btn-ss-outline,
.btn-ss-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--ss-font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: .7rem 1.6rem;
  border-radius: var(--ss-radius);
  border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  cursor: pointer;
  text-decoration: none !important;
  line-height: 1.2;
}

.btn-ss-primary {
  background: var(--ss-orange);
  color: #FFFFFF !important;
  box-shadow: var(--ss-shadow);
  border-color: var(--ss-orange);
}
.btn-ss-primary:hover,
.btn-ss-primary:focus {
  background: var(--ss-orange-dark);
  border-color: var(--ss-orange-dark);
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.btn-ss-outline {
  background: transparent;
  color: var(--ss-navy) !important;
  border-color: var(--ss-navy);
}
.btn-ss-outline:hover,
.btn-ss-outline:focus {
  background: var(--ss-navy);
  color: #FFFFFF !important;
}

.section-dark .btn-ss-outline {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.6);
}
.section-dark .btn-ss-outline:hover {
  background: #FFFFFF;
  color: var(--ss-navy) !important;
}

/* Orange border always visible (not just on hover) — reads as a real
   button over the dark hero image instead of plain underlined text. */
.btn-ss-outline-light {
  background: transparent;
  color: #FFFFFF !important;
  border-color: var(--ss-orange);
}
.btn-ss-outline-light:hover,
.btn-ss-outline-light:focus {
  background: var(--ss-orange);
  border-color: var(--ss-orange);
  color: #FFFFFF !important;
}

.btn-ss-sm { padding: .45rem 1.1rem; font-size: .85rem; }
.btn-ss-lg { padding: .9rem 2.1rem; font-size: 1.05rem; }

/* --------------------------------------------------------------------
   Cards / Badges
   -------------------------------------------------------------------- */
.ss-card {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  border: 1px solid var(--ss-gray);
  padding: 1.75rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ss-card:hover { box-shadow: var(--ss-shadow-lg); transform: translateY(-4px); }

.ss-badge {
  display: inline-block;
  font-family: var(--ss-font-body);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: rgba(234, 88, 12, 0.1);
  color: var(--ss-orange-dark);
}
.section-dark .ss-badge {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ss-white);
}

.ss-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(234, 88, 12, 0.12);
  color: var(--ss-orange);
  font-size: 1.35rem;
}

/* --------------------------------------------------------------------
   Hero (static / fallback, non-slider pages)
   -------------------------------------------------------------------- */
.ss-hero {
  background: linear-gradient(135deg, var(--ss-navy) 0%, #0d1420 100%);
  color: var(--ss-white);
  padding: 5.5rem 0 5rem;
}
.ss-body .ss-hero h1 {
  color: var(--ss-white);
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.ss-hero p.lead {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.15rem;
  max-width: 640px;
}
@media (max-width: 767.98px) {
  .ss-hero { padding: 3.5rem 0 3rem; }
}

/* --------------------------------------------------------------------
   Hero Slider (Swiper) — only the active slide is ever visible; Swiper
   itself handles show/hide via transforms, so we only style layout.
   -------------------------------------------------------------------- */
.ss-hero-swiper {
  position: relative;
  height: 85vh;
  min-height: 560px;
  max-height: 820px;
}
@media (max-width: 767.98px) {
  .ss-hero-swiper { height: auto; min-height: 560px; }
}
.ss-hero-swiper .swiper-slide {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  background-color: var(--ss-navy);
  background-size: cover;
  background-position: center;
}
.ss-hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23,32,51,.92) 0%, rgba(23,32,51,.75) 55%, rgba(23,32,51,.55) 100%);
}
.ss-hero-slide-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  color: var(--ss-white);
}
/* Qualified with `.ss-body` so this has HIGHER specificity (0,2,1) than
   the generic `.ss-body h1{...}` fluid-type rule added later in this file
   (0,1,1) — otherwise the generic rule silently wins on equal specificity
   + later source order, blowing the hero heading up to its 3.25rem cap. */
.ss-body .ss-hero-slide-content h1,
.ss-body .ss-hero-slide-content h2 {
  color: var(--ss-white);
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.ss-hero-slide-content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  margin-bottom: 1.75rem;
}
.ss-hero-swiper .swiper-button-next,
.ss-hero-swiper .swiper-button-prev {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.15);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color .15s ease;
}
.ss-hero-swiper .swiper-button-next:hover,
.ss-hero-swiper .swiper-button-prev:hover { background: var(--ss-orange); }
.ss-hero-swiper .swiper-button-next::after,
.ss-hero-swiper .swiper-button-prev::after { font-size: 1.1rem; }
.ss-hero-swiper .swiper-pagination-bullet {
  background: #FFFFFF;
  opacity: .5;
  width: 9px;
  height: 9px;
}
.ss-hero-swiper .swiper-pagination-bullet-active {
  background: var(--ss-orange);
  opacity: 1;
}

/* --------------------------------------------------------------------
   Testimonials (Swiper)
   -------------------------------------------------------------------- */
.ss-testimonial-swiper { padding-bottom: 3rem; }
.ss-testimonial-swiper .swiper-pagination-bullet { background: var(--ss-navy); opacity: .3; }
.ss-testimonial-swiper .swiper-pagination-bullet-active { background: var(--ss-orange); opacity: 1; }

/* --------------------------------------------------------------------
   Header / Navigation
   -------------------------------------------------------------------- */
.ss-header {
  background: var(--ss-white);
  border-bottom: 1px solid var(--ss-gray);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow .2s ease, padding .2s ease;
}
.ss-header.is-scrolled {
  box-shadow: 0 2px 16px rgba(23, 32, 51, 0.1);
}

.ss-header-inner {
  height: 80px;
  transition: height .2s ease;
}
.ss-header.is-scrolled .ss-header-inner { height: 64px; }

.ss-header .ss-logo img { height: 40px; width: auto; display: block; transition: height .2s ease; }
.ss-header.is-scrolled .ss-logo img { height: 34px; }
.ss-header .ss-logo-text {
  font-family: var(--ss-font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ss-navy);
}

.ss-nav-link {
  position: relative;
  font-family: var(--ss-font-body);
  font-weight: 500;
  color: var(--ss-navy) !important;
  padding: .5rem .9rem;
  text-decoration: none !important;
  transition: color .15s ease;
}
.ss-nav-link::after {
  content: '';
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: -1px;
  height: 2px;
  background: var(--ss-orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.ss-nav-link:hover,
.ss-nav-link.active {
  color: var(--ss-orange) !important;
}
.ss-nav-link:hover::after,
.ss-nav-link.active::after {
  transform: scaleX(1);
}

/* Mobile drawer */
.ss-drawer-toggle {
  border: none;
  background: transparent;
  color: var(--ss-navy);
  font-size: 1.3rem;
  padding: 0;
  line-height: 1;
}
.ss-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 32, 51, 0.55);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.ss-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.ss-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 84%;
  max-width: 340px;
  background: var(--ss-navy);
  z-index: 1050;
  padding: 1.5rem;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
}
.ss-drawer.is-open { transform: translateX(0); }
.ss-drawer .ss-drawer-close {
  border: none;
  background: transparent;
  color: #FFFFFF;
  font-size: 1.4rem;
}
.ss-drawer .ss-nav-link {
  color: #FFFFFF !important;
  display: block;
  padding: .85rem .25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ss-drawer .ss-nav-link::after { display: none; }
.ss-drawer .ss-nav-link:hover,
.ss-drawer .ss-nav-link.active { color: var(--ss-orange) !important; }

/* --------------------------------------------------------------------
   Process (numbered steps with connecting line)
   -------------------------------------------------------------------- */
.ss-process-step { position: relative; }
.ss-process-line {
  display: none;
}
@media (min-width: 992px) {
  .ss-process-line {
    display: block;
    position: absolute;
    top: 22px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 0;
  }
  .ss-process-step { z-index: 1; }
}

/* --------------------------------------------------------------------
   Trust bar client logo placeholders
   -------------------------------------------------------------------- */
.ss-client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 56px;
  border-radius: var(--ss-radius);
  background: var(--ss-white);
  border: 1px solid var(--ss-gray);
  color: var(--ss-navy);
  opacity: .55;
  font-family: var(--ss-font-heading);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .03em;
  transition: opacity .15s ease;
}
.ss-client-logo:hover { opacity: .9; }

/* --------------------------------------------------------------------
   Portfolio / Featured work
   -------------------------------------------------------------------- */
.ss-portfolio-card { overflow: hidden; padding: 0; }
.ss-portfolio-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.ss-portfolio-card:hover img { transform: scale(1.06); }
.ss-portfolio-card .ss-portfolio-body { padding: 1.25rem; }

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.ss-footer {
  background: var(--ss-navy);
  color: rgba(255, 255, 255, 0.75);
  padding: 3.5rem 0 1.5rem;
}
.ss-footer h6 {
  color: var(--ss-white);
  font-family: var(--ss-font-heading);
  font-weight: 600;
  margin-bottom: 1rem;
}
.ss-footer a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}
.ss-footer a:hover { color: var(--ss-orange); }
.ss-footer .ss-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  margin-right: .5rem;
  color: var(--ss-white);
}
.ss-footer .ss-social a:hover { background: var(--ss-orange); }
.ss-footer .ss-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: .875rem;
}
.ss-footer .ss-copyright a:hover { color: var(--ss-orange); }

/* --------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------- */
.ss-form-control {
  font-family: var(--ss-font-body);
  border: 1px solid var(--ss-gray);
  border-radius: var(--ss-radius);
  padding: .65rem .9rem;
  width: 100%;
  background: var(--ss-white);
  color: var(--ss-navy);
}
.ss-form-control:focus {
  outline: none;
  border-color: var(--ss-orange);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}

/* --------------------------------------------------------------------
   Bootstrap compatibility layer — reused shared partials (newsletter
   form, menu partial, pagination) ship plain Bootstrap classes; these
   overrides keep them on-brand without editing the shared partials.
   -------------------------------------------------------------------- */
.ss-body .btn-primary {
  background-color: var(--ss-orange);
  border-color: var(--ss-orange);
  color: #FFFFFF !important;
}
.ss-body .btn-primary:hover,
.ss-body .btn-primary:focus {
  background-color: var(--ss-orange-dark);
  border-color: var(--ss-orange-dark);
  color: #FFFFFF !important;
}
.ss-body .btn-outline-primary {
  color: var(--ss-orange) !important;
  border-color: var(--ss-orange);
}
.ss-body .btn-outline-primary:hover {
  background-color: var(--ss-orange);
  border-color: var(--ss-orange);
  color: #FFFFFF !important;
}
.ss-body .form-control:focus {
  border-color: var(--ss-orange);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}
.ss-body .page-link { color: var(--ss-navy); }
.ss-body .page-item.active .page-link {
  background-color: var(--ss-orange);
  border-color: var(--ss-orange);
}
.ss-footer .btn-primary,
.ss-footer .btn-primary:hover {
  background-color: var(--ss-orange);
  border-color: var(--ss-orange);
  color: #FFFFFF !important;
}
.ss-footer .form-control {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--ss-white);
}
.ss-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.55); }

/* --------------------------------------------------------------------
   Global page hero (inner pages — compact vs. the home slider)
   -------------------------------------------------------------------- */
.ss-page-hero {
  position: relative;
  min-height: 42vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ss-navy);
  background-size: cover;
  background-position: center;
  padding: 3.5rem 0;
}
@media (min-width: 768px) {
  .ss-page-hero { min-height: 46vh; }
}
.ss-page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(23, 32, 51, .88), rgba(23, 32, 51, .6));
}
.ss-page-hero-breadcrumb {
  color: rgba(255, 255, 255, 0.7);
  font-size: .9rem;
  margin-bottom: 1rem;
}
.ss-page-hero-breadcrumb a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.ss-page-hero-breadcrumb a:hover { color: var(--ss-orange); }
.ss-page-hero-breadcrumb .is-current { color: var(--ss-orange); font-weight: 600; }
/* !important on color: the global `.ss-body h1..h6 { color: navy }` rule
   (near the top of this file) has higher specificity (class+element) than
   a single class selector, so it silently wins over this without
   !important — turning every page-hero title navy-on-navy against the
   dark overlay. font-size is instead fixed by qualifying the selector with
   `.ss-body` (2 classes beats 1 class+1 element on specificity), so the
   later, more generic fluid-type rule can't silently override this one. */
.ss-body .ss-page-hero-title {
  color: var(--ss-white) !important;
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: .75rem;
}
.ss-page-hero-subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  max-width: 640px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------
   Home hero slide eyebrow label
   -------------------------------------------------------------------- */
.ss-hero-eyebrow {
  display: inline-block;
  font-family: var(--ss-font-body);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ss-orange);
  background: rgba(234, 88, 12, 0.15);
  padding: .35rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}

/* --------------------------------------------------------------------
   Footer logo — larger mark, tighter surrounding space
   -------------------------------------------------------------------- */
.ss-footer-logo-block { margin-bottom: .85rem; }
.ss-footer-logo-block img { height: 52px; width: auto; display: block; }

/* --------------------------------------------------------------------
   Services list page — feature bullets + mid-page CTA band
   -------------------------------------------------------------------- */
.ss-service-features { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.ss-service-features li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: var(--ss-navy);
  opacity: .8;
  font-size: .9rem;
  margin-bottom: .4rem;
}
.ss-service-features li i { color: var(--ss-orange); margin-top: .2rem; font-size: .8rem; }
.ss-cta-band {
  background: rgba(234, 88, 12, 0.06);
  border: 1px solid rgba(234, 88, 12, 0.2);
  border-radius: var(--ss-radius);
  padding: 2.5rem;
  text-align: center;
}

/* --------------------------------------------------------------------
   Pricing cards
   -------------------------------------------------------------------- */
.ss-pricing-card {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-gray);
  box-shadow: var(--ss-shadow);
  padding: 2.25rem 2rem;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ss-pricing-card:hover { box-shadow: var(--ss-shadow-lg); transform: translateY(-4px); }
.ss-pricing-card.is-featured {
  border: 2px solid var(--ss-orange);
  box-shadow: var(--ss-shadow-lg);
  transform: scale(1.03);
  z-index: 1;
}
@media (max-width: 991.98px) {
  .ss-pricing-card.is-featured { transform: none; }
}
.ss-pricing-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ss-orange);
  color: #FFFFFF;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .35rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
}
.ss-pricing-name { font-family: var(--ss-font-heading); font-weight: 700; font-size: 1.3rem; }
.ss-pricing-tagline { color: var(--ss-navy); opacity: .65; font-size: .9rem; margin-bottom: 1.25rem; }
.ss-pricing-price { font-family: var(--ss-font-heading); font-weight: 700; font-size: 2.5rem; color: var(--ss-navy); }
.ss-pricing-price small { font-family: var(--ss-font-body); font-weight: 500; font-size: 1rem; opacity: .6; }
.ss-pricing-period { color: var(--ss-navy); opacity: .55; font-size: .85rem; margin-bottom: 1.5rem; }
.ss-pricing-features { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.ss-pricing-features li { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .65rem; font-size: .92rem; }
.ss-pricing-features li i { margin-top: .25rem; font-size: .8rem; }
.ss-pricing-features li.is-included i { color: var(--ss-orange); }
.ss-pricing-features li.is-excluded { opacity: .4; }
.ss-pricing-features li.is-excluded i { color: var(--ss-navy); }

/* --------------------------------------------------------------------
   Portfolio page — filter tabs + hover overlay
   -------------------------------------------------------------------- */
.ss-portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}
.ss-portfolio-filter-btn {
  font-family: var(--ss-font-body);
  font-weight: 600;
  font-size: .85rem;
  color: var(--ss-navy);
  background: var(--ss-white);
  border: 1px solid var(--ss-gray);
  border-radius: 999px;
  padding: .5rem 1.3rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}
.ss-portfolio-filter-btn:hover { border-color: var(--ss-orange); color: var(--ss-orange); }
.ss-portfolio-filter-btn.is-active {
  background: var(--ss-orange);
  border-color: var(--ss-orange);
  color: #FFFFFF !important;
}
.ss-portfolio-item { display: none; }
.ss-portfolio-item.is-visible { display: block; }

/* Card is a normal white content card — title/category/client/result are
   ALWAYS visible (no opacity-hidden overlay hiding text); only the small
   "View Project" call-to-action fades in over the image on hover. */
.ss-portfolio-grid-card {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
  display: block;
}
.ss-portfolio-grid-card:hover { box-shadow: var(--ss-shadow-lg); transform: translateY(-4px); }
.ss-portfolio-grid-thumb { position: relative; overflow: hidden; }
.ss-portfolio-grid-thumb img,
.ss-portfolio-grid-thumb .ss-portfolio-grid-placeholder {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.ss-portfolio-grid-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-neutral);
  color: var(--ss-navy);
  opacity: .4;
  font-size: 2rem;
}
.ss-portfolio-grid-card:hover .ss-portfolio-grid-thumb img { transform: scale(1.08); }
.ss-portfolio-grid-hover-cta {
  position: absolute;
  inset: 0;
  background: rgba(23, 32, 51, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
}
.ss-portfolio-grid-card:hover .ss-portfolio-grid-hover-cta { opacity: 1; }
.ss-portfolio-grid-hover-cta .ss-view-project {
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  padding: .5rem 1.2rem;
}
.ss-portfolio-grid-body { padding: 1.25rem; }
.ss-portfolio-grid-body h6 { color: var(--ss-navy); font-family: var(--ss-font-heading); font-weight: 600; margin-bottom: .35rem; }
.ss-portfolio-grid-client { color: var(--ss-navy); opacity: .6; font-size: .85rem; margin-bottom: .35rem; }
.ss-portfolio-grid-result { color: var(--ss-orange); font-weight: 600; font-size: .85rem; margin: 0; }

/* --------------------------------------------------------------------
   Service / Project detail pages
   -------------------------------------------------------------------- */
.ss-quote-card {
  background: var(--ss-white);
  border: 1px solid var(--ss-gray);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-lg);
  padding: 2rem;
}
@media (min-width: 992px) {
  .ss-quote-card { position: sticky; top: 100px; }
}
.ss-offer-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ss-gray);
}
.ss-offer-item:last-child { border-bottom: none; }
.ss-offer-item i { color: var(--ss-orange); font-size: 1.1rem; margin-top: .15rem; }
.ss-tech-chip {
  display: inline-block;
  background: rgba(23, 32, 51, 0.06);
  color: var(--ss-navy);
  font-family: var(--ss-font-body);
  font-weight: 600;
  font-size: .85rem;
  padding: .4rem 1rem;
  border-radius: 999px;
  margin: 0 .5rem .5rem 0;
}
.ss-detail-meta-list { list-style: none; padding: 0; margin: 0; }
.ss-detail-meta-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--ss-gray);
  font-size: .9rem;
}
.ss-detail-meta-list li:last-child { border-bottom: none; }
.ss-detail-meta-list .ss-meta-label { color: var(--ss-navy); opacity: .6; }
.ss-detail-meta-list .ss-meta-value { font-weight: 600; color: var(--ss-navy); text-align: right; }
.ss-result-band {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: rgba(234, 88, 12, 0.06);
  border: 1px solid rgba(234, 88, 12, 0.2);
  border-radius: var(--ss-radius);
}
.ss-result-number {
  font-family: var(--ss-font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--ss-orange);
}
.ss-gallery-thumb { border-radius: var(--ss-radius); overflow: hidden; cursor: pointer; }
.ss-gallery-thumb img { width: 100%; height: 160px; object-fit: cover; transition: transform .3s ease; display: block; }

/* --------------------------------------------------------------------
   Blog — article typography (extends .ss-prose link rules already
   defined near the top of this file)
   -------------------------------------------------------------------- */
.ss-prose {
  color: var(--ss-navy);
  font-size: 1.05rem;
  line-height: 1.75;
}
.ss-prose h2, .ss-prose h3, .ss-prose h4 {
  color: var(--ss-navy);
  font-family: var(--ss-font-heading);
  font-weight: 700;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
}
.ss-prose h2 { font-size: 1.5rem; }
.ss-prose h3 { font-size: 1.2rem; }
.ss-prose p { color: var(--ss-navy); opacity: .85; margin-bottom: 1.25rem; }
.ss-prose ul, .ss-prose ol { color: var(--ss-navy); opacity: .85; margin-bottom: 1.25rem; padding-left: 1.4rem; }
.ss-prose li { margin-bottom: .5rem; }
.ss-prose strong { color: var(--ss-navy); opacity: 1; }
.ss-prose blockquote {
  border-left: 4px solid var(--ss-orange);
  background: rgba(234, 88, 12, 0.05);
  padding: 1rem 1.5rem;
  margin: 1.75rem 0;
  color: var(--ss-navy);
  font-style: italic;
  border-radius: 0 var(--ss-radius) var(--ss-radius) 0;
}
.ss-prose img { max-width: 100%; height: auto; border-radius: var(--ss-radius); margin: 1.5rem 0; }
.ss-prose code {
  background: rgba(23, 32, 51, 0.06);
  color: var(--ss-orange-dark);
  padding: .15rem .4rem;
  border-radius: 4px;
  font-size: .9em;
}
.ss-prose pre {
  background: var(--ss-navy);
  color: #FFFFFF;
  padding: 1.25rem;
  border-radius: var(--ss-radius);
  overflow-x: auto;
  margin: 1.5rem 0;
}
.ss-prose pre code { background: none; color: inherit; padding: 0; }

/* --------------------------------------------------------------------
   Blog — cards, featured band, meta, sidebar, share, author card, tags
   -------------------------------------------------------------------- */
.ss-blog-card {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}
.ss-blog-card:hover { box-shadow: var(--ss-shadow-lg); transform: translateY(-4px); }
.ss-blog-card-thumb img { width: 100%; height: 200px; object-fit: cover; display: block; }
.ss-blog-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.ss-blog-card-body h3, .ss-blog-card-body h5 { color: var(--ss-navy); font-family: var(--ss-font-heading); font-weight: 600; }
.ss-blog-excerpt { color: var(--ss-navy); opacity: .7; font-size: .92rem; margin-bottom: 1rem; }

.ss-blog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  color: var(--ss-navy);
  opacity: .6;
  font-size: .85rem;
  margin-bottom: .75rem;
}
.ss-blog-meta .ss-avatar-circle { width: 24px; height: 24px; font-size: .65rem; }

.ss-avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ss-navy);
  color: #FFFFFF;
  font-family: var(--ss-font-heading);
  font-weight: 600;
  font-size: .9rem;
  flex-shrink: 0;
  overflow: hidden;
}
.ss-avatar-circle img { width: 100%; height: 100%; object-fit: cover; }

.ss-blog-featured {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .ss-blog-featured { grid-template-columns: 1.1fr 1fr; }
}
.ss-blog-featured-img { min-height: 260px; background-size: cover; background-position: center; }
.ss-blog-featured-body { padding: 2.25rem; display: flex; flex-direction: column; justify-content: center; }
.ss-blog-featured-body h2 { color: var(--ss-navy); margin-bottom: .85rem; }

.ss-blog-sidebar-widget {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.ss-blog-sidebar-widget h6 { color: var(--ss-navy); font-family: var(--ss-font-heading); font-weight: 600; margin-bottom: 1.1rem; }
.ss-blog-category-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ss-navy);
  opacity: .75;
  text-decoration: none !important;
  padding: .55rem 0;
  border-bottom: 1px solid var(--ss-gray);
  font-size: .92rem;
}
.ss-blog-category-link:last-child { border-bottom: none; }
.ss-blog-category-link:hover, .ss-blog-category-link.is-active { color: var(--ss-orange); opacity: 1; }
.ss-blog-category-link .badge { background: var(--ss-neutral); color: var(--ss-navy); font-weight: 600; }

.ss-blog-recent-item { display: flex; gap: .85rem; padding: .75rem 0; border-bottom: 1px solid var(--ss-gray); }
.ss-blog-recent-item:last-child { border-bottom: none; padding-bottom: 0; }
.ss-blog-recent-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.ss-blog-recent-item a { color: var(--ss-navy); font-weight: 600; font-size: .88rem; text-decoration: none !important; line-height: 1.35; }
.ss-blog-recent-item a:hover { color: var(--ss-orange); }
.ss-blog-recent-item .ss-blog-recent-date { color: var(--ss-navy); opacity: .55; font-size: .78rem; margin-top: .2rem; }

.ss-share-buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.ss-share-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--ss-neutral);
  color: var(--ss-navy) !important;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid var(--ss-gray);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}
.ss-share-btn:hover { background: var(--ss-orange); border-color: var(--ss-orange); color: #FFFFFF !important; }

.ss-blog-tag {
  display: inline-block;
  background: var(--ss-neutral);
  color: var(--ss-navy);
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem 1rem;
  border-radius: 999px;
  margin: 0 .5rem .5rem 0;
  text-decoration: none !important;
}
.ss-blog-tag:hover { background: var(--ss-orange); color: #FFFFFF !important; }

.ss-blog-author-card {
  display: flex;
  gap: 1.25rem;
  background: var(--ss-neutral);
  border-radius: var(--ss-radius);
  padding: 1.75rem;
  align-items: flex-start;
}
.ss-blog-author-card .ss-avatar-circle { width: 64px; height: 64px; font-size: 1.3rem; }
.ss-blog-author-card h6 { color: var(--ss-navy); font-family: var(--ss-font-heading); font-weight: 700; margin-bottom: .35rem; }
.ss-blog-author-card p { color: var(--ss-navy); opacity: .7; margin: 0; font-size: .92rem; }
.ss-gallery-thumb:hover img { transform: scale(1.06); }

/* --------------------------------------------------------------------
   Contact page — info card, form, map, FAQ
   -------------------------------------------------------------------- */
.ss-contact-info-card {
  background: var(--ss-navy);
  color: #FFFFFF;
  border-radius: var(--ss-radius);
  padding: 2.5rem;
  height: 100%;
}
.ss-contact-info-card h3 { color: #FFFFFF; margin-bottom: .75rem; }
.ss-contact-info-card > p { color: rgba(255, 255, 255, 0.75); margin-bottom: 2rem; }

.ss-contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ss-contact-info-row .ss-icon-circle {
  width: 44px;
  height: 44px;
  font-size: 1rem;
  background: rgba(234, 88, 12, 0.18);
  flex-shrink: 0;
}
.ss-contact-info-row a,
.ss-contact-info-row span {
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-weight: 500;
}
.ss-contact-info-row a:hover { color: var(--ss-orange) !important; }
.ss-contact-info-row .ss-contact-info-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .2rem;
  display: block;
}

.ss-contact-info-card .ss-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF !important;
  margin-right: .5rem;
}
.ss-contact-info-card .ss-social a:hover { background: var(--ss-orange); }

.ss-contact-trust-line {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
  font-size: .9rem;
}
.ss-contact-trust-line strong { color: var(--ss-orange); }

.ss-contact-form-card {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow-lg);
  padding: 2.5rem;
}
.ss-contact-form-card label {
  color: var(--ss-navy);
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .4rem;
  display: inline-block;
}
.ss-contact-form-card .invalid-feedback { display: block; color: #dc3545; font-size: .82rem; margin-top: .3rem; }
.ss-contact-form-card .is-invalid { border-color: #dc3545 !important; }
.ss-hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; }

.ss-map-frame { border-radius: var(--ss-radius); overflow: hidden; box-shadow: var(--ss-shadow); }
.ss-map-frame iframe { width: 100%; height: 380px; border: 0; display: block; }

/* --------------------------------------------------------------------
   CMS page template (legal/document pages) — extends .ss-prose with
   table styling and orange list markers for long structured content.
   -------------------------------------------------------------------- */
.ss-prose li::marker { color: var(--ss-orange); font-weight: 600; }
.ss-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .95rem;
}
.ss-prose th, .ss-prose td {
  border: 1px solid var(--ss-gray);
  padding: .65rem .9rem;
  text-align: left;
  color: var(--ss-navy);
}
.ss-prose th { background: var(--ss-neutral); font-family: var(--ss-font-heading); font-weight: 600; }

.ss-cms-page-card {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  padding: 2.5rem;
}
.ss-cms-updated {
  color: var(--ss-navy);
  opacity: .6;
  font-size: .85rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ss-gray);
}

.ss-toc {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  padding: 1.5rem;
  position: sticky;
  top: 100px;
}
.ss-toc h6 { color: var(--ss-navy); font-family: var(--ss-font-heading); font-weight: 600; margin-bottom: 1rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.ss-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.ss-toc li { counter-increment: toc; margin-bottom: .65rem; }
.ss-toc a {
  color: var(--ss-navy);
  opacity: .7;
  text-decoration: none !important;
  font-size: .85rem;
  line-height: 1.4;
  display: flex;
  gap: .5rem;
}
.ss-toc a::before { content: counter(toc) '.'; color: var(--ss-orange); font-weight: 600; flex-shrink: 0; }
.ss-toc a:hover, .ss-toc a.is-active { color: var(--ss-orange); opacity: 1; }
@media (max-width: 991.98px) {
  .ss-toc { display: none; }
}

/* --------------------------------------------------------------------
   About page — story image, values cards, stats band, team, tech chips
   -------------------------------------------------------------------- */
.ss-story-img { border-radius: var(--ss-radius); overflow: hidden; box-shadow: var(--ss-shadow-lg); }
.ss-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ss-mv-card {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  padding: 2.25rem;
  height: 100%;
}
.ss-mv-card h3 { color: var(--ss-navy); margin: 1rem 0 .75rem; }
.ss-mv-card p { color: var(--ss-navy); opacity: .75; margin: 0; }

.ss-value-card {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  padding: 1.75rem;
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ss-value-card:hover { box-shadow: var(--ss-shadow-lg); transform: translateY(-4px); }
.ss-value-card h5 { color: var(--ss-navy); margin: 1rem 0 .5rem; font-size: 1.05rem; }
.ss-value-card p { color: var(--ss-navy); opacity: .7; margin: 0; font-size: .9rem; }

.ss-stats-band-item { text-align: center; }
.ss-stats-band-number { font-family: var(--ss-font-heading); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--ss-orange); }
.ss-stats-band-label { color: rgba(255, 255, 255, 0.75); font-size: .9rem; margin-top: .35rem; }

.ss-team-card {
  background: var(--ss-white);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
  text-align: center;
}
.ss-team-card:hover { box-shadow: var(--ss-shadow-lg); transform: translateY(-4px); }
.ss-team-card-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; display: block; background: var(--ss-neutral); }
.ss-team-card-body { padding: 1.5rem; }
.ss-team-card-body h5 { color: var(--ss-navy); font-family: var(--ss-font-heading); font-weight: 600; margin-bottom: .25rem; }
.ss-team-card-designation { color: var(--ss-orange); font-weight: 600; font-size: .88rem; margin-bottom: .75rem; }
.ss-team-card-bio { color: var(--ss-navy); opacity: .7; font-size: .88rem; margin-bottom: 1rem; }
.ss-team-skills { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: 1rem; }
.ss-team-skill-chip {
  background: var(--ss-neutral);
  color: var(--ss-navy);
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .7rem;
  border-radius: 999px;
}
.ss-team-social { display: flex; justify-content: center; gap: .5rem; }
.ss-team-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(234, 88, 12, 0.1);
  color: var(--ss-orange) !important;
}
.ss-team-social a:hover { background: var(--ss-orange); color: #FFFFFF !important; }

/* ==========================================================================
   RESPONSIVE / ACCESSIBILITY AUDIT PASS
   Mobile-first fixes layered on top of the rules above. Kept as one block
   (rather than scattered inline) so this file stays the single source of
   truth — later rules here intentionally override earlier same-topic ones.
   ========================================================================== */

/* --------------------------------------------------------------------
   Part 1 — Global foundation
   -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body.ss-body { overflow-x: hidden; }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

/* Long words/URLs/emails must never force horizontal scroll. */
.ss-body p, .ss-body li, .ss-body td, .ss-body th,
.ss-prose, .ss-footer, .ss-contact-info-row, .ss-detail-meta-list {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Fluid headings — replaces the fixed 700-weight base size with a scale
   that never gets too large on small phones or too small on desktop. */
.ss-body h1, h1.ss-heading { font-size: clamp(1.75rem, 5vw, 3.25rem); line-height: 1.2; }
.ss-body h2, h2.ss-heading { font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.25; }
.ss-body h3, h3.ss-heading { font-size: clamp(1.25rem, 2.5vw, 1.5rem); line-height: 1.3; }
.ss-body h4 { font-size: clamp(1.1rem, 2vw, 1.25rem); line-height: 1.3; }

.ss-body { font-size: clamp(0.95rem, 1.5vw, 1.05rem); line-height: 1.65; }
@media (max-width: 767.98px) {
  .ss-body { line-height: 1.65; }
}

/* Fluid section rhythm — scales the vertical padding instead of jumping
   between two fixed values at one breakpoint. */
.ss-section { padding-top: clamp(2.5rem, 6vw, 6rem); padding-bottom: clamp(2.5rem, 6vw, 6rem); }
.ss-section-sm { padding-top: clamp(1.75rem, 4vw, 3rem); padding-bottom: clamp(1.75rem, 4vw, 3rem); }

.ss-container {
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

/* iOS Safari zooms in on focus if a form field's font-size is under 16px —
   force 16px on every text-like input regardless of breakpoint. */
.ss-form-control,
.ss-body input[type="text"], .ss-body input[type="email"], .ss-body input[type="tel"],
.ss-body input[type="search"], .ss-body input[type="password"], .ss-body input[type="number"],
.ss-body select, .ss-body textarea {
  font-size: 16px;
  min-height: 48px;
}
.ss-body textarea, .ss-body textarea.ss-form-control { min-height: 120px; height: auto; }

/* Tap targets — every interactive control gets a real 44x44 hit area. */
.btn-ss-primary, .btn-ss-outline, .btn-ss-outline-light,
.ss-drawer-toggle, .ss-drawer-close,
.ss-portfolio-filter-btn, .ss-share-btn,
.ss-hero-swiper .swiper-button-next, .ss-hero-swiper .swiper-button-prev,
.ss-footer .ss-social a, .ss-contact-info-card .ss-social a, .ss-team-social a,
.page-link {
  min-height: 44px;
  min-width: 44px;
}
.ss-drawer-toggle, .ss-drawer-close { display: inline-flex; align-items: center; justify-content: center; }
.ss-nav-link { min-height: 44px; display: inline-flex; align-items: center; }
.ss-drawer .ss-nav-link { min-height: 48px; }

/* Disable hover-only lift/scale effects on touch devices — a tap should
   never leave a card "stuck" mid-animation the way :hover can on touch. */
@media (hover: none) {
  .ss-card:hover,
  .ss-blog-card:hover,
  .ss-portfolio-grid-card:hover,
  .ss-value-card:hover,
  .ss-team-card:hover,
  .ss-pricing-card:hover,
  .btn-ss-primary:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------
   Part 2 — Header / mobile drawer
   -------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ss-header-inner { height: 64px; }
  .ss-header .ss-logo img { height: 32px; }
}
.ss-drawer-toggle { font-size: 1.2rem; }

/* --------------------------------------------------------------------
   Static single-image hero (replaces the Swiper carousel on the homepage)
   -------------------------------------------------------------------- */
.ss-static-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(480px, 75vh, 760px);
  max-height: 760px;
  background-color: var(--ss-navy);
  background-size: cover;
  background-position: center;
}
@media (max-width: 767.98px) {
  .ss-static-hero { min-height: clamp(480px, 82vh, 620px); max-height: none; }
  .ss-static-hero .ss-hero-slide-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ss-static-hero .ss-hero-slide-content .d-flex.flex-wrap { flex-direction: column; align-items: stretch; }
  .ss-static-hero .ss-hero-slide-content .d-flex.flex-wrap > .btn-ss-primary,
  .ss-static-hero .ss-hero-slide-content .d-flex.flex-wrap > .btn-ss-outline-light { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------
   Part 3 — Hero sections
   -------------------------------------------------------------------- */
.ss-hero-swiper {
  height: auto;
  min-height: clamp(480px, 75vh, 760px);
  max-height: 760px;
}
@media (max-width: 767.98px) {
  .ss-hero-swiper { min-height: clamp(480px, 82vh, 620px); max-height: none; }
  .ss-hero-swiper .swiper-button-next,
  .ss-hero-swiper .swiper-button-prev { display: none; }
  .ss-hero-swiper .swiper-pagination-bullet { width: 10px; height: 10px; margin: 0 5px !important; }
  .ss-hero-slide-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ss-hero-slide-content .d-flex.flex-wrap { flex-direction: column; align-items: stretch; }
  .ss-hero-slide-content .d-flex.flex-wrap > .btn-ss-primary,
  .ss-hero-slide-content .d-flex.flex-wrap > .btn-ss-outline-light { width: 100%; text-align: center; }
}

.ss-page-hero {
  min-height: clamp(220px, 32vh, 380px);
  padding: clamp(2rem, 6vw, 3.5rem) 0;
}
.ss-page-hero .ss-container { padding-left: clamp(1rem, 4vw, 2rem); padding-right: clamp(1rem, 4vw, 2rem); }
.ss-page-hero-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 480px) {
  .ss-page-hero-breadcrumb { font-size: .8rem; word-break: break-word; }
}

/* --------------------------------------------------------------------
   Part 4 — Grids & cards
   -------------------------------------------------------------------- */
.ss-blog-excerpt, .ss-team-card-bio, .ss-value-card p, .ss-mv-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card thumbnails use aspect-ratio instead of a fixed px height so they
   scale cleanly at any column width instead of cropping oddly. */
.ss-blog-card-thumb, .ss-blog-card-thumb img { aspect-ratio: 16 / 10; height: auto; }
.ss-portfolio-grid-thumb img, .ss-portfolio-grid-thumb .ss-portfolio-grid-placeholder { aspect-ratio: 4 / 3; height: auto; }
.ss-portfolio-card img { aspect-ratio: 4 / 3; height: auto; }

/* Push CTAs to the bottom of equal-height cards in a row. */
.ss-service-features { margin-top: auto; }

/* --------------------------------------------------------------------
   Part 5 — Pricing
   -------------------------------------------------------------------- */
.ss-pricing-price {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  /* Featured plan moves visually first — both in the tablet 2-column grid
     (where it would otherwise wrap alone as the 3rd item) and the mobile
     single-column stack. The column div gets `.ss-order-first-mobile` in
     the Blade template. */
  .ss-order-first-mobile { order: -1; }
}
@media (max-width: 767.98px) {
  .ss-pricing-card.is-featured { margin-top: 1.5rem; }
}

/* --------------------------------------------------------------------
   Part 6 — Blog / legal reading column
   -------------------------------------------------------------------- */
.ss-cms-page-card, .ss-contact-form-card, .ss-mv-card, .ss-value-card {
  padding: clamp(1.25rem, 3vw, 2rem);
}
.ss-blog-featured-body { padding: clamp(1.5rem, 4vw, 2.25rem); }
@media (max-width: 767.98px) {
  .ss-prose { font-size: 1rem; }
  .ss-prose h2 { font-size: clamp(1.25rem, 4vw, 1.5rem); }
  .ss-prose h3 { font-size: clamp(1.1rem, 3vw, 1.2rem); }
}
.ss-prose table { display: block; overflow-x: auto; white-space: nowrap; }

/* --------------------------------------------------------------------
   Part 7 — Forms
   -------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* Only the newsletter partial (footer + homepage band) uses .input-group
     anywhere in this frontend, so a blanket rule is safe and also covers
     the homepage instance, whose outer form has different utility classes. */
  .ss-body .input-group {
    flex-direction: column;
  }
  .ss-body .input-group > * {
    width: 100%;
    border-radius: var(--ss-radius) !important;
  }
  .ss-body .input-group > * + * {
    margin-top: .6rem;
  }
}

/* --------------------------------------------------------------------
   Part 8 — Footer
   -------------------------------------------------------------------- */
.ss-footer .ss-social a, .ss-contact-info-card .ss-social a, .ss-team-social a {
  width: 44px;
  height: 44px;
}
@media (max-width: 767.98px) {
  .ss-footer { text-align: left; }
  .ss-footer-logo-block img { height: 44px; }
  .ss-copyright { flex-direction: column; text-align: center; gap: .5rem; }
}

/* --------------------------------------------------------------------
   Part 9 — Accessibility
   -------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, .btn-ss-primary:focus-visible, .btn-ss-outline:focus-visible,
.ss-nav-link:focus-visible, .ss-portfolio-filter-btn:focus-visible {
  outline: 3px solid var(--ss-orange);
  outline-offset: 2px;
}
.ss-drawer-toggle:focus-visible, .ss-drawer-close:focus-visible {
  outline: 3px solid var(--ss-orange);
  outline-offset: 2px;
  border-radius: 4px;
}