/* CreativeTech Solutions — shared "modern" page styles (agent-trust.html visual language)
   Load this file after your main website stylesheet. Add a .cts-theme-* class
   alongside .cts-agent-trust to recolor accents for a given page. */
.cts-agent-trust,
  .cts-agent-trust * { box-sizing: border-box; }
  .cts-agent-trust {
    --cts-navy: #071b2c;
    --cts-deep: #0a2c43;
    --cts-cyan: #18bac9;
    --cts-blue: #137da9;
    --cts-ink: #10293b;
    --cts-muted: #647a89;
    --cts-line: #dbe5ea;
    --cts-pale: #f4f8fa;
    --cts-accent: #18bac9;
    --cts-accent-dark: #126fae;
    color: var(--cts-ink);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    overflow: hidden;
    text-align: left;
  }
  .cts-theme-cyber { --cts-accent: #4A9FE0; --cts-accent-dark: #2f6fa3; }
  .cts-theme-software { --cts-accent: #B98CE0; --cts-accent-dark: #7C5FB0; }
  .cts-theme-other { --cts-accent: #C98A3E; --cts-accent-dark: #9C6A28; }
  .cts-theme-contact { --cts-accent: #6BC7D2; --cts-accent-dark: #3E97A3; }
  .cts-theme-blog { --cts-accent: #5DCAA5; --cts-accent-dark: #0F6E56; }
  .cts-theme-about { --cts-accent: #B7972F; --cts-accent-dark: #83690F; }
  .cts-agent-trust a { color: inherit; text-decoration: none; }
  .cts-agent-trust h1,
  .cts-agent-trust h2,
  .cts-agent-trust h3,
  .cts-agent-trust p { margin-top: 0; }
  .cts-wrap { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
  .cts-kicker {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px; color: var(--cts-accent-dark);
    font-size: 11px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase;
  }
  .cts-kicker::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--cts-accent); box-shadow: 0 0 0 5px rgba(24,186,201,.12);
  }
  .cts-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    padding: 15px 22px; border-radius: 7px;
    background: linear-gradient(to right, var(--cts-accent-dark), var(--cts-accent));
    color: #fff !important; font-size: 14px; font-weight: 800;
    box-shadow: 0 12px 25px rgba(10,120,155,.18);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .cts-button:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(10,120,155,.25); }
  .cts-text-link { font-size: 13px; font-weight: 800; color: var(--cts-accent-dark) !important; }
  .cts-related-post { margin-top: 16px; }

  .cts-hero { background: linear-gradient(180deg, #f7fbfc, #fff); }
  .cts-hero-grid {
    min-height: 620px; padding: 82px 0 62px;
    display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center;
  }
  .cts-hero h1 {
    max-width: 690px; margin-bottom: 26px;
    color: var(--cts-navy); font-size: clamp(48px, 5vw, 74px);
    line-height: 1; letter-spacing: -3px;
  }
  .cts-accent { color: var(--cts-accent-dark); }
  .cts-lead { max-width: 650px; margin-bottom: 0; color: #566e7e; font-size: 18px; line-height: 1.75; }
  .cts-actions { display: flex; align-items: center; gap: 26px; margin-top: 32px; }
  .cts-note { display: block; margin-top: 18px; color: #82939d; font-size: 11px; }
  .cts-visual {
    min-height: 470px; position: relative; display: grid; place-items: center;
    background: radial-gradient(circle, rgba(20,179,194,.11), transparent 62%);
  }
  .cts-ring { position: absolute; border: 1px solid rgba(22,134,163,.2); border-radius: 50%; }
  .cts-ring-one { width: 350px; height: 350px; }
  .cts-ring-two { width: 440px; height: 440px; border-style: dashed; }
  .cts-core {
    position: relative; z-index: 2; width: 245px; height: 245px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(255,255,255,.9); border: 1px solid rgba(40,185,200,.45);
    box-shadow: 0 30px 70px rgba(10,85,107,.14);
  }
  .cts-core::after { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(31,179,196,.35); border-radius: 50%; }
  .cts-core small { color: #718894; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; }
  .cts-core strong { margin: 8px 0; color: #0e5870; font-size: 27px; letter-spacing: 3px; }
  .cts-core span { color: #6d838f; font-size: 9px; }
  .cts-tag {
    position: absolute; z-index: 3; padding: 10px 14px; border: 1px solid #dce8ec;
    border-radius: 30px; background: #fff; color: #4d6675;
    box-shadow: 0 10px 25px rgba(18,61,78,.1); font-size: 10px; font-weight: 800;
  }
  .cts-tag b { color: var(--cts-cyan); margin-right: 6px; }
  .cts-tag-one { left: 2%; top: 18%; }
  .cts-tag-two { right: 1%; top: 40%; }
  .cts-tag-three { left: 2%; bottom: 16%; }
  .cts-question {
    padding: 24px max(24px, calc((100vw - 1160px)/2));
    display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;
    background: var(--cts-navy); color: #90a8b6; font-size: 12px;
  }
  .cts-question strong { color: #fff; }

  .hero-banner + .hero-intro { padding: 18px 20px 6px; }
  .hero-intro .cts-agent-trust,
  main > .cts-agent-trust { margin-top: 0; }

  .cts-portrait {
    min-height: 470px; position: relative; display: grid; place-items: center;
    background: radial-gradient(circle, rgba(183,151,47,.12), transparent 62%);
  }
  .cts-portrait img {
    width: 340px; max-width: 80%; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: 14px; box-shadow: 0 30px 70px rgba(10,40,60,.22);
    border: 1px solid rgba(40,40,40,.08);
  }
  .cts-bio-card {
    margin-top: 24px; padding: 22px 24px; border-radius: 10px;
    background: var(--cts-pale); border: 1px solid var(--cts-line);
  }
  .cts-bio-card p { margin: 0; color: #566e7e; font-size: 15px; line-height: 1.65; }

  .cts-section { padding: 44px 0; }
  main > .cts-agent-trust > .cts-section:first-child { padding-top: 16px; }
  .cts-section-label { margin-bottom: 16px; color: var(--cts-accent-dark); font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
  .cts-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
  .cts-split h2,
  .cts-principles h2,
  .cts-cta h2 { margin-bottom: 0; color: var(--cts-navy); font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -1px; }
  .cts-split > p { margin: 5px 0 0; color: var(--cts-muted); font-size: 16px; line-height: 1.6; }
  .cts-cards { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--cts-line); background: var(--cts-line); }
  .cts-cards article { padding: 22px 20px; background: #fff; }
  .cts-cards span,
  .cts-principle-list > article > span { color: var(--cts-accent-dark); font-size: 10px; font-weight: 800; }
  .cts-cards h3 { margin: 14px 0 6px; font-size: 18px; }
  .cts-cards p { margin-bottom: 0; color: #6b808e; font-size: 13px; line-height: 1.6; }

  .cts-cards-4 { margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--cts-line); background: var(--cts-line); }
  .cts-cards-4 article { padding: 20px 18px; background: #fff; }
  .cts-cards-4 span { color: var(--cts-accent-dark); font-size: 10px; font-weight: 800; }
  .cts-cards-4 h3 { margin: 12px 0 6px; font-size: 17px; }
  .cts-cards-4 p { margin-bottom: 0; color: #6b808e; font-size: 13px; line-height: 1.55; }
  .cts-cards-5 { grid-template-columns: repeat(5, 1fr); }

  .cts-cards-2 { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; border: 1px solid var(--cts-line); background: var(--cts-line); }
  .cts-cards-2 article { padding: 24px 22px; background: #fff; }
  .cts-cards-2 span { color: var(--cts-accent-dark); font-size: 10px; font-weight: 800; }
  .cts-cards-2 h3 { margin: 12px 0 6px; font-size: 19px; }
  .cts-cards-2 p { margin-bottom: 14px; color: #6b808e; font-size: 13px; line-height: 1.55; }

  .cts-crosslink { border: 1px solid var(--cts-accent); border-radius: 10px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .cts-crosslink p { margin: 0; color: #566e7e; font-size: 15px; max-width: 520px; }
  .cts-crosslink strong { color: var(--cts-navy); }

  .cts-dark { background: var(--cts-navy); color: #fff; }
  .cts-dark .cts-section-label { color: #59d1d9; }
  .cts-dark .cts-split h2 { color: #fff; }
  .cts-dark .cts-split > p { color: #93aab7; }
  .cts-paths { margin-top: 40px; display: grid; grid-template-columns: 1fr 60px 1fr; gap: 24px; align-items: center; }
  .cts-paths article { min-height: 260px; padding: 30px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); }
  .cts-path-icon { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(54,197,208,.28); border-radius: 9px; background: rgba(32,184,197,.1); color: #5cd2db; font-size: 22px; }
  .cts-paths small { display: block; margin: 20px 0 10px; color: #64d3da; font-size: 9px; letter-spacing: 1.6px; }
  .cts-paths h3 { font-size: 24px; }
  .cts-paths p { min-height: auto; color: #9ab0bc; font-size: 14px; line-height: 1.65; }
  .cts-paths a { color: #fff !important; font-size: 12px; font-weight: 800; }
  .cts-plus { color: #50d0d9; font-size: 32px; text-align: center; }

  .cts-pale { background: var(--cts-pale); }
  .cts-principles { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; }
  .cts-principles-intro { color: #6b7f8c; font-size: 16px; line-height: 1.7; }
  .cts-principle-list article { padding: 16px 0; display: grid; grid-template-columns: 48px 1fr; gap: 18px; border-top: 1px solid #d4e0e5; }
  .cts-principle-list article:last-child { border-bottom: 1px solid #d4e0e5; }
  .cts-principle-list h3 { margin-bottom: 6px; font-size: 21px; }
  .cts-principle-list p { margin-bottom: 0; color: #6b808e; font-size: 13px; }

  .cts-cta { padding: 48px 24px; background: linear-gradient(135deg, var(--cts-deep), var(--cts-navy)); color: #fff; text-align: center; }
  .cts-cta .cts-kicker { justify-content: center; color: #62d3da; }
  .cts-cta h2 { margin-bottom: 12px; color: #fff; }
  .cts-cta > p { max-width: 660px; margin: 0 auto; color: #9eb3bf; font-size: 16px; line-height: 1.6; }
  .cts-cta .cts-actions { justify-content: center; margin-top: 20px; }
  .cts-button-light { background: #fff; color: var(--cts-navy) !important; }
  .cts-email { color: #d2e1e7 !important; font-size: 12px; border-bottom: 1px solid #688390; }
  .cts-privacy { display: block; margin-top: 24px; color: #6f8996; font-size: 10px; }

  @media (max-width: 900px) {
    .cts-hero-grid, .cts-split, .cts-principles { grid-template-columns: 1fr; }
    .cts-hero-grid { padding-top: 65px; gap: 15px; }
    .cts-visual { min-height: 440px; }
    .cts-split, .cts-principles { gap: 24px; }
    .cts-cards, .cts-cards-4, .cts-cards-5, .cts-cards-2 { grid-template-columns: 1fr 1fr; }
    .cts-paths { grid-template-columns: 1fr; }
    .cts-plus { transform: rotate(45deg); }
    .cts-section { padding: 32px 0; }
  }
  @media (max-width: 560px) {
    .cts-wrap { width: min(100% - 36px, 1160px); }
    .cts-hero-grid { padding-top: 55px; }
    .cts-hero h1 { font-size: 47px; letter-spacing: -2px; }
    .cts-actions { flex-direction: column; align-items: flex-start; }
    .cts-visual { min-height: 380px; transform: scale(.84); margin: -25px -45px; }
    .cts-question { justify-content: flex-start; }
    .cts-split h2, .cts-principles h2, .cts-cta h2 { font-size: 32px; }
    .cts-paths article { padding: 24px; }
    .cts-cta .cts-actions { align-items: center; }
    .cts-email { font-size: 10px; }
    .cts-cards, .cts-cards-4, .cts-cards-5, .cts-cards-2 { grid-template-columns: 1fr; }
  }