/* Base, tokens, and layout. Keep under 100KB. */
:root{
  --black: #0b0b0b;
  --white: #ffffff;
  --blue: #4db6ff; /* lighter blue accent for contrast */
  --muted: #1a1a1a; /* dark gray background for muted sections */
  --text: #f5f5f5;  /* light text on dark background */
  --max:1100px;          /* Wider content width for large screens */
  --rad:16px;            /* Border radius 16px */
  --shadow:0 6px 20px rgba(0,0,0,.08);
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-7:96px;
}

*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--black);
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}
img{max-width:100%;height:auto;border-radius:var(--rad)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;opacity:.92}
button{font:inherit}
.small{font-size:.875rem}
.lead{font-size:1.125rem}
.muted{color:#555}

/* Containers and sections */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding:0 var(--space-2)}
.container--narrow{max-width:52ch}
.site-header .container{max-width:min(1200px,96vw)}
.site-footer .container{max-width:min(1200px,96vw)}
.section{padding:var(--space-7) 0}
.section--muted{background:var(--muted)}
.section__title{font-size:1.5rem;margin:0 0 var(--space-3)}

/* Header */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:var(--space-2);top:var(--space-2);width:auto;height:auto;
  background:#fff;border:2px solid var(--blue);padding:var(--space-1);z-index:1000
}
.site-header{
  position:sticky;top:0;z-index:999;background:rgba(11,11,11,.9);
  backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid #222;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) 0}
.logo{font-weight:700;color:var(--black);letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.logo .accent{color:#906f3d} /* gold accent in logo text */
.logo-mark{height:44px;width:auto;display:inline-block}
/* Dark header overrides for consistent theme */
.site-header .logo{color:var(--text)}
.nav{display:flex;gap:var(--space-2);list-style:none;margin:0;padding:0;align-items:center}
.nav-link{padding:.25rem .5rem;border-radius:8px}
.site-header .nav-link{color:var(--text)}
.nav-link.is-active{background:var(--muted)}
.site-header .nav-link:hover{background:#222;text-decoration:none}
.nav-link:focus,.button:focus{outline:3px solid var(--blue);outline-offset:2px;border-radius:10px}

/* Hero */
.hero{padding:calc(var(--space-6) + 24px) 0 var(--space-6)}
.hero__title{font-size:clamp(1.75rem,3.5vw,2.5rem);line-height:1.2;margin:0 0 var(--space-2)}
.hero__sub{margin:0 0 var(--space-3);font-size:1.125rem}
.hero-inner{text-align:center}
.hero__cta{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;flex-direction:column;align-items:center}
.hero__media{margin-top:var(--space-4)}

/* Grid */
.grid{display:grid;gap:var(--space-3)}
.grid--3{grid-template-columns:1fr}
@media (min-width:720px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.feature-grid{align-items:stretch}
/* Center the features grid and make it responsive; prevent overlaps */
@media (min-width:720px){
  .features .feature-grid{ 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content:center;
    gap: var(--space-5);
  }
}
/* Ensure feature cards don't force square aspect for this section */
.features .feature-grid .feature-card{
  aspect-ratio:auto;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
}

/* Center key section headings */
.features .eyebrow, .features .section__title,
.services .eyebrow, .services .section__title {text-align:center}

/* Services list styling (no bullets, centered like screenshot) */
.services-list{list-style:none;margin:0;padding:0}
.services .service-card{ text-align:center; background:transparent; border:0; box-shadow:none }
.services .service-title{ margin:var(--space-2) 0 .25rem; font-weight:600 }
.services .service-desc{ color:#c9c9c9; max-width:52ch; margin:0 auto }

/* Anchor spacing and sticky-header offset for jump links */
#home, #about{scroll-margin-top:72px}
#home{padding-bottom:calc(var(--space-6) + 32px)}
#about{padding-top:calc(var(--space-6) + 32px)}

/* Cards */
.card{
  background:#1a1a1a;border:2px solid #3a3a3a;border-radius:var(--rad);
  padding:var(--space-4);box-shadow:var(--shadow)
}
.card__title{margin:0 0 .5rem;font-size:1.125rem}
.card__body{margin:0}

/* Buttons */
.button{
  display:inline-block;padding:.7rem 1rem;border-radius:14px;
  border:1px solid var(--black);background:transparent;color:var(--black);
  transition:transform .08s ease, box-shadow .08s ease, opacity .2s ease;
}
.button--primary{
  background:var(--black);color:#fff;border-color:var(--black);
}
.button--ghost{
  background:transparent;color:var(--black)
}
.button--cta{
  background:#000000; /* blue for contrast on dark */
  color:#fff;
  border-color:#906f3d;
  padding:.6rem 1.2rem; /* add room before/after text */
  border-radius:10px;
}
.button:hover{transform:scale(1.02);box-shadow:var(--shadow)}

/* Proof list */
.proof{display:flex;gap:var(--space-2);flex-wrap:wrap;list-style:none;padding:0;margin:0 0 var(--space-2)}
.proof li{background:#fff;border:1px solid #ececec;border-radius:999px;padding:.5rem .75rem}

/* Form */
.form{display:grid;gap:var(--space-2);max-width:48rem}
.form__row{display:grid;gap:.5rem}
/* Contact page layout: center container and form */
.contact-page .container{display:grid;justify-items:center}
.contact-page .form{width:100%;max-width:48rem;margin:0 auto}
.contact-page .section__title,.contact-page .lead{text-align:center}
input,textarea,select{
  width:100%;padding:.75rem;border-radius:12px;border:1px solid #333;
  background:#0f0f0f;color:var(--text);
}
input:focus,textarea:focus,select:focus{outline:3px solid var(--blue);outline-offset:2px}
.form__status{min-height:1.25rem;margin-top:.25rem}
/* Keep dark background for all form states and autofill */
input, textarea, select,
input:focus, textarea:focus, select:focus,
input:valid, textarea:valid, select:valid,
input:invalid, textarea:invalid, select:invalid{
  background-color:#0f0f0f;
  color:var(--text);
}
/* WebKit (Chrome/Safari) autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0px 1000px #0f0f0f inset;
  transition: background-color 9999s ease-in-out 0s;
}
/* Firefox autofill */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill{
  box-shadow: 0 0 0px 1000px #0f0f0f inset;
  -moz-text-fill-color: var(--text);
}
/* High-specificity safeguard for Contact email */
.contact-page input#email,
.contact-page input#email:focus,
.contact-page input#email:-webkit-autofill,
.contact-page input#email:-moz-autofill{
  background-color:#0f0f0f !important;
  color:var(--text) !important;
}
/* Make submit button match field width */
.form .button--primary{width:100%;justify-self:stretch}

/* Footer */
.site-footer{border-top:1px solid #222;margin-top:var(--space-6);padding:var(--space-4) 0;position:relative}
.footer-inner{display:grid;gap:var(--space-3)}
.footer-cta{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.footer-cta__text{margin:0;font-weight:600}
.footer-nav{display:flex;gap:var(--space-2);list-style:none;margin:0;padding:0;flex-wrap:wrap}

/* FAQ */
.faq{border:1px solid #ececec;border-radius:var(--rad);background:#fff;margin-bottom:var(--space-2)}
.faq__q{padding:var(--space-2);cursor:pointer;font-weight:600}
.faq__a{padding:0 var(--space-2) var(--space-2)}

/* Back to top */
.to-top{
  position:fixed;right:16px;bottom:16px;width:44px;height:44px;border-radius:999px;
  border:1px solid #ddd;background:#fff;color:#000;box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .08s ease;
}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:scale(1.02)}

/* Utilities */
.header-spacer{height:56px}

/* CTA band: dark black–blue squares with subtle blue gradient */
.cta-gradient {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(20, 12, 4, 0.4) 0%, rgba(15, 9, 4, 0.8) 65%, rgba(10, 6, 3, 0.95) 100%),
    linear-gradient(135deg,
      rgba(201, 168, 115, 0.35) 0%,      /* soft glow in the bottom-left */
      rgba(144, 111, 61, 0.75) 55%,      /* midtone—your base color */
      rgba(78, 55, 23, 0.95) 100%        /* strongest tone toward the right edge */
    );
  background-blend-mode: multiply;
  border-top: 1px solid #3a2a12;
  border-bottom: 1px solid #3a2a12;
}
.cta-inner{display:grid;gap:var(--space-2);text-align:center}
.cta-title{margin:0}
.cta-sub{margin:0 0 var(--space-2)}

/* --- Merged services-only rules below (originally after @import in services.css) --- */
/* Services-specific stylesheet duplicated from styles.css at time of creation. */

/* Place any services-only overrides below. */

/* Make CTA banner full-bleed on services page */
.cta-gradient{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* Large hero logo centered above headline */
.hero-logo{height:96px;width:auto;display:inline-block;margin-bottom:var(--space-3)}
@media (max-width:520px){.hero-logo{height:80px}}

/* Reveal effects (light, accessible) */
.reveal{opacity:0;transform:translateY(8px);animation:fadeUp .6s ease forwards}
.reveal.delay-1{animation-delay:.08s}
.reveal.delay-2{animation-delay:.16s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;animation:none}
}

/* Visually hidden for a11y headings */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Align narrative section with hero spacing and alignment */
.hero+.section{padding-top:var(--space-5)}
.hero+.section .lead:first-of-type{margin-top:0}
.hero+.section .container{text-align:center}
.hero+.section .lead{margin-inline:auto}

/* Larger heading for Our Offerings with higher specificity to override globals */
.features .offerings-title.section__title{
  font-size:clamp(1.75rem,3.5vw,2.5rem);
  line-height:1.15;
  text-align:center;
  font-weight:700;
  margin-bottom:var(--space-4);
}

/* Center pillar lead paragraphs for readability */
.features .lead{ 
  text-align:center;
  max-width:72ch;
  margin-inline:auto;
}

/* Make CTA button span the width of the subhead text block */
.cta-inner{max-width:72ch}
.cta-inner .button--cta{width:100%;}

/* Jump link comfort for offerings anchor under sticky header */
#offerings{scroll-margin-top:160px}

/* Align card titles across rows */
.features .feature-card{display:flex;flex-direction:column;justify-content:flex-start}
.features .feature-card .card__title{
  margin-top:0;margin-bottom:.5rem;
  min-height:3rem; /* approx two lines; adjust if needed */
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.features .feature-card .card__body{margin-top:.25rem}


/* Solutions page additions */
/* Layout */
.solution { padding-top: 2rem; padding-bottom: 2rem; }
.solution__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
/* Two columns on larger screens */
@media (min-width: 960px) {
  .solution__inner { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; }
  .solution--reverse .solution__media { order: 2; }
  .solution--reverse .solution__content { order: 1; }
}
/* Media */
.solution__media picture, .solution__media img {
  display: block;
  width: 100%;
  height: auto;
}
.solution__media img {
  border-radius: 12px;
  /* Maintain a pleasant aspect if source images vary */
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* Content */
.solution__eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #666);
  margin: 0 0 0.25rem 0;
}
.solution__title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
}
.solution__text { font-size: 1.05rem; margin: 0 0 0.75rem 0; }
.solution__bullets { margin: 0; padding: 0 0 0 1.25rem; }
.solution__bullets li { margin: 0.25rem 0; }

/* Hero tweak so it reads well without an image */
.solutions-hero .hero__title { margin-bottom: 0.25rem; }
.solutions-hero .hero__sub { max-width: 70ch; }