/* =========================================================
   ABOUT.CSS — FOR USE INSIDE YOUR EXISTING "4 / span 6" PANEL
   - NO inner cards
   - NO borders / shadows / backgrounds inside About
   - Single-column (clean + modern for narrow content area)
   - Grid-only
   ========================================================= */

/* Unique page wrapper */
.about-page {
   /* Keep empty unless you want extra page spacing */
}

/* -----------------------------------------
   HARD OVERRIDES (fix double shadow/border)
   If layout.css has global “panel/card” rules on
   section/article/aside/etc, this neutralizes them
   only inside the About page.
------------------------------------------ */
.about-page :where(section, header, div, article, aside, footer) {
   background: transparent !important;
   border: 0 !important;
   box-shadow: none !important;
   outline: 0 !important;
   border-radius: 0 !important;
}

/* If global styles add padding to article/aside, remove it
   (your outer wrapper already provides padding) */
.about-page :where(article, aside) {
   padding: 0 !important;
}

/* -----------------------------------------
   PAGE GRID
------------------------------------------ */
.about-grid {
   display: grid;
   gap: 1.25rem;
}

.about-header {
   display: grid;
   gap: 0.85rem;
}

/* Main content is ALWAYS single column */
.about-main {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1.25rem;
}

/* Keep the sidebar as a normal stacked block */
.about-sidebar {
   display: grid;
   gap: 1.1rem;
   margin-top: 0.15rem;
}

/* -----------------------------------------
   TYPOGRAPHY
------------------------------------------ */
.about-kicker {
   margin: 0;
   font-weight: 600;
   font-size: 0.95rem;
   letter-spacing: 0.02em;
   opacity: 0.85;
}

.about-title {
   margin: 0.2rem 0 0;
   font-size: clamp(1.6rem, 2.4vw, 2.2rem);
   line-height: 1.15;
}

.about-subtext {
   margin: 0.6rem 0 0;
   font-size: 1rem;
   line-height: 1.65;
   opacity: 0.92;
}

/* Headings inside content */
.about-section h2,
.about-sidebar h3 {
   margin: 0;
   font-size: 1.15rem;
}

.about-sidebar h3 {
   font-size: 1.05rem;
}

.about-section p,
.about-sidebar p {
   margin: 0;
   line-height: 1.65;
   opacity: 0.95;
}

/* -----------------------------------------
   TRUST STRIP
------------------------------------------ */
.trust-strip {
   display: grid;
   gap: 0.6rem;
}

.trust-items {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.7rem;
}

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

/* Keep “pills” simple (no border/background) */
.trust-pill {
   display: grid;
   gap: 0.15rem;
   padding: 0;
}

.trust-pill strong {
   font-size: 0.95rem;
}

.trust-pill span {
   font-size: 0.85rem;
   opacity: 0.85;
}

/* -----------------------------------------
   SECTIONS + SPACING
------------------------------------------ */
.about-section {
   display: grid;
   gap: 0.55rem;
}

/* Add breathing room between sections */
.about-section+.about-section {
   margin-top: 1.1rem;
}

/* -----------------------------------------
   LIST (no UL/LI)
------------------------------------------ */
.about-list {
   display: grid;
   gap: 0.55rem;
   margin-top: 0.35rem;
}

.about-list-item {
   display: grid;
   grid-template-columns: 0.9rem 1fr;
   gap: 0.65rem;
   align-items: start;
}

.about-dot {
   width: 0.55rem;
   height: 0.55rem;
   border-radius: 999px;
   background: var(--color-2, #006eba);
   margin-top: 0.45rem;
}

/* -----------------------------------------
   CTA LINKS (no border/shadow added here)
   If you want them to look like buttons, use
   your existing reusable button component.
------------------------------------------ */
.about-cta {
   display: grid;
   gap: 0.6rem;
   margin-top: 1rem;
}

.about-cta a {
   text-decoration: none;
   font-weight: 600;
   display: inline-grid;
   justify-content: center;
   padding: 0.65rem 0.9rem;
   border-radius: 12px;

   /* prevent layout.css from turning these into “buttons” */
   background: transparent !important;
   border: 0 !important;
   box-shadow: none !important;

   transition: opacity 0.2s ease, transform 0.2s ease;
}

.about-cta a:hover {
   opacity: 0.9;
   transform: translateY(-1px);
}

/* About wrapper must NOT look like a card (global section styles already do that) */
section.about-page {
   background: transparent !important;
   border: 0 !important;
   box-shadow: none !important;
   border-radius: 0 !important;
   padding: 0 !important;
}/* ===== ABOUT CTA BUTTONS — FORCE VISIBLE ===== */

.about-page .about-cta {
   display: grid;
   gap: 0.75rem;
   margin-top: 1.35rem;
}

.about-page .about-cta>a {
   display: inline-grid !important;
   place-items: center !important;

   padding: 0.75rem 1.1rem !important;
   border-radius: 999px !important;

   text-decoration: none !important;
   font-weight: 600 !important;
   font-size: 0.95rem !important;
   line-height: 1 !important;

   opacity: 1 !important;
   visibility: visible !important;

   box-shadow: none !important;
   transform: none;
   transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* Primary */
.about-page .about-cta>a.primary {
   background-color: var(--color-1, #003480) !important;
   color: #fff !important;
   border: 1px solid transparent !important;
   /* keeps size consistent */
}

.about-page .about-cta>a.primary:hover {
   background-color: var(--color-2, #006eba) !important;
   transform: translateY(-1px);
}

/* Secondary */
.about-page .about-cta>a.secondary {
   background-color: transparent !important;
   color: var(--color-1, #003480) !important;
   border: 1px solid var(--color-1, #003480) !important;
}

.about-page .about-cta>a.secondary:hover {
   background-color: rgba(0, 52, 128, 0.06) !important;
   transform: translateY(-1px);
}