/* ===========================
   Rihzyn – Base Styles (CSS)
   =========================== */

/* --- Brand Tokens (from your palette) --- */
:root{
  --c-primary:   #3D38F2; /* Royal Blue – main CTA, links */
  --c-dark:      #0C1A2B; /* Firefly – top strip, footer, dark sections */
  --c-bg:        #F3F2F0; /* Cararra – light section background */
  --c-accent:    #32CD32; /* Apple – small accents on DARK only (icons/badges) */
  --c-silver:    #C0C0C0; /* borders/dividers on light */
  --c-text:      #0F172A; /* body text */
  --c-muted:     #64748B; /* secondary text */
}

/* --- Base / Defaults --- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  color: var(--c-text);
  background: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
}

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

a { color: var(--c-primary); text-decoration: none; }
a:hover { opacity: .85; }
/*a:visited { color: var(--c-primary); }*/ /* keep brand blue (no purple) */

:where(a, button, .btn, .btn-primary, .btn-outline-white):focus-visible{
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
}

/* --- Utilities --- */
.text-primary { color: var(--c-primary); }
.text-muted   { color: var(--c-muted); }
.text-body    { color: var(--c-text); }     /* used in your markup */
.text-navy    { color: var(--c-dark); }     /* used in your markup */
.text-white-90{ color: rgba(255,255,255,.9); }

.bg-dark      { background: var(--c-dark); color: #fff; }
.bg-light     { background: var(--c-bg); }
.border-silver{ border: 1px solid var(--c-silver); }
.text-accent-on-dark { color: var(--c-accent); } /* Use on dark backgrounds only */

.container {
  width: min(90rem, 100% - 2rem);
  margin-inline: auto;
}

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

/* --- Buttons --- */
.btn{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.25rem; border-radius: .75rem;
  font-weight: 600; cursor: pointer; user-select: none;
  border: 0; background: transparent; color: inherit;
}
.btn:disabled { opacity: .6; pointer-events: none; }

.btn-primary{
  background: var(--c-primary);
  color: #fff;
}
.btn-primary:hover{ opacity:.95; }

.btn-outline-white{
  color:#fff;
  border: 1px solid rgba(255,255,255,.7);
  background: transparent;
}
.btn-outline-white:hover{ background: rgba(255,255,255,.08); }

/* --- Forms (contact) --- */
input, select, textarea {
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #e2e8f0;            /* light slate */
  border-radius: .5rem;
  padding: .6rem .8rem;
}
input::placeholder, textarea::placeholder { color: #9aa4b2; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Alerts for form status (?sent=1/0) */
.alert { border-radius: .75rem; padding: 1rem; border: 1px solid; }
.alert-success { background:#ecfdf5; border-color:#bbf7d0; color:#14532d; }
.alert-error   { background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }

/* --- Hero helpers --- */
.hero-title { max-width: 18ch; }
.hero-sub   { max-width: 45ch; }

/* Left-to-right dark overlay (place as a div over media if needed) */
.overlay-left {
  background: linear-gradient(
    to right,
    rgba(12,26,43,.85),
    rgba(12,26,43,.65),
    rgba(12,26,43,0)
  );
}

/* Header logo sizing helper (optional) */
.header-logo { height: 2.75rem; width: auto; }
@media (min-width: 640px){ .header-logo{ height: 3rem; } }

/* --- Feature cards --- */
.feature-card{
  position: relative;
  background:#fff;
  border:1px solid var(--c-silver);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(12,26,43,.06);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.feature-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(12,26,43,.12);
  border-color: rgba(61,56,242,.4); /* hint of primary */
}
/* Keyboard focus – WCAG 2.4.7 */
.feature-card:focus-within{
  outline:3px solid var(--c-primary);
  outline-offset:2px;
}

/* Image zoom (gentle) */
.feature-card .thumb{ height:7rem; border-radius:.5rem; overflow:hidden; }
.feature-card .thumb img{
  width:100%; height:100%; object-fit:cover; transition: transform .25s ease;
}
.feature-card:hover .thumb img{ transform: scale(1.04); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .feature-card, .feature-card .thumb img{ transition:none !important; transform:none !important; }
}

/* "Learn more" link color + visited fix */
.card-link{ color:var(--c-primary) !important; font-weight:600;}
.card-link:visited{ color:var(--c-primary) !important; } /* prevents purple */
.card-link:hover{ text-decoration:underline; }
.card-link .arrow{ display:inline-block; transition: transform .2s ease; }
.feature-card:hover .card-link .arrow{ transform: translateX(2px); }

/* --- Proof chips (credibility strip) --- */
.cred-list{
  display:flex; justify-content:center; align-items:center;
  gap:1rem 1.25rem; flex-wrap:wrap; margin:0; padding:0; list-style:none;
}
.badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.42rem .7rem; border-radius:9999px;
  background: rgba(12,26,43,.07);              /* visible on light */
  border:1px solid rgba(12,26,43,.20);
  color: var(--c-dark) !important;             /* override any .text-white parent */
  font-weight:600; font-size:.9rem; line-height:1;
  box-shadow: 0 1px 0 rgba(12,26,43,.06);
}
.badge svg{ width:14px; height:14px; opacity:.85; }
@media (prefers-color-scheme: dark){
  .badge{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
    color:#fff !important;
  }
  .badge svg{ opacity:.9; }
}
/* Credibility strip hard reset (prevents white text from hero) */
#cred-strip{
  background: var(--c-bg);
  color: var(--c-dark);            /* reset inherited white */
}
#cred-strip .badge{
  background: rgba(12,26,43,.10);
  border-color: rgba(12,26,43,.25);
  color: var(--c-dark) !important; /* ensure dark text */
}
#cred-strip .badge svg{
  color: var(--c-dark) !important; /* icons follow text color */
}
/* adjust selectors to match your header */
header nav a { color: var(--c-dark); }
header nav a:hover { color: var(--c-primary); }

/* Tags */
.tag-list{display:flex;flex-wrap:wrap;gap:.5rem .6rem}
.tag{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.38rem .68rem;border-radius:9999px;background:#fff;
  border:1px solid rgba(12,26,43,.20);color:var(--c-dark);
  font-weight:600;font-size:.825rem;line-height:1;
}

/* Logo grid */
.logo-row{display:grid;gap:1rem;grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1024px){.logo-row{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){ .logo-row{grid-template-columns:repeat(2,1fr)}}

.logo-tile{
  background:#fff;border:1px solid var(--c-silver);border-radius:.75rem;height:64px;
  display:flex;align-items:center;justify-content:center;
  filter:grayscale(1) opacity(.85);
  transition:filter .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow:0 1px 2px rgba(12,26,43,.06);
}
.logo-tile:hover{
  filter:none;transform:translateY(-2px);
  border-color:rgba(61,56,242,.35);box-shadow:0 8px 20px rgba(12,26,43,.12);
}
.logo-tile img{max-height:36px;max-width:100%;object-fit:contain}

/* === Section rhythm & visual separation === */
.section{ padding-block: clamp(56px, 6vw, 88px); } /* consistent vertical spacing */
.section--alt{ background: var(--c-bg); }          /* light neutral band */

.section-divider{ position: relative; }
.section-divider::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(12,26,43,.10), transparent);
}
.section-divider::after{
  /* Optional soft fade into the section to help separation on large screens */
  content:""; position:absolute; left:0; right:0; top:0; height:16px; pointer-events:none;
  background: linear-gradient(to bottom, rgba(12,26,43,.03), rgba(12,26,43,0));
}

/* Slightly larger gaps in dense grids look calmer */
#capabilities .grid{ row-gap: 1.75rem; }

/* Make headings breathe a touch more from the paragraphs below */
#capabilities h2, #trusted h2, #projects h2{ margin-bottom: .25rem; }
#capabilities p.text-body, #trusted p.text-body, #projects p.text-body{ margin-top: .5rem; }

/* If chips sit tight to what follows, give them a bit of bottom margin */
#trusted .tag-list{ margin-bottom: .5rem; }

/* Light-outline button for light sections */
.btn-outline{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.1rem;border-radius:.75rem;font-weight:600;
  border:1px solid var(--c-primary); color:var(--c-primary); background:transparent;
}
.btn-outline:hover{ background:rgba(61,56,242,.06); }
.btn-outline:visited{ color:var(--c-primary); }

.section{ padding-block: clamp(56px, 6vw, 88px); }
.section--alt{ background: var(--c-bg); }
.section-divider{ position:relative; }
.section-divider::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(12,26,43,.10),transparent);
}
.section-divider::after{
  content:"";position:absolute;left:0;right:0;top:0;height:16px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(12,26,43,.03),rgba(12,26,43,0));
}
/* ---- Visibility / layout ---- */
.nav-desktop{ display:none; }
.nav-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem; border:0; background:transparent; color:var(--c-dark);
}
.nav-toggle:focus-visible{ outline:3px solid var(--c-primary); outline-offset:2px; }

/* Show desktop nav ≥768px; hide mobile controls there */
@media (min-width: 768px){
  .nav-desktop{ display:flex; }
  .nav-toggle, .mobile-nav, .nav-backdrop{ display:none !important; }
}

/* ---- Mobile panel + backdrop ---- */
.mobile-nav{
  position:fixed; left:0; right:0; top:64px; /* below the 64px header */
  background:#fff; border-top:1px solid var(--c-silver);
  box-shadow:0 20px 40px rgba(12,26,43,.18);
  z-index:50;
}
.mobile-list{ display:flex; flex-direction:column; gap:.25rem; padding:1rem; }
.mobile-list a{
  display:block; padding:.75rem 1rem; border-radius:.5rem; color:var(--c-dark);
}
.mobile-list a:hover{ background:var(--c-bg); color:var(--c-dark); }

.nav-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:40;
}

/* Prevent body scroll when menu open */
body.nav-open{ overflow:hidden; }

/* Utility: full-width button inside mobile menu */
.w-full{ width:100%; }

/* Optional: swap your hard-coded hover color to the token */
.hover\:text-primary:hover{ color:var(--c-primary); }
/* RIHZYN Contracts & Certifications — Drop‑in Styles (no markup changes)
   Paste into: assets/css/style.css (after any resets)
   Colors mirror your Tailwind config. Works with the exact HTML you sent.
----------------------------------------------------------------------- */

:root{
  --c-primary: #2A6F97;  /* CTA blue */
  --c-navy:    #564787;  /* dark top strip */
  --c-gold:    #B5651D;  /* accent eyebrow */
  --c-blue2:   #2274A5;  /* link/icon blue */
  --c-neutral: #F3F2F0;  /* light bands */
  --c-body:    #333333;
  --c-border:  #E5E5E5;

  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(12,26,43,.06);
  --shadow-md: 0 10px 24px rgba(12,26,43,.12);
  --ring: rgba(34,116,165,.35);
}

/* ---------- Global polish ---------- */
body{ color:var(--c-body); }

/* Sticky procurement strip with subtle blur/gradient */
body > div.w-full.bg-slate-900.text-slate-100:first-of-type{
  position: sticky; top:0; z-index:50;
  background: linear-gradient(90deg, rgba(86,71,135,.98), rgba(42,111,151,.98));
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: saturate(1.15) blur(6px);
}
body > div.w-full.bg-slate-900.text-slate-100:first-of-type .font-semibold{letter-spacing:.01em}
body > div.w-full.bg-slate-900.text-slate-100:first-of-type a{
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
body > div.w-full.bg-slate-900.text-slate-100:first-of-type a:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Navbar mobile panel + backdrop (already in HTML) */
header .mobile-nav{ position: fixed; left:16px; right:16px; top:72px; background:#fff; border:1px solid var(--c-border); border-radius: 14px; padding:16px; box-shadow: var(--shadow-md); }
header .mobile-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
header .mobile-list a{ display:block; padding:10px 12px; border-radius:10px; }
header .mobile-list a:hover{ background:#F8FAFF; }
header .nav-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter: blur(2px); }
body.nav-open{ overflow:hidden; }

/* Eyebrow accent (uses inline classes already; we just brighten color & spacing) */
#cc-hero + p, #about-ids .text-sm.font-semibold, #naics .text-sm.font-semibold,
#set-asides .text-sm.font-semibold, #certs .text-sm.font-semibold, #get-started .text-sm.font-semibold{
  letter-spacing:.14em; color: var(--c-gold) !important;
}

/* CTA buttons — lift, ring, subtle gradient border on "outline" ones */
/* Solid primary buttons (detect by bg-[#2A6F97]) */
a[class*="bg-[#2A6F97]"],
a.inline-flex.items-center.rounded-lg.bg-\[\#2A6F97\]{
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
a[class*="bg-[#2A6F97]"]:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
a[class*="bg-[#2A6F97]"]:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--ring), var(--shadow-md); }

/* Ghost/outline buttons (border-slate-300) */
a.rounded-lg.border.border-slate-300{ 
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(34,116,165,.18), rgba(86,71,135,.1)) border-box;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
a.rounded-lg.border.border-slate-300:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
a.rounded-lg.border.border-slate-300:focus-visible{ outline:none; box-shadow: 0 0 0 3px var(--ring); }

/* Cards (NAICS, Set‑aside tiles, Cert tiles) */
.rounded-xl.border.border-slate-200.bg-white,
.rounded-lg.border.border-slate-200.bg-white,
.rounded-2xl.border.border-slate-200.bg-white{
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rounded-xl.border.border-slate-200.bg-white:hover,
.rounded-lg.border.border-slate-200.bg-white:hover,
.rounded-2xl.border.border-slate-200.bg-white:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #d6e5ee; /* soft blue tint */
}

/* Section bands: soften borders and add faint gradient to .bg-slate-50 sections */
section.bg-slate-50{ background-image: linear-gradient(180deg,#fbfcfe,#ffffff); border-color: #E8EEF3; }

/* Placeholder image blocks — replace gradient with actual images when ready */
#about-ids .h-64.rounded-2xl.bg-slate-200{
  background: linear-gradient(135deg, #eef4fa, #e9edf7);
  /* When your art is ready, swap in:
  background: url('/assets/images/illus/id-verification.webp') center/cover no-repeat; */
}
#set-asides .h-64.rounded-2xl.bg-slate-200{
  background: linear-gradient(135deg, #f1f7f4, #e9f7f0);
  /* e.g. background-image: url('/assets/images/illus/award-path.webp'); */
}
#get-started .h-64.rounded-2xl.bg-slate-200{
  background: linear-gradient(135deg, #f7f3ef, #f1ece6);
  /* e.g. background-image: url('/assets/images/illus/secure-ops.webp'); */
}

/* Small badge icons in cert tiles (use colored badges without changing HTML) */
#certs .grid > div:nth-child(1) .h-10.w-10{ background: linear-gradient(180deg,#EEF2FF,#E0E7FF); border:1px solid #D4DBF7; }
#certs .grid > div:nth-child(2) .h-10.w-10{ background: linear-gradient(180deg,#E6F7F4,#D9F0EB); border:1px solid #CBE7E1; }
#certs .grid > div:nth-child(3) .h-10.w-10{ background: linear-gradient(180deg,#FFF7E9,#FFEFD2); border:1px solid #F5E4BE; }
#certs .grid > div:nth-child(4) .h-10.w-10{ background: linear-gradient(180deg,#F1F5F9,#E2E8F0); border:1px solid #CBD5E1; }
/* Optional: when SVGs are available, add background-image here without touching HTML */
/* e.g.
#certs .grid > div:nth-child(1) .h-10.w-10{background-image:url('/assets/icons/samgov.svg');background-repeat:no-repeat;background-position:center;background-size:22px}
*/

/* Facts table polish */
section .overflow-x-auto.rounded-2xl.border.border-slate-200{ box-shadow: var(--shadow-sm); }
section .min-w-full thead{ position: sticky; top:0; }
section .min-w-full tbody tr:hover{ background:#FAFCFF; }

/* Reveal on scroll — no HTML changes needed. JS toggles the .is-visible class. */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* ===============================
   Card sheen (NAICS / Set-asides / Certs / Identifiers)
   Works with your existing classes. No markup changes.
=================================*/

/* 1) Make the cards a positioning context + hide overflow */
.rounded-xl.border.border-slate-200.bg-white,
.rounded-lg.border.border-slate-200.bg-white,
.rounded-2xl.border.border-slate-200.bg-white {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* 2) The moving blue streak */
.rounded-xl.border.border-slate-200.bg-white::after,
.rounded-lg.border.border-slate-200.bg-white::after,
.rounded-2xl.border.border-slate-200.bg-white::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(120deg,
      transparent 40%,
      rgba(34, 116, 165, .18) 50%,   /* #2274A5 at ~18% */
      transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}

/* 3) Trigger on hover/focus */
.rounded-xl.border.border-slate-200.bg-white:hover::after,
.rounded-lg.border.border-slate-200.bg-white:hover::after,
.rounded-2xl.border.border-slate-200.bg-white:hover::after,
.rounded-xl.border.border-slate-200.bg-white:focus-within::after,
.rounded-lg.border.border-slate-200.bg-white:focus-within::after,
.rounded-2xl.border.border-slate-200.bg-white:focus-within::after {
  transform: translateX(120%);
}

/* 4) Nice lift + subtle blue border on hover (keeps what you have) */
.rounded-xl.border.border-slate-200.bg-white:hover,
.rounded-lg.border.border-slate-200.bg-white:hover,
.rounded-2xl.border.border-slate-200.bg-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(12, 26, 43, .12);
  border-color: #d6e5ee; /* soft blue tint */
}

/* 5) Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .rounded-xl.border.border-slate-200.bg-white::after,
  .rounded-lg.border.border-slate-200.bg-white::after,
  .rounded-2xl.border.border-slate-200.bg-white::after {
    transition: none;
    transform: none;
    background: none;
  }
}
/* ===============================
   Card sheen (NAICS / Set-asides / Certs / Identifiers)
   Works with your existing classes. No markup changes.
=================================*/

/* 1) Make the cards a positioning context + hide overflow */
.rounded-xl.border.border-slate-200.bg-white,
.rounded-lg.border.border-slate-200.bg-white,
.rounded-2xl.border.border-slate-200.bg-white {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* 2) The moving blue streak */
.rounded-xl.border.border-slate-200.bg-white::after,
.rounded-lg.border.border-slate-200.bg-white::after,
.rounded-2xl.border.border-slate-200.bg-white::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(120deg,
      transparent 40%,
      rgba(34, 116, 165, .18) 50%,   /* #2274A5 at ~18% */
      transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}

/* 3) Trigger on hover/focus */
.rounded-xl.border.border-slate-200.bg-white:hover::after,
.rounded-lg.border.border-slate-200.bg-white:hover::after,
.rounded-2xl.border.border-slate-200.bg-white:hover::after,
.rounded-xl.border.border-slate-200.bg-white:focus-within::after,
.rounded-lg.border.border-slate-200.bg-white:focus-within::after,
.rounded-2xl.border.border-slate-200.bg-white:focus-within::after {
  transform: translateX(120%);
}

/* 4) Nice lift + subtle blue border on hover (keeps what you have) */
.rounded-xl.border.border-slate-200.bg-white:hover,
.rounded-lg.border.border-slate-200.bg-white:hover,
.rounded-2xl.border.border-slate-200.bg-white:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(12, 26, 43, .12);
  border-color: #d6e5ee; /* soft blue tint */
}

/* 5) Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .rounded-xl.border.border-slate-200.bg-white::after,
  .rounded-lg.border.border-slate-200.bg-white::after,
  .rounded-2xl.border.border-slate-200.bg-white::after {
    transition: none;
    transform: none;
    background: none;
  }
}
/* ===== Real-image hooks (no HTML changes) ===== */
/* Each block: light brand overlay + responsive cover + format fallbacks */

#about-ids .h-64.rounded-2xl.bg-slate-200{
  background-image:
    linear-gradient(180deg, rgba(34,116,165,.08), rgba(86,71,135,.06)),
    image-set(
      url('../images/cc/ids.avif') type('image/avif'),
      url('../images/cc/ids.webp') type('image/webp'),
      url('../images/cc/ids.jpeg')  type('image/jpeg')
    );
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  border: 1px solid #E8EEF3;
}

#set-asides .h-64.rounded-2xl.bg-slate-200{
  background-image:
    linear-gradient(180deg, rgba(34,116,165,.06), rgba(12,26,43,.04)),
    image-set(
      url('../images/cc/acq.avif') type('image/avif'),
      url('../images/cc/acq.webp') type('image/webp'),
      url('../images/cc/acq.jpeg') type('image/jpeg')
    );
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  border: 1px solid #D9F0E7;
}

#get-started .h-64.rounded-2xl.bg-slate-200{
  background-image:
    linear-gradient(180deg, rgba(181,101,29,.06), rgba(34,116,165,.05)),
    image-set(
      url('../images/cc/timeline.avif') type('image/avif'),
      url('../images/cc/timeline.webp') type('image/webp'),
      url('../images/cc/timeline.jpeg')  type('image/jpeg')
    );
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  border: 1px solid #F0E6DB;
}
/* Visually hidden utility (your markup uses this) */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 1px 1px); white-space:nowrap; border:0;
}
/* Anchor offset so in-page links land below the sticky strip */
#about-ids, #naics, #set-asides, #certs, #get-started { scroll-margin-top: 88px; }
/* Smooth scrolling for same-page links */
html { scroll-behavior: smooth; }

/* Example labels — adjust nth-child() to match the correct tiles REMEMBER */
#certs .grid > div:nth-child(2),
#certs .grid > div:nth-child(3){ position: relative; overflow: hidden; }

#certs .grid > div:nth-child(2)::before{
  content: 'Registered';
  position: absolute; top:12px; left:-16px; transform: rotate(-12deg);
  background: #FFF7E9; color:#B5651D; font-weight:700; font-size:11px;
  padding:4px 10px; border:1px solid #F5E4BE; border-radius:6px;
}

#certs .grid > div:nth-child(3)::before{
  content: 'Aligned';
  position: absolute; top:12px; left:-6px; transform: rotate(-12deg);
  background: #E6F7F4; color:#2274A5; font-weight:700; font-size:11px;
  padding:4px 10px; border:1px solid #CBE7E1; border-radius:6px;
}

/* Base interior hero (same as above, but lighter overlay) */
body.page-contracts main > section:first-of-type,
body.page-about     main > section:first-of-type,
body.page-services  main > section:first-of-type,
body.page-contact   main > section:first-of-type{
  background-image:
    linear-gradient(180deg, rgba(12,26,43,.08), rgba(12,26,43,.04)),
    image-set(
      url('../images/hero/interior.avif') type('image/avif'),
      url('../images/hero/interior.webp') type('image/webp'),
      url('../images/hero/interior.jpg')  type('image/jpeg')
    );
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}

/* Page-specific tint accents */
body.page-contracts main > section:first-of-type{
  background-image:
    linear-gradient(180deg, rgba(34,116,165,.10), rgba(12,26,43,.05)),
    image-set( url('../images/hero/interior.avif') type('image/avif'),
               url('../images/hero/interior.webp') type('image/webp'),
               url('../images/hero/interior.jpg')  type('image/jpeg') );
}
body.page-services main > section:first-of-type{
  background-image:
    linear-gradient(180deg, rgba(86,71,135,.10), rgba(12,26,43,.05)),
    image-set( url('../images/hero/interior.avif') type('image/avif'),
               url('../images/hero/interior.webp') type('image/webp'),
               url('../images/hero/interior.jpg')  type('image/jpeg') );
}
body.page-about main > section:first-of-type{
  background-image:
    linear-gradient(180deg, rgba(181,101,29,.08), rgba(12,26,43,.05)),
    image-set( url('../images/hero/interior.avif') type('image/avif'),
               url('../images/hero/interior.webp') type('image/webp'),
               url('../images/hero/interior.jpg')  type('image/jpeg') );
}
body.page-contact main > section:first-of-type{
  background-image:
    linear-gradient(180deg, rgba(12,26,43,.10), rgba(12,26,43,.06)),
    image-set( url('../images/hero/interior.avif') type('image/avif'),
               url('../images/hero/interior.webp') type('image/webp'),
               url('../images/hero/interior.jpg')  type('image/jpeg') );
}
/* ---------- Print (Contracts & interior pages) ---------- */
@media print {
  /* Keep it clean and ink-friendly */
  * { color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  html, body { background: #fff !important; }
  a, a:visited { text-decoration: underline; }

  /* Hide chrome and heavy sections */
  .bg-slate-900, header, footer, .nav-backdrop { display: none !important; }
  /* hide decorative image blocks */
  #about-ids .h-64, #set-asides .h-64, #get-started .h-64 { display:none !important; }

  /* Use simple section rhythm */
  main section { padding: 16px 0 !important; border: 0 !important; }

  /* Tables: full width, clear borders */
  table { width: 100% !important; border-collapse: collapse !important; }
  thead { background: #f5f5f5 !important; }
  th, td { border: 1px solid #ddd !important; padding: 8px !important; }

  /* Show link targets (useful when printed) */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12px; }

  /* Avoid page breaks inside cards/grids */
  .grid > * { break-inside: avoid; page-break-inside: avoid; }
}
/* Cert tiles: focus & hover */
#certs .grid > div {
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#certs .grid > div:is(:hover, :focus, :focus-within) {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
  border-color: #CFE3F2;
}
#certs .grid > div.kb {
  outline: none; cursor: default;
}
#certs .grid > div.kb:focus {
  outline: 2px solid #2274A5; outline-offset: 2px; cursor: pointer;
}
/* tiny “external” hint if we make tiles open profiles later */
#certs .grid > div.kb.has-link::after{
  content: "↗";
  position: absolute; top: 12px; right: 12px;
  font-size: 12px; color: #2274A5; opacity: .85;
}
/* prevent any global caps on img height */
header .brand img { max-height: none; }

/* optional micro-tune for spacing */
@media (min-width: 768px){
  header .brand .wordmark { margin-left: -6px; } /* try -4 to -8px */
}
/* === Logo sizing (desktop & up) === */
header .wordmark { 
  height: 88px;         /* md & up */
  max-height: none;
  flex-shrink: 0;
  margin-left: -6px;    /* pull closer to the icon */
}
@media (min-width: 1024px){   /* lg */
  header .wordmark { height: 96px; }
}


/* Prevent any global caps on images in the brand */
header .brand img { max-height: none; }

header .brand .logo-mark{
	height: 36px;
	width: auto;
	flex-shrink: 0;
}

/* Wordmark sizing — tuned down from the last try */
header .brand .wordmark {
  height: 42px;          /* md */
  width: auto;
  flex-shrink: 0;
  margin-left: -6px;     /* pull closer to icon so they feel like one unit */
}
@media (min-width: 1024px){   /* lg */
  header .brand .wordmark { height: 48px; }
}

/* (Optional) tiny vertical nudge if baselines feel off */
@media (min-width: 768px){
  header .brand .wordmark { transform: translateY(-1px); }
}

header .brand img { max-height: none; }


:root{
  --rlg-bg: #0b1530;       /* deep navy or brand dark */
  --rlg-stroke: #8fb2ff;   /* brand accent light */
  --rlg-sparkle: #ffffff;  /* white */
}

.contact-logo svg { display:block; }
.contact-logo .rlg-bg { fill: var(--rlg-bg); }
.contact-logo .rlg-stroke {
  stroke: var(--rlg-stroke);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240; /* hidden initially */
  animation: rlg-draw 1.6s ease-out forwards;
}
.contact-logo .rlg-sparkle {
  fill: var(--rlg-sparkle);
  opacity: 0;
  transform-origin: 72px 28px;
  animation: rlg-spark 1.2s ease-out 0.9s forwards;
}

/* play only when we add .is-in */
.contact-logo:not(.is-in) .rlg-stroke,
.contact-logo:not(.is-in) .rlg-sparkle {
  animation: none;
  opacity: 0;
}

@keyframes rlg-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes rlg-spark {
  0% { opacity:0; transform: scale(0.6) rotate(0deg); }
  60%{ opacity:1; transform: scale(1.2) rotate(20deg); }
  100%{ opacity:1; transform: scale(1) rotate(0deg); }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .contact-logo .rlg-stroke,
  .contact-logo .rlg-sparkle {
    animation: none !important;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Optional: pause on hover/focus so it’s not distracting */
.contact-logo:hover .rlg-stroke,
.contact-logo:focus-within .rlg-stroke,
.contact-logo:hover .rlg-sparkle,
.contact-logo:focus-within .rlg-sparkle {
  animation-play-state: paused;
}
.logo-row {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:center;
}

.logo-tile {
  height: 32px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-tile img {
  height:100%;
  width:auto;
  max-width:180px;
  object-fit:contain;
}

@media (min-width: 640px){
  .logo-tile { height: 40px; }
}
@media (min-width: 1024px){
  .logo-tile { height: 44px; }
}

.logo-tile img {
  opacity: 0.9;
  filter: grayscale(1);
  transition: all 0.3s ease;
}
.logo-tile img:hover {
  opacity: 1;
  filter: none;
}
/* Partner logos – tidy, no clipping */
.logo-row {
  display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:center;
}

.logo-tile {
  /* give the logos breathing room so edges don't look shaved */
  height: 32px;                 /* mobile visual height */
  padding: 6px 12px;            /* ← add horizontal padding */
  display:flex; align-items:center; justify-content:center;
  overflow: visible;            /* don't clip SVGs */
}

.logo-tile img,
.logo-tile svg {
  display:block;                /* remove baseline gap */
  height:100%;
  width:auto;
  max-width:200px;              /* wide marks (e.g., USDA wordmark) */
  object-fit:contain;
}

@media (min-width:640px){ .logo-tile { height:40px; padding:6px 14px; } }
@media (min-width:1024px){ .logo-tile { height:44px; padding:6px 16px; } }

/* keep your grayscale → color hover */
.logo-tile img, .logo-tile svg {
  opacity:.9; filter:grayscale(1);
  transition:filter .2s ease, opacity .2s ease;
}
.logo-tile:hover img, .logo-tile:hover svg {
  opacity:1; filter:none;
}
.logo-tile {
  overflow: visible;
  padding: 6px 12px;
}