:root{
  --gold:#C1A55D;      /* weathered gold */
  --gold-soft:#D6C387; /* softer gold accent */
  --merlot:#6C1F3A;    /* merlot */
  --mahogany:#40211B;  /* mahogany */
  --ink:#2B2B2B;       /* deep ink black */
  --gray:#4F5B66;      /* warm gray */
  --text:#1C1C1C;
  --hero-bg: url('../assets/safe_hero-photo.png');      /* refined text */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter', sans-serif;
  color:var(--text);
  background:var(--ink); color:#F4F4F4;
  line-height:1.6;
}
h1,h2,h3{font-family:'Rajdhani', sans-serif; line-height:1.2; margin:0 0 .5rem}
h2{font-size:2rem}
h3{font-size:1.25rem}
.container{width:min(1100px, 92%); margin:0 auto}
.site-header{background:transparent; border-bottom:0;
  position:sticky; top:0; background:var(--ink); color:#F4F4F4; z-index:1000;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav-wrapper{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0;}
.brand{display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink); font-weight:700}
.brand img{width:40px; height:auto}
.nav{display:flex; gap:1rem; align-items:center}
.nav a{color:#ffffff; text-decoration:none; font-weight:600; font-family:'Rajdhani', sans-serif; padding:.4rem .6rem;}
.nav-toggle{display:none; background:transparent; border:0; font-size:1.5rem}

.hero{
  position:relative;
  color:#fff;
  padding:3rem 0;
  background: var(--ink);
  background-image: var(--hero-bg);
  background-size: cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center}
.hero-copy h1{font-size:1.2rem}
.hero-copy p{max-width:46ch}
.hero-art img{width:100%; border-radius:1rem; box-shadow:0 12px 40px rgba(0,0,0,.2)}

.btn-primary,


.link-inline{color:var(--merlot); font-weight:700; text-decoration:none}

.edit-id{color:rgba(255,255,255,.85); font-size:.8rem; margin-left:.25rem}
.about .edit-id, .capabilities .edit-id, .case-studies .edit-id, .bio .edit-id, .site-footer .edit-id{ color:#7a7f87}

.two-col{display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:start; padding:3rem 0}
.about .stats{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; background:var(--gray); color:#F4F4F4; padding:1rem; border-radius:1rem}
.about .stats div{background:var(--ink); color:#F4F4F4; border:1px solid rgba(0,0,0,.05); border-radius:.8rem; padding:1rem; text-align:center}
.about .stats strong{display:block; font-size:1.2rem; color:var(--merlot)}
.caption{font-size:.9rem; color:#5a6472}

.capabilities{background:var(--gray); color:#F4F4F4; padding:3rem 0}
.section-lede{max-width:54ch}
.card-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:1.5rem; margin-top:1rem}
.card{background:var(--ink); color:#F4F4F4; border-radius:1rem; overflow:hidden; border:1px solid rgba(0,0,0,.06)}
.card img{width:100%; aspect-ratio:4/3; object-fit:cover}
.card h3{padding:1rem 1rem 0}
.card p{padding:0 1rem 1.25rem}
.cta-band{margin-top:1rem}

.case-studies{padding:3rem 0}
.cases{display:grid; grid-template-columns: 1fr; gap:1.25rem}
.case{display:grid; grid-template-columns: 280px 1fr; gap:1rem; background:var(--ink); color:#F4F4F4; border:1px solid rgba(0,0,0,.06); border-radius:1rem; overflow:hidden}
.case img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}

.bio{background:linear-gradient(180deg, #fff, var(--gray)); padding:3rem 0}
.bio-portrait img{width:100%; max-width:340px; border-radius:1rem; box-shadow:0 8px 24px rgba(0,0,0,.15)}
.badge-row{display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin:1rem 0}
.badge{display:inline-block; padding:.35rem .6rem; background:var(--ink); color:#fff; border-radius:.6rem; font-family:'Rajdhani', sans-serif; font-weight:600}
.logo-small{width:120px; height:auto; display:block; margin-bottom:.5rem}

.site-footer{background:var(--ink); color:#cbd5e1; padding:2rem 0}
.footer-grid{display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:2rem; align-items:start}
.footer-nav a{display:block; color:#cbd5e1; text-decoration:none; margin:.25rem 0}
.footer-cta 
.copyright{font-size:.85rem; margin-top:.5rem; color:#9aa4b2}

@media (max-width: 920px){
  .hero-grid{grid-template-columns: 1fr}
  .two-col{grid-template-columns: 1fr}
  .card-grid{grid-template-columns: 1fr}
  .case{grid-template-columns: 1fr}
  .nav{display:none}
  .nav.open{display:flex; flex-direction:column; gap:.75rem; position:absolute; right:1rem; top:60px; background:var(--ink); color:#F4F4F4; padding:1rem; border:1px solid rgba(0,0,0,.08); border-radius:.8rem}
  .nav-toggle{display:block}
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
}
.hero .container{position:relative; z-index:1}

/* Rev 5 — Footer (clean OpsArtica) */
.site-footer{padding:28px 0;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-left{display:flex;align-items:center;gap:12px}
.footer-logo{width:32px;height:32px;border-radius:8px}
.btn-return{min-width:160px;text-align:center}


/* === Auto-generated overrides (non-destructive) === */
:root {
  --brand-primary: #6C1F3A;
  --brand-accent: #C1A55D;
  --brand-text: #1C1C1C;
  --btn-radius: 9999px;
}

/* Upgrade links that should look like buttons */
a.btn, a.button, .btn a, .button a, a[rel~="button"], a[data-button], a.cta {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: var(--btn-radius);
  background: var(--brand-primary);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
a.btn:hover, a.button:hover, .btn a:hover, .button a:hover, a[rel~="button"]:hover, a[data-button]:hover, a.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  background: color-mix(in oklab, var(--brand-primary), white 12%);
}
a.btn:active, a.button:active, .btn a:active, .button a:active, a[rel~="button"]:active, a[data-button]:active, a.cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
a.btn.accent, a.button.accent, a.cta.accent {
  background: var(--brand-accent);
  color: #1a1a1a !important;
}

/* Ensure sufficient contrast for buttons on light sections */
@supports (color: color-mix(in oklab, white, black)) {
  a.btn, a.button, a.cta {
    /* Fallback is white text above; this ensures if the primary is too light we darken it */
    color: color-mix(in oklab, #000, #fff 12%) !important;
  }
}

/* Keyboard focus visibility */
a.btn:focus-visible, a.button:focus-visible, a.cta:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--brand-accent), white 20%);
  outline-offset: 2px;
}

/* Gentle gradient between sections instead of hard lines */
section + section::before {
  content: "";
  display: block;
  height: 28px;
  margin: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0));
}

/* Non-destructive brand asset sizing helpers (use classes, do not resize files) */
.brand-logo, .brand-placeholder {
  display: inline-block;
  max-width: min(220px, 40vw);
  height: auto;
  object-fit: contain;
}
.brand-banner {
  width: 100%;
  max-height: 40vh;
  object-fit: cover;
}

/* Upgrade any .actions groups to button layout */
.actions a {
  margin-right: .5rem;
}
.actions a:last-child {
  margin-right: 0;
}


/* Support existing button class names from the previous build */
a.btn-primary, button.btn-primary { 
  display:inline-block; padding:0.75rem 1.25rem; border-radius:var(--btn-radius);
  background: var(--brand-primary); color:#fff !important; text-decoration:none; font-weight:600;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
a.btn-secondary, button.btn-secondary {
  display:inline-block; padding:0.75rem 1.25rem; border-radius:var(--btn-radius);
  background: var(--brand-accent); color:#1a1a1a !important; text-decoration:none; font-weight:600;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
a.btn-primary:hover, button.btn-primary:hover { background: color-mix(in oklab, var(--brand-primary), white 12%); }
a.btn-secondary:hover, button.btn-secondary:hover { background: color-mix(in oklab, var(--brand-accent), white 14%); }


/* === Uniform Button Sizing and Depth Enhancements === */
a.btn, a.button, .btn a, .button a, a[rel~="button"], a[data-button], a.cta,
a.btn-primary, button.btn-primary, a.btn-secondary, button.btn-secondary {
  min-width: 180px;
  text-align: center;
  padding: 0.85rem 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.18), 0 6px 20px rgba(0,0,0,0.15);
  border: none;
  position: relative;
  overflow: hidden;
}

a.btn::after, a.button::after, .cta::after,
a.btn-primary::after, button.btn-primary::after,
a.btn-secondary::after, button.btn-secondary::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(0,0,0,0.08));
  opacity: 0.3;
  pointer-events: none;
  border-radius: inherit;
}

a.btn:hover, a.button:hover, .cta:hover,
a.btn-primary:hover, button.btn-primary:hover,
a.btn-secondary:hover, button.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.22), 0 10px 28px rgba(0,0,0,0.18);
}

a.btn:active, a.button:active, .cta:active,
a.btn-primary:active, button.btn-primary:active,
a.btn-secondary:active, button.btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0,0,0,0.18), 0 5px 14px rgba(0,0,0,0.15);
}

/* Force OpsSafe header text white */
.oa-header .brand strong { color: #fff; font-weight: 700; }

/* OpsSafe — Hero alignment fix (center block, left-aligned text) */

/* Ensure the hero content sits centered on the page with side padding */
.hero .container.hero-grid{
  max-width:1160px;
  padding:0 22px;
  margin:0 auto;
  display:grid !important;
  grid-template-columns:minmax(320px,1.2fr) minmax(280px,.8fr);
  column-gap:32px;
  align-items:center;
  justify-content:center;
  text-align:left !important;
}

/* Keep CTA left under the copy */
.hero .hero-cta{ display:flex; justify-content:flex-start !important; }

/* Image stays on the right, scales responsively */
.hero .hero-art img{ display:block; margin:0; max-width:640px; height:auto; }

/* Responsive: collapse to single column on small viewports */
@media (max-width: 980px){
  .hero .container.hero-grid{
    grid-template-columns:1fr;
    text-align:left !important;
  }
  .hero .hero-cta{ justify-content:flex-start !important; }
  .hero .hero-art img{ margin:20px 0 0; max-width:100%; }
}

/* Rev 12 — Bio section text color (black) */
section.bio .bio-copy h2,
section.bio .bio-copy p{
  color:#000000 !important;
}
/* Rev 4 — Hero block centered, text left */
section.hero{
  display:block;
}
/* Center the inner grid as a fixed-width block */
section.hero > .container.hero-grid{
  width:100%;
  max-width:1160px;
  padding:0 22px;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box;
  display:grid !important;
  grid-template-columns:minmax(320px,1.2fr) minmax(280px,.8fr);
  column-gap:32px;
  align-items:center;
  justify-content:center;
  text-align:left !important;
}
/* Ensure the copy column doesn't exceed measure */
section.hero .hero-copy{ max-width:760px; }
/* Keep CTA left under the copy */
section.hero .hero-cta{ display:flex; justify-content:flex-start !important; }
/* Right art stays anchored and responsive */
section.hero .hero-art img{ display:block; margin:0; max-width:640px; height:auto; }

/* Safety: if a parent adds display:flex centering, prefer our grid */
section.hero .container.hero-grid{ flex:initial; }

/* Responsive collapse */
@media (max-width: 980px){
  section.hero > .container.hero-grid{
    grid-template-columns:1fr;
    text-align:left !important;
  }
  section.hero .hero-cta{ justify-content:flex-start !important; }
  section.hero .hero-art img{ margin:20px 0 0; max-width:100%; }
}


/* Rev 8 — Standardized buttons (gold, steel, burgundy) */

/* Base button */
.btn, a.btn, button.btn,
.button, a.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer;
}
.btn:focus, a.btn:focus, button.btn:focus,
.button:focus, a.button:focus{ outline:2px solid rgba(255,255,255,.25); outline-offset:2px; }

/* Gold */
.btn-gold, .button--gold, [data-variant="gold"]{
  background:linear-gradient(180deg,#ffd700 0%,#e6b800 40%,#c9a227 60%,#ffd700 100%);
  color:#151515;
  border-color:#b38f00;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.25);
  text-shadow:0 1px 1px rgba(255,255,255,.5);
}
.btn-gold:hover, .button--gold:hover, [data-variant="gold"]:hover{ transform:translateY(-1px); }

/* Steel */
.btn-steel, .button--steel, [data-variant="steel"]{
  color:#0D1B2A;
  background:linear-gradient(180deg,#f7f9fc 0%,#e4e9ef 45%,#cfd6de 55%,#eef2f6 100%);
  border-color:#b2b8c2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.08);
}
.btn-steel:hover, .button--steel:hover, [data-variant="steel"]:hover{ transform:translateY(-1px); }

/* Burgundy (white text) */
.btn-burgundy{
  background:linear-gradient(180deg,#8a0a43 0%,#770737 50%,#5d052c 100%);
  color:#ffffff;
  border-color:#6a0530;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.06), inset 0 -2px 4px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.25)
}
.btn-burgundy:hover{transform:translateY(-1px)}

/* Map legacy classes to brand variants without touching markup */
.btn-primary, a.btn-primary, button.btn-primary,
.button.primary, .cta-primary, .callout .cta{
  background:linear-gradient(180deg,#8a0a43 0%,#770737 50%,#5d052c 100%);
  color:#ffffff;
  border-color:#6a0530;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.06), inset 0 -2px 4px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.25);
  border-radius:12px;
  font-weight:800;
}

.btn-secondary, a.btn-secondary, button.btn-secondary,
.button.secondary, .cta-secondary{
  color:#0D1B2A;
  background:linear-gradient(180deg,#f7f9fc 0%,#e4e9ef 45%,#cfd6de 55%,#eef2f6 100%);
  border-color:#b2b8c2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.08);
  border-radius:12px;
  font-weight:800;
}

/* Size helpers (optional) */
.btn-sm{ padding:8px 12px; border-radius:10px; }
.btn-lg{ padding:14px 20px; border-radius:14px; }

/* Rev 11 — Force white text on burgundy CTAs in header/footer */
.oa-header a.btn-burgundy,
.oa-header .btn-burgundy,
.site-footer a.btn-burgundy,
.site-footer .btn-burgundy{
  color:#ffffff !important;
}

.hero h1{ font-family:Rajdhani, sans-serif;   font-size: clamp(1rem, 2.2vw, 1.8rem); line-height:1.05; margin:.25em 0 }