/* ==========================================================================
   SRISYS Enterprise Experience System (SEES) v1.0 — Style Guide
   Generated from: SRISYS Enterprise Experience System.docx
   Scope: Design tokens + base/component styles per doc Pages 5–11
   Rule (Page 5): "No custom colors. Design tokens only."
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS  (Page 5 Color System · Page 6 Typography · Page 7 Layout)
   -------------------------------------------------------------------------- */
:root{
  /* Brand color palette — Page 5 */
  --color-primary-900:#0B2E63; /* Header, Footer, CTA */
  --color-primary-800:#123D7A; /* Hover states */
  --color-primary-700:#1E5AA8; /* Links */
  --color-primary-100:#EDF4FD; /* Light background */
  --color-white:#FFFFFF;       /* Primary background */
  --color-surface:#F8FAFC;     /* Alternate sections */
  --color-border:#E5E7EB;      /* Cards & dividers */
  --color-text-primary:#1F2937;   /* Headlines */
  --color-text-secondary:#6B7280; /* Body text */

  /* Accent colors — Page 5 */
  --color-orange:#F59E0B;  /* Primary CTA */
  --color-green:#22C55E;   /* Success */
  --color-red:#EF4444;     /* Error */
  --color-purple:#7C3AED;  /* AI */
  --color-cyan:#06B6D4;    /* Data */
  --color-indigo:#4F46E5;  /* Architecture */

  /* Typography — Page 6 */
  --font-family-base:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --line-height-base:1.4; /* 140% */

  --font-size-display-xl:56px;
  --font-size-display-l:48px;
  --font-size-h1:42px;
  --font-size-h2:36px;
  --font-size-h3:30px;
  --font-size-h4:24px;
  --font-size-h5:20px;
  --font-size-h6:18px;
  --font-size-body-lg:18px;
  --font-size-body:16px;
  --font-size-small:14px;
  --font-size-caption:12px;
  /* Text Transform */
  --text-transform-uppercase:uppercase;
  --text-transform-capitalize:capitalize;
  --text-transform-lowercase:lowercase;
  --text-transform-none:none;

  /* Spacing tokens — Page 7 */
  --space-zero: 0px;
  --space-xs:8px;
  --space-s:16px;
  --space-m:24px;
  --space-l:32px;
  --space-xl:48px;
  --space-xxl:64px;
  --space-section:16px;

  /* Radius tokens — Page 7 */
  --radius-card:16px;
  --radius-button:10px;
  --radius-input:10px;

  /* Elevation — Page 9 ("Small" shadow, hover "Shadow Increase") */
  --shadow-small:0 2px 8px rgba(11,46,99,.08);
  --shadow-hover:0 8px 20px rgba(11,46,99,.14);

  /* Grid & container — Page 7 */
  --content-width:1440px;
  --content-max-width:1440px;
  --max-width:1440px;
  --container-padding-zero:0px;
  --container-padding-xs:8px;
  --container-padding-s:16px;
  --container-padding-m:24px;
  --container-padding-l:32px;
  --container-padding-xl:48px;
  --container-padding-xxl:64px;
  .w-100{
    min-width:100%
  }
  .m-0 {
    margin: var(--space-zero);
  }
  .mt-0 {
    margin-top: var(--space-zero);
  }

  /* Breakpoints (reference only — CSS custom properties can't drive
     @media queries; kept here for documentation, used literally below) — Page 11
     Mobile: <768px · Tablet: 768–1023px · Desktop: ≥1024px */
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }

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

body{
  margin:0;
  font-family:var(--font-family-base);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-body);
  line-height:var(--line-height-base);
  color:var(--color-text-primary);
  background:var(--color-white);
  text-align:left; /* Page 6: Text Alignment = Left */
}

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

a{ color:var(--color-primary-700); text-decoration:none; } /* Page 5: Links = Primary 700 */
a:hover{ text-decoration:underline; } /* Page 6: Underline = Links Only */

/* Focus visibility — accessibility (Page 8 States: Focus = Blue Outline) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--color-primary-700);
  outline-offset:2px;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY  (Page 6)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.display-xl, .display-l{
  margin:0 0 var(--space-s);
  color:var(--color-primary-900);
  font-weight:var(--font-weight-bold);
  line-height:1.15;
}

.display-xl{ font-size:var(--font-size-display-xl); font-weight:var(--font-weight-bold); }
.display-l{ font-size:var(--font-size-display-l); font-weight:var(--font-weight-bold); }
h1{ font-size:var(--font-size-h1); font-weight:var(--font-weight-bold); } /* Rule: Single H1 per page */
h2{ font-size:var(--font-size-h2); font-weight:var(--font-weight-bold); }
h3{ font-size:var(--font-size-h3); font-weight:var(--font-weight-semibold); }
h4{ font-size:var(--font-size-h4); font-weight:var(--font-weight-semibold); }
h5{ font-size:var(--font-size-body-lg); font-weight:var(--font-weight-semibold); } /* no doc token — falls back to Body Large */
h6{ font-size:var(--font-size-body); font-weight:var(--font-weight-semibold); text-transform:uppercase; letter-spacing:.04em; } /* no doc token — treated as a Label-style heading */

p, .body-large, .body, .text-small, .caption{
  margin:0 0 var(--space-s);
  color:var(--color-primary-900);
  max-width:80ch; /* Rule: Paragraph Width = 70–80 characters */
}

.body-large{ font-size:var(--font-size-body-lg); font-weight:var(--font-weight-regular); }
.body{ font-size:var(--font-size-body); font-weight:var(--font-weight-regular); }
.text-small, small{ font-size:var(--font-size-small); font-weight:var(--font-weight-regular); }
.caption{ font-size:var(--font-size-caption); font-weight:var(--font-weight-medium); }

.label{
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-semibold);
  text-transform:uppercase; /* Rule: Uppercase = Labels Only */
  letter-spacing:.04em;
  color:var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   3B. STANDARD HTML ELEMENTS
   Bare-tag defaults so unstyled markup already matches SEES tokens.
   -------------------------------------------------------------------------- */

/* Inline text semantics */
strong, b{ font-weight:var(--font-weight-bold); color:inherit; }
em, i{ font-style:italic; }
mark{ background:var(--color-primary-100); color:var(--color-text-primary); padding:0 .15em; }
abbr[title]{ text-decoration:underline dotted; cursor:help; }
sub, sup{ font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
sup{ top:-.5em; }
sub{ bottom:-.25em; }

/* Code */
code, kbd, samp, pre{
  font-family:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size:.9em;
}
code{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:4px;
  padding:.15em .4em;
}
pre{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-input);
  padding:var(--space-s);
  overflow-x:auto;
}
pre code{ background:none; border:0; padding:0; }
kbd{
  background:var(--color-text-primary);
  color:var(--color-white);
  border-radius:4px;
  padding:.1em .4em;
}

/* Lists */
ul, ol{
  margin:0 0 var(--space-s);
  padding-left:var(--space-m);
  color:var(--color-text-secondary);
}
li{ margin-bottom:var(--space-xs); }
li > ul, li > ol{ margin-top:var(--space-xs); margin-bottom:0; }

dl{ margin:0 0 var(--space-m); }
dt{ font-weight:var(--font-weight-semibold); color:var(--color-text-primary); }
dd{ margin:0 0 var(--space-s); color:var(--color-text-secondary); }

/* Quotes */
blockquote{
  margin:0 0 var(--space-m);
  padding:var(--space-s) var(--space-m);
  border-left:3px solid var(--color-primary-700);
  background:var(--color-surface);
  color:var(--color-text-primary);
  font-size:var(--font-size-body-lg);
  font-style:italic;
}
blockquote p:last-child{ margin-bottom:0; }
cite{ font-style:normal; color:var(--color-text-secondary); font-size:var(--font-size-small); }

/* Rule */
hr{
  border:0;
  border-top:1px solid var(--color-border);
  margin:var(--space-l) 0;
}

/* Tables */
table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 var(--space-m);
  font-size:var(--font-size-body);
}
caption{
  text-align:left;
  font-size:var(--font-size-small);
  color:var(--color-text-secondary);
  margin-bottom:var(--space-xs);
}
th, td{
  text-align:left;
  padding:var(--space-xs) var(--space-s);
  border-bottom:1px solid var(--color-border);
}
th{
  font-weight:var(--font-weight-semibold);
  color:var(--color-text-primary);
  background:var(--color-surface);
}
tfoot td{ font-weight:var(--font-weight-semibold); }

/* Figures */
figure{ margin:0 0 var(--space-m); }
figcaption{
  font-size:var(--font-size-small);
  color:var(--color-text-secondary);
  margin-top:var(--space-xs);
}

/* Address */
address{
  font-style:normal;
  color:var(--color-text-secondary);
  font-size:var(--font-size-small);
}

/* Semantic layout elements — sensible bare-tag defaults;
   .site-header / .site-footer / .card / .hero classes above override these
   with the fully-specified component styles. */
header{ display:block; }
nav ul{ list-style:none; padding-left:0; margin:0; }
nav a{ color:var(--color-text-primary); }
main{ display:block; }
/* section{ padding-block:var(--space-section); } /* mirrors .section, Page 7 Section Gap */
section+section{ padding-block:var(--space-section); }
article{ display:block; margin-bottom:var(--space-l); }
aside{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  padding:var(--space-m);
}
footer{
  background:var(--color-white); /* mirrors .site-footer, Page 5: Footer = Primary 900 */
  color:var(--color-primary-900);
  padding-block:var(--space-xl);
}
footer a{ color:var(--color-primary-900); }
footer a:hover{ color:var(--color-primary-100); }

/* Forms — bare tags, mirrors .btn / .field above */
form{ margin:0; }
fieldset{
  border:1px solid var(--color-border);
  border-radius:var(--radius-input);
  padding:var(--space-m);
  margin:0 0 var(--space-m);
}
legend{
  font-weight:var(--font-weight-semibold);
  padding:0 var(--space-xs);
}
label{
  display:block;
  font-size:var(--font-size-small);
  font-weight:var(--font-weight-semibold);
  color:var(--color-text-primary);
  margin-bottom:var(--space-xs);
}
input, textarea, select{
  height:52px; /* Page 8: Input Height = 52px */
  padding-inline:var(--space-s);
  border:1px solid var(--color-border);
  border-radius:var(--radius-input); /* Page 8: Radius = 10px */
  font-family:var(--font-family-base);
  font-size:var(--font-size-body);
  color:var(--color-text-primary);
  background:var(--color-white);
}
textarea{ height:auto; min-height:120px; padding-block:var(--space-xs); }
input[type="checkbox"], input[type="radio"]{
  height:auto; width:auto;
  accent-color:var(--color-orange);
}

button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);
  height:52px; /* mirrors .btn, Page 8: Height = 52px */
  padding-inline:var(--space-m);
  border-radius:var(--radius-button);
  font-family:var(--font-family-base);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-semibold);
  cursor:pointer;
  border:1px solid transparent;
  background:var(--color-orange); /* Page 5 Color Usage Rules: Buttons = Orange */
  color:var(--color-text-primary);
  transition:filter .15s ease, opacity .15s ease;
}
button:hover{ filter:brightness(.92); } /* Page 8 States: Hover = Darken 8% */
button:disabled{ opacity:.4; cursor:not-allowed; } /* Page 8 States: Disabled = 40% Opacity */

/* --------------------------------------------------------------------------
   4. LAYOUT, GRID & SPACING  (Page 7)
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--content-width);
  margin-inline:auto;
}

.container--wide{ max-width:var(--max-width); }
.section {
  max-width: var(--max-width);
  margin: 0 auto;
}
section.container {  
  max-width: var(--content-max-width);
  padding: 0 var(--space-xl);
}
.section+section{ padding-block:var(--space-section) var(--space-section) 0 var(--space-section); } /* Section Gap = 96px */

.grid{
  display:grid;
  gap:var(--space-m);
  grid-template-columns:repeat(4, 1fr); /* Mobile: 4 columns */
}

@media (min-width:768px){
  .grid{ grid-template-columns:repeat(8, 1fr); } /* Tablet: 8 columns */
}

@media (min-width:1024px){
  .grid{ grid-template-columns:repeat(12, 1fr); } /* Desktop: 12 columns */
}

/* --------------------------------------------------------------------------
   5. BUTTONS & FORMS  (Page 8)
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);
  height:52px;
  padding-inline:var(--space-m);
  border-radius:var(--radius-button);
  font-family:var(--font-family-base);
  font-size:var(--font-size-body);
  font-weight:var(--font-weight-semibold);
  cursor:pointer;
  border:1px solid transparent;
  transition:filter .15s ease, opacity .15s ease;
}

.btn-primary{
  background:var(--color-orange);
  color:var(--color-primary-900);
  border-color:transparent;
}
.btn-primary:hover{ 
  filter:brightness(.92);
  color: var(--color-primary-700);
 } /* Hover = Darken 8% */
.btn-primary:hover .icon{ 
  color: var(--color-primary-700);
 }
.btn-secondary{
  background:var(--color-white);
  color:var(--color-primary-900);
  border-color:var(--color-primary-900);
}
.btn-secondary:hover{ filter:brightness(.92); }
.text-transform-uppercase {
  text-transform: uppercase;
}
.text-transform-capitalize {
  text-transform: capitalize;
}
.text-transform-lowercase {
  text-transform: lowercase;
}
.text-transform-none {
  text-transform: none;
}
.play-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--color-primary-900);
  color:var(--color-white);
}
.play-badge .icon{ width:10px; height:10px; }

.btn:disabled,
.btn[aria-disabled="true"]{
  opacity:.4; /* Disabled = 40% Opacity */
  cursor:not-allowed;
  pointer-events:none;
}

.btn.is-loading{
  color:transparent;
  position:relative;
  pointer-events:none;
}
.btn.is-loading::after{
  content:"";
  position:absolute;
  width:18px; height:18px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  color:var(--color-white);
  animation:btn-spin .6s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }

/* Forms */
.field{ display:flex; flex-direction:column; gap:var(--space-xs); margin-bottom:var(--space-m); }

.field label{
  order:-1; /* Label Position = Above */
  font-size:var(--font-size-small);
  font-weight:var(--font-weight-semibold);
  color:var(--color-text-primary);
}

.field input,
.field textarea,
.field select{
  height:52px;
  padding-inline:var(--space-s);
  border:1px solid var(--color-border);
  border-radius:var(--radius-input);
  font-family:var(--font-family-base);
  font-size:var(--font-size-body);
  color:var(--color-text-primary);
  background:var(--color-white);
}

.field textarea{ height:auto; min-height:120px; padding-block:var(--space-xs); }

.field-error{
  font-size:var(--font-size-small);
  color:var(--color-red);
} /* Validation = Inline */

.field.has-error input,
.field.has-error textarea,
.field.has-error select{
  border-color:var(--color-red);
}

/* --------------------------------------------------------------------------
   6. CARDS & ELEVATION  (Page 9)
   -------------------------------------------------------------------------- */
.card{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-small);
  padding:var(--space-m);
  transition:transform .18s ease, box-shadow .18s ease;
}

.card:hover{
  transform:translateY(-4px); /* Hover = Lift 4px */
  box-shadow:var(--shadow-hover); /* Shadow Increase */
}

/* --------------------------------------------------------------------------
   7. ICONS & IMAGERY  (Page 10)
   -------------------------------------------------------------------------- */
.icon{
  width:48px;
  height:48px;
  stroke-width:2px;
  fill:none;
  color:var(--color-primary-900); /* Color = Theme Accent */
}
.icon--lg{ width:64px; height:64px; }

.img-responsive{ width:100%; height:auto; }

/* --------------------------------------------------------------------------
   8. HEADER  (Page 14–15)
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:88px;
  display:flex;
  align-items:center;
  background:var(--color-white);
  box-shadow:none;
  transition:box-shadow .2s ease;
}
.site-header.is-scrolled{ box-shadow:var(--shadow-small); } /* Shadow = On Scroll */

.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

.site-nav{ display:flex; align-items:center; gap:var(--space-l); }
.site-nav a{ color:var(--color-primary-900); font-weight:var(--font-weight-medium); text-transform:uppercase; }
.site-nav a:hover{ color:var(--color-primary-700); text-decoration:none; }

.nav-toggle{ display:none; } /* Hamburger — shown only on mobile, see §10 */

/* Submenu — dropdown on hover/focus for nav items with children (Solutions, Industries) */
.nav-item{ position:relative; display:flex; align-items:center; height:88px; }
.nav-item .nav-link{ display:inline-flex; align-items:center; gap:6px; }
.nav-item .chevron{ width:14px; height:14px; color:currentColor; transition:transform .15s ease; }
.nav-item:hover .chevron, .nav-item:focus-within .chevron{ transform:rotate(180deg); }

.submenu{
  display:none;
  position:absolute;
  top:calc(100% - 20px);
  left:0;
  min-width:260px;
  margin:0;
  padding:var(--space-xs);
  list-style:none;
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-input);
  box-shadow:var(--shadow-hover);
  z-index:110;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu{ display:block; }

.submenu li a{
  display:block;
  padding:var(--space-xs) var(--space-s);
  border-radius:6px;
  color:var(--color-primary-900);
  font-weight:var(--font-weight-regular);
  font-size:var(--font-size-small);
  text-transform:none;
}
.submenu li a:hover{ background:var(--color-primary-100); color:var(--color-primary-700); text-decoration:none; }

/* --------------------------------------------------------------------------
   9. HERO  (Page 16–17)
   -------------------------------------------------------------------------- */
.hero{
  min-height:310px;
  display:grid;
  grid-template-columns:1fr 1fr; /* 50 / 50 */
  align-items:center;
  max-width: var(--max-width);
  margin:0 auto;
}

.hero-content{ padding:var(--space-xl); }
.hero-image{ height:100%; overflow:hidden; }
.hero-image img{ width:100%; height:100%; object-fit:cover; }


/* Touch target minimum — Page 11 checklist: Touch targets ≥44px */
.btn, .nav-toggle, .icon-button{ min-height:44px; min-width:44px; }

/* --------------------------------------------------------------------------
   11. CARD GRID & CTA ROW UTILITIES
   -------------------------------------------------------------------------- */
.card-grid{
  display:grid;
  gap:var(--space-m);
  grid-template-columns:repeat(4, 1fr);
}

.cta-row{
  display:flex;
  align-items:center;
  gap:var(--space-m);
}

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--color-white); /* Footer = Primary 900 */
  color:var(--color-primary-900);
  padding-block:var(--space-sm);
}
.site-footer a{ color:var(--color-primary-900); }
.site-footer a:hover{ color:var(--color-primary-700); }

/* --------------------------------------------------------------------------
   13. CTA BANNER
   -------------------------------------------------------------------------- */
.cta-banner{
  background:var(--color-primary-900); /* CTA Banner = Primary 900 */
  color:var(--color-white);
  border-radius:var(--radius-card);
  padding:var(--space-s) var(--space-l);
}
.cta-banner .btn-primary{ background:var(--color-orange); } /* Buttons = Orange */

/* --------------------------------------------------------------------------
   14. PAGE — LANDING
   Composition for the SRISYS Landing Page reference. Everything here is
   layout/assembly on top of the tokens and components above — nothing here
   introduces a new color, font size, spacing, or radius value.
   -------------------------------------------------------------------------- */

/* Static bordered container (no hover-lift) — Card standards (Page 9) minus the interactive Hover rule,
   used for section wrappers like Industries that borrow the card look without being clickable content. */
.panel{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  padding:var(--space-xs) var(--space-xs);
}



/* Icon rows — Solutions (Page 18) & Industries use the same pattern, two weights */
.icon-row{ display:flex; flex-wrap:nowrap; justify-content:space-between; row-gap:var(--space-l); text-align:center; overflow-x:auto; }
.icon-row .icon-item{ flex: 1; min-width:132px; display:flex; flex-direction:column; align-items:center; gap:var(--space-xs); position: relative; padding: 0 var(--space-xs); }
.icon-row .icon-item:not(:last-child):after{
  position: absolute;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-border);
  content: '';
}
.icon-row .icon-item span{ font-size:var(--font-size-small); font-weight:var(--font-weight-semibold); color:var(--color-primary-900); line-height:1.3; }
.icon-row .icon{ color:var(--color-primary-900); } /* Page 10: Color = Theme Accent */

.icon-row--muted .icon-item{ min-width:104px; }
.icon-row--muted .icon-item span{ font-weight:var(--font-weight-regular); color:var(--color-primary-900); font-size:var(--font-size-caption); }
.icon-row--muted .icon{ color:var(--color-primary-900); }

/* Stat cards — Page 5 Color Usage: Section Background = White or Surface
   Layout: column 1 = icon, column 2 = number stacked over description text. */
.stats-grid{ display:grid; gap:var(--space-m); grid-template-columns:repeat(4, 1fr); }
.stat-card{ display:flex; align-items:flex-start; gap:var(--space-s); text-align:left; background:var(--color-surface); }
.stat-card .stat-icon{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  background:var(--color-primary-100); /* light badge behind the icon, per reference */
  color:var(--color-primary-900);
}
.stat-card .stat-icon .icon{ width:22px; height:22px; }
.stat-card .stat-body{ min-width:0; }
.stat-card strong{ display:block; font-size:var(--font-size-h2); color:var(--color-primary-900); line-height:1.1; }
.stat-card p{ margin:var(--space-xs) 0 0; font-size:var(--font-size-small); }

/* CTA banner composition (icon + copy + checklist + action) */
.cta-banner{ display:flex; align-items:center; gap:var(--space-l); flex-wrap:wrap; }
.cta-banner .cta-icon{ 
  flex:0 0 auto;
  width:64px;
  height:64px;
  border:2px solid var(--color-orange);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cta-banner .cta-body{ flex:1 1 500px; }
.cta-banner .cta-eyebrow{ color:var(--color-orange) !important; font-weight:var(--font-weight-semibold); }
.cta-banner .cta-checklist{ display:grid; grid-template-columns:repeat(1, auto); gap:var(--space-xs) var(--space-l); list-style:none; padding:0; margin:0; flex:1 1 200px; font-size:var(--font-size-small); }
.cta-banner .cta-checklist li{ display:flex; align-items:center; gap:var(--space-xs); margin:0; white-space:nowrap; color: var(--color-white);}
.cta-banner .cta-action{ display:flex; flex-direction:column; align-items:center; gap:var(--space-xs); }
.cta-banner .cta-action small{ color:var(--color-primary-100); }
.cta-banner p, .cta-banner .cta-eyebrow{ color:var(--color-white); max-width:none; }

/* Logo strip — Page 5: Section Background = Surface */
.logo-strip{ background:var(--color-surface); border-radius:var(--radius-card); padding:var(--space-xs) var(--space-l); text-align:center; margin-top: var(--space-s); border: 1px solid var(--color-border); }
.logo-strip .logos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--space-s); margin:var(--space-m) 0; }
.logo-strip .logos span{ width: 100px; font-weight:var(--font-weight-bold); color:var(--color-text-secondary); font-size:var(--font-size-body-lg); }

/* Insight cards — extend .card with a full-bleed top image (rounded top corners only)
   and a padded body below, per reference: the photo runs to the card edges, text doesn't. */
.insight-card{ padding:0; overflow:hidden; }
.insight-card .insight-thumb{
  aspect-ratio:22/10;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-card) var(--radius-card) 0 0;
}
.insight-card .insight-thumb .icon{ width:40px; height:40px; color:var(--color-white); }
.insight-thumb--insight{ background:linear-gradient(135deg, var(--color-primary-700), var(--color-primary-900)); }
.insight-thumb--guide{ background:linear-gradient(135deg, var(--color-green), #15803d); }
.insight-thumb--trend{ background:linear-gradient(135deg, var(--color-purple), #5b21b6); }
.insight-thumb--playbook{ background:linear-gradient(135deg, var(--color-orange), #c2680a); }
.insight-card .insight-body{ padding:var(--space-xs); }
.insight-tag{ font-size:var(--font-size-caption); font-weight:var(--font-weight-semibold); text-transform:uppercase; letter-spacing:.04em; }
.insight-tag--insight{ color:var(--color-primary-700); } /* Data/insight = Cyan family kept close to Links per doc accent table */
.insight-tag--guide{ color:var(--color-green); }
.insight-tag--trend{ color:var(--color-purple); }
.insight-tag--playbook{ color:var(--color-orange); }

.section-header{ 
  text-align:center;
  margin-top: var(--space-l);
  margin-bottom:var(--space-zero);
}
.section-header--split{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-m); flex-wrap:wrap; text-align:left; }

/* Hero — the content/image divider isn't a clean curve, it's an irregular soft white
   wash bleeding over the left edge of the photo (Page 16: "Curve | Required" reads as
   organic, not geometric — matches the reference exactly, not a border-radius cutout). */
.hero{ background:var(--color-surface); position:relative; overflow:hidden; }
.hero-image{ position:relative; }
/* .hero-image::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 6% 12%,  #fff 0 7%, transparent 12%),
    radial-gradient(circle at 3% 34%,  #fff 0 10%, transparent 16%),
    radial-gradient(circle at 9% 58%,  #fff 0 8%, transparent 14%),
    radial-gradient(circle at 4% 80%,  #fff 0 9%, transparent 15%),
    radial-gradient(circle at 11% 96%, #fff 0 6%, transparent 11%),
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.9) 5%, rgba(255,255,255,.55) 12%, rgba(255,255,255,.15) 20%, transparent 30%);
  filter: blur(22px);
} */
.hero-badges .badge{ position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; gap:var(--space-xs); color:var(--color-white); font-size:var(--font-size-caption); font-weight:var(--font-weight-semibold); text-shadow:0 1px 4px rgba(0,0,0,.4); }
.hero-badges .badge .icon{ color:var(--color-white); background:rgba(11,46,99,.55); border-radius:50%; padding:10px; box-sizing:content-box; }
.badge--strategy{ top:6%; left:50%; transform:translateX(-50%); }
.badge--ai{ top:32%; right:4%; }
.badge--innovation{ bottom:10%; right:8%; }
.badge--efficiency{ bottom:10%; left:6%; }
.badge--growth{ top:32%; left:2%; }

/* Header — mobile nav (Page 11: Navigation = Hamburger under 768px) */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  background:none;
  border:1px solid var(--color-border);
  border-radius:var(--radius-input);
  color:var(--color-primary-900);
}
.mobile-nav{
  display:none;
  flex-direction:column;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--color-white);
  border-top:1px solid var(--color-border);
  box-shadow:var(--shadow-hover);
  padding:0 var(--container-padding-s);
  z-index:99;
}
.mobile-nav a{ padding:var(--space-s) 0; border-bottom:1px solid var(--color-border); color:var(--color-text-primary); font-weight:var(--font-weight-medium); }
.mobile-nav.is-open{ display:flex; }

/* Footer composition — compact single row: brand · nav links · social, then a divider, then the bottom bar */
.site-footer .footer-top{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-l); justify-content:space-between; padding-block:var(--space-m);padding-inline: var(--space-xl); }
.site-footer .footer-brand{ display:flex; align-items:center; gap:var(--space-s); }
.site-footer .footer-tagline{ font-size:var(--font-size-small); color:var(--color-text-secondary); }
.site-footer .footer-links{ display:flex; flex-wrap:wrap; gap:var(--space-l); }
.site-footer .footer-links a{ font-size:var(--font-size-small); font-weight:var(--font-weight-medium); }
.site-footer .social-row{ display:flex; gap:var(--space-s); }
.site-footer .social-row a{
  width:32px; height:32px;
  border:1px solid var(--color-primary-900);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--color-primary-900);
}
.site-footer .social-row a .icon{ width:15px; height:15px; color:inherit; }
.site-footer .social-row a:hover{ background:var(--color-primary-900); color:var(--color-white); }

.site-footer .footer-divider{ border:0; border-top:1px solid var(--color-border); margin:0; }
.site-footer .footer-separator {
  padding-inline: var(--space-xl);
}
.site-footer .footer-bottom{
  padding-block:var(--space-s);
  padding-inline: var(--space-xl);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-s);
  font-size:var(--font-size-caption);
  color:var(--color-text-secondary);
}
.site-footer .footer-bottom a{ color:var(--color-primary-900); }
.site-footer .footer-bottom a:hover{ color:var(--color-primary-700); }
.site-footer .legal{ display:flex; align-items:center; gap:var(--space-s); }
.site-footer .legal span{ color:var(--color-border); }
.btn-link, .btn-link .icon {
  color: var(--color-primary-700);
}
.site-nav a.btn-link-active, .btn-link-active, .site-nav a:hover, .btn-link:hover, .site-footer a.btn-link-active, .site-footer a:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
/* ===============================
   SOLUTIONS SECTION
================================ */

.solution-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    padding:var(--space-l);

    border:1px solid var(--color-border);
    border-radius:var(--radius-card);
    background:var(--color-white);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
    margin: var(--space-zero);
}

.solution-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

.solution-card-icon{

    width:72px;
    height:72px;

    border-radius:50%;

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

    margin-bottom:var(--space-s);

    color:#fff;
}

.solution-card-icon .icon{
    width:34px;
    height:34px;
    color:#fff;
}

.solution-card h2{

    margin-bottom:var(--space-s);

    font-size:var(--font-size-h5);

    color:var(--color-primary-900);

    line-height:1.35;
}

.solution-card p{

    color:var(--color-text-secondary);

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

    margin-bottom:var(--space-xs);

    flex:1;
}

.solution-card a{

    display:inline-flex;

    align-items:center;

    gap:6px;

    font-weight:var(--font-weight-semibold);

    color:var(--color-primary-700);
}

.solution-card a:hover{

    /* text-decoration:none; */
}

.solution-card a svg{

    transition:.2s;
}

.solution-card a:hover svg{

    transform:translateX(4px);
}
.bg-blue{
    background:var(--color-primary-700);
}

.bg-purple{
    background:var(--color-purple);
}

.bg-green{
    background:var(--color-green);
}

.bg-orange{
    background:var(--color-orange);
}

.bg-red{
    background:var(--color-red);
}

.bg-cyan{
    background:var(--color-cyan);
}

.bg-indigo{
    background:var(--color-indigo);
}

.bg-teal{
    background:#0F9D94;
}

.bg-pink{
    background:#EC4899;
}
/* --------------------------------------------------------------------------
   15. LANDING PAGE — RESPONSIVE  (Page 11 breakpoints: <768 / 768–1023 / ≥1024)
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  .hero-image::before{ display:none; } /* the spray only reads correctly against the side-by-side layout */
  .container {
    padding-inline:var(--container-padding-m);
  }
  .site-header .container{ position:relative; }
  .site-nav{ display:none !important; }
  .nav-toggle{ display:inline-flex; }

  .hero{ grid-template-columns:1fr; }
  .hero-image{ order:-1; min-height:240px; }
  .hero-content{ padding:var(--space-l); }
}

@media (max-width:767px){
  .site-header .btn-primary{ display:none; } /* folded into .mobile-nav on mobile */

  .stats-grid, .insight-card{ grid-template-columns:1fr; }
  

  .cta-banner{ flex-direction:column; text-align:center; }
  .cta-banner .cta-checklist{ grid-template-columns:1fr; justify-items:center; }

  .section-header--split{ flex-direction:column; align-items:flex-start; }
  .hero-badges .badge{ display:none; } /* keeps the mobile hero image legible per Page 11: Hero = Stack */

  .site-footer .footer-top{ flex-direction:column; text-align:center; }
  .site-footer .footer-links{ justify-content:center; }
  .site-footer .footer-bottom{ flex-direction:column; text-align:center; }
  .cta-banner .cta-body { flex: 1 1 180px;}
  .container {
    padding-inline:var(--container-padding-s);
  }
}

@media (min-width:768px) and (max-width:1023px){
  .stats-grid{ grid-template-columns:repeat(2, 1fr); }
  .container {
    padding-inline:var(--container-padding-m);
  }
}
/* --------------------------------------------------------------------------
   10. RESPONSIVE DESIGN STANDARDS  (Page 11)
   -------------------------------------------------------------------------- */
@media (max-width:767px){

  .hero{ grid-template-columns:1fr; } /* Hero = Stack */
  .hero-image{ order:-1; }

  .card-grid{ grid-template-columns:1fr; } /* Cards = Single Column */
  .cta-row{ flex-direction:column; } /* CTA = Vertical */
  .site-footer{ /* Footer = Accordion */ }

  .section{ padding-block:var(--space-xs); }
  .container {
    padding-inline:var(--container-padding-m);
  }
}

@media (min-width:768px) and (max-width:1023px){
  .site-nav{ display:flex; } /* Collapsible on tablet; JS toggles as needed */
  .card-grid{ grid-template-columns:repeat(2, 1fr); } /* Cards = 2 Across */
}

@media (min-width:1024px){
  .card-grid{ grid-template-columns:repeat(4, 1fr); } /* Cards = 3–4 Across */
  .container {
    padding-inline:var(--container-padding-l);
  }
}
@media (min-width:1280px){
  .card-grid{ grid-template-columns:repeat(4, 1fr); }
  .container {
    padding-inline:var(--container-padding-zero);
  }
}


 
@media (min-width: 1200px) {
  :root {
    --font-size-display-xl:56px;
    --font-size-display-l:48px;
    --font-size-h1: 42px;
    --font-size-h2: 36px;
    --font-size-h3: 30px;
    --font-size-h4: 24px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;
  }
}
@media (min-width: 768px) {
  :root {
    --font-size-display-xl:48px;
  --font-size-display-l:42px;
    --font-size-h1: 36px;
    --font-size-h2: 30px;
    --font-size-h3: 26px;
    --font-size-h4: 22px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;
  }
  .icon-row {
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  :root {
    --font-size-display-xl: 32px;
    --font-size-display-l: 28px;
    --font-size-h1: 26px;
    --font-size-h2: 22px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;
    --font-size-h5: 16px;
    --font-size-h6: 15px;
    --font-size-body-lg: 16px;
    --font-size-body: 15px;
    --font-size-small: 13px;
    --font-size-caption: 12px;
  }
  .icon-row {
    flex-wrap: wrap;
    justify-content: center;
  }
  .cta-banner {
    gap: var(--space-xs);
  }
  .cta-banner {
    padding: var(--space-s) var(--space-s);
  }
}

/* ===============================
   IMPACT SECTION
================================ */
.impact-divider {
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--color-border);
}

.impact-item:last-child .impact-divider {
  display: none;
}

@media (max-width: 1024px) {
  .impact-divider {
    display: none;
  }
  .impact-item {
    min-width: 30% !important;
  }
}

@media (max-width: 767px) {
  .impact-item {
    min-width: 100% !important;
    border-bottom: 1px solid var(--color-border);
  }
  .impact-item:last-child {
    border-bottom: none;
  }
}

/* --------------------------------------------------------------------------
   ABOUT PAGE COMPONENTS — Purpose card, Values grid, Journey timeline,
   Partner banner, Leadership cards. All colors derived from existing design
   tokens via color-mix() (light tint circles), not new custom colors.
   -------------------------------------------------------------------------- */

.section-title-centered{ text-align:center; margin-bottom:var(--space-m); }
.section-title-centered h2{
  display:inline-block;
  padding-bottom:var(--space-xs);
  border-bottom:3px solid var(--color-orange);
}

.icon-badge{
  width:64px; height:64px; flex-shrink:0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid currentColor;
}
.icon-badge .icon{ width:28px; height:28px; }
.icon-badge--purple{ color:var(--color-purple); background:color-mix(in srgb, var(--color-purple) 12%, white); }
.icon-badge--blue{ color:var(--color-primary-700); background:color-mix(in srgb, var(--color-primary-700) 12%, white); }
.icon-badge--green{ color:var(--color-green); background:color-mix(in srgb, var(--color-green) 12%, white); }
.icon-badge--red{ color:var(--color-red); background:color-mix(in srgb, var(--color-red) 12%, white); }
.icon-badge--orange{ color:var(--color-orange); background:color-mix(in srgb, var(--color-orange) 12%, white); }
.icon-badge--navy{ color:var(--color-primary-900); background:color-mix(in srgb, var(--color-primary-900) 12%, white); }

/* Our Purpose — one wide card, icon beside text */
.purpose-card{
  display:flex; align-items:center; gap:var(--space-l);
  max-width:900px; margin:0 auto;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  padding:var(--space-s);
}
.purpose-card p{ margin:0; font-size:var(--font-size-body-lg); color:var(--color-text-primary); }

/* Our Values — fluid grid, no explicit breakpoints needed */
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--space-m); }
.value-card{
  text-align:center;
  padding:var(--space-s);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  background:var(--color-white);
}
.value-card .icon-badge{ margin:0 auto var(--space-s); }
.value-card h3{ font-size:var(--font-size-body-lg); margin-bottom:var(--space-xs); color:var(--color-primary-900); }
.value-card p{ font-size:var(--font-size-small); color:var(--color-text-secondary); margin:0; }

/* Our Journey — horizontal timeline, dotted connector between icon badges */
.timeline{ display:flex; align-items:flex-start; gap:var(--space-xs); }
.timeline-item{ flex:1; min-width:120px; text-align:center; position:relative; }
.timeline-item:not(:last-child):after{
  content:'';
  position:absolute;
  top:32px;
  left:calc(50% + 40px);
  width:calc(100% - 40px);
  border-top:2px dotted var(--color-border);
}
.timeline-item .icon-badge{ position:relative; margin:0 auto var(--space-xs); background-color:var(--color-white); }
.timeline-item .year{ display:block; font-weight:var(--font-weight-bold); color:var(--color-primary-900); margin-bottom:2px; }
.timeline-item h4{ font-size:var(--font-size-small); margin-bottom:4px; color:var(--color-primary-900); }
.timeline-item p{ font-size:var(--font-size-caption); color:var(--color-text-secondary); margin:0; }

@media (max-width:767px){
  .timeline{ flex-direction:column; gap:var(--space-m); }
  .timeline-item:after{ display:none; }
  .purpose-card{ flex-direction:column; text-align:center; }
}

/* Why Partner With SRISYS — dark banner, text left / icon grid right */
.partner-banner{
  background:var(--color-primary-900);
  border-radius:var(--radius-card);
  padding:var(--space-s);
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:var(--space-l);
  align-items:center;
}
.partner-banner .eyebrow{
  color:var(--color-orange);
  font-weight:var(--font-weight-semibold);
  text-transform:uppercase;
  font-size:var(--font-size-small);
  letter-spacing:.04em;
  margin-bottom:var(--space-xs);
}
.partner-banner h2{ color:var(--color-white); margin-bottom:var(--space-s); }
.partner-banner-copy p{ color:var(--color-primary-100); margin:0; }
.partner-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-m); }
.partner-item{ display:flex; gap:var(--space-xs); }
.partner-item .icon{ color:var(--color-orange); width:26px; height:26px; flex-shrink:0; }
.partner-item h4{ color:var(--color-white); font-size:var(--font-size-small); margin-bottom:2px; }
.partner-item p{ color:var(--color-primary-100); font-size:var(--font-size-caption); margin:0; }

@media (max-width:1024px){
  .partner-banner{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .partner-grid{ grid-template-columns:1fr; }
}

/* Leadership — photo card + name/title/bio, image on the left. .leader-photo
   is an SVG person-icon placeholder (not a fabricated photo) until real
   headshots are supplied — never fabricate photos of real, named people. */
.leadership-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:var(--space-s); }
.leader-card{
  display:flex;
  align-items:stretch;
  gap:var(--space-s);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--color-white);
  padding:var(--space-s);
}
.leader-photo{
  width:96px;
  flex:0 0 auto;
  aspect-ratio:1/1;
  border-radius:var(--radius-card);
  background:var(--color-surface);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-primary-700);
}
.leader-photo .icon{ width:40px; height:40px; }
.leader-body{ padding:var(--space-zero); }
.leader-body h4{ margin-bottom:2px; font-size:var(--font-size-body); color:var(--color-primary-900); }
.leader-body .role{ font-size:var(--font-size-small); color:var(--color-primary-700); font-weight:var(--font-weight-semibold); margin-bottom:var(--space-xs); }
.leader-body p{ font-size:var(--font-size-small); color:var(--color-text-secondary); margin-bottom:var(--space-xs); }
.leader-body .icon{ width:18px; height:18px; color:var(--color-primary-700); }

@media (max-width:600px){
  .leadership-grid{ grid-template-columns:1fr; }
}