/* How We Work page styles, scoped from the supplied design. */
.kg-how-we-work{--warn:#B44526}
.kg-how-we-work .hero{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--ink)}
.kg-how-we-work .hero-media{position:absolute;inset:-8% 0;will-change:transform}
.kg-how-we-work .hero-img{position:absolute;inset:0;background-size:cover;transform:scale(1.08);animation:kb 2.6s var(--ease) forwards}
@keyframes kb{to{transform:scale(1)}}
.kg-how-we-work .hero-noise{position:absolute;inset:0;background-image:var(--grain);opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.kg-how-we-work .hero-in{position:relative;z-index:5;margin-top:auto;padding-top:calc(var(--hdr) + 54px);padding-bottom:clamp(32px,5.5vh,66px)}
.kg-how-we-work .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.kg-how-we-work .hero h1 .w>i{display:inline-block;font-style:normal;transform:translateY(112%);transition:transform 1.15s var(--ease)}
.kg-how-we-work .hero.go h1 .w>i{transform:none}
.kg-how-we-work .hero .sub{color:rgba(255,255,255,.64)}
.kg-how-we-work .hero .fade{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.kg-how-we-work .hero.go .fade{opacity:1;transform:none;filter:blur(0)}


.kg-how-we-work .hero{min-height:min(80svh,720px)}
.kg-how-we-work .hero-img{background-position:38% center}
@media (max-aspect-ratio:1/1){.kg-how-we-work .hero-img{background-position:30% center}}
.kg-how-we-work .hero-scrim{position:absolute;inset:0;background:linear-gradient(105deg,rgba(11,13,12,.93) 0%,
  rgba(11,13,12,.68) 38%,rgba(11,13,12,.22) 76%,rgba(11,13,12,.38) 100%)}
.kg-how-we-work .hero-scrim2{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,12,.93) 0%,
  rgba(11,13,12,.44) 32%,rgba(11,13,12,0) 60%)}
.kg-how-we-work .hero h1{font-size:clamp(2.2rem,5.6vw,5rem);letter-spacing:-.05em;line-height:1;max-width:16ch;
  margin-bottom:clamp(16px,2.2vh,26px)}
.kg-how-we-work .hero .sub{max-width:52ch}

/* rules strip */
.kg-how-we-work .rules{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,34px);
  border-top:1px solid rgba(11,13,12,.16);padding-top:clamp(24px,3vw,40px)}
.kg-how-we-work .rule-i .k{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent);display:block;margin-bottom:14px}
.kg-how-we-work .rule-i h3{font-size:clamp(1.05rem,1.9vw,1.45rem);letter-spacing:-.038em;line-height:1.1;margin-bottom:10px}
.kg-how-we-work .rule-i p{color:rgba(11,13,12,.62);font-size:14.5px;line-height:1.58}

/* STAGES: sticky chapter marker + input/activity/output columns */
.kg-how-we-work .stage-wrap{display:grid;grid-template-columns:clamp(120px,15vw,210px) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);align-items:start}
.kg-how-we-work .chapter{position:sticky;top:max(calc(var(--hdr) + var(--wp-admin-offset,0px) + 12px),clamp(24px,10vh,110px))}
.kg-how-we-work .chapter .big{font-size:clamp(3.2rem,8vw,7rem);font-weight:700;letter-spacing:-.06em;line-height:.86;
  color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums;display:block}
.kg-how-we-work .chapter .of{color:rgba(255,255,255,.32);margin-top:6px;display:block}
.kg-how-we-work .chapter .ring{margin-top:22px;width:clamp(56px,7vw,80px);aspect-ratio:1;transform:rotate(-90deg)}
.kg-how-we-work .chapter .ring circle{fill:none;stroke-width:2}
.kg-how-we-work .chapter .ring .bg{stroke:rgba(255,255,255,.14)}
.kg-how-we-work .chapter .ring .fg{stroke:var(--accent-hi);stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:301.6;
  transition:stroke-dashoffset .35s linear}
.kg-how-we-work .chapter .nowlab{margin-top:16px;color:rgba(255,255,255,.5);max-width:16ch;font-size:13px;line-height:1.4}

.kg-how-we-work .stage{padding:clamp(40px,8vh,110px) 0;border-bottom:1px solid rgba(255,255,255,.16);width:auto;flex:initial}
.kg-how-we-work .stage:first-child{padding-top:0}
.kg-how-we-work .stage:last-child{border-bottom:0}
.kg-how-we-work .stage-h{display:flex;align-items:baseline;gap:clamp(12px,2vw,22px);margin-bottom:clamp(16px,2.4vw,26px)}
.kg-how-we-work .stage-h .n{font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--accent-hi);flex:0 0 auto}
.kg-how-we-work .stage-h h3{font-size:clamp(1.5rem,3.6vw,2.9rem);letter-spacing:-.048em;line-height:1.02}
.kg-how-we-work .stage>p{color:rgba(255,255,255,.62);max-width:58ch;margin-bottom:clamp(24px,3.4vw,40px)}
.kg-how-we-work .io{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);border-radius:14px;overflow:hidden}
.kg-how-we-work .io div{background:var(--ink);padding:clamp(16px,2vw,24px)}
.kg-how-we-work .io dt{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.38);margin-bottom:12px}
.kg-how-we-work .io dd{font-size:14px;line-height:1.55;color:rgba(255,255,255,.7);padding-left:15px;position:relative;
  letter-spacing:-.008em}
.kg-how-we-work .io dd+dd{margin-top:9px}
.kg-how-we-work .io dd::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--accent-hi)}
.kg-how-we-work .io .out dd{color:#fff}
.kg-how-we-work .dur{display:flex;align-items:center;gap:14px;margin-top:clamp(18px,2.4vw,26px)}
.kg-how-we-work .dur .track{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;max-width:340px}
.kg-how-we-work .dur .track i{display:block;height:100%;width:0;background:var(--accent-hi);transition:width 1.1s var(--ease)}
.kg-how-we-work .dur span{color:rgba(255,255,255,.42)}

/* engagement models */
.kg-how-we-work .models{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.kg-how-we-work .model{border:1px solid rgba(11,13,12,.16);border-radius:16px;padding:clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column;gap:14px;background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:border-color .45s,transform .5s var(--ease),background-color .45s}
.kg-how-we-work .model:hover{border-color:rgba(11,13,12,.4);transform:translateY(-4px);background:#fff}
.kg-how-we-work .model .k{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.kg-how-we-work .model h3{font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.04em;line-height:1.08}
.kg-how-we-work .model p{color:rgba(11,13,12,.62);font-size:14.5px;line-height:1.55}
.kg-how-we-work .model ul{list-style:none;margin-top:auto;padding-top:18px;border-top:1px solid rgba(11,13,12,.14)}
.kg-how-we-work .model li{font-size:13.5px;color:rgba(11,13,12,.6);padding:6px 0 6px 15px;position:relative}
.kg-how-we-work .model li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:1px;background:var(--accent)}

/* what we will not do */
.kg-how-we-work .wont{border-top:1px solid rgba(255,255,255,.16)}
.kg-how-we-work .wont-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.6vw,36px);
  padding:clamp(18px,2.4vw,28px) 0;border-bottom:1px solid rgba(255,255,255,.16);align-items:baseline}
.kg-how-we-work .wont-row .x{width:20px;height:20px;flex:0 0 auto;position:relative;opacity:.6}
.kg-how-we-work .wont-row .x::before,.kg-how-we-work .wont-row .x::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:1.5px;
  background:var(--warn);transform:translate(-50%,-50%) rotate(45deg)}
.kg-how-we-work .wont-row .x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.kg-how-we-work .wont-row b{font-size:clamp(1rem,1.7vw,1.28rem);font-weight:600;letter-spacing:-.03em;display:block;margin-bottom:6px}
.kg-how-we-work .wont-row p{color:rgba(255,255,255,.58);font-size:14.5px;line-height:1.55;max-width:58ch}

@media (max-width:1024px){
  .kg-how-we-work .rules{grid-template-columns:1fr;gap:26px}
  .kg-how-we-work .stage-wrap{grid-template-columns:1fr;gap:0}
  .kg-how-we-work .chapter{position:sticky;top:calc(var(--hdr) + var(--wp-admin-offset,0px));z-index:5;background:var(--ink);padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:16px}
  .kg-how-we-work .chapter .big{font-size:2rem}
  .kg-how-we-work .chapter .of{margin:0}
  .kg-how-we-work .chapter .ring{margin:0 0 0 auto;width:44px}
  .kg-how-we-work .chapter .nowlab{margin:0;max-width:none;flex:1}
  .kg-how-we-work .stage:first-child{padding-top:clamp(30px,5vh,50px)}
  .kg-how-we-work .io{grid-template-columns:1fr}
  .kg-how-we-work .models{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .kg-how-we-work *,.kg-how-we-work *::before,.kg-how-we-work *::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .kg-how-we-work [data-r]{opacity:1;transform:none;filter:none}
  .kg-how-we-work .at .w>i,.kg-how-we-work .hero h1 .w>i{transform:none}
  .kg-how-we-work .hero .fade{opacity:1;transform:none;filter:none}
}