:root {
    --cw-yellow:#FFD500;
    --cw-cyan:#02ACED;
    --cw-pink:#EA058B;
    --cw-ink:#111318;
    --cw-ink-2:#2a2e6f;

    --chip-h:160px;
    --chip-notch:15%;
    --ec-h:320px;
    --ec-r:18px;
    --ec-gap:84px;
  }


  .page-title-area {
    position:relative; overflow:hidden;
    background:
      radial-gradient(900px 300px at -10% 10%, color-mix(in srgb, var(--cw-pink) 18%, #fff), transparent 60%),
      radial-gradient(900px 300px at 110% -10%, color-mix(in srgb, var(--cw-cyan) 18%, #fff), transparent 60%),
      #fff;
  }
  .page-title-area .page-title {
    font-weight:800;
    letter-spacing:.3px;
    background:linear-gradient(90deg, var(--cw-cyan), var(--cw-pink), var(--cw-yellow));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .page-title-area::after {
    content:"";
    position:absolute;
    right:-40px; top:-40px;
    width:160px; height:160px;
    background:radial-gradient(circle at 30% 30%, var(--cw-cyan), transparent 60%);
    opacity:.18;
    filter:blur(2px);
    border-radius:50%;
    animation:floatY 8s ease-in-out infinite;
  }
  @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

  .principles-container {
    display:grid;
    grid-template-columns:repeat(2,minmax(280px,1fr));
    grid-auto-rows:var(--chip-h);
    column-gap:22px;
    row-gap:22px;
    max-width:1000px;
    margin:0 auto;
    padding:8px;
    position:relative;
    padding-bottom:calc(var(--chip-h)/2);
  }

  .tone-cyan   { --tone:#02ACED; }
  .tone-pink   { --tone:#EA058B; }
  .tone-yellow { --tone:#FFD500; }
  .tone-ink    { --tone:#2a2e6f; }

  .principle-chip {
    height:var(--chip-h);
    border-radius:20px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 10px 28px rgba(0,0,0,.08);
    background:color-mix(in srgb,var(--tone) 18%,#ffffff);
    clip-path:polygon(
      0 0,
      calc(100% - var(--chip-notch)) 0,
      100% 50%,
      calc(100% - var(--chip-notch)) 100%,
      0 100%
    );
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    transform:translateZ(0);
    transition:transform .35s ease, box-shadow .35s ease;
  }

  .principle-chip::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:repeating-linear-gradient(
      135deg,
      color-mix(in srgb,var(--tone) 10%,transparent) 0 10px,
      transparent 10px 20px
    );
    opacity:.22;
  }

  .principle-chip .chip-body { position:relative; z-index:1; padding:1.2rem; }


  .principle-chip h4 {
    color:#ffffff;
    font-weight:800;
    font-size:1.4rem;
    margin-bottom:.4rem;
    text-shadow:0 1px 2px rgba(0,0,0,.25);
  }
  .principle-chip p {
    margin:0;
    color:#ffffff;
    font-weight:500;
    font-size:1.05rem;
    text-shadow:0 1px 2px rgba(0,0,0,.25);
  }

  .principle-chip .chip-badge {
    width:36px;
    height:36px;
    border-radius:50%;
    background:color-mix(in srgb,#ffffff 22%,var(--tone) 78%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:.5rem;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  }
  .principle-chip .chip-badge svg { width:18px; height:18px; color:#fff; opacity:.96; }

  .principle-chip:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.12); }

  .principles-container .principle-chip:nth-child(even) {
    transform:translateY(calc(var(--chip-h)/2));
  }
  .principles-container .principle-chip:nth-child(even):hover {
    transform:translateY(calc(var(--chip-h)/2 - 6px));
  }

  @media (max-width:768px){
    .principles-container {
      grid-template-columns:1fr;
      padding-bottom:0;
    }
    .principles-container .principle-chip,
    .principles-container .principle-chip:nth-child(even){
      transform:none;
      clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
      border-radius:16px;
    }
  }


  .ethical-herringbone { background:#f6fff9; }
  .hb { display:grid; grid-template-columns:1fr 1fr; column-gap:var(--ec-gap); }
  .hb-col { display:flex; flex-direction:column; gap:var(--ec-gap); }
  .hb-col--offset { margin-top:calc(var(--ec-h)/2 + var(--ec-gap)/2); }

  .ethic-card {
    position:relative; display:block;
    height:var(--ec-h); border-radius:var(--ec-r);
    overflow:hidden; background:#e9eef7;
    box-shadow:0 10px 28px rgba(0,0,0,0.12);
    transition:transform .35s ease, box-shadow .35s ease;
    isolation:isolate;
  }
  .ethic-card::before {
    content:""; position:absolute; inset:0; z-index:0;
    background-image:var(--bg);
    background-size:cover; background-position:center;
    transform:scale(1); transition:transform .5s ease;
  }
  .ethic-card::after {
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(to bottom,rgba(0,0,0,0.25),rgba(0,0,0,0.65));
    mix-blend-mode:multiply;
  }
  .ethic-card .ec-body {
    position:absolute; z-index:2; left:28px; top:28px; right:70px; color:#fff;
  }
  .ethic-card h3 {
    font-size:1.9rem; line-height:1.3; margin:0 0 10px;
    font-weight:800; text-transform:capitalize;
    text-shadow:0 3px 10px rgba(0,0,0,0.5);
  }
  .ethic-card p {
    margin:0; font-size:1.1rem; line-height:1.6; font-weight:600;
    color:rgba(255,255,255,0.96);
    text-shadow:0 2px 8px rgba(0,0,0,0.4);
  }
  .ec-plus {
    position:absolute; right:25px; bottom:20px; z-index:2;
    width:52px; height:52px; border-radius:14px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:32px; font-weight:bold; color:#fff;
    background:rgba(0,0,0,0.3);
    box-shadow:0 6px 16px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.18);
    transition:transform .25s ease, background .25s ease;
  }
  .ethic-card:hover .ec-plus { transform:scale(1.08); background:rgba(0,0,0,0.45); }
  .ethic-card:hover { transform:translateY(-10px); box-shadow:0 20px 45px rgba(0,0,0,0.25); }
  .ethic-card:hover::before { transform:scale(1.06); }

.ethic-card .ec-body h3{
  color:#fff !important;
  font-weight:800 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}

.ethic-card .ec-body p{
  color:#fff !important;
  font-weight:600 !important;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
  

  #principleModal .modal-dialog {
    max-width:720px;
    margin:1.75rem auto;
    transform:scale(0.92) translateY(20px);
    transition:transform .45s cubic-bezier(0.22,1,0.36,1), opacity .45s ease;
    opacity:0; filter:blur(6px);
  }
  #principleModal.show .modal-dialog {
    transform:scale(1) translateY(0);
    opacity:1; filter:blur(0);
  }
  #principleModal .modal-content {
    background:#eaf3ff;
    border-radius:20px;
    border:none;
    box-shadow:0 12px 40px rgba(0,0,0,0.25);
    overflow:hidden;
    position:relative;
    padding:1.6rem 2.2rem 2rem;
    animation:modalGlow .8s ease-out both;
  }
  #principleModal .modal-title {
    font-size:1.9rem;
    font-weight:800;
    color:#082544;
    text-align:center;
    margin:0 0 0.5rem 0;
    line-height:1.3;
    animation:fadeInUp .6s ease-out both;
  }
  #principleModal .modal-body {
    font-size:1.35rem;
    line-height:1.8;
    font-weight:500;
    color:#0e2540;
    padding:0 1rem;
    text-align:justify;
    max-height:65vh;
    overflow-y:auto;
    white-space:pre-wrap;
    animation:fadeInUp .8s ease-out 0.1s both;
  }
  #principleModal .btn-close {
    position:absolute;
    top:16px; right:22px;
    width:40px; height:40px;
    background:none!important;
    border:none;
    cursor:pointer;
    z-index:10;
    opacity:0.9;
    transition:transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  }
  #principleModal .btn-close::before {
    content:"×";
    font-size:2.1rem;
    font-weight:800;
    color:#0b203d;
    display:block;
    line-height:1;
  }
  #principleModal .btn-close:hover {
    transform:scale(1.25);
    color:var(--cw-pink);
    text-shadow:0 0 8px rgba(234,5,139,0.45);
    opacity:1;
  }
  .modal-backdrop.cow-ethics {
    background:rgba(234,5,139,0.06);
    backdrop-filter:blur(10px) saturate(130%);
    -webkit-backdrop-filter:blur(10px) saturate(130%);
    animation:backdropFade 0.6s ease both;
  }

  @keyframes fadeInUp {
    0% { opacity:0; transform:translateY(15px); }
    100% { opacity:1; transform:translateY(0); }
  }
  @keyframes modalGlow {
    0% { box-shadow:0 0 0 rgba(2,172,237,0); }
    50% { box-shadow:0 0 30px rgba(2,172,237,0.4); }
    100% { box-shadow:0 12px 40px rgba(0,0,0,0.25); }
  }
  @keyframes backdropFade { 0%{opacity:0;}100%{opacity:1;} }
  .ph { background:linear-gradient(100deg,#f4f6fb 30%,#eef1f8 45%,#f4f6fb 60%); }
  .shimmer { background-size:200% 100%; animation:shimmer 2s linear infinite; }
  @keyframes shimmer { 0%{background-position:200% 0;}100%{background-position:-200% 0;} }