/*
Theme Name: Sytris Engineering
Theme URI: https://sytrisengineering.com/
Author: Sytris Engineering
Description: Custom industrial corporate theme converted from the Sytris Engineering frontend.
Version: 3.5.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sytris-engineering
*/

/* ==========================================================================
   Sytris Engineering — Global Design System
   Premium industrial / engineering corporate aesthetic
   ========================================================================== */

/* ----- Fonts ----- */
/* User-provided Artegra Sans Alt font. The supplied OTF is the Bold Italic cut. */
@font-face {
  font-family: 'Artegra Sans Alt';
  src: url('assets/fonts/ArtegraSansAlt-BoldItalic.otf') format('opentype');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

/* ----- Design Tokens ----- */
:root {
  /* Sytris brand palette sampled from the supplied logo artwork */
  --brand-blue: #164376;
  --brand-gray: #716C6A;
  --brand-cyan: #00AEEF;
  --brand-navy: #0F2746;
  /* Primary — Deep slate / navy */
  --color-navy-900: #0f2746;
  --color-navy-800: #14385f;
  --color-navy-700: #164376;
  --color-navy-600: #1f578e;
  --color-navy-500: #3974a5;

  /* Accent — Industrial amber */
  --color-amber-600: #164376;
  --color-amber-500: #00AEEF;
  --color-amber-400: #22B8E8;
  --color-amber-300: #7DD8F5;
  --color-amber-100: #E6F7FC;

  /* Neutrals */
  --color-white: #ffffff;
  --color-gray-50: #f6f7f9;
  --color-gray-100: #eceef2;
  --color-gray-200: #d9dde6;
  --color-gray-300: #b8bfce;
  --color-gray-400: #8b95a8;
  --color-gray-500: #68718a;
  --color-gray-600: #4e566b;
  --color-gray-700: #3a4154;
  --color-gray-800: #272d3e;
  --color-gray-900: #1a1f2e;

  /* Semantic */
  --bg-primary: var(--color-navy-900);
  --bg-secondary: var(--color-navy-800);
  --bg-light: var(--color-gray-50);
  --bg-white: var(--color-white);
  --accent: var(--brand-cyan);
  --accent-dark: var(--brand-blue);
  --accent-light: var(--brand-cyan);
  --text-primary: var(--color-navy-900);
  --text-secondary: var(--color-gray-600);
  --text-light: var(--color-gray-400);
  --text-inverse: var(--color-white);
  --text-inverse-muted: var(--color-gray-300);

  /* Typography */
  --font-heading: 'Artegra Sans Alt', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Spacing — 8px base */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --max-width: 1280px;
  --header-height: 72px;

  /* Radius — sharp / slightly rounded */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* Transitions */
  --transition: 200ms ease;
  --transition-slow: 400ms ease;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(14, 23, 38, 0.08);
  --shadow-md: 0 4px 12px rgba(14, 23, 38, 0.1);
  --shadow-lg: 0 12px 32px rgba(14, 23, 38, 0.14);
}

/* ----- Reset ----- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

ul,
ol {
  list-style: none;
}

/* ----- Typography Scale ----- */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.875rem, 3.5vw, 3rem);
}

h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
}

h4 {
  font-size: 1.25rem;
}

p {
  line-height: 1.7;
}

/* ----- Layout Utilities ----- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-3);
  }
}

.section {
  padding: var(--space-9) 0;
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-7) 0;
  }
}

.section--dark {
  background: var(--color-navy-900);
  color: var(--text-inverse);
}

.section--light {
  background: var(--color-gray-50);
}

/* ----- Section Heading ----- */
.section-heading {
  margin-bottom: var(--space-6);
}

.section-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-eyebrow::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--accent);
}

.section--dark .section-eyebrow {
  color: var(--accent-light);
}

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 720px;
}

.section-subtitle {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: 640px;
  margin-top: var(--space-2);
}

.section--dark .section-subtitle {
  color: var(--text-inverse-muted);
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1;
}

.btn--primary {
  background: var(--accent);
  color: var(--color-navy-900);
}

.btn--primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200, 130, 26, 0.35);
}

.btn--secondary {
  background: transparent;
  color: var(--text-inverse);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent-light);
}

.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--color-gray-300);
}

.btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.btn--large {
  padding: 1rem 2.25rem;
  font-size: 1rem;
}

/* ----- Cards ----- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
  overflow: hidden;
}

.card:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-lg);
}

/* ----- Scroll Reveal Animation ----- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Visually Hidden (accessibility) ----- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- Focus Styles (accessibility) ----- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----- Skip Link ----- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-navy-900);
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
  z-index: 9999;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 0;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--color-navy-900);
  z-index: 1000;
  transition: all var(--transition);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header--scrolled {
  height: 60px;
  background: rgba(14, 23, 38, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

.header__inner {
  max-width: var(--max-width);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  margin-right: var(--space-3);
}

.header__nav-link {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-300);
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
  position: relative;
  white-space: nowrap;
}

.header__nav-link:hover {
  color: var(--color-white);
}

.header__nav-link--active {
  color: var(--color-white);
}

.header__nav-link--active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0.875rem;
  right: 0.875rem;
  height: 2px;
  background: var(--accent);
}

.header__cta {
  flex-shrink: 0;
}

.header__menu-btn {
  display: none;
  color: var(--color-white);
  padding: 0.5rem;
  align-items: center;
}

/* ----- Mobile Menu ----- */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  background: var(--color-navy-900);
  z-index: 1001;
  transition: right 300ms ease;
  padding: calc(var(--header-height) + var(--space-4)) var(--space-4) var(--space-4);
  overflow-y: auto;
}

.mobile-menu--open {
  right: 0;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-menu__link {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-gray-300);
  padding: 0.875rem 0;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color var(--transition);
}

.mobile-menu__link:hover,
.mobile-menu__link--active {
  color: var(--accent-light);
}

.mobile-menu__cta {
  margin-top: var(--space-4);
  width: 100%;
  justify-content: center;
}

.mobile-menu__overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* ----- Responsive ----- */
@media (max-width: 968px) {
  .header__nav,
  .header__cta {
    display: none;
  }

  .header__menu-btn {
    display: flex;
  }
}
.footer {
  background: var(--color-navy-900);
  color: var(--color-gray-300);
}

.footer__top {
  padding: var(--space-8) 0 var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.3fr;
  gap: var(--space-6);
}

.footer__logo {
  margin-bottom: var(--space-3);
}

.footer__desc {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-gray-400);
  max-width: 380px;
}

.footer__heading {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-3);
  letter-spacing: 0.01em;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer__nav-link {
  font-size: 0.875rem;
  color: var(--color-gray-400);
  transition: color var(--transition);
  text-align: left;
}

.footer__nav-link:hover {
  color: var(--accent-light);
}

.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-gray-400);
}

.footer__contact-item svg {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer__contact-item a:hover {
  color: var(--accent-light);
}

.footer__cta {
  width: fit-content;
}

.footer__bottom {
  padding: var(--space-3) 0;
}

.footer__bottom-inner {
  display: flex;
  justify-content: center;
  text-align: center;
}

.footer__bottom-inner p {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .footer__col--brand {
    order: 1;
  }
}
.cta-band {
  position: relative;
  background: var(--color-navy-800);
  padding: var(--space-9) 0;
  overflow: hidden;
}

.cta-band__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--color-navy-900) 0%, var(--color-navy-700) 100%);
}

.cta-band__overlay::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(200, 130, 26, 0.06));
}

.cta-band__content {
  position: relative;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.cta-band__title {
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.cta-band__subtitle {
  color: var(--color-gray-300);
  font-size: 1.0625rem;
  margin-bottom: var(--space-5);
}

.cta-band__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.cta-band__phone {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-white);
  transition: color var(--transition);
}

.cta-band__phone:hover {
  color: var(--accent-light);
}

.cta-band__phone svg {
  color: var(--accent);
}

@media (max-width: 768px) {
  .cta-band {
    padding: var(--space-7) 0;
  }

  .cta-band__actions {
    flex-direction: column;
    gap: var(--space-3);
  }
}
/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(14, 23, 38, 0.92) 0%, rgba(14, 23, 38, 0.7) 50%, rgba(14, 23, 38, 0.45) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: var(--space-8) 0;
  max-width: 720px;
}

.hero__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.hero__title {
  color: var(--color-white);
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  margin-bottom: var(--space-3);
}

.hero__subtitle {
  color: var(--color-gray-300);
  font-size: 1.125rem;
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: var(--space-5);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hero__accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 30%, transparent 30%);
}

/* ===== Company Intro ===== */
.home-intro__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.home-intro__desc {
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  font-size: 1.0625rem;
}

.home-intro__image img {
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* ===== Services Grid ===== */
.home-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.service-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  height: 100%;
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}

.service-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.service-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy-900);
  color: var(--accent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.service-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.service-card__desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: var(--space-3);
}

.service-card__link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-dark);
  transition: gap var(--transition);
}

.service-card:hover .service-card__link {
  gap: 0.7rem;
}

/* ===== Sectors ===== */
.home-sectors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.sector-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
}

.sector-tile__image {
  position: absolute;
  inset: 0;
}

.sector-tile__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.sector-tile:hover .sector-tile__image img {
  transform: scale(1.05);
}

.sector-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 23, 38, 0.3) 0%, rgba(14, 23, 38, 0.85) 100%);
}

.sector-tile__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3);
}

.sector-tile__name {
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: 600;
}

.home-sectors__cta {
  text-align: center;
  margin-top: var(--space-6);
}

/* ===== Core Principles ===== */
.home-principles__heading {
  text-align: center;
  margin-bottom: var(--space-7);
}

.home-principles__heading .section-eyebrow {
  justify-content: center;
}

.home-principles__heading .section-eyebrow::before {
  display: none;
}

.home-principles__heading .section-title {
  margin: 0 auto;
}

.home-principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.principle-card {
  text-align: center;
  padding: var(--space-5);
  border-top: 3px solid var(--accent);
  background: var(--color-white);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.principle-card:hover {
  box-shadow: var(--shadow-md);
}

.principle-card__number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-gray-200);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.principle-card__name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-navy-900);
  margin-bottom: var(--space-2);
}

.principle-card__desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ===== Why Sytris ===== */
.home-why__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.home-why__desc {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  margin-bottom: var(--space-4);
}

.home-why__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-why__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-navy-800);
  font-weight: 500;
}

.home-why__list li::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent);
  flex-shrink: 0;
  border-radius: 1px;
}

.home-why__image img {
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1/1;
}

/* ===== Responsive ===== */
@media (max-width: 968px) {
  .home-intro__grid,
  .home-why__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .home-services__grid,
  .home-sectors__grid,
  .home-principles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .home-services__grid,
  .home-sectors__grid,
  .home-principles__grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 560px;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}
/* ===== Page Hero (shared across subpages) ===== */
.page-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 23, 38, 0.92) 0%, rgba(14, 23, 38, 0.7) 60%, rgba(14, 23, 38, 0.5) 100%);
}

.page-hero__content {
  position: relative;
  z-index: 1;
  padding: var(--space-6) 0;
  max-width: 640px;
}

.page-hero__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.page-hero__title {
  color: var(--color-white);
  margin-bottom: var(--space-2);
}

.page-hero__subtitle {
  color: var(--color-gray-300);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* ===== About Profile ===== */
.about-profile__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.about-profile__desc {
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  font-size: 1.0625rem;
}

.about-profile__image img {
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 6/5;
}

/* ===== Organisation Chart ===== */
.about-org-chart {
  background: var(--color-gray-50);
}

.about-org-chart__heading {
  text-align: center;
  max-width: 820px;
  margin: 0 auto var(--space-6);
}

.about-org-chart__heading .section-eyebrow {
  justify-content: center;
}

.about-org-chart__heading .section-eyebrow::before {
  display: none;
}

.about-org-chart__heading .section-title,
.about-org-chart__heading .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.about-org-chart__frame {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 2rem);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.about-org-chart__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ===== Vision & Mission ===== */
.about-vision-mission {
  background: var(--color-white);
}

/* Two clear side-by-side cards with a subtle lift-on-hover interaction. */
.about-vision-mission__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  align-items: stretch;
}

.about-vision-mission__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0;
  min-height: 100%;
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  background: #ffffff;
  border: 1px solid #dfe5eb;
  border-top: 4px solid var(--brand-blue);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(16, 42, 67, 0.08);
  transform: translateY(0);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  will-change: transform, box-shadow;
}

.about-vision-mission__item:nth-child(2) {
  border-top-color: var(--brand-cyan);
}

.about-vision-mission__item:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 42px rgba(16, 42, 67, 0.16);
  border-color: #c5d1dc;
  border-top-color: var(--brand-blue);
}

.about-vision-mission__item:nth-child(2):hover {
  border-top-color: var(--brand-cyan);
}

.about-vision-mission__heading {
  text-align: center;
  margin-bottom: var(--space-8);
}

.about-vision-mission__heading .section-title {
  margin-left: auto;
  margin-right: auto;
}

.about-vision-mission__icon {
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  color: var(--brand-blue);
  background: rgba(22, 67, 118, 0.08);
  border-radius: 50%;
  transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
}

.about-vision-mission__item:nth-child(2) .about-vision-mission__icon {
  color: var(--brand-cyan);
  background: rgba(0, 174, 239, 0.09);
}

.about-vision-mission__icon svg {
  width: 48px;
  height: 48px;
}

.about-vision-mission__item:hover .about-vision-mission__icon {
  transform: scale(1.06);
  background: rgba(22, 67, 118, 0.13);
}

.about-vision-mission__item:nth-child(2):hover .about-vision-mission__icon {
  background: rgba(0, 174, 239, 0.14);
}

.about-vision-mission__item h3 {
  margin: 0 0 var(--space-3);
  color: var(--brand-blue);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.about-vision-mission__item:nth-child(2) h3 {
  color: var(--brand-cyan);
}

.about-vision-mission__item p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.75;
  text-align: justify;
}

@media (max-width: 768px) {
  .about-vision-mission__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .about-vision-mission__item {
    padding: 2rem 1.5rem;
  }
}

/* ===== Paragraph Alignment ===== */
main p {
  text-align: justify;
}

/* Keep short UI copy visually balanced rather than stretching it across a line. */
main .hero__eyebrow,
main .hero__subtitle,
main .page-hero__eyebrow,
main .page-hero__subtitle,
main .section-subtitle,
main .about-vision-mission__item p,
main .about-vision-mission__heading p,
main .cta-band__subtitle,
main .contact-form__subtitle,
main .contact-info__desc,
main .sytris-editor-intro {
  text-align: justify;
}

/* ===== Core Principles ===== */
.about-principles__heading {
  text-align: center;
  margin-bottom: var(--space-7);
}

.about-principles__heading .section-eyebrow {
  justify-content: center;
}

.about-principles__heading .section-eyebrow::before {
  display: none;
}

.about-principles__heading .section-title,
.about-principles__heading .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Brand treatment for Synergy. Strength. Safety. */
.about-principles__heading .principles-brand-title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 .34em;
  text-align: center;
}

.about-principles__heading .principle-word {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
}

.about-principles__heading .principle-word--synergy {
  color: #164376 !important;
}

.about-principles__heading .principle-word--strength {
  color: #716C6A !important;
}

.about-principles__heading .principle-word--safety {
  color: #00AEEF !important;
}

.about-principles__heading .principle-word--synergy,
.about-principles__heading .principle-word--strength,
.about-principles__heading .principle-word--safety {
  color: initial;
}

.about-principles__heading .principles-brand-title .principle-word--synergy { color: #164376 !important; }
.about-principles__heading .principles-brand-title .principle-word--strength { color: #716C6A !important; }
.about-principles__heading .principles-brand-title .principle-word--safety { color: #00AEEF !important; }

.about-principles__heading .principle-word::after {
  content: '';
}

@media (max-width: 700px) {
  .about-principles__heading .principles-brand-title {
    gap: .12em .25em;
  }
}

.about-principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.about-principle-card {
  text-align: center;
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}

.about-principle-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.about-principle-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy-900);
  color: var(--accent);
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-3);
}

.about-principle-card__name {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.about-principle-card__desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ===== Approach ===== */
.about-approach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.about-approach__item {
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--accent);
}

.about-approach__item svg {
  color: var(--accent-dark);
  margin-bottom: var(--space-2);
}

.about-approach__item h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
}

.about-approach__item p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* ===== Responsive ===== */
@media (max-width: 968px) {
  .about-profile__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .about-principles__grid,
  .about-approach__grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Services Detail ===== */
.services-detail {
  padding: var(--space-9) 0;
}

.service-detail {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-7);
  align-items: center;
  margin-bottom: var(--space-9);
}

.service-detail:last-child {
  margin-bottom: 0;
}

.service-detail--reversed .service-detail__image {
  order: 2;
}

.service-detail__image img {
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.service-detail__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy-900);
  color: var(--accent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.service-detail__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.service-detail__desc {
  color: var(--text-secondary);
  font-size: 1.0625rem;
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

.service-detail__list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.service-detail__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-navy-800);
  font-weight: 500;
}

.service-detail__list li svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* ===== Responsive ===== */
@media (max-width: 968px) {
  .service-detail {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }

  .service-detail--reversed .service-detail__image {
    order: 0;
  }
}
.industries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.industry-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  transition: all var(--transition);
}

.industry-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-lg);
}

.industry-card__image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.industry-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.industry-card:hover .industry-card__image img {
  transform: scale(1.05);
}

.industry-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(14, 23, 38, 0.6) 100%);
}

.industry-card__content {
  padding: var(--space-4);
}

.industry-card__name {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.industry-card__desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .industries-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Execution Approach Grid ===== */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.capability-card {
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
  position: relative;
}

.capability-card:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-md);
}

.capability-card__number {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-gray-100);
  line-height: 1;
}

.capability-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy-900);
  color: var(--accent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.capability-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.capability-card__desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ===== Service Capabilities List ===== */
.capabilities-services__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.capabilities-service-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--accent);
}

.capabilities-service-row__title {
  font-size: 1.125rem;
  font-weight: 600;
  min-width: 200px;
  flex-shrink: 0;
  padding-top: 0.25rem;
}

.capabilities-service-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.capabilities-service-row__tag {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-gray-600);
  background: var(--color-gray-100);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-sm);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .capabilities-grid {
    grid-template-columns: 1fr;
  }

  .capabilities-service-row {
    flex-direction: column;
    gap: var(--space-2);
  }

  .capabilities-service-row__title {
    min-width: 0;
  }
}
/* ===== Safety Statement ===== */
.hseq-statement__content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.hseq-statement__icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(217, 150, 43, 0.15);
  color: var(--accent-light);
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-4);
}

.hseq-statement__content .section-eyebrow {
  justify-content: center;
}

.hseq-statement__content .section-eyebrow::before {
  display: none;
}

.hseq-statement__text {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-white);
  margin-top: var(--space-2);
}

/* ===== HSEQ Pillars ===== */
.hseq-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.hseq-pillar {
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--accent);
  transition: all var(--transition);
}

.hseq-pillar:hover {
  border-color: var(--color-gray-300);
  box-shadow: var(--shadow-md);
}

.hseq-pillar__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy-900);
  color: var(--accent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.hseq-pillar__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.hseq-pillar__desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ===== Commitments ===== */
.hseq-commitments__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.hseq-commitment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-navy-800);
}

.hseq-commitment svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* ===== Responsive ===== */
@media (max-width: 968px) {
  .hseq-pillars__grid {
    grid-template-columns: 1fr;
  }

  .hseq-commitments__grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Contact Layout ===== */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-6);
  align-items: start;
}

/* ===== Contact Info ===== */
.contact-info__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-bottom: var(--space-2);
}

.contact-info__desc {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: var(--space-5);
  line-height: 1.7;
}

.contact-info__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-info__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.contact-info__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy-900);
  color: var(--accent);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.contact-info__detail h3 {
  font-size: 0.8125rem;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-500);
  margin-bottom: 0.25rem;
}

.contact-info__detail p,
.contact-info__detail a {
  font-size: 0.9375rem;
  color: var(--color-navy-800);
  line-height: 1.55;
}

.contact-info__detail a:hover {
  color: var(--accent-dark);
}

/* ===== Form ===== */
.contact-form-wrapper {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

.contact-form__title {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.contact-form__subtitle {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  margin-bottom: var(--space-5);
}

/* Honeypot — visually hidden but accessible to bots */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form Fields */
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-3);
}

.contact-form__field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy-800);
  margin-bottom: 0.5rem;
}

.contact-form__required {
  color: var(--accent-dark);
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  color: var(--color-navy-900);
  background: var(--color-white);
  transition: border-color var(--transition);
  width: 100%;
}

.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form__input--error {
  border-color: #dc2626 !important;
}

.contact-form__error {
  font-size: 0.8125rem;
  color: #dc2626;
  margin-top: 0.375rem;
}

/* Alert */
.contact-form__alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-size: 0.875rem;
}

.contact-form__alert--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* File Upload */
.contact-form__file {
  position: relative;
}

.contact-form__file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.contact-form__file-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--space-4);
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--color-gray-500);
  transition: border-color var(--transition), color var(--transition);
  text-align: center;
}

.contact-form__file:hover .contact-form__file-label {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.contact-form__file-hint {
  font-size: 0.75rem;
  color: var(--color-gray-400);
  text-align: center;
  margin-top: 0.5rem;
}

.contact-form__file-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
}

.contact-form__file-name {
  font-size: 0.875rem;
  color: var(--color-navy-800);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-form__file-selected button {
  color: var(--color-gray-500);
  padding: 0.25rem;
  flex-shrink: 0;
  transition: color var(--transition);
}

.contact-form__file-selected button:hover {
  color: #dc2626;
}

/* Submit Button */
.contact-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

.contact-form__submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.contact-form__spinner {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Success State ===== */
.contact-form-status {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.contact-form-status--success svg {
  color: #16a34a;
  margin: 0 auto var(--space-3);
}

.contact-form-status h2 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.contact-form-status p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: var(--space-5);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.contact-form-status .btn {
  margin: 0 auto;
}

/* ===== Responsive ===== */
@media (max-width: 968px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 640px) {
  .contact-form__row {
    grid-template-columns: 1fr;
  }

  .contact-form-wrapper {
    padding: var(--space-4);
  }
}

/* WordPress / theme integration */
body { margin: 0; }
body.admin-bar .header { top: 32px; }
.sytris-logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.sytris-logo__mark { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--color-navy-900); border-radius:2px; font-family:var(--font-heading); font-size:1.45rem; font-weight:700; line-height:1; }
.sytris-logo__text { display:flex; flex-direction:column; line-height:1; text-align:left; }
.sytris-logo__text strong { font-family:var(--font-heading); font-weight:700; font-size:1.25rem; letter-spacing:.02em; }
.sytris-logo__text small { font-family:var(--font-body); font-weight:400; font-size:.625rem; letter-spacing:.15em; text-transform:uppercase; margin-top:.2rem; }
.header__nav-link, .mobile-menu__link, .footer__nav-link { text-decoration:none; }
.header__nav-link { display:inline-flex; align-items:center; }
.header__cta { text-decoration:none; }
.mobile-menu__link { display:block; width:100%; background:none; border:0; }
.footer__nav-link { background:none; border:0; padding:0; }
.footer__cta { text-decoration:none; }
.page-hero { margin-top:0; }
.page-hero__content { padding-bottom:var(--space-7); }
.contact-form__field input[type="file"] { cursor:pointer; }
.wp-block-image, .wp-block-gallery { margin:0; }
@media(max-width:782px){ body.admin-bar .header{top:46px}.mobile-menu{padding-top:calc(var(--header-height) + 46px + var(--space-4));} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto}.reveal{opacity:1!important;transform:none!important;transition:none!important} *{scroll-behavior:auto!important} }
.header__nav .sytris-wp-menu{display:flex;align-items:center;gap:.25rem;margin:0;padding:0;list-style:none}
.header__nav .sytris-wp-menu>li{margin:0;padding:0}
.header__nav .sytris-wp-menu a{font-family:var(--font-body);font-size:.875rem;font-weight:500;color:var(--color-gray-300);padding:.5rem .875rem;position:relative;white-space:nowrap;text-decoration:none}
.header__nav .sytris-wp-menu a:hover,.header__nav .sytris-wp-menu .current-menu-item>a{color:var(--color-white)}
.header__nav .sytris-wp-menu .current-menu-item>a:after{content:'';position:absolute;bottom:2px;left:.875rem;right:.875rem;height:2px;background:var(--accent)}
@media(max-width:968px){.header__nav .sytris-wp-menu{display:none}}
.mobile-menu__overlay{display:block}.mobile-menu__overlay[hidden]{display:none}

/* ===== v1.1 refinements ===== */
.sytris-logo--image { max-width: 210px; }
.sytris-logo__image { display:block; width:auto; max-width:210px; max-height:52px; height:auto; object-fit:contain; }
.header__nav { gap: 0.05rem; }
.header__nav-link { font-size: 0.82rem; padding-left: 0.7rem; padding-right: 0.7rem; }
.header__nav-link--active::after { left: 0.7rem; right: 0.7rem; }

.hero {
  min-height: clamp(620px, 78vh, 760px);
}
.hero__content {
  max-width: 780px;
  padding-top: calc(var(--space-8) + 1rem);
  padding-bottom: var(--space-7);
}
.hero__title {
  max-width: 760px;
  text-wrap: balance;
}
.hero__subtitle {
  max-width: 620px;
}

@media (max-width: 1180px) {
  .header__inner { padding-left: var(--space-3); padding-right: var(--space-3); gap: var(--space-2); }
  .header__nav-link { font-size: 0.78rem; padding-left: 0.5rem; padding-right: 0.5rem; }
  .header__nav-link--active::after { left: 0.5rem; right: 0.5rem; }
  .header__cta { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 1080px) {
  .header__nav,
  .header__cta { display:none; }
  .header__menu-btn { display:flex; }
}

@media (max-width: 640px) {
  .hero { min-height: 620px; }
  .hero__content { padding-top: calc(var(--space-7) + 1rem); }
  .hero__title { font-size: clamp(2.35rem, 11vw, 3.35rem); }
  .hero__subtitle { font-size: 1rem; }
  .sytris-logo__image { max-width: 170px; max-height: 44px; }
}

/* ===== v1.4 official Sytris logo ===== */
.sytris-logo--image { display:inline-flex; align-items:center; width:auto; max-width:240px; }
.sytris-logo__image { width:auto; height:auto; max-width:240px; max-height:58px; object-fit:contain; }
.header .sytris-logo--image { flex:0 0 auto; }
.footer__logo .sytris-logo--image { max-width:270px; }
.footer__logo .sytris-logo__image { max-width:270px; max-height:66px; }
@media (max-width: 968px) {
  .sytris-logo--image { max-width:200px; }
  .sytris-logo__image { max-width:200px; max-height:50px; }
}
@media (max-width: 640px) {
  .sytris-logo--image { max-width:175px; }
  .sytris-logo__image { max-width:175px; max-height:44px; }
}

/* ==========================================================================
   Sytris Brand Refinement — v1.6
   Palette: Blue #164376 / Grey #716C6A / Cyan #00AEEF
   ========================================================================== */

.brand-blue { color: var(--brand-blue) !important; }
.brand-gray { color: var(--brand-gray) !important; }
.brand-cyan { color: var(--brand-cyan) !important; }

.section-eyebrow,
.page-hero__eyebrow {
  color: var(--brand-cyan);
}

.section-eyebrow::before {
  background: var(--brand-cyan);
}

.btn--primary {
  background: var(--brand-cyan);
  color: var(--brand-navy);
}

.btn--primary:hover {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 6px 20px rgba(22, 67, 118, 0.28);
}

.btn--secondary:hover {
  border-color: var(--brand-cyan);
  color: var(--brand-cyan);
}

.header__nav-link--active::after {
  background: var(--brand-cyan);
}

.about-principles__heading .section-title,
.about-principle-card__name {
  color: var(--brand-blue);
}

.about-principle-card:nth-child(2) .about-principle-card__name {
  color: var(--brand-gray);
}

.about-principle-card:nth-child(3) .about-principle-card__name {
  color: var(--brand-cyan);
}

.about-principle-card:nth-child(1) .about-principle-card__icon {
  color: var(--brand-blue);
  border-top: 3px solid var(--brand-blue);
}

.about-principle-card:nth-child(2) .about-principle-card__icon {
  color: var(--brand-gray);
  border-top: 3px solid var(--brand-gray);
}

.about-principle-card:nth-child(3) .about-principle-card__icon {
  color: var(--brand-cyan);
  border-top: 3px solid var(--brand-cyan);
}

.principle-card:nth-child(1) {
  border-top-color: var(--brand-blue);
}
.principle-card:nth-child(2) {
  border-top-color: var(--brand-gray);
}
.principle-card:nth-child(3) {
  border-top-color: var(--brand-cyan);
}

.principle-card:nth-child(1) .principle-card__name { color: var(--brand-blue); }
.principle-card:nth-child(2) .principle-card__name { color: var(--brand-gray); }
.principle-card:nth-child(3) .principle-card__name { color: var(--brand-cyan); }

.about-approach__item {
  border-left-color: var(--brand-cyan);
}

.about-approach__item svg,
.about-vision__icon {
  color: var(--brand-cyan);
}

.about-vision__icon {
  background: rgba(0, 174, 239, 0.12);
}

.page-hero__eyebrow {
  letter-spacing: 0.12em;
}

@media (max-width: 768px) {
  h1 { line-height: 1.08; }
  h2 { line-height: 1.12; }
}


/* Industry title typography */
.industry-name-brand,
.sector-name-brand {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.industry-name-brand .industry-name-symbol,
.sector-name-brand .industry-name-symbol {
  font-family: 'Artegra Sans Alt RegularSymbols', 'Artegra Sans Alt Symbols', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  display: inline-block;
  margin: 0 .04em;
}

.industry-name-brand .industry-name-symbol--amp,
.sector-name-brand .industry-name-symbol--amp {
  margin-left: .10em;
  margin-right: .10em;
}

@media (max-width: 700px) {
  .industry-name-brand,
  .sector-name-brand {
    letter-spacing: 0;
  }
}


/* Unified italic symbol treatment */
@font-face {
  font-family: 'Sytris Symbol';
  src: url('assets/fonts/PlusJakartaSans-Bold.ttf') format('truetype');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

.industry-name-brand .industry-name-symbol,
.sector-name-brand .industry-name-symbol,
.industry-name-brand .industry-name-symbol--amp,
.sector-name-brand .industry-name-symbol--amp {
  font-family: 'Sytris Symbol', 'Plus Jakarta Sans', Arial, sans-serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
}

.industry-name-brand .industry-name-symbol {
  margin: 0 .035em;
}

.industry-name-brand .industry-name-symbol--amp,
.sector-name-brand .industry-name-symbol--amp {
  margin-left: .10em;
  margin-right: .10em;
}


/* v2.1 — one consistent italic font for all heading symbols */
.sytris-symbol,
.industry-name-brand .industry-name-symbol,
.sector-name-brand .industry-name-symbol,
.industry-name-brand .industry-name-symbol--amp,
.sector-name-brand .industry-name-symbol--amp {
  font-family: 'Sytris Symbol', 'Plus Jakarta Sans', Arial, sans-serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
}


/* ==========================================================================
   v2.2 Mobile QA / stylesheet reliability
   ========================================================================== */

html { overflow-x: hidden; }
body { overflow-x: hidden; }

@media (max-width: 1080px) {
  .header__nav,
  .header__cta {
    display: none !important;
  }

  .header__menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
  }

  .header__inner {
    gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .sytris-logo--image {
    max-width: 165px !important;
    flex: 0 1 auto;
  }

  .sytris-logo__image {
    width: auto !important;
    max-width: 165px !important;
    max-height: 44px !important;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 72px;
  }

  .header {
    height: 72px;
  }

  .header__inner {
    min-height: 72px;
    padding: 0 14px;
  }

  .sytris-logo--image,
  .sytris-logo__image {
    max-width: 154px !important;
    max-height: 42px !important;
  }

  .header__menu-btn {
    width: 42px;
    height: 42px;
  }

  .hero {
    min-height: 610px;
  }

  .hero__content {
    padding: 108px 18px 56px;
  }

  .hero__title {
    font-size: clamp(2.15rem, 10vw, 3rem);
    line-height: 1.06;
    max-width: 100%;
  }

  .hero__subtitle {
    font-size: 0.98rem;
    line-height: 1.65;
    max-width: 100%;
  }

  .section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .container {
    width: min(100% - 36px, var(--max-width));
  }

  .section-title {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    line-height: 1.1;
  }

  .page-hero__title {
    font-size: clamp(2.2rem, 10vw, 3rem);
    line-height: 1.06;
  }

  .page-hero__content {
    padding-left: 18px;
    padding-right: 18px;
  }

  .btn,
  .btn--large {
    min-height: 48px;
  }

  .mobile-menu {
    width: min(330px, 88vw);
  }
}

/* Prevent long headings / URLs / labels from forcing horizontal overflow. */
h1, h2, h3, h4, p, a, li {
  overflow-wrap: anywhere;
}

img, svg {
  max-width: 100%;
}


/* v2.8 contact-link revision: address uses the supplied Google Maps link; WhatsApp links open in a new tab.
   Typography intentionally remains inherited so the Global Font Fix plugin
   continues to control the site's fonts. */
.footer__contact-item > a,
.contact-info__detail > a {
  text-decoration: none;
}

.footer__contact-item > a:hover,
.contact-info__detail > a:hover {
  text-decoration: underline;
}

.footer__bottom-inner strong {
  font-weight: 800;
}


/* ========================================================================
   v3.3 Responsive Typography + Vision/Mission Card QA
   Desktop: justified body paragraphs. Mobile: natural left alignment to
   prevent excessive word spacing on narrow screens.
   ======================================================================== */
main p {
  text-align: justify;
  text-justify: inter-word;
}

@media (max-width: 768px) {
  main p,
  main .hero__subtitle,
  main .page-hero__subtitle,
  main .section-subtitle,
  main .about-profile__desc,
  main .about-vision-mission__item p,
  main .about-principle-card__desc,
  main .about-approach__item p,
  main .cta-band__subtitle,
  main .contact-form__subtitle,
  main .contact-info__desc,
  main .sytris-editor-intro {
    text-align: left !important;
    text-justify: auto;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .section {
    padding-left: 0;
    padding-right: 0;
  }

  /* Keep the Vision and Mission cards visually identical to desktop,
     while stacking them naturally on phones. */
  .about-vision-mission {
    width: 100%;
    background: #fff !important;
    overflow: visible;
  }

  .about-vision-mission .container {
    width: 100%;
    max-width: 100%;
  }

  .about-vision-mission__grid {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
    margin: 0;
  }

  .about-vision-mission__item,
  .about-vision-mission__item:nth-child(2) {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 28px 22px;
    box-sizing: border-box;
    background: #fff !important;
    color: var(--text-primary);
    border: 1px solid #dfe5eb !important;
    border-top: 4px solid var(--brand-blue) !important;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(16, 42, 67, 0.08);
  }

  .about-vision-mission__item:nth-child(2) {
    border-top-color: var(--brand-cyan) !important;
  }

  .about-vision-mission__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(16, 42, 67, 0.13);
  }

  .about-vision-mission__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
  }

  .about-vision-mission__icon svg {
    width: 38px;
    height: 38px;
  }

  .about-vision-mission__item h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
  }

  .about-vision-mission__item p {
    max-width: none;
    width: 100%;
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
  }

  .about-vision-mission__heading {
    margin-bottom: 28px;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .about-vision-mission__item,
  .about-vision-mission__item:nth-child(2) {
    padding: 24px 20px;
  }

  .about-vision-mission__grid {
    gap: 18px !important;
  }
}

/* ========================================================================
   v3.4 Mobile Wide Layout
   Use the full phone viewport with slim gutters. The previous mobile
   container padding made the content feel too narrow on small screens.
   ======================================================================== */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  .section .container,
  .page-hero .container,
  .header .container,
  .footer .container {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto;
    margin-right: auto;
  }

  .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Make the Vision/Mission cards genuinely wide on phones. */
  .about-vision-mission .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .about-vision-mission__grid {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .about-vision-mission__item,
  .about-vision-mission__item:nth-child(2) {
    width: 100% !important;
    max-width: none !important;
    padding: 24px 18px !important;
    border-radius: 14px;
    box-sizing: border-box;
  }

  .about-vision-mission__item p {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    font-size: 1rem;
    line-height: 1.65;
  }

  /* Give the rest of the About page the same wider reading width. */
  .about-profile__grid,
  .about-principles__grid,
  .about-approach__grid,
  .about-org-chart__frame {
    width: 100% !important;
    max-width: none !important;
  }

  .about-profile__text,
  .about-profile__image,
  .about-principles__heading,
  .about-approach .section-heading,
  .about-org-chart__heading {
    width: 100%;
    max-width: none;
  }

  /* Keep body copy readable without the ugly stretched word spacing. */
  main p,
  main li {
    text-align: left !important;
    text-justify: auto !important;
  }

  /* Prevent headings and buttons from creating an artificially narrow block. */
  .section-title,
  .section-subtitle,
  .page-hero__title,
  .page-hero__subtitle,
  .hero__title,
  .hero__subtitle,
  .btn,
  .btn--large {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .container,
  .section .container,
  .page-hero .container,
  .header .container,
  .footer .container,
  .about-vision-mission .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .about-vision-mission__item,
  .about-vision-mission__item:nth-child(2) {
    padding: 22px 16px !important;
  }
}


/* ========================================================================
   v3.5 FINAL MOBILE OVERRIDE
   Mobile is intentionally wide and left-aligned. Vision/Mission are
   standalone white cards, never a full-width dark section.
   ======================================================================== */
@media (max-width: 768px) {
  /* Reset mobile body copy so no earlier justify rule can win. */
  body main p,
  body main li,
  body main .about-profile__desc,
  body main .about-vision-mission__item p,
  body main .about-principle-card__desc,
  body main .about-approach__item p,
  body main .section-subtitle,
  body main .page-hero__subtitle,
  body main .hero__subtitle {
    text-align: left !important;
    text-justify: none !important;
    text-align-last: left !important;
    word-spacing: normal !important;
    letter-spacing: normal;
    hyphens: none;
  }

  /* Use the available phone width with only slim gutters. */
  body .container,
  body .section .container,
  body .about-vision-mission .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box;
  }

  /* Vision & Mission: white card section, never navy on mobile. */
  body main .about-vision-mission,
  body main .about-vision-mission.section,
  body main .about-vision-mission.section--dark,
  body main .about-vision-mission.section--light {
    background: #ffffff !important;
    color: var(--text-primary) !important;
  }

  body main .about-vision-mission__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body main .about-vision-mission__item,
  body main .about-vision-mission__item:nth-child(2) {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 24px 18px !important;
    align-items: flex-start !important;
    text-align: left !important;
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid #dfe5eb !important;
    border-top: 4px solid var(--brand-blue) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(16,42,67,.08) !important;
  }

  body main .about-vision-mission__item:nth-child(2) {
    border-top-color: var(--brand-cyan) !important;
  }

  body main .about-vision-mission__item:hover,
  body main .about-vision-mission__item:nth-child(2):hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 30px rgba(16,42,67,.14) !important;
  }

  body main .about-vision-mission__icon {
    width: 58px !important;
    height: 58px !important;
    margin: 0 0 14px !important;
    flex: 0 0 auto;
  }

  body main .about-vision-mission__icon svg {
    width: 36px !important;
    height: 36px !important;
  }

  body main .about-vision-mission__item h3 {
    margin: 0 0 10px !important;
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
  }

  body main .about-vision-mission__item p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: var(--text-secondary) !important;
  }

  /* Keep About page images and cards wide without creating overflow. */
  body main .about-profile__grid,
  body main .about-principles__grid,
  body main .about-approach__grid,
  body main .about-org-chart__frame {
    width: 100% !important;
    max-width: none !important;
  }

  body main .about-profile__image img,
  body main .about-org-chart__frame img {
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  body .container,
  body .section .container,
  body .about-vision-mission .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body main .about-vision-mission__item,
  body main .about-vision-mission__item:nth-child(2) {
    padding: 22px 16px !important;
  }
}