/* ===========================================================
   Sulia — creative polish layer
   Design / layout / motion / a11y only. No content changes.
   Loaded last so it refines the existing system.
   =========================================================== */

/* ---------- 1. Spacing system (calmer, scale-based rhythm) ---------- */
:root{
  --sp-1:14px; --sp-2:22px; --sp-3:34px; --sp-4:48px;
  --sp-5:64px; --sp-6:88px; --sp-7:112px;
  --rule:rgba(255,255,255,.07);
  --plate:rgba(63,174,104,.10);
}
section{padding:var(--sp-6) 0}
section.hero{padding-top:calc(var(--sp-6) + 34px);padding-bottom:var(--sp-6)}
section + section{padding-top:var(--sp-6)}
.footer{margin-top:var(--sp-6)}
.band{background:linear-gradient(180deg,rgba(63,174,104,.02),transparent 55%,rgba(255,255,255,.008))}

/* ---------- 2. Editorial section headers (fills the dead right column) ---------- */
@media(min-width:981px){
  .head{
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    column-gap:var(--sp-5);
    row-gap:18px;
    align-items:end;
    padding-top:22px;
    border-top:1px solid var(--rule);
    margin-bottom:var(--sp-5);
  }
  .head .eyebrow{grid-column:1;grid-row:1;margin-bottom:0}
  .head h2{grid-column:1;grid-row:2;max-width:15ch;margin:0}
  .head .sub{grid-column:2;grid-row:2;max-width:52ch;margin:0;padding-bottom:8px;align-self:end}
  .head:not(:has(.sub)) h2{max-width:22ch}
  /* keep the split/why-Sulia column intro aligned to the same language */
  .split > .reveal:first-child{padding-top:22px;border-top:1px solid var(--rule)}
}
.head h2{text-wrap:balance}
.testimonials-header{align-items:end;padding-top:22px;border-top:1px solid var(--rule);margin-bottom:var(--sp-5)}

/* ---------- 3. Service / feature cards: intentional whitespace ---------- */
.grid4{gap:16px}
.grid4 .card{display:flex;flex-direction:column;padding:30px 28px 26px}
.grid4 .card h3{margin-bottom:12px}
.grid4 .card p{flex:1 1 auto;margin-bottom:0}
.grid4 .card .arrow{
  margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  opacity:1;transform:none;color:rgba(127,223,162,.72);
  transition:color .3s ease,border-color .3s ease;
}
.grid4 .card:hover .arrow,.grid4 .card:focus-visible .arrow{opacity:1;transform:none;color:#8fe6ad}
.grid4 .card:hover .arrow,.grid4 .card:focus-visible .arrow{border-top-color:rgba(63,174,104,.35)}
.grid4 .card-number{top:14px}
.grid4 .card:hover .card-number,.grid4 .card:focus-visible .card-number{color:rgba(63,174,104,.13)}
.process .card.step{display:flex;flex-direction:column}
.process .card.step p{margin-bottom:0}
.stats .stat{padding-top:20px;border-top:1px solid var(--rule)}

/* ---------- 4. FAQ: custom Sulia disclosure ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:0}
.faq summary{
  list-style:none;display:flex;align-items:center;gap:18px;
  padding:24px 4px 24px 0;font-weight:600;font-size:17px;letter-spacing:-.015em;
  color:#e6ede8;transition:color .25s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{
  content:"";flex:0 0 auto;order:2;margin-left:auto;
  width:26px;height:26px;border:1px solid rgba(120,180,135,.32);border-radius:50%;
  background:
    linear-gradient(var(--g),var(--g)) center/10px 1px no-repeat,
    linear-gradient(var(--g),var(--g)) center/1px 10px no-repeat;
  transition:transform .3s ease,border-color .3s ease,background-color .3s ease;
}
.faq summary:hover{color:#fff}
.faq summary:hover::after{border-color:rgba(85,191,121,.6)}
.faq details[open] summary{color:#fff}
.faq details[open] summary::after{
  transform:rotate(90deg);
  background:linear-gradient(var(--g),var(--g)) center/10px 1px no-repeat;
  border-color:rgba(85,191,121,.55);
}
.faq details > p{margin:0;padding:0 60px 26px 0;color:var(--muted);max-width:78ch}
.faq details[open] > p{animation:faqIn .32s ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- 5. Testimonials: no clipped words ---------- */
.testimonial-viewport{
  mask-image:linear-gradient(90deg,rgba(0,0,0,.45),#000 3%,#000 91%,rgba(0,0,0,.35) 98%,transparent);
  scroll-padding-left:2px;
}
.testimonial-grid{padding-left:2px}
.editorial-testimonial.featured{padding:44px 52px 44px 48px}
.editorial-testimonial.featured blockquote{font-size:clamp(27px,3.1vw,44px);line-height:1.14}
@media(max-width:760px){
  .testimonial-viewport{mask-image:linear-gradient(90deg,#000 0 88%,transparent)}
  .editorial-testimonial.featured{padding:32px 24px 34px}
}

/* ---------- 6. Client-logo roster: one deliberate system ---------- */
.case-card-media,
.case-card-media--light,
.case-card-media--square{
  height:138px;margin-bottom:20px;padding:0;
  display:grid;place-items:center;
  border:1px solid rgba(120,180,135,.18);border-radius:4px;
  background:linear-gradient(150deg,rgba(63,174,104,.085),rgba(255,255,255,.012) 72%);
}
.case-card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle,#000 25%,transparent 76%);
}
/* logos that are dark artwork sit on a uniform light plate of identical size */
.case-card-media--light{background:linear-gradient(150deg,rgba(63,174,104,.085),rgba(255,255,255,.012) 72%)}
.case-card-media--light .case-card-logo{
  box-sizing:border-box;
  width:238px;max-width:70%;height:92px;max-height:92px;
  object-fit:contain;
  background:#f5f8f5;border-radius:3px;padding:14px 20px;
  box-shadow:0 12px 34px rgba(0,0,0,.26);
}
.case-card-logo{
  position:relative;z-index:1;
  max-height:74px;max-width:66%;width:auto;height:auto;
  object-fit:contain;opacity:1;
}

.case-card:hover .case-card-logo{transform:none}
.case-card:hover .case-card-media{border-color:rgba(85,191,121,.42)}

/* case identity panel on detail pages: same optical discipline */
.case-identity-logo,.case-identity img{max-height:44px;width:auto}

/* ---------- 7. Case-study metrics: 5 metrics, zero orphan holes ---------- */
@media(min-width:761px){
  .case-results{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  .case-results > .case-result{grid-column:span 2}
  .case-results > .case-result:nth-child(1):nth-last-child(5){grid-column:span 6;min-height:auto}
  .case-results > .case-result:nth-child(1):nth-last-child(5) b{font-size:clamp(46px,5.4vw,72px)}
  .case-results > .case-result:nth-child(1):nth-last-child(5) span{margin-top:14px}
  .case-results > .case-result:nth-child(2):nth-last-child(4),
  .case-results > .case-result:nth-child(3):nth-last-child(3){grid-column:span 3}
  .case-results > .case-result:nth-child(4):nth-last-child(2),
  .case-results > .case-result:nth-child(5):nth-last-child(1){grid-column:span 3}
}
.case-result{border-radius:4px}

/* ---------- 8. Case-study page ending ---------- */
.detail .detail-body > .detail-block:last-child{padding-bottom:var(--sp-4)}
.detail + .footer,
main.detail ~ .footer{
  margin-top:0;padding:var(--sp-5) 0 var(--sp-5);
  border-top:1px solid rgba(63,174,104,.18);
  background:linear-gradient(180deg,rgba(63,174,104,.05),transparent 70%);
}
main.detail ~ .footer .footer-in{align-items:center}
main.detail ~ .footer .footer-in a{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 22px;border:1px solid rgba(120,180,135,.3);border-radius:999px;
  color:#dcebe1;font-weight:700;font-size:14px;
  transition:border-color .3s ease,background .3s ease,transform .3s ease,color .3s ease;
}
main.detail ~ .footer .footer-in a:hover{
  border-color:rgba(85,191,121,.6);background:rgba(63,174,104,.12);
  color:#fff;transform:translateX(3px);
}

/* ---------- 9. Growth system: nodes on the orbit paths + core links ---------- */
.n1{left:14.4%;top:32.3%}
.n2{right:17.9%;top:54.7%;left:auto}
.n3{left:33.6%;bottom:38.5%;top:auto}
.n4{right:18.3%;bottom:28.4%;top:auto}
.node{width:8px;height:8px;background:#8fe6ad;box-shadow:0 0 16px rgba(63,174,104,.65)}
.node::before{
  content:"";position:absolute;left:50%;top:50%;height:1px;
  transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,rgba(127,223,162,.42),rgba(127,223,162,0));
  opacity:.5;transition:opacity .9s ease;
}
.node::after{
  content:"";position:absolute;inset:-9px;border:1px solid rgba(127,223,162,.28);
  border-radius:50%;opacity:0;transform:scale(.7);
  transition:opacity .9s ease,transform .9s ease;
}
.n1::before{width:140px;transform:rotate(22.6deg)}
.n2::before{width:120px;transform:rotate(187deg)}
.n3::before{width:70px;transform:rotate(-30.6deg)}
.n4::before{width:130px;transform:rotate(210deg)}
/* four calm, deliberate system states (01 → 04) */
.visual[data-state="1"] .n1,.visual[data-state="2"] .n2,
.visual[data-state="3"] .n3,.visual[data-state="4"] .n4{
  background:#c6f7d6;box-shadow:0 0 26px rgba(127,223,162,.85);
}
.visual[data-state="1"] .n1::before,.visual[data-state="2"] .n2::before,
.visual[data-state="3"] .n3::before,.visual[data-state="4"] .n4::before{opacity:1}
.visual[data-state="1"] .n1::after,.visual[data-state="2"] .n2::after,
.visual[data-state="3"] .n3::after,.visual[data-state="4"] .n4::after{opacity:1;transform:scale(1)}
.orbit{border-color:rgba(63,174,104,.16)}
.orbit.three{border-color:rgba(63,174,104,.26)}
.core:after{width:150px;height:150px;background:rgba(63,174,104,.13)}
.core::before{
  content:"";position:absolute;left:50%;top:50%;width:212px;height:212px;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(63,174,104,.13);
  background:radial-gradient(circle,rgba(63,174,104,.07),transparent 68%);
}
.system-label{padding:6px 11px;background:rgba(7,9,7,.82)}
.system-index{color:rgba(180,224,192,.7)}
.floater{border-color:rgba(120,180,135,.22);background:rgba(9,13,10,.86)}
@media(max-width:760px){
  .node::before{display:none}
  .core::before{width:150px;height:150px}
}

/* ---------- 10. Navigation scrolled state ---------- */
.nav{transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.nav.is-scrolled{
  background:rgba(6,8,6,.9);
  border-bottom-color:rgba(63,174,104,.2);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.nav.is-scrolled .logo{transform:scale(.96);transition:transform .35s ease}
.nav .logo{transition:transform .35s ease}
.nav.is-scrolled .navCta{box-shadow:0 12px 30px rgba(63,174,104,.22)}

/* ---------- 11. Focus-visible system ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible,
.card:focus-visible,.service-card:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--g);
  outline-offset:3px;
  border-radius:6px;
}
.cta:focus-visible{outline-offset:4px;border-radius:999px}
.faq summary:focus-visible{outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline-offset:1px;border-color:rgba(85,191,121,.55)
}

/* ---------- 12. Mobile menu ---------- */
@media(max-width:980px){
  .mobileLinks{
    background:#070907;
    padding:18px 20px 26px;
    max-height:calc(100dvh - 70px);
    overflow-y:auto;
    box-shadow:0 30px 60px rgba(0,0,0,.55);
    border-bottom-color:rgba(63,174,104,.2);
  }
  .mobileLinks.open{gap:4px}
  .mobileLinks a{
    padding:15px 4px;font-size:17px;letter-spacing:-.02em;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .mobileLinks a.cta{
    margin-top:16px;border-bottom:0;justify-content:center;
    display:flex;padding:15px 20px;
  }
}
body.menu-open{overflow:hidden}

/* ---------- 13. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .node::before{opacity:.85;transition:none}
  .node::after{transition:none}
  .faq details[open] > p{animation:none}
  .nav,.nav .logo{transition:none}
}

/* ---------- 14. Split sections: anchor the intro column ---------- */
@media(min-width:981px){
  .split{align-items:start;gap:64px}
  .split > .reveal:first-child{position:sticky;top:118px}
  .detail-layout .detail-intro{align-self:start}
}