/* Siru Consulting — inner pages: AI & Business Systems (/ai-systems/) and Case studies (/work/) */

/* Page hero (no video on inner pages) */
.ph{border-bottom:1px solid var(--line)}
.ph .wrap{padding-top:96px;padding-bottom:80px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px 64px;align-items:end}
.ph-copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.ph h1{font-size:clamp(36px,4.6vw,60px);line-height:1.08;letter-spacing:-.03em}
.ph h1 em{font-style:normal;color:var(--coral)}
:lang(zh) .ph h1{letter-spacing:0;line-height:1.25}
.ph .lead{font-size:19px;line-height:1.7;color:var(--ink-soft);max-width:36rem}
.ph-aside{border-top:2px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--ink-soft);min-width:0}
.ph-aside dt{font-family:var(--display);font-weight:600;color:var(--ink);font-size:14px}
.ph-aside dd{margin:0 0 6px}

/* Module grid */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.mod{padding:30px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white);display:flex;flex-direction:column;gap:12px;min-width:0}
.mod h3{font-size:20px;line-height:1.3}
.mod p{font-size:15.5px;line-height:1.7;color:var(--ink-soft);text-align:justify;hyphens:auto}
.mod .tags{margin-top:6px}

/* Flow: inquiry to report */
.flow-band{background:var(--ink);color:var(--on-dark)}
.flow-band .eyebrow{color:var(--coral-light)}
.flow-band .section-intro{color:var(--on-dark-mute);max-width:40rem;font-size:17px;line-height:1.75;text-align:justify}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.flow li{display:flex;flex-direction:column;gap:14px;padding:0 18px 0 0;min-width:0}
.flow .stage{display:flex;align-items:center;gap:10px}
.flow .dotn{flex:none;width:36px;height:36px;border-radius:50%;background:var(--coral);color:var(--white);font-family:var(--display);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center}
.flow .line{flex:1;height:2px;background:var(--line-dark)}
.flow li:last-child .line{display:none}
.flow h3{font-size:19px}
.flow .ai,.flow .hu{font-size:14.5px;line-height:1.65;border-radius:12px;padding:12px 14px}
.flow .ai{background:#38363C;color:var(--on-dark-mute)}
.flow .hu{border:1px solid var(--line-dark);color:var(--on-dark-mute)}
.flow .k{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.flow .ai .k{color:var(--coral-light)}
.flow .hu .k{color:#A8D5B5}
:lang(zh) .flow .k{letter-spacing:.1em}
.flow-legend{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;font-size:14px;color:var(--on-dark-faint)}
.flow-legend span{display:inline-flex;align-items:center;gap:8px}
.flow-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.flow-legend .l-ai{background:#38363C;border:1px solid #4A474E}
.flow-legend .l-hu{border:1px solid #A8D5B5}


/* Case studies */
.cases{display:flex;flex-direction:column;gap:28px}
.case{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:40px 36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px 56px}
.case-head{display:flex;flex-direction:column;gap:14px;min-width:0}
.case-head .eyebrow{font-size:12px}
.case-head h2{font-size:clamp(24px,2.4vw,30px);line-height:1.25}
:lang(zh) .case-head h2{line-height:1.4}
.case-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px 32px;min-width:0}
.case-body h3{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-text);margin-bottom:8px}
:lang(zh) .case-body h3{letter-spacing:.08em}
.case-body p{font-size:15.5px;line-height:1.75;color:var(--ink-soft);text-align:justify;hyphens:auto}
.case-body ul{margin:0;padding-left:18px;font-size:15.5px;line-height:1.75;color:var(--ink-soft)}
.case-body li + li{margin-top:4px}
.case-body .wide{grid-column:1 / -1}
.case-note{font-size:14px;color:var(--mute);max-width:44rem;text-align:justify}

/* CTA band */
.cta{background:var(--blush)}
.cta .wrap{padding-top:72px;padding-bottom:72px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.cta h2{font-size:clamp(26px,3vw,38px);line-height:1.2;max-width:32rem}
:lang(zh) .cta h2{line-height:1.4}
.cta p{color:var(--ink-soft);margin-top:10px}

@media (max-width:900px){
  .flow{grid-template-columns:1fr;gap:28px}
  .flow li{padding:0}
  .flow .line{display:none}
  .case{grid-template-columns:1fr;padding:30px 22px}
}
@media (max-width:760px){
  .ph .wrap{padding-top:56px;padding-bottom:56px}
  .fit li{grid-template-columns:1fr;gap:4px}
}

/* Hero with circuit animation */
.ph-dark,.ph-light{position:relative;overflow:hidden}
.ph canvas.circuit{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph-scrim{position:absolute;inset:0;pointer-events:none}
.ph-dark .wrap,.ph-light .wrap{position:relative;z-index:1}
.ph-dark{background:var(--ink);color:var(--on-dark);border-bottom:0}
.ph-dark .ph-scrim{background:linear-gradient(90deg,rgba(43,42,46,.94) 0%,rgba(43,42,46,.82) 38%,rgba(43,42,46,.2) 64%,rgba(43,42,46,0) 100%)}
.ph-dark .wrap{grid-template-columns:minmax(0,1fr);min-height:clamp(560px,80vh,780px);align-content:center;gap:40px}
.ph-dark .ph-copy{max-width:40rem}
.ph-dark .eyebrow,.ph-dark h1 em{color:var(--coral-light)}
.ph-dark .lead{color:var(--on-dark-mute)}
.ph-dark .ph-aside{max-width:44rem;border-top-color:var(--line-dark);color:var(--on-dark-mute);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px 28px}
.ph-dark .ph-aside dt{color:var(--on-dark)}
.ph-light .ph-scrim{background:linear-gradient(90deg,rgba(250,246,240,.96) 0%,rgba(250,246,240,.86) 42%,rgba(250,246,240,.35) 70%,rgba(250,246,240,.1) 100%)}
.ph-light .ph-aside{background:rgba(250,246,240,.82)}

/* Hero copy entrance (ends fully visible) */
.ph-copy > *{animation:fadeup .7s var(--ease) both}
.ph-copy > :nth-child(2){animation-delay:.12s}
.ph-copy > :nth-child(3){animation-delay:.24s}
.ph-aside{animation:fadeup .7s var(--ease) .36s both}

/* Flow: data pulse along the connectors, staggered */
.flow .line{position:relative;overflow:hidden}
.flow .line::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,var(--coral-light),transparent);animation:flowpulse 2.6s linear infinite}
.flow li:nth-child(2) .line::after{animation-delay:.52s}
.flow li:nth-child(3) .line::after{animation-delay:1.04s}
.flow li:nth-child(4) .line::after{animation-delay:1.56s}
@keyframes flowpulse{to{left:100%}}
.flow .dotn{box-shadow:0 0 0 0 rgba(232,131,107,.45);animation:ring 2.6s ease-out infinite}
.flow li:nth-child(2) .dotn{animation-delay:.52s}.flow li:nth-child(3) .dotn{animation-delay:1.04s}.flow li:nth-child(4) .dotn{animation-delay:1.56s}.flow li:nth-child(5) .dotn{animation-delay:2.08s}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(232,131,107,.45)}70%{box-shadow:0 0 0 12px rgba(232,131,107,0)}100%{box-shadow:0 0 0 0 rgba(232,131,107,0)}}

@media (max-width:760px){
  .ph-dark .wrap{min-height:0;padding-top:220px}
  .ph-dark .ph-scrim{background:linear-gradient(180deg,rgba(43,42,46,0) 0,rgba(43,42,46,.55) 160px,rgba(43,42,46,.94) 260px)}
  .ph-light .ph-scrim{background:rgba(250,246,240,.8)}
}

/* Is this a fit: heading on top, three cards, results strip */
.fit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fit-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.fit-k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--coral-text)}
:lang(zh) .fit-k{letter-spacing:.1em;font-size:13px}
.fit-card p{font-size:16px;line-height:1.75;color:var(--ink-soft);text-align:justify;hyphens:auto}
.fit-res{grid-column:1 / -1;background:var(--ink);color:var(--on-dark);border-radius:var(--radius);padding:32px 36px;display:flex;flex-wrap:wrap;align-items:center;gap:20px 48px}
.fit-res .fit-k{color:var(--coral-light);flex-basis:100%}
.stats{display:flex;flex-wrap:wrap;gap:20px 64px;flex:1 1 auto}
.stat{display:flex;flex-direction:column;gap:6px}
.stat b{font-family:var(--display);font-weight:600;font-size:clamp(38px,4.2vw,56px);line-height:1;color:var(--coral-light);letter-spacing:-.02em}
.stat span{font-size:15px;color:var(--on-dark-mute)}

@media (max-width:900px){
  .fit-grid{grid-template-columns:1fr}
  .fit-res{padding:28px 22px}
}

/* English copy in narrow boxes: no justify, no hyphenation (avoids wide gaps and "fi-nance") */
:lang(en) .mod p,:lang(en) .case-body p,:lang(en) .fit-card p,:lang(en) .flow-band .section-intro,:lang(en) .case-note{text-align:left;-webkit-hyphens:none;hyphens:none}

/* Flow: titles, AI boxes and checkpoint boxes line up across all five columns */
@supports (grid-template-rows:subgrid){
  .flow{grid-template-rows:repeat(4,auto);row-gap:14px}
  .flow li{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0}
  .flow h3{align-self:end}
}
@supports not (grid-template-rows:subgrid){
  .flow h3{min-height:2.6em}
  .flow .ai{min-height:9.5em}
}

@media (max-width:900px){
  .flow{grid-template-rows:none;row-gap:28px}
  .flow li{display:flex;grid-row:auto;gap:14px}
  .flow h3,.flow .ai{min-height:0}
}

/* Gap between the AI and checkpoint boxes; capability tags on one line, aligned at the bottom of each card */
@supports (grid-template-rows:subgrid){ .flow li{row-gap:14px} }
.mod .tags{margin-top:auto;padding-top:6px;gap:6px}
.mod .tags li{font-size:12.5px;padding:5px 10px;white-space:nowrap}
.case-note{margin-top:32px}

@media (prefers-reduced-motion:reduce){
  .ph-copy > *,.ph-aside,.flow .dotn,.flow .line::after{animation:none}
}