/* Scoped to #sys-about-our-values - About Us Our Values section */
#sys-about-our-values {
  box-sizing: border-box;
  --panel-blur: 8px;
  --card-blur: 14px;
  --card-tint: rgba(14, 34, 20, .18);
  --card-border: rgba(217, 178, 106, .32);
  --gold: #d9b26a;
  --page: #0b1a10;
  background: var(--page);
  color: #f3f1e8;
  font-family: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#sys-about-our-values *,
#sys-about-our-values *::before,
#sys-about-our-values *::after {
  box-sizing: border-box;
}
@media (prefers-color-scheme: dark) {
  #sys-about-our-values:not([data-theme="light"]) {
    --page: #0b1a10;
  }
}
#sys-about-our-values[data-theme="dark"] {
  --page: #0b1a10;
}

  /* ============================================================
     BLUR / GLASS SETTINGS — tweak these to taste
     ============================================================ */
  
  
  
  
  
  

  /* ---------- Section + background ---------- */
  #sys-about-our-values .values{ position:relative; isolation:isolate; overflow:hidden; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; }
  #sys-about-our-values .values__bg{ position:absolute; inset:0; z-index:-2; background-image:var(--bg-image); background-size:cover; background-position:center; transform:scale(1.08); transition:transform 2.4s cubic-bezier(.2,.7,.2,1), opacity 1.2s ease; opacity:0; }
  #sys-about-our-values .values.is-in .values__bg{ transform:scale(1); opacity:1; }
  /* Tone overlay: gives ANY photo the same moody green look */
  #sys-about-our-values .values__tone{ position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(6,20,11,.72) 0%, rgba(6,20,11,.35) 38%, rgba(6,20,11,0) 62%),
      linear-gradient(0deg, rgba(5,16,9,.45) 0%, rgba(5,16,9,0) 30%),
      radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(3,10,6,.55) 100%); }

  /* Heading area: soft blurred glass that fades out at the edges (no hard border) */
  #sys-about-our-values .panel{ position:relative; }
  #sys-about-our-values .panel::before{ content:""; position:absolute; z-index:-1; top:-2.5rem; bottom:-2.5rem; left:-6vw; right:auto; width:calc(6vw + var(--blur-w, 28rem) + 2.5rem);
    -webkit-backdrop-filter:blur(var(--panel-blur)) saturate(110%); backdrop-filter:blur(var(--panel-blur)) saturate(110%);
    background:rgba(8,24,13,.22);
    /* feather the edges so the blur stays inside the text area */
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 78%,transparent 100%), linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,#000 0%,#000 78%,transparent 100%), linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
    mask-composite:intersect; }

  /* ---------- Type ---------- */
  #sys-about-our-values .eyebrow{ font-size:.8rem; letter-spacing:.42em; font-weight:400; color:#e6e8e0; display:flex; align-items:center; gap:1.6rem; }
  #sys-about-our-values .eyebrow .rule{ height:1px; width:5.5rem; background:rgba(230,232,224,.6); transform:scaleX(0); transform-origin:left; transition:transform 1s .5s cubic-bezier(.2,.7,.2,1); }
  #sys-about-our-values .is-in .eyebrow .rule{ transform:scaleX(1); }
  #sys-about-our-values .title{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; line-height:.98; letter-spacing:-.01em; font-size:clamp(2.8rem, 5.2vw, 5.4rem); color:#f5f3ec; }
  #sys-about-our-values .title em{ display:block; font-style:italic; font-weight:500; padding-right:.1em;
    background:linear-gradient(100deg,#c9974a 0%,#ecd08f 40%,#d6a95c 70%,#f0d9a2 100%); background-size:220% 100%;
    -webkit-background-clip:text; background-clip:text; color:transparent; }
  #sys-about-our-values .is-in .title em{ animation:sys-aov-shimmer 8s 2.2s ease-in-out infinite; }
  #sys-about-our-values .lead{ font-size:clamp(1.05rem,1.35vw,1.4rem); line-height:1.62; color:#e7ebe3; font-weight:300; max-width:30ch; }
  #sys-about-our-values .goldrule{ height:2px; width:5.5rem; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .9s 1.3s cubic-bezier(.2,.7,.2,1); }
  #sys-about-our-values .is-in .goldrule{ transform:scaleX(1); }

  #sys-about-our-values .script{ font-family:Allura,"Brush Script MT",cursive; color:rgba(217,196,140,.9); font-size:clamp(2rem,3vw,3.2rem); line-height:.95; transform:rotate(-24deg); text-shadow:0 2px 12px rgba(0,0,0,.35); }
  #sys-about-our-values .script span{ display:block; clip-path:inset(-30% 100% -30% -10%); }
  #sys-about-our-values .script span:nth-child(2){ padding-left:.7em } #sys-about-our-values .script span:nth-child(3){ padding-left:1.1em } #sys-about-our-values .script span:nth-child(4){ padding-left:1.8em }
  #sys-about-our-values .is-in .script span{ animation:sys-aov-write 1.3s ease-out forwards; }
  #sys-about-our-values .is-in .script span:nth-child(1){ animation-delay:1.2s } #sys-about-our-values .is-in .script span:nth-child(2){ animation-delay:1.6s }
  #sys-about-our-values .is-in .script span:nth-child(3){ animation-delay:2s }   #sys-about-our-values .is-in .script span:nth-child(4){ animation-delay:2.4s }
  #sys-about-our-values .script i{ display:block; height:2px; width:3.2em; margin:.35em 0 0 1.9em; background:rgba(217,196,140,.85); transform:rotate(-14deg) scaleX(0); transform-origin:left; transition:transform .8s 3s ease-out; }
  #sys-about-our-values .is-in .script i{ transform:rotate(-14deg) scaleX(1); }

  /* ---------- Entrance ---------- */
  #sys-about-our-values .rv{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--dl,0s); }
  #sys-about-our-values .is-in .rv{ opacity:1; transform:none; }

  /* ---------- Cards ---------- */
  #sys-about-our-values .card{ position:relative; overflow:hidden; border-radius:28px; border:1px solid var(--card-border);
    background:var(--card-tint);
    -webkit-backdrop-filter:blur(var(--card-blur)) saturate(120%); backdrop-filter:blur(var(--card-blur)) saturate(120%);
    box-shadow:0 20px 50px -20px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .5s cubic-bezier(.2,.7,.2,1), border-color .5s, box-shadow .5s, background-color .5s, opacity .9s cubic-bezier(.2,.7,.2,1); }
  #sys-about-our-values .card::after{ /* light sweep on hover */
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg, transparent 30%, rgba(255,235,190,.12) 48%, transparent 62%);
    transform:translateX(-120%); transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
  #sys-about-our-values .card:hover, #sys-about-our-values .card:focus-visible{ transform:translateY(-10px); border-color:rgba(232,207,149,.75); background-color:rgba(18,42,25,.28);
    box-shadow:0 34px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(232,207,149,.18), inset 0 1px 0 rgba(255,255,255,.1); }
  #sys-about-our-values .card:hover::after, #sys-about-our-values .card:focus-visible::after{ transform:translateX(120%); }
  #sys-about-our-values .card:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

  #sys-about-our-values .icon{ width:5.25rem; height:5.25rem; border-radius:50%; border:1.5px solid var(--gold); display:grid; place-items:center; color:var(--gold);
    transition:background-color .5s, color .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
  #sys-about-our-values .icon svg{ width:2.5rem; height:2.5rem; transition:transform .6s cubic-bezier(.34,1.56,.64,1); }
  #sys-about-our-values .card:hover .icon{ background:rgba(217,178,106,.14); transform:scale(1.06); }
  #sys-about-our-values .card:hover .icon svg{ transform:rotate(-8deg) scale(1.08); }

  #sys-about-our-values .card h3{ position:relative; z-index:1;  font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; font-size:clamp(1.6rem,2vw,2.15rem); line-height:1.15; color:#f4f2ea; }
  #sys-about-our-values .card .bar{ height:2px; width:2.9rem; background:var(--gold); transition:width .6s cubic-bezier(.2,.7,.2,1); }
  #sys-about-our-values .card:hover .bar{ width:5.5rem; }
  #sys-about-our-values .card p{ font-size:clamp(1rem,1.15vw,1.2rem); line-height:1.55; font-weight:300; color:#e3e8df; max-width:min(34ch, 72%); position:relative; z-index:1; }

  #sys-about-our-values .card .deco{ position:absolute; right:-22px; bottom:-34px; width:34%; max-width:170px; opacity:.72; pointer-events:none; transform-origin:85% 95%; transition:transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .6s; filter:drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
  #sys-about-our-values .card:hover .deco{ transform:rotate(-7deg) translateY(-6px) scale(1.04); opacity:1; }

  /* ---------- Desktop: match the original 16:9 composition (cards sit in the lower half) ---------- */
  @media (min-width:1024px){
    #sys-about-our-values .values{ min-height:max(100svh, 56.25vw); }
    #sys-about-our-values .values .values__top{ padding-top:clamp(3rem, 6.4vw, 8rem); }
    #sys-about-our-values .values .title{ margin-top:2vw; }
    #sys-about-our-values .values .lead{ margin-top:1.6vw; }
    #sys-about-our-values .values .goldrule{ margin-top:2vw; }
    #sys-about-our-values .values .values__cards{ margin-top:auto; padding-top:max(3.5rem, 4vw); padding-bottom:max(3rem, 6.6vw); }
    #sys-about-our-values .values .card{ padding:1.7vw 2.3vw 1.9vw 3.1vw; min-height:17.7vw; }
    #sys-about-our-values .values .card .icon{ width:max(4rem, 4.6vw); height:max(4rem, 4.6vw); }
    #sys-about-our-values .values .card .icon svg{ width:max(1.9rem, 2.2vw); height:max(1.9rem, 2.2vw); }
    #sys-about-our-values .values .card h3{ margin-top:.8vw; font-size:max(1.45rem, 1.8vw); line-height:1.1; }
    #sys-about-our-values .values .card .bar{ margin-top:.8vw; }
    #sys-about-our-values .values .card p{ margin-top:1.2vw; font-size:max(.98rem, 1.08vw); line-height:1.45; max-width:80%; }
  }

  @keyframes sys-aov-shimmer{ 0%,100%{background-position:100% 0} 50%{background-position:0 0} }
  @keyframes sys-aov-write{ to{ clip-path:inset(-30% -20% -30% -10%); } }

  @media (prefers-reduced-motion: reduce){
    #sys-about-our-values *, #sys-about-our-values *::before, #sys-about-our-values *::after{ animation:none !important; transition:none !important; }
    #sys-about-our-values .rv{ opacity:1; transform:none; } #sys-about-our-values .values__bg{ opacity:1; transform:none; }
    #sys-about-our-values .eyebrow .rule, #sys-about-our-values .goldrule{ transform:none; } #sys-about-our-values .script i{ transform:rotate(-14deg); }
    #sys-about-our-values .script span{ clip-path:none; }
  }